*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold-100:#FFF4C0; --gold-200:#F5DD8A; --gold-300:#D4A94B;
  --gold-400:#B8893E; --gold-500:#8B6914; --gold-600:#6E4F0A; --gold-700:#4A3304;

  --gold-gradient: linear-gradient(135deg,#6E4F0A 0%,#B8893E 8%,#FFF4C0 20%,#F5DD8A 32%,#B8893E 45%,#8B6914 58%,#6E4F0A 70%,#B8893E 82%,#FFF4C0 92%,#8B6914 100%);
  --gold-gradient-text: linear-gradient(135deg,#6E4F0A 0%,#B8893E 12%,#FFF4C0 25%,#D4A94B 42%,#8B6914 60%,#B8893E 78%,#4A3304 100%);
  --gold-gradient-bright: linear-gradient(135deg,#FFF4C0 0%,#F5DD8A 25%,#D4A94B 50%,#B8893E 75%,#FFF4C0 100%);
  --gold-chrome-stroke: linear-gradient(180deg,#FFF4C0 0%,#D4A94B 30%,#6E4F0A 55%,#B8893E 80%,#F5DD8A 100%);

  --ruby-300:#C8525A; --ruby-400:#A11E2A; --ruby-500:#7D1620;
  --ruby-gradient: linear-gradient(135deg,#C8202E 0%,#8B1A1F 60%,#5A0F18 100%);

  --iri-gradient: linear-gradient(135deg,#FFB4D8 0%,#FFD4A8 18%,#C8F0E0 38%,#A8D8FF 58%,#C8A8FF 78%,#FFB0D8 100%);
  --iri-soft: linear-gradient(135deg,rgba(255,180,216,.35) 0%,rgba(255,212,168,.30) 25%,rgba(200,240,224,.30) 50%,rgba(168,216,255,.32) 75%,rgba(200,168,255,.35) 100%);
  --iri-edge: linear-gradient(135deg,#FFA8C8 0%,#FFD0A0 20%,#B8F0D8 40%,#A0D0FF 60%,#C0A8FF 80%,#FFA8C8 100%);

  --sapphire:#4470C9; --sapphire-soft: rgba(68,112,201,0.16);
  /* Calendar weekend tokens — fixed (NOT theme-overridden) so they stay legible
     on the constant light-gray yearly tiles regardless of light/dark theme. */
  --cal-sat:#2E5FBF; --cal-sun:#C0392B;
  --cal-sat-bg:rgba(46,95,191,0.16); --cal-sun-bg:rgba(192,57,43,0.14);
  /* Infrastructure-map node colours (brand-by-platform) */
  --supabase:#3ECF8E; --cloudflare:#F38020; --storage:#9B6CF0; --netlify:#00AD9F; --infra-app:#B8893E;

  --glass-1: rgba(255,255,255,0.05);
  --glass-2: rgba(255,255,255,0.08);
  --glass-3: rgba(255,255,255,0.15);
  --glass-deep: rgba(255,255,255,0.08);
  --glass-rim: rgba(255,255,255,0.85);
  --glass-rim-strong: rgba(255,255,255,1);

  --ink:#14121A; --ink-2:#2C2832; --ink-3:#5A5563;
  --muted:#8A848F; --muted-2:#B0AAB6;

  --line: rgba(20,18,26,0.10);
  --line-strong: rgba(20,18,26,0.18);
  --line-cool: rgba(20,18,26,0.06);

  --positive:#2E7D43; --negative:#A11E2A;

  --shadow-sm: 0 4px 14px rgba(60,50,90,.10), 0 1px 3px rgba(60,50,90,.06), inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.4);
  --shadow-md: 0 18px 44px rgba(50,40,80,.18), 0 6px 14px rgba(50,40,80,.10), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4);
  --shadow-lg: 0 32px 72px rgba(40,30,70,.22), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.5);
  --shadow-gold: 0 0 28px rgba(184,137,62,.35), 0 6px 18px rgba(120,90,30,.20), inset 0 1px 0 rgba(255,233,168,.7);
  --shadow-ruby: 0 0 22px rgba(200,32,46,.40), 0 6px 16px rgba(140,30,40,.20);
  --shadow-iri: 0 8px 28px rgba(200,168,255,.30), 0 4px 14px rgba(255,180,216,.25), 0 -4px 14px rgba(168,216,255,.20);

  --blur-1: none;
  --blur-2: none;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:22px;

  --body-bg:#F2F0EE;
  --badge-demo-color:#7040B0;
}

/* ── Base ── */
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background-color: var(--body-bg);
  background-image: url('bg-marble-gold.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(212,169,75,.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(242,230,210,.12) 0%, rgba(212,169,75,.04) 100%);
}
#root { position: relative; z-index: 1; }

/* ── Type helpers ── */
.serif         { font-family:'Cormorant Garamond', serif; font-weight:500; }
.serif-italic  { font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; }
.mono          { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* ── Gold text fill ── */
.gold-text {
  background: var(--gold-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.eyebrow-gold {
  background: var(--gold-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── App layout ── */
.app-shell { display:flex; flex-direction:column; min-height:100vh; max-width:1600px; width:100%; margin-inline:auto; }
.app-body  { flex:1; padding:16px; }
.page-content { max-width:none; }
.grid-2   { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.1fr); gap:16px; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.gap-16   { display:flex; flex-direction:column; gap:16px; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid var(--glass-rim);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin: 12px 16px 0;
}
.topbar-brand { display:flex; align-items:center; gap:12px; }
.brand-name   { font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; font-weight:600; color:var(--ink); }
.brand-sub    { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--glass-2); border:1.5px solid var(--glass-rim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; transition:all .18s;
}
.icon-btn:hover { background:var(--glass-3); box-shadow:var(--shadow-sm); }
.ruby-dot { position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--ruby-400); border:1.5px solid rgba(255,255,255,1); }
.user-chip {
  display:flex; align-items:center; gap:8px;
  padding:5px 12px 5px 5px;
  background:var(--glass-2); border:1.5px solid var(--glass-rim);
  border-radius:999px; cursor:pointer;
}
.avatar-initial {
  width:28px; height:28px; border-radius:50%;
  background:var(--gold-gradient);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:var(--gold-700);
}
.zoom-badge {
  padding:3px 8px; border-radius:4px;
  background:var(--glass-2); font-size:11px; font-weight:700;
  color:var(--ink-3); border:1px solid var(--line);
}

/* ── Nav pills ── */
.nav-pills {
  display:flex; align-items:center; gap:4px;
  padding:8px 16px; overflow-x:auto;
  scrollbar-width:none;
}
.nav-pills::-webkit-scrollbar { display:none; }
.nav-pill {
  flex-shrink:0;
  padding:7px 16px; border-radius:999px;
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  border:1.5px solid var(--glass-rim);
  background:var(--glass-1); color:var(--ink-3);
  cursor:pointer; position:relative; transition:all .18s;
}
.nav-pill::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 50%);
}
.nav-pill:hover { background:var(--glass-3); color:var(--ink); }
.nav-pill.active {
  background:var(--gold-gradient);
  border-color:var(--gold-500);
  color:var(--gold-700);
  font-weight:800;
  text-shadow:0 1px 0 rgba(255,244,192,.55);
  box-shadow:
    0 0 22px rgba(184,137,62,.45),
    0 4px 12px rgba(120,90,30,.30),
    inset 0 1.5px 0 rgba(255,244,192,.95),
    inset 0 -1.5px 0 rgba(74,51,4,.55);
}
.pill-dot {
  position:absolute; top:-3px; right:-3px;
  width:7px; height:7px; border-radius:50%;
  background:var(--ruby-400); border:1.5px solid rgba(255,255,255,1);
}

/* ── Card (glass, 4-layer shine) ── */
.card {
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.10);
  border:1.5px solid var(--glass-rim);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:20px;
}
.card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; mix-blend-mode:screen; z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.20) 8%, rgba(255,255,255,.04) 22%, transparent 38%, transparent 78%, rgba(255,255,255,.08) 95%, rgba(255,255,255,.30) 100%),
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.42) 39%, rgba(255,255,255,.12) 42%, transparent 48%, transparent 72%, rgba(255,255,255,.15) 78%, transparent 84%);
}
.card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; z-index:2;
  background:
    radial-gradient(circle 8px at 8px 8px, rgba(255,255,255,1) 0%, transparent 70%),
    radial-gradient(circle 8px at calc(100% - 8px) 8px, rgba(255,255,255,1) 0%, transparent 70%),
    radial-gradient(circle 8px at 8px calc(100% - 8px), rgba(255,255,255,.85) 0%, transparent 70%),
    radial-gradient(circle 8px at calc(100% - 8px) calc(100% - 8px), rgba(255,255,255,.85) 0%, transparent 70%);
}
.card-content { position:relative; z-index:3; }
.card-head    { margin-bottom:16px; display:flex; justify-content:space-between; align-items:flex-start; }
.card-sub     { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:4px; }
.card-title   { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:24px; color:var(--ink); }

