/* ===========================================================
   SIMLOG-IKAN — CV. PUTRA KEMBAR SULTRA
   Design system
   =========================================================== */

/* Palet diadopsi dari referensi Framer template "Coinest" (peterdraw):
   hijau hutan #1E4841 · hitam zaitun #0D1008 · mint #BBF49C · lime #ECFDCD
   hijau muda #ECF4E9 · abu teks #677489 · garis #E3E8EF */
:root{
  --brand:#1E4841;
  --brand-600:#173A34;
  --brand-700:#122C28;
  --brand-soft:#E1EDE0;
  --brand-softer:#F0F6EF;

  --mint:#BBF49C;
  --mint-600:#A3E47E;
  --mint-dark:#4F7A45;
  --mint-soft:#ECF4E9;
  --lime:#ECFDCD;
  --lime-soft:#F5FBE7;
  --coral:#C2573C;
  --coral-soft:#FAE7E1;

  --ink:#0D1008;
  --text:#2B2F27;
  --muted:#677489;
  --faint:#8D97A5;

  --bg:#ECF4E9;
  --surface:#ffffff;
  --surface-2:#FAFAFA;
  --border:#E3E8EF;
  --border-2:#D2DAE3;

  --ok:#2E7D4F;
  --ok-soft:#E2F1E6;
  --warn:#96681B;
  --warn-soft:#FBF1DD;
  --danger:#B3402E;
  --danger-soft:#F9E6E2;
  --info:#3E5C82;
  --info-soft:#E6EDF5;
  --purple:#5B4B86;
  --purple-soft:#ECE8F5;

  --r-sm:10px;
  --r:16px;
  --r-lg:20px;
  --r-xl:24px;
  --pill:100px;

  --sh-1:0 1px 2px rgba(30,72,65,.05), 0 2px 6px rgba(30,72,65,.05);
  --sh-2:0 2px 6px rgba(30,72,65,.06), 0 10px 26px rgba(30,72,65,.08);
  --sh-3:0 14px 40px rgba(30,72,65,.14);

  /* =================================================================
     LAPISAN TEMA — semua warna di bawah ini boleh ditimpa oleh tema.
     Blok `html[data-tema="..."]` di akhir berkas hanya mengganti
     variabel-variabel ini, jadi tidak ada satu pun aturan layout yang
     perlu ditulis ulang per tema.
     ================================================================= */

  /* Teks di atas bidang berwarna (tombol, badge, header) */
  --on-brand:#ffffff;
  /* Warna TEKS bernuansa merek (di atas --mint, --lime, --brand-soft,
     atau permukaan biasa). Di tema terang ini sama dengan --brand;
     di tema gelap --brand adalah warna mid-tone untuk LATAR, jadi
     perannya diganti versi terang (--brand-700). Karena itu teks
     bermerek WAJIB memakai --brand-ink, bukan --brand langsung. */
  --brand-ink:var(--brand);
  /* RGB dasar bayangan — dipakai sebagai rgba(var(--shadow-rgb), .12) */
  --shadow-rgb:30,72,65;

  /* Permukaan interaktif (dropdown, input fokus, tombol sekunder) */
  --surface-hover:#ffffff;
  --scroll-thumb:#c6d3dd;
  --scrim:rgba(13,27,38,.72);
  --scrim-soft:rgba(13,27,38,.42);
  --focus-ring:rgba(30,72,65,.10);

  /* Bilah tetap (sticky) — topbar desktop & bottomnav mobile.
     Sengaja ber-alpha karena di atasnya ada backdrop-filter:blur().
     WAJIB bertema: bila dipatok putih, tema gelap akan menyisakan
     bilah putih dengan teks terang di atasnya (tak terbaca). */
  --bar:rgba(255,255,255,.9);
  --bar-solid:rgba(255,255,255,.97);

  /* Tombol */
  --soft-hover:#cfeaf1;
  --coral-hover:#9e3726;
  --knob:#ffffff;

  /* Garis tepi chip / peringatan */
  --brand-border:#c3e0c6;
  --ok-border:#c6e3d0;
  --warn-border:#efddb4;
  --danger-border:#efcfc6;
  --info-border:#cfdce8;
  --purple-border:#d9d2ec;

  /* Warna teks chip (versi pekat dari --*-soft) */
  --ok-ink:#0b6e40;
  --danger-ink:#a92e2e;
  --info-ink:#1e40af;
  --purple-ink:#6d28d9;

  /* Latar tipis untuk kartu KPI */
  --ok-tint:#eaf7f0;
  --warn-tint:#fdf4e6;
  --info-tint:#eaf1fd;
  --purple-tint:#f4eefd;

  /* Grafik & indikator */
  --warn-bar:#e8a33d;

  /* --- Login gate (layar masuk) — punya palet sendiri agar bisa
         dibuat gelap tanpa mengubah identitas halaman aplikasi --- */
  --lg-bg-1:#e9f6f3;
  --lg-bg-2:#e4f2f0;
  --lg-bg-3:#edf7f5;
  --lg-bg-4:#e1f1ee;
  --lg-blob-1:rgba(187,244,156,.85);
  --lg-blob-2:rgba(236,253,205,.85);
  --lg-blob-3:rgba(30,72,65,.12);
  --lg-card:#ffffff;
  --lg-hover:#fcfefd;
  --lg-border:#e6efec;
  --lg-ink:#0f2e2a;
  --lg-ink-2:#14332e;
  --lg-muted:#4e7a72;
  --lg-muted-2:#5c7570;
  --lg-muted-3:#8aa39e;
  --lg-accent:#1a7a6e;
  --lg-accent-hover:#155f56;
  --lg-accent-ink:#12655b;
  --lg-accent-soft:#edf8f5;
  --lg-accent-soft-2:#eaf6f3;
  --lg-accent-border:#cfe8e2;
  --lg-accent-border-2:#bcd9d2;
  --lg-dot:#9cc6be;
  --lg-ring:rgba(187,244,156,.55);
  --lg-shadow-rgb:26,122,110;
  --lg-on-accent:#ffffff;
  /* Peredup di atas foto/video latar halaman masuk. Warnanya HARUS ikut
     tema: pada tema terang teks hero berwarna gelap, jadi peredupnya
     terang; pada tema gelap sebaliknya. Tanpa ini, teks hero bisa hilang
     di atas foto yang kebetulan sewarna.

     Kekuatannya 62% — nilai terendah yang masih menjamin kontras teks
     hero >= 4,5 pada kasus terburuk (foto HITAM di tema terang, foto
     PUTIH di tema gelap). Lebih rendah dari itu, foto memang lebih
     terlihat, tetapi teks hero tidak lagi lolos ambang kontras. */
  --lg-scrim:rgba(255,255,255,.62);

  --sidebar-w:250px;
  --topbar-h:66px;
  --bottomnav-h:62px;
  --maxw:1500px;

  --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;max-width:100%;overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
svg{flex:none}
[hidden]{display:none!important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ============================ LOGIN GATE ============================ */
.login-gate{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;padding:24px;
  background:linear-gradient(150deg,var(--lg-bg-2) 0%,var(--lg-bg-3) 42%,var(--lg-bg-4) 100%);
  overflow:auto;
}
.login-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, var(--lg-blob-1), transparent 44%),
    radial-gradient(circle at 86% 82%, var(--lg-blob-2), transparent 46%),
    radial-gradient(circle at 60% 8%, var(--lg-blob-3), transparent 38%);
}
.login-card{
  position:relative;width:100%;max-width:430px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:34px 32px 28px;
  box-shadow:var(--sh-3);
}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.login-brand .emblem{
  width:60px;height:60px;border-radius:50%;flex:none;color:var(--lg-on-accent);
  background:transparent;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 8px 18px rgba(var(--shadow-rgb),.28);
}
.login-brand .emblem svg{width:28px;height:28px}
.login-brand .emblem .emblem-img{width:100%;height:100%;object-fit:cover;display:block}
.login-brand b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.login-brand span{display:block;font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.03em}

.login-card h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.login-sub{font-size:.88rem;color:var(--muted);margin:6px 0 22px}

.role-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 18px}
.role-opt{
  text-align:left;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);transition:.16s;
}
.role-opt b{display:block;font-size:.82rem;font-weight:700;color:var(--text)}
.role-opt span{display:block;font-size:.71rem;color:var(--muted);font-weight:600}
.role-opt:hover{border-color:var(--border-2);background:var(--surface)}
.role-opt.is-active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.1)}
.role-opt.is-active b{color:var(--brand-700)}

.login-hint{
  margin-top:20px;padding-top:16px;border-top:1px dashed var(--border-2);
  font-size:.75rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.login-hint b{font-weight:700;color:var(--text)}
.login-hint code{
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:2px 7px;font-size:.72rem;font-family:ui-monospace,Consolas,monospace;color:var(--brand-700);
}
.login-error{
  margin-top:12px;font-size:.82rem;font-weight:600;color:var(--danger);min-height:1em;text-align:center;
}
/* Pesan galat di dalam modal (mis. Ganti Kata Sandi) rata kiri mengikuti
   isian formulir, bukan rata tengah seperti di halaman masuk. */
.modal .login-error{text-align:left;margin:2px 0 0;font-size:.78rem}

/* ============================ APP SHELL ============================ */
.app{min-height:100%;display:flex;max-width:100%;overflow-x:hidden}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:220;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.sidebar-brand{
  height:var(--topbar-h);display:flex;align-items:center;gap:11px;padding:0 16px;
  border-bottom:1px solid var(--border);flex:none;
}
.sidebar-brand .emblem{
  width:38px;height:38px;border-radius:50%;flex:none;color:var(--on-brand);
  background:transparent;overflow:hidden;
  display:grid;place-items:center;
}
.sidebar-brand .emblem.sm{width:30px;height:30px}
.sidebar-brand .emblem svg{width:22px;height:22px}
.sidebar-brand .emblem .emblem-img{width:100%;height:100%;object-fit:cover;display:block}
.sidebar-brand-txt{min-width:0}
.sidebar-brand-txt b{display:block;font-size:.88rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.sidebar-brand-txt span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--faint)}
.sidebar-close{display:none;margin-left:auto;color:var(--muted);padding:6px;border-radius:8px}
.sidebar-close svg{width:20px;height:20px}

.sidebar-nav{flex:1;overflow-y:auto;padding:14px 10px 10px}
.nav-label{
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:14px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:.87rem;font-weight:600;color:var(--muted);margin-bottom:2px;transition:.15s;position:relative;
}
.nav-item svg{width:19px;height:19px}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.is-active{background:var(--brand-soft);color:var(--brand-700);font-weight:700}
.nav-item.is-active::before{
  content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--brand);
}
.nav-item .badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--danger);color:var(--on-brand);font-size:.66rem;font-weight:800;font-style:normal;
  display:grid;place-items:center;
}
.nav-item .badge:empty{display:none}
.nav-item .badge.is-soft{background:var(--warn-soft);color:var(--warn)}

.sidebar-foot{padding:12px 14px 16px;border-top:1px solid var(--border);flex:none}
.sidebar-scrim{
  position:fixed;inset:0;background:var(--scrim-soft);z-index:210;opacity:0;visibility:hidden;transition:.25s;
}
.sidebar-scrim.show{opacity:1;visibility:visible}

.sync-chip{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.74rem;font-weight:700;color:var(--muted);
}
.sync-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.sync-chip[data-state="synced"]{background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok-ink)}
.sync-chip[data-state="synced"] .dot{background:var(--ok)}
.sync-chip[data-state="syncing"]{background:var(--info-soft);border-color:var(--info-border);color:var(--info-ink)}
.sync-chip[data-state="syncing"] .dot{background:var(--info);animation:pulse 1s infinite}
.sync-chip[data-state="error"]{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink)}
.sync-chip[data-state="error"] .dot{background:var(--danger)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.main{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column}

.topbar{
  height:var(--topbar-h);flex:none;background:var(--bar);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 22px;
  position:sticky;top:0;z-index:150;
}
.topbar-title{min-width:0}
.topbar-title b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.topbar-title span{display:block;font-size:.75rem;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

.search-box{position:relative;display:flex;align-items:center}
.search-box svg{position:absolute;left:11px;width:16px;height:16px;color:var(--faint);pointer-events:none}
.search-box input{
  width:280px;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:99px;
  background:var(--surface-2);font-size:.85rem;transition:.16s;
}
.search-box input:focus{outline:none;background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.1);width:320px}

.icon-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;color:var(--muted);transition:.16s;flex:none;
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--surface-2);color:var(--brand-700);border-color:var(--border-2)}
.icon-btn.is-busy svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.user-menu{position:relative}
.user-btn{
  display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface);transition:.16s;
}
.user-btn:hover{background:var(--surface-2)}
.user-btn .avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-600));color:var(--on-brand);
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
}
.user-txt{text-align:left;line-height:1.15}
.user-txt b{display:block;font-size:.82rem;font-weight:700;color:var(--ink)}
.user-txt span{display:block;font-size:.68rem;color:var(--muted);font-weight:600}
.user-btn>svg{width:15px;height:15px;color:var(--faint);margin-left:2px}
.user-drop{
  position:absolute;right:0;top:calc(100% + 8px);min-width:56px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-2);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:160;
}
.user-menu.open .user-drop{opacity:1;visibility:visible;transform:none}
.user-drop a,.user-drop button{
  display:grid;place-items:center;width:42px;height:38px;padding:0;border-radius:10px;
  font-size:.84rem;font-weight:600;color:var(--text);
}
.user-drop a svg,.user-drop button svg{width:18px;height:18px}
.user-drop a[hidden],.user-drop button[hidden]{display:none!important}
.user-drop a:hover,.user-drop button:hover{background:var(--surface-2)}
.user-drop button{color:var(--danger);border-top:1px solid var(--border);border-radius:0;margin-top:4px;padding-top:0;height:42px}

.content{flex:1;padding:22px;max-width:var(--maxw);width:100%;margin:0 auto;padding-bottom:40px;min-width:0}
.view{animation:fadeUp .32s ease backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bottom nav */
.bottomnav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--bar-solid);backdrop-filter:blur(12px);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--bottomnav-h);color:var(--faint);font-size:.64rem;font-weight:700;
}
.bottomnav a svg{width:21px;height:21px}
.bottomnav a.is-active{color:var(--brand-ink)}

/* ============================ PRIMITIVES ============================ */
.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head .ph-txt{min-width:0;flex:1}
.page-head h2{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.page-head p{font-size:.86rem;color:var(--muted);margin-top:3px;max-width:70ch}
.page-actions{display:flex;gap:9px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:10px;font-size:.85rem;font-weight:700;
  border:1px solid transparent;transition:.16s;white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 4px 12px rgba(var(--shadow-rgb),.24)}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--shadow-rgb),.3)}
