/* ============================================================================
   Kios Undangan — Konsep A (elegan romantis)
   Tinta aubergine · wine plum · kuningan antik · champagne
   Tanpa build step: cukup <link rel="stylesheet" href="/css/kiosundangan.css">
   ========================================================================== */

:root{
  --paper:#F6F2ED;
  --surface:#FFFFFF;
  --surface-2:#F0E8E0;
  --surface-3:#E9DED4;
  --ink:#2A1522;
  --ink-2:#5E4553;
  --ink-3:#8C7683;
  --line:#E2D6CB;
  --line-strong:#CFBFB2;
  --plum:#7B2B4E;
  --plum-2:#9C4468;
  --plum-soft:#F4E4EB;
  --on-plum:#FFFFFF;
  --gold:#A8783C;
  --gold-2:#C79A5B;
  --gold-soft:#F2E6D2;
  --good:#3D6B55;   --good-soft:#E1EFE8;
  --warn:#95661C;   --warn-soft:#F8EBD3;
  --crit:#9B3939;   --crit-soft:#F9E4E4;
  --info:#3B5A7A;   --info-soft:#E3EBF3;
  --shadow-sm:0 1px 2px rgba(42,21,34,.06), 0 2px 8px rgba(42,21,34,.05);
  --shadow-md:0 2px 6px rgba(42,21,34,.07), 0 14px 34px rgba(42,21,34,.09);
  --shadow-lg:0 6px 18px rgba(42,21,34,.10), 0 34px 70px rgba(42,21,34,.16);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --display:"Petrona","Didot","Times New Roman",serif;
  --ui:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --ease:cubic-bezier(.22,.85,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#170D14; --surface:#21131D; --surface-2:#2B1A26; --surface-3:#372131;
    --ink:#F2E7DE; --ink-2:#C6B2BD; --ink-3:#947F8C;
    --line:#3A2433; --line-strong:#4E3244;
    --plum:#DE8DAF; --plum-2:#C96A92; --plum-soft:#3A1F2E; --on-plum:#1B0F17;
    --gold:#D9A868; --gold-2:#EBC28C; --gold-soft:#382714;
    --good:#7FBF9E; --good-soft:#1D3229;
    --warn:#D9A85C; --warn-soft:#33260F;
    --crit:#E08A8A; --crit-soft:#361D1D;
    --info:#8FB4D8; --info-soft:#1B2836;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.45);
    --shadow-lg:0 6px 18px rgba(0,0,0,.4), 0 34px 70px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#170D14; --surface:#21131D; --surface-2:#2B1A26; --surface-3:#372131;
  --ink:#F2E7DE; --ink-2:#C6B2BD; --ink-3:#947F8C;
  --line:#3A2433; --line-strong:#4E3244;
  --plum:#DE8DAF; --plum-2:#C96A92; --plum-soft:#3A1F2E; --on-plum:#1B0F17;
  --gold:#D9A868; --gold-2:#EBC28C; --gold-soft:#382714;
  --good:#7FBF9E; --good-soft:#1D3229;
  --warn:#D9A85C; --warn-soft:#33260F;
  --crit:#E08A8A; --crit-soft:#361D1D;
  --info:#8FB4D8; --info-soft:#1B2836;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.45);
  --shadow-lg:0 6px 18px rgba(0,0,0,.4), 0 34px 70px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:500; text-wrap:balance}
p{margin:0}
img{max-width:100%}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--plum); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--display)}
.muted{color:var(--ink-3)}
.center{text-align:center}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,36px)}
.wrap-narrow{max-width:760px; margin:0 auto; padding-inline:clamp(16px,4vw,36px)}
.stack{display:flex; flex-direction:column; gap:18px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.push{margin-left:auto}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------------------------------------------------------------- atoms */
.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:600; font-size:14px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--plum); color:var(--on-plum); box-shadow:0 6px 18px color-mix(in oklab,var(--plum) 30%, transparent)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in oklab,var(--plum) 38%, transparent)}
.btn-ghost{border:1px solid var(--line-strong); color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2); transform:translateY(-2px)}
.btn-danger{border:1px solid var(--crit); color:var(--crit)}
.btn-danger:hover{background:var(--crit-soft)}
.btn-sm{padding:7px 14px; font-size:13px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important}

