/* ===== ESP demo polish v2 — Opus-5 review layer (14 Sep 2026) ===== */
/* Additive, theme-aware: uses app vars (--bg/--card/--line) so BOTH dark and light work. */

/* 1. depth: break cards off the page */
body{background:linear-gradient(rgba(43,86,158,.05),rgba(43,86,158,.05)),var(--bg)}
.maincol [class*="card"]{
  border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(15,23,42,.10);
  border-radius:14px;
  transition:box-shadow .18s ease, transform .18s ease;
}
.maincol [class*="card"]:hover{
  box-shadow:0 6px 18px rgba(15,23,42,.16);
  transform:translateY(-1px);
}

/* 2. primary buttons feel pressed-with-purpose */
.btn.primary{
  background:linear-gradient(180deg,#ff7a18,#ef5e06);
  border:none;
  box-shadow:0 3px 10px rgba(239,94,6,.28);
}
.btn.primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(239,94,6,.34);
}

/* 3. empty states become designed tiles */
.maincol .empty{
  padding:34px 22px;
  border:1px dashed var(--line);
  border-radius:14px;
  background:var(--card);
  text-align:center;
}

/* 4. tables breathe + row hover */
.maincol tr:hover td{background:rgba(24,80,200,.06)}
html[data-theme="dark"] .maincol tr:hover td{background:rgba(255,255,255,.05)}

/* 5. thin progress bars -> pills */
.maincol [class*="bar"]{border-radius:999px}

/* 6. focus glow (accessibility + polish) */
.maincol input:focus,
.maincol select:focus,
.maincol textarea:focus{
  outline:none;
  border-color:#f97316;
  box-shadow:0 0 0 3px rgba(249,115,22,.18);
}

/* ===== live activity feed (esp-demo.js mounts #espAct on the hub) ===== */
.esp-act{margin:18px 0 4px;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:var(--card);box-shadow:0 2px 10px rgba(15,23,42,.10)}
.esp-act-head{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#64748b;margin-bottom:10px}
.esp-act-sub{font-weight:400;text-transform:none;letter-spacing:0;color:#94a3b8}
.esp-act-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:esp-pulse 1.6s infinite}
@keyframes esp-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.esp-act-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);
  font-size:.85rem;animation:esp-in .3s ease}
.esp-act-row:last-child{border-bottom:none}
@keyframes esp-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.esp-act-ico{width:26px;height:26px;border-radius:8px;background:rgba(239,94,6,.12);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex:none}
.esp-act-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esp-act-ts{font-size:.72rem;color:#94a3b8;flex:none}
.esp-act-empty{font-size:.85rem;color:#64748b;padding:8px 4px}
@media (prefers-reduced-motion:reduce){.esp-act-row{animation:none}.esp-act-dot{animation:none}
  .maincol [class*="card"]{transition:none}}
/* ===== v4: DARK elevation — shadows on near-black read as nothing; dark depth = lighter surface + rim light ===== */
html[data-theme="dark"] .card,html[data-theme="dark"] .proj-card,html[data-theme="dark"] .search-panel,html[data-theme="dark"] .panel,html[data-theme="dark"] .card-panel{background-color:color-mix(in srgb,var(--card) 88%,#ffffff)!important;border:1px solid color-mix(in srgb,var(--line) 70%,#ffffff)!important}
html[data-theme="dark"] .hero-card,html[data-theme="dark"] .stat-card{background-color:color-mix(in srgb,var(--card) 88%,#ffffff)!important;border:1px solid color-mix(in srgb,var(--line) 70%,#ffffff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.4)!important}
html[data-theme="dark"] .btn,html[data-theme="dark"] .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 16px rgba(0,0,0,.5)!important}
html[data-theme="dark"] .btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 26px rgba(0,0,0,.55),0 0 24px var(--accent-glow)!important}
html[data-theme="dark"] .input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:rgba(0,0,0,.25)!important;border:1px solid color-mix(in srgb,var(--line) 60%,#ffffff)!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--muted)!important;opacity:1}

/* v4b: the blue info box inside the orange library card -> glass chip (harmonises); sidebar active pill */
.live{border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.55;border:1px solid rgba(255,255,255,.28);box-shadow:none}
html[data-theme="dark"] .live{border-color:rgba(255,255,255,.16)}

/* ===== v5: try-chips (search + ask) + roomier ask box ===== */
.esp-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.esp-chips-lab{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
button.esp-chip{font:600 .82rem/1.4 inherit;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.06);transition:transform .15s,border-color .15s,box-shadow .15s,color .15s}
button.esp-chip:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent);box-shadow:0 3px 10px rgba(240,130,53,.16)}
html[data-theme="dark"] button.esp-chip{background:rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--line) 70%,#ffffff)}
html[data-theme="dark"] button.esp-chip:hover{color:#ffb37a;border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 18px var(--accent-glow)}
#tab-ask .card{height:min(640px,88vh)!important}
#tab-ask #questionInput{padding:12px 14px;font-size:1rem}
@media (prefers-reduced-motion:reduce){button.esp-chip{transition:none}}

/* v7: DARK hero at ALL widths — old esp-upgrade layer paints an opaque white .esp-hero-main card inside the dark banner, hiding the headline (previous fix was phone-width only) */
html[data-theme="dark"] .esp-hero-main,body.dark .esp-hero-main{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-theme="dark"] .esp-hero h1,body.dark .esp-hero h1{color:#fff!important}
html[data-theme="dark"] .esp-hero-sub,body.dark .esp-hero-sub{color:#c3cbe0!important}
html[data-theme="dark"] .esp-hero-eyebrow,body.dark .esp-hero-eyebrow{color:#ffd8a8!important;border-color:rgba(255,255,255,.25)!important;background:rgba(255,255,255,.06)!important}
html[data-theme="dark"] .esp-hero-ctas .btn.outline,body.dark .esp-hero-ctas .btn.outline{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
html[data-theme="dark"] .esp-hero-ai,body.dark .esp-hero-ai{background:rgba(2,8,23,.5)!important;border-color:rgba(255,255,255,.12)!important}

/* v8: LIGHT mode hero — same white .esp-hero-main card killed the headline here too (dark fix v7 was half the job). Transparent in BOTH themes. */
.esp-hero-main{background:transparent!important;border:0!important;box-shadow:none!important}
/* light-mode separation: cards were washing into the light page */
html[data-theme="light"] .hero-card,html[data-theme="light"] .stat-card,html[data-theme="light"] .proj-card,html[data-theme="light"] .search-panel,html[data-theme="light"] .panel,html[data-theme="light"] .card-panel,html[data-theme="light"] .card{background:#fff!important;border:1px solid #e2e8f2!important;box-shadow:0 6px 18px rgba(15,23,42,.08)!important}
html[data-theme="light"] .btn-primary{box-shadow:0 4px 14px rgba(249,115,22,.35)!important}