.btn-soft{background:var(--brand-soft);color:var(--brand-700)}
.btn-soft:hover{background:var(--soft-hover)}
.btn-outline{background:var(--surface);border-color:var(--border-2);color:var(--text)}
.btn-outline:hover{background:var(--surface-2);border-color:var(--border-2)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-sm{padding:6px 11px;font-size:.78rem;border-radius:8px}
.btn-sm svg{width:14px;height:14px}
.btn-block{width:100%;padding:12px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-icon{padding:7px;border-radius:8px;background:transparent;color:var(--muted)}
.btn-icon:hover{background:var(--surface-2);color:var(--text)}
.btn-icon.danger:hover{background:var(--danger-soft);color:var(--danger)}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.card-head{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.card-head h3{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.card-head .sub{font-size:.76rem;color:var(--muted);font-weight:600}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-body{padding:18px}
.card-body.tight{padding:0}

.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-12{grid-template-columns:repeat(12,1fr)}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-12{grid-column:span 12}

/* KPI */
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:17px 18px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.kpi::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--brand-softer);opacity:.7}
.kpi .k-top{display:flex;align-items:center;gap:10px;position:relative}
.kpi .k-ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--brand-soft);color:var(--brand-ink);
}
.kpi .k-ico svg{width:19px;height:19px}
.kpi .k-label{font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.kpi .k-val{font-size:1.62rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15;margin-top:10px;position:relative}
.kpi .k-val small{font-size:.78rem;font-weight:700;color:var(--muted);margin-left:4px}
.kpi .k-foot{font-size:.74rem;color:var(--muted);font-weight:600;margin-top:5px;position:relative;display:flex;align-items:center;gap:5px}
.kpi .k-foot.up{color:var(--ok)}
.kpi .k-foot.down{color:var(--danger)}
.kpi.warn .k-ico{background:var(--warn-soft);color:var(--warn)}
.kpi.warn::after{background:var(--warn-tint)}
.kpi.ok .k-ico{background:var(--ok-soft);color:var(--ok)}
.kpi.ok::after{background:var(--ok-tint)}
.kpi.purple .k-ico{background:var(--purple-soft);color:var(--purple)}
.kpi.purple::after{background:var(--purple-tint)}
.kpi.blue .k-ico{background:var(--info-soft);color:var(--info)}
.kpi.blue::after{background:var(--info-tint)}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:.71rem;font-weight:800;letter-spacing:.02em;background:var(--surface-2);
  border:1px solid var(--border);color:var(--muted);white-space:nowrap;
}
.chip.ok{background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok-ink)}
.chip.warn{background:var(--warn-soft);border-color:var(--warn-border);color:var(--warn)}
.chip.danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink)}
.chip.info{background:var(--info-soft);border-color:var(--info-border);color:var(--info-ink)}
.chip.purple{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple-ink)}
.chip.brand{background:var(--brand-soft);border-color:var(--brand-border);color:var(--brand-700)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
table.tbl{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
table.tbl th{
  text-align:left;padding:11px 14px;font-size:.71rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);background:var(--surface-2);
  border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;
}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tbody tr{transition:background .14s}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl .act{text-align:right;white-space:nowrap}
table.tbl .strong{font-weight:700;color:var(--ink)}
table.tbl .mono{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;letter-spacing:-.01em}
.tbl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.cell-sub{display:block;font-size:.72rem;color:var(--faint);font-weight:600}

/* Forms */
.field{margin-bottom:14px}
.field>label,.lbl{display:block;font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:6px}
.field .hint{font-size:.72rem;color:var(--faint);font-weight:600;margin-top:5px}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=email],input[type=time],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border-2);border-radius:10px;
  background:var(--surface);font-size:.87rem;transition:.16s;
}
textarea{min-height:88px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.12)}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted)}
input.invalid,select.invalid,textarea.invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(214,69,69,.1)}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:42px}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:6px;border-radius:8px;color:var(--faint)}
.pass-toggle svg{width:17px;height:17px}
.pass-toggle:hover{color:var(--brand-ink)}
.f-row{display:grid;gap:12px}
.f-2{grid-template-columns:1fr 1fr}
.f-3{grid-template-columns:1fr 1fr 1fr}
.switch-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.switch{position:relative;width:42px;height:24px;border-radius:99px;background:var(--border-2);transition:.2s;flex:none}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--knob);transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--brand)}
.switch.on::after{left:21px}
.switch-row span{font-size:.85rem;font-weight:600}

/* Filter bar */
.filters{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:13px 16px;
  border-bottom:1px solid var(--border);background:var(--surface-2);
}
.filters input,.filters select{width:auto;min-width:150px;padding:8px 11px;font-size:.82rem}
.filters .grow{flex:1;min-width:180px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:7px;font-size:.79rem;font-weight:700;color:var(--muted);transition:.15s}
.seg button.is-active{background:var(--surface-hover);color:var(--brand-700);box-shadow:var(--sh-1)}

/* Empty state */
.empty{
  padding:46px 20px;text-align:center;color:var(--muted);
}
.empty svg{width:52px;height:52px;color:var(--border-2);margin:0 auto 12px}
.empty b{display:block;font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:4px}
.empty p{font-size:.82rem;max-width:40ch;margin:0 auto}

/* Progress / bar */
.bar{height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .5s}
.bar.ok>i{background:var(--ok)}
.bar.warn>i{background:var(--warn-bar)}
.bar.danger>i{background:var(--danger)}
.bar.thin{height:5px}

/* Alert */
.alert{
  display:flex;gap:11px;padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface-2);font-size:.84rem;margin-bottom:16px;
}
.alert.warn{background:var(--warn-soft);border-color:var(--warn-border)}
.alert.warn .ico{color:var(--warn)}
.alert.danger{background:var(--danger-soft);border-color:var(--danger-border)}
.alert.danger .ico{color:var(--danger)}
.alert.ok{background:var(--ok-soft);border-color:var(--ok-border)}
.alert.ok .ico{color:var(--ok)}
.alert .ico svg{width:18px;height:18px}
.alert b{display:block;font-weight:800;margin-bottom:2px}
.alert p{color:var(--muted);font-size:.8rem}

/* Stat rows */
.stat-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border)}
.stat-line:last-child{border-bottom:none}
.stat-line .k{font-size:.82rem;color:var(--muted);font-weight:600}
.stat-line .v{font-size:.9rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* Timeline */
.timeline{display:grid;gap:0}
.tl-item{display:flex;gap:12px;position:relative;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:13px;top:26px;bottom:0;width:2px;background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-ico{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;z-index:1;
  background:var(--brand-soft);color:var(--brand-ink);border:2px solid var(--surface);
}
.tl-ico svg{width:14px;height:14px}
.tl-body{min-width:0;flex:1;padding-top:2px}
.tl-body b{display:block;font-size:.84rem;font-weight:700;color:var(--ink)}
.tl-body p{font-size:.78rem;color:var(--muted)}
.tl-time{font-size:.71rem;color:var(--faint);font-weight:700;white-space:nowrap}

/* Photo grid */
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photo{
  position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);cursor:zoom-in;background:var(--surface-2);
}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .del{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:5px;
  background:var(--scrim);color:var(--on-brand);display:grid;place-items:center;opacity:0;transition:.15s;
}
.photo:hover .del{opacity:1}
.photo .del svg{width:11px;height:11px}
.photo-add{
  width:64px;height:64px;border-radius:10px;border:1.5px dashed var(--border-2);
  display:grid;place-items:center;color:var(--faint);background:var(--surface-2);transition:.15s;
}
.photo-add:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-softer)}
.photo-add svg{width:20px;height:20px}

/* Modal */
.modal-scrim{
  position:fixed;inset:0;z-index:500;background:rgba(13,27,38,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;
  animation:fadeIn .18s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:600px;box-shadow:var(--sh-3);
  animation:popIn .22s cubic-bezier(.16,.84,.44,1) both;margin:auto 0;
}
.modal.wide{max-width:880px}
.modal.narrow{max-width:440px}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);
}
.modal-head h3{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.modal-head .sub{font-size:.76rem;color:var(--muted);font-weight:600}
.modal-head .x{margin-left:auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.modal-head .x svg{width:18px;height:18px}
.modal-head .x:hover{background:var(--surface-2);color:var(--text)}
.modal-body{padding:20px;max-height:calc(100vh - 260px);overflow-y:auto}
.modal-foot{
  display:flex;gap:9px;justify-content:flex-end;padding:15px 20px;border-top:1px solid var(--border);
  background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);flex-wrap:wrap;
}

/* Toast */
.toasts{position:fixed;right:18px;bottom:18px;z-index:800;display:grid;gap:9px;max-width:min(360px,calc(100vw - 36px))}
.toast{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-2);
  animation:slideIn .22s cubic-bezier(.16,.84,.44,1) both;font-size:.84rem;
}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.toast.out{animation:slideOut .2s ease both}
@keyframes slideOut{to{opacity:0;transform:translateX(24px)}}
.toast .ico{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:6px}
.toast .ico svg{width:13px;height:13px}
.toast.ok .ico{background:var(--ok-soft);color:var(--ok)}
.toast.err .ico{background:var(--danger-soft);color:var(--danger)}
.toast.info .ico{background:var(--info-soft);color:var(--info)}
.toast.warn .ico{background:var(--warn-soft);color:var(--warn)}
.toast b{display:block;font-weight:800;margin-bottom:1px}
.toast p{color:var(--muted);font-size:.79rem}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:900;background:rgba(9,18,28,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;
  animation:fadeIn .18s ease both;
}
.lightbox img{max-width:100%;max-height:78vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{color:rgba(255,255,255,.8);font-size:.82rem;font-weight:600;text-align:center}
.lb-close{
  position:absolute;top:16px;right:18px;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.12);color:var(--on-brand);display:grid;place-items:center;
}
.lb-close svg{width:20px;height:20px}
.lb-close:hover{background:rgba(255,255,255,.22)}

