:root{
  color-scheme:light;
  --bg:#f4f6fb;
  --bg-soft:#eef1f7;
  --panel:rgba(255,255,255,.94);
  --panel-solid:#fff;
  --panel-2:#f8f9fc;
  --text:#121826;
  --text-2:#3c465a;
  --muted:#7b8498;
  --line:#e5e8f0;
  --line-strong:#d5d9e4;
  --primary:#6d5dfc;
  --primary-2:#8b5cf6;
  --primary-soft:#f0edff;
  --cyan:#11b8c8;
  --amber:#f59e0b;
  --rose:#ef5b79;
  --green:#16a56a;
  --danger:#e5484d;
  --shadow-sm:0 8px 24px rgba(22,28,45,.06);
  --shadow-md:0 18px 54px rgba(22,28,45,.10);
  --shadow-lg:0 30px 90px rgba(13,18,30,.18);
  --radius:18px;
  --sidebar:246px;
  --transition:180ms ease;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d111b;
  --bg-soft:#111725;
  --panel:rgba(20,27,42,.94);
  --panel-solid:#141b2a;
  --panel-2:#182133;
  --text:#f3f5fb;
  --text-2:#c5ccda;
  --muted:#8e99ae;
  --line:#273249;
  --line-strong:#34405a;
  --primary:#8b7cff;
  --primary-2:#a879ff;
  --primary-soft:#241f47;
  --cyan:#22c5d6;
  --amber:#f6ad2d;
  --rose:#fb718b;
  --green:#22c77a;
  --danger:#ff6b72;
  --shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --shadow-md:0 18px 54px rgba(0,0,0,.24);
  --shadow-lg:0 30px 90px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  background:
    radial-gradient(circle at 84% 0%,rgba(109,93,252,.12),transparent 28%),
    radial-gradient(circle at 18% 100%,rgba(17,184,200,.08),transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-size:14px;
}
button,input,select,textarea{font:inherit}
button{color:inherit}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}
.app-shell{min-height:100vh}
.sidebar{
  position:fixed;inset:0 auto 0 0;z-index:30;
  width:var(--sidebar);padding:22px 16px 16px;
  display:flex;flex-direction:column;
  background:rgba(14,19,31,.96);
  color:#f6f7fb;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:20px 0 60px rgba(10,15,27,.08);
  backdrop-filter:blur(22px);
}
.brand{display:flex;align-items:center;gap:12px;padding:2px 7px 26px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#806cff,#5c4ee9);
  box-shadow:0 10px 28px rgba(109,93,252,.36);
}
.brand-mark svg{width:24px;height:24px}
.brand strong{display:block;font-size:17px;letter-spacing:.02em}
.brand span{display:block;margin-top:3px;font-size:11px;color:#919ab0}
.side-nav{display:flex;flex-direction:column;gap:7px}
.nav-item{
  width:100%;border:0;background:transparent;color:#9ba5b9;border-radius:13px;
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;
  gap:9px;padding:10px 11px;cursor:pointer;text-align:left;
  transition:background var(--transition),color var(--transition),transform var(--transition);
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px)}
.nav-item.active{
  color:#fff;background:linear-gradient(95deg,rgba(109,93,252,.30),rgba(109,93,252,.10));
  box-shadow:inset 0 0 0 1px rgba(143,128,255,.16);
}
.nav-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05)}
.nav-item.active .nav-icon{background:rgba(109,93,252,.35)}
.nav-icon svg{width:18px;height:18px}
.nav-item b{
  min-width:24px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);font-size:11px;font-weight:600;color:#d7dbe5;
}
.nav-item .warn-count{background:rgba(245,158,11,.15);color:#fbc35a}
.sidebar-spacer{flex:1}
.database-card{
  margin:12px 2px;padding:13px;border-radius:15px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
}
.database-status{display:flex;align-items:center;gap:10px}
.status-orb{width:10px;height:10px;border-radius:50%;background:#a0a9bb;box-shadow:0 0 0 5px rgba(160,169,187,.09)}
.status-orb.online{background:#35d48a;box-shadow:0 0 0 5px rgba(53,212,138,.10),0 0 18px rgba(53,212,138,.35)}
.status-orb.error{background:#ff6b72;box-shadow:0 0 0 5px rgba(255,107,114,.10)}
.database-status strong{display:block;font-size:12px}
.database-status span:not(.status-orb){display:block;margin-top:3px;color:#838da2;font-size:10px}
.mini-link{border:0;background:none;padding:8px 0 0;color:#a99eff;font-size:11px;cursor:pointer}
.sidebar-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 3px 0}
.icon-text-button{border:0;background:none;color:#9ba5b9;display:flex;align-items:center;gap:8px;padding:7px;cursor:pointer}
.icon-text-button:hover{color:#fff}
.icon-text-button svg{width:17px;height:17px}
.round-icon-button{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  transition:transform var(--transition),background var(--transition),border var(--transition);
}
.round-icon-button:hover{transform:translateY(-1px);background:var(--primary-soft);border-color:rgba(109,93,252,.26);color:var(--primary)}
.sidebar .round-icon-button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#b8c0cf}
.round-icon-button svg{width:18px;height:18px}
.moon-icon{display:none}
html[data-theme="dark"] .sun-icon{display:none}
html[data-theme="dark"] .moon-icon{display:block}
.sidebar-overlay{display:none}

.main-content{margin-left:var(--sidebar);padding:24px 30px 42px;max-width:1680px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.topbar-left{display:flex;align-items:center;gap:13px}
.mobile-menu{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--panel);border-radius:12px;place-items:center}
.mobile-menu svg{width:20px;height:20px}
.eyebrow{margin:0 0 4px;color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.18em}
h1{margin:0;font-size:24px;letter-spacing:-.03em}
.topbar-actions{display:flex;align-items:center;gap:9px}
.sync-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11px;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(22,165,106,.36);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(22,165,106,0)}100%{box-shadow:0 0 0 0 rgba(22,165,106,0)}}
.button{
  height:42px;border-radius:12px;border:1px solid transparent;padding:0 15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;
  cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.button:hover{transform:translateY(-1px)}
.button svg{width:17px;height:17px}
.button.primary{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 10px 24px rgba(109,93,252,.24)}
.button.primary:hover{box-shadow:0 14px 30px rgba(109,93,252,.34)}
.button.secondary{background:var(--panel);border-color:var(--line);color:var(--text-2);box-shadow:var(--shadow-sm)}
.button.secondary:hover{border-color:var(--line-strong)}
.button.ghost{background:transparent;border-color:transparent}
.button.compact{height:38px;padding:0 12px;font-size:12px}
.danger-text{color:var(--danger)!important}

.search-hero{
  position:relative;overflow:visible;border-radius:24px;padding:26px 28px 24px;margin-bottom:16px;
  color:#fff;background:
    linear-gradient(120deg,rgba(9,15,29,.98),rgba(23,27,52,.97)),
    #111827;
  box-shadow:0 24px 65px rgba(21,26,48,.18);
}
.search-hero:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;mask-image:linear-gradient(to right,black,transparent 88%);
}
.search-glow{
  position:absolute;width:330px;height:330px;right:-60px;top:-145px;border-radius:50%;
  background:radial-gradient(circle,rgba(109,93,252,.58),rgba(109,93,252,0) 67%);
  pointer-events:none;
}
.search-copy{position:relative;z-index:1;max-width:760px}
.hero-kicker{color:#a99eff;font-size:11px;font-weight:800;letter-spacing:.14em}
.search-copy h2{margin:7px 0 5px;font-size:25px;letter-spacing:-.03em}
.search-copy p{margin:0;color:#9ca6ba;font-size:12px}
.smart-search{
  position:relative;z-index:5;margin-top:20px;max-width:900px;height:58px;
  display:flex;align-items:center;border-radius:16px;background:#fff;
  box-shadow:0 15px 45px rgba(0,0,0,.26);
}
.smart-search:focus-within{box-shadow:0 15px 45px rgba(0,0,0,.32),0 0 0 4px rgba(139,124,255,.22)}
.search-icon{position:absolute;left:19px;width:22px;height:22px;color:#7d8799}
.smart-search input{
  width:100%;height:100%;border:0;outline:0;background:transparent;color:#111827;
  padding:0 106px 0 55px;font-size:15px;font-weight:500;
}
.smart-search input::placeholder{color:#9aa3b3}
.search-clear{display:none;position:absolute;right:65px;width:28px;height:28px;border:0;border-radius:9px;background:#f1f3f7;color:#778195;font-size:20px;line-height:1;cursor:pointer}
.smart-search.has-value .search-clear{display:grid;place-items:center}
.smart-search kbd{
  position:absolute;right:14px;border:1px solid #dfe3ea;border-bottom-width:2px;border-radius:8px;
  color:#7f8796;background:#f7f8fa;padding:5px 8px;font-size:10px;font-family:inherit;
}
.suggestion-panel{
  position:absolute;top:66px;left:0;right:0;display:none;overflow:hidden;
  color:var(--text);background:var(--panel-solid);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);
}
.suggestion-panel.show{display:block}
.suggestion-title{padding:11px 14px 7px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em}
.suggestion-item{
  width:100%;border:0;background:transparent;padding:11px 14px;display:grid;
  grid-template-columns:minmax(90px,140px) 1fr auto;align-items:center;gap:12px;
  text-align:left;cursor:pointer;border-top:1px solid var(--line);
}
.suggestion-item:hover,.suggestion-item.active{background:var(--primary-soft)}
.suggestion-code{font-family:"SFMono-Regular",Consolas,monospace;color:var(--primary);font-size:11px}
.suggestion-main{min-width:0}
.suggestion-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.suggestion-main span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.suggestion-stock{font-size:10px;color:var(--muted)}
.quick-filter-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.quick-chip{
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.06);color:#aeb6c7;
  border-radius:999px;padding:7px 12px;font-size:11px;cursor:pointer;transition:all var(--transition);
}
.quick-chip:hover,.quick-chip.active{background:rgba(139,124,255,.18);border-color:rgba(158,144,255,.35);color:#fff}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:16px}
.stat-card{
  position:relative;overflow:hidden;min-height:116px;padding:18px;border:1px solid var(--line);
  background:var(--panel);border-radius:18px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:14px;
}
.stat-card:after{content:"";position:absolute;width:95px;height:95px;right:-28px;top:-37px;border-radius:50%;background:currentColor;opacity:.07}
.stat-icon{width:46px;height:46px;flex:0 0 46px;border-radius:15px;display:grid;place-items:center;background:currentColor}
.stat-icon svg{width:22px;height:22px;color:#fff}
.stat-card>div:last-child{min-width:0}
.stat-card span{display:block;color:var(--muted);font-size:11px}
.stat-card strong{display:block;margin:3px 0 2px;color:var(--text);font-size:25px;line-height:1.15;letter-spacing:-.04em}
.stat-card small{display:block;color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accent-violet{color:var(--primary)}
.accent-cyan{color:var(--cyan)}
.accent-amber{color:var(--amber)}
.accent-rose{color:var(--rose)}

.content-card{
  overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel);
  box-shadow:var(--shadow-sm);
}
.content-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 18px;
  border-bottom:1px solid var(--line);
}
.result-summary strong{display:block;font-size:14px}
.result-summary span{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.filter-controls{display:flex;align-items:center;gap:8px}
.select-control{
  min-width:126px;height:40px;padding:0 9px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel-2);display:flex;align-items:center;gap:7px;
}
.select-control span{color:var(--muted);font-size:10px;white-space:nowrap}
.select-control select{
  min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:11px;cursor:pointer;
}
.view-switch{height:40px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);display:flex}
.view-switch button{width:34px;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;display:grid;place-items:center}
.view-switch button.active{color:var(--primary);background:var(--panel-solid);box-shadow:0 2px 7px rgba(15,23,42,.10)}
.view-switch svg{width:16px;height:16px}
.active-filter-bar{display:none;gap:7px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.active-filter-bar.show{display:flex}
.active-token{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:10px}
.active-token button{border:0;background:none;color:inherit;cursor:pointer;padding:0;font-size:14px;line-height:1}
.table-scroll{overflow:auto;max-height:calc(100vh - 365px);min-height:370px}
.product-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.product-table th{
  position:sticky;top:0;z-index:3;padding:12px 15px;text-align:left;
  background:var(--panel-2);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.03em;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.product-table td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:middle}
.product-table tbody tr{transition:background var(--transition)}
.product-table tbody tr:hover{background:color-mix(in srgb,var(--primary-soft) 45%,transparent)}
.product-table tbody tr:last-child td{border-bottom:0}
.align-right{text-align:right!important}
.product-info{min-width:280px;display:flex;align-items:flex-start;gap:11px}
.product-avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  color:var(--primary);background:linear-gradient(145deg,var(--primary-soft),var(--panel-2));
  font-size:15px;font-weight:800;
}
.product-name{display:block;color:var(--text);font-weight:700;line-height:1.45;max-width:390px;white-space:normal}
.product-code{display:flex;align-items:center;gap:7px;margin-top:4px;color:var(--muted);font-family:"SFMono-Regular",Consolas,monospace;font-size:10px}
.review-dot{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.tag-stack{display:flex;flex-wrap:wrap;gap:5px;max-width:170px}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);font-size:9px}
.pill.brand{background:color-mix(in srgb,var(--cyan) 9%,var(--panel-2));border-color:color-mix(in srgb,var(--cyan) 18%,var(--line));color:var(--cyan)}
.location-cell{min-width:145px}
.location-line{display:flex;align-items:center;gap:6px;color:var(--text-2);white-space:nowrap}
.location-line+ .location-line{margin-top:5px}
.location-line svg{width:13px;height:13px;color:var(--muted)}
.location-empty{color:var(--muted)}
.stock-cell{min-width:145px}
.stock-head{display:flex;justify-content:space-between;align-items:center;gap:9px}
.stock-number{font-size:14px;font-weight:800}
.stock-label{font-size:9px;padding:3px 6px;border-radius:999px}
.stock-label.healthy{color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent)}
.stock-label.low{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.stock-label.out{color:var(--rose);background:color-mix(in srgb,var(--rose) 12%,transparent)}
.stock-label.unset{color:var(--muted);background:var(--panel-2)}
.stock-track{height:5px;margin-top:7px;border-radius:999px;background:var(--line);overflow:hidden}
.stock-fill{height:100%;border-radius:inherit;background:var(--green)}
.stock-fill.low{background:var(--amber)}
.stock-fill.out{background:var(--rose);width:4%!important}
.stock-fill.unset{background:var(--line-strong);width:4%!important}
.price{font-weight:750;font-variant-numeric:tabular-nums}
.source-cell{color:var(--muted);white-space:nowrap}
.source-cell strong{display:block;color:var(--text-2);font-size:11px}
.source-cell span{display:block;margin-top:3px;font-size:9px}
.row-actions{display:flex;justify-content:flex-end;gap:5px}
.row-action{
  width:31px;height:31px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:all var(--transition);
}
.row-action:hover{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 25%,var(--line));background:var(--primary-soft)}
.row-action svg{width:15px;height:15px}
mark{background:rgba(250,204,21,.28);color:inherit;border-radius:3px;padding:0 1px}

.product-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:15px}
.product-card{
  border:1px solid var(--line);border-radius:17px;background:var(--panel-solid);padding:15px;
  transition:transform var(--transition),box-shadow var(--transition),border var(--transition);
}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--primary) 20%,var(--line))}
.product-card-top{display:flex;justify-content:space-between;gap:12px}
.product-card h3{margin:7px 0 4px;font-size:13px;line-height:1.5}
.card-code{color:var(--primary);font-size:9px;font-family:"SFMono-Regular",Consolas,monospace}
.card-stock{font-size:20px;font-weight:800}
.card-stock small{display:block;color:var(--muted);font-size:8px;font-weight:500;text-align:right}
.card-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.card-meta div{padding:9px;border-radius:10px;background:var(--panel-2)}
.card-meta span{display:block;color:var(--muted);font-size:8px}
.card-meta strong{display:block;margin-top:3px;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}

.empty-state{min-height:380px;padding:50px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.empty-illustration{width:125px;height:105px;color:var(--primary);opacity:.45}
.empty-illustration svg{width:100%;height:100%}
.empty-state h3{margin:10px 0 5px}
.empty-state p{margin:0 0 16px;color:var(--muted);font-size:11px}
.loading-state{padding:10px 16px;min-height:370px}
.skeleton-row{height:58px;margin:9px 0;border-radius:12px;background:linear-gradient(90deg,var(--panel-2),var(--line),var(--panel-2));background-size:220% 100%;animation:shimmer 1.35s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.pagination-bar{
  min-height:56px;padding:10px 16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;
}
.pagination-bar select{border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);padding:4px 6px}
.pagination{display:flex;align-items:center;gap:5px}
.page-button{
  min-width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:10px;
}
.page-button:hover,.page-button.active{color:#fff;border-color:var(--primary);background:var(--primary)}
.page-button:disabled{opacity:.35;cursor:not-allowed}
.page-ellipsis{padding:0 4px}

.detail-drawer{
  position:fixed;z-index:60;inset:0 0 0 auto;width:min(510px,100%);display:flex;flex-direction:column;
  background:var(--panel-solid);box-shadow:var(--shadow-lg);
  transform:translateX(104%);transition:transform 260ms cubic-bezier(.2,.8,.2,1);
}
.detail-drawer.open{transform:none}
.drawer-overlay{position:fixed;z-index:55;inset:0;background:rgba(7,10,18,.55);opacity:0;pointer-events:none;transition:opacity var(--transition);backdrop-filter:blur(2px)}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer-header,.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid var(--line);
}
.drawer-kicker,.modal-kicker{display:block;color:var(--primary);font-size:9px;font-weight:800;letter-spacing:.14em}
.drawer-header h2,.modal-header h2{margin:4px 0 0;font-size:18px;line-height:1.35}
.drawer-body{flex:1;overflow:auto;padding:18px 20px}
.drawer-footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--panel-solid)}
.detail-hero{
  padding:17px;border-radius:17px;color:#fff;background:linear-gradient(135deg,#171d31,#2b2453);
  box-shadow:0 16px 36px rgba(31,29,61,.20);
}
.detail-code{font-size:10px;color:#b7b2ff;font-family:"SFMono-Regular",Consolas,monospace}
.detail-hero h3{margin:7px 0 12px;font-size:16px;line-height:1.55}
.detail-hero-meta{display:flex;flex-wrap:wrap;gap:7px}
.detail-hero-meta span{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.09);color:#cbd1df;font-size:9px}
.detail-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0}
.detail-stat{padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2)}
.detail-stat span{display:block;color:var(--muted);font-size:9px}
.detail-stat strong{display:block;margin-top:4px;font-size:14px}
.detail-section{margin-top:19px}
.detail-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.detail-section-title h4{margin:0;font-size:12px}
.detail-section-title span{color:var(--muted);font-size:9px}
.info-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.info-item{padding:10px;border:1px solid var(--line);border-radius:11px}
.info-item span{display:block;color:var(--muted);font-size:8px}
.info-item strong{display:block;margin-top:4px;font-size:10px;word-break:break-all}
.source-record,.log-record{padding:11px;border:1px solid var(--line);border-radius:12px;margin-top:7px}
.source-record-top,.log-record-top{display:flex;justify-content:space-between;gap:10px}
.source-record strong,.log-record strong{font-size:10px}
.source-record span,.log-record span{color:var(--muted);font-size:9px}
.record-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;color:var(--muted);font-size:9px}
.image-link{border:0;background:none;color:var(--primary);cursor:pointer;padding:0;font-size:9px}
.remark-box{padding:11px;border-radius:11px;background:color-mix(in srgb,var(--amber) 9%,var(--panel-2));color:var(--text-2);font-size:10px;line-height:1.6}

