:root{--bg:#08090a;--bg-soft:#0e0f11;--panel:rgba(20,21,24,.66);--border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.13);--txt:#ededed;--txt-dim:#a1a1aa;--txt-faint:#6b6b73;--brand:#34d399;--brand-2:#10b981;--brand-ink:#04130c;--accent:#34d399;--ok:#34d399;--warn:#f5b14c;--err:#f1647c;--shadow:0 24px 70px -28px rgba(0,0,0,.85)}
html.light{--bg:#f7f8f8;--bg-soft:#fff;--panel:rgba(255,255,255,.85);--border:rgba(10,14,12,.09);--border-strong:rgba(10,14,12,.16);--txt:#0a0b0d;--txt-dim:#51555c;--txt-faint:#898d94;--brand-ink:#fff;--shadow:0 18px 50px -22px rgba(16,40,30,.22)}
*{-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;background:radial-gradient(900px 520px at 12% -10%,rgba(52,211,153,.10),transparent 60%),radial-gradient(760px 460px at 108% 4%,rgba(255,255,255,.04),transparent 55%);pointer-events:none;z-index:0}

/* V17 Mobile Blur Glitch Fix: Solid background on side when small, no stacking blur. */
.glass,.card{background:var(--panel);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--border)}
@media (max-width: 767px) {
  #side{background:var(--bg-soft);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
.card{border-radius:18px}

.inp{width:100%;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--txt);font-size:14px;transition:.15s}
.inp::placeholder{color:var(--txt-faint)}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(52,211,153,.16)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .2s,background .2s,opacity .2s;user-select:none;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 8px 22px -10px rgba(52,211,153,.5);font-weight:650}
.btn-primary:hover{background:#3ee0a6}
.btn-ghost{background:var(--bg-soft);border-color:var(--border);color:var(--txt)}
.btn-ghost:hover{border-color:var(--border-strong);background:rgba(255,255,255,.04)}
.btn-danger{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.3)}
.btn-ok{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(34,197,94,.32)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--border)}
.pill-unused{background:rgba(52,211,153,.13);color:#6ee7b7;border-color:rgba(52,211,153,.3)}
.pill-used{background:rgba(255,255,255,.06);color:var(--txt-dim);border-color:var(--border-strong)}
.pill-expired{background:rgba(241,100,124,.14);color:#fca5b5;border-color:rgba(241,100,124,.3)}
.tab{padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;color:var(--txt-dim);transition:.15s;white-space:nowrap}
.tab:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.tab.active{background:var(--brand);color:var(--brand-ink);box-shadow:0 8px 20px -12px rgba(52,211,153,.6)}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;cursor:pointer;color:var(--txt-dim);font-weight:600;font-size:14px;transition:.15s;border:1px solid transparent}
.nav-item:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav-item.active{color:var(--txt);background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.26)}
.dot{width:8px;height:8px;border-radius:999px;flex:none}
.dot-run{background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.2);animation:pulse 1.6s infinite}
.dot-stop{background:var(--txt-faint)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 37%,rgba(255,255,255,.04) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite;border-radius:10px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.fade-in{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* V18 Rule 7: active cards transition + ~300ms fade-out on removal */
.acard{transition:opacity .3s ease, transform .3s ease}
.acard.removing{opacity:0;transform:translateX(20px);pointer-events:none}
.toast-item{animation:toastin .25s ease both}
@keyframes toastin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.svc-row{cursor:pointer;border:1px solid var(--border);border-radius:14px;padding:12px 14px;transition:.15s;background:var(--bg-soft)}
.svc-row:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.svc-row.sel{border-color:var(--brand);background:rgba(52,211,153,.10);box-shadow:0 0 0 3px rgba(52,211,153,.16)}
.stat-num{font-size:30px;font-weight:800;letter-spacing:-.02em}
table{border-collapse:collapse;width:100%}
.lk{color:var(--accent);text-decoration:none}
.lk:hover{text-decoration:underline}
.hide{display:none!important}

/* Modal CSS */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.2s ease; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-content { width: 100%; max-width: 400px; transform: scale(0.95); transition: 0.2s ease; }
.modal-overlay.open .modal-content { transform: scale(1); }

/* =========================================================================
   V19 FINAL — additive UI layer (SSE banner, KPI chips, command palette,
   countdown rings, one restrained accent gradient). Purely additive: nothing
   here overrides V18.5 selectors. Dark/light both covered via the same vars.
   ========================================================================= */

/* One restrained accent gradient (brand -> brand-2), reused sparingly. */
:root{--accent-grad:linear-gradient(135deg,var(--brand),var(--brand-2))}
.accent-grad{background:var(--accent-grad)}
/* A thin accent rule under the sticky header for a tasteful brand touch. */
header.glass{position:sticky}
header.glass:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent-grad);opacity:.5}

