:root { --ops-accent: var(--sv-color-brand, #d7fc00); --ops-paper: #f6f3ed; --ops-ink: #191714; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--sv-color-canvas, #050505); color: var(--sv-color-text); font-family: var(--sv-font-sans); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -60px; padding: 10px 14px; background: var(--ops-accent); color: var(--sv-color-on-brand); }
.skip-link:focus { top: 12px; }

.ops-shell { width: min(1480px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0 72px; }
.ops-hero { position: relative; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); overflow: hidden; border: 1px solid var(--sv-color-border); background: var(--sv-color-surface, #101010); }
.ops-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, #000, transparent 83%); }
.ops-hero::after { content: "PHASE / 0"; position: absolute; right: 20px; top: 16px; color: var(--sv-color-text-faint); font: 700 11px/1 var(--sv-font-mono); letter-spacing: .18em; }
.hero-copy { position: relative; z-index: 1; padding: clamp(42px, 6vw, 92px); align-self: center; }
.back-link { display: inline-flex; margin-bottom: 64px; color: var(--sv-color-text-muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--ops-accent); }
.eyebrow, .section-heading span, .setup-card header span, .pipeline-note > span { color: var(--ops-accent); font: 700 11px/1 var(--sv-font-mono); letter-spacing: .17em; text-transform: uppercase; }
.hero-copy h1 { margin: 18px 0 24px; max-width: 750px; font-size: clamp(62px, 7.1vw, 112px); line-height: .86; letter-spacing: -.07em; font-weight: 770; }
.hero-copy h1 em { color: var(--ops-accent); font-style: normal; }
.hero-intro { max-width: 650px; margin: 0; color: var(--sv-color-text-muted); font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid transparent; border-radius: 3px; text-decoration: none; cursor: pointer; font-weight: 750; font-size: 13px; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--ops-accent); color: var(--ops-ink); }
.button--secondary { background: rgba(255,255,255,.03); border-color: var(--sv-color-border); color: var(--sv-color-text); }
.button--secondary:hover { border-color: rgba(var(--sv-brand-rgb), .45); }

.hero-status { position: relative; z-index: 1; min-height: 560px; padding: 64px 46px 42px; border-left: 1px solid var(--sv-color-border); display: flex; flex-direction: column; justify-content: center; background: rgba(4,5,4,.45); }
.status-orbit { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto 26px; display: grid; place-items: center; }
.status-orbit strong { font: 750 clamp(25px, 3vw, 42px)/1 var(--sv-font-mono); letter-spacing: -.04em; }
.orbit-ring { position: absolute; border: 1px solid rgba(var(--sv-brand-rgb), .24); border-radius: 50%; }
.orbit-ring--outer { inset: 0; animation: orbit 24s linear infinite; border-style: dashed; }
.orbit-ring--inner { inset: 17%; border-color: var(--sv-color-border-soft); }
.status-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ops-accent); box-shadow: 0 0 20px var(--ops-accent); }
.status-orbit i:nth-of-type(1) { top: 6%; left: 48%; } .status-orbit i:nth-of-type(2) { right: 6%; top: 48%; opacity: .35; } .status-orbit i:nth-of-type(3) { bottom: 6%; left: 48%; opacity: .18; } .status-orbit i:nth-of-type(4) { left: 6%; top: 48%; opacity: .65; }
@keyframes orbit { to { transform: rotate(360deg); } }
.status-copy { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); }
.signal-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #8b8d88; box-shadow: 0 0 0 5px rgba(139,141,136,.1); }
.signal-dot.is-active { background: var(--ops-accent); box-shadow: 0 0 0 5px rgba(var(--sv-brand-rgb), .12); }
.status-copy div { display: flex; flex-direction: column; gap: 2px; }
.status-copy small { color: var(--sv-color-text-faint); font-size: 11px; }
.status-copy b { font-size: 14px; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; }
.hero-metrics div { padding: 0 14px; border-left: 1px solid var(--sv-color-border); }
.hero-metrics div:first-child { padding-left: 0; border-left: 0; }
.hero-metrics dt { min-height: 32px; color: var(--sv-color-text-faint); font-size: 11px; line-height: 1.4; }
.hero-metrics dd { margin: 6px 0 0; font: 700 25px/1 var(--sv-font-mono); }

.truth-strip { min-height: 58px; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 24px; padding: 12px 20px; background: var(--ops-paper); color: var(--ops-ink); }
.truth-strip span, .truth-strip b { font: 750 10px/1 var(--sv-font-mono); letter-spacing: .13em; }
.truth-strip p { margin: 0; font-size: 13px; }

.ops-section { padding: 88px 0 12px; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 430px); gap: 48px; align-items: end; margin-bottom: 30px; }
.section-heading h2 { margin: 10px 0 0; font-size: clamp(34px, 4vw, 58px); letter-spacing: -.055em; line-height: 1; }
.section-heading p { margin: 0; color: var(--sv-color-text-muted); font-size: 13px; line-height: 1.7; }

.platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sv-color-border); border-left: 1px solid var(--sv-color-border); }
.platform-card { --platform: var(--ops-accent); position: relative; min-height: 390px; display: flex; flex-direction: column; padding: 24px; overflow: hidden; border-right: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); background: var(--sv-color-surface); }
.platform-card::after { content: attr(data-short); position: absolute; right: -7px; top: 58px; color: var(--sv-color-text-faint); font: 800 104px/1 var(--sv-font-mono); letter-spacing: -.1em; pointer-events: none; }
.platform-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.platform-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--platform), transparent 48%); color: var(--platform); font: 750 12px/1 var(--sv-font-mono); }
.state-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid var(--sv-color-border); color: var(--sv-color-text-muted); font-size: 10px; }
.state-pill.is-connected { color: var(--ops-accent); border-color: rgba(var(--sv-brand-rgb), .35); }
.state-pill.is-action { color: #e4ba75; border-color: rgba(228,186,117,.3); }
.platform-card h3 { position: relative; z-index: 1; margin: 48px 0 5px; font-size: 25px; letter-spacing: -.03em; }
.platform-mode { position: relative; z-index: 1; min-height: 36px; margin: 0; color: var(--sv-color-text-faint); font-size: 11px; line-height: 1.5; }
.connection-identity { position: relative; z-index: 1; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sv-color-border-soft); }
.connection-identity small { display: block; margin-bottom: 5px; color: var(--sv-color-text-faint); font-size: 10px; }
.connection-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.connection-identity .connection-reason { display: block; margin-top: 6px; color: var(--sv-color-text-muted); font-size: 11px; font-style: normal; line-height: 1.35; }
.capability-dots { position: relative; z-index: 1; display: flex; gap: 5px; margin-top: auto; padding-top: 28px; }
.capability-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-color-surface-hover); }
.capability-dots i.available { background: var(--ops-accent); } .capability-dots i.experimental { background: #d0a45f; } .capability-dots i.manual { background: #e9e6dd; } .capability-dots i.unsupported { background: transparent; border: 1px solid #3e403d; }
.platform-action { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 15px 0 0; border: 0; border-top: 1px solid var(--sv-color-border-soft); background: transparent; color: var(--sv-color-text); text-decoration: none; text-align: left; font-size: 12px; }
.platform-action:hover { color: var(--platform); }
.platform-action[aria-disabled="true"] { color: var(--sv-color-text-faint); cursor: default; }
.skeleton-card { height: 390px; border-right: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); background: linear-gradient(105deg, var(--sv-color-surface) 30%, var(--sv-color-surface-strong) 45%, var(--sv-color-surface) 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.load-error { grid-column: 1 / -1; min-height: 220px; display: grid; place-content: center; gap: 7px; text-align: center; color: var(--sv-color-text-muted); }
.load-error b { color: var(--sv-color-text); }
@keyframes shimmer { to { background-position-x: -200%; } }

.pipeline-board { display: grid; grid-template-columns: 1.5fr .65fr; border: 1px solid var(--sv-color-border); }
.pipeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.pipeline-steps li { position: relative; min-height: 280px; padding: 22px; border-right: 1px solid var(--sv-color-border); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.pipeline-steps li::after { content: ""; position: absolute; top: 51px; left: 22px; right: -1px; height: 1px; background: rgba(var(--sv-brand-rgb), .2); }
.pipeline-steps > li > span { position: relative; z-index: 1; padding-right: 8px; background: var(--sv-color-surface-subtle); color: var(--ops-accent); font: 700 10px/1 var(--sv-font-mono); }
.pipeline-steps div { position: absolute; left: 22px; right: 22px; bottom: 25px; }
.pipeline-steps b { display: block; color: var(--sv-color-text-muted); font-size: 12px; font-weight: 500; }
.pipeline-steps strong { display: block; margin-top: 10px; font: 750 clamp(42px, 5vw, 70px)/1 var(--sv-font-mono); letter-spacing: -.08em; }
.pipeline-note { padding: 36px; background: var(--ops-accent); color: var(--ops-ink); }
.pipeline-note > span { color: rgba(8,9,8,.55); }
.pipeline-note h3 { margin: 62px 0 14px; max-width: 260px; font-size: 28px; letter-spacing: -.04em; }
.pipeline-note p { margin: 0; color: rgba(8,9,8,.7); font-size: 13px; line-height: 1.7; }
.pipeline-links { display: flex; flex-direction: column; gap: 8px; margin-top: 45px; }
.pipeline-links a { padding: 12px 0; border-top: 1px solid rgba(8,9,8,.25); text-decoration: none; font-size: 12px; font-weight: 750; }

.skill-lab-head { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; border: 1px solid var(--sv-color-border); border-bottom: 0; background: linear-gradient(90deg, rgba(177,108,255,.06), transparent 45%), var(--sv-color-surface-subtle); }
.skill-lab-head > div { display: flex; align-items: center; gap: 16px; }
.skill-lab-head strong { min-width: 58px; color: #c49aff; font: 750 33px/1 var(--sv-font-mono); }
.skill-lab-head p { display: grid; gap: 4px; margin: 0; }
.skill-lab-head b { font: 700 10px/1 var(--sv-font-mono); letter-spacing: .12em; }
.skill-lab-head small { color: var(--sv-color-text-faint); }
.writing-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sv-color-border); border-left: 1px solid var(--sv-color-border); }
.writing-skill-card { position: relative; min-height: 300px; display: flex; flex-direction: column; overflow: hidden; padding: 22px; border: 0; border-right: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); background: var(--sv-color-surface-subtle); color: var(--sv-color-text); text-align: left; cursor: pointer; }
.writing-skill-card::after { content: attr(data-version); position: absolute; right: -5px; top: 45px; color: rgba(196,154,255,.055); font: 800 92px/1 var(--sv-font-mono); letter-spacing: -.1em; }
.writing-skill-card:hover { background: var(--sv-color-surface); }
.writing-skill-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.writing-skill-top > span:first-child { color: #c49aff; font: 700 10px/1 var(--sv-font-mono); letter-spacing: .08em; }
.writing-skill-status { padding: 5px 8px; border: 1px solid var(--sv-color-border); color: var(--sv-color-text-muted); font-size: 9px; }
.writing-skill-status.active { color: var(--ops-accent); border-color: rgba(var(--sv-brand-rgb), .3); }
.writing-skill-card h3 { position: relative; z-index: 1; margin: 52px 0 8px; font-size: 24px; letter-spacing: -.04em; }
.writing-skill-card > p { position: relative; z-index: 1; min-height: 42px; margin: 0; color: var(--sv-color-text-muted); font-size: 11px; line-height: 1.6; }
.skill-scope-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; }
.skill-scope-chips span { padding: 4px 7px; background: rgba(196,154,255,.08); color: #d4b9fa; font-size: 9px; }
.skill-card-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sv-color-border-soft); color: var(--sv-color-text-faint); font-size: 9px; }
.skill-card-foot b { color: var(--sv-color-text-muted); font-family: var(--sv-font-mono); }
.skill-empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--sv-color-text-faint); border-right: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); }
.skill-empty span { color: #c49aff; font: 700 10px/1 var(--sv-font-mono); letter-spacing: .12em; }
.skill-empty b { color: var(--sv-color-text-muted); font-weight: 520; }

.unit-toolbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; border: 1px solid var(--sv-color-border); border-bottom: 0; background: var(--sv-color-surface-subtle); }
.unit-toolbar > div { display: flex; align-items: center; gap: 16px; }
.unit-toolbar > div > span { min-width: 58px; color: var(--ops-accent); font: 750 33px/1 var(--sv-font-mono); }
.unit-toolbar p { display: grid; gap: 4px; margin: 0; }
.unit-toolbar b { font: 700 10px/1 var(--sv-font-mono); letter-spacing: .12em; }
.unit-toolbar small { color: var(--sv-color-text-faint); }
.unit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sv-color-border); border-left: 1px solid var(--sv-color-border); }
.unit-card { min-height: 330px; display: flex; flex-direction: column; padding: 20px; border: 0; border-right: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); background: var(--sv-color-surface-subtle); color: var(--sv-color-text); text-align: left; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.unit-card:hover { z-index: 1; background: var(--sv-color-surface-strong); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.unit-card-top { display: flex; justify-content: space-between; align-items: center; }
.unit-code { color: var(--ops-accent); font: 700 10px/1 var(--sv-font-mono); letter-spacing: .08em; }
.unit-state { padding: 5px 8px; border: 1px solid var(--sv-color-border); color: var(--sv-color-text-muted); font-size: 9px; }
.unit-assets-preview { height: 116px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 22px; overflow: hidden; background: var(--sv-color-canvas-raised); }
.unit-assets-preview img, .unit-assets-preview video { width: 100%; height: 100%; object-fit: cover; background: var(--sv-color-surface-elevated); }
.video-tile { min-height: 74px; display: grid; place-content: center; gap: 5px; text-align: center; background: repeating-linear-gradient(135deg, var(--sv-color-surface-elevated), var(--sv-color-surface-elevated) 8px, var(--sv-color-surface) 8px, var(--sv-color-surface) 16px); color: var(--sv-color-text-muted); }
.video-tile b { color: var(--ops-accent); font-size: 18px; }
.video-tile small { font: 700 8px/1 var(--sv-font-mono); letter-spacing: .08em; }
.unit-assets-preview .video-tile { height: 100%; }
.unit-assets-preview .unit-no-media { grid-column: 1 / -1; display: grid; place-items: center; color: var(--sv-color-text-faint); font: 700 11px/1 var(--sv-font-mono); }
.unit-card h3 { margin: 20px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; letter-spacing: -.025em; }
.unit-card-meta { margin: 0; color: var(--sv-color-text-faint); font-size: 10px; }
.unit-readiness { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sv-color-border-soft); color: var(--sv-color-text-muted); font-size: 10px; }
.unit-readiness b { color: var(--ops-accent); font-family: var(--sv-font-mono); }
.unit-readiness.is-warn b { color: #d0a45f; }
.unit-empty { grid-column: 1 / -1; min-height: 280px; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--sv-color-text-faint); border-right: 1px solid var(--sv-color-border); border-bottom: 1px solid var(--sv-color-border); }
.unit-empty span { color: var(--ops-accent); font: 700 10px/1 var(--sv-font-mono); letter-spacing: .12em; }
.unit-empty b { color: var(--sv-color-text-muted); font-weight: 520; }