.modal-layer{
  position:fixed;z-index:80;inset:0;padding:22px;display:none;align-items:center;justify-content:center;
  background:rgba(7,10,18,.62);backdrop-filter:blur(4px);
}
.modal-layer.open{display:flex}
.modal-card{
  width:min(620px,100%);max-height:min(90vh,880px);overflow:hidden;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow-lg);
}
.modal-wide{width:min(880px,100%)}
.modal-small{width:min(450px,100%)}
.modal-gallery{width:min(1050px,100%)}
.modal-body{max-height:calc(90vh - 145px);overflow:auto;padding:20px}
.modal-footer{display:flex;align-items:center;gap:8px;padding:13px 20px;border-top:1px solid var(--line);background:var(--panel-solid)}
.footer-spacer{flex:1}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.compact-grid{margin-top:15px}
.field{display:block}
.field.span-2{grid-column:span 2}
.field.span-3{grid-column:span 3}
.field>span{display:block;margin:0 0 6px;color:var(--text-2);font-size:10px;font-weight:650}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:11px;background:var(--panel-2);
  color:var(--text);outline:none;padding:0 11px;transition:border var(--transition),box-shadow var(--transition),background var(--transition);
}
.field input,.field select{height:41px}
.field textarea{padding-top:10px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);background:var(--panel-solid);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent)}
.stock-product-card{padding:15px;border-radius:15px;background:linear-gradient(135deg,var(--primary-soft),var(--panel-2));display:flex;align-items:center;justify-content:space-between;gap:15px}
.stock-product-card span{display:block;color:var(--primary);font-size:9px;font-family:"SFMono-Regular",Consolas,monospace}
.stock-product-card strong{display:block;margin-top:4px;font-size:13px}
.current-stock{text-align:right}
.current-stock small{display:block;color:var(--muted);font-size:8px}
.current-stock b{font-size:25px}
.segmented-control{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:15px;padding:4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.segmented-control button{height:35px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}
.segmented-control button.active{background:var(--panel-solid);color:var(--primary);box-shadow:0 3px 10px rgba(15,23,42,.09);font-weight:700}
.stock-preview{margin-top:13px;padding:11px;border-radius:11px;background:color-mix(in srgb,var(--green) 9%,var(--panel-2));color:var(--text-2);font-size:10px}
.stock-preview strong{color:var(--green);font-size:14px}
.lock-visual{width:68px;height:68px;margin:0 auto 15px;border-radius:22px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
.lock-visual svg{width:31px;height:31px}
.modal-description{margin:0 0 15px;color:var(--muted);font-size:10px;line-height:1.7;text-align:center}
.modal-description code{color:var(--primary);font-family:"SFMono-Regular",Consolas,monospace}
.form-error{min-height:15px;margin:7px 0 0;color:var(--danger);font-size:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery-card{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--panel-2)}
.gallery-thumb{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;cursor:zoom-in;background:var(--line)}
.gallery-info{padding:11px}
.gallery-info strong{display:block;font-size:10px}
.gallery-info span{display:block;margin-top:4px;color:var(--muted);font-size:9px}
.image-lightbox{
  position:fixed;z-index:100;inset:0;display:none;align-items:center;justify-content:center;padding:25px;
  background:rgba(2,4,10,.92);backdrop-filter:blur(8px);
}
.image-lightbox.open{display:flex}
.image-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 30px 100px rgba(0,0,0,.4)}
.lightbox-close{position:absolute;right:22px;top:22px;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.lightbox-close svg{width:20px;height:20px}

.toast-stack{position:fixed;z-index:120;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  min-width:270px;max-width:390px;padding:12px 14px;border-radius:13px;background:#151b29;color:#fff;
  box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:10px;animation:toast-in .22s ease;
}
.toast.success{border-left:3px solid #35d48a}
.toast.error{border-left:3px solid #ff6b72}
.toast.info{border-left:3px solid #8b7cff}
.toast strong{display:block;font-size:11px}
.toast span{display:block;margin-top:2px;color:#aab2c2;font-size:9px;line-height:1.45}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.fatal-card{
  margin:40px auto;max-width:700px;padding:28px;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));
  border-radius:20px;background:var(--panel);box-shadow:var(--shadow-md);text-align:center;
}
.fatal-card h2{margin:12px 0 8px}
.fatal-card p{color:var(--muted);line-height:1.7}
.fatal-card code{display:block;margin:12px 0;padding:12px;border-radius:10px;background:var(--panel-2);color:var(--primary)}

@media(max-width:1240px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .product-card-grid{grid-template-columns:repeat(2,1fr)}
  .filter-controls{flex-wrap:wrap;justify-content:flex-end}
}
@media(max-width:980px){
  :root{--sidebar:226px}
  .main-content{padding:20px}
  .content-toolbar{align-items:flex-start}
  .filter-controls{max-width:520px}
  .sync-pill{display:none}
}
@media(max-width:800px){
  .sidebar{transform:translateX(-104%);transition:transform 240ms ease}
  .sidebar.open{transform:none}
  .sidebar-overlay{position:fixed;z-index:25;inset:0;background:rgba(7,10,18,.55);backdrop-filter:blur(2px)}
  .sidebar-overlay.open{display:block}
  .main-content{margin-left:0;padding:15px}
  .mobile-menu{display:grid}
  .search-hero{padding:22px 18px}
  .topbar-actions .secondary{display:none}
  .content-toolbar{flex-direction:column}
  .filter-controls{width:100%;justify-content:flex-start}
  .select-control{flex:1}
  .table-scroll{max-height:none}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .main-content{padding:11px}
  .topbar{align-items:flex-start}
  .topbar-actions{gap:6px}
  .topbar-actions .button.primary{width:42px;padding:0;font-size:0}
  .topbar-actions .button.primary svg{margin:0}
  h1{font-size:20px}
  .search-copy h2{font-size:20px}
  .search-copy p{line-height:1.6}
  .smart-search{height:54px}
  .smart-search kbd{display:none}
  .smart-search input{padding-right:58px}
  .search-clear{right:14px}
  .quick-filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .quick-chip{white-space:nowrap}
  .stat-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{min-height:102px;padding:13px;gap:9px}
  .stat-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px}
  .stat-card strong{font-size:21px}
  .stat-card small{display:none}
  .filter-controls{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .select-control{min-width:0}
  .view-switch{grid-column:span 2;justify-self:end}
  .product-table{min-width:820px}
  .product-card-grid{grid-template-columns:1fr;padding:10px}
  .pagination-bar{flex-direction:column;gap:9px}
  .form-grid{grid-template-columns:1fr}
  .field.span-2,.field.span-3{grid-column:span 1}
  .modal-layer{padding:10px;align-items:flex-end}
  .modal-card{max-height:94vh;border-radius:20px 20px 10px 10px}
  .modal-body{max-height:calc(94vh - 145px)}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:8px}
  .drawer-footer .button{flex:1}
  .detail-stat-grid{grid-template-columns:repeat(3,1fr)}
  .info-list{grid-template-columns:1fr}
  .suggestion-item{grid-template-columns:92px 1fr}
  .suggestion-stock{display:none}
}
@media(max-width:420px){
  .stat-grid{grid-template-columns:1fr}
  .stat-card{min-height:88px}
  .gallery-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
.plain-button{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.plain-button:hover{color:var(--primary)}