.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap}
.pill i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.pill-good{background:var(--good-soft); color:var(--good)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-crit{background:var(--crit-soft); color:var(--crit)}
.pill-info{background:var(--info-soft); color:var(--info)}
.pill-muted{background:var(--surface-2); color:var(--ink-2)}

.panel{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden}
.panel-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.panel-head h2{font-size:14.5px; font-weight:700}
.panel-head small{font-size:12px; color:var(--ink-3)}
.panel-head .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.panel-body{padding:16px}
.rule{height:1px; background:var(--line); border:0; margin:0}

.alert{display:flex; gap:10px; align-items:flex-start; padding:12px 15px; border-radius:var(--r-md); font-size:13.5px; margin-bottom:16px}
.alert-success{background:var(--good-soft); color:var(--good)}
.alert-warning{background:var(--warn-soft); color:var(--warn)}
.alert-error{background:var(--crit-soft); color:var(--crit)}
.alert ul{margin:4px 0 0; padding-left:18px}

/* ---------------------------------------------------------------- forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:12px; color:var(--ink-2); font-weight:600}
.field .help{font-size:11.5px; color:var(--ink-3)}
.field .err{font-size:11.5px; color:var(--crit); font-weight:600}
.input, .select, .textarea{
  width:100%; border:1px solid var(--line-strong); background:var(--surface);
  border-radius:10px; padding:10px 12px; font-size:14px; outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--plum); box-shadow:0 0 0 3px color-mix(in oklab,var(--plum) 14%, transparent)}
.textarea{min-height:96px; resize:vertical}

/* ----------------------------------------------------- unggah foto produk */
.uploader{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.uploader-body{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:6px}

/* daftar foto tersimpan + antrean unggah */
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin:2px 0 10px}
.shots-queue{margin-top:10px}
.shot{
  position:relative; margin:0; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .25s, filter .25s}
.shot-cover{position:absolute; left:6px; bottom:6px; cursor:pointer}
.shot-cover input{position:absolute; opacity:0; width:0; height:0}
.shot-cover span{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:color-mix(in oklab,var(--surface) 86%, transparent);
  color:var(--ink-2); border:1px solid var(--line); backdrop-filter:blur(6px);
  transition:background .25s, color .25s, border-color .25s;
}
.shot-cover:hover span{border-color:var(--plum); color:var(--plum)}
.shot-cover input:checked + span{background:var(--plum); color:var(--on-plum); border-color:var(--plum)}
.shot-cover input:focus-visible + span{outline:2px solid var(--plum); outline-offset:2px}
.shot-drop{position:absolute; top:6px; right:6px; cursor:pointer}
.shot-drop input{position:absolute; opacity:0; width:0; height:0}
.shot-drop span{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:color-mix(in oklab,var(--surface) 86%, transparent);
  border:1px solid var(--line); color:var(--ink-2); backdrop-filter:blur(6px);
  transition:background .25s, color .25s, border-color .25s;
}
.shot-drop span svg{width:12px; height:12px}
.shot-drop:hover span{border-color:var(--crit); color:var(--crit)}
.shot-drop input:checked + span{background:var(--crit); border-color:var(--crit); color:#fff}
.shot-drop input:focus-visible + span{outline:2px solid var(--crit); outline-offset:2px}
/* foto yang ditandai hapus diredupkan supaya jelas sebelum disimpan */
.shot:has(.shot-drop input:checked) img{opacity:.35; filter:grayscale(1)}
.shot:has(.shot-drop input:checked) .shot-cover{display:none}
.shot-size{
  position:absolute; left:6px; top:6px; font-family:var(--mono); font-size:10px;
  padding:2px 7px; border-radius:999px; background:color-mix(in oklab,var(--ink) 72%, transparent);
  color:var(--paper); backdrop-filter:blur(4px);
}
.uploader-input{
  width:100%; font-size:13px; color:var(--ink-2);
  border:1px dashed var(--line-strong); border-radius:10px;
  padding:9px 11px; background:var(--surface); cursor:pointer;
  transition:border-color .25s, background .25s;
}
.uploader-input:hover{border-color:var(--plum); background:var(--plum-soft)}
.uploader-input::file-selector-button{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  margin-right:10px; padding:6px 13px; border:0; border-radius:999px;
  background:var(--plum); color:var(--on-plum);
}

/* thumbnail kecil di dalam tabel */
.cell-prod{display:flex; align-items:center; gap:10px; min-width:0}
.cell-thumb{
  width:34px; height:34px; flex:0 0 auto; overflow:hidden;
  border-radius:8px; background:var(--surface-2); color:var(--gold);
  display:grid; place-items:center;
}
.cell-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cell-thumb svg{width:66%; height:66%}

.select{
  appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.grid-2{display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.check{display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid var(--line-strong); border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:all .25s var(--ease)}
.check input{position:absolute; opacity:0; width:0; height:0}
.check .box{width:15px; height:15px; border-radius:5px; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:all .2s}
.check .box svg{width:10px; height:10px; color:var(--on-plum); opacity:0; transform:scale(.5); transition:all .22s var(--ease-out)}
.check:has(input:checked){background:var(--plum-soft); border-color:var(--plum); color:var(--plum)}
.check:has(input:checked) .box{background:var(--plum); border-color:var(--plum)}
.check:has(input:checked) .box svg{opacity:1; transform:none}

/* ------------------------------------------------------------ storefront */
.store-nav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:14px;
  padding:13px clamp(16px,4vw,36px);
  background:color-mix(in oklab,var(--surface) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.store-brand{display:flex; align-items:center; gap:10px; min-width:0}
.store-logo{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--plum-soft); color:var(--plum); font-family:var(--display); font-size:17px; flex:0 0 auto}
.store-brand b{display:block; font-size:14.5px; line-height:1.2}
.store-brand small{color:var(--ink-3); font-size:11.5px}
.cart-btn{margin-left:auto; position:relative; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:8px 15px; font-size:13px; font-weight:600; transition:border-color .3s, transform .3s var(--ease)}
.cart-btn:hover{border-color:var(--plum); transform:translateY(-2px)}
.cart-btn svg{width:16px; height:16px}
.cart-count{background:var(--plum); color:var(--on-plum); border-radius:999px; font-size:11px; padding:1px 7px; font-family:var(--mono)}
.cart-btn.is-bumped{animation:bump .45s var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}

.store-hero{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(30px,5vw,54px) clamp(18px,4vw,36px);
  background:linear-gradient(180deg,var(--plum-soft),var(--paper));
  border-bottom:1px solid var(--line);
}
.store-hero h1{font-family:var(--display); font-weight:500; font-size:clamp(28px,4.4vw,44px); line-height:1.08; margin:12px 0}
.store-hero p{color:var(--ink-2); max-width:52ch; margin:0 auto; font-size:15px}
.store-hero-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin-top:18px}
.ornament{position:absolute; color:var(--gold); opacity:.22; pointer-events:none; animation:turn 40s linear infinite}
.ornament.o1{width:170px; height:170px; top:-52px; left:-46px}
.ornament.o2{width:210px; height:210px; bottom:-84px; right:-60px; animation-direction:reverse}
@keyframes turn{to{transform:rotate(360deg)}}

.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:16px clamp(16px,4vw,36px) 4px}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap; padding:7px 15px; border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2); transition:all .3s var(--ease)}
.chip:hover{border-color:var(--line-strong)}
.chip.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.prod-grid{display:grid; gap:16px; padding:18px clamp(16px,4vw,36px) 34px; grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
.prod{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface); display:flex; flex-direction:column; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s}
.prod:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold)}
.prod-art{position:relative; aspect-ratio:4/3; display:grid; place-items:center; background:var(--surface-2); overflow:hidden}
.prod-art svg{width:66%; height:66%; color:var(--gold); transition:transform .7s var(--ease-out)}
.prod:hover .prod-art svg{transform:scale(1.12) rotate(5deg)}
.prod-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-out)}
.prod:hover .prod-art img{transform:scale(1.06)}
.prod-tag{position:absolute; top:9px; left:9px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); background:color-mix(in oklab,var(--surface) 82%, transparent); backdrop-filter:blur(6px); border-radius:999px; padding:3px 9px}
.prod-body{padding:14px; display:flex; flex-direction:column; gap:7px; flex:1}
.prod-body h3{font-family:var(--display); font-size:19px; font-weight:500; line-height:1.15}
.prod-spec{font-size:12px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:4px 10px}
.prod-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; padding-top:6px}
.prod-price{font-family:var(--mono); font-size:16px; font-weight:500}
.prod-price small{font-family:var(--ui); font-size:11.5px; color:var(--ink-3); font-weight:500}
.add-btn{border:1px solid var(--line-strong); border-radius:999px; width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; transition:all .3s var(--ease)}
.add-btn svg{width:15px; height:15px}
.add-btn:hover{background:var(--plum); border-color:var(--plum); color:var(--on-plum); transform:rotate(90deg)}