.matrix-wrap { overflow-x: auto; border: 1px solid var(--sv-color-border); }
.capability-matrix { width: 100%; min-width: 780px; border-collapse: collapse; background: var(--sv-color-surface-subtle); }
.capability-matrix th, .capability-matrix td { height: 68px; padding: 0 18px; text-align: left; border-right: 1px solid var(--sv-color-border-soft); border-bottom: 1px solid var(--sv-color-border-soft); }
.capability-matrix th { color: var(--sv-color-text-faint); font: 650 10px/1 var(--sv-font-mono); letter-spacing: .09em; text-transform: uppercase; }
.capability-matrix td:first-child { font-weight: 720; }
.matrix-state { display: inline-flex; align-items: center; gap: 7px; color: var(--sv-color-text-muted); font-size: 11px; }
.matrix-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #353835; }
.matrix-state.available::before { background: var(--ops-accent); } .matrix-state.experimental::before { background: #d0a45f; } .matrix-state.manual::before { background: #e9e6dd; } .matrix-state.unsupported::before { background: transparent; border: 1px solid #4c4f4b; }

.ops-footer { display: flex; justify-content: space-between; gap: 40px; margin-top: 82px; padding: 24px 0; border-top: 1px solid var(--sv-color-border); color: var(--sv-color-text-faint); font-size: 11px; }
.ops-footer span { font-family: var(--sv-font-mono); letter-spacing: .08em; }
.ops-footer p { margin: 0; }

.setup-dialog { width: min(700px, calc(100% - 28px)); max-height: calc(100vh - 36px); padding: 0; color: var(--sv-color-text); border: 1px solid rgba(var(--sv-brand-rgb), .32); background: var(--sv-color-surface); box-shadow: 0 40px 110px rgba(0,0,0,.7); }
.setup-dialog::backdrop, .account-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(8px); }
.setup-card { padding: clamp(28px, 5vw, 54px); }
.setup-card header { display: flex; justify-content: space-between; align-items: flex-start; }
.setup-card h2 { margin: 10px 0 0; font-size: 38px; letter-spacing: -.05em; }
.dialog-close { width: 38px; height: 38px; border: 1px solid var(--sv-color-border); background: transparent; color: var(--sv-color-text); cursor: pointer; font-size: 24px; }
.dialog-intro { margin: 18px 0 30px; color: var(--sv-color-text-muted); line-height: 1.7; font-size: 13px; }
.setup-card label { display: grid; gap: 8px; margin-top: 17px; }
.setup-card label > span { color: var(--sv-color-text-muted); font-size: 11px; }
.setup-card label b { color: var(--ops-accent); }
.setup-card input, .setup-card select, .setup-card textarea { width: 100%; border: 1px solid var(--sv-color-border); border-radius: 2px; outline: 0; background: var(--sv-color-canvas-raised); color: var(--sv-color-text); padding: 12px 13px; }
.setup-card input:focus, .setup-card select:focus, .setup-card textarea:focus { border-color: rgba(var(--sv-brand-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--sv-brand-rgb), .08); }
.setup-card textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.setup-card footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sv-color-border); }
#formStatus { color: #d0a45f; font-size: 11px; }
.account-dialog { width: min(920px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; color: var(--sv-color-text); border: 1px solid rgba(255,59,92,.35); background: var(--sv-color-surface-subtle); box-shadow: 0 40px 110px rgba(0,0,0,.72); }
.account-sheet { padding: clamp(26px, 4.8vw, 52px); }
.account-sheet-head { display: grid; grid-template-columns: 58px 1fr auto; gap: 18px; align-items: start; }
.account-platform-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,59,92,.48); color: #ff3b5c; font: 750 13px/1 var(--sv-font-mono); }
.account-sheet-head span, .connection-sequence header span { color: #ff6c82; font: 700 10px/1 var(--sv-font-mono); letter-spacing: .14em; }
.account-sheet-head h2 { margin: 7px 0 6px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.05em; }
.account-sheet-head p { margin: 0; color: var(--sv-color-text-muted); font-size: 12px; line-height: 1.6; }
.account-health { display: grid; grid-template-columns: minmax(210px, .8fr) 1.2fr; margin-top: 32px; border: 1px solid var(--sv-color-border); background: var(--sv-color-canvas-raised); }
.account-health > div { display: flex; gap: 12px; align-items: center; padding: 20px; border-right: 1px solid var(--sv-color-border); }
.account-signal { width: 11px; height: 11px; flex: none; border-radius: 50%; background: #666a65; box-shadow: 0 0 0 6px rgba(102,106,101,.1); }
.account-signal.is-ready { background: var(--ops-accent); box-shadow: 0 0 0 6px rgba(var(--sv-brand-rgb), .1); }
.account-signal.is-warn { background: #d0a45f; box-shadow: 0 0 0 6px rgba(208,164,95,.1); }
.account-health p { display: grid; gap: 4px; margin: 0; }
.account-health small, .account-health dt { color: var(--sv-color-text-faint); font-size: 10px; }
.account-health strong { font-size: 14px; }
.account-health dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.account-health dl div { padding: 18px; border-right: 1px solid var(--sv-color-border-soft); }
.account-health dl div:last-child { border-right: 0; }
.account-health dd { margin: 8px 0 0; font: 700 17px/1.2 var(--sv-font-mono); }
.account-form { display: grid; grid-template-columns: .75fr 1.25fr; gap: 16px; margin-top: 22px; padding: 22px; border: 1px solid var(--sv-color-border); }
.account-form label { display: grid; gap: 8px; }
.account-form label:nth-child(3), .account-form footer { grid-column: 1 / -1; }
.account-form label span { color: var(--sv-color-text-muted); font-size: 11px; }
.account-form label b { color: #ff6c82; }
.account-form input { min-width: 0; width: 100%; padding: 12px 13px; outline: 0; border: 1px solid var(--sv-color-border); border-radius: 2px; background: var(--sv-color-canvas-raised); color: var(--sv-color-text); }
.account-form input:focus { border-color: rgba(255,59,92,.52); box-shadow: 0 0 0 3px rgba(255,59,92,.08); }
.account-form footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 4px; }
#accountFormStatus { color: #d0a45f; font-size: 11px; }
.connection-sequence { margin-top: 22px; border: 1px solid var(--sv-color-border); }
.connection-sequence header { display: flex; justify-content: space-between; gap: 24px; padding: 17px 20px; border-bottom: 1px solid var(--sv-color-border); }
.connection-sequence header p { margin: 0; color: var(--sv-color-text-faint); font-size: 10px; }
.connection-sequence ol { margin: 0; padding: 0; list-style: none; }
.connection-sequence li { min-height: 78px; display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--sv-color-border-soft); }
.connection-sequence li:last-child { border-bottom: 0; }
.connection-sequence li > span { color: #ff6c82; font: 700 10px/1 var(--sv-font-mono); }
.connection-sequence li div { display: grid; gap: 4px; }
.connection-sequence li b { font-size: 13px; }
.connection-sequence li small { color: var(--sv-color-text-faint); line-height: 1.5; }
.connection-sequence li button { min-width: 72px; height: 34px; border: 1px solid var(--sv-color-border); background: transparent; color: var(--sv-color-text); cursor: pointer; font-size: 11px; }
.connection-sequence li button:hover:not(:disabled) { border-color: rgba(255,59,92,.5); color: #ff6c82; }
.connection-sequence li button:disabled { opacity: .35; cursor: not-allowed; }
.account-boundary { display: grid; grid-template-columns: 90px 1fr; gap: 14px; margin-top: 18px; padding: 16px 18px; background: rgba(255,255,255,.035); }
.account-boundary b { color: #ff6c82; font-size: 11px; }
.account-boundary p { margin: 0; color: var(--sv-color-text-muted); font-size: 11px; line-height: 1.6; }
.unit-dialog { width: min(1180px, calc(100% - 24px)); height: min(900px, calc(100vh - 24px)); max-height: calc(100vh - 24px); padding: 0; color: var(--sv-color-text); border: 1px solid rgba(var(--sv-brand-rgb), .32); background: var(--sv-color-canvas-raised); box-shadow: 0 40px 120px rgba(0,0,0,.78); }
.unit-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(9px); }
.unit-editor { min-height: 100%; display: flex; flex-direction: column; }
.unit-editor-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 28px 34px 24px; border-bottom: 1px solid var(--sv-color-border); background: linear-gradient(90deg, rgba(var(--sv-brand-rgb), .045), transparent 48%); }
.unit-editor-head span, .editor-block header > span { color: var(--ops-accent); font: 700 10px/1 var(--sv-font-mono); letter-spacing: .14em; }
.unit-editor-head h2 { margin: 7px 0 4px; font-size: 35px; letter-spacing: -.05em; }
.unit-editor-head p { margin: 0; color: var(--sv-color-text-faint); font: 500 10px/1 var(--sv-font-mono); }
.unit-editor-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 190px 1fr; }
.unit-index { padding: 26px 18px; border-right: 1px solid var(--sv-color-border); background: var(--sv-color-canvas-raised); }
.unit-index a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 13px 8px; border-bottom: 1px solid var(--sv-color-border-soft); color: var(--sv-color-text-muted); text-decoration: none; font-size: 11px; }
.unit-index a:hover { color: var(--ops-accent); }
.unit-index span { color: var(--ops-accent); font-family: var(--sv-font-mono); }
.unit-editor-body { min-width: 0; overflow-y: auto; scroll-behavior: smooth; }
.editor-block { padding: 34px clamp(24px, 5vw, 58px) 42px; border-bottom: 1px solid var(--sv-color-border); }
.editor-block > header { margin-bottom: 24px; }
.editor-block > header h3 { margin: 8px 0 0; font-size: 25px; letter-spacing: -.035em; }
.editor-block > header p { margin: 7px 0 0; color: var(--sv-color-text-faint); font-size: 11px; line-height: 1.5; }
.editor-block label { display: grid; gap: 8px; margin-top: 16px; }
.editor-block label > span { color: var(--sv-color-text-muted); font-size: 11px; }
.editor-block input, .editor-block select, .editor-block textarea { width: 100%; min-width: 0; padding: 12px 13px; outline: 0; border: 1px solid var(--sv-color-border); border-radius: 2px; background: var(--sv-color-canvas-raised); color: var(--sv-color-text); }
.editor-block input:focus, .editor-block select:focus, .editor-block textarea:focus { border-color: rgba(var(--sv-brand-rgb), .48); box-shadow: 0 0 0 3px rgba(var(--sv-brand-rgb), .07); }
.editor-block textarea { min-height: 102px; resize: vertical; line-height: 1.55; }
.editor-field-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }
.asset-search { display: grid; grid-template-columns: 1fr auto; }
.asset-search input { padding: 12px 13px; border: 1px solid var(--sv-color-border); border-right: 0; outline: 0; background: var(--sv-color-canvas-raised); color: var(--sv-color-text); }
.asset-search input:focus { border-color: rgba(var(--sv-brand-rgb), .48); }
.asset-search button { padding: 0 18px; border: 1px solid var(--sv-color-border); background: var(--ops-accent); color: var(--ops-ink); cursor: pointer; font-size: 11px; font-weight: 750; }
.asset-results { display: flex; gap: 8px; min-height: 0; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.searching-assets { padding: 10px 0; color: var(--sv-color-text-faint); font-size: 11px; }
.asset-result { width: 106px; flex: 0 0 106px; padding: 6px; border: 1px solid var(--sv-color-border); background: var(--sv-color-surface-subtle); color: var(--sv-color-text); text-align: left; cursor: pointer; }
.asset-result:hover { border-color: rgba(var(--sv-brand-rgb), .45); }
.asset-result img, .asset-result video { width: 92px; height: 74px; object-fit: cover; background: var(--sv-color-surface-elevated); }
.asset-result b, .asset-result small { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-result b { font-size: 10px; } .asset-result small { color: var(--sv-color-text-faint); font-size: 9px; }
.storyboard { display: flex; gap: 10px; min-height: 126px; margin: 18px 0 0; padding: 14px; overflow-x: auto; list-style: none; border: 1px dashed rgba(245,242,234,.17); }
.storyboard:empty::after { content: "从上方图库结果中选择素材，最多 30 个"; margin: auto; color: var(--sv-color-text-faint); font-size: 11px; }
.story-item { position: relative; width: 118px; flex: 0 0 118px; padding: 5px; border: 1px solid var(--sv-color-border); background: var(--sv-color-canvas-raised); }
.story-item.is-cover { border-color: rgba(var(--sv-brand-rgb), .52); }
.story-item img, .story-item video { width: 106px; height: 76px; object-fit: cover; background: var(--sv-color-surface-strong); }
.story-order { position: absolute; left: 8px; top: 8px; padding: 3px 5px; background: var(--sv-color-canvas); color: var(--ops-accent); font: 700 9px/1 var(--sv-font-mono); }
.story-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 4px; }
.story-controls button { height: 23px; padding: 0; border: 1px solid var(--sv-color-border-soft); background: transparent; color: var(--sv-color-text-muted); cursor: pointer; font-size: 9px; }
.story-controls button:hover { color: var(--ops-accent); border-color: rgba(var(--sv-brand-rgb), .3); }
.variant-tabs { display: flex; gap: 5px; margin-bottom: 22px; overflow-x: auto; }
.variant-tabs button { min-height: 34px; padding: 0 14px; border: 1px solid var(--sv-color-border); background: transparent; color: var(--sv-color-text-muted); cursor: pointer; font-size: 10px; white-space: nowrap; }
.variant-tabs button.active { border-color: var(--ops-accent); background: var(--ops-accent); color: var(--ops-ink); font-weight: 750; }
.skill-binding-preview { grid-template-columns: 1fr .55fr; margin-top: 5px; padding-top: 15px; border-top: 1px solid var(--sv-color-border-soft); }
.copy-generator { margin-top: 28px; border: 1px solid rgba(var(--sv-brand-rgb), .2); background: linear-gradient(145deg, rgba(var(--sv-brand-rgb), .045), rgba(255,255,255,.012) 55%); }
.copy-generator > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 20px; border-bottom: 1px solid var(--sv-color-border-soft); }
.copy-generator > header span { color: var(--ops-accent); font: 700 9px/1 var(--sv-font-mono); letter-spacing: .14em; }
.copy-generator > header h4 { margin: 7px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.copy-generator > header p { max-width: 620px; margin: 0; color: var(--sv-color-text-faint); font-size: 10px; line-height: 1.55; }
.copy-generate-button, .copy-preview footer button { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--ops-accent); background: var(--ops-accent); color: var(--ops-ink); cursor: pointer; font-size: 10px; font-weight: 800; }
.copy-generate-button:disabled, .copy-preview footer button:disabled { opacity: .42; cursor: wait; }
.copy-generation-status { margin: 0; padding: 11px 20px; color: var(--sv-color-text-faint); font: 500 10px/1.5 var(--sv-font-mono); border-bottom: 1px solid var(--sv-color-border-soft); }
.copy-preview { margin: 18px; padding: 20px; border: 1px solid rgba(var(--sv-brand-rgb), .35); background: var(--sv-color-canvas-raised); box-shadow: inset 3px 0 0 var(--ops-accent); }
.copy-preview[hidden] { display: none; }
.copy-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copy-preview-head span { color: var(--ops-accent); font: 750 9px/1 var(--sv-font-mono); letter-spacing: .14em; }
.copy-preview-head b { color: var(--sv-color-text-faint); font-size: 10px; }
.copy-preview h5 { margin: 20px 0 10px; font-size: 21px; letter-spacing: -.025em; }
.copy-preview > p { margin: 0; color: var(--sv-color-text-muted); font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.copy-preview-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.copy-preview-topics span { padding: 5px 7px; background: rgba(var(--sv-brand-rgb), .08); color: var(--ops-accent); font: 600 9px/1 var(--sv-font-mono); }
.copy-evidence { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 0; border-top: 1px solid var(--sv-color-border-soft); border-left: 1px solid var(--sv-color-border-soft); }
.copy-evidence div { min-width: 0; padding: 11px; border-right: 1px solid var(--sv-color-border-soft); border-bottom: 1px solid var(--sv-color-border-soft); }
.copy-evidence dt { color: var(--sv-color-text-faint); font: 600 8px/1 var(--sv-font-mono); letter-spacing: .1em; }
.copy-evidence dd { margin: 7px 0 0; overflow: hidden; color: var(--sv-color-text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.copy-preview footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.copy-preview footer span { max-width: 520px; color: var(--sv-color-text-faint); font-size: 9px; line-height: 1.5; }
.copy-history { display: flex; gap: 7px; padding: 0 18px 18px; overflow-x: auto; }
.copy-history button { min-width: 155px; padding: 9px 11px; border: 1px solid var(--sv-color-border-soft); background: transparent; color: var(--sv-color-text-muted); text-align: left; cursor: pointer; }
.copy-history button:hover { border-color: rgba(var(--sv-brand-rgb), .3); }
.copy-history b, .copy-history small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-history b { font-size: 9px; }
.copy-history small { margin-top: 5px; color: var(--sv-color-text-faint); font: 500 8px/1 var(--sv-font-mono); }
.draft-delivery { margin-top: 18px; border: 1px solid rgba(255,133,84,.3); background: linear-gradient(145deg, rgba(255,96,54,.065), rgba(255,255,255,.01) 58%); }
.draft-delivery > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 20px; border-bottom: 1px solid rgba(255,133,84,.16); }
.draft-delivery > header span { color: #ff8b61; font: 750 9px/1 var(--sv-font-mono); letter-spacing: .14em; }
.draft-delivery > header h4 { margin: 7px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.draft-delivery > header p { max-width: 640px; margin: 0; color: var(--sv-color-text-faint); font-size: 10px; line-height: 1.55; }
.draft-delivery > header button, .delivery-approval footer button { flex: none; min-height: 38px; padding: 0 15px; border: 1px solid #ff8b61; background: transparent; color: #ff9a74; cursor: pointer; font-size: 10px; font-weight: 800; }
.draft-delivery > header button:hover, .delivery-approval footer button:hover { background: #ff8b61; color: #170b07; }
.draft-delivery button:disabled { opacity: .38; cursor: wait; }
.draft-delivery-status { margin: 0; padding: 11px 20px; color: var(--sv-color-text-faint); font: 500 10px/1.5 var(--sv-font-mono); border-bottom: 1px solid rgba(255,133,84,.12); }
.delivery-approval { margin: 18px; padding: 18px; border: 1px solid rgba(255,139,97,.36); background: var(--sv-color-canvas-raised); box-shadow: inset 3px 0 0 #ff8b61; }
.delivery-approval[hidden], .delivery-receipt[hidden], .delivery-resolution[hidden] { display: none; }
.delivery-ledger { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sv-color-border-soft); border-left: 1px solid var(--sv-color-border-soft); }
.delivery-ledger div { min-width: 0; padding: 12px; border-right: 1px solid var(--sv-color-border-soft); border-bottom: 1px solid var(--sv-color-border-soft); }
.delivery-ledger small, .delivery-ledger b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-ledger small { color: #ff8b61; font: 650 8px/1 var(--sv-font-mono); letter-spacing: .1em; }
.delivery-ledger b { margin-top: 7px; color: var(--sv-color-text-muted); font-size: 10px; }
.delivery-consent { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: 10px !important; margin-top: 16px !important; padding: 13px; border: 1px solid rgba(255,139,97,.2); background: rgba(255,139,97,.045); cursor: pointer; }
.delivery-consent input { width: auto; margin-top: 2px; accent-color: #ff8b61; }
.delivery-consent span { color: var(--sv-color-text-muted) !important; line-height: 1.55; }
.delivery-approval footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.delivery-approval footer > span { max-width: 540px; color: var(--sv-color-text-faint); font-size: 9px; line-height: 1.55; }
.delivery-resolution { display: grid; gap: 7px; margin: 18px; padding: 16px; border: 1px solid rgba(244,180,76,.4); background: rgba(244,180,76,.05); }
.delivery-resolution b { color: #f2be66; font-size: 12px; }
.delivery-resolution > span { color: var(--sv-color-text-faint); font-size: 10px; }
.delivery-resolution > div { display: flex; gap: 7px; margin-top: 7px; }
.delivery-resolution button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(244,180,76,.36); background: transparent; color: #e4bd78; cursor: pointer; font-size: 9px; }
.delivery-receipt { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px; border-top: 1px solid var(--sv-color-border-soft); border-left: 1px solid var(--sv-color-border-soft); }
.delivery-receipt div { min-width: 0; padding: 12px; border-right: 1px solid var(--sv-color-border-soft); border-bottom: 1px solid var(--sv-color-border-soft); }
.delivery-receipt dt { color: #ff8b61; font: 650 8px/1 var(--sv-font-mono); letter-spacing: .1em; }
.delivery-receipt dd { margin: 7px 0 0; overflow: hidden; color: var(--sv-color-text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.delivery-history { display: flex; gap: 7px; padding: 0 18px 18px; overflow-x: auto; }
.delivery-history button { min-width: 175px; padding: 10px 11px; border: 1px solid var(--sv-color-border-soft); background: transparent; color: var(--sv-color-text-muted); text-align: left; cursor: pointer; }
.delivery-history b, .delivery-history small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-history b { font-size: 9px; } .delivery-history small { margin-top: 5px; color: var(--sv-color-text-faint); font: 500 8px/1 var(--sv-font-mono); }
.unit-editor-footer { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 34px; border-top: 1px solid var(--sv-color-border); background: var(--sv-color-surface); }
#unitFormStatus { color: #d0a45f; font-size: 11px; }
.skill-dialog { width: min(1280px, calc(100% - 24px)); max-height: calc(100vh - 24px); padding: 0; color: var(--sv-color-text); border: 1px solid rgba(196,154,255,.38); background: var(--sv-color-canvas-raised); box-shadow: 0 40px 120px rgba(0,0,0,.78); }
.skill-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(9px); }
.skill-studio { min-height: 100%; display: flex; flex-direction: column; }
.skill-studio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding: 27px 32px 23px; border-bottom: 1px solid var(--sv-color-border); background: radial-gradient(circle at 12% 0, rgba(177,108,255,.11), transparent 34%); }
.skill-studio-head span, .skill-column > header span, .skill-validation > span { color: #c49aff; font: 700 10px/1 var(--sv-font-mono); letter-spacing: .14em; }
.skill-studio-head h2 { margin: 7px 0 4px; font-size: 36px; letter-spacing: -.05em; }
.skill-studio-head p { margin: 0; color: var(--sv-color-text-faint); font: 500 10px/1 var(--sv-font-mono); }
.skill-studio-body { display: grid; grid-template-columns: .8fr 1.2fr 1fr; }
.skill-column { min-width: 0; padding: 30px 28px 36px; border-right: 1px solid var(--sv-color-border); }
.skill-column:last-child { border-right: 0; }
.skill-column > header { margin-bottom: 24px; }
.skill-column > header h3 { margin: 8px 0 0; font-size: 23px; letter-spacing: -.035em; }
.skill-column > label { display: grid; gap: 8px; margin-top: 16px; }
.skill-column label > span, .scope-group > span { color: var(--sv-color-text-muted); font-size: 10px; }
.skill-column input, .skill-column textarea { width: 100%; min-width: 0; padding: 11px 12px; outline: 0; border: 1px solid var(--sv-color-border); border-radius: 2px; background: var(--sv-color-canvas); color: var(--sv-color-text); }
.skill-column input:focus, .skill-column textarea:focus { border-color: rgba(196,154,255,.55); box-shadow: 0 0 0 3px rgba(196,154,255,.08); }
.skill-column textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
#skillInstructions { min-height: 170px; }
.skill-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill-pair label { display: grid; gap: 8px; margin-top: 16px; }
.scope-group { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sv-color-border-soft); }
.scope-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-group label { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--sv-color-border); color: var(--sv-color-text-muted); font-size: 9px; cursor: pointer; }
.scope-group input { width: auto; accent-color: #c49aff; }
.auto-bind { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px !important; margin-top: 20px !important; padding: 13px; background: rgba(196,154,255,.06); }
.auto-bind input { width: auto; accent-color: #c49aff; }
.auto-bind span { line-height: 1.5; }
.skill-validation { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 17px 30px; border-top: 1px solid var(--sv-color-border); background: rgba(196,154,255,.045); }
.skill-validation p { margin: 0; color: var(--sv-color-text-muted); font-size: 11px; line-height: 1.6; }
.skill-validation ul { grid-column: 2; margin: 0; padding: 0; list-style: none; }
.skill-validation li { padding: 4px 0; color: var(--sv-color-text-muted); font-size: 10px; }
.skill-validation li.pass { color: var(--ops-accent); }
.skill-studio-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 30px; border-top: 1px solid var(--sv-color-border); background: var(--sv-color-surface-subtle); }
.skill-studio-footer > div { display: flex; gap: 8px; }
#skillFormStatus { color: #d0a45f; font-size: 11px; }
.toast { position: fixed; z-index: 120; right: 28px; bottom: 28px; max-width: 380px; padding: 13px 16px; opacity: 0; transform: translateY(12px); pointer-events: none; background: var(--ops-paper); color: var(--ops-ink); font-size: 12px; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) { .platform-grid { grid-template-columns: repeat(2, 1fr); } .pipeline-board { grid-template-columns: 1fr; } .pipeline-note h3 { margin-top: 28px; } .unit-grid, .writing-skill-grid { grid-template-columns: repeat(2, 1fr); } .skill-studio-body { grid-template-columns: 1fr 1fr; } .skill-column--evidence { grid-column: 1 / -1; border-top: 1px solid var(--sv-color-border); } }
@media (max-width: 850px) { .ops-shell { width: min(100% - 28px, 1480px); padding-top: 14px; } .ops-hero { grid-template-columns: 1fr; } .hero-status { min-height: auto; border-left: 0; border-top: 1px solid var(--sv-color-border); } .status-orbit { display: none; } .section-heading { grid-template-columns: 1fr; gap: 14px; } .pipeline-steps { grid-template-columns: repeat(2, 1fr); } .pipeline-steps li { min-height: 210px; } .pipeline-steps li:nth-child(2) { border-right: 0; } .truth-strip { grid-template-columns: 1fr; gap: 7px; padding: 16px 18px; } .truth-strip b { display: none; } .account-health { grid-template-columns: 1fr; } .account-health > div { border-right: 0; border-bottom: 1px solid var(--sv-color-border); } .account-form { grid-template-columns: 1fr; } .account-form label:nth-child(3), .account-form footer { grid-column: auto; } .unit-editor-layout { grid-template-columns: 1fr; } .unit-index { display: none; } }
@media (max-width: 560px) { .ops-shell { width: 100%; padding: 0 0 44px; } .hero-copy { padding: 34px 20px 48px; } .back-link { margin-bottom: 44px; } .hero-copy h1 { font-size: 57px; } .hero-actions { align-items: stretch; flex-direction: column; } .hero-status { padding: 30px 20px; } .platform-grid { grid-template-columns: 1fr; border-left: 0; } .platform-card { min-height: 340px; border-right: 0; } .ops-section { padding: 64px 16px 0; } .pipeline-steps { grid-template-columns: 1fr 1fr; } .pipeline-steps li { min-height: 180px; padding: 16px; } .pipeline-steps div { left: 16px; bottom: 18px; } .pipeline-note { padding: 28px 20px; } .ops-footer { margin: 60px 16px 0; flex-direction: column; gap: 10px; } .field-grid, .editor-field-grid, .skill-binding-preview, .skill-pair { grid-template-columns: 1fr; gap: 0; } .setup-card footer, .account-form footer, .unit-editor-footer, .skill-studio-footer { align-items: stretch; flex-direction: column; } .account-sheet { padding: 24px 18px; } .account-sheet-head { grid-template-columns: 44px 1fr auto; gap: 12px; } .account-platform-mark { width: 44px; height: 44px; } .account-health dl { grid-template-columns: 1fr 1fr; } .account-health dl div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--sv-color-border-soft); } .connection-sequence header { flex-direction: column; gap: 7px; } .connection-sequence li { grid-template-columns: 28px 1fr; } .connection-sequence li button { grid-column: 2; justify-self: start; } .account-boundary { grid-template-columns: 1fr; } .unit-grid, .writing-skill-grid { grid-template-columns: 1fr; } .unit-toolbar, .skill-lab-head { align-items: stretch; flex-direction: column; } .unit-dialog { width: 100%; height: 100%; max-height: 100%; border: 0; } .unit-editor-head { padding: 20px 18px; } .editor-block { padding: 28px 18px 34px; } .skill-dialog { width: 100%; max-height: 100%; border: 0; } .skill-studio-head { padding: 20px 18px; } .skill-studio-body { grid-template-columns: 1fr; } .skill-column, .skill-column--evidence { grid-column: auto; padding: 26px 18px; border-right: 0; border-bottom: 1px solid var(--sv-color-border); } .skill-validation { grid-template-columns: 1fr; } .skill-validation ul { grid-column: auto; } .skill-studio-footer > div { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 850px) { .copy-evidence, .delivery-receipt { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .copy-generator > header, .copy-preview footer, .draft-delivery > header, .delivery-approval footer { align-items: stretch; flex-direction: column; } .copy-evidence, .delivery-ledger, .delivery-receipt { grid-template-columns: 1fr; } .delivery-resolution > div { align-items: stretch; flex-direction: column; } }

/* 2026-09-02: task inbox workspace, matching the approved storyboard. */
body.has-app-rail { background: var(--sv-color-canvas-raised); }
.ops-shell { width: min(1570px, calc(100% - 28px)); margin: 0 auto; padding: 14px 0 26px; }
.ops-shell > :not(.ops-task-desk) { display: none; }
.ops-task-desk { min-height: calc(100vh - 28px); display: grid; grid-template-columns: 250px minmax(0, 1fr) 292px; overflow: hidden; border: 1px solid rgba(233, 241, 230, .11); border-radius: 7px; background: var(--sv-color-surface-subtle); box-shadow: 0 24px 80px rgba(0, 0, 0, .22); }

.ops-inbox { min-width: 0; display: flex; flex-direction: column; padding: 22px 14px 15px; border-right: 1px solid rgba(233, 241, 230, .11); background: var(--sv-color-surface); }
.ops-inbox > header { padding: 0 8px 17px; border-bottom: 1px solid rgba(233, 241, 230, .1); }
.ops-inbox > header span { color: var(--sv-color-brand); font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.ops-inbox > header h1 { margin: 7px 0 5px; color: var(--sv-color-text); font-size: 21px; letter-spacing: -.045em; }
.ops-inbox > header p { margin: 0; color: var(--sv-color-text-faint); font-size: 8px; line-height: 1.6; }

.ops-queue-nav { display: grid; gap: 2px; padding: 13px 0; border-bottom: 1px solid rgba(233, 241, 230, .1); }
.ops-queue-nav button { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border: 0; border-radius: 3px; color: var(--sv-color-text-muted); background: transparent; font-size: 9px; cursor: pointer; }
.ops-queue-nav button:hover { color: var(--sv-color-text); background: rgba(255, 255, 255, .025); }
.ops-queue-nav button.is-active { color: var(--sv-color-text); background: rgba(201, 245, 40, .07); }
.ops-queue-nav button.is-active::before { content: ""; width: 2px; height: 17px; margin-left: -9px; background: #c9f528; box-shadow: 0 0 9px rgba(201, 245, 40, .5); }
.ops-queue-nav button.is-active span { margin-left: -76px; }
.ops-queue-nav b { min-width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid rgba(233, 241, 230, .11); border-radius: 50%; color: var(--sv-color-text-muted); font-size: 8px; font-weight: 600; }

.ops-inbox-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 7px 9px; color: var(--sv-color-text-muted); font-size: 8px; font-weight: 750; letter-spacing: .06em; }
.ops-inbox-heading button { height: 24px; padding: 0 7px; border: 1px solid rgba(233, 241, 230, .11); border-radius: 3px; color: var(--sv-color-text-muted); background: var(--sv-color-surface-strong); font-size: 8px; cursor: pointer; }
.ops-task-list { min-height: 0; display: grid; align-content: start; gap: 6px; overflow-y: auto; }
.ops-task-item { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 4px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.ops-task-item:hover { background: rgba(255, 255, 255, .025); }
.ops-task-item.is-active { border-color: rgba(201, 245, 40, .24); background: rgba(201, 245, 40, .045); }
.ops-task-thumb { width: 40px; height: 48px; overflow: hidden; border-radius: 3px; background: var(--sv-color-surface-elevated); }
.ops-task-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ops-task-thumb span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--sv-color-text-faint); font-size: 7px; }
.ops-task-item > div:last-child { min-width: 0; }
.ops-task-item small { display: block; overflow: hidden; color: var(--sv-color-brand); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.ops-task-item strong { display: block; margin: 5px 0 4px; overflow: hidden; color: var(--sv-color-text); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.ops-task-item p { margin: 0; overflow: hidden; color: var(--sv-color-text-faint); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.ops-task-empty { padding: 34px 12px; border: 1px dashed rgba(233, 241, 230, .1); color: var(--sv-color-text-faint); font-size: 9px; line-height: 1.7; text-align: center; }
.ops-account-access { display: grid; gap: 5px; margin-top: auto; padding: 13px 0; border-top: 1px solid rgba(233, 241, 230, .1); }
.ops-account-access > header { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 4px; }
.ops-account-access > header span { color: var(--sv-color-text-muted); font-size: 8px; font-weight: 750; }
.ops-account-access > header small { color: var(--sv-color-text-faint); font-size: 6px; letter-spacing: .1em; }
.ops-account-access > button, .ops-account-access > a { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; border: 1px solid rgba(233, 241, 230, .09); border-radius: 3px; color: var(--sv-color-text-muted); background: rgba(15, 19, 15, .76); font-size: 8px; text-decoration: none; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.ops-account-access > button:hover, .ops-account-access > a:hover { border-color: rgba(201, 245, 40, .38); background: rgba(201, 245, 40, .045); }
.ops-account-access > button:active, .ops-account-access > a:active { transform: translateY(1px); }
.ops-account-access > button:focus-visible, .ops-account-access > a:focus-visible { outline: 2px solid rgba(201, 245, 40, .65); outline-offset: 2px; }
.ops-account-access > button span, .ops-account-access > a span { display: flex; align-items: center; gap: 7px; }
.ops-account-access i { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(201, 245, 40, .18); border-radius: 2px; color: var(--sv-color-brand); font-size: 6px; font-style: normal; }
.ops-account-access b { color: var(--sv-color-text); font-size: 8px; font-weight: 550; }
.ops-account-access em { color: var(--sv-color-text-faint); font-size: 7px; font-style: normal; }
.ops-inbox > footer { display: grid; gap: 7px; margin-top: 0; padding: 12px 7px 0; border-top: 1px solid rgba(233, 241, 230, .1); font-size: 8px; }
.ops-inbox > footer span { color: var(--sv-color-text-faint); }
.ops-inbox > footer a { color: var(--sv-color-text-muted); text-decoration: none; }

.ops-task-detail { min-width: 0; display: flex; flex-direction: column; padding: 25px 28px 17px; background: radial-gradient(circle at 50% 0, rgba(201, 245, 40, .03), transparent 32%); }
.ops-detail-head { min-height: 100px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(233, 241, 230, .11); }
.ops-detail-head > div { min-width: 0; }
.ops-detail-head span { color: var(--sv-color-brand); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.ops-detail-head h2 { margin: 9px 0 6px; overflow: hidden; color: var(--sv-color-text); font-size: 22px; line-height: 1.2; letter-spacing: -.035em; white-space: nowrap; text-overflow: ellipsis; }
.ops-detail-head p { max-width: 640px; margin: 0; overflow: hidden; color: var(--sv-color-text-muted); font-size: 9px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ops-detail-head button { min-width: 96px; height: 34px; padding: 0 11px; border: 1px solid #c9f528; border-radius: 3px; color: #101500; background: #c9f528; font-size: 8px; font-weight: 850; cursor: pointer; }
.ops-detail-head button:disabled { color: var(--sv-color-text-faint); border-color: var(--sv-color-border-soft); background: var(--sv-color-surface-strong); cursor: not-allowed; }

.ops-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 19px 0 21px; list-style: none; }
.ops-progress li { position: relative; min-width: 0; display: grid; gap: 6px; color: var(--sv-color-text-faint); font-size: 8px; }
.ops-progress li::before { content: ""; position: absolute; top: 9px; right: 8px; left: 30px; height: 1px; background: rgba(233, 241, 230, .11); }
.ops-progress li:last-child::before { display: none; }
.ops-progress b { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(233, 241, 230, .13); border-radius: 50%; color: var(--sv-color-text-faint); background: var(--sv-color-surface-subtle); font-size: 7px; }
.ops-progress li.is-done, .ops-progress li.is-current { color: var(--sv-color-text); }
.ops-progress li.is-done b { color: #111500; border-color: var(--sv-color-brand); background: #c9f528; }
.ops-progress li.is-done::before { background: rgba(201, 245, 40, .45); }
.ops-progress li.is-current b { color: var(--sv-color-brand); border-color: var(--sv-color-brand); box-shadow: 0 0 10px rgba(201, 245, 40, .16); }

.ops-platform-work { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 17px 0 14px; border-top: 1px solid rgba(233, 241, 230, .11); }
.ops-platform-work > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.ops-platform-work > header span { color: var(--sv-color-brand); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.ops-platform-work h3 { margin: 5px 0 0; color: var(--sv-color-text); font-size: 15px; }
.ops-platform-work > header p { margin: 0; color: var(--sv-color-text-faint); font-size: 8px; }
.ops-variant-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.ops-variant-card { min-width: 0; overflow: hidden; border: 1px solid rgba(233, 241, 230, .11); border-radius: 4px; background: var(--sv-color-surface); }
.ops-variant-cover { position: relative; height: 170px; overflow: hidden; background: linear-gradient(150deg, var(--sv-color-surface-hover), var(--sv-color-surface-subtle)); }
.ops-variant-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ops-variant-cover > span { position: absolute; top: 8px; left: 8px; padding: 5px 6px; border: 1px solid var(--sv-color-border-strong); border-radius: 3px; color: var(--sv-color-text); background: rgba(8, 10, 8, .68); font-size: 7px; }
.ops-variant-body { padding: 11px; }
.ops-variant-body header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ops-variant-body header strong { color: var(--sv-color-text); font-size: 10px; }
.ops-variant-body header span { color: var(--sv-color-brand); font-size: 7px; }
.ops-variant-body h4 { margin: 9px 0 6px; overflow: hidden; color: var(--sv-color-text); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.ops-variant-body p { height: 32px; margin: 0; overflow: hidden; color: var(--sv-color-text-faint); font-size: 8px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ops-variant-body footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(233, 241, 230, .1); color: var(--sv-color-text-faint); font-size: 7px; }
.ops-variant-body footer b { color: var(--sv-color-text-muted); font-weight: 500; }
.ops-variant-empty { grid-column: 1 / -1; min-height: 290px; display: grid; place-items: center; border: 1px dashed rgba(233, 241, 230, .11); color: var(--sv-color-text-faint); font-size: 9px; }

.ops-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid rgba(233, 241, 230, .11); color: var(--sv-color-text-faint); font-size: 8px; }
.ops-detail-footer p { margin: 0; }
.ops-detail-footer p span { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #c9f528; box-shadow: 0 0 8px rgba(201, 245, 40, .45); }
.ops-detail-footer a { color: var(--sv-color-text-muted); text-decoration: none; }

.ops-rules { min-width: 0; padding: 24px 16px 16px; border-left: 1px solid rgba(233, 241, 230, .11); background: var(--sv-color-surface); }
.ops-rules > header { padding: 0 4px 16px; border-bottom: 1px solid rgba(233, 241, 230, .1); }
.ops-rules > header span, .ops-review-card > span { color: var(--sv-color-brand); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.ops-rules > header h2 { margin: 7px 0 5px; color: var(--sv-color-text); font-size: 16px; }
.ops-rules > header p { margin: 0; color: var(--sv-color-text-faint); font-size: 8px; }
.ops-rule-list { display: grid; gap: 7px; padding: 14px 0; }
.ops-rule-list article { display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding: 10px 8px; border: 1px solid rgba(233, 241, 230, .1); border-radius: 4px; background: var(--sv-color-surface-strong); }
.ops-rule-list article > b { color: var(--sv-color-brand); font-size: 8px; }
.ops-rule-list strong { color: var(--sv-color-text); font-size: 9px; }
.ops-rule-list p { margin: 5px 0 0; color: var(--sv-color-text-faint); font-size: 8px; line-height: 1.55; }
.ops-review-card { margin-top: 5px; padding: 13px; border: 1px solid rgba(201, 245, 40, .18); border-radius: 4px; background: rgba(201, 245, 40, .035); }
.ops-review-card h3 { margin: 7px 0 5px; color: var(--sv-color-text); font-size: 11px; }
.ops-review-card p { margin: 0 0 10px; color: var(--sv-color-text-faint); font-size: 8px; line-height: 1.6; }
.ops-review-card a { color: var(--sv-color-text-muted); font-size: 8px; text-decoration: none; }

@media (max-width: 1180px) {
  .ops-task-desk { grid-template-columns: 230px minmax(0, 1fr); }
  .ops-rules { grid-column: 1 / -1; display: grid; grid-template-columns: 230px 1fr 230px; gap: 14px; border-top: 1px solid rgba(233, 241, 230, .11); border-left: 0; }
  .ops-rule-list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
}
@media (max-width: 820px) {
  .ops-shell { width: 100%; padding: 0; }
  .ops-task-desk { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .ops-inbox { max-height: 390px; border-right: 0; border-bottom: 1px solid rgba(233, 241, 230, .11); }
  .ops-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-rules { grid-template-columns: 1fr; }
  .ops-rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ops-task-detail { padding: 20px 15px; }
  .ops-detail-head { flex-direction: column; }
  .ops-detail-head h2 { white-space: normal; }
  .ops-progress span { display: none; }
  .ops-variant-cards { grid-template-columns: 1fr; }
  .ops-variant-cover { height: 250px; }
  .ops-task-list, .ops-rule-list { grid-template-columns: 1fr; }
}