/* Chart */
.chart-box{width:100%;overflow:hidden}
.chart-box svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem;font-weight:700;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* Misc */
.divider{height:1px;background:var(--border);margin:16px 0}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.tiny{font-size:.74rem}
.b{font-weight:800;color:var(--ink)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.stack{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.mono{font-family:ui-monospace,Consolas,monospace}
.ro-banner{
  display:flex;gap:9px;align-items:center;padding:10px 14px;border-radius:var(--r);
  background:var(--info-soft);border:1px solid var(--info-border);color:var(--info-ink);font-size:.8rem;font-weight:600;margin-bottom:16px;
}
.ro-banner svg{width:16px;height:16px;flex:none}

/* Temp gauge ring */
.gauge{display:flex;align-items:center;gap:14px}
.gauge-ring{position:relative;width:74px;height:74px;flex:none}
.gauge-ring svg{width:74px;height:74px;transform:rotate(-90deg)}
.gauge-ring .val{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1;
}
.gauge-ring .val b{display:block;font-size:.98rem;font-weight:800;color:var(--ink)}
.gauge-ring .val span{font-size:.6rem;color:var(--faint);font-weight:700}

/* PO readiness */
.ready-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}

/* ============================ PRINT ============================ */
.print-area{display:none}
@media print{
  html,body{background:#fff!important;margin:0!important;padding:0!important;min-height:0!important}
  .login-gate,.app,.sidebar,.topbar,.bottomnav,.sidebar-scrim,.toasts,.lightbox,.modal-scrim,.page-actions,.no-print{display:none!important}
  .main,.content{margin:0!important;padding:0!important;max-width:none!important;display:none!important}
  .view{display:none!important}
  .print-area{display:block!important;visibility:visible!important;position:static!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;break-before:auto!important;page-break-before:auto!important}
  .print-area .doc{break-before:auto;page-break-before:auto;break-after:auto;page-break-after:auto}
  @page{size:A4;margin:14mm 12mm}
}
.doc{font-family:'Segoe UI',Arial,sans-serif;color:#111;font-size:11.5pt;line-height:1.45}
.doc .kop{display:flex;align-items:center;gap:16px;border-bottom:3px double #1E4841;padding-bottom:10px;margin-bottom:4px}
.doc .kop .logo{width:64px;height:64px;flex:none}
.doc .kop .nama{font-size:19pt;font-weight:800;letter-spacing:.5px;color:#1E4841;line-height:1.1}
.doc .kop .tag{font-size:9pt;font-weight:700;letter-spacing:2px;color:#1E4841}
.doc .kop .alamat{font-size:8.6pt;color:#444;margin-top:3px}
.doc .kop .kontak{font-size:8.6pt;color:#444;font-weight:600}
.doc hr.garis{border:none;border-top:1px solid #1E4841;margin:2px 0 14px}
.doc h1{font-size:14pt;font-weight:800;text-align:center;letter-spacing:1px;margin:6px 0 2px}
.doc .nomor{text-align:center;font-size:9.5pt;color:#555;margin-bottom:14px}
.doc table{width:100%;border-collapse:collapse;font-size:10pt;margin:10px 0}
.doc th{background:#E8F1EC;border:1px solid #C3E0C6;padding:6px 8px;text-align:left;font-size:9.5pt}
.doc td{border:1px solid #DCE5DC;padding:6px 8px}
.doc td.r,.doc th.r{text-align:right}
.doc .meta{display:grid;grid-template-columns:120px 1fr;gap:2px 10px;font-size:10pt;margin-bottom:10px}
.doc .meta dt{color:#555;font-weight:600}
.doc .meta dd{font-weight:700}
.doc .ttd{display:flex;justify-content:space-between;margin-top:26px;font-size:10pt;text-align:center}
.doc .ttd .box{width:44%}
.doc .ttd .space{height:52px}
.doc .ttd .nm{font-weight:800;border-top:1px solid #333;display:inline-block;padding-top:4px;min-width:150px}
.doc .foot-note{margin-top:18px;font-size:8.5pt;color:#666;border-top:1px dashed #bbb;padding-top:8px}
.doc .total-row td{font-weight:800;background:#FBF9F1}
/* Judul sub-tabel di dalam dokumen (dipakai opt.tabelLain pada Doc.build) */
.doc .tbl-judul{font-size:11.5pt;font-weight:800;margin:18px 0 6px;color:#1E4841;
  break-after:avoid;page-break-after:avoid}

/* ---------- Lampiran foto pada dokumen cetak (bukti pre-order) ---------- */
.doc .lampiran{margin-top:20px;break-before:page;page-break-before:always}
.doc .lampiran-judul{font-size:12pt;font-weight:800;text-align:center;letter-spacing:.6px;
  margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid #1E4841;color:#1E4841}
.doc .lampiran-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.doc .lampiran-item{margin:0;border:1px solid #C3E0C6;border-radius:6px;overflow:hidden;
  background:#fff;break-inside:avoid;page-break-inside:avoid}
.doc .lampiran-item img{width:100%;height:auto;display:block;max-height:330px;object-fit:contain;background:#F5F5F5}
.doc .lampiran-item figcaption{font-size:8.5pt;font-weight:700;color:#444;
  padding:5px 8px;border-top:1px solid #E0E8E0;background:#F4F9F5}
/* Bila hanya 1 foto, tampilkan lebih besar & tidak melebar penuh */
.doc .lampiran-grid:has(.lampiran-item:only-child){grid-template-columns:1fr}
.doc .lampiran-grid:has(.lampiran-item:only-child) .lampiran-item img{max-height:520px}

/* ---------- Editor bukti di modal form (bukan dokumen cetak) ---------- */
.bukti-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.bukti-item{position:relative;margin:0;border:1px solid var(--border);border-radius:12px;
  overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.bukti-item img{width:100%;height:96px;object-fit:cover;display:block}
.bukti-item figcaption{font-size:.62rem;font-weight:700;color:var(--muted);
  padding:3px 6px;text-align:center;background:var(--surface);border-top:1px solid var(--border)}
.bukti-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:7px;
  background:var(--scrim);color:var(--on-brand);display:grid;place-items:center;
  opacity:0;transition:.15s;z-index:2}
.bukti-item:hover .bukti-del{opacity:1}
.bukti-del svg{width:12px;height:12px}
.bukti-drive{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:7px;
  background:rgba(26,122,110,.9);color:var(--on-brand);display:grid;place-items:center;z-index:2;text-decoration:none}
.bukti-drive svg{width:12px;height:12px}
.bukti-add{min-height:96px;border:1.5px dashed var(--border-2);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--faint);background:var(--surface-2);transition:.15s;font-size:.66rem;
  font-weight:700;line-height:1.25;text-align:center}
.bukti-add:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-softer)}
.bukti-add svg{width:26px;height:26px}

/* ============================ RESPONSIVE ============================ */
.only-mobile{display:none}
@media (max-width:1180px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .col-4,.col-8{grid-column:span 12}
  .f-3{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--sh-3)}
  .sidebar.show{transform:none}
  .sidebar-close{display:grid}
  .main{margin-left:0}
  .bottomnav{display:flex}
  .content{padding:16px 14px calc(var(--bottomnav-h) + 28px);max-width:none}
  .g-3,.g-2{grid-template-columns:1fr}
  .col-6{grid-column:span 12}
  .only-mobile{display:grid}
  .search-box{display:none}
  .topbar{padding:0 14px}
  .user-txt{display:none}
  .f-2,.f-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .g-4{grid-template-columns:1fr}
  .page-head h2{font-size:1.15rem}
  .card-head{padding:13px 14px}
  .card-body{padding:14px}
  .modal-body{padding:16px}
  .modal{max-width:100%}
  .toasts{right:12px;left:12px;bottom:calc(var(--bottomnav-h) + 12px);max-width:none}
  .kpi .k-val{font-size:1.4rem}
  .filters{padding:11px 12px}
  .filters input,.filters select{min-width:0;flex:1}
  .role-picker{grid-template-columns:1fr}
}

/* Jadwal pengiriman (beranda) */
.jadwal-item{padding:12px 0;border-bottom:1px solid var(--border)}
.jadwal-item:last-child{border-bottom:none;padding-bottom:0}
.jadwal-item:first-child{padding-top:0}

/* Editor item transaksi */
.items-editor{display:grid;gap:8px;margin-bottom:8px}
.item-row{
  display:grid;grid-template-columns:1fr 82px 106px 116px 32px;gap:7px;align-items:center;
  padding:8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);
}
.item-row select,.item-row input{padding:8px 10px;font-size:.83rem;background:var(--surface)}
.item-row .it-info{grid-column:1 / -1;font-size:.72rem;font-weight:700;color:var(--faint);letter-spacing:.01em}

/* ---------- Pemilih jenis ikan (dropdown rapi + pencarian) ---------- */
.fish-pick{
  display:flex;align-items:center;gap:9px;width:100%;min-width:0;cursor:pointer;text-align:left;
  padding:7px 9px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);
  font-family:inherit;transition:border-color .15s,box-shadow .15s,background .15s;
}
.fish-pick:hover{border-color:var(--brand-soft);background:var(--brand-softer)}
.fish-pick.open,.fish-pick:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.12);outline:none}
.fish-pick .fp-main{display:flex;flex-direction:column;min-width:0;flex:1}
.fish-pick .fp-nama{font-size:.83rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fish-pick .fp-nama.kosong{color:var(--faint);font-weight:700}
.fish-pick .fp-sub{font-size:.68rem;font-weight:600;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fish-pick .fp-chev{flex:0 0 auto;width:15px;height:15px;color:var(--faint);display:inline-flex;transition:transform .18s}
.fish-pick .fp-chev svg{width:15px;height:15px}
.fish-pick.open .fp-chev{transform:rotate(180deg);color:var(--brand-ink)}

.fp-ava{
  flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand-ink);
}
.fp-ava svg{width:15px;height:15px}
.fp-ava.beku{background:var(--info-soft);color:var(--info)}
.fp-ava.kosong{background:var(--surface-2);color:var(--faint)}

.fp-badge{
  flex:0 0 auto;font-size:.66rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  padding:3px 7px;border-radius:var(--pill);background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-border);
}
.fp-badge.low{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}

/* Panel mengambang */
.fish-panel{
  display:none;position:fixed;z-index:1200;width:min(400px,92vw);
  background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;
}
.fish-panel.open{display:flex;flex-direction:column;animation:fpIn .16s ease backwards}
@keyframes fpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fish-panel .fp-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:hidden}

.fp-cari-wrap{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);flex:0 0 auto}
.fp-cari-wrap svg{flex:0 0 auto;width:15px;height:15px;color:var(--faint)}
.fp-cari{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:.82rem;font-weight:600;color:var(--ink);
}
.fp-cari::placeholder{color:var(--faint);font-weight:600}

.fp-list{overflow-y:auto;flex:1 1 auto;min-height:0;padding:5px}
.fp-grup{
  padding:8px 10px 4px;font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:6px;
}
.fp-grup i{font-style:normal;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--pill);
  padding:1px 7px;font-size:.62rem;color:var(--mint-dark)}
.fp-opt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:8px 9px;border:0;border-radius:9px;background:transparent;font-family:inherit;
  transition:background .12s;
}
.fp-opt:hover,.fp-opt:focus-visible{background:var(--brand-softer);outline:none}
.fp-opt.sel{background:var(--brand-soft)}
.fp-opt .fp-nama{font-size:.82rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-opt-main{display:flex;flex-direction:column;min-width:0;flex:1}
.fp-opt-sub{display:flex;align-items:center;gap:6px;font-size:.66rem;font-weight:600;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-kode{
  font-size:.6rem;font-weight:900;letter-spacing:.04em;background:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;color:var(--brand-ink);flex:0 0 auto;
}
.fp-cek{flex:0 0 auto;width:17px;height:17px;color:var(--brand-ink);opacity:0;margin-left:2px}
.fp-cek svg{width:17px;height:17px}
.fp-opt.sel .fp-cek{opacity:1}
.fp-opt[hidden],.fp-grup[hidden]{display:none}
.fp-empty,.fp-nohasil{padding:20px 14px;text-align:center;font-size:.76rem;font-weight:600;color:var(--faint);line-height:1.6}
.fp-nohasil[hidden]{display:none}

.fp-kaki{border-top:1px solid var(--border);background:var(--surface-2);padding:8px;flex:0 0 auto}
.fp-add{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;cursor:pointer;
  padding:9px;border:1px dashed var(--border-2);border-radius:9px;background:var(--surface);font-family:inherit;
  font-size:.78rem;font-weight:800;color:var(--brand-ink);transition:border-color .15s,background .15s;
}
.fp-add:hover{background:var(--brand-softer);border-color:var(--brand)}
.fp-add svg{width:14px;height:14px}

/* Penerimaan Barang (mode cool): kolom terakhir = Pack, tombol hapus lebih kecil */
.item-row-cool .it-del{
  padding:3px;border-radius:6px;width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--faint);align-self:center;justify-self:center;
}
.item-row-cool .it-del svg{width:12px;height:12px}
.item-row-cool .it-del:hover{color:var(--danger);background:var(--danger-soft)}
.item-row-cool{grid-template-columns:1fr 82px 106px 116px 26px}
/* Pemilih unit cool storage + tombol tambah unit */
.unit-pick{display:flex;gap:8px;align-items:center}
.unit-pick select{flex:1;min-width:0}
.unit-pick .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){ .unit-pick{flex-wrap:wrap} .unit-pick .btn{width:100%;justify-content:center} }
.it-total{padding:9px 12px;border-radius:var(--r-sm);background:var(--brand-softer);
  border:1px solid var(--brand-border);color:var(--brand-700)}
.hint{font-size:.73rem;color:var(--faint);font-weight:600;line-height:1.5}
.lbl{font-size:.78rem;font-weight:700;color:var(--text);display:block;margin-bottom:7px}
code{font-family:ui-monospace,Consolas,monospace;background:var(--surface-2);
  border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:.9em}

@media (max-width:640px){
  .item-row{grid-template-columns:1fr 1fr}
  .item-row .fish-pick{grid-column:1 / -1}
  .fish-panel{width:min(400px,94vw)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================================================
   TEMA COINEST — penyesuaian tampilan mengikuti referensi
   Framer template Coinest (pill, hijau hutan, mint, lime)
   =========================================================== */

/* ---------- Tipografi ---------- */
body{font-family:var(--font);letter-spacing:-.005em}
h1,h2,h3,h4{letter-spacing:-1px}
.page-head h2{font-size:2rem;font-weight:700;letter-spacing:-1px}
.card-head h3{font-size:1.5rem;font-weight:700;letter-spacing:-.8px;color:var(--ink)}
.topbar-title b{font-size:1.65rem;font-weight:700;letter-spacing:-1px;color:var(--ink)}
.topbar-title span{font-size:1.15rem;font-weight:500;color:var(--muted);letter-spacing:-.2px}
.login-card h1{font-size:2.5rem;letter-spacing:-1.5px}
.login-sub{font-size:1.35rem}
.modal-head h3{font-size:1.6rem;letter-spacing:-.8px}
.empty b{font-size:1.3rem}
p,.lead{font-size:1.15rem}
.tiny{font-size:.95rem}
.cell-sub{font-size:.95rem}
td,th{font-size:1.05rem}

/* ---------- Latar & permukaan ---------- */
body{background:var(--bg)}
.content{padding:28px 28px 40px}
.topbar{background:var(--bar);border-bottom:1px solid var(--border);box-shadow:0 1px 12px rgba(var(--shadow-rgb),.05)}
.sidebar{background:var(--surface);border-right:1px solid var(--border)}
.card{border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 2px 10px rgba(var(--shadow-rgb),.05)}
.card:hover{box-shadow:0 4px 18px rgba(var(--shadow-rgb),.08)}
.card-head{border-bottom:1px solid var(--border);padding:20px 24px}
.card-body{padding:24px}
.filters{background:var(--surface-2);border-bottom:1px solid var(--border);padding:16px 18px}
.modal{border-radius:var(--r-xl)}
.modal-head{padding:22px 24px}
.modal-body{padding:24px}
.modal-foot{padding:18px 24px;background:var(--surface-2)}

/* ---------- Tombol: bentuk pill khas Tiya ---------- */
.btn,.btn-sm,.btn-block{border-radius:var(--pill);padding:11px 22px;font-size:1.05rem;font-weight:500;letter-spacing:-.2px}
.btn-sm{padding:8px 16px;font-size:1rem}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 16px rgba(var(--shadow-rgb),.2)}
.btn-primary:hover{background:var(--brand-600);box-shadow:0 8px 20px rgba(var(--shadow-rgb),.28)}
.btn-soft{background:var(--lime);color:var(--brand-ink);border:1px solid var(--mint-600)}
.btn-soft:hover{background:var(--mint);border-color:var(--mint-600);color:var(--brand-ink)}
.btn-outline{background:var(--surface);border-color:var(--border-2);color:var(--text)}
.btn-outline:hover{background:var(--lime-soft);border-color:var(--mint-600);color:var(--brand-ink)}
.btn-danger{background:var(--coral);color:var(--on-brand)}
.btn-danger:hover{background:var(--coral-hover)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--brand-ink)}
.btn-icon{border-radius:14px}
.btn-block{padding:14px}

/* ---------- Navigasi: item berbentuk pill ---------- */
.nav-item{border-radius:var(--pill);font-size:1.05rem;font-weight:500;padding:11px 16px;margin-bottom:4px}
.nav-item.is-active{background:var(--mint);color:var(--brand-ink);font-weight:700}
.nav-item.is-active::before{display:none}
.nav-item.is-active svg{color:var(--brand-ink)}
.nav-item:hover{background:var(--mint-soft);color:var(--mint-dark)}
.nav-item .badge{background:var(--coral)}
.nav-item .badge.is-soft{background:var(--lime);color:var(--brand-ink)}
.nav-label{font-size:.8rem;letter-spacing:.14em;color:var(--faint)}
.sidebar-brand{height:80px;border-bottom:1px solid var(--border)}
.sidebar-brand .emblem{background:transparent;width:44px;height:44px;border-radius:50%;overflow:hidden}
.sidebar-brand .emblem svg{width:26px;height:26px}
.sidebar-brand-txt b{font-size:1.05rem}
.sidebar-brand-txt span{font-size:.7rem}
.bottomnav{background:var(--bar-solid);border-top:1px solid var(--border)}
.bottomnav a{font-size:.78rem;font-weight:600;color:var(--muted)}
.bottomnav a.is-active{color:var(--brand-ink)}
.user-btn{border-radius:var(--pill);padding:4px 12px 4px 4px}
.user-drop{border-radius:var(--r);box-shadow:var(--sh-2)}
.icon-btn{border-radius:14px;border-color:var(--border)}
.icon-btn:hover{background:var(--mint-soft);color:var(--brand-ink);border-color:var(--mint-600)}
.search-box input{border-radius:var(--pill);background:var(--surface-2);border-color:var(--border);padding:10px 12px 10px 36px}
.search-box input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(var(--shadow-rgb),.14)}

/* ---------- Chip / badge: pill ---------- */
.chip{border-radius:var(--pill);padding:4px 12px;font-size:.9rem;font-weight:600;letter-spacing:0}
.chip.brand{background:var(--mint-soft);border-color:var(--brand-border);color:var(--brand-ink)}
.chip.ok{background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok)}
.chip.warn{background:var(--warn-soft);border-color:var(--warn-border);color:var(--warn)}
.chip.danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)}
.chip.info{background:var(--info-soft);border-color:var(--info-border);color:var(--info)}
.chip.purple{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)}
.seg{border-radius:var(--pill);background:var(--surface-2);border-color:var(--border);padding:4px}
.seg button{border-radius:var(--pill);font-size:1rem;font-weight:500}
.seg button.is-active{background:var(--mint);color:var(--brand-ink);font-weight:700}

/* ---------- Tabel ---------- */
table.tbl{font-size:1.05rem}
table.tbl th{
  background:var(--surface-2);color:var(--muted);
  font-size:.85rem;letter-spacing:.1em;font-weight:700;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
table.tbl td{padding:14px 16px;border-bottom:1px solid var(--border)}
table.tbl tbody tr:hover{background:var(--mint-soft)}
table.tbl .strong{color:var(--ink);font-weight:700}
.table-wrap{border-radius:0 0 var(--r-lg) var(--r-lg)}
.stat-line .k{font-size:1.05rem}
.stat-line .v{font-size:1.15rem;color:var(--ink)}

/* ---------- Formulir ---------- */
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=email],input[type=time],select,textarea{
  border-radius:12px;border:1px solid var(--border-2);background:var(--surface);padding:11px 14px;font-size:1.05rem;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(var(--shadow-rgb),.14)}
.field>label,.lbl{font-size:.95rem;font-weight:700;color:var(--ink)}
.hint{font-size:.9rem}
.item-row{border-radius:14px;border-color:var(--border);background:var(--surface-2);padding:10px}
.it-total{background:var(--mint-soft);border-color:var(--brand-border);color:var(--brand-ink);border-radius:12px;font-size:1.05rem}
.switch.on{background:var(--brand)}
.alert{border-radius:var(--r);font-size:1.05rem;padding:16px 18px}
.alert.warn{background:var(--lime-soft);border-color:var(--warn-border)}
.alert.danger{background:var(--danger-soft);border-color:var(--danger-border)}
.alert.ok{background:var(--ok-soft);border-color:var(--ok-border)}
.ro-banner{background:var(--mint-soft);border-color:var(--brand-border);color:var(--brand-ink);border-radius:var(--r);font-size:1rem}
.empty svg{color:var(--border-2)}

/* ---------- Bar & indikator ---------- */
.bar{background:var(--surface-2);border-color:var(--border);border-radius:var(--pill);height:10px}
.bar>i{background:var(--brand)}
.bar.ok>i{background:var(--ok)}
.bar.warn>i{background:var(--mint-600)}
.bar.danger>i{background:var(--coral)}
.prog .bar i{background:linear-gradient(90deg,var(--brand),var(--mint-dark))}
.prog .pill{background:var(--lime-soft);border:1px solid var(--mint-600);color:var(--warn)}
.kpi{border-radius:var(--r-lg);border-color:var(--border)}
.kpi .k-ico{background:var(--mint-soft);color:var(--mint-dark);border-radius:14px}
.kpi::after{background:var(--mint-soft);opacity:.6}
.kpi.warn .k-ico{background:var(--lime-soft);color:var(--warn)}
.kpi.warn::after{background:var(--lime-soft)}
.kpi.ok .k-ico{background:var(--ok-soft);color:var(--ok)}
.kpi.ok::after{background:var(--ok-soft)}
.kpi.purple .k-ico{background:var(--purple-soft);color:var(--purple)}
.kpi.purple::after{background:var(--purple-soft)}
.kpi.blue .k-ico{background:var(--info-soft);color:var(--info)}
.kpi.blue::after{background:var(--info-soft)}
.kpi .k-val{color:var(--ink);font-weight:700;letter-spacing:-1px}
.kpi .k-val small{color:var(--muted)}
.jadwal-item{border-bottom:1px solid var(--border)}

/* ---------- Login gate bergaya hero ---------- */
.login-gate{background:var(--bg)}
.login-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px;pointer-events:none}
.login-bg{
  background:
    radial-gradient(circle at 12% 16%, rgba(187,244,156,.75), transparent 46%),
    radial-gradient(circle at 86% 84%, rgba(236,253,205,.75), transparent 48%),
    radial-gradient(circle at 62% 6%, rgba(var(--shadow-rgb),.14), transparent 40%);
}
.login-card{position:relative;z-index:1;border-radius:var(--r-xl);border:1px solid var(--border);padding:40px 36px 32px;box-shadow:var(--sh-3)}
.login-brand .emblem{background:linear-gradient(140deg,var(--brand),var(--brand-600))}
.login-brand b{font-size:1.2rem}
.role-opt{border-radius:14px;border-color:var(--border)}
.role-opt.is-active{background:var(--lime-soft);border-color:var(--mint-600);box-shadow:0 0 0 3px var(--lg-ring)}
.role-opt.is-active b{color:var(--brand-ink)}
.login-hint code{border-color:var(--border);background:var(--surface-2);color:var(--brand-ink)}
.pass-wrap input{border-radius:12px}

/* ---------- Toast, modal, sinkronisasi ---------- */
.toast{border-radius:var(--r);font-size:1.02rem}
.toast b{font-size:1.05rem}
.sync-chip{border-radius:var(--pill);font-size:.9rem}
.sync-chip[data-state="synced"]{background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok)}
.sync-chip[data-state="syncing"]{background:var(--lime-soft);border-color:var(--warn-border);color:var(--warn)}
.sync-chip[data-state="error"]{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)}
.photo,.photo-add{border-radius:14px}
.gauge-ring .val b{color:var(--ink)}