/* ── Page head ── */
.page-head {
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.10);
  border:1.5px solid var(--glass-rim);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:28px 32px;
  margin-bottom:20px;
}
.page-head::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; mix-blend-mode:screen;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.20) 10%, rgba(255,255,255,.04) 26%, transparent 42%),
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 38%, rgba(255,255,255,.10) 42%, transparent 48%);
}
.page-head::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(circle 8px at 8px 8px, rgba(255,255,255,1) 0%, transparent 70%),
    radial-gradient(circle 8px at calc(100% - 8px) 8px, rgba(255,255,255,1) 0%, transparent 70%),
    radial-gradient(circle 8px at 8px calc(100% - 8px), rgba(255,255,255,.85) 0%, transparent 70%),
    radial-gradient(circle 8px at calc(100% - 8px) calc(100% - 8px), rgba(255,255,255,.85) 0%, transparent 70%);
}
.page-head-inner   { position:relative; z-index:3; }
.page-head-eyebrow { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px; }
.page-head h1      { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:64px; line-height:1.05; color:var(--ink); margin-bottom:10px; }
.page-head h1 .accent { background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-rule         { width:240px; height:1px; background:linear-gradient(90deg,var(--gold-400),transparent); margin:10px 0; }
.page-head-lede    { font-size:14px; color:var(--ink-3); max-width:560px; }
.page-head-actions { display:flex; gap:10px; margin-top:16px; }
.live-clock        { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:92px; line-height:1; background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.live-status       { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:var(--ink-3); }
.pulse-dot         { width:8px; height:8px; border-radius:50%; background:var(--positive); animation:pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

/* ── KPI grid ── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.kpi {
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.10);
  border:1.5px solid var(--glass-rim);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 20px 14px;
}
.kpi::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; mix-blend-mode:screen;
  background:
    linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.18) 10%, transparent 30%),
    linear-gradient(110deg, transparent 55%, rgba(255,255,255,.28) 65%, transparent 70%);
}
.kpi::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(circle 6px at 6px 6px, rgba(255,255,255,1) 0%, transparent 70%),
    radial-gradient(circle 6px at calc(100% - 6px) 6px, rgba(255,255,255,1) 0%, transparent 70%);
}
.kpi-inner      { position:relative; z-index:3; }
.kpi-label      { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.kpi-label-ruby { color:var(--ruby-400); }
.kpi-value      { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:46px; line-height:1; color:var(--ink); }
.kpi-value .currency { background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kpi-trend      { display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.trend-up       { background:rgba(46,125,67,.12); color:var(--positive); }
.trend-down     { background:rgba(161,30,42,.12); color:var(--negative); }
.trend-flat     { background:rgba(20,18,26,.08); color:var(--muted); }
.kpi-ruby       { box-shadow:var(--shadow-sm), inset 0 0 0 1.5px rgba(161,30,42,.25); }

/* ── Buttons ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 22px; border-radius:var(--radius-md);
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:800;
  background:var(--gold-gradient); color:var(--gold-700);
  text-shadow:0 1px 0 rgba(255,244,192,.55);
  box-shadow:
    0 0 22px rgba(184,137,62,.45),
    0 4px 12px rgba(120,90,30,.30),
    inset 0 1.5px 0 rgba(255,244,192,.95),
    inset 0 -1.5px 0 rgba(74,51,4,.55);
  border:none; cursor:pointer; transition:all .18s;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 0 28px rgba(184,137,62,.55),0 6px 18px rgba(120,90,30,.35),inset 0 1.5px 0 rgba(255,244,192,.95),inset 0 -1.5px 0 rgba(74,51,4,.55); }
.btn-ghost   { padding:8px 18px; border-radius:var(--radius-md); background:transparent; border:1.5px solid var(--line-strong); color:var(--ink-3); font-size:13px; font-weight:600; cursor:pointer; transition:all .18s; }
.btn-ghost:hover { background:var(--glass-2); border-color:var(--glass-rim); }
.btn-outline { padding:8px 18px; border-radius:var(--radius-md); background:var(--glass-1); border:1.5px solid var(--glass-rim); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); transition:all .18s; }

/* ── Badges ── */
.badge            { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.badge-paid       { background:rgba(46,125,67,.14); color:var(--positive); }
.badge-unpaid     { background:rgba(184,137,62,.15); color:var(--gold-600); }
.badge-overdue    { background:rgba(161,30,42,.14); color:var(--ruby-400); }
.badge-lead       { background:var(--sapphire-soft); color:var(--sapphire); }
.badge-prospect   { background:rgba(184,137,62,.15); color:var(--gold-600); }
.badge-demo       { background:rgba(130,80,180,.14); color:var(--badge-demo-color); }
.badge-proposal   { background:rgba(184,137,62,.15); color:var(--gold-600); }
.badge-onboarding { background:rgba(46,125,67,.12); color:var(--positive); }
.badge-active     { background:rgba(184,137,62,.15); color:var(--gold-600); }
.badge-churned    { background:rgba(20,18,26,.08); color:var(--muted); }

/* ── Table ── */
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; padding:10px 14px; text-align:left; border-bottom:1.5px solid var(--line); }
.tbl td { padding:10px 14px; border-bottom:1px solid var(--line-cool); color:var(--ink-2); }
.tbl tr:nth-child(even) td { background:rgba(255,255,255,0.15); }
.tbl tr:hover td { background:rgba(184,137,62,0.10); }

/* ── Pipeline kanban ── */
.pipeline { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.pipeline::-webkit-scrollbar { height:4px; }
.pipeline::-webkit-scrollbar-thumb { background:var(--glass-3); border-radius:2px; }
.kanban-col { flex-shrink:0; width:200px; background:rgba(255,255,255,.06); border:1.5px solid var(--glass-rim); border-radius:var(--radius-lg); padding:12px; }
.kanban-col-head { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.kanban-count { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:22px; color:var(--ink); }
.kanban-card  { background:rgba(255,255,255,.10); border:1.5px solid var(--glass-rim); border-radius:var(--radius-md); padding:10px 12px; margin-bottom:8px; }
.kanban-name  { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:var(--ink); margin-bottom:4px; }
.kanban-meta  { font-size:11px; color:var(--muted); border-top:1px dashed var(--line); padding-top:6px; margin-top:6px; }
.kanban-val   { background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; font-weight:600; }

/* ── Calendar ── */
.calendar-grid { display:grid; grid-template-columns:40px repeat(7,1fr); gap:2px; font-size:12px; }
.cal-header    { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); text-align:center; padding:6px 0; }
.cal-wk        { font-size:10px; color:var(--muted); text-align:right; padding:4px 6px; line-height:2.4; }
.cal-day       { text-align:center; padding:4px; border-radius:6px; cursor:pointer; min-height:28px; }
.cal-day:hover { background:var(--glass-2); }
.cal-day-num   { font-family:'Cormorant Garamond',serif; font-size:15px; }
.cal-today .cal-day-num { background:var(--gold-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
.cal-event         { border-radius:3px; padding:2px 5px; font-size:10px; font-weight:600; margin-top:2px; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cal-event-sapphire{ background:var(--sapphire-soft); color:var(--sapphire); border-left:2px solid var(--sapphire); }
.cal-event-gold    { background:rgba(184,137,62,.15); color:var(--gold-600); border-left:2px solid var(--gold-400); }
.cal-event-ruby    { background:rgba(161,30,42,.12); color:var(--ruby-400); border-left:2px solid var(--ruby-400); }

/* ── Diary ── */
.diary-strip       { display:grid; grid-template-columns:60px 1fr 1fr 1fr; gap:12px; }
.diary-time-col    { padding-top:28px; }
.diary-time-slot   { font-size:11px; color:var(--muted); height:56px; line-height:56px; text-align:right; padding-right:10px; }
.diary-day-head    { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:28px; color:var(--ink); margin-bottom:4px; }
.diary-day-label   { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.diary-event       { border-radius:6px; padding:6px 10px; font-size:12px; margin-bottom:4px; }
.diary-event-gold  { background:rgba(184,137,62,.14); border-left:3px solid var(--gold-400); }
.diary-event-sapphire { background:var(--sapphire-soft); border-left:3px solid var(--sapphire); }
.diary-now-line    { position:relative; height:2px; background:linear-gradient(90deg,var(--gold-400),transparent); margin:2px 0; }
.diary-now-dot     { position:absolute; left:-4px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--gold-400); box-shadow:0 0 8px var(--gold-400); animation:pulseDot 1.6s infinite; }

/* ── Funnel ── */
.funnel       { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.funnel-row   { display:flex; align-items:center; gap:12px; }
.funnel-label { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); width:120px; text-align:right; }
.funnel-bar-wrap { flex:1; height:28px; background:var(--glass-2); border-radius:4px; overflow:hidden; }
.funnel-bar   { height:100%; background:var(--gold-gradient); border-radius:4px; transition:width .4s; }
.funnel-pct   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--ink-3); width:42px; }

/* ── Doc grid ── */
.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.doc-card {
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.10); border:1.5px solid var(--glass-rim);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:18px 14px 14px; cursor:pointer; transition:all .18s;
}
.doc-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.doc-card::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; mix-blend-mode:screen;
  background:linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.15) 12%, transparent 30%);
}
.doc-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(circle 6px at 6px 6px, rgba(255,255,255,1) 0%, transparent 70%),
    radial-gradient(circle 6px at calc(100% - 6px) 6px, rgba(255,255,255,1) 0%, transparent 70%);
}
.doc-icon { font-size:32px; margin-bottom:10px; }
.doc-name { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:var(--ink); }