.empty{padding:48px 20px; text-align:center; color:var(--ink-3)}
.empty h3{font-family:var(--display); font-size:22px; color:var(--ink); margin-bottom:6px}

/* product detail */
.prod-detail{display:grid; gap:clamp(20px,4vw,40px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding-block:clamp(22px,4vw,40px)}
@media (max-width:820px){.prod-detail{grid-template-columns:1fr}}
/* ------------------------------------------------ galeri foto produk */
.gallery{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.gallery-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{
  flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1;
  padding:0; border:0; background:none; cursor:zoom-in; display:block;
}
.gallery-slide img{width:100%; height:100%; object-fit:cover; display:block}
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab,var(--surface) 88%, transparent);
  border:1px solid var(--line); color:var(--ink); backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm); opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery:hover .gallery-nav, .gallery-nav:focus-visible{opacity:1}
.gallery-nav.is-prev{left:10px}
.gallery-nav.is-next{right:10px}
.gallery-nav:hover{transform:translateY(-50%) scale(1.08)}
.gallery-nav[disabled]{opacity:0 !important; pointer-events:none}
.gallery-nav svg{width:16px; height:16px}
@media (hover:none){.gallery-nav{display:none}}
.gallery-count{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:999px;
  background:color-mix(in oklab,var(--ink) 70%, transparent); color:var(--paper); backdrop-filter:blur(6px);
}
.gallery-hint{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  padding:4px 10px; border-radius:999px;
  background:color-mix(in oklab,var(--ink) 70%, transparent); color:var(--paper); backdrop-filter:blur(6px);
  pointer-events:none;
}
.gallery-hint svg{width:13px; height:13px}
.gallery-thumbs{
  display:flex; gap:8px; margin-top:10px; overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
  flex:0 0 auto; width:64px; height:64px; padding:0; overflow:hidden;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
  opacity:.62; transition:opacity .25s, border-color .25s, transform .25s var(--ease);
}
.gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.gallery-thumb:hover{opacity:.85; transform:translateY(-2px)}
.gallery-thumb.is-on{opacity:1; border-color:var(--plum); box-shadow:0 0 0 2px color-mix(in oklab,var(--plum) 26%, transparent)}