/* ---------- Kop surat cetak (PDF / Word) ---------- */
.doc .kop{border-bottom:3px double var(--brand)}
.doc .kop .nama{color:var(--brand);font-weight:700}
.doc .kop .tag{color:var(--mint-dark)}
.doc .kop .alamat,.doc .kop .kontak{color:#5a5d6b}
.doc hr.garis{border-top:1px solid var(--brand)}
.doc h1{color:var(--ink)}
.doc th{background:var(--mint-soft);border:1px solid #b9d3c5;color:var(--mint-dark)}
.doc td{border:1px solid #d5e2d9}
.doc .total-row td{background:var(--surface-2)}
.doc .foot-note{border-top:1px dashed var(--border-2);color:#5f6a63}

/* ---------- Penyesuaian responsif tema baru ---------- */
@media (max-width:1180px){
  .content{padding:20px 16px calc(var(--bottomnav-h) + 28px)}
  .topbar-title b{font-size:1.4rem}
}
@media (max-width:640px){
  .content{padding:16px 12px calc(var(--bottomnav-h) + 24px)}
  .card-head{padding:15px 16px;gap:8px}
  .card-body{padding:16px}
  .modal-body{padding:16px}
  .modal-head{padding:18px 18px}
  .filters{padding:12px 14px}
  .page-head h2{font-size:1.6rem}
  .card-head h3{font-size:1.25rem}
  .topbar-title b{font-size:1.25rem}
  .btn,.btn-sm{padding:9px 16px}
  .login-card{padding:28px 22px 24px}
  .login-card h1{font-size:2rem}
}

/* ===========================================================
   POLISH — animasi halus & micro-interaction (kesan hidup)
   Hanya memakai transform / opacity / shadow / transition, dan
   memakai fill-mode "backwards" agar efek :hover tetap bekerja
   (animation "both/forwards" akan mengunci transform).
   =========================================================== */

@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(22px,-26px,0) scale(1.07)}
  66%{transform:translate3d(-18px,16px,0) scale(.95)}
}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes badgePop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}
@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes haloPulse{
  0%,100%{box-shadow:0 8px 18px rgba(var(--shadow-rgb),.28),0 0 0 0 rgba(var(--shadow-rgb),.30)}
  70%{box-shadow:0 8px 18px rgba(var(--shadow-rgb),.28),0 0 0 14px rgba(var(--shadow-rgb),0)}
}
@keyframes blinkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@keyframes sheen{0%{transform:translateX(-130%)}60%,100%{transform:translateX(260%)}}

/* ---------- Halaman masuk ---------- */
.login-bg{animation:floaty 20s ease-in-out infinite}
.login-bg::before,.login-bg::after{
  content:'';position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;
}
.login-bg::before{width:330px;height:330px;left:-70px;top:-50px;background:radial-gradient(circle,var(--mint),transparent 68%)}
.login-bg::after{width:390px;height:390px;right:-100px;bottom:-90px;background:radial-gradient(circle,var(--lime),transparent 68%)}
.login-wave{animation:floaty 26s ease-in-out infinite reverse;transform-origin:center bottom}

.login-card{animation:riseIn .55s cubic-bezier(.16,.84,.44,1) backwards}
.login-brand .emblem{animation:haloPulse 3.4s ease-out infinite}
.login-card h1{animation:riseIn .5s .08s cubic-bezier(.16,.84,.44,1) backwards}
.login-sub{animation:riseIn .5s .13s cubic-bezier(.16,.84,.44,1) backwards}
.login-card form{animation:riseIn .5s .18s cubic-bezier(.16,.84,.44,1) backwards}
.login-hint,.login-live{animation:riseIn .5s .28s cubic-bezier(.16,.84,.44,1) backwards}

.role-opt{position:relative;overflow:hidden;animation:riseIn .45s ease backwards}
.role-opt:nth-child(1){animation-delay:.20s}
.role-opt:nth-child(2){animation-delay:.26s}
.role-opt:nth-child(3){animation-delay:.32s}
.role-opt:nth-child(4){animation-delay:.38s}
.role-opt::after{
  content:'';position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-130%);
}
.role-opt:hover::after{animation:sheen .9s ease}
/* Bila jumlah peran ganjil, opsi terakhir melebar penuh agar seimbang */
.role-picker .role-opt:last-child:nth-child(odd){grid-column:span 2}

/* Baris jam langsung */
.login-live{
  display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 13px;
  border-radius:var(--pill);background:var(--brand-softer);border:1px solid var(--border);
  font-size:.76rem;color:var(--muted);font-weight:600;
}
.login-live b{font-variant-numeric:tabular-nums;color:var(--brand-ink);font-size:.87rem;letter-spacing:.02em}
.login-live .live-sep{color:var(--mint-dark);font-weight:800;font-size:.7rem;letter-spacing:.06em}
.login-live .live-txt{margin-left:auto}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(46,125,79,.16);animation:blinkDot 1.8s ease-in-out infinite;
}

/* ---------- Konten: kartu masuk berurutan ---------- */
.view>.card,
.view>.grid>*{animation:riseIn .46s cubic-bezier(.16,.84,.44,1) backwards}
.view>.card:nth-child(1),.view>.grid>*:nth-child(1){animation-delay:.02s}
.view>.card:nth-child(2),.view>.grid>*:nth-child(2){animation-delay:.07s}
.view>.card:nth-child(3),.view>.grid>*:nth-child(3){animation-delay:.12s}
.view>.card:nth-child(4),.view>.grid>*:nth-child(4){animation-delay:.17s}
.view>.card:nth-child(5),.view>.grid>*:nth-child(5){animation-delay:.22s}
.view>.card:nth-child(n+6),.view>.grid>*:nth-child(n+6){animation-delay:.27s}
.view>.page-head{animation:riseIn .4s cubic-bezier(.16,.84,.44,1) backwards}

/* ---------- Bar indikator tumbuh dari kiri ---------- */
.bar>i{transform-origin:left center;animation:growBar .75s cubic-bezier(.16,.84,.44,1) backwards}

/* ---------- Lencana & titik status ---------- */
.nav-item .badge.pop{animation:badgePop .45s cubic-bezier(.16,.84,.44,1) backwards}
.chip.danger .dot,.chip.warn .dot{animation:blinkDot 1.7s ease-in-out infinite}

/* ---------- Micro-interaction (khusus perangkat dengan kursor) ---------- */
@media (hover:hover) and (pointer:fine){
  .card{transition:transform .24s cubic-bezier(.16,.84,.44,1),box-shadow .24s ease,border-color .24s ease}
  .card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--border-2)}
  .btn:not(:disabled):active{transform:scale(.97)}
  .nav-item{transition:background .18s ease,color .18s ease,transform .18s ease}
  .nav-item:hover{transform:translateX(3px)}
  .bottomnav a{transition:transform .18s ease,color .18s ease}
  .bottomnav a:hover{transform:translateY(-2px)}
  .stat-line{transition:background .16s ease;border-radius:8px}
  .stat-line:hover{background:var(--mint-soft)}
  table.tbl tbody tr{transition:background .16s ease}
  .role-opt{transition:transform .18s ease,border-color .18s ease,background .18s ease}
  .role-opt:hover{transform:translateY(-2px)}
  .photo,.photo-add{transition:transform .2s ease,box-shadow .2s ease}
  .photo:hover,.photo-add:hover{transform:translateY(-2px) scale(1.02)}
}

/* ---------- Penyesuaian akhir untuk layar kecil ---------- */
@media (max-width:640px){
  .login-bg::before,.login-bg::after{filter:blur(36px);opacity:.42}
  .login-wave{height:104px}
  .login-live{font-size:.72rem;gap:6px;padding:8px 11px}
  .login-live .live-txt{display:none}
  .view>.card,.view>.grid>*{animation-duration:.38s}
}

/* ===========================================================
   KOP SURAT RESMI — CV. PUTRA KEMBAR SULTRA (emblem emas)
   Tata letak memakai tabel agar identik di browser & Word.
   =========================================================== */
