/* Gudang Kain PT ASS — lapisan "kaca" (gaya Liquid Glass ala Apple).
   Dimuat paling akhir, setelah tampilan.css. Hapus file ini untuk kembali ke tampilan v21 tanpa kaca.
   Prinsip (versi 30, latar lembaran kain berlipat): latar lembut yang diam, isi bergulir di bawah bar atas dan dock yang melayang;
   semua permukaan adalah kaca buram (blur + sedikit putih + tepi berkilau). Warna kerja navy #1F2A4A sejak versi 31 (sebelumnya indigo #3342CC). */

html:root, html:root[data-theme], html:root:not([data-theme="light"]) {
  --bg:#EFEBE5; --ground:#EFEBE5;
  --line:rgba(28,34,96,.10); --line-2:rgba(28,34,96,.17);
  --surface-2:rgba(255,255,255,.55); --surface-3:rgba(28,34,96,.06);
  --glass:rgba(255,255,255,.61);
  --glass-2:rgba(255,255,255,.68);
  --glass-3:rgba(255,255,255,.84);
  --glass-edge:rgba(255,255,255,.72);
  --glass-blur:blur(30px) saturate(160%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.22), 0 14px 34px -16px rgba(62,50,40,.30), 0 2px 6px -3px rgba(62,50,40,.12);
  --glass-shadow-lg:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 70px -24px rgba(56,46,38,.42), 0 6px 16px -8px rgba(56,46,38,.18);
  --scrim:rgba(40,32,26,.24);
}

/* ---------- latar (versi 30, permintaan Layanto 20 Okt): lembaran kain berlipat ala wallpaper iOS terbaru,
   pasir-krem ke lavender-abu, dibuat lembut (lapisan krem tipis di atasnya) supaya tidak bikin pusing.
   Gambar vektor buatan sendiri (tools/latar/buat_latar.py), bukan foto Apple. Warna versi 22–29: lihat riwayat. ---------- */
html body{background:#ECE7E0}
html .app{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='g0' cx='0' cy='560' r='760' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23DDBE8E'/%3E%3Cstop offset='.55' stop-color='%23BE9D76'/%3E%3Cstop offset='1' stop-color='%239E8268'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFFDF8' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23FFFDF8' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='g1' x1='430' y1='420' x2='930' y2='260' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F1E9DC'/%3E%3Cstop offset='.55' stop-color='%23C9B49B'/%3E%3Cstop offset='1' stop-color='%23A9937E'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='930' y1='430' x2='1500' y2='20' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F2ECE4'/%3E%3Cstop offset='.5' stop-color='%23C4B6AB'/%3E%3Cstop offset='1' stop-color='%239F928C'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' x1='980' y1='520' x2='1230' y2='1000' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E8E5EA'/%3E%3Cstop offset='.45' stop-color='%23ACAABF'/%3E%3Cstop offset='1' stop-color='%238B8CA8'/%3E%3C/linearGradient%3E%3ClinearGradient id='g4' x1='1260' y1='720' x2='1640' y2='520' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F1F2F4'/%3E%3Cstop offset='.6' stop-color='%23D3D7DE'/%3E%3Cstop offset='1' stop-color='%23BCC4CF'/%3E%3C/linearGradient%3E%3Cfilter id='s1' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='-18' dy='10' stdDeviation='34' flood-color='%233B2C20' flood-opacity='.32'/%3E%3CfeDropShadow dx='-3' dy='2' stdDeviation='4' flood-color='%233B2C20' flood-opacity='.14'/%3E%3C/filter%3E%3Cfilter id='s2' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='-14' dy='-16' stdDeviation='34' flood-color='%232E2A36' flood-opacity='.30'/%3E%3CfeDropShadow dx='-2' dy='-3' stdDeviation='4' flood-color='%232E2A36' flood-opacity='.12'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23g0)'/%3E%3Cg filter='url(%23s1)'%3E%3Cpath d='M380-60C640 40 560 330 360 520S40 900-60 1060H1700V-60Z' fill='url(%23g1)'/%3E%3C/g%3E%3Cellipse cx='470' cy='600' rx='230' ry='330' transform='rotate(38 470 600)' fill='url(%23h)'/%3E%3Cpath d='M380-60C640 40 560 330 360 520S40 900-60 1060' fill='none' stroke='%23FFFBF3' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s1)'%3E%3Cpath d='M990-60C1190 60 1130 330 870 470S360 760 170 1060H1700V-60Z' fill='url(%23g2)'/%3E%3C/g%3E%3Cellipse cx='1000' cy='380' rx='200' ry='300' transform='rotate(50 1000 380)' fill='url(%23h)'/%3E%3Cpath d='M990-60C1190 60 1130 330 870 470S360 760 170 1060' fill='none' stroke='%23FFFBF3' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s2)'%3E%3Cpath d='M460 1060C560 760 820 600 1100 470S1520 200 1700 60V1060Z' fill='url(%23g3)'/%3E%3C/g%3E%3Cellipse cx='980' cy='640' rx='160' ry='320' transform='rotate(55 980 640)' fill='url(%23h)' opacity='.7'/%3E%3Cpath d='M460 1060C560 760 820 600 1100 470S1520 200 1700 60' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s2)'%3E%3Cpath d='M1020 1060C1100 820 1320 640 1500 420S1650 160 1700 120V1060Z' fill='url(%23g4)'/%3E%3C/g%3E%3Cpath d='M1020 1060C1100 820 1320 640 1500 420S1650 160 1700 120' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='3'/%3E%3Crect width='1600' height='1000' fill='%23F3F2F2' opacity='0.46'/%3E%3C/svg%3E") 50% 50% / cover no-repeat, #ECE7E0}
@media (max-width:999.98px){ html .app{background-position:58% 50%} }

