/* VIMDRIVE Liquid Glass — components. */

/* ---------- Sidebar / brand / nav ---------- */
.brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-4); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  overflow: hidden; border: 1px solid var(--glass-stroke); background: var(--bg);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); }
.brand-name small { display: block; font-size: 9px; letter-spacing: 0.28em; color: var(--text-4); margin-top: 2px; }
.nav-section-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-4); padding: 0 var(--s-2); margin-bottom: var(--s-2); }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3);
  border-radius: var(--r); color: var(--text-3); cursor: pointer; border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease; font-size: 14px;
}
.nav-item:hover { color: var(--text); background: var(--glass-tint); }
.nav-item.active { color: var(--text); background: var(--accent-dim); border-color: rgba(25,110,240,0.35); }
.nav-item.active .nav-ico { color: var(--accent-2); }
.nav-ico { width: 18px; height: 18px; flex: none; }
.nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--warm-dim); color: var(--warm-2); border: 1px solid var(--warm-glow); }
.sidebar-foot { margin-top: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); line-height: 1.6; padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--border); }

/* ---------- Topbar ---------- */
.topbar h1 { font-size: 22px; }
.topbar .page-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-4); }
.spacer { flex: 1; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); }
.live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 0 rgba(93,202,165,0.6); animation: livedot 2.4s infinite; }
.live-dot.stale { background: var(--warm-2); animation: none; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(93,202,165,0.5); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r); border: 1px solid var(--glass-stroke);
  background: var(--glass-tint); color: var(--text-2);
  transition: all .18s ease; white-space: nowrap;
}
.btn:hover { background: var(--glass-tint-hover); color: var(--text); border-color: var(--glass-stroke-hover); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { color: #fff; border-color: rgba(25,110,240,0.5); background: linear-gradient(135deg, rgba(25,110,240,0.9), var(--accent-deep)); box-shadow: var(--glow-blue); }
.btn-primary:hover { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-3); }
.btn-ghost:hover { background: var(--glass-tint); color: var(--text); }
.btn-warm { color: #fff; border-color: rgba(201,115,81,0.5); background: linear-gradient(135deg, var(--warm-2), var(--warm)); }
.btn-danger { color: #fff; border-color: rgba(208,83,63,0.5); background: linear-gradient(135deg, #d0533f, #a93b2b); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-icon { padding: 8px; border-radius: var(--r); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--text);
  background: rgba(0,0,0,0.25); border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 9px 12px; transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.textarea.mono { font-family: var(--font-mono); font-size: 12.5px; }
label.field { display: block; }
label.field .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; display: block; }

/* ---------- Tags / pills ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-3); color: var(--text-2);
  background: var(--glass-tint);
}
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--text-2); background: var(--glass-tint); cursor: pointer; }
.pill:hover { border-color: var(--glass-stroke-hover); color: var(--text); }
.pill.code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* family colour-coding */
.fam-Strategy   { --fam-fg: var(--green);  --fam-bg: var(--agent-strat-bg); }
.fam-Creative   { --fam-fg: var(--warm-2); --fam-bg: var(--agent-creative-bg); }
.fam-Performance{ --fam-fg: var(--sky);    --fam-bg: var(--agent-perf-bg); }
.fam-Data       { --fam-fg: var(--purple); --fam-bg: var(--agent-data-bg); }
.fam-Growth     { --fam-fg: var(--growth); --fam-bg: rgba(224,177,93,0.10); }
.fam-Core       { --fam-fg: var(--core);   --fam-bg: rgba(138,147,181,0.10); }
.fam-chip { color: var(--fam-fg); background: var(--fam-bg); border-color: color-mix(in srgb, var(--fam-fg) 35%, transparent); }
.fam-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fam-fg); flex: none; }

/* status pills */
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.st-active, .st-done { color: var(--green); border-color: rgba(93,202,165,0.4); background: rgba(93,202,165,0.08); }
.st-running { color: var(--sky); border-color: rgba(79,195,247,0.4); background: rgba(79,195,247,0.08); }
.st-queued { color: var(--text-3); border-color: var(--border-2); background: var(--glass-tint); }
.st-awaiting_approval { color: var(--warm-2); border-color: rgba(224,138,104,0.45); background: var(--warm-dim); }
.st-blocked, .st-failed { color: var(--status-critical); border-color: rgba(208,83,63,0.45); background: rgba(208,83,63,0.08); }
.st-idle { color: var(--text-4); border-color: var(--border); background: transparent; }