.doc .kop{width:100%;border-collapse:collapse;border:none;padding:0;margin:0;background:none}
.doc .kop tbody,.doc .kop tr{background:none}
.doc .kop td{border:none;padding:0;background:none}
.doc .kop .kop-center{text-align:center}
.doc .kop .kop-inner{border:none;border-collapse:collapse;margin:0 auto;position:relative;left:-14px}
.doc .kop .kop-inner td{border:none;padding:0;background:none;vertical-align:middle;text-align:center}
.doc .kop .kop-logo{padding-right:18px}
.doc .kop .logo{display:block;width:76px;height:76px;background:transparent}
.doc .kop-img{display:block;width:100%;height:auto;max-width:100%;margin:0 0 6px 0}
.doc .kop .nama{
  font-family:Arial,Helvetica,sans-serif;font-size:20pt;font-weight:900;
  letter-spacing:1.9px;color:#111;line-height:1.06;white-space:nowrap;text-align:center;
}
.doc .kop .alamat{font-size:8.9pt;font-weight:600;color:#1c1c1c;margin-top:5px;line-height:1.25;text-align:center}
.doc .kop .kontak{font-size:8.9pt;font-weight:600;color:#1c1c1c;margin-top:1px;text-align:center}
.doc .kop .email{font-size:8.9pt;font-weight:600;color:#1c1c1c;margin-top:1px;text-align:center;display:inline-flex;justify-content:center;align-items:center}
.doc .kop .email svg{width:11px;height:11px;vertical-align:-1px;margin-right:4px}
.doc hr.garis{
  display:block;border:none;height:6px;width:100%;
  border-top:3px solid #C9A227;border-bottom:1px solid #C9A227;
  margin:7px 0 16px;
}

/* ===========================================================
   ANTREAN PRE ORDER & JADWAL PENGIRIMAN (Beranda)
   Tata letak card sederhana yang bisa diciut menjadi
   ringkasan dan dibentangkan untuk menampilkan rincian
   alokasi stok per item.
   =========================================================== */
.antrian-card .antrian-head{
  align-items:center;gap:14px;flex-wrap:wrap;
}
.antrian-title{display:flex;align-items:center;gap:12px;min-width:0}
.antrian-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px rgba(var(--shadow-rgb),.12);
  flex:none;
}
.antrian-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.antrian-controls .btn svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.antrian-tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:10px 18px 0;
  border-top:1px solid var(--border);
}
.antrian-tab{
  appearance:none;background:none;border:none;cursor:pointer;
  font:600 .78rem/1 'Inter',sans-serif;color:var(--faint);
  padding:7px 12px;border-radius:30px;
  transition:background .15s,color .15s;
}
.antrian-tab:hover{background:var(--mint-soft);color:var(--ink)}
.antrian-tab.is-active{background:var(--brand);color:var(--on-brand)}
.antrian-body{padding:14px 18px 18px}
.po-card{
  border:1px solid var(--border);border-radius:14px;
  background:var(--surface);
  margin-bottom:10px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.po-card:last-child{margin-bottom:0}
.po-card:hover{border-color:var(--border-2);box-shadow:0 4px 14px rgba(var(--shadow-rgb),.04)}
.po-card.is-open{border-color:var(--brand);box-shadow:0 6px 20px rgba(var(--shadow-rgb),.10)}
.po-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;
}
.po-no{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font:800 .82rem 'Inter',sans-serif;
  background:var(--brand);color:var(--on-brand);flex:none;
}
.po-card.is-open .po-no{background:var(--mint);color:var(--brand-ink)}
.po-meta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.82rem;color:var(--ink);
}
.po-meta svg{width:14px;height:14px;color:var(--faint);flex:none}
.po-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.po-actions .btn{padding:5px 10px}
.po-actions .btn svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.po-body{
  padding:0 16px 14px;
  border-top:1px dashed var(--border);
  animation:poReveal .25s ease-out;
}
@keyframes poReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.po-body-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;
  font-size:.84rem;color:var(--ink);
  padding:12px 0 8px;
}
.po-total{
  font-weight:700;color:var(--brand-ink);
  background:var(--mint-soft);padding:4px 10px;border-radius:30px;
  font-size:.78rem;
}
.po-table th,.po-table td{padding:8px 10px;font-size:.82rem}

/* Tabel Pre-Order kini punya kolom "Bukti" (11 kolom) — rapatkan agar
   kolom Pemesan tidak terpecah per kata di layar desktop. */
#view-po table.tbl{min-width:0}
#view-po table.tbl th,#view-po table.tbl td{padding:9px 10px}
#view-po table.tbl td[data-label="Pemesan"] .strong{white-space:nowrap}
#view-po table.tbl td[data-label="Bukti"]{white-space:nowrap;text-align:center}
#view-po table.tbl td[data-label="Bukti"] .btn{padding:5px 9px;font-size:.72rem}
#view-po table.tbl td[data-label="Bukti"] .btn svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
#view-po table.tbl td[data-label="Rincian"]{max-width:150px}
#view-po table.tbl .num{white-space:nowrap}
.po-foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;
  padding:10px 0 4px;border-top:1px dashed var(--border);
  font-size:.82rem;color:var(--muted);
}
.po-foot-meta{display:inline-flex;align-items:center;gap:6px}
.po-foot-meta svg{width:14px;height:14px;color:var(--faint)}
.po-foot .btn svg{width:13px;height:13px;vertical-align:-2px;margin-left:4px}
.po-foot-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- Panel "Lihat Bukti" di dalam Rincian Stok & Item ---- */
.po-bukti{
  margin-top:10px;padding:12px 14px;
  background:var(--surface-2);border:1px dashed var(--border);border-radius:12px;
}
.po-bukti-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.po-bukti-head b{font-size:.84rem;color:var(--ink)}
.po-bukti-photos .photo{width:92px;height:92px}
.po-card .po-bukti .photo{cursor:zoom-in}
.po-foot .btn.is-active{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-softer)}
.po-foot .btn[disabled]{opacity:.45;cursor:not-allowed}

/* Responsif: tumpuk vertikal di layar sempit */
@media (max-width:780px){
  .antrian-controls{width:100%;justify-content:flex-end}
  .antrian-tabs{padding:10px 14px 0}
  .antrian-body{padding:12px 14px 14px}
  .po-head{padding:12px 14px;gap:8px}
  .po-body{padding:0 14px 12px}
  .po-actions{margin-left:0;width:100%;justify-content:flex-end}
  .po-foot{flex-direction:column;align-items:flex-start}
}

@media (hover:hover) and (pointer:fine){
  .po-card:hover{transform:translateY(-1px)}
}

/* ===========================================================
   KALKULATOR KETERSEDIAAN STOK IKAN vs PRE ORDER (Beranda)
   =========================================================== */
.kalkulator-card .kalkulator-head{
  align-items:center;gap:14px;flex-wrap:wrap;
}
.kalkulator-title{display:flex;align-items:center;gap:12px;min-width:0}
.kalkulator-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kalkulator-controls .btn svg{width:13px;height:13px;vertical-align:-2px;margin-left:4px}
.k-total{
  font:700 .82rem/1 'Inter',sans-serif;
  color:var(--muted);
  background:var(--mint-soft);
  padding:6px 12px;border-radius:30px;
}
.kalkulator-tbl th{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.kalkulator-tbl td{font-size:.86rem;padding:11px 14px}
.kalkulator-tbl tbody tr{border-bottom:1px solid var(--border)}
.kalkulator-tbl tbody tr:last-child{border-bottom:none}
.kalkulator-tbl tbody tr:hover{background:var(--mint-soft)}
.dot-ikan{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:9px;flex:none;vertical-align:middle;
}
.dot-ikan.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(46,125,79,.18)}
.dot-ikan.danger{background:var(--danger);box-shadow:0 0 0 3px rgba(179,64,46,.18)}
.stok-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:middle;
}
.stok-dot.ok{background:var(--ok)}
.stok-dot.danger{background:var(--danger)}
@media (max-width:780px){
  .kalkulator-controls{width:100%;justify-content:flex-start}
  .k-total{font-size:.74rem}
}

/* ===========================================================
   COOL STORAGE — Penerimaan Barang Masuk
   =========================================================== */
.cool-headline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.cool-headline .k-total{
  font:700 .82rem/1 'Inter',sans-serif;
  color:var(--muted);
  background:var(--mint-soft);
  padding:6px 12px;border-radius:30px;
}
.cool-fish-list{
  font-size:.82rem;color:var(--ink);
  line-height:1.45;
  max-width:320px;
}
.cool-detail .ro{
  background:var(--surface-2);padding:8px 10px;border-radius:8px;
  font-size:.86rem;color:var(--ink);min-height:36px;
}
.cool-detail .tbl.tiny th,
.cool-detail .tbl.tiny td{padding:8px 10px;font-size:.8rem}

/* ===========================================================
   PEMBELIAN — Satu supplier dengan beberapa nota per tanggal
   =========================================================== */
.purchase-table>tbody>tr.purchase-supplier-row>td{padding:0;border-bottom:1px solid var(--border)}
.purchase-group-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 16px;cursor:pointer;background:var(--surface-2);
  transition:background .18s ease;
}
.purchase-group-head:hover{background:var(--mint-soft)}
.purchase-group-main{display:flex;align-items:center;gap:11px;min-width:0}
.purchase-group-main>b,.purchase-group-main>div>b{font-size:.9rem;color:var(--ink)}
.purchase-group-main .cell-sub{display:block;margin-top:3px}
.purchase-group-chevron{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--brand-ink);flex:none}
.purchase-group-chevron svg{width:15px;height:15px}
.purchase-group-head.is-open .purchase-group-chevron{transform:rotate(180deg);background:var(--brand);color:var(--on-brand)}
.purchase-group-stats{display:flex;align-items:center;justify-content:flex-end;gap:14px;font-size:.78rem;color:var(--muted);white-space:nowrap}
.purchase-group-stats strong{font-size:.88rem;color:var(--ink)}
.purchase-group-hint{color:var(--faint);font-size:.7rem}
.purchase-notes-wrap{display:none;padding:0 12px 12px;background:var(--surface-2)}
.purchase-notes-wrap.is-open{display:block;animation:purchaseNotesReveal .18s ease backwards}
@keyframes purchaseNotesReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.purchase-notes{width:100%;border-collapse:collapse;background:var(--surface)}
.purchase-notes th,.purchase-notes td{padding:10px 11px;border-bottom:1px solid var(--border);font-size:.8rem;text-align:left;vertical-align:middle}
.purchase-notes th{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:800}
.purchase-notes tr:last-child td{border-bottom:0}
.purchase-notes .num{text-align:right}
.purchase-notes .act{text-align:right;white-space:nowrap}
.purchase-note-no{color:var(--brand-ink)}
.purchase-date{font-weight:700;color:var(--text)}

@media (max-width:780px){
  .purchase-group-head{align-items:flex-start;flex-direction:column;padding:13px 12px;gap:9px}
  .purchase-group-stats{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px 12px}
  .purchase-group-hint{width:100%}
  .purchase-notes-wrap{padding:0 7px 8px;overflow-x:auto}
  .purchase-notes{min-width:720px}
}
/* Di HP: perkecil lebar minimum tabel nota agar tidak perlu banyak geser.
   Tabel tetap berada dalam wadah overflow-x:auto sehingga tidak merusak
   tata letak halaman, tetapi kini hanya sedikit yang perlu digeser. */
@media (max-width:640px){
  .purchase-notes{min-width:560px!important}
  .purchase-notes th,.purchase-notes td{padding:5px 6px;font-size:.58rem}
}

/* ===========================================================
   IKON MODUL — logo ikan & cool storage dari pengguna
   =========================================================== */
.nav-item .nav-logo{
  width:19px;height:19px;flex:none;display:block;object-fit:contain;
}
.nav-item .nav-logo-fish{transform:scale(1.18)}
.nav-item .nav-logo-snow{transform:scale(1.02)}
.bottomnav .nav-logo{width:20px;height:20px;display:block;object-fit:contain;margin:0 auto 2px}
.bottomnav .nav-logo-fish{transform:scale(1.22)}
.bottomnav .nav-logo-snow{transform:scale(1.04)}

@media (max-width:640px){
  .nav-item .nav-logo{width:20px;height:20px}
}

/* ===========================================================
   LOGO IDENTITAS — login, profil, dan favicon
   =========================================================== */
.login-brand .emblem .emblem-img,
.sidebar-brand .emblem .emblem-img{
  width:100%;height:100%;display:block;object-fit:contain;
  mix-blend-mode:normal;
}
.user-btn .avatar{
  overflow:hidden;background:var(--surface);padding:2px;
}
.user-btn .avatar img{
  width:100%;height:100%;display:block;object-fit:contain;
  border-radius:50%;mix-blend-mode:normal;
}

/* ===========================================================
   SURAT JALAN — tiga area tanda tangan
   ===========================================================
.doc .ttd-company{text-align:center}
.doc .ttd-three{gap:10px}
.doc .ttd-three .box{width:31%;flex:1;min-width:0}
.doc .ttd-three .nm:empty{min-height:1px}

/* ---------- Hormati preferensi "kurangi gerak" ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ===========================================================
   GATEWAY LOGIN — desain baru (kartu peran + panel hak akses)
   =========================================================== */
.login-gate{
  align-items:start;
  padding:34px 18px;
  background:
    radial-gradient(circle at 50% 0%, var(--lg-bg-1) 0%, transparent 55%),
    linear-gradient(180deg,var(--lg-bg-2) 0%,var(--lg-bg-3) 45%,var(--lg-bg-4) 100%);
}
.login-gate .lg-shell{
  margin:auto;width:100%;max-width:430px;
  display:flex;flex-direction:column;gap:15px;
}

/* ---------- Hero: logo bulat + nama perusahaan ---------- */
.lg-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px}
.lg-tile{
  width:66px;height:66px;border-radius:20px;background:var(--lg-card);
  border:1px solid var(--lg-border);box-shadow:0 10px 22px rgba(var(--lg-shadow-rgb),.14);
  display:grid;place-items:center;padding:7px;
}
.lg-tile img{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px}
.lg-brand{
  font-size:1.12rem;font-weight:800;letter-spacing:-.3px;color:var(--lg-ink);
  margin:2px 0 0;text-transform:uppercase;
}
.lg-tag{
  margin:0;font-size:.66rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--lg-muted);
}

/* ---------- Ilustrasi (di bawah tagline) ---------- */
.lg-illus{
  width:100%;max-width:300px;margin-top:6px;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--lg-border);background:var(--lg-card);
  box-shadow:0 12px 28px rgba(var(--lg-shadow-rgb),.16);
}
.lg-illus img{display:block;width:100%;height:auto;max-height:190px;object-fit:cover}

/* ---------- Foto / video latar halaman masuk ----------
   Semua position:fixed supaya selalu menutup viewport (halaman masuk
   bisa di-scroll di layar pendek) dan pointer-events:none supaya tidak
   pernah menghalangi klik pada formulir. z-index: foto/video 0,
   peredup 1, isi halaman 2. */
.lg-foto,.lg-video{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;
}
.lg-foto{background-size:cover;background-position:center;background-repeat:no-repeat}
/* PENTING: .lg-video TIDAK boleh punya latar hitam. Video tanpa bingkai
   pertama (mis. tautan yang salah, berkas lambat dimuat, atau autoplay
   ditolak) tidak melukis apa pun — kalau elemennya diberi background:#000,
   seluruh halaman masuk jadi hitam dan foto latar ikut tertutup. Dengan
   latar transparan, kegagalan video cukup menyisakan foto/tema di baliknya. */
