/* JARVIS OS — glass-morphism control panel. Deep-space violet ground, frosted
   glass panels, neon accents. Shared by the login screen and the dashboard. */
:root{
  --bg0:#07060f; --bg1:#0d0a1c; --bg2:#120c26;
  --violet:#8b5cf6; --violet-2:#a78bfa; --cyan:#22d3ee; --pink:#ec4899; --amber:#f59e0b; --green:#34d399; --red:#fb7185;
  --ink:#ece9fb; --ink-2:#b6b0da; --dim:#8b86b0;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085); --brd:rgba(255,255,255,.12); --brd-2:rgba(255,255,255,.18);
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  --r:16px; --r-sm:11px;
}
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; color:var(--ink); font-family:var(--sans); line-height:1.5;
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(139,92,246,.28), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(900px 800px at 60% 120%, rgba(236,72,153,.16), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
a{ color:var(--violet-2); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .nav-i:focus-visible{ outline:2px solid var(--violet-2); outline-offset:2px; }
.hidden{ display:none !important; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* frosted glass primitive */
.glass{
  background:var(--glass); border:1px solid var(--brd); border-radius:var(--r);
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ambient orbs */
.orbs{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orbs span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:float 22s ease-in-out infinite; }
.orbs span:nth-child(1){ width:420px; height:420px; background:#7c3aed; left:-80px; top:-60px; }
.orbs span:nth-child(2){ width:360px; height:360px; background:#0891b2; right:-60px; top:30%; animation-delay:-7s; }
.orbs span:nth-child(3){ width:380px; height:380px; background:#db2777; left:35%; bottom:-120px; animation-delay:-13s; }
@keyframes float{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(24px,-28px); } }

/* ---------------- login ---------------- */
.login-wrap{ min-height:100vh; display:grid; place-content:center; gap:22px; padding:24px; position:relative; z-index:1; }
.brand{ text-align:center; font-size:30px; font-weight:800; letter-spacing:.18em; background:linear-gradient(90deg,var(--violet-2),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand small{ display:block; font-size:10px; letter-spacing:.34em; color:var(--dim); margin-top:8px; -webkit-text-fill-color:var(--dim); }
.card{ width:min(380px,92vw); background:var(--glass); border:1px solid var(--brd); border-radius:var(--r); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); padding:28px 26px; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.card h1{ margin:0 0 4px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.card label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.card input{ width:100%; background:rgba(0,0,0,.28); color:var(--ink); border:1px solid var(--brd); border-radius:var(--r-sm); padding:12px 13px; font:inherit; font-size:14px; margin-top:5px; }
.card input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.25); }
.msg{ font-size:12px; min-height:16px; }
.msg.err{ color:var(--red); } .msg.ok{ color:var(--green); }

/* buttons */
.btn{ border:1px solid var(--brd-2); border-radius:var(--r-sm); padding:11px 16px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink); background:var(--glass-2); transition:.16s; }
.btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
.btn.primary{ border:none; color:#fff; background:linear-gradient(90deg,var(--violet),var(--pink)); box-shadow:0 8px 24px rgba(139,92,246,.4); }
.btn.primary:hover{ box-shadow:0 10px 30px rgba(139,92,246,.55); }
.btn.ghost{ background:transparent; }
.btn.sm{ padding:8px 12px; font-size:11px; }

/* ================= OS shell ================= */
.os{ position:relative; z-index:1; display:grid; grid-template-columns:250px 1fr; gap:20px; padding:20px; max-width:1440px; margin:0 auto; min-height:100vh; }
@media(max-width:900px){ .os{ grid-template-columns:1fr; } }

/* sidebar */
.side{ position:sticky; top:20px; align-self:start; height:calc(100vh - 40px); display:flex; flex-direction:column; padding:20px 16px; }
@media(max-width:900px){ .side{ position:relative; height:auto; top:0; } }
.side-brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 20px; border-bottom:1px solid var(--brd); }
.logo-mark{ width:42px; height:42px; border-radius:12px; display:grid; place-content:center; font-weight:800; font-size:20px; color:#fff; background:linear-gradient(135deg,var(--violet),var(--cyan)); box-shadow:0 6px 20px rgba(139,92,246,.5); }
.logo-txt{ font-weight:800; font-size:18px; letter-spacing:.06em; line-height:1; display:flex; flex-direction:column; }
.logo-txt span{ color:var(--cyan); font-size:12px; letter-spacing:.3em; }
.logo-txt small{ font-weight:500; font-size:8px; letter-spacing:.22em; color:var(--dim); margin-top:6px; }
.nav{ display:flex; flex-direction:column; gap:4px; padding:16px 0; flex:1; }
.nav-i{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--ink-2); font-size:13.5px; font-weight:600; text-align:left; transition:.15s; }
.nav-i i{ font-style:normal; width:20px; text-align:center; opacity:.8; }
.nav-i:hover{ background:var(--glass); color:var(--ink); }
.nav-i.active{ background:linear-gradient(90deg,rgba(139,92,246,.28),rgba(34,211,238,.14)); border-color:var(--brd-2); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.side-foot{ border-top:1px solid var(--brd); padding-top:14px; display:flex; flex-direction:column; gap:12px; }
.who-box{ display:flex; align-items:center; gap:10px; }
.who-av{ width:34px; height:34px; border-radius:50%; display:grid; place-content:center; background:linear-gradient(135deg,var(--pink),var(--amber)); color:#fff; font-weight:800; }
.who-meta{ display:flex; flex-direction:column; min-width:0; }
.who-meta .who{ font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.who-meta small{ font-size:10px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; }

/* main */
.main{ display:flex; flex-direction:column; gap:20px; min-width:0; padding-bottom:30px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; flex-wrap:wrap; }
.hello h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.hello p{ margin:4px 0 0; font-size:13px; color:var(--dim); }
.top-right{ display:flex; align-items:center; gap:16px; }
.pill-live{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:var(--green); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); padding:7px 12px; border-radius:999px; }
.pill-live .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.clock{ font-family:var(--mono); font-size:14px; color:var(--ink-2); letter-spacing:.06em; font-variant-numeric:tabular-nums; }

.banner{ border:1px solid rgba(245,158,11,.4); background:rgba(245,158,11,.08); color:var(--amber); padding:12px 16px; font-size:13px; border-radius:var(--r-sm); }

/* stat tiles */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ display:flex; align-items:center; gap:14px; padding:18px 18px; position:relative; overflow:hidden; }
.stat::after{ content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:4px; }
.stat.g-violet::after{ background:var(--violet); } .stat.g-cyan::after{ background:var(--cyan); } .stat.g-pink::after{ background:var(--pink); } .stat.g-amber::after{ background:var(--amber); }
.s-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-content:center; font-size:18px; color:#fff; flex:none; }
.g-violet .s-ico{ background:linear-gradient(135deg,#8b5cf6,#6d28d9); } .g-cyan .s-ico{ background:linear-gradient(135deg,#22d3ee,#0e7490); } .g-pink .s-ico{ background:linear-gradient(135deg,#ec4899,#be185d); } .g-amber .s-ico{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.s-b{ display:flex; flex-direction:column; min-width:0; }
.s-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.s-v{ font-size:28px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.s-n{ font-size:11px; color:var(--dim); }

/* views */
.view{ display:none; flex-direction:column; gap:20px; }
.view.active{ display:flex; animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.grid-2{ display:grid; grid-template-columns:1.35fr 1fr; gap:20px; }
@media(max-width:1000px){ .grid-2{ grid-template-columns:1fr; } }

/* panel */
.panel{ padding:20px 22px; }
.p-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.p-t{ font-size:14px; font-weight:700; letter-spacing:.01em; }
.p-k{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.p-k.ok{ color:var(--green); }

/* funnel */
.funnel{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media(max-width:600px){ .funnel{ grid-template-columns:repeat(3,1fr); gap:14px 8px; } }
.stage{ display:flex; flex-direction:column; gap:8px; padding:6px 8px; position:relative; }
.stage .lab{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); }
.stage .num{ font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,var(--violet-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stage .num.z{ background:none; color:var(--dim); -webkit-text-fill-color:var(--dim); }
.stage .flow{ height:3px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden; position:relative; }
.stage .flow i{ position:absolute; top:0; bottom:0; width:36%; border-radius:3px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:slide 2.6s linear infinite; }
@keyframes slide{ from{ left:-40%; } to{ left:110%; } }
.stage.done .num{ background:linear-gradient(180deg,#fff,var(--green)); -webkit-background-clip:text; background-clip:text; }
.stage.done .flow i{ background:linear-gradient(90deg,transparent,var(--green),transparent); }

/* system status */
.sys-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.sys-list li{ display:flex; align-items:center; justify-content:space-between; padding:11px 8px; border-bottom:1px solid rgba(255,255,255,.06); }
.sys-list li:last-child{ border-bottom:none; }
.s-name{ font-size:13px; color:var(--ink-2); }
.s-state{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.s-state.run,.s-state.act,.s-state.live{ color:var(--green); background:rgba(52,211,153,.14); }
.s-state.sch{ color:var(--amber); background:rgba(245,158,11,.14); }
.s-state.off{ color:var(--dim); background:rgba(255,255,255,.06); }

/* activity */
.activity{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.activity li{ display:flex; align-items:center; gap:12px; padding:10px 8px; font-size:13px; color:var(--ink-2); border-bottom:1px solid rgba(255,255,255,.05); }
.activity li:last-child{ border-bottom:none; }
.activity li.muted{ color:var(--dim); }
.activity .a-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.activity .a-time{ margin-left:auto; font-size:11px; color:var(--dim); font-family:var(--mono); }

/* tabs + monitor */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tab{ font-size:11.5px; font-weight:600; padding:8px 15px; border:1px solid var(--brd); background:transparent; color:var(--dim); border-radius:999px; transition:.15s; }
.tab:hover{ color:var(--ink); border-color:var(--brd-2); }
.tab[aria-selected=true]{ color:#fff; background:linear-gradient(90deg,rgba(139,92,246,.35),rgba(34,211,238,.2)); border-color:var(--brd-2); }
.feed{ display:flex; flex-direction:column; gap:12px; }
.vid{ border:1px solid var(--brd); background:var(--glass); border-radius:14px; display:grid; grid-template-columns:92px 1fr; overflow:hidden; transition:.15s; }
.vid:hover{ border-color:var(--brd-2); transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.thumb{ position:relative; background:linear-gradient(140deg,#1a1338,#0d0a1c); display:flex; align-items:center; justify-content:center; }
.thumb.busy{ background:repeating-linear-gradient(45deg,#1a1440,#1a1440 8px,#221a52 8px,#221a52 16px); }
.thumb .ratio{ font-size:8px; letter-spacing:.08em; color:var(--dim); position:absolute; bottom:6px; left:0; right:0; text-align:center; }
.thumb .play{ width:38px; height:38px; border-radius:50%; border:none; color:#fff; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--violet),var(--pink)); font-size:14px; box-shadow:0 6px 18px rgba(139,92,246,.5); }
.vbody{ padding:13px 15px; display:flex; flex-direction:column; gap:9px; min-width:0; }
.vtop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vtitle{ font-size:14px; font-weight:700; color:#fff; }
.pill{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.ok{ color:var(--green); background:rgba(52,211,153,.15); } .pill.wip{ color:var(--amber); background:rgba(245,158,11,.15); }
.pill.bad{ color:var(--red); background:rgba(251,113,133,.15); } .pill.idle{ color:var(--dim); background:rgba(255,255,255,.07); } .pill.pub{ color:var(--violet-2); background:rgba(139,92,246,.18); }
.meta{ display:flex; gap:7px; flex-wrap:wrap; font-size:10px; }
.tag{ padding:3px 9px; border:1px solid var(--brd); border-radius:999px; color:var(--dim); }
.tag.views{ color:var(--cyan); border-color:rgba(34,211,238,.35); font-variant-numeric:tabular-nums; }
.tag.stream-tag{ color:var(--violet-2); border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.12); font-weight:600; }
/* manual upload */
.field input[type=file]{ width:100%; background:rgba(0,0,0,.28); color:var(--ink-2); border:1px dashed var(--brd); border-radius:var(--r-sm); padding:16px; font:inherit; font-size:13px; cursor:pointer; }
.field input[type=file]:hover{ border-color:var(--violet); }
.field input[type=file]::file-selector-button{ margin-right:12px; padding:8px 16px; border:none; border-radius:8px; font:inherit; font-size:12px; font-weight:600; color:#fff; cursor:pointer; background:linear-gradient(90deg,var(--violet),var(--cyan)); }

/* pipeline timing explainer */
.explain{ border:1px solid var(--brd); border-radius:12px; background:rgba(0,0,0,.18); margin-bottom:14px; }
.explain summary{ cursor:pointer; padding:11px 14px; font-size:12.5px; font-weight:600; color:var(--violet-2); list-style:none; }
.explain summary::-webkit-details-marker{ display:none; }
.explain summary::before{ content:"ⓘ "; }
.explain[open] summary{ border-bottom:1px solid var(--brd); }
.explain-b{ padding:13px 16px 15px; font-size:12.5px; color:var(--ink-2); line-height:1.65; }
.explain-b p{ margin:0 0 9px; } .explain-b p:last-child{ margin-bottom:0; }
.explain-b ul{ margin:0 0 10px; padding-left:18px; } .explain-b li{ margin-bottom:5px; }
.explain-b b{ color:var(--ink); }
.tag.vis-tag{ font-weight:600; }
.tag.vis-public{ color:var(--green); border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.12); }
.tag.vis-private{ color:var(--dim); border-color:var(--brd); background:rgba(255,255,255,.04); }
.track{ display:flex; align-items:center; gap:0; margin-top:2px; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:6px; }
.step .b{ width:9px; height:9px; border-radius:50%; border:1px solid var(--dim); background:transparent; flex:none; }
.step.on .b{ border-color:var(--green); background:var(--green); box-shadow:0 0 8px rgba(52,211,153,.7); }
.step.now .b{ border-color:var(--amber); background:var(--amber); box-shadow:0 0 8px rgba(245,158,11,.7); animation:pulse 1.6s infinite; }
.step .l{ font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
.step.on .l{ color:var(--ink-2); }
.link{ width:22px; height:1px; background:var(--brd); margin:0 6px; }
.step.on + .link{ background:var(--green); }
.acts{ display:flex; gap:8px; margin-top:2px; }
.acts .btn{ padding:8px 15px; font-size:11px; }
.btn.approve{ border-color:rgba(52,211,153,.5); color:var(--green); } .btn.approve:hover{ background:rgba(52,211,153,.14); }
.btn.reject{ border-color:rgba(251,113,133,.5); color:var(--red); } .btn.reject:hover{ background:rgba(251,113,133,.14); }
.stats-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:2px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); align-items:center; }
.st{ display:flex; flex-direction:column; }
.st .v{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; } .st .v.g{ color:var(--green); }
.st .k{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.go{ margin-left:auto; }
.empty{ border:1px dashed var(--brd); border-radius:var(--r-sm); padding:28px; text-align:center; color:var(--dim); font-size:13px; }
.vrow{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.vrow .vk{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); flex:none; }

/* studio */
.studio{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field>label{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.field input[type=text], .field textarea, .sel{ width:100%; background:rgba(0,0,0,.28); color:var(--ink); border:1px solid var(--brd); border-radius:var(--r-sm); padding:11px 13px; font:inherit; font-size:14px; }
.field textarea{ resize:vertical; min-height:46px; }
.field input:focus, .field textarea:focus, .sel:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.22); }
.field .hint{ font-size:11.5px; color:var(--dim); margin:0; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .grid2{ grid-template-columns:1fr; } }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media(max-width:760px){ .grid3{ grid-template-columns:1fr; } }

/* video audits */
.audit-c{ border:1px solid var(--brd); border-radius:14px; padding:15px 16px; background:var(--glass); margin-bottom:12px; }
.audit-top{ display:flex; gap:14px; align-items:flex-start; }
.audit-score{ flex:none; width:44px; height:44px; border-radius:12px; border:2px solid; display:grid; place-content:center; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.audit-t{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.audit-v{ font-size:12px; font-weight:400; color:var(--dim); margin-top:4px; line-height:1.5; }
.audit-imps{ list-style:none; margin:12px 0 0; padding:0 0 0 58px; display:flex; flex-direction:column; gap:6px; }
.audit-imps li{ font-size:12px; color:var(--ink-2); line-height:1.45; }
.audit-imps li b{ font-weight:600; color:var(--ink); }
.audit-imps li span{ color:var(--dim); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:12px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--brd); background:transparent; color:var(--dim); transition:.15s; }
.chip:hover{ color:var(--ink); border-color:var(--brd-2); }
.chip[aria-pressed=true]{ color:#fff; border-color:transparent; background:linear-gradient(90deg,var(--violet),var(--cyan)); }
.chip.tr[aria-pressed=true]{ background:linear-gradient(90deg,var(--amber),var(--pink)); }
.slider{ display:flex; align-items:center; gap:14px; }
.slider input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; background:rgba(255,255,255,.14); border-radius:4px; flex:1; }
.slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--violet); box-shadow:0 0 12px var(--violet); cursor:pointer; }
.slider input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:var(--violet); cursor:pointer; }
.slider .val{ font-size:17px; font-weight:700; min-width:70px; text-align:right; font-variant-numeric:tabular-nums; }
.slider .val small{ font-size:11px; color:var(--dim); font-weight:400; }
.toggles{ display:flex; gap:12px; flex-wrap:wrap; }
.tg{ flex:1; min-width:160px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--brd); border-radius:var(--r-sm); padding:12px 14px; background:rgba(0,0,0,.2); }
.tg .n{ font-size:12px; font-weight:600; color:var(--ink); } .tg .s{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.sw{ width:44px; height:24px; border-radius:999px; border:1px solid var(--brd); background:rgba(0,0,0,.35); position:relative; flex:none; transition:.15s; }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--dim); transition:.15s; }
.tg[aria-pressed=true] .sw{ background:rgba(52,211,153,.3); border-color:var(--green); }
.tg[aria-pressed=true] .sw::after{ transform:translateX(20px); background:var(--green); }
.tg.warn[aria-pressed=true] .sw{ background:rgba(245,158,11,.3); border-color:var(--amber); }
.tg.warn[aria-pressed=true] .sw::after{ background:var(--amber); }
.addvoice{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.addvoice input{ flex:1; min-width:130px; background:rgba(0,0,0,.28); color:var(--ink); border:1px solid var(--brd); border-radius:var(--r-sm); padding:9px 12px; font:inherit; font-size:13px; }
.save{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.toast{ font-size:12px; opacity:0; transition:.2s; } .toast.on{ opacity:1; } .toast.ok{ color:var(--green); } .toast.err{ color:var(--red); }

/* analytics ribbon */
.ribbon{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:760px){ .ribbon{ grid-template-columns:repeat(2,1fr); } }
.rc{ border:1px solid var(--brd); background:var(--glass); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:7px; }
.rc .k{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.rc .v{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,var(--violet-2)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.rc .d{ font-size:10.5px; color:var(--green); }
.spark{ height:26px; width:100%; margin-top:2px; }

/* health & alerts */
.alerts-panel{ border-color:rgba(251,113,133,.45) !important; background:rgba(251,113,133,.07); }
.alert-t{ color:var(--red); }
.alerts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.alerts li{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid rgba(251,113,133,.28); border-radius:var(--r-sm); background:rgba(251,113,133,.05); flex-wrap:wrap; }
.a-tag{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--red); background:rgba(251,113,133,.16); padding:4px 10px; border-radius:999px; flex:none; }
.a-title{ font-size:13px; font-weight:600; color:var(--ink); }
.a-det{ font-size:11.5px; color:var(--dim); flex-basis:100%; line-height:1.55; }
/* informational (not a failure) — calmer than red */
.alerts li.a-info{ border-color:rgba(56,198,255,.3); background:rgba(56,198,255,.05); }
.alerts li.a-info .a-tag{ color:var(--cyan); background:rgba(56,198,255,.15); }

/* chat with jarvis */
.chat-panel{ display:flex; flex-direction:column; min-height:460px; }
.chat-log{ flex:1; display:flex; flex-direction:column; gap:14px; overflow-y:auto; padding:6px 2px 16px; max-height:56vh; }
.msg{ display:flex; gap:10px; max-width:82%; }
.msg.you{ align-self:flex-end; flex-direction:row-reverse; }
.msg-av{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-content:center; font-weight:800; font-size:13px; color:#fff; }
.msg.jarvis .msg-av{ background:linear-gradient(135deg,var(--violet),var(--cyan)); }
.msg.you .msg-av{ background:linear-gradient(135deg,var(--pink),var(--amber)); }
.msg-b{ padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.55; }
.msg.jarvis .msg-b{ background:var(--glass-2); border:1px solid var(--brd); border-top-left-radius:4px; }
.msg.you .msg-b{ background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(236,72,153,.25)); border-top-right-radius:4px; color:#fff; }
.msg-b em{ color:var(--cyan); font-style:normal; }
.chat-in{ display:flex; gap:10px; padding-top:14px; border-top:1px solid var(--brd); }
.chat-in input{ flex:1; background:rgba(0,0,0,.28); color:var(--ink); border:1px solid var(--brd); border-radius:999px; padding:12px 18px; font:inherit; font-size:14px; }
.chat-in input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.22); }
.chat-in .btn{ border-radius:999px; padding:12px 22px; }

/* calendar */
.cal{ display:flex; flex-direction:column; gap:18px; }
.cal-day{ border-left:3px solid var(--violet); padding-left:14px; }
.cal-date{ font-size:12px; font-weight:700; color:var(--violet-2); letter-spacing:.04em; margin-bottom:8px; font-family:var(--mono); }
.cal-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cal-items li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); }

/* assets grid */
.assets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.asset{ border:1px solid var(--brd); border-radius:14px; overflow:hidden; background:var(--glass); transition:.15s; }
.asset:hover{ border-color:var(--brd-2); transform:translateY(-2px); }
.asset-thumb{ display:flex; align-items:center; justify-content:center; height:130px; background:linear-gradient(140deg,#1a1338,#0d0a1c); color:#fff; font-size:20px; position:relative; }
.asset-ratio{ position:absolute; bottom:6px; right:8px; font-size:8px; color:var(--dim); }
.asset-b{ padding:11px 12px; display:flex; flex-direction:column; gap:8px; }
.asset-t{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.35; }

/* workflow + billing list */
.wf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.wf-list li{ display:flex; align-items:center; gap:14px; padding:13px 8px; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.wf-list li:last-child{ border-bottom:none; }
.wf-n{ font-size:13.5px; font-weight:600; color:var(--ink); min-width:170px; }
.wf-d{ font-size:12px; color:var(--dim); flex:1; min-width:180px; }
.wf-list a.s-state{ text-decoration:none; }

/* integrations */
.intg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.intg-c{ border:1px solid var(--brd); border-radius:12px; padding:14px; background:var(--glass); display:flex; flex-direction:column; gap:8px; }
.intg-n{ font-size:13.5px; font-weight:700; color:var(--ink); }
.intg-c .s-state{ align-self:flex-start; }
.intg-d{ font-size:11.5px; color:var(--dim); }

/* council study flow diagram */
.flow{ display:flex; flex-direction:column; align-items:stretch; gap:2px; }
.fl-step{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--brd); border-radius:11px; padding:11px 13px; background:rgba(255,255,255,.02); }
.fl-step b{ font-size:12.5px; color:var(--ink); display:block; }
.fl-step span:not(.fl-n){ font-size:11px; color:var(--dim); display:block; margin-top:3px; line-height:1.5; }
.fl-step a{ font-size:10.5px; display:inline-block; margin-top:5px; }
.fl-n{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-content:center; font-size:11.5px; font-weight:800; color:#fff; background:rgba(255,255,255,.12); }
.fl-step.src{ border-style:dashed; } .fl-step.src .fl-n{ background:var(--cyan); color:#04121a; }
.fl-step.c1 .fl-n{ background:#d97757; } .fl-step.c2 .fl-n{ background:#4285f4; } .fl-step.c3 .fl-n{ background:#10a37f; }
.fl-step.c4{ border-color:rgba(139,92,246,.5); background:rgba(139,92,246,.08); } .fl-step.c4 .fl-n{ background:var(--violet); }
.fl-step.out{ border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.07); } .fl-step.out .fl-n{ background:var(--green); color:#04140d; }
.fl-ar{ text-align:center; color:var(--dim); font-size:13px; line-height:1; padding:1px 0; }

/* proposal block */
.cd-period{ font-weight:600; color:var(--cyan); margin-left:10px; letter-spacing:0; text-transform:none; }
.cd-proposal{ margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:9px; }
.cd-p-row{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.cd-p-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); min-width:110px; }
.cd-p-v{ font-size:13px; color:var(--ink); font-weight:600; flex:1; min-width:200px; }

/* content direction board */
.cd-headline{ border:1px solid rgba(139,92,246,.4); background:linear-gradient(120deg,rgba(139,92,246,.14),rgba(56,198,255,.08)); border-radius:14px; padding:18px 20px; margin-bottom:18px; }
.cd-lbl{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-2); font-weight:700; }
.cd-dir{ font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.5; margin-top:8px; }
.cd-voices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.cd-voice{ border:1px solid var(--brd); border-top-width:3px; border-radius:12px; padding:14px; background:rgba(0,0,0,.2); }
.cd-voice.v-claude{ border-top-color:#d97757; } .cd-voice.v-gemini{ border-top-color:#4285f4; } .cd-voice.v-openai{ border-top-color:#10a37f; }
.cd-who{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:9px; }
.cd-av{ width:24px; height:24px; border-radius:7px; display:grid; place-content:center; font-size:11px; font-weight:800; color:#fff; }
.v-claude .cd-av{ background:#d97757; } .v-gemini .cd-av{ background:#4285f4; } .v-openai .cd-av{ background:#10a37f; }
.cd-say{ font-size:11.5px; color:var(--ink-2); line-height:1.65; white-space:pre-wrap; max-height:230px; overflow-y:auto; }
.cd-say i{ color:var(--dim); }
.cd-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.cd-list li{ font-size:12px; color:var(--ink-2); line-height:1.55; padding-left:12px; border-left:2px solid var(--brd); }
.cd-list.ok li{ border-left-color:var(--green); } .cd-list.warn li{ border-left-color:var(--amber); } .cd-list.stop li{ border-left-color:var(--red); }
.cd-none{ font-size:12px; color:var(--dim); margin-top:6px; }
.cd-topic{ border:1px solid var(--brd); border-radius:11px; padding:12px 14px; margin-top:9px; background:rgba(255,255,255,.02); }
.cd-tt{ font-size:13px; font-weight:600; color:var(--ink); }

/* workflow inventory table */
.wf-tbl{ display:flex; flex-direction:column; }
.wf-h{ display:grid; grid-template-columns:1.5fr .9fr .8fr 2.6fr; gap:12px; padding:9px 8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--brd); }
.wf-g{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--violet-2); padding:16px 8px 7px; }
.wf-row{ display:grid; grid-template-columns:1.5fr .9fr .8fr 2.6fr; gap:12px; padding:11px 8px; border-bottom:1px solid rgba(255,255,255,.05); text-decoration:none; transition:.15s; border-radius:8px; align-items:start; }
.wf-row:hover{ background:rgba(139,92,246,.08); }
.wf-nm{ font-size:12.5px; font-weight:600; color:var(--ink); }
.wf-row:hover .wf-nm{ color:var(--violet-2); }
.wf-ly{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; align-self:start; white-space:nowrap; }
.wf-ly.l3{ color:#c4b5fd; background:rgba(139,92,246,.16); }
.wf-ly.l4{ color:#38c6ff; background:rgba(56,198,255,.14); }
.wf-ly.l5{ color:#34d399; background:rgba(52,211,153,.14); }
.wf-ly.l6{ color:#fbbf24; background:rgba(251,191,36,.14); }
.wf-ly.l7{ color:#f472b6; background:rgba(244,114,182,.14); }
.wf-ly.l8{ color:#fb7185; background:rgba(251,113,133,.14); }
.wf-ly.l9{ color:#a78bfa; background:rgba(167,139,250,.14); }
.wf-ly.l11{ color:#60a5fa; background:rgba(96,165,250,.14); }
.wf-ly.l12{ color:#c084fc; background:rgba(192,132,252,.14); }
.wf-rn{ font-size:11px; color:var(--dim); font-family:var(--mono); }
.wf-wd{ font-size:11.5px; color:var(--dim); line-height:1.55; }
@media(max-width:820px){ .wf-h{ display:none; } .wf-row{ grid-template-columns:1fr auto; } .wf-rn{ grid-column:1/-1; } .wf-wd{ grid-column:1/-1; } }

/* architecture map */
.alayer{ display:flex; gap:14px; padding:14px; border:1px solid var(--brd); border-left-width:3px; border-radius:12px; background:rgba(255,255,255,.02); margin-bottom:10px; }
.alayer.ok{ border-left-color:var(--green); }
.alayer.part{ border-left-color:var(--amber); }
.alayer.no{ border-left-color:var(--dim); opacity:.75; }
.al-n{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-content:center; font-size:13px; font-weight:800; color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--brd); }
.al-b{ flex:1; min-width:0; }
.al-t{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:14px; font-weight:700; color:var(--ink); }
.al-s{ font-size:11.5px; font-weight:400; color:var(--dim); }
.al-badge{ font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:999px; }
.al-badge.ok{ color:var(--green); background:rgba(52,211,153,.15); }
.al-badge.part{ color:var(--amber); background:rgba(245,158,11,.15); }
.al-badge.no{ color:var(--dim); background:rgba(255,255,255,.06); }
.al-note{ font-size:11.5px; color:var(--dim); margin-top:5px; line-height:1.55; }
.al-parts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.ac{ font-size:10.5px; padding:3px 9px; border-radius:999px; border:1px solid var(--brd); color:var(--dim); }
.ac.ok{ color:var(--green); border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.08); }
.ac.part{ color:var(--amber); border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
.ac.no{ color:var(--dim); border-style:dashed; }
/* "na" = no API can supply it; shown as a fact, not a gap */
.ac.na{ color:var(--dim); opacity:.6; border-style:dotted; cursor:help; }

/* monetization roadmap */
.mon-lead{ font-size:13px; color:var(--ink-2); line-height:1.7; margin-bottom:16px; }
.mon-lead b{ color:var(--ink); }
.mon-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
.mon-c{ border:1px solid var(--brd); border-radius:12px; padding:13px 14px; background:rgba(0,0,0,.2); display:flex; flex-direction:column; gap:4px; }
.mon-c .k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.mon-c .v{ font-size:22px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.mon-c .v.sm{ font-size:13.5px; font-weight:700; line-height:1.35; }
.mon-c .v small{ font-size:11px; font-weight:500; color:var(--dim); }
.mon-c .d{ font-size:10.5px; color:var(--dim); }
.mon-verdict{ border-radius:12px; padding:13px 15px; font-size:12.5px; line-height:1.65; margin:4px 0 16px; }
.mon-verdict.ok{ border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.08); color:var(--ink-2); }
.mon-verdict.warn{ border:1px solid rgba(245,158,11,.4); background:rgba(245,158,11,.08); color:var(--ink-2); }
.mon-verdict b{ color:var(--ink); }
.mon-recs ul{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.mon-recs li{ font-size:12.5px; color:var(--ink-2); line-height:1.6; padding-left:14px; border-left:2px solid var(--violet); }
.mon-recs li b{ color:var(--ink); }

/* KPI table */
.kpi-t{ display:flex; flex-direction:column; }
.kpi-h, .kpi-r{ display:grid; grid-template-columns:1.4fr .7fr .7fr 2fr; gap:12px; padding:10px 6px; align-items:center; }
.kpi-h{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--brd); }
.kpi-r{ border-bottom:1px solid rgba(255,255,255,.05); font-size:12.5px; }
.kpi-k{ font-weight:600; color:var(--ink); }
.kpi-v{ font-weight:800; font-variant-numeric:tabular-nums; }
.kpi-v.good{ color:var(--green); } .kpi-v.bad{ color:var(--amber); }
.kpi-t2{ color:var(--dim); font-variant-numeric:tabular-nums; }
.kpi-w{ color:var(--dim); font-size:11.5px; line-height:1.5; }
@media(max-width:720px){ .kpi-h{ display:none; } .kpi-r{ grid-template-columns:1fr 1fr; } .kpi-w{ grid-column:1/-1; } }

/* targets + AI insights */
.tgt-row{ margin-bottom:12px; }
.tgt-l{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); margin-bottom:5px; }
.tgt-v{ color:var(--dim); font-variant-numeric:tabular-nums; }
.tgt-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.tgt-bar span{ display:block; height:100%; border-radius:999px; transition:width .4s; }
.tgt-edit{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); font-size:11.5px; color:var(--dim); }
.tgt-edit label{ display:flex; flex-direction:column; gap:3px; }
.tgt-edit input{ width:84px; background:rgba(0,0,0,.28); color:var(--ink); border:1px solid var(--brd); border-radius:8px; padding:6px 8px; font:inherit; font-size:12px; }
.ins-head{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.4; }
.ins-assess{ font-size:12.5px; color:var(--amber); margin-top:8px; line-height:1.5; }
.ins-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ins-list li{ display:flex; flex-direction:column; gap:3px; padding-left:14px; border-left:2px solid var(--violet); }
.ins-list li b{ font-size:13px; color:var(--ink); font-weight:600; }
.ins-list li span{ font-size:11.5px; color:var(--dim); }
.bd-h{ font-size:12px; font-weight:700; color:var(--violet-2); letter-spacing:.03em; margin-bottom:10px; }
.bd-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-2); padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.bd-n{ color:var(--cyan); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* content streams */
.streams{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-bottom:22px; }
.stream{ border:1px solid var(--brd); border-radius:14px; padding:15px 16px; background:var(--glass); display:flex; flex-direction:column; gap:9px; transition:.15s; }
.stream:hover{ border-color:var(--brd-2); }
.stream.off{ opacity:.5; }
.stream-top{ display:flex; align-items:center; gap:9px; }
.stream-n{ font-size:15px; font-weight:700; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag.tgt{ color:var(--violet-2); border-color:rgba(139,92,246,.4); background:rgba(139,92,246,.12); font-variant-numeric:tabular-nums; font-weight:600; }
.tg.sm{ flex:none; min-width:0; padding:0; border:none; background:none; }
.x-del{ flex:none; width:26px; height:26px; border-radius:8px; border:1px solid var(--brd); background:rgba(0,0,0,.2); color:var(--dim); font-size:12px; cursor:pointer; transition:.15s; }
.x-del:hover{ color:var(--red); border-color:var(--red); background:rgba(251,113,133,.12); }
.stream-niche{ font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.kling-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); }
.kling-l{ font-size:12px; font-weight:600; color:var(--ink-2); } .kling-l small{ color:var(--dim); font-weight:400; }
.tg.sm.kling[aria-pressed=true] .sw{ background:rgba(236,72,153,.3); border-color:var(--pink); }
.tg.sm.kling[aria-pressed=true] .sw::after{ transform:translateX(20px); background:var(--pink); }
.kling-row.sub{ padding-top:8px; border-top:none; margin-top:-4px; }
.kling-row.sub .kling-l{ font-size:11.5px; color:var(--dim); }
.kling-row.sub.off{ opacity:.4; }
.tg.sm.kling[disabled]{ cursor:not-allowed; }
.stream-actions{ display:flex; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); }
.btn.sm{ padding:7px 12px; font-size:12px; border-radius:9px; }
.btn.ghost.sm.run-now{ color:var(--green); border-color:rgba(52,211,153,.4); }
.btn.ghost.sm.run-now:hover{ background:rgba(52,211,153,.12); }
.btn.ghost.sm:disabled{ opacity:.6; cursor:default; }
.stream-add{ border:1px solid var(--brd); border-radius:14px; padding:18px; background:rgba(0,0,0,.18); }
.stream-add .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:640px){ .stream-add .grid2{ grid-template-columns:1fr; } }

/* team */
.team{ display:flex; flex-direction:column; gap:12px; }
.team-c{ display:flex; align-items:center; gap:14px; border:1px solid var(--brd); border-radius:12px; padding:14px; background:var(--glass); }
.team-c.ghost-c{ border-style:dashed; opacity:.85; }
.team-n{ font-size:14px; font-weight:600; color:var(--ink); }
.team-r{ font-size:11.5px; color:var(--dim); margin-top:2px; }

/* ---- council advice, surfaced and actioned on the Streams page ---- */
.cd-advice{ border:1px solid rgba(139,92,246,.30); background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(139,92,246,.02));
  border-radius:16px; padding:16px 18px; margin-bottom:20px; }
.cd-advice-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.cd-advice-t{ font-size:14px; font-weight:650; color:var(--ink); letter-spacing:.2px; }
.cd-advice-when{ font-size:11.5px; color:var(--dim); }
.cd-advice-act{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.sc-focus{ margin-bottom:12px; }
.sc-focus .cd-dir{ font-size:14.5px; line-height:1.5; color:var(--ink); margin-top:6px; }
.sc-metric{ font-size:12.5px; color:var(--dim); margin-top:8px; }
.sc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.sc-cols .tag{ margin:0 6px 6px 0; }
.sc-diff{ border-top:1px solid var(--brd); padding-top:12px; }
.sc-diff.done{ font-size:12.5px; color:var(--green); }
.sc-d-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink); padding:4px 0; }
.sc-d-a{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:2px 7px; border-radius:5px; min-width:62px; text-align:center; }
.sc-d-a.on{ background:rgba(52,211,153,.16); color:var(--green); }
.sc-d-a.off{ background:rgba(251,191,36,.15); color:var(--amber); }
.cd-badge{ font-size:10px; font-weight:700; letter-spacing:.4px; padding:2px 7px; border-radius:5px; white-space:nowrap; }
.cd-badge.push{ background:rgba(52,211,153,.16); color:var(--green); }
.cd-badge.pause{ background:rgba(251,191,36,.15); color:var(--amber); }
@media (max-width:720px){ .sc-cols{ grid-template-columns:1fr; } }

/* measured retention, shown beside the audit's opinion */
.audit-ret{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--brd); }
.ret-k{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.ret-v{ font-size:11.5px; padding:2px 8px; border-radius:6px; border:1px solid var(--brd);
  background:rgba(255,255,255,.04); color:var(--ink-2); font-variant-numeric:tabular-nums; cursor:help; }
.ret-v.ok{ color:var(--green); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }
.ret-v.part{ color:var(--amber); border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.1); }
.ret-v.bad{ color:var(--red); border-color:rgba(251,113,133,.4); background:rgba(251,113,133,.1); }
.a-ack{ font-size:11px; padding:3px 10px; border-radius:7px; border:1px solid var(--brd); background:rgba(255,255,255,.05); color:var(--ink-2); cursor:pointer; }
.a-ack:hover{ border-color:rgba(52,211,153,.5); color:var(--green); }
.wf-every{ cursor:pointer; border-bottom:1px dashed var(--brd-2); }
.wf-every:hover{ color:var(--cyan); }

/* long-form track panel in Content Studio */
.lf-panel{ border:1px solid rgba(167,139,250,.3); background:linear-gradient(180deg,rgba(167,139,250,.08),rgba(167,139,250,.02));
  border-radius:16px; padding:16px 18px; margin:18px 0; }
.lf-panel .toggles{ display:flex; gap:16px; flex-wrap:wrap; }

/* interactive polish: views ease in, KPI tiles lift, watch-curve sparkline */
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.view.active{ animation:viewIn .3s ease; }
.stat{ transition:transform .22s ease, box-shadow .22s ease; }
.stat:hover{ transform:translateY(-3px); }
.ret-spark{ margin-left:auto; opacity:.9; }
.tag.fmt-long{ color:#c4b5fd; border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.12); font-weight:600; }