/* Cockpit UI kit — dipakai semua aplikasi baru (disalin ke apps/<app>/static/ oleh ops/new_app.py).
   Dark & Light otomatis (ikut sistem) atau manual lewat data-theme di <html>. */
:root{
  --bg:#f3f4f6; --surface:#fff; --surface-2:#eef0f3; --surface-3:#e4e7eb;
  --text:#1b1f24; --muted:#5f6772; --faint:#8a929c; --border:#d9dde2; --border-strong:#c4cad1;
  --accent:#d9480f; --accent-hover:#b93c0b; --accent-soft:#fff0e8; --on-accent:#fff;
  --ok:#2b8a3e; --ok-soft:#e8f6ec; --warn:#a86300; --warn-soft:#fff5e0; --err:#c92a2a; --err-soft:#fdecec;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --radius:12px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131519; --surface:#1c1f25; --surface-2:#252930; --surface-3:#2f343c;
  --text:#e7e9ec; --muted:#a0a7b1; --faint:#737b86; --border:#30353e; --border-strong:#434a55;
  --accent:#ff7a45; --accent-hover:#ff9466; --accent-soft:#3a2219; --on-accent:#16181c;
  --ok:#5bd176; --ok-soft:#173222; --warn:#ffc14d; --warn-soft:#3a2d12; --err:#ff6b6b; --err-soft:#3d1c1e;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131519; --surface:#1c1f25; --surface-2:#252930; --surface-3:#2f343c;
  --text:#e7e9ec; --muted:#a0a7b1; --faint:#737b86; --border:#30353e; --border-strong:#434a55;
  --accent:#ff7a45; --accent-hover:#ff9466; --accent-soft:#3a2219; --on-accent:#16181c;
  --ok:#5bd176; --ok-soft:#173222; --warn:#ffc14d; --warn-soft:#3a2d12; --err:#ff6b6b; --err-soft:#3d1c1e;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.cu-wrap{max-width:880px;margin:0 auto;padding:16px}
.cu-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cu-bar h1{font-size:18px;margin:0;flex:1}
.cu-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.cu-muted{color:var(--muted)}
.cu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-weight:550;text-decoration:none}
.cu-btn:hover{background:var(--surface-3);border-color:var(--border-strong)}
.cu-btn:focus-visible,.cu-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cu-btn[disabled]{opacity:.55;cursor:not-allowed}
.cu-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cu-btn.primary:hover{background:var(--accent-hover)}
.cu-input{width:100%;min-height:38px;padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2)}
.cu-badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600;background:var(--surface-3)}
.cu-badge.ok{background:var(--ok-soft);color:var(--ok)} .cu-badge.warn{background:var(--warn-soft);color:var(--warn)} .cu-badge.err{background:var(--err-soft);color:var(--err)}
/* progress bar (angka pasti atau perkiraan) */
.cu-prog{display:none;margin:12px 0}
.cu-prog.on{display:block}
.cu-prog .cu-track{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.cu-prog .cu-fill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .4s ease}
.cu-prog .cu-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}
.cu-prog.err .cu-fill{background:var(--err)} .cu-prog.done .cu-fill{background:var(--ok)}
/* toast */
.cu-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:92vw;padding:10px 16px;border-radius:10px;background:var(--text);color:var(--bg);box-shadow:var(--shadow);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s}
.cu-toast.on{opacity:1}
.cu-theme .sun{display:none}
:root[data-theme="dark"] .cu-theme .sun{display:inline}
:root[data-theme="dark"] .cu-theme .moon{display:none}