/* ---------- Cards ---------- */
.card { padding: var(--s-5); border-radius: var(--r-lg); }
.card-pad-sm { padding: var(--s-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Stat tiles ---------- */
.stat { padding: var(--s-5); border-radius: var(--r-lg); cursor: pointer; position: relative; overflow: hidden; }
.stat .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.stat .stat-value { font-family: var(--font-serif); font-size: 34px; line-height: 1.05; margin: 10px 0 6px; }
.stat .stat-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.delta.up { color: var(--green); background: rgba(93,202,165,0.10); }
.delta.down { color: var(--status-critical); background: rgba(208,83,63,0.10); }
.delta.flat { color: var(--text-3); background: var(--glass-tint); }
.stat.selected { border-color: rgba(25,110,240,0.5); box-shadow: var(--glow-blue); }
.spark { width: 100%; height: 34px; display: block; margin-top: 6px; }
/* KPI tiles: identical height across every responsive layout (rows sized equally,
   each tile fills its cell, delta line anchored to the bottom so they align). */
.kpis { grid-auto-rows: 1fr; }
.kpis .stat { height: 100%; display: flex; flex-direction: column; }
.kpis .stat .stat-foot { margin-top: auto; }

/* ---------- Confidence meter ---------- */
.conf { display: flex; align-items: center; gap: 8px; }
.conf-track { width: 64px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.conf-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sky), var(--green)); }
.conf-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.table tbody tr { cursor: pointer; transition: background .14s ease; }
.table tbody tr:hover { background: var(--glass-tint); }
.table .bar-cell { position: relative; }
.inline-bar { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(3,5,10,0.55); backdrop-filter: blur(3px); z-index: 60; animation: fade .2s ease; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw); z-index: 61;
  border-left: 1px solid var(--glass-stroke); border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: linear-gradient(135deg, rgba(13,17,26,0.96), rgba(8,11,20,0.96));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: -30px 0 80px -30px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; animation: slidein .26s cubic-bezier(.2,.8,.2,1);
}
.drawer.wide { width: min(720px, 96vw); }
@keyframes slidein { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-head { padding: var(--s-5); border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.drawer-body { padding: var(--s-5); overflow-y: auto; flex: 1; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin-bottom: var(--s-3); flex-wrap: wrap; }
.breadcrumb .crumb { cursor: pointer; } .breadcrumb .crumb:hover { color: var(--text-2); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r); min-width: 240px; max-width: 380px; border: 1px solid var(--glass-stroke); background: linear-gradient(135deg, rgba(13,17,26,0.96), rgba(8,11,20,0.96)); backdrop-filter: blur(var(--glass-blur)); animation: rise .26s ease; font-size: 13px; color: var(--text); }
.toast.ok { border-color: rgba(93,202,165,0.45); } .toast.ok svg { color: var(--green); }
.toast.err { border-color: rgba(208,83,63,0.45); } .toast.err svg { color: var(--status-critical); }
.toast svg { width: 18px; height: 18px; flex: none; }

/* ---------- Skeleton / empty / error ---------- */
.skel { border-radius: var(--r); background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty, .errbox { text-align: center; padding: var(--s-8) var(--s-5); color: var(--text-3); }
.empty svg, .errbox svg { width: 34px; height: 34px; color: var(--text-4); margin-bottom: var(--s-3); }
.errbox svg { color: var(--status-critical); }

/* ---------- Command palette ---------- */
.cmdk-scrim { position: fixed; inset: 0; background: rgba(3,5,10,0.6); backdrop-filter: blur(4px); z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; animation: fade .15s ease; }
.cmdk { width: min(620px, 92vw); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--glass-stroke-hover); background: linear-gradient(135deg, rgba(13,17,26,0.98), rgba(8,11,20,0.98)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85); animation: rise .2s ease; }
.cmdk-input { width: 100%; border: none; background: transparent; padding: 18px 20px; font-family: var(--font-sans); font-size: 16px; color: var(--text); border-bottom: 1px solid var(--border); }
.cmdk-input:focus { outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.cmdk-group { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-4); padding: 10px 12px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); cursor: pointer; color: var(--text-2); }
.cmdk-item .k { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }
.cmdk-item.active, .cmdk-item:hover { background: var(--accent-dim); color: var(--text); }
.cmdk-item svg { width: 16px; height: 16px; color: var(--text-3); }
.kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border-2); color: var(--text-3); background: var(--glass-tint); }

