/* ══════════════════════════════════════════════════════════════════
   DEEP DECK v1 — override skin (TEST COPY ONLY, disposable)
   Reskins the shared Holon shell + Clean's own classes to the dark /
   bento "Deep Deck" template. Loaded LAST so it wins the cascade.
   Nothing here touches live Clean; delete the copy to remove it.
   ══════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

/* ── Re-map Clean's design tokens to dark (auto-flips every var() user) ── */
:root{
  --bg:#070d18; --surface:#0f1a2e; --border:#1f3458; --text:#eaf1fb; --muted:#7d90ab;
  --accent:#5b8dff; --accent-h:#3d6fe0; --green:#55f934; --red:#ff6b4a; --yellow:#f5b83d;
  --radius:12px; --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --brand-primary:#2a5298;
  --dd-void:#070d18; --dd-panel:#0f1a2e; --dd-2:#13233c; --dd-raise:#182b49;
  --dd-line:#1f3458; --dd-soft:#182740; --dd-ink:#eaf1fb; --dd-dim:#7d90ab; --dd-faint:#8492a8;
  --dd-holon:#55f934; --dd-blue:#5b8dff; --dd-navy:linear-gradient(135deg,#0d1f3c,#1e3a5f,#2a5298);
}

/* ── Base canvas ── */
html,body{background:transparent!important}
body{
  font-family:"Inter",-apple-system,sans-serif!important; color:var(--dd-ink)!important;
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(42,82,152,.30),transparent 60%),
    radial-gradient(760px 500px at -6% 110%,rgba(85,249,52,.08),transparent 55%),
    var(--dd-void)!important;
}
h1,h2,h3,h4,.panel-title,.overlay-title{font-family:"Space Grotesk","Inter",sans-serif!important}
.shell{background:transparent!important}
/* let the skin show even before the app fully boots */
body .main{visibility:visible!important}