/* ------------------------------------------------------------ lightbox */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:color-mix(in oklab,#140A11 88%, transparent); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  overscroll-behavior:contain;
}
.lightbox.is-open{opacity:1; pointer-events:auto}
.lightbox-stage{
  position:relative; width:100%; height:100%; overflow:hidden;
  display:grid; place-items:center; touch-action:none; cursor:zoom-in;
}
.lightbox-stage.is-zoomed{cursor:grab}
.lightbox-stage.is-dragging{cursor:grabbing}
.lightbox-img{
  max-width:92vw; max-height:88vh; display:block; user-select:none; -webkit-user-drag:none;
  transform-origin:center center; transition:transform .28s var(--ease-out);
  box-shadow:0 24px 70px rgba(0,0,0,.5); border-radius:6px;
}
.lightbox-stage.is-dragging .lightbox-img{transition:none}
.lightbox-bar{
  position:absolute; top:14px; right:14px; z-index:3; display:flex; gap:8px;
}
.lightbox-btn{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab,#F6F2ED 16%, transparent); color:#F6F2ED;
  border:1px solid color-mix(in oklab,#F6F2ED 26%, transparent);
  backdrop-filter:blur(8px); transition:background .25s, transform .25s var(--ease);
}
.lightbox-btn:hover{background:color-mix(in oklab,#F6F2ED 28%, transparent); transform:scale(1.07)}
.lightbox-btn svg{width:18px; height:18px}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab,#F6F2ED 16%, transparent); color:#F6F2ED;
  border:1px solid color-mix(in oklab,#F6F2ED 26%, transparent); backdrop-filter:blur(8px);
  transition:background .25s;
}
.lightbox-nav:hover{background:color-mix(in oklab,#F6F2ED 28%, transparent)}
.lightbox-nav svg{width:20px; height:20px}
.lightbox-nav.is-prev{left:14px}
.lightbox-nav.is-next{right:14px}
.lightbox-nav[hidden]{display:none}
.lightbox-count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--mono); font-size:12px; color:#F6F2ED;
  background:color-mix(in oklab,#140A11 62%, transparent);
  padding:5px 13px; border-radius:999px; backdrop-filter:blur(6px);
}
@media (max-width:600px){
  .lightbox-btn{width:36px; height:36px}
  .lightbox-nav{width:38px; height:38px}
  .lightbox-img{max-width:96vw; max-height:80vh}
}

.prod-hero-art{aspect-ratio:1; border-radius:var(--r-lg); background:var(--surface-2); display:grid; place-items:center; border:1px solid var(--line)}
.prod-hero-art svg{width:60%; height:60%; color:var(--gold)}
.prod-hero-art{overflow:hidden}
.prod-hero-art img{width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--r-lg)}
.prod-detail h1{font-family:var(--display); font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1.08}
.spec-list{display:flex; flex-direction:column; gap:9px; margin:18px 0; font-size:13.5px}
.spec-list div{display:flex; justify-content:space-between; gap:14px; padding-bottom:9px; border-bottom:1px dashed var(--line)}
.spec-list span{color:var(--ink-3)}
.qty{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line-strong); border-radius:999px; padding:3px}
.qty button{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:16px; line-height:1; color:var(--ink-2); transition:background .25s}
.qty button:hover{background:var(--surface-2); color:var(--ink)}
.qty input{width:78px; text-align:center; border:0; background:none; outline:none; font-family:var(--mono); font-size:14px}

/* cart drawer */
.scrim{position:fixed; inset:0; z-index:60; background:rgba(24,12,20,.42); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease)}
.scrim.is-open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(408px,94%); background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; transform:translateX(102%); transition:transform .5s var(--ease-out)}
.drawer.is-open{transform:none}
.drawer-head{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--display); font-size:20px; font-weight:500; flex:1}
.icon-btn{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; transition:background .3s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:16px; height:16px}
.drawer-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:16px}
.drawer-foot{border-top:1px solid var(--line); padding:16px 18px; display:flex; flex-direction:column; gap:11px; background:var(--surface)}
.cart-item{display:flex; gap:12px; align-items:center}
.cart-thumb{width:58px; height:58px; border-radius:10px; background:var(--surface-2); display:grid; place-items:center; flex:0 0 auto}
.cart-thumb svg{width:64%; height:64%; color:var(--gold)}
.cart-thumb{overflow:hidden}
.cart-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cart-item-info{flex:1; min-width:0}
.cart-item-info b{display:block; font-family:var(--display); font-size:17px; font-weight:500}
.cart-item-info small{color:var(--ink-3); font-size:12px}
.weight-note{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); background:var(--gold-soft); border-radius:10px; padding:9px 12px}
.weight-note b{font-family:var(--mono); font-weight:500; color:var(--ink)}
.courier-list{display:flex; flex-direction:column; gap:8px}
.courier-opt{display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:1px solid var(--line); border-radius:12px; padding:11px 13px; transition:border-color .3s, background .3s, transform .3s var(--ease); animation:slideIn .45s var(--ease-out) both}
@keyframes slideIn{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
.courier-opt:hover{border-color:var(--line-strong); transform:translateX(3px)}
.courier-opt.is-on{border-color:var(--plum); background:var(--plum-soft)}
.courier-opt .cr-mark{width:34px; height:32px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); font-size:9.5px; font-weight:800; color:var(--ink-2)}
.courier-opt.is-on .cr-mark{background:var(--surface); color:var(--plum)}
.cr-info{flex:1; min-width:0}
.cr-info b{display:block; font-size:13.5px}
.cr-info small{font-size:11.5px; color:var(--ink-3)}
.cr-cost{font-family:var(--mono); font-size:13.5px; font-weight:500}
.sum-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-2); gap:12px}
.sum-row.total{align-items:baseline; color:var(--ink); border-top:1px solid var(--line); padding-top:11px; margin-top:2px}
.sum-row.total b{font-family:var(--display); font-size:25px; font-weight:500}
.spinner{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--plum); animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------ landing */
.land-nav{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:20px; padding:14px clamp(18px,4vw,44px); background:color-mix(in oklab,var(--paper) 86%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.mark{display:flex; align-items:center; gap:11px}
.mark-seal{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--plum); color:var(--on-plum)}
.mark-seal svg{width:20px; height:20px}
.mark-name{font-family:var(--display); font-size:22px; line-height:1; white-space:nowrap}
.land-links{display:flex; gap:22px; margin-left:auto; font-size:13.5px; color:var(--ink-2)}
.land-links a{position:relative; padding-bottom:2px}
.land-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out)}
.land-links a:hover::after{transform:scaleX(1); transform-origin:left}
@media (max-width:760px){.land-links{display:none}}
@media (max-width:480px){
  .mark-name{font-size:18px}
  .land-nav{gap:10px; padding-inline:16px}
}

