/* Tema Pusat Bisnis (Glass bento) untuk monitor.sukaweb.my.id. Dimuat paling akhir: menimpa token dan warna tertanam di app/redesign/mockup-match/advertising.css. */
:root{
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#e9eeff;--surface:rgba(255,255,255,.55);--surface2:rgba(255,255,255,.78);--card:var(--surface);--side:rgba(255,255,255,.5);
  --line:rgba(30,40,110,.14);--text:#1b2340;--muted:#4f5a82;
  --accent:#3d6bff;--good:#0f8a5a;--warn:#a85f00;--bad:#c4263f;--green:var(--good);--amber:var(--warn);--red:var(--bad);
  --card-line:rgba(255,255,255,.85);--card-shadow:0 10px 30px rgba(60,80,170,.14),inset 0 1px 0 #fff;
  --pill:rgba(255,255,255,.7);--nav-on:rgba(255,255,255,.7);--track:rgba(30,40,110,.1);--inset:rgba(30,40,110,.05);--inset2:rgba(61,107,255,.1);
  --input:rgba(255,255,255,.8);--solid:#f3f6ff;--scrim:rgba(20,30,80,.35);
  --blobs:radial-gradient(520px 380px at 8% 4%,rgba(110,150,255,.55),transparent 70%),radial-gradient(460px 360px at 92% 24%,rgba(255,150,170,.45),transparent 70%),radial-gradient(520px 380px at 45% 100%,rgba(190,160,255,.5),transparent 70%);
  color-scheme:light
}
:root[data-theme="dark"]{
  --bg:#080c1a;--surface:rgba(255,255,255,.06);--surface2:rgba(255,255,255,.1);--side:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.13);--text:#eef2ff;--muted:#9aa6c7;
  --accent:#7aa2ff;--good:#5fe0a8;--warn:#ffc857;--bad:#ff7d8f;
  --card-line:rgba(255,255,255,.13);--card-shadow:0 10px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16);
  --pill:rgba(255,255,255,.09);--nav-on:rgba(255,255,255,.09);--track:rgba(255,255,255,.1);--inset:rgba(255,255,255,.04);--inset2:rgba(122,162,255,.16);
  --input:rgba(255,255,255,.07);--solid:#10162b;--scrim:rgba(0,0,0,.6);
  --blobs:radial-gradient(520px 380px at 8% 4%,rgba(122,162,255,.38),transparent 70%),radial-gradient(460px 360px at 92% 24%,rgba(255,143,122,.26),transparent 70%),radial-gradient(520px 380px at 45% 100%,rgba(130,90,255,.3),transparent 70%);
  color-scheme:dark
}
body{font-family:var(--f);background:var(--bg);color:var(--text);position:relative}
body::before{content:"";position:fixed;inset:0;z-index:0;background:var(--blobs);pointer-events:none}
.app-shell,.login-card{position:relative;z-index:1}
h1,h2,h3,h4,.brand{font-family:var(--f)}
.page-heading h1,.login-card h1{font-weight:800;letter-spacing:-.01em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Sidebar dan topbar */
.app-sidebar{background:var(--side);border-right-color:var(--card-line);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
.brand{font-weight:800}
.brand-mark{border-radius:9px;color:#fff}
.sidebar-label{color:var(--muted);letter-spacing:.08em}
.sidebar-link{border:1px solid transparent;border-radius:12px;font-weight:600}
.sidebar-link:hover{background:var(--nav-on);color:var(--text)}
.sidebar-link.active{background:var(--nav-on);border-color:var(--card-line);box-shadow:none;color:var(--text)}
.sidebar-icon{color:var(--muted)}
.sidebar-link.active .sidebar-icon{color:var(--accent)}
.app-topbar{background:color-mix(in srgb,var(--bg) 62%,transparent);border-bottom-color:var(--card-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.topbar-title b{font-weight:800}
.sidebar-toggle,.topbar-search,.user-button,.environment,.ghost,.btn-ghost,.tema-btn{background:var(--pill);border-color:var(--card-line);color:var(--text)}
.sidebar-toggle,.topbar-search,.user-button,.environment,.ghost{border-radius:12px}
.tema-btn{font:inherit;font-size:12.5px;font-weight:700;padding:0 12px;min-height:36px;border:1px solid var(--card-line);border-radius:12px;cursor:pointer}
.tema-btn:hover,.user-button:hover,.ghost:hover{border-color:var(--accent)}
.app-sidebar.is-open{box-shadow:20px 0 50px var(--scrim)}
.sidebar-backdrop:not([hidden]){background:var(--scrim)}

/* Kartu kaca */
.panel,.card,.overview-card,.quick-link,.metrics,.advertising-overview,.advertising-jump,.advertising-filter,.advertising-page .metric-grid .card,.overview-metrics,.kanban-overview{
  background:var(--card);border-color:var(--card-line);border-radius:20px;box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
.overview-metrics .overview-card,.advertising-overview .card,.client-summary .client-stat{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.card:hover,.overview-card:hover,.quick-link:hover,.kanban-card:hover{border-color:var(--accent)}
.kanban-card{background:var(--surface2);border-color:var(--card-line);border-radius:14px}
.kanban-column,.agent-stats div,.task-meta div,.task-log,.changelog-entry,.progress-entry,.failed-summary,.sim-system,.simulator-chat{background:var(--inset);border-color:var(--line);border-radius:14px}
.card h2,.markdown-body h1,.markdown-body h2,.markdown-body h3,.changelog-entry summary,.progress-entry summary{color:var(--text)}
.card h2,.panel-head h2{font-weight:800}
.label,.metric-label,th,.eyebrow{letter-spacing:.08em}
.value,.metric-value{font-weight:800;letter-spacing:-.01em}
.changelog-entry[open],.progress-entry[open]{border-color:var(--accent)}

/* Teks, pil, kode, tabel */
.pill,.badge,.status-badge{background:var(--pill);color:var(--text);border-color:var(--card-line)}
code,.perf-note code{background:var(--inset2);color:var(--text)}
pre,.markdown-body pre,.deploy-workspace pre{background:var(--input);color:var(--text);border-color:var(--line)}
table{background:transparent}
th{color:var(--muted)}
.markdown-body th{background:var(--inset2);color:var(--text)}
.markdown-body blockquote{background:var(--inset2)}
tbody tr:hover,.advertising-page tbody tr:hover,.perf-table tbody tr:hover{background:var(--inset)}
.health-row>.bar,.perf-track{background:var(--track)}
.doc-sidebar a:hover,.doc-sidebar a.active,.advertising-jump a:hover{background:var(--nav-on);color:var(--text)}
.advertising-form-card[open] summary{background:var(--inset)}
.perf-chip,.perf-metric,.perf-stage,.perf-callout,.perf-form{background:var(--inset)}
.perf-table td{border-bottom-color:var(--line)}
.perf-table th{color:var(--muted)}

/* Formulir */
input,select,textarea,.advertising-page input,.advertising-page select,.advertising-page textarea{background:var(--input);color:var(--text);border-color:var(--card-line);border-radius:12px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
input[type="date"],input[type="month"],input[type="datetime-local"]{color-scheme:light}
:root[data-theme="dark"] input[type="date"],:root[data-theme="dark"] input[type="month"],:root[data-theme="dark"] input[type="datetime-local"]{color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:none}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,:root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:brightness(0) invert(1)}
.btn{border-radius:12px;font-weight:700}
.msg-ok{background:color-mix(in srgb,var(--good) 14%,transparent)}
.msg-err{background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* Dialog lead, simulator CS */
#lead-detail-dialog{background:var(--solid);color:var(--text);border-color:var(--card-line);border-radius:20px}
#lead-detail-dialog::backdrop{background:var(--scrim)}
.sim-session.active{background:var(--nav-on)}
.sim-system{border-style:dashed;border-color:var(--muted)}
.sim-agent{background:var(--surface2);border-color:var(--card-line)}

/* Halaman masuk */
.login-page{background:var(--bg)}
.login-card{background:var(--card);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:20px;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
.topbar-search{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
@media (max-width:760px){.app-sidebar{background:var(--solid)}}

/* HP: tanpa blur latar dan gradasi ikut menggulung bersama halaman, supaya scroll ringan. */
@media (max-width:860px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body::before{position:absolute;inset:0 0 auto 0;height:100vh}
  .app-topbar{background:var(--solid)}
}