/* ── Provisioning steps ── */
.prov-steps { display:flex; flex-direction:column; gap:12px; }
.prov-step  { display:flex; align-items:center; gap:14px; }
.prov-num   { width:36px; height:36px; border-radius:50%; border:2px solid var(--glass-rim); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--ink-3); flex-shrink:0; }
.prov-num.done   { background:var(--gold-gradient); border-color:var(--gold-500); color:var(--gold-700); }
.prov-num.active { border-color:var(--gold-400); box-shadow:0 0 12px rgba(184,137,62,.4); color:var(--gold-500); }
.prov-label      { font-size:14px; color:var(--ink-2); }
.prov-label.done { color:var(--muted); text-decoration:line-through; }

/* ── Form / Settings ── */
.field        { margin-bottom:16px; }
.field label  { display:block; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.input        { width:100%; padding:9px 13px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:rgba(255,255,255,.55); font-size:14px; color:var(--ink); outline:none; transition:border-color .18s; }
.input:focus  { border-color:var(--gold-400); box-shadow:0 0 0 3px rgba(184,137,62,.15); }
.switch       { display:inline-flex; align-items:center; width:44px; height:24px; border-radius:999px; background:var(--line-strong); cursor:pointer; position:relative; transition:background .2s; }
.switch.on    { background:var(--gold-gradient); }
.switch-knob  { position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,1); box-shadow:0 1px 4px rgba(0,0,0,.2); transition:left .2s; }
.switch.on .switch-knob { left:23px; }

