/* ---------- token: logam abu hangat + grafit + oranye sinyal. Skeuomorphic: tombol bertuas, saklar fisik, panel berprofil ---------- */
  :root {
    --blue:#A8C9C8; --navy:#16201F; --navy-2:#0F2270; --blue-1:#1A3BB0; --blue-2:#2E5DE6; --blue-3:#6E92F2; --blue-4:#AFC5F8; --blue-5:#E6EDFD; --info:#1A3BB0; --info-weak:rgba(46,93,230,.14); --white:#FFFFFF; --orange:#F4580B;
    --ground:#A8C9C8; --panel-t:#FFFFFF; --panel-b:#EDF3F3; --panel:#F6F9F9; --field:#FFFFFF;
    --ink:#16201F; --ink-2:#2F3D3C; --line:rgba(22,32,31,.14);
    --hi:rgba(255,255,255,1); --lo:rgba(22,32,31,.2);
    --brand:#F4580B; --brand-2:#B03A0A; --brand-text:#A23509; --brand-weak:rgba(244,88,11,.14);
    --ok:#166534; --ok-weak:rgba(22,101,52,.14); --warn:#92400E; --warn-weak:rgba(180,83,9,.16); --danger:#B91C1C; --danger-weak:rgba(185,28,28,.13);
    --off:#4F535B; --off-weak:rgba(22,32,31,.09); --ring:#16201F; --r:16px; --side-w:248px;
    --trough:linear-gradient(180deg,#B4D0CF,#CFE2E1);
    --plate:0 1px 0 var(--hi) inset, 0 2px 4px rgba(46,93,230,.28), 0 14px 28px -8px rgba(46,93,230,.5);
    --plate-sm:0 1px 0 var(--hi) inset, 0 2px 3px rgba(46,93,230,.28), 0 8px 16px -5px rgba(46,93,230,.42);
    --well:inset 0 2px 5px rgba(22,32,31,.28), inset 0 -1px 0 rgba(255,255,255,.7);
    --ease:cubic-bezier(.23,1,.32,1);
    color-scheme:light dark;
  }
  /* sidebar dan bilah atas (HP): panel grafit berserat logam */
  .side, .top {
    --ink:#F2F7F7; --ink-2:#B9D1D0; --line:rgba(255,255,255,.1); --ring:#FDBA74;
    --brand-text:#FDBA74;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ground:#0F1616; --panel-t:#263332; --panel-b:#1B2625; --panel:#202C2B; --field:#121A1A;
      --ink:#EEF3F3; --ink-2:#A9BDBC; --line:rgba(168,201,200,.16);
      --hi:rgba(255,255,255,.1); --lo:rgba(0,0,0,.5);
      --brand-text:#FDBA74; --brand-weak:rgba(251,146,60,.18);
      --ok:#4ADE80; --ok-weak:rgba(74,222,128,.14); --warn:#FBBF24; --warn-weak:rgba(251,191,36,.14); --danger:#FCA5A5; --danger-weak:rgba(248,113,113,.16);
      --off:#A6ABB4; --off-weak:rgba(255,255,255,.08); --ring:#FDBA74;
      --trough:linear-gradient(180deg,#0A0F0F,#142020);
      --plate:0 1px 0 var(--hi) inset, 0 2px 4px rgba(46,93,230,.35), 0 14px 30px -8px rgba(46,93,230,.6);
      --plate-sm:0 1px 0 var(--hi) inset, 0 2px 3px rgba(46,93,230,.35), 0 8px 16px -5px rgba(46,93,230,.5);
      --well:inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.07);
    }
    html .btn, html .chip { --k-top:#454952; --k-bot:#30333A; --k-edge:#0C0D0F; --k-hi:rgba(255,255,255,.18); --k-ink:#EEF3F3; --k-shadow:rgba(0,0,0,.6); }
    html .btn { text-shadow:0 -1px 0 rgba(0,0,0,.5); }
    html .btn.primary { --k-top:#F4580B; --k-bot:#C13D05; --k-edge:#7E2803; --k-ink:#fff; --k-shadow:rgba(0,0,0,.6); }
    html .btn.danger { --k-top:#E24A4A; --k-bot:#B01E1E; --k-edge:#7A1010; --k-ink:#fff; --k-shadow:rgba(0,0,0,.6); }
    html .chip .n { box-shadow:none; }
    html .card, html .dev { border-color:rgba(0,0,0,.5); }
    html .stat .bub { background:radial-gradient(circle at 35% 25%,var(--panel-t),var(--panel-b) 70%); border-color:rgba(0,0,0,.6); box-shadow:inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08); }
    html .field input, html .field select, html .field textarea { border-color:rgba(0,0,0,.6); }
    html .sw { border-color:rgba(0,0,0,.7); } html .sw .th { border-color:#5C5A55; }
    html dialog { border-color:rgba(0,0,0,.6); }
  }  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--ground); color:var(--ink); font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:16px; line-height:1.5; font-variant-numeric:tabular-nums; }
  h1, h2, h3 { line-height:1.2; margin:0; }
  a { color:var(--brand-text); }
  .ic { flex:none; vertical-align:-3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  :focus-visible { outline:3px solid var(--ring); outline-offset:3px; }
  .skip { position:absolute; left:-999px; top:0; background:var(--ink); color:var(--ground); padding:.6rem 1rem; z-index:100; border-radius:0 0 12px 0; }
  .skip:focus { left:0; }

  /* ---------- kerangka ---------- */
  .noise { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  .side { position:fixed; inset:0 auto 0 0; width:var(--side-w); background-color:#243130; background-image:linear-gradient(90deg,#2C3B3A,#1D2827); box-shadow:inset -1px 0 0 rgba(168,201,200,.18), 8px 0 22px rgba(22,32,31,.35); color:var(--ink); display:flex; flex-direction:column; z-index:40; transition:transform .25s var(--ease); }
  .side::before, .top::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:1; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  .brand { position:relative; display:flex; align-items:center; gap:.7rem; padding:1.3rem 1.2rem 1rem; font-weight:700; font-size:1.2rem; letter-spacing:-.01em; }
  .logo { width:40px; height:40px; border-radius:12px; background:linear-gradient(180deg,#F4580B,#C13D05); border:1px solid #7E2803; color:#fff; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #7E2803, 0 6px 10px rgba(0,0,0,.4); }
  .nav { position:relative; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.4rem; overflow-y:auto; flex:1; }
  .nav a { position:relative; display:flex; align-items:center; gap:.7rem; min-height:46px; padding:.5rem .9rem; border-radius:12px; color:var(--ink-2); text-decoration:none; font-weight:500; border:1px solid transparent; transition:background-color .15s, color .15s, box-shadow .15s, transform .12s var(--ease); }
  .nav a:active { transform:scale(.98); }
  /* teks menu: masuk bergantian dari kiri, bergeser saat disorot, kilau sekali saat menjadi aktif */
  .nav a { animation:navin .55s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms + 90ms); }
  body.open .nav a { animation-name:navin2; }
  .nav a span { display:inline-block; transition:transform .28s var(--ease), letter-spacing .28s var(--ease); }
  .nav a .ic { transition:transform .28s var(--ease); }
  .nav a[aria-current="page"] span { transform:translateX(3px); }
  @supports (background-clip:text) or (-webkit-background-clip:text) {
    .nav a[aria-current="page"] span { background:linear-gradient(100deg,#fff 0 40%,#FFC9A8 50%,#fff 60% 100%); background-size:250% 100%; background-position:0 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:sheen 1.1s var(--ease) .1s 1 both; }
  }
  @media (hover: hover) and (pointer: fine) {
    .nav a:not([aria-current]):hover span { transform:translateX(5px); }
    .nav a:not([aria-current]):hover .ic { transform:scale(1.12) rotate(-6deg); }
  }
  @keyframes navin { from { opacity:0; transform:translateX(-14px); } }
  @keyframes navin2 { from { opacity:0; transform:translateX(-14px); } }
  @keyframes sheen { from { background-position:100% 0; } to { background-position:0 0; } }
  .nav a[aria-current="page"] { color:#fff; font-weight:700; background:linear-gradient(180deg,#1C1E22,#25282D); border-color:rgba(0,0,0,.45); box-shadow:inset 0 3px 7px rgba(0,0,0,.65), inset 0 -1px 0 rgba(255,255,255,.08); }
  .nav a[aria-current="page"]::after { content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFC9A8,#F4580B 55%,#C13D05); box-shadow:0 0 9px 2px rgba(244,88,11,.75); }
  @media (hover: hover) and (pointer: fine) { .nav a:not([aria-current]):hover { color:#fff; background:linear-gradient(180deg,#3A3D44,#2F3238); border-color:rgba(0,0,0,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.45); } }
  .me { position:relative; padding:.9rem 1.1rem; display:flex; align-items:center; gap:.6rem; font-size:.9rem; border-top:1px solid rgba(255,255,255,.08); }
  .me b { display:block; overflow:hidden; text-overflow:ellipsis; max-width:120px; white-space:nowrap; }
  .me small { color:var(--ink-2); }
  .me a { margin-left:auto; display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:#ECEDEF; text-decoration:none; background:linear-gradient(180deg,#4A4E56,#33363C); border:1px solid #111214; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #111214, 0 5px 8px rgba(0,0,0,.4); transition:transform .1s var(--ease), box-shadow .1s var(--ease); }
  .me a:active { transform:translateY(3px); box-shadow:inset 0 2px 5px rgba(0,0,0,.5), 0 0 0 #111214; }
  .top { display:none; position:sticky; top:0; z-index:30; background-color:#243130; background-image:linear-gradient(180deg,#2C3B3A,#1D2827); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 6px 14px rgba(22,32,31,.35); color:#ECEDEF; align-items:center; gap:.6rem; padding:.45rem .7rem .6rem; }
  .top > * { position:relative; }
  .top .ttl { font-weight:700; }
  main { margin-left:var(--side-w); padding:1.7rem clamp(1rem, 3vw, 2.2rem) 3rem; max-width:calc(1240px + var(--side-w)); }
  main:focus, h1:focus { outline:none; }
  .page-h { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
  .page-h h1 { font-size:1.75rem; letter-spacing:-.02em; }
  .page-h p { margin:.2rem 0 0; color:var(--ink-2); font-size:.92rem; }
  .scrim { display:none; position:fixed; inset:0; background:rgba(22,32,31,.6); z-index:35; }
  @media (max-width: 900px) {
    .side { transform:translateX(-100%); box-shadow:none; }
    body.open .side { transform:none; box-shadow:10px 0 30px rgba(0,0,0,.5); } body.open .scrim { display:block; }
    .top { display:flex; } main { margin-left:0; padding-top:1.2rem; }
  }

  /* ---------- tombol: tuts fisik (skeuomorphic). Warna tuts lewat variabel --k-* ---------- */
  .btn, .iconbtn, .chip {
    --depth:4px; --k-top:#FFFFFF; --k-bot:#E4EEED; --k-edge:#8FB0AF; --k-hi:rgba(255,255,255,.95); --k-ink:#16201F; --k-shadow:rgba(22,32,31,.3);
    position:relative; border:1px solid var(--k-edge); color:var(--k-ink); cursor:pointer; font:inherit;
    background:linear-gradient(180deg,var(--k-top),var(--k-bot));
    box-shadow:inset 0 1px 0 var(--k-hi), inset 0 -2px 0 rgba(22,32,31,.06), 0 var(--depth) 0 var(--k-edge), 0 calc(var(--depth) + 3px) 9px var(--k-shadow);
    transition:transform .1s var(--ease), box-shadow .1s var(--ease), filter .15s;
  }
  .btn:active:not([disabled]), .iconbtn:active, .chip:active {
    transform:translateY(var(--depth));
    box-shadow:inset 0 2px 5px rgba(22,32,31,.35), inset 0 -1px 0 rgba(255,255,255,.2), 0 0 0 var(--k-edge), 0 1px 2px var(--k-shadow);
    filter:brightness(.97);
  }
  @media (hover: hover) and (pointer: fine) { .btn:hover:not([disabled]), .iconbtn:hover, .chip:hover { filter:brightness(1.04); } }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:46px; padding:.5rem 1.15rem; border-radius:12px; font-weight:700; font-size:.92rem; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,.55); margin-bottom:var(--depth); }
  .btn.primary { --k-top:#F4580B; --k-bot:#C13D05; --k-edge:#7E2803; --k-hi:rgba(255,255,255,.5); --k-ink:#fff; --k-shadow:rgba(126,40,3,.45); text-shadow:0 -1px 0 rgba(0,0,0,.35); }
  .btn.danger { --k-top:#E24A4A; --k-bot:#B01E1E; --k-edge:#7A1010; --k-hi:rgba(255,255,255,.45); --k-ink:#fff; --k-shadow:rgba(122,16,16,.45); text-shadow:0 -1px 0 rgba(0,0,0,.35); }
  .btn.sm { --depth:3px; min-height:38px; padding:.25rem .85rem; font-size:.85rem; border-radius:10px; }
  .btn[disabled] { opacity:.5; cursor:not-allowed; }
  .iconbtn { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; margin-bottom:var(--depth); --k-top:#4A4E56; --k-bot:#33363C; --k-edge:#111214; --k-hi:rgba(255,255,255,.22); --k-ink:#ECEDEF; --k-shadow:rgba(0,0,0,.5); }
  .chip { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.35rem 1rem; border-radius:99px; font-weight:500; --depth:3px; margin-bottom:var(--depth); }
  .chip .n { font-size:.76rem; padding:0 .45rem; border-radius:99px; background:var(--off-weak); color:var(--ink-2); box-shadow:inset 0 1px 2px rgba(22,32,31,.2); }
  .chip[aria-pressed="true"] { transform:translateY(var(--depth)); color:var(--brand-text); font-weight:700; background:var(--trough); border-color:transparent; box-shadow:var(--well); }
  .chip[aria-pressed="true"]::before { content:""; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFC9A8,#F4580B 55%,#C13D05); box-shadow:0 0 8px 2px rgba(244,88,11,.6); }

  /* ---------- komponen ---------- */
  .card { background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); border:1px solid rgba(22,32,31,.12); border-radius:var(--r); padding:1.15rem 1.25rem; box-shadow:var(--plate); }
  .card + .card { margin-top:1.1rem; }
  .card h2 { font-size:1rem; margin-bottom:.8rem; letter-spacing:-.005em; }
  /* judul kartu + tombol aksi di pojok kanan atas, supaya tidak memakan baris sendiri di bawah isi */
  .ch { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
  .ch h2 { margin:0; }
  .ch .btn { margin-bottom:0; flex:none; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:1.1rem; margin-bottom:1.1rem; }
  .grid > .card + .card { margin-top:0; }
  .stat { display:flex; gap:.9rem; align-items:center; }
  .stat .bub { width:50px; height:50px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#E3F0EF,var(--blue) 75%); border:1px solid rgba(22,32,31,.15); box-shadow:inset 0 2px 4px rgba(22,32,31,.18), inset 0 -2px 0 rgba(255,255,255,.7), 0 1px 0 rgba(255,255,255,.8); color:var(--brand-text); display:grid; place-items:center; flex:none; }
  .stat small { display:block; color:var(--ink-2); font-size:.82rem; }
  .stat strong { font-size:1.6rem; line-height:1.15; letter-spacing:-.02em; }
  .two { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.1rem; align-items:start; } .two > .card + .card { margin-top:0; }
  @media (max-width: 900px) { .two { grid-template-columns:1fr; } }
  .badge { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .6rem; border-radius:99px; font-size:.78rem; font-weight:700; white-space:nowrap; box-shadow:inset 0 1px 2px rgba(22,32,31,.15), 0 1px 0 var(--hi); }
  .b-ok { background:var(--ok-weak); color:var(--ok); } .b-off { background:var(--off-weak); color:var(--off); }
  .b-warn { background:var(--warn-weak); color:var(--warn); } .b-danger { background:var(--danger-weak); color:var(--danger); } .b-info { background:var(--brand-weak); color:var(--brand-text); }
  .empty { text-align:center; padding:2rem 1rem; color:var(--ink-2); }
  .empty h2 { color:var(--ink); margin-top:.3rem; }
  .empty p { margin:.3rem auto 0; max-width:46ch; }
  .tools { display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1.1rem; }
  .field { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
  .field label { font-size:.85rem; font-weight:500; }
  .field input, .field select, .field textarea { min-height:46px; padding:.5rem .85rem; border:1px solid rgba(22,32,31,.25); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; max-width:100%; box-shadow:inset 0 2px 4px rgba(22,32,31,.16), 0 1px 0 var(--hi); transition:border-color .15s, box-shadow .15s; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brand); box-shadow:inset 0 2px 4px rgba(22,32,31,.16), 0 0 0 3px var(--brand-weak); outline:none; }
  .field textarea { min-height:96px; resize:vertical; }
  .field .hint { font-size:.8rem; color:var(--ink-2); }
  .chk { display:flex; align-items:center; gap:.55rem; min-height:46px; font-size:.92rem; }
  .chk input { width:20px; height:20px; accent-color:var(--brand); flex:none; }
  .skel { height:54px; border-radius:12px; background:linear-gradient(90deg, var(--panel-b), var(--panel-t), var(--panel-b)); background-size:200% 100%; animation:sh 1.3s linear infinite; margin-top:.7rem; box-shadow:var(--well); }
  @keyframes sh { to { background-position:-200% 0; } }
  .chips { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem; }
  .dayh { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin:1.1rem 0 .2rem; } .dayh:first-child { margin-top:0; }
  .mu { color:var(--ink-2); }

  /* tabel -> kartu di layar kecil */
  .tbl { width:100%; border-collapse:collapse; }
  .tbl th { text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); padding:.5rem .6rem; border-bottom:1px solid var(--line); }
  .tbl td { padding:.75rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; font-size:.92rem; }
  .tbl tr:last-child td { border-bottom:0; }
  .tbl small { display:block; color:var(--ink-2); font-size:.8rem; font-weight:400; }
  @media (max-width: 720px) {
    .tbl thead { display:none; } .tbl, .tbl tbody, .tbl tr, .tbl td { display:block; width:100%; }
    .tbl tr { border-radius:14px; padding:.5rem .8rem; margin-bottom:.9rem; background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); box-shadow:var(--plate-sm); }
    .tbl td { border:0; padding:.3rem 0; display:flex; justify-content:space-between; gap:1rem; text-align:right; }
    .tbl td::before { content:attr(data-label); color:var(--ink-2); font-size:.8rem; text-align:left; flex:none; }
    .tbl td.first { display:block; text-align:left; font-weight:700; } .tbl td.first::before { display:none; }
  }

  /* grafik: palung cekung, batang oranye berkilap, semuanya tumbuh saat tampil */
  .bars { display:flex; align-items:flex-end; gap:.55rem; height:200px; padding:16px 14px 10px; border-radius:14px; background:var(--trough); box-shadow:var(--well); }
  .bar { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; font-size:.76rem; color:var(--ink-2); }
  .bar i { position:relative; display:block; width:100%; max-width:46px; background:linear-gradient(90deg,#F4580B 0,#FF8444 38%,#F4580B 62%,#C13D05 100%); border:1px solid #7E2803; border-bottom:0; border-radius:8px 8px 2px 2px; min-height:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(126,40,3,.35); transform-origin:bottom; animation:growY .9s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms + 120ms); transition:filter .15s; }
  .bar i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 45%); animation:gleam 1.4s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms + 500ms); }
  .bar b { color:var(--ink); font-weight:700; margin-bottom:4px; animation:pop .5s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms + 650ms); }
  .bar span { margin-top:6px; }
  @media (hover: hover) and (pointer: fine) { .bar:hover i { filter:brightness(1.1) saturate(1.1); } }
  .hbar { display:grid; grid-template-columns:minmax(80px,140px) 1fr auto; align-items:center; gap:.7rem; margin:.7rem 0; font-size:.9rem; }
  .hbar .tr { display:block; height:16px; border-radius:99px; padding:2px; background:var(--trough); box-shadow:var(--well); overflow:hidden; }
  .hbar i { display:block; height:100%; border-radius:99px; background:linear-gradient(180deg,#FF8444,#F4580B 55%,#C13D05); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); transform-origin:left; animation:growX 1s var(--ease) both; animation-delay:calc(var(--i,0) * 90ms + 150ms); }
  .hbar em { font-style:normal; color:var(--ink-2); animation:pop .5s var(--ease) both; animation-delay:calc(var(--i,0) * 90ms + 700ms); }
  /* warna batang menurut nilai: rendah biru, sedang Powder Blue, tinggi oranye (bawaan) */
  .bar i.t1 { background:linear-gradient(90deg,#2E5DE6 0,#6E92F2 38%,#2E5DE6 62%,#1A3BB0 100%); border-color:#14298A; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(26,59,176,.4); }
  .bar i.t2 { background:linear-gradient(90deg,#8DB8B7 0,#CFE5E4 38%,#8DB8B7 62%,#5E9392 100%); border-color:#4A7776; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(74,119,118,.4); }
  .hbar i.t1 { background:linear-gradient(180deg,#6E92F2,#2E5DE6 55%,#1A3BB0); }
  .hbar i.t2 { background:linear-gradient(180deg,#CFE5E4,#8DB8B7 55%,#5E9392); }
  .legend { display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.9rem; font-size:.8rem; color:var(--ink-2); }
  .legend span::before { content:""; display:inline-block; width:10px; height:10px; margin-right:.4rem; border-radius:3px; vertical-align:-1px; background:var(--c); }  .bar, .hbar { outline-offset:2px; border-radius:10px; }
  @media (hover: hover) and (pointer: fine) { .hbar:hover .tr { box-shadow:var(--well), 0 0 0 2px var(--brand-weak); } }
  #tip { position:fixed; z-index:95; left:0; top:0; min-width:190px; max-width:260px; padding:.7rem .85rem; border-radius:12px; pointer-events:none; background:linear-gradient(180deg,#2C3B3A,#1D2827); color:#F2F7F7; border:1px solid rgba(168,201,200,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 26px rgba(0,0,0,.45), 0 0 18px rgba(46,93,230,.35); opacity:0; transform:translateY(4px) scale(.97); transition:opacity .12s, transform .16s var(--ease); }
  #tip.on { opacity:1; transform:none; }
  #tip .tt { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:#B9D1D0; }
  #tip .tt i { width:10px; height:10px; border-radius:3px; flex:none; }
  #tip .tv { font-size:1.45rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:.1rem 0 .3rem; }
  #tip .ts { font-size:.8rem; color:#B9D1D0; line-height:1.4; }  @keyframes growY { from { transform:scaleY(0); } }
  @keyframes growX { from { transform:scaleX(0); } }
  @keyframes gleam { from { opacity:0; } 40% { opacity:1; } }
  @keyframes pop { from { opacity:0; transform:translateY(6px); } }

  /* kejadian */
  .ev { display:flex; gap:.8rem; align-items:flex-start; padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
  .ev:last-child { border-bottom:0; }
  .ev .dot { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--trough); box-shadow:var(--well); }
  .ev .dot.b-ok { color:var(--ok); } .ev .dot.b-off { color:var(--off); } .ev .dot.b-warn { color:var(--warn); } .ev .dot.b-info { color:var(--brand-text); } .ev .dot.b-danger { color:var(--danger); }
  .ev time, .ev .meta { display:block; color:var(--ink-2); font-size:.8rem; }

  /* kontrol */
  .grp { display:flex; align-items:center; gap:.5rem; font-size:.95rem; margin:1.4rem 0 .8rem; color:var(--ink-2); }
  .grp .cnt { font-weight:500; font-size:.8rem; padding:0 .55rem; border-radius:99px; background:var(--trough); box-shadow:var(--well); }
  .dev { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.95rem 1.15rem; background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); border:1px solid rgba(22,32,31,.12); border-radius:var(--r); margin-bottom:.9rem; box-shadow:var(--plate-sm); }
  .dev .nm { font-weight:700; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; } .dev .meta { color:var(--ink-2); font-size:.82rem; }
  .swgrp { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
  .swi { display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--ink-2); }
  /* saklar fisik: alur cekung + kenop logam */
  .sw { position:relative; width:84px; min-height:46px; border-radius:99px; border:1px solid rgba(22,32,31,.3); background:var(--trough); box-shadow:var(--well); color:var(--ink-2); cursor:pointer; font:inherit; font-weight:700; font-size:.78rem; transition:background .25s var(--ease), color .2s, border-color .25s; }
  .sw .th { position:absolute; top:5px; left:5px; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#FFFFFF,#DEDBD5 55%,#B9B5AD); border:1px solid #8F8B83; box-shadow:inset 0 1px 0 #fff, 0 3px 5px rgba(22,32,31,.4); transition:transform .28s var(--ease); }
  .sw .th::after { content:""; position:absolute; inset:9px; border-radius:50%; background:radial-gradient(circle at 60% 70%,rgba(255,255,255,.7),rgba(22,32,31,.18)); box-shadow:inset 0 1px 2px rgba(22,32,31,.3); }
  .sw .tx { position:absolute; top:50%; transform:translateY(-50%); right:13px; }
  .sw[aria-checked="true"] { background:linear-gradient(180deg,#C13D05,#F4580B); border-color:#7E2803; color:#fff; box-shadow:inset 0 3px 6px rgba(80,25,2,.55), inset 0 -1px 0 rgba(255,255,255,.3), 0 0 14px rgba(244,88,11,.35); text-shadow:0 -1px 0 rgba(0,0,0,.3); }
  .sw[aria-checked="true"] .th { transform:translateX(38px); } .sw[aria-checked="true"] .tx { right:auto; left:14px; }
  .sw:active:not([disabled]) .th { transform:scale(.94); } .sw[aria-checked="true"]:active:not([disabled]) .th { transform:translateX(38px) scale(.94); }
  .sw[disabled] { opacity:.5; cursor:not-allowed; } .sw.busy { opacity:.65; cursor:progress; }

  /* dialog & toast */
  dialog { border:1px solid rgba(22,32,31,.2); border-radius:20px; padding:0; background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); color:var(--ink); width:min(500px, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); box-shadow:var(--plate), 0 30px 70px rgba(22,32,31,.5); }
  dialog[open] { animation:dlgin .22s var(--ease); }
  dialog::backdrop { background:rgba(22,32,31,.62); }
  @keyframes dlgin { from { opacity:0; transform:scale(.96) translateY(6px); } }
  .dlg-in { padding:1.3rem; display:flex; flex-direction:column; gap:1rem; }
  .dlg-in h2 { font-size:1.15rem; } .dlg-a { display:flex; gap:.8rem; justify-content:flex-end; flex-wrap:wrap; margin-top:.3rem; }
  .dlg-b p { margin:.3rem 0; } .warnbox { display:flex; gap:.6rem; padding:.8rem .9rem; border-radius:12px; background:var(--danger-weak); color:var(--danger); font-size:.9rem; margin-top:.7rem; box-shadow:var(--well); }
  .frm { display:grid; gap:.9rem; grid-template-columns:1fr 1fr; } .frm .full { grid-column:1 / -1; }
  @media (max-width: 520px) { .frm { grid-template-columns:1fr; } }
  #toasts { position:fixed; right:1rem; bottom:1rem; z-index:90; display:flex; flex-direction:column; gap:.6rem; max-width:min(390px, calc(100vw - 2rem)); }
  .toast { display:flex; gap:.6rem; align-items:flex-start; padding:.8rem 1rem; border-radius:14px; background:linear-gradient(180deg,#3A3D44,#25282D); color:#ECEDEF; font-size:.92rem; border:1px solid #111214; box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 12px 26px rgba(0,0,0,.4); animation:in .3s var(--ease); }
  .toast.err { background:linear-gradient(180deg,#D43B3B,#A81C1C); border-color:#7A1010; color:#fff; }
  @keyframes in { from { opacity:0; transform:translateY(10px) scale(.97); } }
  .tok { word-break:break-all; padding:.7rem .8rem; border-radius:12px; background:var(--field); box-shadow:var(--well); font-family:ui-monospace, Consolas, monospace; font-size:.85rem; }
  code { padding:.1rem .4rem; border-radius:8px; background:var(--field); box-shadow:var(--well); }
  details summary { cursor:pointer; min-height:32px; }

  /* masuk halaman: kartu naik berurutan, sekali */
  @keyframes rise { from { opacity:0; transform:translateY(14px); } }
  #pg > * { animation:rise .5s var(--ease) both; }
  #pg > :nth-child(2) { animation-delay:.05s; } #pg > :nth-child(3) { animation-delay:.1s; } #pg > :nth-child(4) { animation-delay:.15s; } #pg > :nth-child(n+5) { animation-delay:.2s; }
  .grid > .card, .two > .card { animation:rise .5s var(--ease) both; }
  .grid > :nth-child(2), .two > :nth-child(2) { animation-delay:.07s; } .grid > :nth-child(3) { animation-delay:.14s; } .grid > :nth-child(4) { animation-delay:.21s; }
  .ev { animation:rise .4s var(--ease) both; } .ev:nth-child(2) { animation-delay:.05s; } .ev:nth-child(3) { animation-delay:.1s; } .ev:nth-child(4) { animation-delay:.15s; } .ev:nth-child(n+5) { animation-delay:.2s; }
  @media (prefers-contrast: more) {
    :root { --line:rgba(22,32,31,.6); }
    .card, .dev, .btn, .sw, .chip, .iconbtn, .field input, .field select, .field textarea, .tbl tr { border:2px solid var(--ink-2); }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
  /* ======== hero, pencarian, rel ikon sidebar, menu akun ======== */
  main { transition:margin-left .32s var(--ease), max-width .32s var(--ease); }
  .side { width:var(--side-w); transition:transform .32s var(--ease), width .32s var(--ease), box-shadow .32s; }
  .brand { white-space:nowrap; }
  .lg { width:40px; height:40px; flex:none; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
  .bt { display:inline-block; max-width:160px; overflow:hidden; transition:max-width .32s var(--ease), opacity .2s; }
  .nav a span { max-width:170px; overflow:hidden; white-space:nowrap; transition:max-width .32s var(--ease), opacity .2s, transform .28s var(--ease); }
  /* sidebar menciut jadi rel ikon (84px); isi halaman melebar dan semua elemen utama dibesarkan */
  @media (min-width: 901px) {
    body.hide-side { --side-w:84px; }
    body.hide-side main { max-width:calc(1760px + var(--side-w)); }
    body.hide-side .brand { padding-inline:0; justify-content:center; gap:0; }
    body.hide-side .bt, body.hide-side .nav a span { max-width:0; opacity:0; transform:none; }
    body.hide-side .nav { overflow:visible; padding-inline:.7rem; }
    body.hide-side .nav a { justify-content:center; gap:0; padding-inline:0; min-height:50px; }
    body.hide-side .nav a[aria-current="page"]::after { right:9px; top:9px; margin:0; width:7px; height:7px; }
    body.hide-side .nav a::before { content:attr(data-label); position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(-4px); padding:.4rem .75rem; border-radius:9px; background:#1C1E22; color:#fff; font-size:.86rem; font-weight:500; white-space:nowrap; pointer-events:none; opacity:0; border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 18px rgba(0,0,0,.45); transition:opacity .15s, transform .18s var(--ease); z-index:60; }
    body.hide-side .nav a:hover::before, body.hide-side .nav a:focus-visible::before { opacity:1; transform:translateY(-50%); }
  }
  .hero { position:relative; z-index:10; padding:0; margin-bottom:1.1rem; }
  .hero-bar { display:flex; align-items:center; gap:.9rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); }
  .hero-bar .iconbtn { margin-bottom:0; --k-top:#454952; --k-bot:#30333A; }
  .hero-bar .iconbtn svg { transition:transform .32s var(--ease); }
  body.hide-side .hero-bar .iconbtn svg { transform:scaleX(-1); }
  .spacer { flex:1; }

  .search { position:relative; flex:1; max-width:560px; }
  .search input { width:100%; min-height:46px; padding:.5rem 3.1rem .5rem 2.75rem; border:1px solid rgba(22,32,31,.25); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; box-shadow:inset 0 2px 4px rgba(22,32,31,.16), 0 1px 0 var(--hi); transition:border-color .15s, box-shadow .15s; }
  .search input:focus { outline:none; border-color:var(--brand); box-shadow:inset 0 2px 4px rgba(22,32,31,.16), 0 0 0 3px var(--brand-weak); }
  .search .si { position:absolute; left:14px; top:50%; margin-top:-9px; color:var(--ink-2); pointer-events:none; }
  .search kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); min-width:26px; height:26px; display:grid; place-items:center; border-radius:7px; font:inherit; font-size:.78rem; font-weight:700; color:var(--ink-2); background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); border:1px solid var(--line); box-shadow:0 2px 0 var(--lo); }
  .search:focus-within kbd { opacity:0; }
  .results { position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:30; max-height:340px; overflow:auto; padding:.4rem; border-radius:14px; background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); border:1px solid var(--line); box-shadow:var(--plate); transform-origin:top left; }
  .results[hidden] { display:none; }
  .results:not([hidden]) { animation:dlgin .16s var(--ease); }
  .results h3 { font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); padding:.55rem .6rem .25rem; }
  .res { display:flex; align-items:center; gap:.7rem; width:100%; min-height:44px; padding:.4rem .6rem; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
  .res small { margin-left:auto; color:var(--ink-2); font-size:.78rem; }
  .res[aria-selected="true"], .res:hover { background:var(--brand-weak); }
  .res mark { background:none; color:var(--brand-text); font-weight:700; }
  .results .none { padding:1rem; color:var(--ink-2); text-align:center; }

  .acct { position:relative; }
  .avatar-btn { position:relative; width:46px; height:46px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; box-shadow:0 0 0 2px var(--panel-t), 0 0 0 4px var(--line), 0 5px 10px -2px rgba(0,0,0,.45); transition:transform .12s var(--ease), box-shadow .15s; }
  .avatar-btn:active { transform:scale(.95); }
  .avatar-btn[aria-expanded="true"] { box-shadow:0 0 0 2px var(--panel-t), 0 0 0 4px var(--brand), 0 5px 10px -2px rgba(0,0,0,.45); }
  .avatar-btn img, .menu .big img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .avatar-btn .led { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#B8FFD0,#22C55E 60%,#15803D); border:2px solid var(--panel-b); box-shadow:0 0 6px rgba(34,197,94,.8); }
  .menu { position:absolute; right:0; top:calc(100% + 12px); width:272px; z-index:40; padding:.5rem; border-radius:16px; background:linear-gradient(180deg,var(--panel-t),var(--panel-b)); border:1px solid var(--line); box-shadow:var(--plate); transform-origin:top right; }
  .menu[hidden] { display:none; }
  .menu:not([hidden]) { animation:menuin .18s var(--ease); }
  @keyframes menuin { from { opacity:0; transform:scale(.95) translateY(-4px); } }
  .menu .who { display:flex; align-items:center; gap:.8rem; padding:.7rem .7rem .8rem; border-bottom:1px solid var(--line); margin-bottom:.4rem; }
  .menu .big { width:52px; height:52px; border-radius:50%; flex:none; box-shadow:0 0 0 2px var(--panel-t), 0 0 0 3px var(--line); }
  .menu .who b { display:block; line-height:1.2; } .menu .who small { color:var(--ink-2); }
  .menu .who .badge { margin-top:.2rem; }
  .mi { display:flex; align-items:center; gap:.7rem; width:100%; min-height:44px; padding:.4rem .7rem; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; font-weight:500; text-align:left; cursor:pointer; transition:background-color .12s; }
  .mi:hover, .mi:focus-visible { background:var(--brand-weak); outline:none; }
  .mi.out { color:var(--danger); }
  .menu hr { border:0; border-top:1px solid var(--line); margin:.4rem .3rem; }

  .hero-body { display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; padding:1.5rem 1.4rem 1.6rem; }
  .hero-body h1 { font-size:clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing:-.03em; line-height:1.05; }
  .hero-body p { margin:.45rem 0 0; color:var(--ink-2); max-width:44ch; }
  .readout { display:flex; margin:0; border-radius:14px; background:var(--trough); box-shadow:var(--well); overflow:hidden; }
  .readout div { padding:.7rem 1.25rem; min-width:128px; }
  .readout div + div { border-left:1px solid var(--line); }
  .readout dt { font-size:.76rem; color:var(--ink-2); }
  .readout dd { margin:0; font-size:1.7rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--brand-text); text-shadow:0 0 14px rgba(244,88,11,.35); }
  .readout dd small { font-size:.9rem; font-weight:500; color:var(--ink-2); text-shadow:none; }
  @media (max-width: 900px) {
    .hero-bar { padding:.7rem .8rem; gap:.6rem; } .search { max-width:none; }
    .readout { width:100%; } .readout div { flex:1; min-width:0; padding:.6rem .8rem; }
    .menu { position:fixed; right:.8rem; top:4.2rem; }
  }
  .readout div { min-width:120px; }
  .tbl tr.hit td { animation:hit 2.2s var(--ease); }
  @keyframes hit { from { background:var(--brand-weak); } }
  .menu .mi[hidden] { display:none; }