/* Offline / reconnecting banner (top, full width, glassy). */
.conn-banner{position:fixed;top:0;left:0;right:0;z-index:130;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;font-size:13px;font-weight:600;color:#04130c;background:var(--accent-grad);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.5);transform:translateY(-110%);transition:transform .3s ease}
.conn-banner.show{transform:translateY(0)}
.conn-banner.warn{background:linear-gradient(135deg,#f5b14c,#f08a3c);color:#1a1206}
.conn-banner.err{background:linear-gradient(135deg,#f1647c,#e0455f);color:#fff}
.conn-banner .cb-dot{width:8px;height:8px;border-radius:999px;background:currentColor;animation:pulse 1.4s infinite}

/* Sticky-header KPI chips. */
.kpi-chips{align-items:center;gap:6px;flex-wrap:nowrap}
.kpi-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid var(--border);background:var(--bg-soft);color:var(--txt-dim);white-space:nowrap}
.kpi-chip b{color:var(--txt);font-weight:700}
.kpi-chip.kpi-accent{border-color:rgba(52,211,153,.32);background:rgba(52,211,153,.10);color:#6ee7b7}
.kpi-chip.kpi-warn{border-color:rgba(241,100,124,.32);background:rgba(241,100,124,.10);color:#fca5b5}

/* Command palette (Ctrl/Cmd+K). Reuses .modal-overlay/.modal-content. */
.cmdk-card{max-width:560px;padding:0;overflow:hidden}
.cmdk-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cmdk-kbd{font-size:11px;font-weight:700;color:var(--txt-faint);border:1px solid var(--border);border-radius:8px;padding:3px 7px;white-space:nowrap}
.cmdk-input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:15px}
.cmdk-input::placeholder{color:var(--txt-faint)}
.cmdk-list{max-height:46vh;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--txt-dim);font-size:14px;font-weight:600}
.cmdk-item .cmdk-ic{width:22px;text-align:center;flex:none}
.cmdk-item .cmdk-sub{margin-left:auto;font-size:11px;font-weight:600;color:var(--txt-faint)}
.cmdk-item:hover,.cmdk-item.active{background:rgba(52,211,153,.12);color:var(--txt)}
.cmdk-empty{padding:18px;text-align:center;font-size:13px;color:var(--txt-faint)}
.cmdk-foot{display:flex;gap:16px;justify-content:flex-end;padding:9px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--txt-faint)}

/* Circular countdown ring on active-task cards (decoupled visual mirror of the
   numeric countdown; updated by the V19 ticker reading data-deadline/data-mode). */
.v19-ring{flex:none;width:38px;height:38px;display:block;transform:rotate(-90deg)}
.v19-ring .v19-ring-bg{stroke:var(--border-strong);fill:none;stroke-width:4}
.v19-ring .v19-ring-fg{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .3s}
.acard .v19-ring-wrap{flex:none;margin-right:10px}

/* =========================================================================
   V20 PART 2 — Live notification system (PURELY ADDITIVE).
   Two SEPARATE top-right systems:
     1) .toast-container      -> normal stacked toasts (auto-dismiss 4–5s)
     2) .status-toast-container -> ONE persistent status popup (stays while true)
   Placement matches the V20 spec exactly. Containers are pointer-events:none so
   they never block the header buttons; only transient toast cards opt back in.
   The persistent status popup stays pointer-events:none (display-only).
   ========================================================================= */
.toast-container,
.status-toast-container{
  position:fixed;
  top:16px;
  right:16px;
  z-index:999999;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;            /* container ignores clicks (don't block buttons) */
}
/* Status popup sits ABOVE the toast stack; toasts start just below it. */
.status-toast-container{z-index:1000000}
.toast-container{top:calc(16px + var(--status-h, 0px))}
#statusPopup.sp-hidden{display:none !important}

/* ---- normal toasts ---- */
.toast-container .toast-item{
  pointer-events:auto;            /* transient -> tappable to dismiss */
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 13px;border-radius:13px;
  background:var(--panel);border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  font-size:13px;font-weight:600;color:var(--txt);
  position:relative;overflow:hidden;cursor:pointer;
  animation:toastin .25s ease both;
}
.toast-item:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--txt-faint)}
.toast-item .t-ic{flex:none;font-size:14px;line-height:1.2;margin-top:.5px}
.toast-item .t-msg{min-width:0;line-height:1.35;word-break:break-word}
.toast-success:before{background:var(--ok)} .toast-success .t-ic{color:var(--ok)}
.toast-info:before{background:var(--brand)} .toast-info .t-ic{color:var(--brand)}
.toast-warn:before{background:var(--warn)} .toast-warn .t-ic{color:var(--warn)}
.toast-error:before{background:var(--err)} .toast-error .t-ic{color:var(--err)}
.toast-item.toast-out{opacity:0;transform:translateX(20px);transition:opacity .3s ease,transform .3s ease}

/* ---- persistent status popup (singleton) ---- */
.status-popup{
  pointer-events:none;            /* display-only -> never blocks header buttons */
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:14px;
  background:var(--panel);border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  position:relative;overflow:hidden;
  animation:sp-enter .28s ease both;
}
.status-popup .sp-icon{flex:none;font-size:16px;line-height:1}
.status-popup .sp-body{min-width:0}
.status-popup .sp-title{font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--txt);overflow-wrap:anywhere;word-break:break-word}
.status-popup .sp-cd{margin-top:1px;font-size:11.5px;font-weight:600;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.status-popup:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--txt-faint)}
.sp-run:before{background:var(--ok)}        .sp-run{border-color:rgba(52,211,153,.42)}
.sp-wait:before{background:var(--warn)}      .sp-wait{border-color:rgba(245,177,76,.42)}      .sp-wait .sp-cd{color:var(--warn)}
.sp-attn:before{background:var(--err)}       .sp-attn{border-color:rgba(241,100,124,.46)}     .sp-attn .sp-cd{color:#fca5b5}
.sp-cleanup:before{background:#60a5fa}       .sp-cleanup{border-color:rgba(96,165,250,.42)}   .sp-cleanup .sp-cd{color:#93c5fd}
.sp-done:before{background:var(--ok)}        .sp-done{border-color:rgba(52,211,153,.46)}
.sp-stop:before{background:var(--txt-faint)}
/* the running pill gets a soft pulsing dot feel via the green accent bar */
.sp-run{box-shadow:var(--shadow),0 0 0 1px rgba(52,211,153,.05)}

@keyframes sp-enter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---- mobile: full-width top, no max-width (per spec) ---- */
@media (max-width:640px){
  .toast-container,
  .status-toast-container{left:12px;right:12px;top:12px;max-width:none}
  .toast-container{top:calc(12px + var(--status-h, 0px))}
  .status-popup .sp-title{font-size:13px}
}

/* V21 — owner-readable Logs view: cards, level badges, expandable raw JSON. */
.log-row{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg-soft);position:relative;overflow:hidden}
.log-row:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--txt-faint)}
.log-info:before{background:var(--brand)}
.log-success:before{background:var(--ok)}
.log-warning:before{background:var(--warn)}
.log-error:before{background:var(--err)}
.log-row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.log-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;border:1px solid var(--border-strong);line-height:1.4}
.log-badge-info{background:rgba(52,211,153,.10);color:#6ee7b7;border-color:rgba(52,211,153,.30)}
.log-badge-success{background:rgba(52,211,153,.14);color:#6ee7b7;border-color:rgba(52,211,153,.34)}
.log-badge-warning{background:rgba(245,177,76,.14);color:#f5b14c;border-color:rgba(245,177,76,.34)}
.log-badge-error{background:rgba(241,100,124,.14);color:#fca5b5;border-color:rgba(241,100,124,.34)}
.log-cat{font-size:12.5px;font-weight:650;color:var(--txt)}
.log-prov{font-size:11px;font-weight:600;color:var(--txt-dim);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:999px;padding:1px 7px;font-family:ui-monospace,Menlo,monospace}
.log-time{margin-left:auto;font-size:11px;color:var(--txt-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.log-msg{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--txt-dim);overflow-wrap:anywhere;word-break:break-word}
.log-raw{margin-top:6px}
.log-raw>summary{cursor:pointer;font-size:11px;color:var(--txt-faint);user-select:none;list-style:none}
.log-raw>summary::-webkit-details-marker{display:none}
.log-raw>summary:before{content:'\25B8 ';color:var(--txt-faint)}
.log-raw[open]>summary:before{content:'\25BE '}
.log-raw pre{margin-top:6px;padding:8px 10px;background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:8px;font-size:11px;line-height:1.4;color:var(--txt-dim);overflow-x:auto;white-space:pre-wrap;word-break:break-word}
html.light .log-prov{background:rgba(10,14,12,.05)}
html.light .log-raw pre{background:rgba(10,14,12,.05)}
/* FalconOTP owner-configured catalog: configuration only, no fake live stock. */
#falconCatalogPanel .inp{font-size:12px}

/* =========================================================================
   V24.2 — Stage 2 premium UX layer (additive only).
   Attention banner, truth info-cards, empty states, mobile bottom bar.
   ========================================================================= */

/* Needs-attention banner: persistent, glassy amber, always above the fold. */
.attn-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(245,177,76,.38);background:rgba(245,177,76,.10);color:#f5c97e;
  box-shadow:0 8px 24px -16px rgba(245,177,76,.5)}
.attn-banner .attn-icon{flex:none;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;background:rgba(245,177,76,.22);color:#f5b14c;border:1px solid rgba(245,177,76,.4)}

/* Truth cards: exact speed/cancel behavior, no marketing. */
.info-card{border:1px solid var(--border);background:var(--bg-soft);border-radius:12px;padding:10px 12px}
.info-card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-dim);margin-bottom:6px}
.info-card-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.info-card-list li{font-size:11.5px;line-height:1.45;color:var(--txt-faint)}
.info-card-list b{color:var(--txt-dim);font-weight:650}

/* Friendly empty states (links, recent panel, etc.). */
.empty-state{text-align:center;padding:28px 16px;color:var(--txt-faint)}
.empty-state .empty-ic{font-size:22px;margin-bottom:6px;opacity:.6}

/* Mobile bottom action bar: one-thumb nav + Start/Stop. Hidden ≥768px. */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:140;display:flex;align-items:stretch;justify-content:space-around;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);border-top:1px solid var(--border)}
@supports not (background: color-mix(in srgb, red 50%, blue)){.bottom-bar{background:rgba(8,9,10,.92)}}
.bb-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;
  border:none;background:transparent;color:var(--txt-faint);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bb-btn .bb-ic{font-size:17px;line-height:1}
.bb-btn .bb-lb{font-size:10px;font-weight:700;letter-spacing:.02em}
.bb-btn.bb-active{color:var(--brand)}
.bb-btn.bb-main{color:#04130c;background:var(--accent-grad);border-radius:14px;margin:0 4px;box-shadow:0 6px 18px -8px rgba(52,211,153,.55)}
.bb-btn.bb-main.bb-stop{background:linear-gradient(135deg,#f1647c,#e0455f);color:#fff;box-shadow:0 6px 18px -8px rgba(241,100,124,.55)}
@media (min-width:768px){.bottom-bar{display:none}}