:root {
  --bg: #020611;
  --surface: #07101f;
  --surface-2: #0a1729;
  --surface-3: #10213a;
  --border: #1a2e4b;
  --border-soft: #11233b;
  --text: #f4f8ff;
  --muted: #9eacc3;
  --muted-2: #7586a3;
  --primary: #28568d;
  --primary-bright: #6f99c8;
  --primary-deep: #173c6a;
  --green: #4adea4;
  --amber: #f5b84b;
  --red: #f27474;
  --blue: #416f9f;
  --sidebar: 244px;
  --sidebar-collapsed: 72px;
  --radius: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .23);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
h2 { margin-bottom: 4px; font-size: 18px; letter-spacing: -.015em; }
h3 { margin-bottom: 6px; }
p { color: var(--muted); }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: var(--primary-bright); color: #031127; font-weight: 700; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.block { display: block; }
.muted { color: var(--muted-2); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; color: var(--text); }

.app-shell { min-height: 100dvh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column; padding: 20px 14px 16px; border-right: 1px solid var(--border-soft); background: #050c18; transition: width .2s ease, padding .2s ease; }
.brand { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 8px; }
.brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; transition: opacity .14s ease; }
.brand strong { font-size: 19px; letter-spacing: -.02em; }
.brand small { margin-top: 3px; color: var(--muted-2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark { position: relative; width: 38px; height: 38px; flex: 0 0 38px; overflow: visible; border-radius: 50%; background: radial-gradient(circle at 39% 34%, #d6e5f4 0 5%, #6f99c8 6% 14%, #28568d 28%, #071326 62%); box-shadow: inset 0 0 0 2px #315d91, inset 0 0 0 6px rgba(2,6,17,.72), 0 0 18px rgba(40,86,141,.25); }
.brand-mark:before { content: ""; position: absolute; inset: -3px; border: 1px solid #345f91; border-radius: 50%; }
.brand-mark:after { content: ""; position: absolute; width: 8px; height: 3px; left: 10px; top: 9px; border-radius: 50%; background: rgba(255,255,255,.72); transform: rotate(-30deg); }
.brand-mark span { display: none; }
.sidebar-collapse { position: absolute; right: -14px; top: 72px; z-index: 2; display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: #07101f; box-shadow: 0 4px 16px rgba(0,0,0,.28); cursor: pointer; }
.sidebar-collapse:hover { color: var(--text); border-color: #31547d; }
.sidebar-collapse svg { width: 15px; height: 15px; transition: transform .2s ease; }
.nav { display: flex; flex-direction: column; gap: 3px; margin-top: 28px; }
.nav a, .sidebar-foot > a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 9px; color: #a1a1b2; font-weight: 550; transition: color .18s ease, background .18s ease, transform .18s ease; }
.nav a:hover, .sidebar-foot > a:hover { color: var(--text); background: var(--surface-2); }
.nav a.active, .sidebar-foot > a.active { color: #dceeff; background: rgba(59,130,246,.16); }
.nav a.active:before, .sidebar-foot > a.active:before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); box-shadow: 0 0 14px var(--primary); }
.nav svg, .sidebar-foot > a svg { width: 20px; height: 20px; flex: 0 0 20px; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot { margin-top: auto; }
.user-row { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 14px 4px 0; border-top: 1px solid var(--border-soft); }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #31547d; border-radius: 9px; color: var(--text); background: #102541; font-weight: 800; }
.user-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.25; }
.user-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.user-copy small { color: var(--muted-2); font-size: 11px; }
.icon-button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; transition: .18s ease; }
.icon-button:hover { color: var(--text); background: var(--surface-3); }
.icon-button svg { width: 19px; height: 19px; }
.icon-button.danger:hover { color: var(--red); }

.main { min-height: 100dvh; margin-left: var(--sidebar); padding: 30px clamp(22px, 3.2vw, 46px) 50px; transition: margin-left .2s ease; }
.main:before { content: ""; position: fixed; z-index: -1; width: 600px; height: 440px; right: -260px; top: -260px; border-radius: 50%; background: rgba(37,99,235,.12); filter: blur(70px); }
.mobile-header { display: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1500px; margin: 0 auto 20px; }
.page-head p { margin: 0; font-size: 16px; }
.page-head .eyebrow { margin-bottom: 8px; }
.head-actions { display: flex; gap: 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-bright); font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 1px solid transparent; border-radius: 9px; font-weight: 700; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(103,183,255,.42); outline-offset: 2px; }
.button.primary { color: #fff; background: linear-gradient(135deg, #28568d, #183b66); box-shadow: 0 7px 22px rgba(8,31,62,.34); }
.button.primary:hover { background: linear-gradient(135deg, #315f96, #1c4678); box-shadow: 0 9px 28px rgba(8,31,62,.48); }
.button.secondary { color: var(--text); border-color: #29456c; background: var(--surface-2); }
.button.secondary:hover { border-color: #3b6398; background: var(--surface-3); }
.button.subtle { color: #c9e7ff; border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.1); }
.button.danger-subtle { color: #ff9b9b; border-color: rgba(242,116,116,.2); background: rgba(242,116,116,.08); }
.button.wide { width: 100%; }

.panel { max-width: 1500px; margin-inline: auto; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgba(10,23,41,.98), rgba(5,13,26,.98)); box-shadow: 0 1px 0 rgba(255,255,255,.025); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-head p { margin: 0; font-size: 13px; }
.panel-head > a { color: var(--primary-bright); font-size: 13px; font-weight: 650; }
.metrics-grid { display: grid; max-width: 1500px; margin: 0 auto 14px; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.metric-card { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, #0b192c, #061120); }
.metric-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; }
.metric-icon svg { width: 22px; height: 22px; }
.metric-icon.violet { color: var(--primary-bright); background: rgba(59,130,246,.14); }
.metric-icon.amber { color: var(--amber); background: rgba(245,184,75,.1); }
.metric-icon.green { color: var(--green); background: rgba(74,222,164,.1); }
.metric-icon.red { color: var(--red); background: rgba(242,116,116,.1); }
.metric-card > div { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 8px; }
.metric-card small { grid-column: 1/-1; color: var(--muted); }
.metric-card strong { margin-top: 1px; font-size: 23px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-card span:last-child { padding-bottom: 3px; color: var(--muted-2); font-size: 11px; }
.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); padding-inline: 10px; }
.sidebar-collapsed .main { margin-left: var(--sidebar-collapsed); }
.sidebar-collapsed .brand { justify-content: center; padding: 0; }
.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .user-copy,
.sidebar-collapsed .user-row form { width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.sidebar-collapsed .nav a,
.sidebar-collapsed .sidebar-foot > a { justify-content: center; gap: 0; padding-inline: 0; }
.sidebar-collapsed .nav a.active:before,
.sidebar-collapsed .sidebar-foot > a.active:before { left: -10px; }
.sidebar-collapsed .user-row { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.content-grid { display: grid; max-width: 1500px; margin: 0 auto 22px; gap: 18px; }
.content-grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.stack { display: flex; flex-direction: column; gap: 18px; }

.job-list { margin: -4px -4px 0; }
.job-row { display: grid; grid-template-columns: 24px minmax(0,1fr) minmax(110px, 160px); align-items: center; gap: 12px; padding: 12px 5px; border-top: 1px solid var(--border-soft); }
.job-row:first-child { border-top: 0; }
.job-state { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--border); border-radius: 50%; }
.job-state > span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.job-state.running > span, .job-state.queued > span { background: var(--primary); box-shadow: 0 0 8px var(--primary); animation: pulse 1.8s infinite; }
.job-state.complete > span { background: var(--green); }
.job-state.failed > span, .job-state.blocked > span { background: var(--red); }
.job-copy { display: flex; min-width: 0; flex-direction: column; }
.job-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.job-copy small { color: var(--muted-2); font-size: 11px; }
.job-progress > span { display: block; margin-bottom: 5px; color: var(--muted); text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.job-progress > div, .budget-bar { height: 4px; overflow: hidden; border-radius: 9px; background: #1b2c48; }
.job-progress i, .budget-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-deep), var(--primary-bright)); }
.guard-card { text-align: center; }
.guard-card .panel-head { text-align: left; }
.guard-visual { display: grid; min-height: 120px; place-items: center; }
.guard-ring { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(74,222,164,.22); border-radius: 50%; color: var(--green); background: radial-gradient(circle, rgba(74,222,164,.12), transparent 68%); box-shadow: 0 0 42px rgba(74,222,164,.08); }
.guard-ring svg { width: 38px; height: 38px; }
.guard-card > p { max-width: 300px; margin: 0 auto 16px; font-size: 13px; }
.check-list { display: inline-flex; margin: 0; padding: 0; flex-direction: column; gap: 7px; color: var(--muted); text-align: left; list-style: none; font-size: 12px; }
.check-list li:before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 800; }
.source-strip { margin-bottom: 22px; }
.source-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.source-mini { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 70px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: rgba(255,255,255,.018); transition: .18s ease; }
.source-mini:hover { border-color: var(--border); background: var(--surface-3); }
.thumb, .tiny-thumb { display: grid; overflow: hidden; place-items: center; border-radius: 8px; color: var(--primary); background: #12233d; }
.thumb { width: 54px; height: 48px; }
.thumb img, .tiny-thumb img { width: 100%; height: 100%; object-fit: cover; }
.source-mini > div:nth-child(2), .table-source > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.source-mini strong, .table-source strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.source-mini small, .table-source small { overflow: hidden; color: var(--muted-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.pill { display: inline-flex; width: max-content; min-height: 25px; align-items: center; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.03); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill.allowed, .pill.approved, .pill.ready, .pill.published, .pill.complete, .pill.public { color: #79ebbb; border-color: rgba(74,222,164,.2); background: rgba(74,222,164,.08); }
.pill.review, .pill.suggested, .pill.checking_rights, .pill.processing, .pill.rendering, .pill.publishing, .pill.queued, .pill.running, .pill.unlisted { color: #b9ddff; border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.11); }
.pill.blocked, .pill.failed, .pill.rejected { color: #ff9999; border-color: rgba(242,116,116,.2); background: rgba(242,116,116,.08); }
.pill.new, .pill.private, .pill.muted { color: #aaaabd; }

.intake-card { display: grid; grid-template-columns: 48px minmax(220px,.7fr) minmax(330px,1.3fr); align-items: center; gap: 16px; margin-bottom: 18px; }
.intake-card h2, .intake-card p { margin: 0; }
.intake-card p { font-size: 13px; }
.intake-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 11px; color: var(--primary-bright); background: rgba(59,130,246,.13); }
.intake-icon svg { width: 22px; height: 22px; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }
label { display: block; margin-bottom: 7px; color: #d2d2dd; font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #29415f; border-radius: 8px; outline: none; color: var(--text); background: #071224; transition: border-color .18s ease, box-shadow .18s ease; }
textarea { resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: #3b6398; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
input::placeholder { color: #606073; }
select { appearance: auto; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 11px 13px; color: var(--muted-2); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
td { padding: 13px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; vertical-align: middle; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(255,255,255,.018); }
.table-source { display: flex; max-width: 420px; align-items: center; gap: 10px; }
.tiny-thumb { width: 48px; height: 34px; flex: 0 0 48px; }
.row-link { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; color: var(--primary-bright); font-size: 18px; }
.row-link:hover { background: rgba(59,130,246,.13); }
.empty { display: flex; min-height: 190px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.empty strong { font-size: 17px; }
.empty p { max-width: 430px; margin: 4px 0 14px; font-size: 13px; }
.empty.compact { min-height: 70px; }
.empty.large { min-height: 430px; }
.empty-icon { display: grid; width: 64px; height: 64px; margin-bottom: 15px; place-items: center; border-radius: 18px; color: var(--primary-bright); background: rgba(59,130,246,.13); }
.empty-icon svg { width: 30px; height: 30px; }

.crumb { display: flex; max-width: 1500px; margin: 0 auto 18px; gap: 8px; color: var(--muted-2); font-size: 12px; }
.crumb a { color: var(--primary-bright); }
.detail-head { align-items: center; }
.detail-head h1 { max-width: 850px; margin-top: 11px; font-size: 30px; }
.alert { display: flex; max-width: 1500px; margin: 0 auto 18px; padding: 13px 16px; border: 1px solid; border-radius: 10px; gap: 10px; font-size: 13px; }
.alert.error { color: #ffb0b0; border-color: rgba(242,116,116,.25); background: rgba(242,116,116,.08); }
.alert span { color: var(--muted); }
.evidence-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 0; }
.evidence-grid > div, .media-card dl > div { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.025); }
dt { margin-bottom: 3px; color: var(--muted-2); font-size: 10px; font-weight: 700; text-transform: uppercase; }
dd { margin: 0; font-size: 12px; }
dd a { color: var(--primary-bright); }
.evidence-note { margin-top: 12px; padding: 12px; border-left: 2px solid var(--green); color: var(--muted); background: rgba(74,222,164,.035); font-size: 12px; }
.candidate-list { margin: -5px 0; }
.candidate-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.candidate-row:first-child { border-top: 0; }
.candidate-row .score { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--primary-bright); background: rgba(59,130,246,.12); font-weight: 800; }
.candidate-row > div { display: flex; min-width: 0; flex-direction: column; }
.candidate-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-row small { color: var(--muted-2); font-size: 10px; }
.candidate-row a { color: var(--primary-bright); font-size: 11px; }
details.panel { padding: 0; }
details.panel > summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 20px; cursor: pointer; font-weight: 700; }
details.panel > summary span { color: var(--muted); font-size: 11px; font-weight: 400; }
.transcript { max-height: 350px; overflow: auto; padding: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.8; }
.media-card img { width: 100%; aspect-ratio: 16/9; margin-bottom: 16px; border-radius: 9px; object-fit: cover; }
.media-card dl { display: grid; margin: 0 0 14px; gap: 6px; }
.media-card dl > div { display: flex; justify-content: space-between; }
.helper, .field-help { color: var(--muted-2); font-size: 11px; }
.form-stack { display: flex; flex-direction: column; gap: 6px; }
.form-stack .button { margin-top: 8px; }
.timeline > div { position: relative; display: flex; gap: 10px; padding: 0 0 15px 3px; }
.timeline i { width: 9px; height: 9px; margin-top: 5px; flex: 0 0 9px; border-radius: 50%; background: var(--muted-2); }
.timeline i.complete { background: var(--green); }.timeline i.failed, .timeline i.blocked { background: var(--red); }.timeline i.running, .timeline i.queued { background: var(--primary); }
.timeline span { display: flex; flex-direction: column; }.timeline strong { font-size: 11px; }.timeline small { color: var(--muted-2); font-size: 10px; }

.review-grid { display: grid; max-width: 1500px; margin: 0 auto; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.review-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .18s ease, border-color .18s ease; }
.review-card:hover { transform: translateY(-2px); border-color: #35547d; }
.video-frame { position: relative; aspect-ratio: 9/12; overflow: hidden; background: #07070b; }
.video-frame video { width: 100%; height: 100%; object-fit: contain; }
.video-placeholder { display: grid; height: 100%; place-items: center; color: var(--muted); }
.score-badge { position: absolute; right: 10px; top: 10px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: white; background: rgba(12,12,18,.78); backdrop-filter: blur(8px); font-size: 12px; font-weight: 800; }
.review-body { padding: 17px; }.review-body h2 { margin-top: 10px; font-size: 16px; }.review-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 11px; }
.hook { min-height: 43px; color: #b3b3c2; font-size: 12px; }.rights-line { display: flex; align-items: center; gap: 7px; margin: 12px 0; padding: 9px; border-radius: 8px; color: #8adfba; background: rgba(74,222,164,.05); font-size: 10px; }.rights-line svg { width: 16px; height: 16px; flex: 0 0 16px; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.review-actions form, .review-actions button { width: 100%; }

.settings-layout { display: grid; max-width: 1300px; margin: 0 auto; grid-template-columns: 190px minmax(0,1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { padding: 9px 11px; border-left: 2px solid transparent; color: var(--muted); font-size: 12px; }
.settings-nav a:hover { color: var(--text); border-left-color: var(--primary); }
.settings-content { min-width: 0; }
.settings-section { scroll-margin-top: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.form-grid.thirds { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 18px; }
.form-grid .span-2 { grid-column: 1/-1; }
.field-help { display: block; margin-top: 5px; }
.local-model-status { display: flex; min-height: 44px; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(74,222,164,.18); border-radius: 8px; background: rgba(74,222,164,.045); }.local-model-status > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(74,222,164,.55); }.local-model-status > span { display: flex; flex-direction: column; }.local-model-status strong { font-size: 11px; }.local-model-status small { color: var(--muted-2); font-size: 9px; }
.local-model-status.pending { border-color: rgba(232,184,95,.24); background: rgba(232,184,95,.05); }.local-model-status.pending > i { background: var(--amber); box-shadow: 0 0 8px rgba(232,184,95,.5); }
.local-model-status.offline { border-color: rgba(126,151,196,.2); background: rgba(126,151,196,.04); }.local-model-status.offline > i { background: var(--muted); box-shadow: none; }
.toggle-list { margin: 18px 0; border-top: 1px solid var(--border-soft); }
.toggle-row { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; margin: 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.toggle-row > span { display: flex; flex-direction: column; }.toggle-row small { color: var(--muted-2); font-weight: 400; }.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 99px; background: #363545; transition: .2s ease; }
.toggle-row i:after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #aaa9b8; transition: transform .2s ease, background .2s ease; }
.toggle-row input:checked + i { background: var(--primary-deep); }.toggle-row input:checked + i:after { transform: translateX(18px); background: white; }.toggle-row input:focus-visible + i { outline: 3px solid rgba(103,183,255,.42); outline-offset: 2px; }
.warning-toggle strong { color: #f0c987; }
.budget-value { font-weight: 800; font-variant-numeric: tabular-nums; }.budget-bar { height: 7px; margin-bottom: 20px; }
.sticky-save { position: sticky; z-index: 10; bottom: 15px; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border: 1px solid #2e4a70; border-radius: 11px; background: rgba(9,20,38,.94); box-shadow: var(--shadow); backdrop-filter: blur(14px); }.sticky-save span { color: var(--muted); font-size: 11px; }
.connection-form { display: flex; flex-direction: column; gap: 2px; }
.connection-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(280px,1.2fr) 38px; align-items: center; gap: 12px; min-height: 72px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.connection-copy { display: flex; align-items: center; gap: 10px; }.connection-copy > span:last-child { display: flex; flex-direction: column; }.connection-copy strong { font-size: 12px; }.connection-copy small { color: var(--muted-2); font-size: 10px; }
.connection-logo { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 8px; color: var(--primary-bright); background: rgba(59,130,246,.12); font-weight: 800; }
.secret-input { position: relative; }.secret-input input { padding-right: 86px; }.connection-state { position: absolute; right: 10px; top: 50%; color: var(--muted-2); font-size: 9px; transform: translateY(-50%); text-transform: uppercase; }.connection-state.connected { color: var(--green); }
.connection-form > .button { align-self: flex-end; margin-top: 15px; }
.oauth-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 15px; border: 1px solid rgba(59,130,246,.24); border-radius: 10px; background: rgba(59,130,246,.07); }.oauth-box strong { font-size: 13px; }.oauth-box p { margin: 2px 0 0; font-size: 11px; }.muted-box { border-color: var(--border); background: rgba(255,255,255,.02); }
.path-chip { max-width: 380px; overflow: hidden; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: var(--surface); font-family: monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.learning-grid { display: grid; max-width: 1500px; margin: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.learning-card { margin: 0; }.learning-top { display: flex; align-items: center; justify-content: space-between; }.learning-top time { color: var(--muted-2); font-size: 10px; }.learning-card h2 { margin-top: 15px; }.learning-card p { font-size: 12px; }.learning-card details { margin-bottom: 10px; }.learning-card summary { color: var(--primary-bright); cursor: pointer; font-size: 11px; }.learning-card pre { overflow: auto; padding: 10px; border-radius: 7px; color: var(--muted); background: #071021; font-size: 10px; }.learning-card > small { color: var(--muted-2); font-family: monospace; }
.action-name { color: #b9ddff; font-family: monospace; }.table-wrap code { color: var(--muted); font-size: 10px; }
.account-table-cell { display: flex; min-width: 180px; flex-direction: column; }.account-table-cell strong { font-size: 11px; }.account-table-cell small { max-width: 260px; overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.toast { position: fixed; z-index: 100; right: 22px; top: 20px; max-width: 420px; padding: 12px 16px; border: 1px solid rgba(74,222,164,.25); border-radius: 10px; color: #a8f1d1; background: rgba(18,45,36,.96); box-shadow: var(--shadow); animation: slideIn .25s ease, fadeOut .3s ease 4.5s forwards; }.toast.error { color: #ffc0c0; border-color: rgba(242,116,116,.25); background: rgba(50,24,29,.96); }.toast.warning { color: #ffe0a1; border-color: rgba(245,184,75,.25); background: rgba(50,40,20,.96); }
.error-page { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 24px; flex-direction: column; text-align: center; }.error-page > span { color: var(--primary); font-size: 80px; font-weight: 900; }

/* Live dashboard */
.live-dashboard { margin-bottom: 14px; padding: 0; overflow: hidden; }
.live-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--border-soft); }
.live-dashboard-head h2 { margin: 2px 0; font-size: 19px; }.live-dashboard-head p { margin: 0; font-size: 10px; }
.range-switch { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: #071224; }
.range-switch button { min-width: 62px; min-height: 32px; padding: 5px 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.range-switch button:hover { color: var(--text); }.range-switch button[aria-pressed="true"] { color: #edf5ff; background: #17385f; box-shadow: inset 0 0 0 1px #2e5a8b; }
.chart-layout { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(260px,.8fr); gap: 1px; background: var(--border-soft); }
.chart-card { min-width: 0; padding: 16px 18px; background: linear-gradient(145deg, #0a1729, #061221); }
.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.chart-card-head > div { display: flex; flex-direction: column; }.chart-card-head small { color: var(--muted-2); font-size: 11px; }.chart-card-head strong { margin-top: 2px; font-size: 26px; font-variant-numeric: tabular-nums; }
.trend-chip, .live-dot { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 5px 9px; border: 1px solid rgba(74,222,164,.18); border-radius: 999px; color: #83e9bf; background: rgba(74,222,164,.07); font-size: 10px; white-space: nowrap; }
.live-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); animation: pulse 1.8s infinite; }
.line-chart-wrap { position: relative; width: 100%; }.line-chart { display: block; width: 100%; max-height: 210px; overflow: visible; }
.chart-grid-line { stroke: #203553; stroke-width: 1; stroke-dasharray: 3 7; }.chart-y-label { fill: var(--muted-2); stroke: none; font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-area { fill: url(#views-area-gradient); stroke: none; }.chart-line-glow { fill: none; stroke: rgba(65,111,159,.18); stroke-width: 12; filter: blur(3px); }.chart-line { fill: none; stroke: #6f99c8; stroke-width: 3; }.chart-point { fill: #081426; stroke: #789fca; stroke-width: 3; cursor: pointer; transition: r .15s ease; }.chart-point:hover, .chart-point:focus { r: 7; fill: #6f99c8; outline: none; }
.chart-tooltip { position: absolute; z-index: 2; min-width: 138px; padding: 8px 10px; border: 1px solid #35547d; border-radius: 8px; color: var(--text); background: rgba(5,11,24,.95); box-shadow: var(--shadow); font-size: 10px; pointer-events: none; transform: translate(-50%,-100%); }
.chart-axis-labels { position: relative; height: 20px; margin: -4px 24px 0 62px; }.chart-axis-labels span { position: absolute; color: var(--muted-2); font-size: 9px; transform: translateX(-50%); white-space: nowrap; }
.chart-data-details { margin-top: 10px; }.chart-data-details > summary { width: max-content; color: var(--muted-2); font-size: 10px; cursor: pointer; }.chart-data-details .table-wrap { max-height: 180px; margin-top: 8px; overflow: auto; }
.pipeline-bars { display: flex; min-height: 170px; flex-direction: column; justify-content: center; gap: 14px; }.pipeline-bar > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 10px; }.pipeline-bar strong { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }.pipeline-bar > div:last-child { height: 7px; overflow: hidden; border-radius: 99px; background: #142641; }.pipeline-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#173d6a,#5f88b7); transition: width .35s ease; }.pipeline-review i { background: linear-gradient(90deg,#8f651c,#d7a84b); }.pipeline-published i { background: linear-gradient(90deg,#14684d,#42bd90); }
.chart-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.chart-kpis > div { display: flex; padding: 11px; border: 1px solid var(--border-soft); border-radius: 9px; flex-direction: column; background: rgba(255,255,255,.018); }.chart-kpis span { color: var(--muted-2); font-size: 9px; text-transform: uppercase; }.chart-kpis strong { margin-top: 3px; font-size: 17px; }
.live-dashboard-foot { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 0 18px; border-top: 1px solid var(--border-soft); color: var(--muted-2); background: #061120; font-size: 9px; }.live-dashboard-foot span:before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }.live-dashboard-foot button { border: 0; color: var(--primary-bright); background: transparent; cursor: pointer; }.live-dashboard.has-error .live-dashboard-foot span:before { background: var(--red); box-shadow: none; }.live-dashboard.is-loading .chart-layout { opacity: .72; }

/* Private Vision chat */
.vision-chat { display: grid; width: min(1500px,100%); height: calc(100dvh - 102px); min-height: 640px; margin: 0 auto; overflow: hidden; grid-template-rows: auto minmax(0,1fr) auto; border: 1px solid var(--border); border-radius: 18px; background: #071021; box-shadow: var(--shadow); }
.vision-chat-head { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px; border-bottom: 1px solid var(--border-soft); background: rgba(11,20,38,.96); }.chat-heading { display: flex; min-width: 0; align-items: center; gap: 14px; }.chat-heading h1 { margin: 2px 0 3px; font-size: 21px; }.chat-heading p { margin: 0; font-size: 11px; }.chat-lens { width: 48px; height: 48px; flex-basis: 48px; }
.chat-agent-state { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }.chat-agent-state > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }.chat-agent-state > span { display: flex; flex-direction: column; line-height: 1.25; }.chat-agent-state strong { font-size: 11px; }.chat-agent-state small { color: var(--muted-2); font-size: 9px; }
.vision-chat-messages { min-height: 0; overflow-y: auto; padding: 22px clamp(16px,5vw,70px); }.vision-message-list { width: min(900px,100%); margin: 0 auto; }
.vision-message { display: flex; align-items: flex-end; gap: 10px; padding: 8px 0; animation: chatMessageIn .18s ease; }.vision-message.is-user { flex-direction: row-reverse; }.vision-message-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid #345578; border-radius: 50%; color: #cbe9ff; background: #102541; font-size: 10px; font-weight: 800; }.vision-message.is-user .vision-message-avatar { color: #051126; background: var(--primary-bright); }
.vision-message-body { width: fit-content; max-width: min(76%,720px); padding: 10px 13px; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; background: var(--surface-2); }.vision-message.is-user .vision-message-body { border-color: rgba(103,183,255,.35); border-radius: 14px 14px 4px 14px; background: rgba(37,99,235,.17); }.vision-message-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }.vision-message-meta strong { font-size: 10px; }.vision-message-meta time { color: var(--muted-2); font-size: 8px; }.vision-message-body p { margin: 0; color: #d9e5f5; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }.vision-message.is-user .vision-message-meta { justify-content: flex-end; }
.vision-chat-empty { display: flex; min-height: 100%; align-items: center; justify-content: center; padding: 30px; flex-direction: column; text-align: center; }.vision-chat-empty .empty-orbit { width: 66px; height: 66px; flex: 0 0 66px; }.vision-chat-empty h2 { margin: 18px 0 6px; }.vision-chat-empty p { max-width: 510px; margin: 0; font-size: 12px; }.chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }.chat-suggestions button { min-height: 36px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); cursor: pointer; }.chat-suggestions button:hover { color: var(--text); border-color: #3b6398; }
.vision-chat-form { width: min(920px,calc(100% - 34px)); margin: 0 auto 16px; padding: 9px; border: 1px solid #315174; border-radius: 15px; background: rgba(11,20,38,.97); box-shadow: 0 16px 50px rgba(0,0,0,.28); }.composer-context { display: flex; min-height: 26px; align-items: center; gap: 8px; padding: 0 5px 7px; }.composer-context span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; color: var(--muted-2); background: rgba(255,255,255,.025); font-size: 9px; }.composer-context i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.composer-row { display: flex; align-items: flex-end; gap: 8px; }.vision-chat-form textarea { min-height: 46px; max-height: 180px; padding: 12px; resize: none; border: 0; background: transparent; box-shadow: none; }.composer-send { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 0; border-radius: 11px; color: #031127; background: linear-gradient(135deg,var(--primary-bright),var(--primary)); cursor: pointer; }.composer-send:disabled { opacity: .5; cursor: wait; }.composer-send svg { width: 19px; height: 19px; }.composer-help { display: flex; min-height: 18px; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 5px 0; color: var(--muted-2); font-size: 9px; }.composer-help [role="alert"] { color: #ff9b9b; }
.typing-dots { min-width: 48px; height: 20px; display: flex; align-items: center; gap: 4px; }.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: typingDot 1s ease-in-out infinite; }.typing-dots i:nth-child(2) { animation-delay: .12s; }.typing-dots i:nth-child(3) { animation-delay: .24s; }

/* Local Vision Brain and safe skills */
.brain-page { width: min(1500px,100%); margin: 0 auto; }.brain-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.brain-page-head p { margin: 0; }.local-storage-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(74,222,164,.2); border-radius: 999px; color: #8ee7c2; background: rgba(74,222,164,.06); font-size: 10px; }.local-storage-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.brain-tabs { display: flex; width: max-content; margin: 0 auto 20px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: #071224; }.brain-tabs button { min-width: 126px; min-height: 40px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 750; cursor: pointer; }.brain-tabs button[aria-selected="true"] { color: var(--text); background: rgba(59,130,246,.19); box-shadow: inset 0 0 0 1px rgba(103,183,255,.25); }.brain-tabs button span { margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: var(--primary-bright); background: rgba(59,130,246,.14); font-size: 9px; }
.brain-graph-panel { padding-bottom: 14px; }.graph-legend { display: flex; gap: 12px; color: var(--muted-2); font-size: 10px; }.graph-legend span { display: inline-flex; align-items: center; gap: 5px; }.graph-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-bright); }.graph-legend i.category { width: 10px; height: 10px; background: var(--green); }
.brain-graph-wrap { position: relative; overflow: hidden; min-height: 480px; border: 1px solid var(--border-soft); border-radius: 12px; background: radial-gradient(circle at 50% 46%,rgba(37,99,235,.12),transparent 34%),#071224; }.brain-graph-wrap:before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(circle,#6c83a3 1px,transparent 1px); background-size: 24px 24px; pointer-events: none; }.brain-graph-wrap svg { position: relative; width: 100%; height: 480px; touch-action: none; }.brain-edge { stroke: #355070; stroke-width: 1.2; }.brain-node { cursor: grab; }.brain-node:active { cursor: grabbing; }.brain-node circle:not(.brain-node-halo) { fill: #67b7ff; stroke: #d6efff; stroke-width: 1.5; }.brain-node-category circle:not(.brain-node-halo) { fill: var(--green); }.brain-node-halo { fill: rgba(59,130,246,.09); stroke: rgba(103,183,255,.12); }.brain-node-category .brain-node-halo { fill: rgba(74,222,164,.1); stroke: rgba(74,222,164,.18); }.brain-node text { max-width: 130px; fill: #b9c8dc; stroke: none; font-size: 10px; pointer-events: none; }.brain-node-category text { fill: #e5fff5; font-weight: 750; }.brain-node:hover .brain-node-halo,.brain-node:focus .brain-node-halo,.brain-node.is-selected .brain-node-halo { fill: rgba(103,183,255,.22); stroke: var(--primary-bright); outline: none; }.graph-help { position: absolute; right: 12px; bottom: 9px; margin: 0; color: var(--muted-2); font-size: 9px; }.brain-learning-grid { margin-top: 16px; }
.skills-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }.skills-head h2 { margin: 3px 0 5px; font-size: 22px; }.skills-head p { max-width: 720px; margin: 0; font-size: 12px; }.skills-head form { flex: 0 0 auto; }.skills-list { display: flex; flex-direction: column; gap: 10px; }.skill-card { padding: 0; overflow: hidden; }.skill-card > summary { display: grid; min-height: 78px; align-items: center; grid-template-columns: 42px minmax(0,1fr) auto 24px; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }.skill-card > summary::-webkit-details-marker { display: none; }.skill-card summary > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.skill-card summary strong { font-size: 13px; }.skill-card summary small { overflow: hidden; color: var(--muted-2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.skill-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--primary-bright); background: rgba(59,130,246,.12); }.skill-icon svg { width: 19px; height: 19px; }.skill-chevron { width: 18px; height: 18px; color: var(--muted-2); transition: transform .2s ease; }.skill-card[open] .skill-chevron { transform: rotate(90deg); }.skill-detail { padding: 18px 22px 22px 70px; border-top: 1px solid var(--border-soft); background: rgba(5,11,24,.34); }.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }.skill-tags span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--primary-bright); background: rgba(59,130,246,.07); font-size: 9px; }.skill-instructions { color: #becbe0; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }.skill-security { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 10px 12px; border: 1px solid rgba(74,222,164,.16); border-radius: 9px; color: #8ee7c2; background: rgba(74,222,164,.05); font-size: 10px; }.skill-security span { color: var(--muted); }

/* Isolated publishing accounts */
.accounts-page { width: min(1500px,100%); margin: 0 auto; }
.accounts-head { align-items: center; }
.platform-tabs { display: flex; width: max-content; margin: 0 auto 14px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: #050e1c; }
.platform-tabs a,.platform-tabs button { display: inline-flex; min-width: 132px; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-weight: 700; cursor: pointer; }
.platform-tabs a:hover { color: var(--text); background: rgba(255,255,255,.025); }
.platform-tabs a.active { color: var(--text); background: #102541; box-shadow: inset 0 0 0 1px #274b74; }
.platform-tabs button:disabled { cursor: not-allowed; opacity: .42; }
.platform-tabs small { padding: 2px 5px; border-radius: 4px; color: var(--muted-2); background: rgba(255,255,255,.05); font-size: 8px; }
.platform-mark { display: grid; width: 24px; height: 24px; place-items: center; }.platform-mark svg { width: 20px; height: 20px; }
.account-separation-bar { display: grid; margin-bottom: 14px; padding: 13px 15px; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #06101e; }
.account-separation-bar > div { display: flex; min-width: 0; align-items: center; gap: 10px; }.account-separation-bar > i { width: 1px; height: 34px; background: var(--border); }.account-separation-bar > div > span:last-child { display: flex; min-width: 0; flex-direction: column; }.account-separation-bar strong { font-size: 11px; }.account-separation-bar small { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.account-separation-bar > a { color: var(--primary-bright); font-size: 10px; font-weight: 700; }
.separation-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 8px; color: var(--primary-bright); background: rgba(40,86,141,.14); }.separation-icon svg { width: 17px; height: 17px; }.separation-icon.publish { color: var(--green); background: rgba(74,222,164,.07); }
.platform-account-grid { display: grid; margin-bottom: 14px; grid-template-columns: repeat(auto-fit,minmax(min(100%,520px),1fr)); gap: 12px; }
.platform-account-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,#0a1728,#06101e); }
.platform-account-card > header { display: grid; min-height: 68px; padding: 13px 14px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--border-soft); }
.account-platform-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #29496f; border-radius: 9px; color: #d7e6f5; background: #10233d; }.account-platform-icon svg { width: 19px; height: 19px; }
.platform-account-card > header > div { display: flex; min-width: 0; flex-direction: column; }.platform-account-card > header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.platform-account-card > header small { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }.account-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }.account-status.connected i,.account-status.preview i { background: var(--green); box-shadow: 0 0 7px rgba(74,222,164,.55); }
.account-niche { min-height: 108px; padding: 14px; }.account-niche small { display: block; margin-bottom: 3px; color: var(--muted-2); font-size: 9px; text-transform: uppercase; }.account-niche strong { font-size: 15px; }.account-niche p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 10px; }
.account-routing-stats { display: grid; margin: 0 14px; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border-soft); border-radius: 9px; background: rgba(255,255,255,.014); }.account-routing-stats > div { display: flex; min-width: 0; padding: 10px; flex-direction: column; border-left: 1px solid var(--border-soft); }.account-routing-stats > div:first-child { border-left: 0; }.account-routing-stats span { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }.account-routing-stats strong { margin-top: 2px; font-size: 16px; }
.platform-account-card > footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }.platform-account-card > footer > details { margin-left: auto; }.platform-account-card > footer summary { color: var(--primary-bright); font-size: 10px; cursor: pointer; }.platform-account-card > footer details[open] { width: 100%; }.platform-account-card > footer:has(details[open]) { align-items: stretch; flex-direction: column; }
.account-ready { display: inline-flex; align-items: center; gap: 6px; color: #87d7b7; font-size: 10px; }.account-ready svg { width: 16px; height: 16px; }
.account-edit-form { display: grid; margin-top: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.account-edit-form > label:nth-of-type(3),.account-edit-form > label:nth-of-type(4),.account-edit-form > .form-grid,.account-edit-form > button { grid-column: 1/-1; }
.add-account { padding: 0; overflow: hidden; }.add-account > summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; cursor: pointer; }.add-account > summary span { font-weight: 750; }.add-account > summary small { color: var(--muted-2); }.add-account > form { padding: 16px; border-top: 1px solid var(--border-soft); }.add-account > form > .button { margin-top: 14px; }
.publish-target-form { display: flex; margin-top: 12px; flex-direction: column; gap: 8px; }.publish-target-form label { font-size: 10px; }.routing-hint { color: var(--muted-2); font-size: 9px; line-height: 1.45; }

@keyframes chatMessageIn { from { opacity: 0; transform: translateY(5px); } }
@keyframes typingDot { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.login-layout { display: grid; min-height: 100dvh; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); background: #050b18; }
.login-story { position: relative; display: flex; overflow: hidden; padding: 42px clamp(34px,6vw,86px); flex-direction: column; background: radial-gradient(circle at 70% 36%, rgba(37,99,235,.24), transparent 36%), linear-gradient(135deg,#0a1930,#050b18); }
.login-story:after { content: ""; position: absolute; width: 500px; height: 500px; right: -220px; bottom: -300px; border: 1px solid rgba(103,183,255,.18); border-radius: 50%; box-shadow: 0 0 0 80px rgba(59,130,246,.035),0 0 0 160px rgba(29,78,216,.024); }
.login-brand { z-index: 1; width: max-content; padding: 0; }.story-content { z-index: 1; max-width: 610px; margin: auto 0; }.story-content h1 { margin: 22px 0 18px; font-size: clamp(42px,5.4vw,76px); letter-spacing: -.055em; }.story-content h1 em { color: var(--primary-bright); font-style: normal; }.story-content > p { max-width: 570px; font-size: clamp(16px,1.5vw,20px); line-height: 1.7; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.flow-preview { display: flex; max-width: 500px; align-items: center; margin-top: 42px; }.flow-preview span { display: grid; width: 72px; height: 38px; place-items: center; border: 1px solid #28466f; border-radius: 8px; color: #b8c9e2; background: rgba(255,255,255,.025); font-size: 10px; text-transform: uppercase; }.flow-preview i { height: 1px; flex: 1; background: linear-gradient(90deg,var(--primary),rgba(103,183,255,.22)); }
.story-foot { z-index: 1; margin: 0; font-size: 11px; letter-spacing: .05em; }.login-panel { display: grid; padding: 30px; place-items: center; border-left: 1px solid var(--border-soft); background: #071021; }.login-card { width: min(100%,420px); }.login-heading { margin-bottom: 30px; }.login-heading h2 { margin: 0 0 8px; font-size: 30px; }.login-heading p { font-size: 14px; }.login-card label { margin-top: 16px; }.login-card input { min-height: 49px; }.password-field { position: relative; }.password-field input { padding-right: 48px; }.password-toggle { position: absolute; right: 5px; top: 5px; display: grid; width: 39px; height: 39px; place-items: center; border: 0; color: var(--muted); background: transparent; cursor: pointer; }.password-toggle svg { width: 19px; }.login-card .button { margin-top: 24px; min-height: 49px; }.security-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; font-size: 10px; }.security-note svg { width: 14px; }.form-error { padding: 10px 12px; border: 1px solid rgba(242,116,116,.25); border-radius: 8px; color: #ffb0b0; background: rgba(242,116,116,.07); font-size: 12px; }.mobile-login-mark { display: none; }

@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .review-grid { grid-template-columns: repeat(2,1fr); }
  .source-mini-grid { grid-template-columns: repeat(2,1fr); }
  .intake-card { grid-template-columns: 48px 1fr; }.intake-card .inline-form { grid-column: 1/-1; }
  .evidence-grid { grid-template-columns: repeat(2,1fr); }
  .chart-layout { grid-template-columns: 1fr; }.pipeline-bars { min-height: auto; }.chart-card + .chart-card { border-top: 1px solid var(--border-soft); }
  .platform-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar,.sidebar-collapsed .sidebar { width: var(--sidebar); padding: 20px 14px 16px; transform: translateX(-100%); box-shadow: var(--shadow); transition: transform .2s ease; }.sidebar.open { transform: translateX(0); }.sidebar-collapse { display: none; }
  .sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .user-copy,.sidebar-collapsed .user-row form { width: auto; opacity: 1; overflow: visible; pointer-events: auto; }.sidebar-collapsed .brand,.sidebar-collapsed .nav a,.sidebar-collapsed .sidebar-foot > a { justify-content: flex-start; gap: 12px; padding-inline: 12px; }.sidebar-collapsed .user-row { justify-content: flex-start; }
  .main,.sidebar-collapsed .main { margin-left: 0; padding: 82px 18px 50px; }.mobile-header { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; height: 58px; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); background: rgba(5,12,24,.94); backdrop-filter: blur(12px); }.mobile-brand { font-weight: 800; }
  .content-grid.two-one { grid-template-columns: 1fr; }.settings-layout { grid-template-columns: 1fr; }.settings-nav { position: static; overflow-x: auto; flex-direction: row; padding-bottom: 5px; }.settings-nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .login-layout { grid-template-columns: 1fr; }.login-story { display: none; }.login-panel { min-height: 100dvh; border: 0; }.mobile-login-mark { display: block; margin-bottom: 24px; }
  .vision-chat { height: calc(100dvh - 105px); min-height: 560px; }.brain-page-head,.skills-head { align-items: stretch; flex-direction: column; }.skills-head form,.skills-head .button { width: 100%; }
  .account-separation-bar { grid-template-columns: 1fr; }.account-separation-bar > i { width: 100%; height: 1px; }.account-separation-bar > a { justify-self: start; }
}
@media (max-width: 620px) {
  .page-head { align-items: stretch; flex-direction: column; }.head-actions { display: grid; grid-template-columns: 1fr 1fr; }.head-actions .button { padding-inline: 10px; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.review-grid, .source-mini-grid, .learning-grid { grid-template-columns: 1fr; }
  .form-grid, .form-grid.thirds { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }
  .connection-row { grid-template-columns: 1fr 38px; }.connection-row .secret-input { grid-column: 1/-1; grid-row: 2; }.connection-row > .icon-button { grid-column: 2; grid-row: 1; }
  .inline-form { flex-direction: column; }.intake-card { grid-template-columns: 44px 1fr; }
  .job-row { grid-template-columns: 24px minmax(0,1fr); }.job-progress { grid-column: 2; }
  .evidence-grid { grid-template-columns: 1fr; }.candidate-row { grid-template-columns: 38px minmax(0,1fr); }.candidate-row > a { grid-column: 2; }
  .oauth-box, .sticky-save { align-items: stretch; flex-direction: column; }.sticky-save .button { width: 100%; }
  .path-chip { max-width: 100%; }.login-panel { padding: 24px; }
  .live-dashboard-head { align-items: stretch; flex-direction: column; }.range-switch { display: grid; grid-template-columns: repeat(4,1fr); }.range-switch button { min-width: 0; padding-inline: 7px; }.chart-card { padding: 18px 14px; }.chart-axis-labels { margin-left: 48px; }.chart-y-label { font-size: 8px; }
  .vision-chat { border-radius: 12px; }.vision-chat-head { min-height: 74px; padding: 11px 14px; }.chat-agent-state { display: none; }.chat-lens { width: 40px; height: 40px; flex-basis: 40px; }.chat-heading h1 { font-size: 17px; }.chat-heading p { display: none; }.vision-chat-messages { padding-inline: 11px; }.vision-message-avatar { display: none; }.vision-message-body { max-width: 88%; }.vision-chat-form { width: calc(100% - 18px); margin-bottom: 9px; }.composer-context span:last-child { display: none; }.composer-help span:last-child { display: none; }
  .brain-tabs { width: 100%; }.brain-tabs button { min-width: 0; flex: 1; }.brain-graph-wrap,.brain-graph-wrap svg { min-height: 380px; height: 380px; }.graph-legend { display: none; }.skill-card > summary { grid-template-columns: 38px minmax(0,1fr) 18px; }.skill-card summary > .pill { display: none; }.skill-detail { padding: 16px; }.skill-security { align-items: flex-start; flex-direction: column; }
  .platform-tabs { width: 100%; }.platform-tabs a,.platform-tabs button { min-width: 0; flex: 1; padding-inline: 7px; }.platform-tabs small { display: none; }.accounts-head { align-items: stretch; }.accounts-head .local-storage-badge { align-self: flex-start; }.platform-account-card > header { grid-template-columns: 38px minmax(0,1fr); }.account-status { grid-column: 2; }.account-edit-form { grid-template-columns: 1fr; }.account-edit-form > * { grid-column: auto !important; }.add-account > summary { align-items: flex-start; flex-direction: column; }.account-routing-stats span { font-size: 7px; }
  .metric-card { align-items: flex-start; min-height: 114px; flex-direction: column; }.metric-card > div { width: 100%; }.metric-card span:last-child { display: none; }
}