/* ---------- bahan kaca ---------- */
html .pnl, html .kpis, html .card, html .choice, html .tile, html .dwrap, html .inventory-summary, html .chat-workspace,
html .empty, html .trio, html .ocard, html .order-option, html .paper-wrap, html .notice:not(.hold):not(.alert):not(.ok) {
  background:var(--glass)!important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-shadow);
}
html .banner{background:var(--glass)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
html .pnl, html .kpis{border-radius:26px}
html .card, html .choice, html .tile, html .dwrap, html .banner, html .inventory-summary, html .empty, html .ocard{border-radius:20px}
html .chat-workspace{border-radius:26px}
html .choice:not(.static):hover, html .tile:hover, html .banner:hover{background:var(--glass-2)!important}
html .choice.on{background:rgba(231,233,240,.86)!important;border-color:rgba(31,42,74,.55)!important;box-shadow:inset 0 0 0 1px rgba(31,42,74,.35),var(--glass-shadow)}

/* tepi berkilau: gradasi tipis di bingkai, seperti cahaya mengenai kaca */
html .pnl, html .kpis, html .card, html .lg-card, html .cmdk-box{position:relative}
html .pnl::after, html .kpis::after, html .card::after, html .lg-card::after, html .pmenu::after, html .cmdk-box::after,
html .mobile-dock:not(:empty)::after, html .footbar:not(:empty)::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none; z-index:0;
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.28) 26%, rgba(255,255,255,0) 48%, rgba(255,255,255,.22) 76%, rgba(255,255,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ---------- isi kaca: garis, tabel, kepala panel ---------- */
html .dtab th{background:rgba(255,255,255,.42);backdrop-filter:none}
html .dtab td{border-bottom-color:var(--line)}
html .dtab tbody tr[data-a]:hover td{background:rgba(255,255,255,.45)}
html .g-legend{background:rgba(255,255,255,.32);border-top-color:var(--line)}
html .prio:hover, html .act:hover, html .ord-row:hover, html .kpi:hover, html .cu-row:hover, html .hs-row:hover{background:rgba(255,255,255,.45)}
html .kpi{border-left-color:var(--line)}
html .kpi:nth-child(n+3){border-top-color:var(--line)}
html .act-ic{background:rgba(255,255,255,.6);border-color:var(--glass-edge)}
html .prio-dot, html .ini, html .tile .ti{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
html .paper{background:#FFFFFF}

/* ---------- kontrol: kapsul ---------- */
html .btn{border-radius:999px;background:linear-gradient(180deg,#34406A,#1F2A4A 55%,#18213D);box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 22px -10px rgba(31,42,74,.75)}
html .btn:hover:not(:disabled){background:linear-gradient(180deg,#2A355C,#141B33)}
html .btn.ghost{background:var(--glass-2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);color:var(--ink);box-shadow:var(--glass-shadow)}
html .btn.ghost:hover:not(:disabled){background:var(--glass-3)}
html .btn.danger{background:rgba(251,234,233,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
html .btn:disabled{opacity:.5}
html .iconbtn{width:42px;height:42px;border-radius:50%;background:var(--glass-2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
html .iconbtn:hover{background:var(--glass-3)}
html .search, html .inp, html .chat-compose-row textarea, html .tb-search{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 2px rgba(28,34,96,.08), 0 1px 0 rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
html .search, html .tb-search{border-radius:999px}
html .inp{border-radius:14px}
html .search:focus-within, html .inp:focus{background:rgba(255,255,255,.9);border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,42,74,.14)}
html .segb{border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
html .segb.on{background:linear-gradient(180deg,#34406A,#1F2A4A);border-color:transparent;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -8px rgba(31,42,74,.8)}
html .seg2, html .seg4{background:rgba(28,34,96,.07);border-radius:999px;padding:4px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html .seg2 .segb, html .seg4 .segb{background:transparent;border-color:transparent;box-shadow:none;border-radius:999px;color:var(--ink-2)}
html .seg2 .segb.on, html .seg4 .segb.on{background:var(--glass-3);color:var(--ink);box-shadow:inset 0 1px 0 #FFFFFF,0 6px 16px -8px rgba(62,50,40,.45)}
html .mini button{border-radius:50%;background:var(--glass-2);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
html .roll{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
html .roll.sel{background:var(--accent);border-color:var(--accent)}
html .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
html .pill:not(.acc):not(.ok):not(.hold):not(.alert){background:rgba(28,34,96,.07)}
html .linkbtn{border-radius:999px}

/* ---------- bar atas: transparan, isi bergulir di bawahnya dengan kabut kaca ---------- */
html .topbar{background:transparent;border-bottom:0;isolation:isolate}
html .topbar::before{content:"";position:absolute;inset:0 0 -26px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(241,237,231,.80), rgba(241,237,231,.48) 62%, rgba(241,237,231,0));
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent); mask-image:linear-gradient(to bottom,#000 58%,transparent)}
html .me{border-radius:999px;background:var(--glass-2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
html .me:hover, html .me[aria-expanded="true"]{background:var(--glass-3);border-color:var(--glass-edge)}
html .tb-data{background:rgba(251,240,221,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
html .pmenu, html .cmdk-box{background:var(--glass-3);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow-lg);border-radius:24px}
html .pmenu button{border-radius:14px}
html .pmenu button:hover, html .cmdk-item.on, html .cmdk-item:hover{background:rgba(31,42,74,.09)}
html .cmdk{background:rgba(18,22,60,.20)}
html .cmdk-foot{background:rgba(255,255,255,.35)}
html .cmdk-in input{position:relative;z-index:1}

/* ---------- panel bawah / kanan ---------- */
html .backdrop{background:var(--scrim)}
html .sheet{background:var(--glass-3);-webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);box-shadow:inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(255,255,255,.6), var(--glass-shadow-lg)}
html .sheet .choice, html .sheet .card{background:rgba(255,255,255,.62)!important}
html .toast{background:rgba(20,24,60,.78);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -16px rgba(20,24,60,.6);padding:13px 20px;text-align:center}

/* ---------- chat ---------- */
html .chat-bubble{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #FFFFFF,0 6px 16px -10px rgba(62,50,40,.35)}
html .chat-message.mine .chat-bubble{background:linear-gradient(180deg,#34406A,#1F2A4A);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -10px rgba(31,42,74,.8)}
html .chat-demo-note{background:rgba(236,238,252,.72);border-color:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html .chat-reference{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85)}
html .chat-thread-row.active, html .chat-thread-row[aria-current]{background:rgba(255,255,255,.55)}

/* ---------- beranda Sales: barang customer saya + cek stok cepat ---------- */
.cu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 6px;position:relative;z-index:1}
.cu-head>div{display:flex;flex-direction:column;gap:4px}
.cu-lab{font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
.cu-big{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cu-big small{font-size:var(--t-lg);font-weight:700;color:var(--ink-3);letter-spacing:0;margin-left:6px}
.cu-sub{font-size:var(--t-sm);color:var(--ink-3)}
.cu-head .linkbtn{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.cu-head .linkbtn .ic{width:14px;height:14px}
.cu-list{padding:8px 0 2px;position:relative;z-index:1}
.cu-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:13px 20px;font:inherit;color:inherit;cursor:pointer}
.cu-row:first-child{border-top:0}
.cu-row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cu-row .t{font-size:15px;font-weight:700}
.cu-row .tags{display:flex;flex-wrap:wrap;gap:5px}
.cu-row .end{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}
.cu-row .end b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.cu-row .end small{font-size:var(--t-xs);color:var(--ink-3);line-height:1.3}
.cu-foot{font-size:var(--t-xs);color:var(--ink-3);margin:0;padding:10px 20px 16px;position:relative;z-index:1}
.pnl-hs{padding:14px;display:flex;flex-direction:column;gap:6px}
.hs-in{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(28,34,96,.08);position:relative;z-index:1;cursor:text}
.hs-in:focus-within{background:rgba(255,255,255,.92);box-shadow:0 0 0 4px rgba(31,42,74,.14);border-color:var(--accent)}
.hs-in .ic{width:19px;height:19px;color:var(--ink-3);flex:none}
.hs-in input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:16px;color:var(--ink);height:100%}
#hs-list{position:relative;z-index:1}
.hs-hint{font-size:var(--t-sm);color:var(--ink-3);margin:6px 8px 4px}
.hs-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:10px 8px;border-radius:16px;font:inherit;color:inherit;cursor:pointer}
.hs-row .sw{width:42px;height:42px;border-radius:12px}
.hs-row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hs-row .t{font-size:15px;font-weight:700}
.hs-row .d{font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}
.hs-row .end{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.hs-row .end b{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.hs-row .end small{font-size:var(--t-xs);color:var(--ink-3)}
.pnl>*{position:relative;z-index:1}

/* ---------- komputer: menu samping kaca melayang, isi bergulir di bawah bar atas ---------- */
@media (min-width:1000px){
  html .app{grid-template-columns:284px minmax(0,1fr);grid-template-rows:72px minmax(0,1fr) auto}
  /* menu samping: putih kaca netral (Layanto 20 Okt 11.21, dari contoh gambarnya; sebelumnya krem kecokelatan, sebelumnya lagi terlalu peach) */
  html .side{margin:12px 0 12px 12px;border-radius:28px;background:rgba(243,240,237,.78)!important;background-image:none!important;
    -webkit-backdrop-filter:blur(30px) saturate(100%);backdrop-filter:blur(30px) saturate(100%);color:var(--ink);
    border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.35), var(--glass-shadow);padding:18px 12px 14px}
  html .sbrand b{color:var(--ink)}
  html .sbrand small{color:var(--ink-3)}
  html .sgrp{color:var(--ink-3)}
  html .sitem{color:var(--ink-2);border-radius:999px;padding-left:14px}
  html .sitem .ic{color:var(--ink-3)}
  html .sitem:hover{background:rgba(255,255,255,.5);color:var(--ink)}
  html .sitem.on{background:rgba(255,255,255,.86);color:var(--accent);box-shadow:inset 0 1px 0 #FFFFFF, 0 8px 18px -10px rgba(62,50,40,.45)}
  html .sitem.on .ic{color:var(--accent)}
  html .sitem .n{background:rgba(31,42,74,.12);color:var(--accent)}
  html .sitem.on .n{background:var(--accent);color:#FFFFFF}
  html .sfoot{border-top-color:var(--line)}
  html .sfoot b{color:var(--ink)}
  html .sfoot .main span{color:var(--ink-3)}
  html .topbar{grid-row:1;grid-column:2;position:relative;z-index:5;padding:0 32px}
  html .app .screen{grid-row:1 / -1;grid-column:2;padding-top:calc(var(--top,72px) + 12px);padding-bottom:calc(var(--bot,0px) + 32px)}
  html .app[data-view="chat"] .screen{padding-top:calc(var(--top,72px) + 8px);padding-bottom:calc(var(--bot,0px) + 20px)}
  html .footbar:not(:empty){grid-row:3;grid-column:2;z-index:5;margin:0 24px 16px;border-radius:26px;border:0;padding:12px 14px;
    background:var(--glass-2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow-lg)}
  html .footbar:not(:empty)>*{position:relative;z-index:1}
  html .sheet{margin:12px;height:calc(100% - 24px);border-radius:30px;width:500px}
  html .toast{border-radius:18px}
}

/* ---------- HP: bar atas dan dock melayang, isi bergulir di bawahnya ---------- */
@media (max-width:999.98px){
  html .app{display:block}
  html .topbar{position:absolute;top:0;left:0;right:0;z-index:6;min-height:62px}
  html .app .screen{position:absolute;inset:0;padding-top:calc(var(--top,62px) + 8px);padding-bottom:calc(var(--bot,0px) + 20px)}
  html .app[data-view="chat"] .screen{padding-top:calc(var(--top,62px) + 6px);padding-bottom:calc(var(--bot,0px) + 10px)}
  html .mobile-dock:not(:empty){position:absolute;left:12px;right:12px;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 6px));z-index:6;
    border-radius:999px;border:1px solid var(--glass-edge);padding:6px;gap:2px;
    background:var(--glass-2);-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);box-shadow:var(--glass-shadow-lg)}
  html .dock-item{position:relative;z-index:1;border-radius:999px;min-height:56px;color:var(--ink-2)}
  html .dock-item.on{background:rgba(255,255,255,.9);color:var(--accent);box-shadow:inset 0 1px 0 #FFFFFF, 0 6px 14px -8px rgba(62,50,40,.5)}
  html .dock-order{color:var(--accent)}
  html .footbar:not(:empty){position:absolute;left:10px;right:10px;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 6px));z-index:6;
    border-radius:30px;border:0;padding:10px;gap:8px;
    background:var(--glass-2);-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);box-shadow:var(--glass-shadow-lg)}
  html .footbar:not(:empty)>*{position:relative;z-index:1}
  html .sheet{width:calc(100% - 16px);margin:0 8px max(8px,env(safe-area-inset-bottom,0px));border-radius:32px}
  html .toast{left:16px;right:16px;bottom:calc(var(--bot,0px) + 12px);z-index:40}
  html .pnl, html .kpis{border-radius:24px}
  html .app[data-rootpad="1"] .mobile-dock:not(:empty), html .app[data-rootpad="1"] .footbar:not(:empty){bottom:10px}
  html .app[data-rootpad="1"] .sheet{margin-bottom:8px}
  .hm-team .pnl-hs{order:1}
  .hm-team .pnl-prio{order:2}
  .hm-team>.quick{order:3}
  .hm-team .pnl-orders{order:4}
  .hm-team .pnl-act{order:5}
  .hm-sales .pnl-cust{order:1}
  .hm-sales .pnl-hs{order:2}
  .hm-sales .pnl-prio{order:3}
  .hm-sales .pnl-act{order:4}
  .cu-big{font-size:40px}
}

/* ---------- layar masuk: kaca di atas latar celup ---------- */
html .app[data-view="start"] .screen{grid-column:1;grid-row:1 / -1;padding:0;background:transparent}
html .app[data-view="start"]{background:linear-gradient(90deg, rgba(50,38,28,.64), rgba(50,38,28,.42) 48%, rgba(44,40,58,.10)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='g0' cx='0' cy='560' r='760' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23DDBE8E'/%3E%3Cstop offset='.55' stop-color='%23BE9D76'/%3E%3Cstop offset='1' stop-color='%239E8268'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFFDF8' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23FFFDF8' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='g1' x1='430' y1='420' x2='930' y2='260' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F1E9DC'/%3E%3Cstop offset='.55' stop-color='%23C9B49B'/%3E%3Cstop offset='1' stop-color='%23A9937E'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='930' y1='430' x2='1500' y2='20' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F2ECE4'/%3E%3Cstop offset='.5' stop-color='%23C4B6AB'/%3E%3Cstop offset='1' stop-color='%239F928C'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' x1='980' y1='520' x2='1230' y2='1000' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E8E5EA'/%3E%3Cstop offset='.45' stop-color='%23ACAABF'/%3E%3Cstop offset='1' stop-color='%238B8CA8'/%3E%3C/linearGradient%3E%3ClinearGradient id='g4' x1='1260' y1='720' x2='1640' y2='520' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F1F2F4'/%3E%3Cstop offset='.6' stop-color='%23D3D7DE'/%3E%3Cstop offset='1' stop-color='%23BCC4CF'/%3E%3C/linearGradient%3E%3Cfilter id='s1' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='-18' dy='10' stdDeviation='34' flood-color='%233B2C20' flood-opacity='.32'/%3E%3CfeDropShadow dx='-3' dy='2' stdDeviation='4' flood-color='%233B2C20' flood-opacity='.14'/%3E%3C/filter%3E%3Cfilter id='s2' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='-14' dy='-16' stdDeviation='34' flood-color='%232E2A36' flood-opacity='.30'/%3E%3CfeDropShadow dx='-2' dy='-3' stdDeviation='4' flood-color='%232E2A36' flood-opacity='.12'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23g0)'/%3E%3Cg filter='url(%23s1)'%3E%3Cpath d='M380-60C640 40 560 330 360 520S40 900-60 1060H1700V-60Z' fill='url(%23g1)'/%3E%3C/g%3E%3Cellipse cx='470' cy='600' rx='230' ry='330' transform='rotate(38 470 600)' fill='url(%23h)'/%3E%3Cpath d='M380-60C640 40 560 330 360 520S40 900-60 1060' fill='none' stroke='%23FFFBF3' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s1)'%3E%3Cpath d='M990-60C1190 60 1130 330 870 470S360 760 170 1060H1700V-60Z' fill='url(%23g2)'/%3E%3C/g%3E%3Cellipse cx='1000' cy='380' rx='200' ry='300' transform='rotate(50 1000 380)' fill='url(%23h)'/%3E%3Cpath d='M990-60C1190 60 1130 330 870 470S360 760 170 1060' fill='none' stroke='%23FFFBF3' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s2)'%3E%3Cpath d='M460 1060C560 760 820 600 1100 470S1520 200 1700 60V1060Z' fill='url(%23g3)'/%3E%3C/g%3E%3Cellipse cx='980' cy='640' rx='160' ry='320' transform='rotate(55 980 640)' fill='url(%23h)' opacity='.7'/%3E%3Cpath d='M460 1060C560 760 820 600 1100 470S1520 200 1700 60' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s2)'%3E%3Cpath d='M1020 1060C1100 820 1320 640 1500 420S1650 160 1700 120V1060Z' fill='url(%23g4)'/%3E%3C/g%3E%3Cpath d='M1020 1060C1100 820 1320 640 1500 420S1650 160 1700 120' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='3'/%3E%3Crect width='1600' height='1000' fill='%23F3F2F2' opacity='0.46'/%3E%3C/svg%3E") 50% 50% / cover no-repeat, #5A4C42}
html .lg-art{background:transparent!important;background-image:none!important;color:rgba(255,255,255,.86)}
html .lg-art p, html .lg-art .lg-foot, html .lg-art .lg-cap{color:rgba(255,255,255,.82)}
html .lg-brand small{color:rgba(255,255,255,.75)}
html .lg-bolt span{color:rgba(255,255,255,.8)}
html .lg-bolt i{background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.85) 55%,rgba(255,255,255,.5));box-shadow:inset 0 1px 0 #FFFFFF,0 10px 24px -12px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html .lg-form{background:transparent}
html .lg-card{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);border-radius:32px;padding:30px 28px;box-shadow:var(--glass-shadow-lg);max-width:420px}
html .lg-card>*{position:relative;z-index:1}
html .lg-role{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
html .lg-person{background:rgba(255,255,255,.78);border-color:rgba(28,34,96,.10);box-shadow:inset 0 1px 0 #FFFFFF}
html .lg-person:hover{background:#FFFFFF}
html .lg-demo{border-top-color:rgba(28,34,96,.12)}
@media (max-width:999.98px){
  html .app[data-view="start"]{background:linear-gradient(180deg, rgba(50,38,28,.66), rgba(50,38,28,.40) 34%, rgba(44,40,58,.08) 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='g0' cx='0' cy='560' r='760' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23DDBE8E'/%3E%3Cstop offset='.55' stop-color='%23BE9D76'/%3E%3Cstop offset='1' stop-color='%239E8268'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFFDF8' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23FFFDF8' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='g1' x1='430' y1='420' x2='930' y2='260' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F1E9DC'/%3E%3Cstop offset='.55' stop-color='%23C9B49B'/%3E%3Cstop offset='1' stop-color='%23A9937E'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='930' y1='430' x2='1500' y2='20' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F2ECE4'/%3E%3Cstop offset='.5' stop-color='%23C4B6AB'/%3E%3Cstop offset='1' stop-color='%239F928C'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' x1='980' y1='520' x2='1230' y2='1000' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E8E5EA'/%3E%3Cstop offset='.45' stop-color='%23ACAABF'/%3E%3Cstop offset='1' stop-color='%238B8CA8'/%3E%3C/linearGradient%3E%3ClinearGradient id='g4' x1='1260' y1='720' x2='1640' y2='520' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F1F2F4'/%3E%3Cstop offset='.6' stop-color='%23D3D7DE'/%3E%3Cstop offset='1' stop-color='%23BCC4CF'/%3E%3C/linearGradient%3E%3Cfilter id='s1' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='-18' dy='10' stdDeviation='34' flood-color='%233B2C20' flood-opacity='.32'/%3E%3CfeDropShadow dx='-3' dy='2' stdDeviation='4' flood-color='%233B2C20' flood-opacity='.14'/%3E%3C/filter%3E%3Cfilter id='s2' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='-14' dy='-16' stdDeviation='34' flood-color='%232E2A36' flood-opacity='.30'/%3E%3CfeDropShadow dx='-2' dy='-3' stdDeviation='4' flood-color='%232E2A36' flood-opacity='.12'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23g0)'/%3E%3Cg filter='url(%23s1)'%3E%3Cpath d='M380-60C640 40 560 330 360 520S40 900-60 1060H1700V-60Z' fill='url(%23g1)'/%3E%3C/g%3E%3Cellipse cx='470' cy='600' rx='230' ry='330' transform='rotate(38 470 600)' fill='url(%23h)'/%3E%3Cpath d='M380-60C640 40 560 330 360 520S40 900-60 1060' fill='none' stroke='%23FFFBF3' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s1)'%3E%3Cpath d='M990-60C1190 60 1130 330 870 470S360 760 170 1060H1700V-60Z' fill='url(%23g2)'/%3E%3C/g%3E%3Cellipse cx='1000' cy='380' rx='200' ry='300' transform='rotate(50 1000 380)' fill='url(%23h)'/%3E%3Cpath d='M990-60C1190 60 1130 330 870 470S360 760 170 1060' fill='none' stroke='%23FFFBF3' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s2)'%3E%3Cpath d='M460 1060C560 760 820 600 1100 470S1520 200 1700 60V1060Z' fill='url(%23g3)'/%3E%3C/g%3E%3Cellipse cx='980' cy='640' rx='160' ry='320' transform='rotate(55 980 640)' fill='url(%23h)' opacity='.7'/%3E%3Cpath d='M460 1060C560 760 820 600 1100 470S1520 200 1700 60' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='3'/%3E%3Cg filter='url(%23s2)'%3E%3Cpath d='M1020 1060C1100 820 1320 640 1500 420S1650 160 1700 120V1060Z' fill='url(%23g4)'/%3E%3C/g%3E%3Cpath d='M1020 1060C1100 820 1320 640 1500 420S1650 160 1700 120' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='3'/%3E%3Crect width='1600' height='1000' fill='%23F3F2F2' opacity='0.46'/%3E%3C/svg%3E") 58% 50% / cover no-repeat, #5A4C42}
  html .lg-form{padding:4px 12px 28px}
  html .lg-card{padding:24px 20px;border-radius:28px}
  html .lg-art{padding-bottom:22px}
}

/* ---------- aksesibilitas dan cadangan ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html:root{--glass:rgba(255,255,255,.9);--glass-2:rgba(255,255,255,.94);--glass-3:rgba(255,255,255,.97)}
}
@media (prefers-reduced-transparency:reduce){
  html:root{--glass:rgba(255,255,255,.96);--glass-2:rgba(255,255,255,.97);--glass-3:#FFFFFF}
}

/* ---------- HP: iPhone memperbesar layar (zoom) kalau huruf kotak isian di bawah 16px; semua isian dibuat 16px ---------- */
@media (max-width:999.98px){
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html textarea, html select{font-size:16px!important}
}