/* ---------- Segmented control / chips ---------- */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r); border: 1px solid var(--border); background: rgba(0,0,0,0.2); }
.seg button { border: none; background: transparent; color: var(--text-3); font-family: var(--font-sans); font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 8px; cursor: pointer; }
.seg button.active { background: var(--glass-tint-strong); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--text-3); cursor: pointer; user-select: none; }
.chip:hover { color: var(--text); border-color: var(--glass-stroke-hover); }
.chip.on { color: var(--text); background: var(--accent-dim); border-color: rgba(25,110,240,0.4); }
/* Creative channel tabs — selected chip carries the performance-tile illumination */
.channel-tabs .chip.on { border-color: rgba(25,110,240,0.5); box-shadow: 0 10px 30px -10px rgba(25,110,240,0.6), inset 0 1px 0 rgba(255,255,255,0.10); }

/* ---------- Graph / chart containers ---------- */
.graph-host { width: 100%; height: 700px; border-radius: var(--r-lg); position: relative; overflow: hidden; background: radial-gradient(800px 400px at 50% 0%, rgba(25,110,240,0.05), transparent 70%); }
.graph-host.sm { height: 460px; }
.graph-controls { position: absolute; top: var(--s-3); right: var(--s-3); display: flex; gap: 6px; z-index: 5; }
.legend { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 5; display: flex; gap: 7px; flex-wrap: wrap; }
.chart-host { position: relative; width: 100%; }
.chart-host canvas { width: 100% !important; }

/* ---------- Funnel ---------- */
.funnel { display: flex; flex-direction: column; gap: 7px; }
.funnel-row { display: grid; grid-template-columns: 120px 1fr 92px; align-items: center; gap: var(--s-3); }
.funnel-bar { height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); position: relative; min-width: 3px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.funnel-row .lab { font-size: 12px; color: var(--text-3); }
.funnel-row .val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--text); }
.leak { font-family: var(--font-mono); font-size: 10px; color: var(--warm-2); }

/* ---------- Heatmap ---------- */
.heat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.heat-cell { padding: var(--s-3); border-radius: var(--r); border: 1px solid var(--border); cursor: pointer; transition: transform .15s ease; }
.heat-cell:hover { transform: translateY(-2px); border-color: var(--glass-stroke-hover); }
.heat-cell .m { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.heat-cell .v { font-family: var(--font-serif); font-size: 20px; margin-top: 4px; }

/* ---------- Activity feed ---------- */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.feed-item:last-child { border-bottom: none; }
.feed-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--fam-bg, var(--glass-tint)); color: var(--fam-fg, var(--text-3)); }
.feed-ico svg { width: 14px; height: 14px; }
.feed-time { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); white-space: nowrap; }

/* ---------- Approval card ---------- */
.appr { padding: var(--s-4); border-radius: var(--r-md); border-left: 3px solid var(--gate-fg, var(--accent)); }
.appr.gate-budget-shift { --gate-fg: var(--green); }
.appr.gate-creative-publication { --gate-fg: var(--warm-2); }
.appr.gate-campaign-launch, .appr.gate-campaign-pause { --gate-fg: var(--sky); }
.appr.gate-strategic-pivot { --gate-fg: var(--accent-2); }
.appr.gate-compliance, .appr.gate-brand-safety { --gate-fg: var(--status-critical); }
.appr .gate-tag { color: var(--gate-fg); border-color: color-mix(in srgb, var(--gate-fg) 40%, transparent); background: color-mix(in srgb, var(--gate-fg) 10%, transparent); }
.sla { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-2); }
.sla.warn { color: var(--warm-2); border-color: rgba(224,138,104,0.4); }
.sla.crit { color: var(--status-critical); border-color: rgba(208,83,63,0.45); }
.diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin-top: var(--s-3); }
.diff-col { padding: var(--s-3); border-radius: var(--r); border: 1px solid var(--border); background: rgba(0,0,0,0.18); font-size: 12px; }
.diff-col h5 { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; }
.diff-arrow { align-self: center; color: var(--text-4); }

/* priority flag */
.prio { width: 8px; height: 8px; border-radius: 999px; }
.prio.critical { background: var(--status-critical); } .prio.high { background: var(--warm-2); }
.prio.normal { background: var(--sky); } .prio.low { background: var(--text-4); }