.hero{position:relative; overflow:hidden; padding:clamp(38px,6vw,70px) clamp(18px,4vw,44px) clamp(30px,5vw,54px)}
.hero::before{content:""; position:absolute; inset:-40% -10% auto -30%; height:520px; pointer-events:none;
  background:radial-gradient(58% 60% at 30% 40%, color-mix(in oklab,var(--plum) 16%, transparent), transparent 70%),
             radial-gradient(45% 50% at 78% 20%, color-mix(in oklab,var(--gold) 16%, transparent), transparent 70%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(4%,3%,0) scale(1.08)}}
.hero-grid{position:relative; display:grid; gap:clamp(28px,4vw,48px); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; max-width:1180px; margin:0 auto}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-family:var(--display); font-weight:500; font-size:clamp(34px,5.2vw,56px); line-height:1.04; margin:14px 0 16px}
.hero h1 em{font-style:italic; color:var(--plum)}
.hero-lede{color:var(--ink-2); font-size:16.5px; max-width:46ch}
.hero-proof{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; font-size:12.5px; color:var(--ink-3)}
.hero-proof b{color:var(--ink); font-weight:600}

.claim{margin-top:26px; max-width:470px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-md)}
.claim-label{font-size:12px; color:var(--ink-3); margin-bottom:8px}
.claim-row{display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:10px; padding:4px 4px 4px 12px; background:var(--paper); transition:border-color .3s, box-shadow .3s}
.claim-row:focus-within{border-color:var(--plum); box-shadow:0 0 0 3px color-mix(in oklab,var(--plum) 14%, transparent)}
.claim-row input{flex:1; min-width:0; border:0; background:none; outline:none; font-family:var(--mono); font-size:14px; padding:8px 0}
.claim-suffix{font-family:var(--mono); font-size:14px; color:var(--ink-3); padding-right:6px}
.claim-status{display:flex; align-items:center; gap:7px; margin-top:10px; font-size:12.5px; min-height:18px; color:var(--ink-3)}
.claim-ok{color:var(--good); font-weight:600}
.claim-bad{color:var(--crit); font-weight:600}

