*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;background:#e0f2fe;color:#1e293b;line-height:1.5;overflow-x:hidden}
a{color:#3070a6;text-decoration:none}a:hover{text-decoration:underline}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#64748b}

/* AppBar */
.appbar{position:fixed;top:0;left:0;right:0;height:56px;background:#f8fafc;border-bottom:1px solid #cbd5e1;z-index:100;display:flex;align-items:center;padding:0 16px;gap:12px}
.appbar .logo{font-size:18px;font-weight:700;color:#075985;white-space:nowrap}
.appbar .logo small{font-size:11px;color:#64748b;font-weight:400;margin-left:4px}
.appbar .search-wrap{flex:1;max-width:520px;position:relative}
.appbar .search-wrap input{width:100%;height:36px;padding:0 36px 0 32px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#1e293b;font-size:13px;outline:none;transition:border-color .2s}
.appbar .search-wrap input:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,0.15)}
.appbar .search-wrap input::placeholder{color:#94a3b8}
.appbar .search-wrap .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:14px}
.appbar .search-wrap .clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#64748b;font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;display:none}
.appbar .search-wrap .clear-btn:hover{color:#475569}
.appbar .search-wrap.has-value .clear-btn{display:block}
.appbar .menu-btn{display:none;background:none;border:none;color:#64748b;font-size:20px;cursor:pointer;padding:4px}

/* Layout */
.container{display:flex;min-height:100vh;padding-top:56px}

/* Sidebar */
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:250px;background:#f8fafc;border-right:1px solid #cbd5e1;z-index:90;display:flex;flex-direction:column;transition:transform .3s}
.sidebar .sidebar-title{padding:14px 16px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#64748b}
.sidebar .nav-list{flex:1;overflow-y:auto;padding:0 6px 12px;min-height:0}
.sidebar .nav-item{width:100%;text-align:left;padding:7px 10px 7px 14px;border-radius:6px;border:none;background:transparent;color:#334155;cursor:pointer;font-size:13px;line-height:1.3;position:relative;margin-bottom:1px;transition:all .15s;display:flex;align-items:flex-start;gap:8px;font-family:inherit}
.sidebar .nav-item:hover{background:#e0f2fe}
.sidebar .nav-item.active{background:rgba(14,165,233,0.15);color:#075985}
.sidebar .nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:#0ea5e9;border-radius:0 2px 2px 0}
.sidebar .nav-item .dot{width:7px;height:7px;border-radius:50%;margin-top:4px;flex-shrink:0}
.sidebar .nav-item .nav-info{flex:1;min-width:0}
.sidebar .nav-item .nav-id{font-size:10px;font-family:monospace;color:#94a3b8}
.sidebar .nav-item.active .nav-id{color:#0ea5e9}
.sidebar .nav-item .nav-cn{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-item .nav-en{font-size:10px;color:#94a3b8;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-item.active .nav-en{color:#0ea5e9;opacity:0.6}
.sidebar .nav-item .nav-count{font-size:10px;color:#64748b;background:#e2e8f0;padding:1px 5px;border-radius:10px;font-family:monospace;flex-shrink:0;margin-top:2px}
.sidebar .nav-item .nav-expand{font-size:10px;color:#94a3b8;flex-shrink:0;margin-top:2px;transition:transform 0.2s}
.sidebar .nav-item .nav-expand:hover{color:#0ea5e9}
.sidebar .nav-sublist{margin:0 0 4px 0;padding:4px 0 4px 24px;border-left:1px solid #e2e8f0}
.sidebar .nav-subitem{width:100%;text-align:left;padding:6px 10px 6px 12px;border-radius:6px;border:none;background:transparent;color:#475569;cursor:pointer;font-size:12px;line-height:1.4;position:relative;margin-bottom:1px;transition:all .15s;display:flex;align-items:flex-start;gap:6px;font-family:inherit}
.sidebar .nav-subitem:hover{background:#e0f2fe;color:#0ea5e9}
.sidebar .nav-subitem::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:12px;background:#cbd5e1;border-radius:1px;transition:background .15s}
.sidebar .nav-subitem:hover::before{background:#0ea5e9}
.sidebar .nav-subitem .nav-sub-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .sidebar-footer{padding:10px;border-top:1px solid #e2e8f0;font-size:10px;color:#94a3b8;text-align:center}

/* Main */
.main{margin-left:250px;flex:1;padding:20px 24px 40px;max-width:calc(100vw - 250px)}

/* Hero */
.hero{margin-bottom:28px}
.hero h1{font-size:24px;font-weight:700;color:#1e293b;margin-bottom:6px}
.hero .subtitle{font-size:12px;color:#64748b;margin-bottom:16px}
.hero .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hero .stat-card{background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:14px 16px;transition:border-color .2s}
.hero .stat-card:hover{border-color:#0ea5e9}
.hero .stat-card .stat-label{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:#94a3b8;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.hero .stat-card .stat-value{font-size:20px;font-weight:700;color:#0ea5e9;font-variant-numeric:tabular-nums}

/* Query Section */
.query-section{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.query-card{background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:16px}
.query-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:12px}
.query-form{display:flex;gap:10px}
.query-input{flex:1;height:36px;padding:0 12px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#1e293b;font-size:13px;outline:none;transition:border-color .2s}
.query-input:focus{border-color:#0ea5e9}
.query-input::placeholder{color:#94a3b8}
.query-btn{height:36px;padding:0 16px;border-radius:8px;border:none;background:#0ea5e9;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s;white-space:nowrap;min-width:80px}
.query-btn:hover{background:#0284c7}
.query-btn.secondary{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}
.query-btn.secondary:hover{background:#e2e8f0}
.query-btn.full-width{width:100%}
.query-link{display:block;color:#0ea5e9;text-decoration:none}
.query-link:hover{text-decoration:underline}

/* Divider */
.section-divider{border:none;border-top:1px solid #cbd5e1;margin:0 0 28px 0;opacity:0.5}

/* Category Section */
.cat-section{margin-bottom:32px;scroll-margin-top:70px}
.cat-header{border-radius:12px;padding:20px 24px;margin-bottom:20px;position:relative;overflow:hidden}
.cat-header .cat-pattern{position:absolute;inset:0;opacity:8%;background-image:radial-gradient(circle at 2px 2px,#fff 1px,transparent 0);background-size:24px 24px}
.cat-header .cat-content{position:relative;z-index:1}
.cat-header .cat-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
.cat-header .cat-badge-id{padding:3px 10px;border-radius:6px;background:rgba(255,255,255,0.18);color:#fff;font-size:11px;font-family:monospace;font-weight:600}
.cat-header .cat-badge-count{padding:3px 10px;border-radius:6px;background:rgba(255,255,255,0.12);color:#fff;font-size:11px}
.cat-header h2{font-size:20px;font-weight:600;color:#fff}
.cat-header h2 .en{font-weight:400;opacity:0.7;font-size:15px;margin-left:6px}
.cat-header .cat-desc{font-size:12px;color:rgba(255,255,255,0.75);margin-top:6px;line-height:1.6;max-width:800px}

/* Subcategory */
.sub-section{margin-bottom:20px;scroll-margin-top:70px}
.sub-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sub-title .sub-line{width:3px;height:18px;background:#0ea5e9;border-radius:2px;flex-shrink:0}
.sub-title h3{font-size:15px;font-weight:600;color:#1e293b}
.sub-desc{font-size:11px;color:#64748b;font-style:italic;margin:-4px 0 10px 13px;line-height:1.5;max-width:700px}

/* Table */
.table-wrap{width:100%;overflow-x:auto;border-radius:8px;border:1px solid #cbd5e1;margin-bottom:16px}
.data-table{width:100%;border-collapse:collapse;min-width:500px;font-size:12px}
.data-table thead th{background:#f1f5f9;color:#64748b;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;padding:9px 12px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:2}
.data-table tbody tr{transition:background .1s}
.data-table tbody tr:nth-child(odd){background:#fff}
.data-table tbody tr:nth-child(even){background:#f8fafc}
.data-table tbody tr:hover{background:rgba(14,165,233,0.08)}
.data-table tbody td{padding:8px 12px;color:#334155;vertical-align:top}
.data-table tbody td:first-child{padding:4px 8px;white-space:nowrap}
.data-table tbody td .part-number{font-size:13px;font-weight:600;color:#0ea5e9;letter-spacing:0.01em}
.data-table tbody td .part-number:hover{color:#0284c7}
.data-table tbody td.truncate{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Empty state */
.empty-state{text-align:center;padding:60px 20px}
.empty-state .empty-icon{font-size:48px;color:#334155;margin-bottom:12px}
.empty-state h3{font-size:16px;color:#475569;margin-bottom:4px}
.empty-state p{font-size:12px;color:#475569}

/* Scroll to top */
.scroll-top{position:fixed;bottom:20px;right:20px;width:42px;height:42px;border-radius:50%;background:#0ea5e9;color:#fff;border:none;font-size:18px;cursor:pointer;z-index:80;box-shadow:0 4px 12px rgba(14,165,233,0.3);opacity:0;transform:translateY(10px);transition:all .2s;display:flex;align-items:center;justify-content:center}
.scroll-top.visible{opacity:1;transform:translateY(0)}
.scroll-top:hover{background:#0284c7;transform:scale(1.05)}

/* Footer */
.site-footer{margin-top:40px;padding-top:16px;border-top:1px solid #e2e8f0;text-align:center;font-size:11px;color:#94a3b8}
.site-footer a{color:#0ea5e9}

/* Mobile overlay */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:85}

/* Responsive */
@media(max-width:1024px){
  .hero .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .appbar .menu-btn{display:block}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .mobile-overlay.show{display:block}
  .main{margin-left:0;max-width:100vw;padding:16px 12px 30px}
  .hero h1{font-size:20px}
  .hero .stats{grid-template-columns:repeat(2,1fr)}
  .cat-header h2{font-size:17px}
  .cat-header h2 .en{font-size:13px}
  .query-section{grid-template-columns:1fr}
  .query-form{flex-wrap:wrap}
  .query-input{min-width:150px}
}
@media(max-width:480px){
  .hero .stats{grid-template-columns:1fr 1fr;gap:8px}
  .hero .stat-card{padding:10px 12px}
  .hero .stat-card .stat-value{font-size:16px}
  .appbar .logo{font-size:15px}
  .data-table{font-size:11px}
  .data-table tbody td,.data-table thead th{padding:6px 8px}
}