/* ── Topbar → dark glass ── */
.topbar{
  background:color-mix(in srgb,var(--dd-void) 80%,transparent)!important;
  border-bottom:1px solid var(--dd-line)!important; backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:none!important;
}
.topbar-username,.topbar-course{color:var(--dd-ink-2,#c3d2ea)!important}
.topbar-course{background:var(--dd-panel)!important;border:1px solid var(--dd-line)!important;color:#c3d2ea!important}
.topbar-ham,.sb-toggle-btn,#sb-toggle-btn{
  background:var(--dd-panel)!important;border:1px solid var(--dd-line)!important;color:var(--dd-dim)!important}
.topbar-ham:hover{border-color:var(--dd-blue)!important;color:var(--dd-ink)!important}
.ada-size-btn{background:var(--dd-panel)!important;border:1px solid var(--dd-line)!important;color:var(--dd-dim)!important}
.ada-size-btn.active{background:#2a5298!important;border-color:#2a5298!important;color:#fff!important}
/* brand pill + green tag keep the navy/green identity (already on-brand) */

/* ── Sidebar → dark, green active rail ── */
.sidebar{
  background:linear-gradient(180deg,var(--dd-panel),var(--dd-void))!important;
  border:1px solid var(--dd-line)!important; box-shadow:var(--shadow)!important; border-radius:14px!important}
.nav-group-label{color:var(--dd-faint)!important}
.nav-btn{
  background:transparent!important;border:1px solid transparent!important;border-right:0!important;
  color:var(--dd-dim)!important;border-radius:9px!important}
.nav-btn:hover{background:var(--dd-2)!important;color:#c3d2ea!important;border-color:transparent!important}
.nav-btn.active{
  background:linear-gradient(90deg,rgba(85,249,52,.14),rgba(85,249,52,.02))!important;
  color:var(--dd-ink)!important;position:relative}
.nav-btn.active::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--dd-holon);box-shadow:0 0 12px rgba(85,249,52,.5)}
.nav-btn-hub{background:transparent!important;border-color:transparent!important;color:var(--dd-blue)!important}
.nav-btn-hub:hover{background:rgba(91,141,255,.10)!important}
.nav-badge{background:var(--dd-void)!important;color:var(--dd-dim)!important;border:1px solid var(--dd-soft)!important}
.sb-footer,.sb-user{color:var(--dd-ink)!important;border-color:var(--dd-soft)!important}
.sb-role{color:var(--dd-faint)!important}

/* ── Main pane + navy headers (headers already fit the palette) ── */
.main{background:var(--dd-panel)!important;border:1px solid var(--dd-line)!important;
  border-radius:14px!important;box-shadow:var(--shadow)!important}
.content{background:transparent!important}

/* ── Cards → bento tiles with lift ── */
.card,.panel{
  background:linear-gradient(160deg,var(--dd-panel),var(--dd-void))!important;
  border:1px solid var(--dd-line)!important;border-radius:14px!important;
  box-shadow:none!important;transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:var(--dd-blue)!important;box-shadow:var(--shadow)!important}
.panel-title{color:var(--dd-dim)!important}

/* ── Buttons ── */
.btn-primary{background:var(--dd-navy)!important;color:#fff!important;border:1px solid rgba(255,255,255,.08)!important}
.btn-primary:hover:not(:disabled){filter:none!important;box-shadow:0 8px 20px -8px rgba(42,82,152,.6)!important}
.btn-ghost{background:var(--dd-2)!important;color:#c3d2ea!important;border:1px solid var(--dd-line)!important}
.btn-ghost:hover:not(:disabled){background:var(--dd-raise)!important;border-color:var(--dd-blue)!important}
.btn-danger{background:rgba(255,107,74,.14)!important;color:#ff6b4a!important;border:1px solid rgba(255,107,74,.3)!important}
.btn-danger:hover:not(:disabled){background:rgba(255,107,74,.22)!important}

/* ── Stat cards ── */
.md-stat-card{background:linear-gradient(160deg,var(--dd-panel),var(--dd-void))!important;
  border:1px solid var(--dd-line)!important;box-shadow:none!important}
.md-stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)!important;border-color:var(--dd-blue)!important}
.md-stat-top-value{color:var(--dd-ink)!important}
.md-stat-label{color:#c3d2ea!important}.md-stat-sub{color:var(--dd-faint)!important}
/* gradient .stat-card tiles already read fine on dark; leave them */

/* ── Health banner ── */
.health-banner{background:linear-gradient(160deg,var(--dd-panel),var(--dd-void))!important;
  border:1px solid var(--dd-line)!important;box-shadow:none!important;color:var(--dd-ink)!important}

/* ── Asset-list toolbar + filter pills ── */
.al-toolbar{background:var(--dd-panel)!important;border-bottom:1px solid var(--dd-line)!important}
.al-stats{background:var(--dd-void)!important;border-bottom:1px solid var(--dd-line)!important}
.al-stat{border:1px solid var(--dd-line)!important}
.al-stat.active{box-shadow:0 0 0 2px var(--dd-blue)!important}
.al-stat-all{background:rgba(91,141,255,.14)!important;color:#9db8ff!important;border-color:rgba(91,141,255,.32)!important}
.al-stat-deleted{background:rgba(255,107,74,.14)!important;color:#ff8a70!important;border-color:rgba(255,107,74,.32)!important}
.al-stat-recovery{background:rgba(245,184,61,.14)!important;color:#f5c869!important;border-color:rgba(245,184,61,.32)!important}
.al-stat-renamed{background:rgba(91,141,255,.12)!important;color:#8fb4ff!important;border-color:rgba(91,141,255,.28)!important}
.al-stat-clean{background:rgba(85,249,52,.12)!important;color:#7bfa63!important;border-color:rgba(85,249,52,.3)!important}
.al-stat-other{background:var(--dd-2)!important;color:var(--dd-dim)!important;border-color:var(--dd-line)!important}
.al-stat-count{background:rgba(0,0,0,.35)!important}
.al-sort-btn{background:var(--dd-2)!important;border:1px solid var(--dd-line)!important;color:#c3d2ea!important}
.al-sort-btn:hover{background:var(--dd-raise)!important;border-color:var(--dd-blue)!important}
.al-sort-btn.active{background:rgba(91,141,255,.16)!important;border-color:var(--dd-blue)!important;color:#c9d9ff!important}

/* ── Inputs / selects / tables (broad safety net for deep views) ── */
input,select,textarea,.overlay-input,.rename-input{
  background:var(--dd-void)!important;border:1px solid var(--dd-line)!important;color:var(--dd-ink)!important}
input::placeholder,textarea::placeholder{color:var(--dd-faint)!important}
table{background:transparent!important;color:var(--dd-ink)!important}
th{color:var(--dd-dim)!important;border-color:var(--dd-line)!important}
td{border-color:var(--dd-soft)!important}
tr:hover td{background:var(--dd-2)!important}

/* ── Overlays / modals → dark ── */
.overlay{background:rgba(4,9,18,.6)!important}
.overlay-card{background:var(--dd-panel)!important;border:1px solid var(--dd-line)!important;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8)!important}
.overlay-title{color:var(--dd-ink)!important}.overlay-sub{color:var(--dd-dim)!important}
.overlay-steps{background:var(--dd-void)!important;color:#c3d2ea!important}
.overlay-logo{color:var(--dd-holon)!important}
.overlay-footer{color:var(--dd-faint)!important}

/* ── Misc ── */
.empty{color:var(--dd-dim)!important}
#error-banner{background:rgba(255,107,74,.12)!important;border:1px solid rgba(255,107,74,.3)!important;color:#ff8a70!important}
.module-locked{background:rgba(245,184,61,.14)!important;border-color:rgba(245,184,61,.3)!important;color:#f5c869!important}
.ignored-badge{background:var(--dd-2)!important;border-color:var(--dd-line)!important;color:var(--dd-dim)!important}
.watermark-skintest{position:fixed;bottom:12px;right:14px;z-index:9999;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.1em;color:var(--dd-faint);background:rgba(7,13,24,.7);
  border:1px solid var(--dd-line);border-radius:20px;padding:4px 11px;backdrop-filter:blur(6px)}

/* ── ADA controls tucked into a cog dropdown (test copy) ── */
.topbar-right{position:relative}
.dd-cog{width:34px;height:30px;border-radius:8px;border:1px solid var(--dd-line);background:var(--dd-panel);
  color:var(--dd-dim);cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.dd-cog:hover{color:var(--dd-holon);border-color:var(--dd-holon)}
.dd-cog.open{color:var(--dd-holon);border-color:var(--dd-holon);background:var(--dd-2)}
.dd-ada-panel{display:none;position:absolute;top:40px;right:0;z-index:400;background:var(--dd-panel);
  border:1px solid var(--dd-line);border-radius:12px;padding:12px;min-width:168px;
  box-shadow:0 22px 54px -18px rgba(0,0,0,.85)}
.dd-ada-panel.open{display:block;animation:ddpop .16s ease}
@keyframes ddpop{from{opacity:0;transform:translateY(-6px)}}
.dd-ada-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dd-dim);margin-bottom:9px}
.dd-ada-row{display:flex;gap:6px}
.dd-ada-panel .ada-size-btn{width:34px!important;height:32px!important;border-radius:8px!important;
  background:var(--dd-2)!important;border:1px solid var(--dd-line)!important;color:#c3d2ea!important;
  font-weight:700!important;cursor:pointer;transition:.15s;font-family:inherit}
.dd-ada-panel .ada-size-btn:hover{border-color:var(--dd-blue)!important;color:var(--dd-ink)!important;background:var(--dd-raise)!important}
.dd-ada-panel .ada-size-btn.dd-on{background:#2a5298!important;border-color:#2a5298!important;color:#fff!important}