.lg-video{background:transparent}

.lg-media-scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:var(--lg-scrim);
}
/* Peredup dipakai SERAGAM (bukan bergradasi) supaya kontras teks hero
   terjamin merata di seluruh halaman. Foto tetap terlihat karena peredup
   hanya 74% (tema terang) / 62% (tema gelap). */
.ada-media .lg-media-scrim{background:var(--lg-scrim)}
/* Tema terang: peredup terang, jadi teks hero dipatok ke warna tergelap
   (--lg-ink) dan diberi bayangan halus. --lg-muted terlalu rendah
   kontrasnya di atas foto. */
.ada-media .lg-tag{color:var(--lg-ink);text-shadow:0 1px 2px rgba(var(--lg-shadow-rgb),.28)}
.ada-media .lg-brand{text-shadow:0 1px 3px rgba(var(--lg-shadow-rgb),.3)}
/* Seluruh teks yang duduk LANGSUNG di atas foto dipatok ke warna tergelap
   (--lg-ink / --lg-ink-2). Warna aksen seperti --lg-accent / --lg-muted
   kontrasnya tidak cukup di atas foto, walau sudah ada peredup. */
.ada-media .lg-foot,
.ada-media .lg-foot b,
.ada-media .lg-foot i,
.ada-media .lg-foot .lg-foot-sep,
.ada-media .lg-credit,
.ada-media .lg-credit i{color:var(--lg-ink)}
.ada-media .lg-foot .live-dot{background:var(--lg-ink)}
.ada-media .lg-tile,.ada-media .lg-illus{box-shadow:0 12px 30px rgba(0,0,0,.22)}

/* .lg-shell harus di atas lapisan media */
.lg-shell{position:relative;z-index:2}

/* ---------- Kartu utama ---------- */
.lg-card{
  background:var(--lg-card);border:1px solid var(--lg-border);border-radius:22px;
  padding:24px 22px 22px;box-shadow:0 18px 44px rgba(15,46,42,.10);
}
.lg-head h2{font-size:1.06rem;font-weight:800;letter-spacing:-.3px;color:var(--lg-ink);margin:0}
.lg-head p{margin:5px 0 15px;font-size:.78rem;color:var(--lg-muted-2);font-weight:500;line-height:1.5}

.lg-strip{
  display:flex;align-items:center;gap:9px;
  background:var(--lg-accent-soft-2);border:1px solid var(--lg-accent-border);border-radius:12px;
  padding:10px 12px;margin-bottom:16px;
  font-size:.72rem;font-weight:600;color:var(--lg-muted);line-height:1.45;
}
.lg-strip svg{width:16px;height:16px;flex:none;color:var(--lg-accent)}
.lg-strip b{font-weight:800}

/* ---------- Pilihan peran ---------- */
.lg-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.lg-role{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:11px 10px 12px;border:1.5px solid var(--lg-border);border-radius:15px;
  background:var(--lg-card);cursor:pointer;text-align:left;transition:.18s;
}
.lg-role::after{display:none!important}
.lg-ico{
  width:32px;height:32px;border-radius:10px;background:var(--lg-accent-soft-2);color:var(--lg-muted-2);
  display:grid;place-items:center;transition:.18s;
}
.lg-ico svg{width:18px;height:18px}
.lg-role b{font-size:.79rem;font-weight:800;color:var(--lg-ink-2);line-height:1.2}
.lg-role em{font-style:normal;font-size:.66rem;font-weight:600;color:var(--lg-muted-2);line-height:1.35}
.lg-role:hover{border-color:var(--lg-accent-border-2);background:var(--lg-hover)}
.lg-role.is-active{
  border-color:var(--lg-accent);background:var(--lg-accent-soft);
  box-shadow:0 0 0 3px rgba(var(--lg-shadow-rgb),.12);
}
.lg-role.is-active .lg-ico{background:var(--lg-accent);color:var(--lg-on-accent)}
.lg-role.is-active b{color:var(--lg-accent-ink)}
.lg-role.is-active em{color:var(--lg-muted)}
.lg-role.is-active::before{
  content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--lg-accent);box-shadow:0 0 0 2px var(--lg-accent-soft);
}

/* ---------- Panel hak akses + sandi ---------- */
.lg-panel{
  background:var(--lg-hover);border:1px solid var(--lg-border);border-radius:14px;
  padding:13px 14px 14px;margin-bottom:16px;
}
.lg-panel-title{display:block;font-size:.75rem;font-weight:800;color:var(--lg-ink-2);margin-bottom:8px}
.lg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lg-list li{
  position:relative;padding-left:14px;font-size:.72rem;font-weight:500;
  color:var(--lg-muted-2);line-height:1.5;
}
.lg-list li::before{
  content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--lg-dot);
}
.lg-pass{margin-top:13px;padding-top:13px;border-top:1px dashed var(--lg-border)}
.lg-pass label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--lg-muted);margin-bottom:6px;
}
.lg-pass input{
  width:100%;padding:11px 42px 11px 13px;border:1.5px solid var(--lg-border);border-radius:12px;
  font-size:.85rem;font-weight:600;color:var(--lg-ink-2);background:var(--lg-card);
}
.lg-pass input:focus{outline:none;border-color:var(--lg-accent);box-shadow:0 0 0 3px rgba(var(--lg-shadow-rgb),.13)}
.lg-pass .pass-toggle{color:var(--lg-muted-3)}
.lg-pass .pass-toggle:hover{color:var(--lg-accent)}