/* diagnostics callout */
.callout { display: flex; gap: 12px; padding: var(--s-3) var(--s-4); border-radius: var(--r); border: 1px solid var(--border); cursor: pointer; align-items: flex-start; }
.callout:hover { border-color: var(--glass-stroke-hover); background: var(--glass-tint); }
.callout .cdot { width: 9px; height: 9px; border-radius: 999px; margin-top: 5px; flex: none; }
.callout.sev-critical .cdot { background: var(--status-critical); } .callout.sev-high .cdot { background: var(--warm-2); } .callout.sev-normal .cdot { background: var(--green); }
.callout .ctitle { font-size: 13px; color: var(--text); }
.callout .cdetail { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* misc */
.divider { height: 1px; background: var(--border); margin: var(--s-4) 0; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; }
.kv .k { color: var(--text-3); } .kv .v { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.tiles-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.tiles-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.mini-stat { padding: var(--s-3); border-radius: var(--r); border: 1px solid var(--border); }
.mini-stat .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); }
.mini-stat .v { font-family: var(--font-serif); font-size: 22px; margin-top: 3px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border-2); border-top-color: var(--accent-2); border-radius: 999px; animation: spin .7s linear infinite; }

/* Full-logo brand (sidebar) — wordmark + product line; favicon stays browser-tab only */
.brand.brand-full { flex-direction: column; align-items: flex-start; gap: 8px; }
.brand-logo { width: 100%; max-width: 174px; height: auto; display: block; }
.brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-4); }
.brand-mini { display: none; } /* V mark — collapsed rail only (base.css swaps it in ≤1100px) */

/* ---- authentication gate (Milestone C) ---- */
.auth-gate{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:min(420px,100%);padding:28px 28px 24px}
.auth-logo{width:150px;display:block;margin-bottom:16px}
.auth-field{display:flex;flex-direction:column;gap:4px}
.auth-field>span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.auth-error{color:var(--status-critical);font-size:12px}
.auth-link{color:var(--accent-2);cursor:pointer;text-decoration:underline}
/* viewers: the server refuses every change; the interface hides the controls too */
body.role-viewer #main .btn-primary:not([data-go]),body.role-viewer #main .btn-danger,body.role-viewer #main [data-del],body.role-viewer #main [data-act],body.role-viewer #main [data-edit],body.role-viewer #main [data-lact],body.role-viewer #main [data-launchprep],body.role-viewer #main [data-pull],body.role-viewer #main [data-dec],body.role-viewer #main [data-st],body.role-viewer #main [data-save],body.role-viewer #main [data-pedit],body.role-viewer #main [data-pdel],body.role-viewer #main [data-pregen],body.role-viewer #main [data-recalc],body.role-viewer #main [data-resubmit],body.role-viewer #main [data-lgo],body.role-viewer #main [data-wdack],body.role-viewer #main [data-rec],body.role-viewer #main [data-up],body.role-viewer #main #popDraft,body.role-viewer #main #popBlank,body.role-viewer #main #cvNew,body.role-viewer #main #wdRun,body.role-viewer #main #regenBtn{display:none!important}

/* ---- workspace switcher (Milestone D) ---- */
.ws-switch{position:relative;margin:2px 10px 10px}
.ws-switch-btn{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.ws-switch-btn:hover{border-color:var(--border-2);background:rgba(255,255,255,0.05)}
.ws-switch-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 3px var(--accent-dim)}
.ws-switch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-switch-caret{width:14px;height:14px;color:var(--text-4)}
.ws-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.5);padding:6px;max-height:320px;overflow:auto}
.ws-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;border-radius:var(--r-sm);border:0;background:none;color:var(--text-2);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.ws-menu-item:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.ws-menu-item.on{color:var(--text);background:var(--accent-dim)}
.ws-menu-item .dim{font-size:10px}
.ws-menu-sep{height:1px;background:var(--border);margin:6px 2px}
@media (max-width:1100px){.ws-switch{margin:2px 6px 8px}.ws-switch-name,.ws-switch-caret{display:none}.ws-switch-btn{justify-content:center;padding:8px}}

/* ---- update notice (server build changed → reload to get fresh page modules) ---- */
.update-notice{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9500;display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.5);font-size:12.5px;color:var(--text);max-width:calc(100vw - 32px)}
.update-notice i{width:16px;height:16px;color:var(--accent);flex:none}