/* ── Settings tabs ── */
.tabs     { display:flex; gap:0; border-bottom:1.5px solid var(--line); margin-bottom:20px; }
.tab      { padding:9px 18px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; transition:all .18s; }
.tab.active { color:var(--gold-500); border-bottom-color:var(--gold-400); }

/* ── Home page grid ── */
.home-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; }
.home-main { display:flex; flex-direction:column; gap:16px; }
.home-side { display:flex; flex-direction:column; gap:16px; }
.page-head-split { display:flex; justify-content:space-between; align-items:flex-start; }
.page-head-left  { flex:1; }
.page-head-right { text-align:right; flex-shrink:0; padding-top:4px; }

/* ── YouTube sidebar card (home page launcher) ── */
.yt-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--gold-400);
  box-shadow: 0 0 12px rgba(184,137,62,.18);
  background: #000;
}

/* ── Persistent YouTube bar (bottom of app-shell, always mounted) ── */
.app-body { padding-bottom: 58px; }   /* prevent content hiding behind bar */

.yt-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: rgba(20,18,26,0.96);
  border-top: 1px solid rgba(184,137,62,.25);
  backdrop-filter: none;             /* no blur — house rule */
}
.yt-bar.yt-bar-active {
  border-top-color: rgba(184,137,62,.55);
}
.yt-bar-panel {
  overflow: hidden;
  transition: height 0.25s ease;
  background: #000;
}
.yt-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 46px;
}
.yt-bar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-400);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.yt-bar-input {
  flex: 1;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: #e8e4de;
  outline: none;
  min-width: 0;
}
.yt-bar-input::placeholder { color: rgba(255,255,255,.3); }
.yt-bar-input:focus { border-color: var(--gold-400); }
.yt-bar-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #c8c0b4;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.yt-bar-btn:hover { background: rgba(184,137,62,.18); color: var(--gold-400); }
.yt-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.5);
  flex-shrink: 0;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%,100% { opacity:1; } 50% { opacity:.5; }
}
.yt-vol-icon {
  color: var(--muted, #888);
  flex-shrink: 0;
}
.yt-vol-slider {
  width: 90px;
  flex-shrink: 0;
  accent-color: var(--gold-400);
  cursor: pointer;
}
.yt-vol-pct {
  font-size: 11px;
  color: var(--muted, #888);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Activity feed ── */
.activity-list { display:flex; flex-direction:column; gap:0; }
.activity-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-cool); }
.activity-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.activity-dot-gold    { background:var(--gold-400); box-shadow:0 0 8px rgba(184,137,62,.4); }
.activity-dot-sapphire{ background:var(--sapphire); box-shadow:0 0 8px rgba(68,112,201,.3); }
.activity-dot-ruby    { background:var(--ruby-400); box-shadow:0 0 8px rgba(161,30,42,.3); }
.activity-body { flex:1; font-size:12px; color:var(--ink-2); line-height:1.5; }
.activity-who  { font-weight:700; }
.activity-target{ font-weight:700; font-style:italic; }
.activity-time { font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; }

/* ── Agents module ── */
.agents-neural-banner {
  background:rgba(255,255,255,0.55); border:1px solid var(--line);
  border-radius:var(--radius-xl); padding:20px 28px; margin-bottom:20px;
  display:flex; align-items:center; gap:20px;
}
.neural-info { flex:1; }
.neural-label { font-size:9px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold-500); margin-bottom:4px; }
.neural-status { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.neural-status em { font-style:italic; color:var(--gold-400); }
.neural-desc { font-size:11px; color:var(--muted); line-height:1.5; }
.neural-stats { display:flex; gap:20px; margin-top:10px; }
.neural-stat { font-size:10px; font-weight:600; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
.neural-stat strong { color:var(--gold-500); font-size:14px; display:block; letter-spacing:0; font-family:'Cormorant Garamond',serif; }
.agents-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:14px; }
.agents-header .ag-title { font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3vw,2.3rem); font-weight:500; }
.agents-header .ag-title em { font-style:italic; font-weight:400; color:var(--gold-400); }
.agents-meta { font-size:12px; color:var(--muted); letter-spacing:0.04em; }
.agents-meta strong { color:var(--ink-2); }
.agents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* ── Agent card — full-bleed GIF cube ─────────────────────── */
.agent-card {
  background:#050310; border:1px solid rgba(184,137,62,0.25);
  border-radius:var(--radius-xl); padding:0;
  box-shadow:0 8px 32px rgba(0,0,0,.45); transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1);
  position:relative; overflow:hidden;
  min-height:380px; display:flex; flex-direction:column;
}
.agent-card:hover { transform:translateY(-3px); box-shadow:0 12px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(184,137,62,.45); }
.agent-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:10;
  background:var(--gold-gradient); opacity:0.6;
}
.agent-card.working::before { opacity:1; animation:agentStripe 1.8s linear infinite; background-size:200% 100%; }
@keyframes agentStripe { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }
/* Gradient overlay — transparent at top, opaque from 70% down */
.agent-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,
    rgba(5,3,16,0.02) 0%,
    rgba(5,3,16,0.05) 55%,
    rgba(5,3,16,0.88) 72%,
    rgba(5,3,16,0.98) 100%);
}
/* Content layer — sits above overlay */
.agent-content {
  position:relative; z-index:3;
  display:flex; flex-direction:column;
  height:100%; min-height:300px; padding:16px;
  flex:1;
}