.preview{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-lg); animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0) rotate(-.5deg)} to{transform:translateY(-12px) rotate(.4deg)}}
.preview-bar{display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--ink-2)}
.preview-body{padding:20px; background:linear-gradient(180deg,var(--plum-soft),var(--surface) 70%)}
.preview-title{font-family:var(--display); font-size:26px; line-height:1.1}
.preview-motif{margin:14px auto; width:110px; height:110px; display:block; color:var(--gold)}

.sect{padding:clamp(34px,5vw,60px) clamp(18px,4vw,44px)}
.sect-alt{background:var(--surface)}
.sect-inner{max-width:1180px; margin:0 auto}
.sect-head{max-width:60ch; margin-bottom:26px}
.sect-head h2{font-family:var(--display); font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.12; margin:10px 0}
.sect-head p{color:var(--ink-2)}
.feat-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.feat{padding:20px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--paper); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out)}
.sect-alt .feat{background:var(--surface)}
.feat:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.feat-icon{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold); margin-bottom:13px}
.feat-icon svg{width:18px; height:18px}
.feat h3{font-size:15.5px; font-weight:700; margin-bottom:6px}
.feat p{font-size:13.5px; color:var(--ink-2)}
.courier-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.courier-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:600; transition:transform .3s var(--ease), border-color .3s}
.courier-chip:hover{transform:translateY(-3px); border-color:var(--gold)}
.courier-chip span{width:7px; height:7px; border-radius:2px; background:var(--gold)}
.calc-demo{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:18px; box-shadow:var(--shadow-md)}
.calc-line{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.calc-line:last-of-type{border-bottom:0}
.calc-line span{color:var(--ink-2)}
.calc-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-strong)}
.calc-total b{font-family:var(--display); font-size:24px; font-weight:500}
.ship-band{display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center}
@media (max-width:820px){.ship-band{grid-template-columns:1fr}}