/* ---------- Tombol masuk ---------- */
.lg-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:14px 18px;border-radius:999px;border:none;cursor:pointer;
  background:var(--lg-accent);color:var(--lg-on-accent);font-size:.9rem;font-weight:800;letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(var(--lg-shadow-rgb),.26);transition:.18s;
}
.lg-btn svg{width:17px;height:17px;transition:transform .18s}
.lg-btn:hover{background:var(--lg-accent-hover)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn:hover svg{transform:translateX(3px)}

.lg-card .login-error{margin:11px 0 0;text-align:center}
.lg-foot{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.68rem;font-weight:700;color:var(--lg-muted-2);
}
.lg-foot b{font-variant-numeric:tabular-nums;color:var(--lg-accent);font-size:.76rem}
.lg-foot .lg-foot-sep{color:var(--lg-muted);font-weight:800;letter-spacing:.5px}
.lg-foot i{font-style:normal;color:var(--lg-muted-3);font-weight:600}

/* Animasi masuk (fill-mode backwards agar hover tetap hidup) */
.lg-hero,.lg-card,.lg-foot{animation:riseIn .5s cubic-bezier(.16,.84,.44,1) backwards}
.lg-card{animation-delay:.06s}
.lg-foot{animation-delay:.14s}

@media (max-width:520px){
  /* PENTING: .lg-shell punya max-width:430px. Di layar <430px kartu ini
     melebar melebihi layar sehingga sisi kanan terpotong. Batasi agar selalu
     muat: 100% lebar induk (sudah dikurangi padding .login-gate). */
  .login-gate{padding:22px 14px}
  .login-gate .lg-shell{max-width:100%}
  .lg-card{padding:20px 16px 18px;border-radius:18px}
  .lg-tile{width:58px;height:58px;border-radius:17px}
  .lg-brand{font-size:.98rem}
  .lg-tag{font-size:.6rem;letter-spacing:1.2px}
  .lg-roles{grid-template-columns:1fr;gap:7px}
  .lg-role{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
  .lg-role em{display:none}
  .lg-btn{padding:13px 16px;font-size:.85rem}
  /* Cegah teks panjang (mis. judul strip) menembus kartu */
  .lg-head h2,.lg-head p,.lg-strip,.lg-nopass,.lg-foot{overflow-wrap:anywhere;word-break:break-word}
  .lg-strip span{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .lg-hero,.lg-card,.lg-foot{animation:none}
}

/* Keterangan mode tanpa kata sandi (Mode Tamu) */
.lg-nopass{
  display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;
  background:var(--lg-accent-soft);border:1px solid var(--lg-accent-border);border-radius:12px;padding:10px 12px;
  font-size:.72rem;font-weight:600;color:var(--lg-muted);line-height:1.5;
}
.lg-nopass svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--lg-accent)}
.lg-nopass b{font-weight:800;color:var(--lg-accent-ink)}
.lg-nopass[hidden]{display:none!important}
.lg-pass[hidden]{display:none!important}

/* Ikon kartu peran: ditengahkan & diperbesar mengikuti kotak */
.lg-role{align-items:center;text-align:center;gap:7px}
.lg-ico{
  width:100%;height:50px;border-radius:13px;
  display:grid;place-items:center;
}
.lg-ico svg{width:30px;height:30px}
.lg-role b{width:100%}
.lg-role em{width:100%}

/* Baris kredit di bawah footer login */
.lg-credit{
  margin:2px 0 0;text-align:center;
  font-size:.68rem;font-weight:600;letter-spacing:.3px;color:var(--lg-muted);
}
.lg-credit i{font-style:italic;font-weight:800;letter-spacing:.6px;color:var(--lg-accent-ink)}

@media (max-width:520px){
  .lg-role{flex-direction:column;align-items:center;gap:6px;padding:10px 8px 11px}
  .lg-ico{height:44px}
  .lg-ico svg{width:26px;height:26px}
  .lg-role em{display:none}
}

/* Override: .role-opt span (gaya lama) sempat menimpa kotak ikon */
.lg-role .lg-ico{
  width:100%;height:52px;border-radius:13px;
  display:grid!important;place-items:center;font-size:0;line-height:0;
}
.lg-role .lg-ico svg{width:32px;height:32px;display:block}
@media (max-width:520px){
  .lg-role .lg-ico{height:46px}
  .lg-role .lg-ico svg{width:28px;height:28px}
}

/* ===========================================================
   KUNCI LEBAR MOBILE — mencegah halaman melebar ke samping
   Akar masalah: table.tbl punya min-width:640px. Tanpa pengunci
   overflow pada rantai wadah, tabel melebarkan SELURUH halaman
   (topbar, tombol, chip ikut terpotong), bukan hanya ter-scroll.
   =========================================================== */
@media (max-width:1180px){
  html,body{overflow-x:hidden;max-width:100%}
  .app,.main,.content,.view{min-width:0;max-width:100%}
  .app{overflow-x:hidden}

  /* Topbar: judul boleh menyusut, tombol-tombol tetap di dalam layar */
  .topbar{min-width:0;gap:10px;padding:0 14px}
  .topbar-title{flex:1 1 auto;min-width:0;overflow:hidden}
  .topbar-title b{
    font-size:1.05rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .topbar-title span{max-width:100%}
  .topbar-right{margin-left:auto;flex:none;gap:8px}

  /* Baris aksi & chip boleh turun ke baris berikutnya */
  .page-head{flex-wrap:wrap}
  .page-head .ph-txt{flex:1 1 100%;min-width:0}
  .page-actions{flex-wrap:wrap;width:100%}
  .card-head{flex-wrap:wrap}
  .card-head .right{flex-wrap:wrap;gap:8px;min-width:0}

  /* Tabel: scroll di dalam wadahnya sendiri, tidak menularkan lebar */
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* -----------------------------------------------------------
   MODE HP: tabel TIDAK boleh punya lebar minimum.
   min-width:640px memaksa tabel lebih lebar dari layar HP,
   sehingga kolom paling kanan (Status) terpotong dan harus
   digeser. Di HP tabel dibuat "auto layout" penuh agar semua
   kolom masuk tanpa geser mendatar.
   ----------------------------------------------------------- */
@media (max-width:640px){
  table.tbl{min-width:0!important;width:100%;table-layout:auto}
  .table-wrap{overflow-x:visible!important}
  /* Tabel 5 kolom (rincian PO) HARUS muat: rapatkan padding & pecah kata.
     Tanpa ini, padding 10/12px per sel menghabiskan ~120px lebar layar. */
  .po-table{min-width:0!important;width:100%}
  .po-table th,.po-table td{padding:3px 3px!important;word-break:break-word;overflow-wrap:anywhere}
}

/* -----------------------------------------------------------
   TABEL LEBAR DI HP → JADI KARTU BERTUMPUK (STACKED CARD)
   Tabel dengan banyak kolom (7-10 kolom: Pembelian, Pengiriman,
   Daftar Pre-Order) TIDAK mungkin muat di layar HP selebar
   360-430px tanpa terpotong. Solusinya: di HP setiap baris <tr>
   ditampilkan sebagai KARTU, dan setiap sel <td> menampilkan
   labelnya sendiri (dari atribut data-label) di sisi kiri.
   Di desktop pola ini TIDAK aktif (tabel tetap normal).
   ----------------------------------------------------------- */
@media (max-width:640px){
  table.tbl.tbl-kartu{display:block;width:100%;border:0;background:transparent}
  table.tbl.tbl-kartu thead{display:none!important}
  table.tbl.tbl-kartu tbody{display:block;width:100%}
  table.tbl.tbl-kartu tr{
    display:block;position:relative;
    border:1px solid var(--border);border-radius:11px;
    background:var(--surface);
    padding:7px 9px;margin-bottom:7px;
    box-shadow:0 1px 2px rgba(var(--shadow-rgb),.05);
  }
  table.tbl.tbl-kartu td{
    display:flex;align-items:baseline;gap:8px;
    width:auto!important;max-width:100%;
    padding:2.5px 0!important;
    border:0!important;text-align:left!important;white-space:normal!important;
    overflow-wrap:anywhere;word-break:break-word;
    font-size:.66rem;line-height:1.35;
  }
  /* Label kolom di kiri setiap sel */
  table.tbl.tbl-kartu td::before{
    content:attr(data-label);
    flex:0 0 84px;max-width:84px;
    font-size:.56rem;font-weight:800;letter-spacing:.02em;
    text-transform:uppercase;color:var(--faint);
    line-height:1.5;
  }
  /* Sel tanpa label (mis. kolom aksi, atau header internal) */
  table.tbl.tbl-kartu td[data-label=""]::before,
  table.tbl.tbl-kartu td.no-label::before{display:none}
  /* Baris dengan pesan "kosong" tetap full-width */
  table.tbl.tbl-kartu tr:has(td[colspan])::before{display:none}
  /* Kolom aksi jadi baris tombol rata kanan */
  table.tbl.tbl-kartu td.act{
    justify-content:flex-end;flex-wrap:wrap;gap:5px;
    margin-top:4px;padding-top:6px!important;
    border-top:1px dashed var(--border)!important;
  }
  table.tbl.tbl-kartu td.act::before{display:none}
  /* Sub-teks di dalam sel (mis. nomor WA, "2 hari lagi") */
  table.tbl.tbl-kartu td .cell-sub{display:block;margin-top:1px}
  /* Baris "Lihat semua" di dalam tbody */
  table.tbl.tbl-kartu tr.hp-more-row{display:block;border:0;box-shadow:none;padding:0;margin:0;
    background:transparent}
  table.tbl.tbl-kartu tr.hp-more-row>td{display:block;padding:4px 0!important}
  table.tbl.tbl-kartu tr.hp-more-row>td::before{display:none}
  /* Baris kosong (emptyBox) */
  table.tbl.tbl-kartu td[colspan]{display:block;padding:4px 0!important}

  /* Katalog produk (4 kolom) tetap berupa tabel, tetapi dirapatkan agar
     kolom "Status" tidak terpotong di HP sempit. */
  #view-stok table.tbl:not(.tbl-kartu) th,
  #view-stok table.tbl:not(.tbl-kartu) td{padding:4px 4px!important;font-size:.6rem}
  #view-stok table.tbl:not(.tbl-kartu) .chip{font-size:.55rem!important;padding:2px 6px!important}
  #view-stok table.tbl:not(.tbl-kartu) .mono{font-size:.55rem}
}

@media (max-width:640px){
  html,body{overflow-x:hidden}
  .topbar{padding:0 12px;gap:8px}
  .topbar-title b{font-size:1rem}
  .topbar-title span{font-size:.7rem}

  /* Tombol jangan memaksa satu baris panjang */
  .page-actions{gap:7px}
  .page-actions .btn{white-space:nowrap}

  /* Chip status (ringkasan operasional) boleh membungkus */
  .chip-row,.stat-line{flex-wrap:wrap}
}

/* ===========================================================
   "LIHAT SEMUA" — hanya berlaku di HP
   Di desktop, semua baris & kartu tetap tampil (hidden di-reset).
   =========================================================== */
.hp-more-wrap{display:none}
/* Baris tombol "Lihat semua" di dalam <tbody> tabel kalkulator */
.hp-more-row{display:none}
@media (max-width:640px){
  .hp-more-wrap{display:block;padding:5px 0 1px;text-align:center}
  .hp-more-row{display:table-row}
  .hp-more-row>td{padding:2px 4px 4px;text-align:center}
  .hp-more{
    width:100%;padding:5px 10px;font-size:.58rem;border-radius:8px;
    background:var(--brand-soft);color:var(--brand-700);
  }
}
@media (min-width:641px){
  /* Desktop: pastikan apa pun yang "hidden" karena batas HP tetap terlihat */
  tr.baris-ekstra[hidden],.po-ekstra[hidden]{display:table-row!important}
  .po-ekstra[hidden]{display:block!important}
  .hp-more-wrap,.hp-more,.hp-more-row{display:none!important}
}

/* ===========================================================
   MODE HP — "SATU LAYAR" (semua muat tanpa geser)
   Semua konten tetap tampil, hanya dipadatkan. Ditambah
   penyesuaian UKURAN yang mengikuti tinggi layar nyata
   (dvh), karena tinggi viewport HP sangat bervariasi.
   =========================================================== */
@media (max-width:640px){
  :root{
    --topbar-h:46px;
    --bottomnav-h:44px;
    --r:12px;
    --r-lg:14px;
    --r-xl:16px;
    --r-sm:7px;
    /* Skala global: menyusut bila layar pendek, normal bila tinggi.
       100dvh = tinggi viewport dinamis (sudah memperhitungkan
       address bar browser HP yang bisa muncul/hilang).
       Basis 620px = tinggi total konten HP dalam keadaan normal,
       150px = tinggi bar atas+bawah yang tidak diskalakan. */
    --hp-scale:clamp(.52, calc((100dvh - 110px) / 600px), 1);
  }
  /* Seluruh isi halaman diskalakan agar pasti muat 1 layar */
  .content{zoom:var(--hp-scale)}

  /* --- Bar atas & bawah --- */
  .topbar{padding:0 10px;gap:6px}
  .topbar-title{flex:1 1 auto;min-width:0}
  .topbar-title b{font-size:.9rem;line-height:1.15}
  .topbar-title span{font-size:.6rem;line-height:1.15}

  .bottomnav a{padding:5px 2px 4px;gap:1px;font-size:.58rem}
  .bottomnav a svg{width:18px;height:18px}
  .bottomnav .nav-logo{width:20px;height:20px!important;max-width:20px!important}

  /* --- Wadah konten --- */
  .content{padding:5px 8px calc(var(--bottomnav-h) + 4px)}
  .view{animation:none}

  /* --- Judul halaman & kepala kartu --- */
  .page-head{margin-bottom:6px;gap:5px}
  .page-head h2{font-size:.98rem}
  .page-head p{font-size:.64rem;line-height:1.35;margin-top:1px;max-width:none}
  .page-actions{gap:5px;width:100%}
  .page-actions .btn{padding:5px 9px;font-size:.63rem;border-radius:8px;gap:4px}
  .page-actions .btn svg{width:12px;height:12px}

  .card{margin-bottom:3px!important}
  .card-head{padding:4px 8px;gap:3px;flex-wrap:wrap}
  .card-body{padding:4px 8px}
  .card-head h3{font-size:.78rem;line-height:1.15}
  .card-head .sub{font-size:.56rem;line-height:1.25;margin-top:0}
  .card-head .right{gap:5px;flex-wrap:wrap}

  /* --- Chip & lencana (WAJIB kecil: chip tema dasar = font .9rem) --- */
  .chip{font-size:.55rem!important;padding:2px 7px!important;gap:3px;line-height:1.35}
  .chip .dot,.chip i{width:5px;height:5px}
  .badge{font-size:.55rem;min-width:15px;height:15px;padding:0 4px}

  /* Baris chip ringkasan: rapat, tidak boros baris */
  .row{gap:4px!important;flex-wrap:wrap}
  .card-body>.row{margin-bottom:0}

  /* Alert "perlu restock" dipadatkan */
  .alert{padding:5px 7px;gap:5px;font-size:.58rem;line-height:1.3;border-radius:8px;margin-top:7px!important}
  .alert .ico{width:15px;height:15px;flex:none}
  .alert .ico svg{width:13px;height:13px}
  .alert b{font-size:.6rem}
  .alert p{font-size:.55rem;line-height:1.3;margin-top:1px}

  /* --- Tabel: font semua baris dikecilkan --- */
  table.tbl{font-size:.6rem;min-width:0}
  table.tbl th{padding:4px 5px;font-size:.53rem;letter-spacing:.02em;white-space:normal}
  table.tbl td{padding:4px 5px;line-height:1.2}
  .table-wrap{overflow-x:hidden;border-radius:0 0 var(--r-lg) var(--r-lg)}
  .cell-sub{font-size:.54rem}

  /* --- Ringkasan operasional (chip status berbaris) --- */
  .chip-row{gap:4px}
  .stat-line{flex-wrap:wrap;gap:5px;font-size:.62rem}

  /* --- Antrean Pre Order --- */
  .antrian-card .antrian-head{padding:6px 8px;gap:4px;flex-wrap:wrap}
  .antrian-title{gap:5px}
  .antrian-title h3{font-size:.76rem}
  .antrian-controls{gap:3px}
  .antrian-controls .btn{padding:3px 7px;font-size:.55rem}
  .antrian-tabs{gap:3px;padding:4px 6px}
  .antrian-tab{padding:2px 6px;font-size:.54rem}
  .antrian-body{padding:4px 6px}

  .po-card{margin-bottom:4px}
  .po-head{padding:5px 6px;gap:3px;flex-wrap:wrap}
  .po-no{width:17px;height:17px;font-size:.55rem}
  .po-title,.po-head b{font-size:.62rem}
  .po-meta{font-size:.53rem;gap:4px;flex-wrap:wrap}
  .po-meta svg{width:9px;height:9px}
  .po-actions{gap:3px;width:100%;justify-content:flex-start}
  .po-actions .btn{padding:3px 6px;font-size:.53rem}
  .po-body{border-radius:0 0 9px 9px}
  .po-body-head{padding:4px 6px}
  .po-table th,.po-table td{padding:3px 4px;font-size:.53rem;white-space:normal!important}
  .po-total{font-size:.55rem}
  .po-foot{padding:4px 6px;font-size:.53rem;gap:3px;flex-wrap:wrap}
  .po-foot .btn{padding:3px 6px;font-size:.53rem}
  .po-foot-meta{font-size:.52rem}

  /* --- Kalkulator stok --- */
  .kalkulator-card .kalkulator-head{padding:6px 8px;gap:4px;flex-wrap:wrap}
  .kalkulator-title{gap:5px}
  .kalkulator-title h3{font-size:.76rem}
  .kalkulator-controls{gap:3px;width:100%;justify-content:flex-start}
  .kalkulator-controls .btn{padding:3px 7px;font-size:.55rem}
  .k-total{font-size:.57rem}
  .kalkulator-tbl th{font-size:.49rem;padding:3px 4px;white-space:normal;letter-spacing:.01em}
  .kalkulator-tbl td{font-size:.54rem;padding:2.5px 4px;white-space:normal!important;line-height:1.2}
  .dot-ikan,.stok-dot{width:5px;height:5px}

  /* --- Filter, tombol umum, KPI --- */
  .filters{padding:6px 8px;gap:5px}
  .filters input,.filters select{padding:5px 8px;font-size:.62rem;min-width:0;flex:1}
  .btn{padding:5px 9px;font-size:.63rem;border-radius:8px}
  .btn svg{width:12px;height:12px}
  .btn-sm{padding:4px 7px;font-size:.58rem}
  .kpi{padding:8px 9px}
  .kpi .k-val{font-size:.9rem;margin-top:3px}
  .kpi .k-label{font-size:.55rem}
  .kpi .k-foot{font-size:.55rem;margin-top:2px}
  .kpi .k-ico{width:26px;height:26px;border-radius:8px}
  .kpi .k-ico svg{width:14px;height:14px}

  /* --- Bar & baris lain --- */
  .bar{height:5px}
  .empty{padding:12px 10px}
  .empty b{font-size:.72rem}
  .empty span{font-size:.6rem}

  /* Animasi masuk dimatikan di HP agar tidak ada elemen "melompat" */
  .view>.card,.view>.grid>*,.view>.page-head,
  .antrian-card,.kalkulator-card,.po-card{animation:none!important}
}

@media (max-width:380px){
  .topbar-title b{font-size:.84rem}
  .page-head h2{font-size:.9rem}
  table.tbl{font-size:.58rem}
  table.tbl th{font-size:.52rem}
  .kalkulator-tbl td{font-size:.56rem}
  .po-table td{font-size:.52rem}
  .content{padding:6px 7px calc(var(--bottomnav-h) + 6px)}
  /* Login di HP sangat kecil: rapatkan kartu & kecilkan brand */
  .login-gate{padding:16px 10px}
  .lg-card{padding:16px 12px 15px;border-radius:16px}
  .lg-tile{width:50px;height:50px}
  .lg-brand{font-size:.88rem}
  .lg-tag{font-size:.54rem;letter-spacing:.8px}
  .lg-head h2{font-size:.95rem}
  .lg-strip{font-size:.66rem;padding:9px 10px}
  .lg-role{padding:9px 10px}
  .lg-btn{font-size:.8rem;padding:12px 14px}
}

/* ===========================================================
   TEMA
   -----------------------------------------------------------
   Cara kerja: seluruh warna tampilan sudah memakai variabel
   (lihat blok :root). Tiap tema cukup MENIMPA variabel itu,
   jadi tidak ada satu pun aturan layout yang perlu ditulis ulang.

   Tema dipilih lewat atribut pada <html>, mis.
   <html data-tema="gelap">. Bila atribut tidak ada (atau bernilai
   "hijau"), berlaku nilai bawaan di :root = tema Hijau Hutan.

   Selector html[data-tema="..."] berbobot (0,1,1) — lebih tinggi
   daripada :root (0,1,0) — sehingga selalu menang tanpa perlu
   urutan tertentu. Tema baru cukup ditambahkan di bagian ini.
   =========================================================== */

/* ---------- TERANG · Laut (biru) ---------- */
html[data-tema="laut"]{
  --brand:#10456b;--brand-600:#0c3654;--brand-700:#082a42;
  --brand-soft:#e2edf4;--brand-softer:#f0f6fa;--brand-border:#bed6e6;
  --mint:#9cd3f4;--mint-600:#7cc0ea;--mint-dark:#3e6e8f;
  --mint-soft:#e8f2f9;--lime:#dceffb;--lime-soft:#f2f9fe;
  --coral:#c2573c;--coral-soft:#fae7e1;--coral-hover:#9e3726;
  --bg:#e9f1f6;--surface-2:#fafcfd;--border:#dfe8ef;--border-2:#cedbe6;
  --surface-hover:#ffffff;
  --soft-hover:#cfe3f1;--scroll-thumb:#c2d2df;
  --shadow-rgb:16,69,107;--focus-ring:rgba(16,69,107,.10);
  --sh-1:0 1px 2px rgba(16,69,107,.05),0 2px 6px rgba(16,69,107,.05);
  --sh-2:0 2px 6px rgba(16,69,107,.06),0 10px 26px rgba(16,69,107,.08);
  --sh-3:0 14px 40px rgba(16,69,107,.14);
  --info:#2a5c8a;--info-soft:#e4eef7;--info-border:#c9ddf0;--info-ink:#1b4a78;--info-tint:#eaf3fb;
  --lg-bg-1:#e8f4fa;--lg-bg-2:#e3f0f8;--lg-bg-3:#eef7fc;--lg-bg-4:#e0eff8;
  --lg-blob-1:rgba(156,211,244,.85);--lg-blob-2:rgba(220,239,251,.90);--lg-blob-3:rgba(16,69,107,.12);
  --lg-ink:#0f2a3a;--lg-ink-2:#143546;
  --lg-muted:#4e728a;--lg-muted-2:#5c7a90;--lg-muted-3:#8aa3b4;
  --lg-accent:#1a6e9e;--lg-accent-hover:#155a80;--lg-accent-ink:#12608b;
  --lg-accent-soft:#edf7fc;--lg-accent-soft-2:#eaf4fa;
  --lg-accent-border:#cfe4f2;--lg-accent-border-2:#bcd7e8;
  --lg-card:#ffffff;--lg-hover:#fcfdfe;--lg-border:#e6eef3;--lg-dot:#9cc2d8;
}

/* ---------- TERANG · Senja (jingga hangat) ---------- */
html[data-tema="senja"]{
  /* --brand digelapkan dari #a64b2a: dengan --mint #ffc59b, teks nav
     aktif hanya mencapai kontras 3.75 (gagal AA). #8a3c20 -> 4.99. */
  --brand:#8a3c20;--brand-600:#74311a;--brand-700:#5e2712;
  --brand-soft:#f7e6de;--brand-softer:#fcf3ef;--brand-border:#ebd3c4;
  --mint:#ffc59b;--mint-600:#f7a972;--mint-dark:#8c5530;
  --mint-soft:#fbede3;--lime:#fdefd8;--lime-soft:#fef8ee;
  --coral:#b04a2e;--coral-soft:#fae7e1;--coral-hover:#8f3a22;
  --bg:#f7eee8;--surface-2:#fdfaf8;--border:#efe2da;--border-2:#e2d2c7;
  --surface-hover:#ffffff;
  --soft-hover:#f6dccb;--scroll-thumb:#dcc7bb;
  --shadow-rgb:166,75,42;--focus-ring:rgba(166,75,42,.10);
  --sh-1:0 1px 2px rgba(166,75,42,.05),0 2px 6px rgba(166,75,42,.05);
  --sh-2:0 2px 6px rgba(166,75,42,.06),0 10px 26px rgba(166,75,42,.08);
  --sh-3:0 14px 40px rgba(166,75,42,.14);
  --warn:#8a5a12;--warn-soft:#fbf0dd;--warn-border:#f0dcb4;--warn-tint:#fdf3e2;
  --lg-bg-1:#fdf1e9;--lg-bg-2:#fbeade;--lg-bg-3:#fdf5ef;--lg-bg-4:#fae7db;
  --lg-blob-1:rgba(255,197,155,.85);--lg-blob-2:rgba(253,239,216,.90);--lg-blob-3:rgba(166,75,42,.12);
  --lg-ink:#3a1e12;--lg-ink-2:#46251a;
  --lg-muted:#8a5c46;--lg-muted-2:#96705c;--lg-muted-3:#b3948a;
  --lg-accent:#c25f34;--lg-accent-hover:#a84e28;--lg-accent-ink:#a8502a;
  --lg-accent-soft:#fdf0e8;--lg-accent-soft-2:#fbedE4;
  --lg-accent-border:#f2d6c4;--lg-accent-border-2:#e8c3ab;
  --lg-card:#ffffff;--lg-hover:#fffdfc;--lg-border:#f2e3da;--lg-dot:#e0b9a2;
}

/* ---------- TERANG · Ungu (violet) ---------- */
html[data-tema="ungu"]{
  --brand:#4c3a78;--brand-600:#3e2f63;--brand-700:#31254e;
  --brand-soft:#eae4f5;--brand-softer:#f4f1fa;--brand-border:#d5c9ec;
  --mint:#c9b8f0;--mint-600:#b39de8;--mint-dark:#5f4c93;
  --mint-soft:#efeaf8;--lime:#ede6fb;--lime-soft:#f7f3fd;
  --coral:#b04a6e;--coral-soft:#fae7ee;--coral-hover:#8f3a58;
  --bg:#efeaf7;--surface-2:#fbf9fd;--border:#e5dfF0;--border-2:#d6cde8;
  --surface-hover:#ffffff;
  --soft-hover:#e0d5f3;--scroll-thumb:#cfc4de;
  --shadow-rgb:76,58,120;--focus-ring:rgba(76,58,120,.10);
  --sh-1:0 1px 2px rgba(76,58,120,.05),0 2px 6px rgba(76,58,120,.05);
  --sh-2:0 2px 6px rgba(76,58,120,.06),0 10px 26px rgba(76,58,120,.08);
  --sh-3:0 14px 40px rgba(76,58,120,.14);
  --info:#4a3f8a;--info-soft:#e9e6f7;--info-border:#d2cdf0;--info-ink:#3f3480;--info-tint:#efedfa;
  --lg-bg-1:#f2ecfb;--lg-bg-2:#efe7fa;--lg-bg-3:#f7f2fd;--lg-bg-4:#ece3f9;
  --lg-blob-1:rgba(201,184,240,.85);--lg-blob-2:rgba(237,230,251,.90);--lg-blob-3:rgba(76,58,120,.12);
  --lg-ink:#1e1738;--lg-ink-2:#2a2148;
  --lg-muted:#5f5480;--lg-muted-2:#6f6490;--lg-muted-3:#9a90b4;
  --lg-accent:#6b4fb0;--lg-accent-hover:#5a4196;--lg-accent-ink:#5b3fa4;
  --lg-accent-soft:#f3eefc;--lg-accent-soft-2:#efe8fa;
  --lg-accent-border:#ddd2f2;--lg-accent-border-2:#cbbce8;
  --lg-card:#ffffff;--lg-hover:#fdfcfe;--lg-border:#eae3f5;--lg-dot:#c2b0dd;
}

/* ---------- GELAP · dasar bersama (netral + warna status) ---------- */
html[data-tema="gelap"],html[data-tema="malam"]{
  --ink:#eef5f2;--text:#d7e2de;--muted:#9aa8a4;--faint:#828d88;
  --bg:#0e1513;--surface:#151e1b;--surface-2:#1b2522;
  --border:#26312d;--border-2:#33413c;
  --surface-hover:#202b27;
  /* --brand pada tema gelap adalah warna mid-tone untuk LATAR (tombol),
     bukan untuk teks. Teks bermerek memakai --brand-ink = --brand-700
     (versi terang) supaya tetap terbaca di atas --mint/--lime/--surface. */
  --brand-ink:var(--brand-700);
  /* Bilah sticky: tanpa ini topbar/bottomnav tetap putih dan judulnya
     (--ink yang terang) menjadi tak terbaca. */
  --bar:rgba(21,30,27,.9);--bar-solid:rgba(21,30,27,.97);
  --scroll-thumb:#3a4742;--scrim:rgba(0,0,0,.74);--scrim-soft:rgba(0,0,0,.52);
  --knob:#e9f1ee;--lg-ring:rgba(95,211,154,.22);--lg-shadow-rgb:95,211,154;
  --lg-on-accent:#0a1a15;
  --lg-scrim:rgba(0,0,0,.62);
  --shadow-rgb:0,0,0;--focus-ring:rgba(127,224,189,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.28);
  --sh-2:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.4);
  --sh-3:0 14px 40px rgba(0,0,0,.55);
  --ok:#5fd39a;--ok-soft:#14301f;--ok-border:#265040;--ok-ink:#8ce0bb;--ok-tint:#12291c;
  --warn:#e0b464;--warn-soft:#33280f;--warn-border:#5c4a22;--warn-tint:#2b2211;
  --danger:#e88a7a;--danger-soft:#361d19;--danger-border:#5c3129;--danger-ink:#f0a294;
  --info:#7fb0e0;--info-soft:#152535;--info-border:#2c4863;--info-ink:#a3c9ee;--info-tint:#132131;
  --purple:#b9a3ee;--purple-soft:#231c38;--purple-border:#41375f;--purple-ink:#cdbcf7;--purple-tint:#1e1830;
  --warn-bar:#e8a33d;
  --coral:#d0705c;--coral-soft:#3a1d17;--coral-hover:#e08972;
  --lg-bg-1:#101a18;--lg-bg-2:#0d1715;--lg-bg-3:#121d1a;--lg-bg-4:#0c1513;
  --lg-blob-1:rgba(95,211,154,.13);--lg-blob-2:rgba(95,211,154,.07);--lg-blob-3:rgba(0,0,0,.25);
  --lg-card:#151e1b;--lg-hover:#1b2623;--lg-border:#26312d;
  --lg-ink:#eef5f2;--lg-ink-2:#e4ede9;
  --lg-muted:#9fc0b6;--lg-muted-2:#8fa8a1;--lg-muted-3:#7c918c;
  --lg-dot:#3f7a68;
}

/* ---------- GELAP · Hijau Hutan ---------- */
html[data-tema="gelap"]{
  --brand:#1f7a60;--brand-600:#2d9c7c;--brand-700:#7fe0bd;
  --brand-soft:#17332b;--brand-softer:#14231e;--brand-border:#27503f;
  --mint:#2b5c4b;--mint-600:#3d7d66;--mint-dark:#8fd8bd;
  --mint-soft:#182b25;--lime:#1b2f28;--lime-soft:#16241f;
  --soft-hover:#1f3a31;
  --lg-accent:#3fbf95;--lg-accent-hover:#34a880;--lg-accent-ink:#5fd3ac;
  --lg-accent-soft:#16302a;--lg-accent-soft-2:#142b25;
  --lg-accent-border:#245043;--lg-accent-border-2:#2d6152;
}

/* ---------- GELAP · Malam Biru ---------- */
html[data-tema="malam"]{
  --ink:#eaf2f8;--text:#d2dee8;--muted:#93a4b3;--faint:#7f8c99;
  --bg:#0c1319;--surface:#131d25;--surface-2:#19252f;
  --border:#23303c;--border-2:#2f4050;
  --surface-hover:#1e2b36;
  --bar:rgba(19,29,37,.9);--bar-solid:rgba(19,29,37,.97);
  --scroll-thumb:#37475a;--focus-ring:rgba(126,180,232,.14);
  --knob:#e6eef5;--lg-ring:rgba(126,180,232,.22);--lg-shadow-rgb:126,180,232;
  --lg-on-accent:#08141d;
  --brand:#1a5f8c;--brand-600:#287fb5;--brand-700:#8fc9ef;
  --brand-soft:#152a3a;--brand-softer:#121f2b;--brand-border:#24455f;
  --mint:#26485f;--mint-600:#376d8c;--mint-dark:#9ccbe8;
  --mint-soft:#152632;--lime:#172733;--lime-soft:#132029;
  --soft-hover:#1c3346;
  --coral:#d0705c;--coral-soft:#33201c;--coral-hover:#e08972;
  --lg-bg-1:#0d1620;--lg-bg-2:#0a121a;--lg-bg-3:#0f1a25;--lg-bg-4:#09111a;
  --lg-blob-1:rgba(126,180,232,.14);--lg-blob-2:rgba(126,180,232,.07);--lg-blob-3:rgba(0,0,0,.28);
  --lg-card:#131d25;--lg-hover:#19252f;--lg-border:#23303c;
  --lg-ink:#eaf2f8;--lg-ink-2:#dfe9f2;
  --lg-muted:#a3bdd1;--lg-muted-2:#8fa8bd;--lg-muted-3:#7c8fa1;
  --lg-accent:#3f9bd6;--lg-accent-hover:#3387bd;--lg-accent-ink:#6fb6e4;
  --lg-accent-soft:#15293a;--lg-accent-soft-2:#132432;
  --lg-accent-border:#25455c;--lg-accent-border-2:#2e5670;
  --lg-dot:#3f7a9c;
}

/* ===========================================================
   DOKUMEN CETAK — SELALU TERANG
   -----------------------------------------------------------
   .doc adalah berkas yang dicetak/di-PDF-kan, dan kertas selalu
   putih. Bila memakai variabel tema, dokumen akan ikut gelap saat
   tema gelap aktif. Karena itu warnanya dipatok (hardcoded) di
   sini, dengan bobot selector lebih tinggi (html[data-tema] .doc)
   agar menang atas aturan .doc yang memakai variabel.
   =========================================================== */
html[data-tema] .doc{color:#111}
html[data-tema] .doc .kop{border-bottom:3px double #1E4841}
html[data-tema] .doc .kop .nama{color:#1E4841}
html[data-tema] .doc .kop .tag{color:#4F7A45}
html[data-tema] .doc hr.garis{border-top:1px solid #1E4841}
html[data-tema] .doc h1{color:#111}
html[data-tema] .doc th{background:#E8F1EC;border:1px solid #C3E0C6;color:#4F7A45}
html[data-tema] .doc td{border:1px solid #DCE5DC}
html[data-tema] .doc .total-row td{background:#FAFAFA}
html[data-tema] .doc .foot-note{border-top:1px dashed #D2DAE3;color:#5f6a63}
html[data-tema] .doc .tbl-judul{color:#1E4841}
html[data-tema] .doc .lampiran-item{border-color:#C3E0C6;background:#fff}
html[data-tema] .doc .lampiran-item figcaption{border-top:1px solid #E0E8E0;background:#F4F9F5}
html[data-tema] .doc .lampiran-item img{background:#F5F5F5}
html[data-tema] .doc .nomor{color:#555}
html[data-tema] .doc .meta dt{color:#555}
html[data-tema] .doc .meta dd{color:#111}

/* ===========================================================
   PEMILIH TEMA (halaman Pengaturan)
   =========================================================== */
.tema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.tema-opt{
  display:flex;flex-direction:column;gap:9px;padding:11px;text-align:left;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);transition:.16s;position:relative;
}
.tema-opt:hover{border-color:var(--border-2);background:var(--surface-hover)}
.tema-opt.is-active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--focus-ring)}
.tema-opt .t-nm{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.2}
.tema-opt .t-mo{font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.tema-sw{display:flex;gap:5px}
.tema-sw i{width:24px;height:24px;border-radius:8px;display:block;border:1px solid var(--border-2)}
.tema-opt .t-tick{
  position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);display:none;place-items:center;
}
.tema-opt .t-tick svg{width:11px;height:11px}
.tema-opt.is-active .t-tick{display:grid}
.tema-opt.is-active .t-nm{color:var(--brand-700)}

/* ===========================================================
   KARTU ASET HALAMAN MASUK (Pengaturan)
   =========================================================== */
.aset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.aset-item{
  display:flex;gap:13px;padding:13px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface-2);
}
.aset-item.is-set{border-color:var(--brand-border);background:var(--brand-softer)}
.aset-prev{
  flex:none;width:78px;height:78px;border-radius:12px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;
}
.aset-prev img,.aset-prev video{width:100%;height:100%;object-fit:cover;display:block}
/* Kotak pratinjau video dibuat gelap: sebelum bingkai pertama termuat
   (atau bila tautannya belum benar) area ini kosong, dan di atas latar
   putih kotak kosong terlihat seperti kesalahan tata letak. */
.aset-prev.is-video{width:110px;background:#0e1513}
.aset-kosong{
  font-size:.6rem;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;text-align:center;padding:0 6px;line-height:1.3;
}
.aset-body{min-width:0;flex:1}
.aset-body > b{display:block;font-size:.86rem;font-weight:800;color:var(--text)}
.aset-body .hint{margin:2px 0 5px}
.aset-meta{display:block;font-size:.72rem;color:var(--muted);word-break:break-word}
.aset-item .btn-sm{padding:6px 11px;font-size:.76rem}
@media (max-width:560px){
  .aset-grid{grid-template-columns:1fr}
  .aset-item{flex-direction:column}
  .aset-prev,.aset-prev.is-video{width:100%;height:130px}
}