.agent-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:0; }
.agent-info { flex:1; min-width:0; }
.agent-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:#F0EDE8; margin-bottom:2px; }
.agent-role { font-size:9px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:rgba(240,237,232,0.55); }
.agent-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; font-size:9px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  border-radius:100px; border:1px solid; flex-shrink:0;
}
.agent-badge.idle    { color:var(--muted); border-color:var(--line-strong); background:rgba(138,132,143,.06); }
.agent-badge.working { color:var(--gold-500); border-color:var(--gold-400); background:rgba(184,137,62,.08); }
.agent-badge.done    { color:var(--positive); border-color:var(--positive); background:rgba(46,125,67,.08); }
.agent-badge.error   { color:var(--negative); border-color:var(--negative); background:rgba(161,30,42,.08); }
.ag-dot { width:6px; height:6px; border-radius:50%; }
.idle .ag-dot    { background:var(--muted-2); }
.working .ag-dot { background:var(--gold-400); animation:pulse 1.4s infinite; }
.done .ag-dot    { background:var(--positive); }
.error .ag-dot   { background:var(--negative); }
.agent-task { font-size:12px; color:rgba(240,237,232,0.65); margin-bottom:14px; line-height:1.5; min-height:36px; }
.agent-task strong { color:#F0EDE8; font-weight:600; }
.agent-progress-fill { height:100%; border-radius:2px; background:var(--gold-gradient-bright); transition:width 0.8s ease; }
.agent-card.working .agent-progress-fill { animation:agentProgPulse 2.2s ease-in-out infinite; }
@keyframes agentProgPulse { 0%{opacity:.7} 50%{opacity:1;filter:brightness(1.15)} 100%{opacity:.7} }
.agent-footer { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid rgba(255,255,255,0.12); flex-wrap:wrap; gap:8px; }
.agent-stat { font-size:10px; color:rgba(240,237,232,0.50); letter-spacing:0.06em; }
.agent-stat strong { color:rgba(240,237,232,0.80); font-weight:600; }
.agent-action-btn {
  padding:5px 12px; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid rgba(184,137,62,0.45); border-radius:100px; color:var(--gold-300);
  background:rgba(184,137,62,0.12); transition:all 0.2s; cursor:pointer;
}
.agent-action-btn:hover { background:rgba(184,137,62,0.25); color:var(--gold-200); border-color:var(--gold-400); }
.agent-progress-bar { height:3px; background:rgba(255,255,255,0.10); border-radius:2px; overflow:hidden; margin-bottom:12px; }
.agent-scan-line {
  position:absolute; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(184,137,62,.6),transparent);
  pointer-events:none; opacity:0; top:0;
}
.agent-card.working .agent-scan-line { opacity:1; animation:agentScan 2.8s linear infinite; }
@keyframes agentScan { 0%{top:0;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} }
/* ── Agent GIF — full-bleed robot, each starts at different frame ── */
.agent-gif {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:0; opacity:1;
}
.agent-gif-ph { background:#050310; }   /* placeholder while gif loads */

/* Monitor overlay — sits over the robot's screen area */
.agent-monitor {
  position:absolute; top:14%; left:10%; right:10%; height:44%;
  z-index:3; overflow:hidden; border-radius:3px;
  background:rgba(2,4,16,0.72);
  box-shadow:0 0 18px rgba(0,80,160,0.20), inset 0 0 8px rgba(0,40,100,0.15);
}

/* Monitor — shared outer wrapper (flex column) */
.am {
  width:100%; height:100%;
  font-family:'JetBrains Mono',monospace; font-size:8px; line-height:1.5;
  color:#506070; padding:5px 8px 4px; overflow:hidden;
  display:flex; flex-direction:column;
}
.am-head { font-size:8px; font-weight:700; letter-spacing:0.1em; color:#8090A8;
           display:flex; align-items:center; gap:5px; margin-bottom:1px; flex-shrink:0; }
.am-live { font-size:7px; letter-spacing:0.18em; color:#FF6B6B;
           animation:amBlink 1.4s ease-in-out infinite; }
@keyframes amBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.am-line { height:1px; background:rgba(255,255,255,0.07); margin:2px 0; flex-shrink:0; }
.am-foot { font-size:7px; color:#3A5060; padding-top:2px; flex-shrink:0; }
.am-cursor { animation:amCursor 0.9s step-end infinite; }
@keyframes amCursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* Icon-centric centre zone */
.am-center {
  flex:1; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.am-icon { font-size:24px; animation:amIconPulse 2s ease-in-out infinite; line-height:1; }
@keyframes amIconPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }

/* Widget — progress bars, bar charts */
.am-widget { width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; }
.am-track  { width:80%; height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
.am-proc-fill  { height:100%; animation:amProcAnim 2.2s ease-in-out infinite; }
@keyframes amProcAnim  { 0%{width:20%} 50%{width:90%} 100%{width:20%} }
.am-clock-fill { height:100%; animation:amClockFill 8s linear infinite; }
@keyframes amClockFill { 0%{width:20%} 100%{width:95%} }
.am-doc-sweep  { height:100%; animation:amDocSweep 1.8s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes amDocSweep  { 0%{width:0} 70%{width:67%} 100%{width:67%} }
.am-wlabel { font-size:7px; letter-spacing:0.12em; opacity:0.7; }
.am-wfoot  { font-size:7px; color:#506070; }

/* Vertical bar charts (health + MRR) */
.am-bars-wrap { display:flex; gap:3px; align-items:flex-end; height:34px; width:80%; }
.am-hb-col { flex:1; height:100%; display:flex; align-items:flex-end;
             background:rgba(255,255,255,0.05); border-radius:2px 2px 0 0; overflow:hidden; }
.am-hb-fill { width:100%; border-radius:2px 2px 0 0; transition:height 0.5s; }
@keyframes amRisk { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Lead Scout — screen GIF + blue scan beam */
.am-scan-wrap { position:relative; width:100%; height:100%; overflow:hidden; }
.am-beam {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(74,158,255,0.85),transparent);
  box-shadow:0 0 10px rgba(74,158,255,0.5);
  animation:amScan 2s linear infinite; z-index:10;
}
@keyframes amScan { 0%{top:0;opacity:0} 4%{opacity:1} 96%{opacity:1} 100%{top:100%;opacity:0} }

@media(max-width:1100px) { .agents-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:700px)  { .agents-grid{grid-template-columns:1fr;} .agents-neural-banner{flex-direction:column;align-items:flex-start;} }

/* ══════════════════════════════════════════════════════════════════════
   THEME PICKER UI
══════════════════════════════════════════════════════════════════════ */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.theme-card {
  position:relative; border-radius:var(--radius-lg); border:2px solid var(--line);
  overflow:hidden; cursor:pointer; transition:all 0.25s; background:var(--glass-1);
}
.theme-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.theme-card.active { border-color:var(--gold-400); box-shadow:var(--shadow-gold); }
.theme-preview { height:120px; padding:10px; position:relative; overflow:hidden; }
.theme-preview-accent { position:absolute; top:0; left:0; right:0; height:3px; }
.theme-preview-topbar {
  height:16px; border-radius:4px; border:1px solid rgba(128,128,128,.15);
  display:flex; align-items:center; justify-content:space-between; padding:0 6px;
  margin-bottom:6px;
}
.theme-preview-logo { width:8px; height:8px; border-radius:50%; }
.theme-preview-nav { display:flex; gap:3px; }
.theme-preview-nav span { width:12px; height:3px; border-radius:2px; }
.theme-preview-body { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; }
.theme-mini-card { border-radius:4px; padding:8px 6px; border:1px solid rgba(128,128,128,.08); }
.theme-card-info { padding:12px 14px; }
.theme-card-name {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:17px; color:var(--ink); margin-bottom:2px;
}
.theme-card-desc { font-size:11px; color:var(--muted); line-height:1.4; }
.theme-card-check {
  position:absolute; top:8px; right:8px; width:22px; height:22px;
  border-radius:50%; background:var(--gold-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--gold-700);
  box-shadow:0 2px 8px rgba(184,137,62,.4);
}

/* ══════════════════════════════════════════════════════════════════════
   THEME OVERRIDES
══════════════════════════════════════════════════════════════════════ */

/* ── Shared: Dark theme base (Obsidian + Midnight) ── */
:is(html[data-theme="obsidian"], html[data-theme="midnight"]) {
  --ink:#F0EDE8; --ink-2:#D8D3CC; --ink-3:#A8A2A0;
  --muted:#706A6E; --muted-2:#585258;
  --glass-1:rgba(255,255,255,0.04); --glass-2:rgba(255,255,255,0.07);
  --glass-3:rgba(255,255,255,0.12); --glass-deep:rgba(255,255,255,0.05);
  --glass-rim:rgba(255,255,255,0.12); --glass-rim-strong:rgba(255,255,255,0.22);
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.15); --line-cool:rgba(255,255,255,0.04);
  --positive:#66BB6A; --negative:#EF5350;
  --ruby-400:#E57373; --ruby-300:#EF9A9A;
  --shadow-sm:0 4px 14px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.25),inset 0 1.5px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.03);
  --shadow-md:0 18px 44px rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.30),inset 0 1.5px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.04);
  --shadow-lg:0 32px 72px rgba(0,0,0,.55),inset 0 1.5px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.05);
  --shadow-gold:0 0 28px rgba(184,137,62,.25),0 6px 18px rgba(120,90,30,.15),inset 0 1px 0 rgba(255,233,168,.3);
}

/* Dark body — remove marble, keep gold ambient */
:is([data-theme="obsidian"], [data-theme="midnight"]) body { background-image:none; }
:is([data-theme="obsidian"], [data-theme="midnight"]) body::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(184,137,62,.03) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(184,137,62,.015) 100%);
}

/* Dark: dim glass-card corner highlights */
:is([data-theme="obsidian"], [data-theme="midnight"]) .card::after,
:is([data-theme="obsidian"], [data-theme="midnight"]) .page-head::after {
  background:
    radial-gradient(circle 8px at 8px 8px, rgba(255,255,255,.12) 0%, transparent 70%),
    radial-gradient(circle 8px at calc(100% - 8px) 8px, rgba(255,255,255,.12) 0%, transparent 70%),
    radial-gradient(circle 8px at 8px calc(100% - 8px), rgba(255,255,255,.08) 0%, transparent 70%),
    radial-gradient(circle 8px at calc(100% - 8px) calc(100% - 8px), rgba(255,255,255,.08) 0%, transparent 70%);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .kpi::after {
  background:
    radial-gradient(circle 6px at 6px 6px, rgba(255,255,255,.10) 0%, transparent 70%),
    radial-gradient(circle 6px at calc(100% - 6px) 6px, rgba(255,255,255,.10) 0%, transparent 70%);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .doc-card::after {
  background:
    radial-gradient(circle 6px at 6px 6px, rgba(255,255,255,.10) 0%, transparent 70%),
    radial-gradient(circle 6px at calc(100% - 6px) 6px, rgba(255,255,255,.10) 0%, transparent 70%);
}

/* Dark: soften glass shine */
:is([data-theme="obsidian"], [data-theme="midnight"]) .card::before,
:is([data-theme="obsidian"], [data-theme="midnight"]) .page-head::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 8%, rgba(255,255,255,.01) 22%, transparent 38%, transparent 78%, rgba(255,255,255,.02) 95%, rgba(255,255,255,.06) 100%),
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.10) 39%, rgba(255,255,255,.03) 42%, transparent 48%, transparent 72%, rgba(255,255,255,.04) 78%, transparent 84%);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .kpi::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 10%, transparent 30%),
    linear-gradient(110deg, transparent 55%, rgba(255,255,255,.06) 65%, transparent 70%);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .doc-card::before {
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 12%, transparent 30%);
}

/* Dark: component background overrides */
:is([data-theme="obsidian"], [data-theme="midnight"]) .agent-card {
  background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .agents-neural-banner {
  background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .agent-action-btn {
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:var(--ink-3);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .input {
  background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .nav-pill::after {
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .kanban-col {
  background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.10);
}
:is([data-theme="obsidian"], [data-theme="midnight"]) .kanban-card {
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.10);
}

/* ── Obsidian: charcoal-black ── */
html[data-theme="obsidian"] { --body-bg:#0F0D12; }

/* ── Midnight: deep navy ── */
html[data-theme="midnight"] { --body-bg:#0C1829; }
[data-theme="midnight"] body::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(68,112,201,.04) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(68,112,201,.02) 100%);
}

/* ── Champagne: warm ivory ── */
html[data-theme="champagne"] {
  --body-bg:#FAF5EE;
  --ink:#2E251E; --ink-2:#4A3F35; --ink-3:#6E6358;
  --muted:#9E9488; --muted-2:#B8AEA2;
  --line:rgba(94,75,55,0.10); --line-strong:rgba(94,75,55,0.18); --line-cool:rgba(94,75,55,0.06);
}
[data-theme="champagne"] body {
  background-image:none;
  background-color:var(--body-bg);
}
[data-theme="champagne"] body::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(196,144,104,.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(250,245,238,.12) 0%, rgba(196,144,104,.03) 100%);
}

/* ── Slate: cool gray ── */
html[data-theme="slate"] {
  --body-bg:#E4E2DF;
  --ink:#1E1D1C; --ink-2:#383635; --ink-3:#5A5856;
  --muted:#8A8785; --muted-2:#A5A2A0;
  --line:rgba(30,29,28,0.10); --line-strong:rgba(30,29,28,0.18); --line-cool:rgba(30,29,28,0.06);
}
[data-theme="slate"] body {
  background-image:none;
  background-color:var(--body-bg);
}
[data-theme="slate"] body::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(139,128,112,.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(228,226,223,.12) 0%, rgba(139,128,112,.03) 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   MONTHLY CALENDAR (mcal-*)
══════════════════════════════════════════════════════════════════════ */
.mcal-grid      { display:grid; grid-template-columns:28px repeat(7,1fr); }
.mcal-header    { text-align:center; font-size:12px; font-weight:700; letter-spacing:0.1em;
                  color:var(--muted); padding:6px 0; border-bottom:1.5px solid var(--line); }
.mcal-wk        { font-size:9px; color:var(--muted-2); font-weight:700; padding:8px 3px 0;
                  text-align:right; letter-spacing:0.04em; }
.mcal-cell      { min-height:54px; padding:4px 3px; border-bottom:1px solid var(--line-cool);
                  border-right:1px solid var(--line-cool); transition:background .12s; }
.mcal-cell:last-child { border-right:none; }
.mcal-cell-today { background:rgba(184,137,62,0.07); }
.mcal-day-num   { width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
                  justify-content:center; font-size:17px; font-weight:600; font-family:'Cormorant Garamond',serif;
                  margin-bottom:2px; transition:background .12s; }
.mcal-day-today { background:var(--gold-gradient) !important; color:#fff !important; font-weight:700; }
.mcal-day-sun   { color:var(--ruby-400); }
.mcal-day-sat   { color:var(--sapphire); }
.mcal-holiday   { font-size:8px; color:var(--positive); font-weight:700; line-height:1.2;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   YEARLY CALENDAR (ycal-*)
══════════════════════════════════════════════════════════════════════ */
.ycal-grid       { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px; }
.ycal-month      { border:1px solid var(--line-strong); border-radius:var(--radius-sm);
                   padding:8px 7px 6px; background:rgba(255,255,255,0.35); }
.ycal-month-name { font-size:14px; font-weight:700; color:var(--ink-2); text-align:center;
                   margin-bottom:5px; letter-spacing:0.04em; font-family:'Cormorant Garamond',serif;
                   font-style:italic; cursor:pointer; transition:color .12s; }
.ycal-month-name:hover { color:var(--gold-500); }
.ycal-mini       { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.ycal-dow        { text-align:center; font-size:10px; font-weight:700; color:var(--muted);
                   padding:3px 0; border-bottom:1px solid var(--line-cool); margin-bottom:2px; }
.ycal-day        { text-align:center; font-size:12px; padding:3px 1px; border-radius:3px;
                   line-height:1.45; cursor:pointer; position:relative; transition:background .12s; }
.ycal-day:hover  { background:var(--glass-3); }
.ycal-day-today  { color:#fff !important; font-weight:700; background:transparent; }
.ycal-day-today::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--gold-gradient); z-index:-1; }
.ycal-day-holiday{ color:var(--positive); font-weight:700; }
.ycal-day-sun    { color:var(--cal-sun); background:var(--cal-sun-bg); font-weight:700; }
.ycal-day-sat    { color:var(--cal-sat); background:var(--cal-sat-bg); font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════
   MODAL (modal-*)
══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   INFRASTRUCTURE MAP (infra-*)
══════════════════════════════════════════════════════════════════════ */
.infra-flow      { display:flex; align-items:stretch; flex-wrap:wrap; gap:0; margin-bottom:12px; }
.infra-node      { min-width:150px; max-width:230px; border-radius:var(--radius-md); padding:9px 12px;
                   background:var(--glass-2); border:1.5px solid var(--glass-rim);
                   border-left:4px solid var(--infra-app); align-self:center; }
.infra-node-app      { border-left-color:var(--infra-app); }
.infra-node-supabase { border-left-color:var(--supabase); }
.infra-node-cloudflare { border-left-color:var(--cloudflare); }
.infra-node-storage  { border-left-color:var(--storage); }
.infra-node-netlify  { border-left-color:var(--netlify); }
.infra-node-domain   { border-left-color:var(--gold-500); }
.infra-node-name { font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.infra-node-meta { font-size:10px; color:var(--muted); margin-top:2px; word-break:break-all; }
.infra-arrow     { flex:0 0 40px; align-self:center; height:3px; position:relative; margin:0 2px;
                   background:repeating-linear-gradient(90deg, var(--gold-400) 0 7px, transparent 7px 14px);
                   background-size:28px 3px; border-radius:2px; animation:infraFlow .9s linear infinite; }
.infra-arrow::after { content:'\25B6'; position:absolute; right:-3px; top:-6px; color:var(--gold-400); font-size:11px; line-height:1; }
@keyframes infraFlow { to { background-position:28px 0; } }
.infra-col-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.infra-pill      { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700;
                   padding:2px 8px; border-radius:999px; background:var(--glass-2); border:1px solid var(--line); }
.infra-dot       { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
@media(max-width:760px){ .infra-node{ max-width:none; flex:1 1 100%; } .infra-arrow{ flex-basis:100%; height:24px; width:3px; margin:4px auto;
   background:repeating-linear-gradient(180deg, var(--gold-400) 0 7px, transparent 7px 14px); background-size:3px 28px; animation:infraFlowV .9s linear infinite; }
   .infra-arrow::after{ content:'\25BC'; right:auto; left:-4px; top:auto; bottom:-3px; } }
@keyframes infraFlowV { to { background-position:0 28px; } }

/* ══════════════════════════════════════════════════════════════════════
   INBOX QUICK-LINKS + new-mail flicker
══════════════════════════════════════════════════════════════════════ */
@keyframes flickerRed { 0%,100%{ opacity:1; } 42%{ opacity:.2; } 48%{ opacity:1; } 54%{ opacity:.15; } 60%{ opacity:1; } }
.flicker-dot { width:9px; height:9px; border-radius:50%; background:var(--ruby-400); box-shadow:0 0 8px var(--ruby-400); display:inline-block; animation:flickerRed 1.2s infinite; }
.inbox-link  { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px; margin-bottom:6px;
               border-radius:8px; background:var(--glass-2); border:1px solid var(--line); text-decoration:none;
               color:var(--ink-2); font-size:13px; font-weight:600; transition:all .15s; }
.inbox-link:hover { background:var(--glass-3); border-color:var(--glass-rim); }
.inbox-link .chev { color:var(--muted); font-size:11px; }

/* ── Agent "working" ambient indicator (desynchronised per agent) ── */
.agent-status { display:flex; align-items:center; gap:7px; margin:8px 0 10px; min-height:14px; }
.agent-dot    { width:8px; height:8px; border-radius:50%; background:var(--muted-2); flex-shrink:0; transition:background .3s; }
.agent-dot.working { animation: agentPulse 1s ease-in-out infinite; }
@keyframes agentPulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.55); opacity:.45; } }
.agent-shimmer { flex:1; height:2px; border-radius:2px; opacity:.7;
  background:linear-gradient(90deg, transparent, var(--gold-400), transparent); background-size:200% 100%;
  animation: agentShimmer 1.1s linear infinite; }
@keyframes agentShimmer { to { background-position:-200% 0; } }

/* ── Per-agent working GIF (staggered mount → desynced loops) ── */
.agentbot { width:100%; height:120px; margin:2px 0 8px; border-radius:10px; overflow:hidden;
  background:var(--glass-2); border:1px solid var(--line); transition:box-shadow .5s; }
.agentbot-gif { width:100%; height:120px; object-fit:cover; display:block; filter:saturate(.8) brightness(.9); transition:filter .5s, opacity .4s; }
.agentbot-ph  { background:linear-gradient(110deg, var(--glass-2) 30%, var(--glass-3) 50%, var(--glass-2) 70%);
  background-size:200% 100%; animation: agentbotShine 1.4s linear infinite; }
@keyframes agentbotShine { to { background-position:-200% 0; } }
.agentbot.active { box-shadow:inset 0 0 16px rgba(184,137,62,.45); }
.agentbot.active .agentbot-gif { filter:saturate(1.1) brightness(1.06); }

/* ── "Agent at work" render + subtle motion (SAMS-style) ──────────────── */
.agentbot-photo { position:relative; overflow:hidden; }
.agentbot-photo .ab-photo { width:100%; height:120px; object-fit:cover; object-position:center 26%; display:block;
  filter:saturate(.96) brightness(.92) contrast(1.02);
  transform:scale(1.02); animation:abKen 9s ease-in-out infinite alternate; animation-delay:var(--agd); }
@keyframes abKen { from { transform:scale(1.02) translateY(0); } to { transform:scale(1.09) translateY(-5px); } }
.agentbot-photo .ab-scan { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--agc) 26%, transparent) 48%, transparent 66%);
  background-size:250% 100%; animation:abScan 3.6s linear infinite; animation-delay:var(--agd); }
@keyframes abScan { from { background-position:160% 0; } to { background-position:-60% 0; } }
.agentbot-photo .ab-live2 { position:absolute; top:9px; right:11px; width:7px; height:7px; border-radius:50%;
  background:var(--agc); animation:abLive2 1.8s ease-out infinite; animation-delay:var(--agd); }
@keyframes abLive2 { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--agc) 60%, transparent); }
  70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
.agentbot-photo.active { box-shadow:inset 0 0 24px color-mix(in srgb, var(--agc) 36%, transparent); }
.agentbot-photo.active .ab-photo { filter:saturate(1.08) brightness(1.04) contrast(1.03); }
.agentbot-photo.active .ab-scan { animation-duration:1.8s; opacity:.7; }
@media (prefers-reduced-motion: reduce) {
  .agentbot-photo *, .agentbot-photo { animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL (modal-*)
══════════════════════════════════════════════════════════════════════ */
.modal-overlay  { position:fixed; inset:0; background:rgba(20,18,26,.5); z-index:300;
                  display:flex; align-items:center; justify-content:center; padding:16px; }
.modal          { background:var(--body-bg); border-radius:var(--radius-xl); padding:28px;
                  width:100%; max-width:500px; box-shadow:var(--shadow-lg);
                  border:1.5px solid rgba(255,255,255,.65); position:relative; }
.modal-title    { font-family:'Cormorant Garamond',serif; font-size:24px; font-style:italic;
                  color:var(--ink); margin-bottom:20px; }
.modal-grid     { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.modal-grid .field { display:flex; flex-direction:column; gap:5px; }
.modal-grid .field.full { grid-column:1/-1; }
.modal-foot     { display:flex; gap:10px; justify-content:flex-end; margin-top:20px;
                  padding-top:16px; border-top:1px solid var(--line); }

/* Responsive yearly calendar */
@media (max-width:820px)  { .ycal-grid { grid-template-columns:repeat(3,1fr); gap:12px; } }
@media (max-width:600px)  { .ycal-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — iPad Mini 10 and below
══════════════════════════════════════════════════════════════════════ */

/* iOS Safari fix: background-attachment:fixed renders incorrectly on all
   iOS/iPadOS devices — switch to scroll so the marble shows properly     */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; }
}

/* ── Tablet wide ≤1200px: sidebar narrows slightly ── */
@media (max-width: 1200px) {
  .home-grid { grid-template-columns: minmax(0,1fr) 300px; }
}

/* ── iPad Mini 10 landscape (1133px) / small tablets ≤1140px ── */
@media (max-width: 1140px) {
  .app-body  { padding: 12px; padding-bottom: 58px; }  /* bottom must stay 58px for YT bar */
  .topbar    { margin: 8px 12px 0; padding: 8px 14px; gap: 10px; }
  .zoom-badge { display: none; }
  .brand-name { font-size: 18px; }
  .home-grid  { grid-template-columns: minmax(0,1fr) 260px; gap: 12px; }
  .grid-2     { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
  /* YT bar: shorten vol slider on tighter bar */
  .yt-vol-slider { width: 70px; }
}

/* ── iPad Mini 10 portrait / small tablet ≤820px ── */
@media (max-width: 820px) {
  /* Stack home grid — sidebar drops below main */
  .home-grid  { grid-template-columns: 1fr; }
  .grid-2     { grid-template-columns: 1fr; }
  .grid-auto  { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }

  /* Topbar: hide secondary actions to save space */
  .zoom-badge   { display: none; }
  .brand-sub    { display: none; }
  .topbar-actions .icon-btn:nth-child(1) { display: none; } /* + New */
  .topbar-actions .icon-btn:nth-child(2) { display: none; } /* Mail */

  /* Body breathing room */
  .app-body { padding: 10px; padding-bottom: 58px; }  /* bottom must stay 58px for YT bar */
  .topbar   { margin: 6px 10px 0; padding: 7px 12px; }

  /* YT bar: tighten on small screen */
  .yt-bar-row  { padding: 0 10px; gap: 6px; }
  .yt-vol-pct  { display: none; }
  .yt-vol-slider { width: 60px; }
  .yt-bar-label  { display: none; }
}

/* ── Phone ≤600px ── */
@media (max-width: 600px) {
  .topbar-brand > div:last-child { display: none; }  /* hide text, keep logo */
  .topbar { padding: 6px 10px; margin: 4px 8px 0; }
  .app-body { padding: 8px; padding-bottom: 60px; }
  .home-grid, .grid-2 { gap: 10px; }
  .page-head-split { flex-direction: column; gap: 8px; }
  .yt-bar-input { font-size: 11px; }
}