.price-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); align-items:start}
.plan{border:1px solid var(--line); border-radius:var(--r-md); padding:22px; background:var(--surface); position:relative; transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out)}
.sect-alt .plan{background:var(--paper)}
.plan:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)}
.plan-featured{border-color:var(--plum); box-shadow:var(--shadow-md)}
.plan-flag{position:absolute; top:-11px; left:22px; background:var(--plum); color:var(--on-plum); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px}
.plan h3{font-family:var(--display); font-size:21px}
.plan-price{font-family:var(--display); font-size:34px; margin:10px 0 2px}
.plan-price small{font-family:var(--ui); font-size:13px; font-weight:500; color:var(--ink-3)}
.plan ul{list-style:none; padding:0; margin:16px 0 20px; display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--ink-2)}
.plan li{display:flex; gap:9px; align-items:flex-start}
.plan li svg{width:15px; height:15px; flex:0 0 auto; margin-top:3px; color:var(--gold)}
.land-foot{padding:26px clamp(18px,4vw,44px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; font-size:12.5px; color:var(--ink-3); background:var(--surface)}

/* ------------------------------------------------------------ panel */
.app{display:grid; grid-template-columns:222px minmax(0,1fr); min-height:100vh}
.side{border-right:1px solid var(--line); background:var(--surface); padding:18px 12px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto}
.side-top{display:flex; align-items:center; gap:9px; padding:4px 10px 16px}
.side-avatar{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-family:var(--display); font-size:16px; flex:0 0 auto}
.side-top b{display:block; font-size:13.5px; line-height:1.25}
.side-top small{font-size:11px; color:var(--ink-3); font-family:var(--mono)}
.side-group{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:14px 10px 6px; font-weight:700}
.nav-item{position:relative; display:flex; align-items:center; gap:10px; white-space:nowrap; padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-2); transition:background .3s, color .3s}
.nav-item svg{width:16px; height:16px; flex:0 0 auto; opacity:.85}
.nav-item:hover{background:var(--surface-2); color:var(--ink)}
.nav-item.is-on{background:var(--plum-soft); color:var(--plum)}
.nav-item.is-on::before{content:""; position:absolute; left:0; top:50%; width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--plum); transform:translateY(-50%)}
.nav-badge{margin-left:auto; font-family:var(--mono); font-size:11px; background:var(--surface-2); border-radius:999px; padding:1px 7px; color:var(--ink-2)}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3)}

.main{padding:clamp(16px,2.6vw,26px); display:flex; flex-direction:column; gap:18px; min-width:0}
.main-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px}
.main-head h1{font-family:var(--display); font-weight:500; font-size:clamp(24px,3vw,32px); line-height:1.1}
.main-head p{font-size:13.5px; color:var(--ink-3); margin-top:3px}
.main-head .actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

.kpis{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.kpi{border:1px solid var(--line); border-radius:var(--r-md); padding:15px 16px; background:var(--surface); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out)}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.kpi-label{font-size:12px; color:var(--ink-3); font-weight:600}
.kpi-value{font-family:var(--display); font-size:clamp(25px,3vw,31px); line-height:1.15; margin:6px 0; font-variant-numeric:tabular-nums}
.kpi-delta{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600}
.kpi-foot{font-size:11.5px; color:var(--ink-3); margin-left:6px; font-weight:500}
.up{color:var(--good)} .down{color:var(--crit)}
.cols{display:grid; gap:18px; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
@media (max-width:980px){.cols{grid-template-columns:1fr}}

.chart-wrap{position:relative}
.chart-wrap svg{width:100%; height:auto; display:block; overflow:visible}
.axis-t{font-family:var(--mono); font-size:10px; fill:var(--ink-3)}
.grid-l{stroke:var(--line); stroke-width:1}
.line-path{fill:none; stroke:var(--plum); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1.5s var(--ease-out) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.area-path{fill:url(#omzetFill); opacity:0; animation:fadeIn .9s var(--ease-out) .7s forwards}
@keyframes fadeIn{to{opacity:1}}
.end-dot{fill:var(--surface); stroke:var(--plum); stroke-width:2.5}
.hover-line{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition:opacity .2s}
.hover-dot{fill:var(--plum); stroke:var(--surface); stroke-width:2; opacity:0; transition:opacity .2s}
.chart-wrap.is-hovering .hover-line,.chart-wrap.is-hovering .hover-dot{opacity:1}
.tip{position:absolute; z-index:5; pointer-events:none; transform:translate(-50%,-118%); background:var(--ink); color:var(--paper); border-radius:9px; padding:7px 11px; font-size:12px; white-space:nowrap; opacity:0; transition:opacity .2s; box-shadow:var(--shadow-md)}
.tip b{font-family:var(--mono); font-weight:500; display:block; font-size:13px}
.chart-wrap.is-hovering .tip{opacity:1}

.bar-list{display:flex; flex-direction:column; gap:13px}
.bar-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px}
.bar-top span{color:var(--ink-3); font-family:var(--mono); font-size:12.5px}
.bar-track{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.bar-fill{height:100%; border-radius:999px; background:var(--plum); width:0; transition:width 1.1s var(--ease-out)}
.bar-fill.tone-2{background:color-mix(in oklab,var(--plum) 62%, var(--surface-3))}
.bar-fill.tone-3{background:color-mix(in oklab,var(--plum) 34%, var(--surface-3))}
.meter-track{height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.meter-fill{height:100%; background:linear-gradient(90deg,var(--good),var(--warn)); width:0; transition:width 1.3s var(--ease-out)}
.meter-legend{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); margin-top:6px; font-family:var(--mono)}

.domain-row{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--good); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--good) 55%, transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.meta-list{display:flex; flex-direction:column; gap:9px; font-size:13px}
.meta-list div{display:flex; justify-content:space-between; gap:12px}
.meta-list span{color:var(--ink-3)}

/* tables (termasuk DataTables) */
.tbl-scroll{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
table.data thead th{text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface)}
table.data tbody td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.data tbody tr{transition:background .25s}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
td .who{display:flex; align-items:center; gap:10px}
td .who span{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; background:var(--plum-soft); color:var(--plum); font-size:12px; font-weight:700}
td .who b{display:block; font-weight:600}
td .who small{color:var(--ink-3); font-size:11.5px}
.link-act{font-weight:600; color:var(--plum); font-size:12.5px; border-bottom:1px solid transparent; transition:border-color .3s; background:none; cursor:pointer; padding:0}
.link-act:hover{border-color:currentColor}
.resi-done{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2)}

.dataTables_wrapper{padding:14px 16px}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--line-strong); border-radius:8px; padding:6px 10px;
  background:var(--surface); font-size:13px; outline:none; margin-left:6px;
}
.dataTables_wrapper .dataTables_filter input:focus{border-color:var(--plum)}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{font-size:12.5px; color:var(--ink-3); padding-bottom:10px}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  padding:5px 11px; margin-left:4px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--line); color:var(--ink-2) !important; cursor:pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--plum); border-color:var(--plum); color:var(--on-plum) !important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.4}
table.dataTable{width:100% !important}

