/* TAMPILAN website Pelican Crossing: warna (gaya iOS, sedikit warna), tata letak, mode gelap. */
  :root {
    --bg:#000; --panel:#1c1c1e; --panel2:#2c2c2e; --line:#38383a; --text:#fff; --muted:#8e8e93;
    --green:#30d158; --yellow:#ffd60a; --red:#ff453a; --blue:#0a84ff; --purple:#bf5af2; --orange:#ff9f0a; --cyan:#64d2ff;
    --aksen:#0a84ff; --aksen2:#0a84ff; --on-aksen:#fff; --bayang:rgba(0,0,0,.6); color-scheme:dark;
    --aksen-teks:color-mix(in srgb, var(--aksen) 75%, var(--text));     /* aksen yang tetap terbaca sebagai teks */
  }
  /* Mode hitam pekat & mode terang: cukup ganti variabel, semua bagian web ikut berubah */
  :root[data-theme="hitam"] { --bg:#000; --panel:#0a0a0a; --panel2:#1c1c1e; --line:#2c2c2e; }
  :root[data-theme="light"] { --bg:#f2f2f7; --panel:#fff; --panel2:#f2f2f7; --line:#e5e5ea; --text:#1c1c1e; --muted:#6c6c70;
    --green:#248a3d; --yellow:#b25000; --red:#d70015; --blue:#007aff; --purple:#8944ab; --orange:#c93400; --cyan:#0071a4;
    --bayang:rgba(0,0,0,.08); color-scheme:light; }   /* versi "kontras tinggi" iOS supaya teks berwarna tetap terbaca */
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  body { margin:0; color:var(--text); font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
         background:radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--aksen) 10%, transparent), transparent 60%),
                    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--aksen2) 9%, transparent), transparent 60%), var(--bg);
         transition:background-color .3s, color .3s;
         background-attachment:fixed; }
  .mono { font-family:ui-monospace,"SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums; }
  .sub, .ket { color:var(--muted); font-size:.78rem; }
  .label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  button { font:inherit; font-size:.82rem; padding:8px 14px; border:0; border-radius:8px; background:var(--aksen); color:var(--on-aksen); cursor:pointer; }
  button:hover { filter:brightness(1.08); }
  button.bahaya { background:#b91c1c; } button.bahaya:hover { background:#991b1b; }
  button.biasa { background:var(--panel2); border:1px solid var(--line); color:var(--text); }
  button.biasa:hover { background:var(--line); }
  select, input { font:inherit; font-size:.85rem; padding:7px 8px; border-radius:8px; border:1px solid var(--line);
                  background:var(--panel2); color:var(--text); }
  [data-ubah] { border-color:var(--yellow); }   /* input yang diubah tapi belum disimpan */

  /* ---------- Kerangka: sidebar + isi ---------- */
  .app { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
  aside { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:18px; padding:18px 12px;
          background:var(--panel); border-right:1px solid var(--line); }
  .brand { display:flex; gap:10px; align-items:center; padding:0 6px; }
  .logo { width:38px; height:38px; flex:none; border-radius:10px; background:var(--panel2); display:grid; place-items:center; font-size:19px; }
  .brand b { display:block; font-size:.98rem; }
  .nav { display:flex; flex-direction:column; gap:4px; }
  .nav button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; text-align:left;
                background:transparent; color:var(--muted); font-size:.88rem; }
  .nav button:hover { background:var(--panel2); color:var(--text); }
  .nav button.aktif { color:var(--aksen-teks); }
  .nav .jml { margin-left:auto; padding:1px 7px; border-radius:999px; background:var(--purple); color:#0b1120; font-size:.7rem; font-weight:700; }
  .aside-bawah { margin-top:auto; padding:0 6px; }

  main { min-width:0; padding:20px 24px 32px; max-width:1240px; }
  .topbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
  h1 { margin:0; font-size:1.3rem; }
  .aksi { display:flex; gap:8px; align-items:center; }
  .pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:.78rem;
          border:1px solid var(--line); background:var(--panel2); }
  .pill::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
  .pill.ok { color:var(--green); } .pill.ok::before { background:var(--green); }
  .pill.warn { color:var(--yellow); } .pill.warn::before { background:var(--yellow); }
  .pill.err { color:var(--red); } .pill.err::before { background:var(--red); }

  #alarmBar { margin:14px 0 18px; padding:10px 14px; border-radius:10px; font-size:.85rem; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
              background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.3); color:var(--green); }
  #alarmBar.ada { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.35); color:var(--red); }
  .badge { padding:2px 8px; border-radius:6px; font-size:.75rem; color:#fff; background:#b45309; }
  .badge.crit { background:var(--red); }
  #simulasi { margin-top:14px; padding:8px 14px; border-radius:10px; font-size:.8rem;
              background:rgba(167,139,250,.1); border:1px dashed var(--purple); color:var(--purple); }

  @media (max-width:760px) {
    .app { grid-template-columns:minmax(0,1fr); }   /* deretan tab tidak boleh melebarkan halaman */
    aside { position:sticky; z-index:5; height:auto; min-width:0; flex-direction:row; align-items:center; gap:8px; padding:8px;
            overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
    .brand div:last-child, .aside-bawah { display:none; }
    .nav { flex-direction:row; }
    .nav button { width:auto; white-space:nowrap; padding:8px 10px; }
    main { padding:16px; }
  }

  /* ---------- Panel & kartu ---------- */
  .panel { background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel); border:1px solid var(--line);
           border-radius:16px; padding:18px; min-width:0; box-shadow:0 14px 34px -22px var(--bayang); }
  .panel h3 { margin:0 0 14px; font-size:.95rem; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .hitung { color:var(--muted); font-size:.75rem; font-weight:400; }
  .kolom { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:16px; margin-top:16px; align-items:start; }
  @media (max-width:900px) { .kolom { grid-template-columns:1fr; } }

  .metrik { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .metrik + .metrik { margin-top:12px; }
  @media (max-width:760px) { .metrik { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .kartu { --c:var(--blue); position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:14px 16px;
           background:linear-gradient(150deg, color-mix(in srgb, var(--c) 13%, var(--panel)), var(--panel) 65%);
           box-shadow:0 14px 30px -22px var(--bayang); transition:transform .2s, border-color .2s; }
  .kartu:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 50%, var(--line)); }
  .kartu::after { content:""; position:absolute; right:-34px; top:-34px; width:100px; height:100px; border-radius:50%;
                  background:radial-gradient(var(--c), transparent 70%); opacity:.2; pointer-events:none; }
  .kartu .kepala { display:flex; align-items:center; gap:8px; }
  .kartu .ikon { width:28px; height:28px; flex:none; border-radius:9px; display:grid; place-items:center; font-weight:800;
                 color:var(--c); background:color-mix(in srgb, var(--c) 18%, transparent); }
  .kartu .nilai { font-size:2rem; font-weight:800; letter-spacing:-.02em; color:var(--text); margin:8px 0 2px; }
  .bar { height:6px; background:var(--panel2); border-radius:3px; overflow:hidden; margin-top:8px; }
  .bar > i { display:block; height:100%; width:0; background:var(--c,var(--blue)); transition:width .4s; }

  /* ---------- Dashboard: lampu & fase ---------- */
  .lampu-area { display:flex; justify-content:center; gap:28px; }
  .tiang { text-align:center; font-size:.72rem; color:var(--muted); }
  .kotak { margin-top:6px; padding:10px; border-radius:16px; background:#060a14; border:1px solid var(--line); display:grid; gap:10px; }
  .lamp { width:54px; height:54px; border-radius:50%; background:#1a2236; display:grid; place-items:center; font-size:24px; transition:.2s; }
  .lamp span { opacity:.18; }
  .lamp.on span { opacity:1; }
  .lamp.on.merah { background:var(--red); box-shadow:0 0 22px var(--red); }
  .lamp.on.kuning { background:var(--yellow); box-shadow:0 0 22px var(--yellow); }
  .lamp.kedip { animation:lampuKedip 1s steps(1) infinite; } .lamp.kedip span { opacity:1; }
  @keyframes lampuKedip { 0% { background:var(--yellow); box-shadow:0 0 22px var(--yellow); } 50% { background:#1a2236; box-shadow:none; } }
  .lamp.on.hijau { background:var(--green); box-shadow:0 0 22px var(--green); }
  .indikator { display:flex; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
  .ind { font-size:.75rem; padding:4px 10px; border-radius:999px; background:var(--panel2); color:var(--muted); border:1px solid var(--line); }
  .ind.on { color:#0b1120; background:var(--yellow); border-color:var(--yellow); }
  .state-nama { text-align:center; margin-top:14px; font-weight:600; }
  #stateWaktu { text-align:center; margin-top:6px; }
  /* ---------- Dashboard: status live (cincin hitung mundur) ---------- */
  .atas { display:grid; grid-template-columns:minmax(330px,400px) 1fr; gap:16px; align-items:stretch; }
  @media (max-width:1100px) { .atas { grid-template-columns:1fr; } }
  .hero { --fase:var(--blue); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px;
          background:radial-gradient(420px 240px at 0% 0%, color-mix(in srgb, var(--fase) 24%, transparent), transparent 70%), var(--panel); }
  .hero-kepala { display:flex; justify-content:space-between; align-items:center; }
  .live { display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.12em; color:var(--green);
          padding:4px 10px; border-radius:999px; background:rgba(34,197,94,.12); }
  .live i { width:7px; height:7px; border-radius:50%; background:currentColor; animation:denyut 1.6s infinite; }
  .live.mati { color:var(--muted); background:var(--panel2); } .live.mati i { animation:none; }
  @keyframes denyut { 0% { box-shadow:0 0 0 0 currentColor; } 70%, 100% { box-shadow:0 0 0 7px transparent; } }
  .hero-isi { display:flex; gap:18px; align-items:center; }
  .cincin { position:relative; width:132px; height:132px; flex:none; }
  .cincin svg { width:100%; height:100%; transform:rotate(-90deg); }
  .cincin-latar { fill:none; stroke:var(--panel2); stroke-width:9; }
  .cincin-isi { fill:none; stroke:var(--fase); stroke-width:9; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7;
                transition:stroke-dashoffset .9s linear, stroke .4s; filter:drop-shadow(0 0 6px var(--fase)); }
  .cincin-teks { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
  .cincin-teks b { font-size:2.5rem; line-height:1; }
  .cincin-teks span { font-size:.66rem; color:var(--muted); margin-top:5px; }
  .hero #stateWaktu { text-align:left; margin:0; }
  .hero .state-nama { text-align:left; margin:4px 0 2px; font-size:1.08rem; font-weight:800; color:var(--fase); transition:color .4s; }
  .chip-baris { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .chip { font-size:.74rem; padding:4px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); }
  .chip b { color:var(--text); }
  .lampu-baris { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); }
  .lampu-baris .kotak { display:flex; gap:8px; padding:8px; border-radius:14px; }
  .lampu-baris .lamp { width:38px; height:38px; font-size:17px; }
  .lampu-baris .indikator { margin:0 0 6px auto; justify-content:flex-end; gap:6px; }
  .kpi .judul-grup { display:flex; align-items:center; gap:8px; }
  .kpi .judul-grup::after { content:""; flex:1; height:1px; background:var(--line); }

  /* ---------- Dashboard: linimasa fase (lebar = durasi, fase aktif terisi) ---------- */
  .linimasa { margin-top:16px; }
  .fase { display:flex; gap:6px; }
  .fase > div { --fc:var(--blue); position:relative; overflow:hidden; flex:1 1 0; min-width:0; padding:10px 10px 8px; border-radius:11px;
                background:var(--panel2); border:1px solid var(--line); transition:flex-grow .6s, border-color .3s, box-shadow .3s; }
  .fase > div > i { position:absolute; inset:0 auto 0 0; width:0; background:color-mix(in srgb, var(--fc) 24%, transparent); transition:width .9s linear; }
  .fase span, .fase small { position:relative; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fase span { font-size:.8rem; font-weight:600; } .fase span b { color:var(--fc); margin-right:4px; }
  .fase small { font-size:.68rem; color:var(--muted); margin-top:2px; }
  .fase > div.aktif { border-color:var(--fc); box-shadow:inset 0 0 0 1px var(--fc), 0 0 22px -8px var(--fc); }
  .fase > div.lewat > i { background:color-mix(in srgb, var(--fc) 9%, transparent); }
  @media (max-width:760px) { .fase { flex-wrap:wrap; } .fase > div { flex-basis:30% !important; } }

  /* ---------- Dashboard: peta dari atas (skema & satelit pakai gaya yang sama) ----------
     Ukuran panah beda per peta: skema dalam piksel viewBox, satelit dalam meter -> diatur lewat variabel CSS */
  .peta-panel { margin-top:16px; }
  .peta2d { --sw:4; --sw-stop:5; --fs:30px; --ss:7; --lx:60px; --ly:-36px; display:block; }
  #petaSat .peta2d { --ft:1.3px; --sw:.45; --sw-stop:.5; --fs:3.2px; --ss:.8; --lx:6px; --ly:-2.5px; }
  #peta { width:100%; height:auto; border-radius:10px; background:#0d1a12; }
  #petaSat { height:440px; border-radius:10px; background:#0d1a12; }
  .peta2d .trotoar { fill:#273246; } .peta2d .aspal { fill:#1a2030; } .peta2d .gedung { fill:#1c2538; }
  .peta2d .marka { stroke:#64748b; stroke-width:2; stroke-dasharray:18 14; }
  .peta2d .teks { fill:var(--muted); font:600 var(--ft,13px) system-ui; }
  #petaSat .teks { fill:#f8fafc; paint-order:stroke; stroke:#0b1120; stroke-width:.35; }
  #petaSat .rumah-lampu { stroke:#e2e8f0; stroke-opacity:.7; stroke-width:.14; }   /* tetap terlihat di atas citra */
  #petaSat .L { stroke:#000; stroke-width:.08; }
  .peta2d .angka { fill:var(--text); font-weight:700; }
  .peta2d .zebra { fill:#f8fafc; opacity:.85; }
  .peta2d .stop { stroke:#e2e8f0; stroke-width:var(--sw-stop); transition:stroke .3s; }
  .peta2d.v-merah .stop { stroke:var(--red); }
  .peta2d .rumah-lampu { fill:#060a14; stroke:var(--line); stroke-width:calc(var(--sw) / 4); }
  .peta2d .L { fill:#1e293b; transition:fill .2s; }
  .peta2d.v-merah .L-vm, .peta2d.p-merah .L-pm { fill:var(--red); }
  .peta2d.v-kuning .L-vk { fill:var(--yellow); }
  .peta2d.kedip .L-vk { animation:kedip 1s steps(2) infinite; }
  .peta2d.v-hijau .L-vh, .peta2d.p-hijau .L-ph { fill:var(--green); }
  /* Panah: arus kendaraan (sepanjang jalan) & pejalan kaki (melintang di zebra) */
  .peta2d .arus-kendaraan, .peta2d .arus-orang { fill:none; stroke-width:var(--sw); stroke-linecap:round; stroke-linejoin:round;
                                                 opacity:0; transition:opacity .3s; }
  .peta2d .gerak { animation:geserX 1s linear infinite; }
  .peta2d .gerak-y { animation:geserY 1s linear infinite; }
  .peta2d.v-hijau .arus-kendaraan { opacity:.95; stroke:var(--green); }
  .peta2d.v-kuning:not(.v-hijau) .arus-kendaraan { opacity:.95; stroke:var(--yellow); }
  .peta2d.v-kuning:not(.v-hijau) .gerak { animation-duration:2.6s; }
  .peta2d.p-hijau .arus-orang { opacity:1; stroke:var(--green); }
  /* Saat lampu kendaraan merah: panah DIAM berwarna merah di depan garis stop (kendaraan menunggu), berdenyut pelan */
  .peta2d .antri { fill:none; stroke:var(--red); stroke-width:var(--sw); stroke-linecap:round; stroke-linejoin:round;
                   opacity:0; transition:opacity .4s; }
  .peta2d.v-merah .antri { opacity:.9; animation:antriDenyut 1.6s ease-in-out infinite; }
  @keyframes antriDenyut { 50% { opacity:.35; } }
  .peta2d .sisa { fill:var(--green); font:800 var(--fs) ui-monospace,Consolas,monospace; text-anchor:middle;
                  paint-order:stroke; stroke:#0b1120; stroke-width:var(--ss); opacity:0; }
  .peta2d.p-hijau .sisa { opacity:1; }
  .peta2d .sorot { opacity:0; transition:opacity .5s; } .peta2d.sorot .sorot { opacity:1; }
  .peta2d .bel { opacity:0; font-size:20px; } .peta2d.bunyi .bel { animation:kedip .6s steps(2) infinite; }
  @keyframes geserX { to { transform:translateX(var(--lx)); } }
  @keyframes geserY { to { transform:translateY(var(--ly)); } }
  @keyframes kedip { 50% { opacity:1; fill:var(--yellow); } }
  @media (prefers-reduced-motion:reduce) { .peta2d .gerak, .peta2d .gerak-y { animation:none; } }
  .peta-ket { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:.8rem; color:var(--muted); }
  .peta-ket b { color:var(--text); }
  .peta-panel .seg { min-width:200px; }

  /* ---------- Kontrol ---------- */
  .kini { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:12px 16px; margin-bottom:16px;
          background:var(--panel); border:1px solid var(--line); border-radius:12px; font-size:.88rem; }
  .kini b { color:var(--aksen-teks); }
  .kontrol { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
  .kk { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:10px; align-content:start; }
  .seg { display:flex; gap:3px; padding:3px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; }
  .seg button { flex:1; padding:8px 6px; background:transparent; color:var(--muted); }
  .seg button:hover { background:var(--line); color:var(--text); }

  .zona { margin-top:16px; border-color:rgba(239,68,68,.35); }
  .baris { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:10px 0; }
  .baris + .baris { border-top:1px solid var(--line); }
  .baris .aksi select { min-width:190px; }

  /* ---------- Pengaturan ---------- */
  .timer { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .timer div { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px; }
  .timer input { width:100%; margin-top:6px; text-align:center; font-size:1rem; }
  .jadwal { display:flex; flex-wrap:wrap; gap:12px; }
  .jadwal label { display:grid; gap:6px; }
  .simpan { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; margin-top:16px; }

  /* ---------- Tabel & log ---------- */
  .scroll { max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
  #tab-log .scroll { max-height:calc(100vh - 230px); }
  table { width:100%; border-collapse:collapse; font-size:.8rem; }
  th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
  th { position:sticky; top:0; background:var(--panel2); color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; }
  .kosong { color:var(--muted); text-align:center; padding:24px; }
  #log { font:.8rem/1.7 ui-monospace,Consolas,monospace; padding:10px 12px; }
  .CRIT, .ERR { color:var(--red); } .WARN { color:var(--yellow); } .OK { color:var(--green); } .STATE { color:var(--blue); }
  .CMD, .KIRIM { color:var(--purple); } .AI { color:var(--orange); }
  .judul-grup { margin:0 0 10px; font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
  .metrik + .judul-grup { margin-top:18px; }
  .metrik.lima { grid-template-columns:repeat(5,minmax(0,1fr)); }
  @media (max-width:760px) { .metrik.lima { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .dua { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  @media (max-width:900px) { .dua { grid-template-columns:1fr; } }
  .grafik { position:relative; height:260px; }
  .kartu .nilai.kecil { font-size:1.4rem; margin-top:12px; }
  /* Aksen warna: angka kartu ikut warna kartu, garis gradasi di atas panel, judul tabel berwarna */
  .kartu .nilai { color:color-mix(in srgb, var(--c) 60%, var(--text)); text-shadow:0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
  .kartu { border-top:2px solid color-mix(in srgb, var(--c) 70%, transparent); }
  .panel { position:relative; }
  .panel::before { content:""; position:absolute; left:18px; right:18px; top:-1px; height:2px; border-radius:2px; pointer-events:none;
                   background:var(--garis, linear-gradient(90deg, var(--aksen), var(--aksen2))); }
  .hero { --garis:var(--fase); }
  th { color:var(--aksen-teks); background:linear-gradient(180deg, color-mix(in srgb, var(--aksen) 10%, var(--panel2)), var(--panel2)); }
  .nav button.aktif { background:linear-gradient(90deg, color-mix(in srgb, var(--aksen) 22%, transparent), color-mix(in srgb, var(--aksen2) 8%, transparent));
                      box-shadow:inset 3px 0 0 var(--aksen); }
  .logo { background:linear-gradient(135deg, var(--aksen), var(--aksen2)); }
  .kini { border-left:3px solid var(--aksen2); }
  .judul-grup { color:color-mix(in srgb, var(--aksen) 60%, var(--muted)); }
  .seg button.aktif, #bSimpan, #bPdf { background:linear-gradient(135deg, var(--aksen), var(--aksen2)); color:var(--on-aksen); }
  /* Panel Tampilan (tab Pengaturan) */
  .tampilan { display:grid; gap:18px; }
  .tampilan .label { margin-bottom:8px; }
  .palet-baris { display:flex; flex-wrap:wrap; gap:8px; }
  .palet { display:flex; align-items:center; gap:8px; background:var(--panel2); color:var(--text); border:1px solid var(--line); }
  .palet i { width:30px; height:16px; border-radius:999px; background:linear-gradient(90deg, var(--a) 50%, var(--b) 50%); }
  .palet.aktif { border-color:var(--aksen); box-shadow:0 0 0 2px color-mix(in srgb, var(--aksen) 35%, transparent); }
  .warna-sendiri { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .warna-sendiri label { display:flex; align-items:center; gap:8px; }
  input[type=color] { width:46px; height:32px; padding:2px; cursor:pointer; }
  #bSimpan:hover, #bPdf:hover { filter:brightness(1.15); }
  .lap { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
  .lap label { display:grid; gap:6px; }
  .lap .seg { flex-wrap:wrap; }
  .lap .seg button { white-space:nowrap; padding:8px 10px; }
  #bPdf { padding:9px 18px; font-weight:700; }
  /* Checklist UI UX Pro Max (design-system/pelican-crossing/MASTER.md) */
  :focus-visible { outline:2px solid var(--aksen); outline-offset:2px; }                     /* fokus keyboard terlihat */
  button, .palet, select, input[type=color], input[type=date], input[type=time] { cursor:pointer;
    transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, filter .2s; }  /* hover 150-300 ms */
  .judul { display:inline-flex; align-items:center; gap:8px; }
  /* Kamera live: satu JPEG berisi 2 kamera berdampingan -> tiap panel menampilkan separuhnya */
  .layar { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:10px; background:#000; }
  .layar img { position:absolute; top:0; left:calc(var(--k) * -100%); width:calc(var(--n, 2) * 100%); height:100%; display:block; }   /* 1 JPEG = semua kamera berjajar */
  .layar img:not([src]) { display:none; }
  .layar iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  /* Atur zona (admin): titik di atas gambar Deteksi AI, koordinat 16x9 = gambar penuh */
  .zona-svg { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; z-index:2; touch-action:none; }
  .zona-svg circle { cursor:grab; }
  .zona-svg polygon { fill:rgba(255,204,0,.25); stroke:#ffcc00; stroke-width:.06; }
  .zona-svg line { stroke:#ff3b30; stroke-width:.08; }
  .zona-svg circle { fill:#fff; stroke:#000; stroke-width:.03; }
  .zona-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; } .zona-bar .sub { flex:1; min-width:180px; }
  #kamMode button { white-space:nowrap; padding:8px 12px; }
  .layar .kosong { position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; }
  .layar.basi img { filter:grayscale(1) brightness(.6); }
  /* Mode publik: bagian khusus admin disembunyikan (yang benar-benar menolak tetap ACL broker) */
  body:not(.admin) .khusus-admin { display:none !important; }
  #dlgMasuk, #dlgTampilan { border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); padding:22px;
              width:min(360px, 92vw); box-shadow:0 30px 60px -20px var(--bayang); }
  #dlgTampilan { width:min(520px, 94vw); }
  body.admin .publik-saja { display:none; }
  #dlgMasuk::backdrop, #dlgTampilan::backdrop { background:rgba(2,6,23,.6); backdrop-filter:blur(3px); }
  #fMasuk { display:grid; gap:12px; } #fMasuk h3 { margin:0; } #fMasuk label { display:grid; gap:6px; }
  #fMasuk .aksi { justify-content:flex-end; }
  @media (max-width:760px) { .app { align-content:start; } }     /* bilah menu HP tidak ikut meregang di halaman pendek */
  .lucide { width:1.05em; height:1.05em; vertical-align:-.17em; flex:none; }                 /* ikon SVG Lucide */
  .kartu .ikon .lucide { width:16px; height:16px; }
  .lamp .lucide { width:26px; height:26px; }
  .titik { display:inline-block; width:.62em; height:.62em; border-radius:50%; margin-right:6px; vertical-align:.02em; }
  .titik.hijau { background:var(--green); } .titik.kuning { background:var(--yellow); }
  /* ---------- Gaya iOS (Apple HIG): permukaan polos, tanpa gradasi/cahaya, warna hanya untuk makna ---------- */
  body { background:var(--bg); -webkit-font-smoothing:antialiased; }
  aside { background:color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter:saturate(180%) blur(20px); }
  .logo { background:var(--aksen); }
  .nav button { border-radius:10px; font-weight:500; }
  .nav button.aktif { background:var(--aksen); color:var(--on-aksen); box-shadow:none; }
  .nav .jml { background:var(--red); color:#fff; }
  .nav button.aktif .jml { background:#fff; color:var(--aksen); }
  h1 { font-size:1.75rem; font-weight:700; letter-spacing:-.02em; }
  .panel, .kartu, .kini, .kk { background:var(--panel); border:0; box-shadow:0 1px 2px var(--bayang); }
  .panel { border-radius:14px; } .panel::before { display:none; }
  .kartu { border-radius:14px; } .kartu::after { display:none; } .kartu:hover { transform:none; }
  .kartu .nilai { color:var(--text); text-shadow:none; font-weight:700; }
  .kartu .ikon { background:transparent; color:var(--muted); }
  .kartu .nilai, .cincin-teks b { font-family:inherit; font-variant-numeric:tabular-nums; }
  .kotak { background:#1c1c1e; } .lamp { background:#2c2c2e; }
  .hero { background:var(--panel); } .cincin-isi { filter:none; }
  .kini { border-left:0; border-radius:12px; } .kini b { color:var(--text); }
  .judul-grup { color:var(--muted); font-weight:600; letter-spacing:.02em; }
  th { color:var(--muted); background:var(--panel); }
  button { border-radius:10px; font-weight:500; }
  button.biasa { background:color-mix(in srgb, var(--muted) 14%, transparent); border:0; }
  button.biasa:hover { background:color-mix(in srgb, var(--muted) 24%, transparent); }
  .seg { background:color-mix(in srgb, var(--muted) 14%, transparent); border:0; border-radius:9px; padding:2px; }
  .seg button { border-radius:7px; color:var(--text); }
  .seg button.aktif { background:var(--panel); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.15); }
  :root[data-theme="dark"] .seg button.aktif, :root[data-theme="hitam"] .seg button.aktif { background:#636366; }
  #bSimpan, #bPdf { background:var(--aksen); color:var(--on-aksen); }
  select, input { background:var(--panel2); border:0; border-radius:10px; }
  .pill { border:0; background:color-mix(in srgb, var(--muted) 14%, transparent); }
  #alarmBar { border:0; border-radius:12px; background:color-mix(in srgb, var(--green) 12%, transparent); }
  #alarmBar.ada { background:color-mix(in srgb, var(--red) 12%, transparent); }
  #simulasi { border:0; background:color-mix(in srgb, var(--muted) 14%, transparent); color:var(--muted); }
  .lamp.on.merah, .lamp.on.kuning, .lamp.on.hijau { box-shadow:none; }
  .fase > div { border:0; } .fase > div.aktif { box-shadow:inset 0 0 0 2px var(--fc); }
  .scroll { border:0; background:var(--panel); }
  #dlgMasuk, #dlgTampilan { border:0; border-radius:14px; }
  @media (prefers-reduced-motion:reduce) {                                                   /* hormati setelan perangkat */
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                             transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }