:root{
  --bg:#F7F6F3; --card:#FFFFFF; --border:#E3E0D8; --ink:#1F2421; --muted:#6B7069;
  --accent:#1A5E63; --accent-deep:#12454A; --gold:#B08D2E; --danger:#A33B2E;
  --success:#2E6B3F; --radius:12px;
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--bg);}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh; -webkit-tap-highlight-color:transparent;
}
.hidden{display:none !important;}
#app{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:0 16px; min-height:100vh;}

header, .app-header, #appHeader{padding-top: calc(16px + var(--sat));}
header.top{display:flex; align-items:center; justify-content:space-between; padding:18px 0 12px; padding-top: calc(16px + var(--sat));}
header.top .brand{display:flex; flex-direction:column; gap:2px;}
header.top .brand .mark{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700;}
header.top .brand h1{margin:0; font-size:22px; font-weight:600; letter-spacing:-.02em;}
header.top .who-block{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
header.top .who-block .who{font-size:12px; color:var(--muted); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.role-badge{font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:#fff; padding:3px 8px; border-radius:20px; font-weight:700;}

.section-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:20px 0 8px; font-weight:700; display:flex; align-items:center; gap:8px;}
.section-label::after{content:""; flex:1; height:0.5px; background:var(--border);}

.card{background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px;}
label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px; padding-left:2px;
}
.row{display:flex; gap:10px;}
.row > div{flex:1;}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input[type=tel],select,textarea{
  position:relative; width:100%; height:52px; padding:16px 14px 6px;
  font-size:15px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  border:1.5px solid var(--border); border-radius:12px; background:#fff; color:var(--ink);
  margin-bottom:16px; outline:none; transition:border-color .15s;
}
input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=email]:focus,
input[type=password]:focus,input[type=tel]:focus,select:focus,textarea:focus{
  border-color:var(--accent);
}
textarea{height:auto; min-height:80px; resize:vertical;}
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236B7069' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:36px;
}
.num{font-family:'Courier New',monospace;}
input.field-error,select.field-error{border-color:var(--danger);}
.field-error-text{font-size:12px; color:var(--danger); margin-top:-12px; margin-bottom:12px; padding-left:2px;}
input.field-ok{border-color:var(--success);}
input, select, textarea{font-size:16px !important;}