/* timeline */
.tl{display:flex; flex-direction:column; position:relative; padding-left:24px}
.tl::before{content:""; position:absolute; left:6px; top:6px; bottom:14px; width:1.5px; background:var(--line)}
.tl-item{position:relative; padding-bottom:14px}
.tl-item::before{content:""; position:absolute; left:-24px; top:4px; width:13px; height:13px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong)}
.tl-item.done::before{background:var(--good); border-color:var(--good)}
.tl-item.now::before{background:var(--plum); border-color:var(--plum); animation:pulsePlum 2s ease-out infinite}
@keyframes pulsePlum{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--plum) 50%, transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tl-item b{display:block; font-size:13.5px}
.tl-item small{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}

/* ------------------------------------------------------- bottom nav */
.mnav{display:none}
.mnav-item{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px 3px; color:var(--ink-3); -webkit-tap-highlight-color:transparent}
.mnav-ic{position:relative; width:48px; height:26px; display:grid; place-items:center}
.mnav-ic::before{content:""; position:absolute; inset:0; border-radius:999px; background:var(--plum-soft); transform:scaleX(.45); opacity:0; transition:transform .45s var(--ease-out), opacity .28s var(--ease)}
.mnav-ic svg{position:relative; width:19px; height:19px; transition:transform .4s var(--ease-out)}
.mnav-label{font-size:10.5px; font-weight:600; line-height:1.3; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mnav-item.is-on{color:var(--plum)}
.mnav-item.is-on .mnav-ic::before{transform:none; opacity:1}
.mnav-item.is-on .mnav-ic svg{transform:translateY(-1px) scale(1.07)}
.mnav-item:active .mnav-ic svg{transform:scale(.9)}
.mnav-badge{position:absolute; top:-1px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--plum); color:var(--on-plum); font-family:var(--mono); font-size:9.5px; line-height:1; display:grid; place-items:center; border:2px solid var(--surface)}
.mnav-cta{flex:1; min-width:0}
.mnav-cta b{display:block; font-family:var(--display); font-size:15px; line-height:1.2}
.mnav-cta small{font-size:11px; color:var(--ink-3)}

@media (max-width:760px){
  body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px))}
  .mnav{
    display:flex; align-items:center; gap:2px;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in oklab,var(--surface) 93%, transparent);
    backdrop-filter:blur(16px) saturate(1.3);
    border-top:1px solid var(--line);
  }
  .mnav.is-cta{gap:12px; padding-left:16px; padding-right:12px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .cart-btn{display:none}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main-head .actions{width:100%}
  .main-head .actions .btn{flex:1}
  .drawer{width:100%}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}