button{font-family:inherit; cursor:pointer;}
.btn-primary{width:100%; height:52px; background:var(--accent); color:#fff; border:none; border-radius:14px; padding:14px; font-size:16px; font-weight:700; letter-spacing:.02em; margin-top:6px;}
.btn-primary:disabled{opacity:.5;}
.btn-ghost{background:none; border:1.5px solid var(--border); color:var(--muted); border-radius:10px; padding:8px 12px; font-size:13px;}
.btn-text{background:none; border:none; color:var(--accent); font-size:13px; font-weight:700; padding:4px;}

.pill-row{display:flex; gap:8px; margin-bottom:14px;}
.pill-row button{flex:1; padding:9px; border:0.5px solid var(--border); border-radius:8px; background:#fff; color:var(--muted); font-size:13px; font-weight:700;}
.pill-row button.active{background:var(--accent); color:#fff; border-color:var(--accent);}

.list-row{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius); margin-bottom:8px;}
.list-row .name{font-weight:700; font-size:15px;}
.list-row .code{font-size:12px; color:var(--muted);}
.list-row-click{cursor:pointer;}

.empty{text-align:center; padding:40px 10px; color:var(--muted); font-size:14px;}
.empty .glyph{font-size:28px; display:block; margin-bottom:8px; color:var(--gold);}

.toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:9px 18px; border-radius:20px; font-size:13px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:110; white-space:nowrap;}
.toast.show{opacity:1;}

.err{color:var(--danger); font-size:13px; margin:-4px 0 10px;}
.spin{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:6px;}
@keyframes sp{to{transform:rotate(360deg);}}

/* Login */
body.login-page{display:flex; align-items:center; justify-content:center; padding:24px;}
#loginScreen{width:100%; max-width:400px;}
#loginScreen .mark{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700;}
#loginScreen h1{color:var(--ink); font-size:28px; margin:6px 0 4px; font-weight:600;}
#loginScreen p{color:var(--muted); font-size:13px; margin:0 0 24px;}

/* Dashboard cards */
.dash-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; padding:12px;}
button.dash-card, a.dash-card{display:block; width:100%; text-align:left; font:inherit; text-decoration:none; color:inherit; margin:0; cursor:pointer;}
.dash-card{padding:16px 14px; min-height:auto;}
.dash-card .icon, .dash-card .ico{display:block; font-size:22px; color:var(--accent); margin-bottom:6px;}
.dash-card h3, .dash-card .name{font-weight:700; font-size:15px; margin:0 0 4px;}
.dash-card p, .dash-card .desc{font-size:12px; margin:0; line-height:1.3; color:var(--muted);}
#view, .view-content, main{min-height:40vh; padding-bottom: calc(80px + env(safe-area-inset-bottom));}
.view-loading{min-height:40vh; display:flex; align-items:center; justify-content:center;}
.spin-dark{display:inline-block; width:22px; height:22px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:sp .7s linear infinite;}
.load-retry{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; margin-bottom:10px; background:#fff; border:0.5px solid var(--border); border-radius:8px; font-size:13px; color:var(--muted);}

/* Mobile bottom bar */
nav.tabbar{
  position:fixed; bottom:0; left:0; right:0;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background:var(--card); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
  max-width:520px; margin:0 auto; z-index:100; overflow:visible;
}
nav.tabbar button{
  flex:1; background:none; border:none;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:10px; font-family:-apple-system,sans-serif;
  padding:8px 2px; cursor:pointer;
}
nav.tabbar button .ico{font-size:20px; line-height:1;}
nav.tabbar button.active{color:var(--accent); font-weight:600;}
nav.tabbar button.scan-btn{flex:1.2; position:relative;}
nav.tabbar button.scan-btn .scan-circle{
  width:54px; height:54px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-top:-24px; box-shadow:0 4px 12px rgba(26,94,99,.4);
}
nav.tabbar button.scan-btn .scan-circle .ico{font-size:24px; color:#fff;}
nav.tabbar button.scan-btn span.label{font-size:10px; color:var(--muted); margin-top:2px;}
nav.tabbar button.scan-btn.active .scan-circle{background:var(--accent-deep);}

/* More sheet */
.sheet-bg{position:fixed; inset:0; background:rgba(31,36,33,.4); z-index:40; display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:var(--card); width:100%; max-width:640px; border-radius:16px 16px 0 0; padding:16px 16px 28px; max-height:80vh; overflow-y:auto; border-top:0.5px solid var(--border);}
.sheet h2{margin:0 0 12px; font-size:16px; color:var(--ink);}
.sheet a, .sheet button.sheet-item{display:flex; align-items:center; gap:10px; padding:12px 4px; text-decoration:none; color:var(--ink); border:none; border-bottom:0.5px solid var(--border); font-size:15px; background:none; width:100%; text-align:left; font-family:inherit; border-radius:0;}
.sheet a .ico, .sheet button.sheet-item .ico{width:24px; color:var(--accent); text-align:center;}
.sheet button.sheet-item.active{color:var(--accent); font-weight:700;}
.sheet .sign-out{margin-top:14px; color:var(--danger); border-color:var(--danger);}

/* Desktop sidebar — hidden on mobile */
.sidebar{
  display:none; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; width:220px;
  background:var(--card); border-right:0.5px solid var(--border);
  padding:18px 12px 16px; z-index:10;
}
.sidebar .side-brand{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; padding:0 8px 16px;}
.sidebar .side-group{margin-bottom:14px;}
.sidebar .side-label{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:4px 8px 6px; font-weight:700;}
.sidebar a, .sidebar button[data-mod]{display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:13px; font-weight:600; background:none; border:none; width:100%; text-align:left; font-family:inherit;}
.sidebar a .ico, .sidebar button[data-mod] .ico{width:18px; text-align:center; color:var(--muted);}
.sidebar a.active, .sidebar button[data-mod].active{background:#EEF4F4; color:var(--accent);}
.sidebar a.active .ico, .sidebar button[data-mod].active .ico{color:var(--accent);}
.sidebar .side-foot{margin-top:auto; padding:12px 8px 0; border-top:0.5px solid var(--border);}
.sidebar .side-user{font-size:12px; font-weight:700; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar .side-foot .btn-ghost{width:100%;}

@media (min-width:900px){
  #app{max-width:none; margin:0 0 0 220px; padding:0 28px 32px; padding-bottom:32px;}
  nav.tabbar, .bottom-nav, #bottomNav{display:none;}
  #view, .view-content, main{padding-bottom:0;}
  .toast{bottom:28px;}
  .dash-grid{grid-template-columns:repeat(3, 1fr);}
  .sidebar{display:flex;}
}

/* Dev preview toggle */
.dev-preview{position:fixed; top:10px; right:10px; z-index:100; display:flex; gap:0; background:var(--card); border:0.5px solid var(--border); border-radius:20px; overflow:hidden;}
html.native-app .dev-preview, html.native-app #devPreview, html.native-app #devToggle{display:none !important;}
.dev-preview button{background:none; border:none; padding:6px 10px; font-size:14px; line-height:1; color:var(--muted);}
.dev-preview button.active{background:var(--accent); color:#fff;}

/* Preview: force mobile chrome inside a 430px frame */
html.preview-mobile{background:#D8D5CE;}
html.preview-mobile body{
  max-width:430px; margin:0 auto; min-height:100vh;
  border-left:0.5px solid var(--border); border-right:0.5px solid var(--border);
  background:var(--bg); box-shadow:0 0 0 40px #D8D5CE;
}
html.preview-mobile #app{max-width:none; margin:0; padding-bottom:0;}
html.preview-mobile #view, html.preview-mobile main{padding-bottom: calc(80px + env(safe-area-inset-bottom));}
html.preview-mobile nav.tabbar{
  display:flex !important; max-width:430px; width:100%;
  left:50%; right:auto; transform:translateX(-50%);
}
html.preview-mobile .sheet{max-width:430px;}
html.preview-mobile .sidebar{display:none !important;}
html.preview-mobile .dash-grid{grid-template-columns:1fr 1fr;}
html.preview-mobile .toast{bottom:96px;}

/* Preview: force desktop chrome regardless of viewport */
html.preview-desktop #app{max-width:none; margin:0 0 0 220px; padding:0 28px 32px;}
html.preview-desktop nav.tabbar{display:none !important;}
html.preview-desktop #view, html.preview-desktop main{padding-bottom:0;}
html.preview-desktop .sidebar{display:flex !important;}
html.preview-desktop .dash-grid{grid-template-columns:repeat(3, 1fr);}
html.preview-desktop .toast{bottom:28px;}
html.preview-desktop body.login-page #app,
html.preview-mobile body.login-page #app{margin:0; padding:0;}
html.preview-desktop body.login-page{margin:0;}

/* Masters */
.tag-badge{display:inline-block; font-family:'Courier New',monospace; font-size:11px; font-weight:700; background:#EEF4F4; color:var(--accent); padding:2px 7px; border-radius:6px; border:0.5px solid var(--border);}
.masters-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.masters-card-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.masters-item-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-top:0.5px solid var(--border);}
.masters-item-row:first-child{border-top:none;}
.masters-hint{font-size:12px; color:var(--muted); margin:-4px 0 10px; font-family:'Courier New',monospace;}
.slab-row{display:flex; align-items:flex-end; gap:8px; margin-bottom:8px;}
.slab-row > div{flex:1;}
.slab-row .slab-x{width:auto; flex:0; margin-bottom:10px; color:var(--danger);}
.slab-row.slab-above{background:#EEF4F4; border-radius:8px; padding:8px; margin-top:4px;}
.slab-label{font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:700;}
.copy-check{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px;}
.copy-check input{width:auto; margin:0;}
.rate-row{display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:8px; align-items:end; margin-bottom:8px; padding-bottom:8px; border-bottom:0.5px solid var(--border);}
.rate-row .field-lbl{font-size:10px; color:var(--muted); margin-bottom:2px;}
.rate-row input{margin-bottom:0;}
.rate-row .btn-ghost{width:auto; margin:0; padding:8px 10px;}
@media (max-width:520px){
  .rate-row{grid-template-columns:1fr 1fr; }
  .rate-row .rate-cat{grid-column:1 / -1;}
}

/* Purchase */
.pur-sticky{position:sticky; top:0; z-index:3; background:var(--bg); padding:8px 0 10px; margin-bottom:8px; border-bottom:0.5px solid var(--border);}
.pur-totals{font-family:'Courier New',monospace; font-size:12px; line-height:1.45;}
.pur-diff-pos{color:var(--success); font-weight:700;}
.pur-diff-neg{color:var(--danger); font-weight:700;}
.status-badge{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:#E8E6E1; color:var(--muted);}
.status-badge.open,.status-badge.tagging{background:#F7EFD9; color:#8A6A1A;}
.status-badge.closed,.status-badge.passed,.status-badge.in_stock{background:#E4F0E7; color:var(--success);}
.status-badge.huid_queue{background:#F7EFD9; color:#8A6A1A;}
.status-badge.qc_pending{background:#E4EEF5; color:#1F5A7A;}
.status-badge.rejected{background:#F5E4E1; color:var(--danger);}
.status-badge.on_jangad{background:#E4EEF5; color:#1F5A7A;}
.status-badge.sold{background:#E8E6E1; color:var(--muted);}
.guide-card{border-radius:8px; padding:10px 12px; margin:8px 0 12px; font-size:13px; line-height:1.4;}
.guide-card.amber{background:#FBF3E0; border:0.5px solid #E6D3A0; color:#6B5418;}
.guide-card.red{background:#F8EBE8; border:0.5px solid #E3B5AE; color:#7A2E24;}
.guide-card.blue{background:#EAF2F7; border:0.5px solid #B7CDDB; color:#1F4F66;}
.pur-thumb{width:48px; height:48px; object-fit:cover; border-radius:6px; border:0.5px solid var(--border); background:#eee;}
.pur-thumb.lg{width:96px; height:96px;}
.pur-piece-row{display:grid; grid-template-columns:1fr auto; gap:6px; padding:8px 0; border-top:0.5px solid var(--border); cursor:pointer;}
.pur-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 12px; font-size:14px; font-weight:600;}
.pur-toggle input{width:auto; margin:0;}
.pur-back{background:none; border:none; color:var(--accent); font-weight:700; font-size:14px; padding:0 0 8px; display:inline-flex; align-items:center; gap:4px;}
.camera-box{border:0.5px dashed var(--border); border-radius:8px; padding:14px; text-align:center; margin-bottom:10px; background:#FAFAF8;}
.stepper{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.stepper button{width:36px; height:36px; border-radius:8px; border:0.5px solid var(--border); background:#fff; font-size:18px; font-weight:700;}
.stepper span{font-family:'Courier New',monospace; font-size:16px; min-width:24px; text-align:center;}
.mismatch-pair{display:flex; gap:8px; margin:6px 0;}
.mismatch-pair img{flex:1; max-height:120px; object-fit:cover; border-radius:8px; border:0.5px solid var(--border);}
.pur-sum-line{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; border-bottom:0.5px solid var(--border);}
.pur-sum-line span:first-child{color:var(--muted);}
.pur-sum-line:last-child{border-bottom:none;}
.pur-tag-card{border:0.5px solid var(--border); border-radius:10px; padding:12px; margin-bottom:12px; background:var(--card);}
.pur-tag-card .tag-heading{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px;}
.pur-tag-no{font-size:20px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; font-family:'Courier New',monospace;}
.pur-info-line{font-size:13px; color:var(--muted); margin:4px 0 12px;}
.pur-stone-row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pur-product-tags{margin-top:8px; padding-top:4px;}
.pur-product-tag{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; padding:8px 0; border-top:0.5px solid var(--border); font-size:13px;}
.btn-row{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.btn-row .btn-ghost,.btn-row .btn-primary{flex:1; margin-top:0; min-width:120px;}
.pur-net-row{display:flex; align-items:flex-end; gap:10px; margin-bottom:0;}
.pur-net-row .pur-net-field{flex:1;}
.pur-net-row .pur-net-field input{margin-bottom:0;}
.pur-mismatch-check{display:flex; align-items:center; gap:6px; padding-bottom:10px; font-size:13px; font-weight:600; white-space:nowrap; user-select:none;}
.pur-mismatch-check input{width:auto; margin:0;}

/* Stock */
.stk-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px;}
.stk-head .section-label{margin:0; flex:1;}
.stk-toggle{display:flex; border:0.5px solid var(--border); border-radius:8px; overflow:hidden; background:#fff;}
.stk-toggle button{background:none; border:none; padding:7px 12px; font-size:13px; font-weight:700; color:var(--muted);}
.stk-toggle button.active{background:var(--accent); color:#fff;}
.stk-filter-bar{margin-bottom:12px;}
.stk-filter-toggle{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.stk-filter-toggle .btn-ghost{position:relative;}
.stk-filter-count{display:inline-flex; min-width:18px; height:18px; padding:0 5px; border-radius:10px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; align-items:center; justify-content:center; margin-left:6px;}
.stk-filters{display:none; background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:10px;}
.stk-filters.open{display:block;}
.stk-filters .slab-label{margin-top:8px;}
.stk-pills{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.stk-pills button{padding:6px 10px; border:0.5px solid var(--border); border-radius:16px; background:#fff; color:var(--muted); font-size:12px; font-weight:700;}
.stk-pills button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.stk-cat-group{margin-bottom:6px;}
.stk-cat-group .code{margin-bottom:4px; display:block;}
.stk-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-bottom:64px;}
.stk-card{background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; padding:0; margin:0; text-align:left; font:inherit; color:inherit; width:100%;}
.stk-card-photo{position:relative; aspect-ratio:1; background:#E8E6E1; overflow:hidden;}
.stk-card-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.stk-ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:var(--muted); background:#E8E6E1;}
.stk-pcs-badge{position:absolute; top:6px; right:6px; background:rgba(31,36,33,.78); color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:10px;}
.stk-card-body{padding:8px 10px 10px;}
.stk-card-tag{font-weight:800; font-size:13px; letter-spacing:.02em;}
.stk-card-sub{font-size:11px; color:var(--muted); margin:2px 0 4px;}
.stk-card-meta{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.stk-list{padding-bottom:64px;}
.stk-row{display:grid; grid-template-columns:40px 1fr auto auto; gap:10px; align-items:center; padding:10px 12px; background:var(--card); border:0.5px solid var(--border); border-radius:var(--radius); margin-bottom:8px; cursor:pointer; width:100%; text-align:left; font:inherit; color:inherit;}
.stk-row img,.stk-row .stk-ph-sm{width:40px; height:40px; border-radius:8px; object-fit:cover; background:#E8E6E1;}
.stk-ph-sm{display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--muted);}
.stk-row-chev{color:var(--muted); font-size:18px; padding-left:4px;}
.stk-totals{position:sticky; bottom:64px; z-index:4; background:var(--ink); color:#fff; border-radius:10px; padding:10px 14px; font-family:'Courier New',monospace; font-size:12px; margin:8px 0 12px;}
.stk-detail-photo{width:100%; max-width:400px; border-radius:12px; display:block; margin:0 auto 14px; object-fit:cover;}
.stk-detail-ph{width:100%; max-width:400px; aspect-ratio:1; border-radius:12px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:#E8E6E1; color:var(--muted); font-size:42px; font-weight:800;}
.stk-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:14px;}
.stk-info-grid .k{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.stk-info-grid .v{font-size:14px; font-weight:600;}
.stk-info-grid .v.num{font-family:'Courier New',monospace;}
.stk-timeline{margin:8px 0 14px;}
.stk-tl-row{display:grid; grid-template-columns:14px 1fr; gap:8px; align-items:start; padding:6px 0; font-size:13px;}
.stk-tl-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:5px;}
.stk-huid-list{font-family:'Courier New',monospace; font-size:14px; font-weight:700;}
@media (min-width:600px){
  .stk-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media (min-width:900px){
  .stk-filter-toggle{display:none;}
  .stk-filters{display:block;}
  .stk-grid{grid-template-columns:1fr 1fr 1fr 1fr;}
  .stk-totals{bottom:0;}
}
html.preview-desktop .stk-filter-toggle{display:none;}
html.preview-desktop .stk-filters{display:block;}
html.preview-desktop .stk-grid{grid-template-columns:1fr 1fr 1fr 1fr;}
html.preview-desktop .stk-totals{bottom:0;}
html.preview-mobile .stk-filter-toggle{display:flex;}
html.preview-mobile .stk-filters{display:none;}
html.preview-mobile .stk-filters.open{display:block;}
html.preview-mobile .stk-grid{grid-template-columns:1fr 1fr;}
html.preview-mobile .stk-totals{bottom:64px;}