:root {
  --bg: #08090b;
  --surface: #101216;
  --surface-2: #15181d;
  --surface-3: #1b1f25;
  --line: #2a2f37;
  --line-soft: #20242a;
  --text: #f5f7fa;
  --muted: #9299a5;
  --cyan: #33e6c2;
  --cyan-dim: #153c37;
  --magenta: #ec5fe5;
  --orange: #ff9d4a;
  --blue: #67a6ff;
  --green: #76d78f;
  --danger: #ff6f76;
  --rail: 68px;
  --side: 184px;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

.auth-gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px 20px; border-top: 1px solid #13b9c9; background: #080b12; }
.auth-form { display: grid; width: min(100%, 420px); gap: 16px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.auth-brand > span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #18cde1; border-radius: 8px; background: #122932; color: #65eff2; font-size: 16px; font-weight: 950; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 15px; }
.auth-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.auth-form header { text-align: center; }
.auth-form h1 { font-size: 25px; }
.auth-form header p { margin-top: 8px; color: #687384; font-size: 12px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-radius: 8px; background: #121620; }
.auth-tabs button { height: 38px; border: 0; border-radius: 6px; background: transparent; color: #778292; cursor: pointer; font-size: 13px; font-weight: 800; }
.auth-tabs button.active { background: #16bfe0; color: #fff; }
.auth-panel { display: grid; gap: 14px; }
.auth-panel label { display: grid; gap: 7px; color: #9ba6b5; font-size: 11px; }
.auth-panel input { min-width: 0; width: 100%; height: 43px; border: 1px solid #343c48; border-radius: 6px; padding: 0 12px; outline: 0; background: #151922; color: #fff; }
.auth-panel input:focus { border-color: #18c8dd; }
.auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
.auth-code-row button { border: 1px solid #14aabd; border-radius: 6px; background: #0e2730; color: #32d5e4; cursor: pointer; font-size: 11px; font-weight: 800; }
.auth-code-row button:disabled { color: #697886; }
.auth-submit { width: 100%; height: 47px; border: 0; border-radius: 7px; background: #17bfe8; color: #fff; cursor: pointer; font-size: 15px; font-weight: 900; }
.auth-submit:hover { background: #34cdec; }
.auth-confirm { display: grid; gap: 11px; padding: 15px; border-radius: 7px; background: #11151d; }
.auth-confirm strong { font-size: 11px; }
.auth-confirm label, .auth-terms { display: flex; align-items: flex-start; gap: 8px; color: #9099a8; font-size: 10px; line-height: 1.55; }
.auth-confirm input, .auth-terms input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: #16c8df; }
.auth-terms { justify-content: center; }
.auth-terms button { border: 0; padding: 0; background: transparent; color: #e7edf4; cursor: pointer; font-size: inherit; font-weight: 800; }
.auth-error { min-height: 15px; color: #ff858b; font-size: 10px; text-align: center; }
.auth-gate > footer { color: #596370; font-size: 9px; text-align: center; }

.app-shell { display: grid; grid-template-columns: var(--rail) var(--side) minmax(0, 1fr); height: 100vh; }
body.sidebar-compact .app-shell { grid-template-columns: var(--rail) 0 minmax(0, 1fr); }

.primary-rail { z-index: 8; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-soft); background: #0c0e11; }
.brand-button { display: grid; place-items: center; width: 48px; height: 42px; margin: 12px 10px 8px; border: 1px solid #3a414a; border-radius: 8px; background: #f5f7fa; color: #0b0d10; cursor: pointer; }
.brand-button span { font-size: 15px; font-weight: 950; }
.rail-nav, .rail-bottom { display: grid; gap: 3px; padding: 4px 6px; }
.rail-nav { overflow-x: hidden; overflow-y: auto; }
.rail-bottom { margin-top: auto; padding-bottom: 10px; }
.mobile-nav { display: none; }
.rail-item { display: grid; justify-items: center; gap: 3px; width: 56px; min-height: 52px; padding: 7px 2px 5px; border: 0; border-radius: 7px; background: transparent; color: #7f8793; cursor: pointer; }
.rail-item svg { width: 19px; height: 19px; stroke-width: 1.8; }
.rail-item span { font-size: 10px; line-height: 1; }
.rail-item:hover { background: #171a20; color: #d8dde5; }
.rail-item.active { background: #1b2424; color: var(--cyan); }

.section-sidebar { min-width: 0; overflow: hidden; border-right: 1px solid var(--line-soft); background: #0d0f12; }
.side-inner { width: var(--side); padding: 19px 12px; }
.side-brand { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-bottom: 20px; padding: 0 8px; }
.side-brand b { font-size: 15px; }
.side-brand i { width: 18px; color: var(--cyan); }
.side-group { margin-bottom: 18px; }
.side-label { display: block; margin: 0 8px 7px; color: #626a76; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.side-link { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; margin: 2px 0; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #969eaa; font-size: 13px; cursor: pointer; text-align: left; }
.side-link svg { width: 16px; height: 16px; }
.side-link:hover, .side-link.active { background: #1a1e23; color: #fff; }
.side-link.active::before { width: 3px; height: 17px; margin-left: -9px; border-radius: 2px; background: var(--cyan); content: ""; }

.workspace-shell { min-width: 0; height: 100vh; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 22px; border-bottom: 1px solid var(--line-soft); background: rgba(8, 9, 11, 0.96); }
.topbar-title { min-width: 0; }
.breadcrumb { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.topbar h1 { overflow: hidden; max-width: 600px; font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.top-action, .service-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: #c7cdd6; }
.top-action { min-width: 34px; padding: 0 9px; cursor: pointer; }
.top-action svg { width: 15px; height: 15px; }
.top-action.quota { border-color: #62462e; color: #ffc487; }
.service-pill { padding: 0 10px; font-size: 11px; }
.service-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.service-pill.ready span { background: var(--green); box-shadow: 0 0 0 4px rgba(118, 215, 143, 0.08); }
.service-pill.error span { background: var(--danger); }

.app-view { height: calc(100vh - 64px); overflow: auto; padding: 20px 22px 40px; scrollbar-color: #353c45 transparent; }
.view-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 2px 0 16px; }
.view-head h2 { font-size: 20px; }
.view-head p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.view-actions { display: flex; align-items: center; gap: 8px; }

.primary-button, .secondary-button, .ghost-button, .icon-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border-radius: 6px; padding: 0 13px; font-weight: 750; cursor: pointer; }
.primary-button { border: 1px solid var(--cyan); background: var(--cyan); color: #07100f; }
.primary-button:hover { background: #74f2d8; }
.secondary-button { border: 1px solid #4e5e69; background: #202830; color: #ecf2f6; }
.ghost-button, .icon-button { border: 1px solid var(--line); background: var(--surface-2); color: #c4cbd5; }
.ghost-button:hover, .icon-button:hover { border-color: #4d5661; color: #fff; }
.icon-button { width: 36px; padding: 0; }
.icon-button svg, .primary-button svg, .secondary-button svg, .ghost-button svg { width: 16px; height: 16px; }
.text-button { min-height: auto; border: 0; background: transparent; color: var(--cyan); padding: 0; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.command-banner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr); min-height: 170px; border: 1px solid #32423f; border-radius: 8px; overflow: hidden; background: #121819; }
.banner-copy { display: flex; flex-direction: column; justify-content: center; padding: 26px 30px; }
.eyebrow { margin-bottom: 8px; color: var(--cyan); font-size: 10px; font-weight: 900; }
.banner-copy h2 { max-width: 650px; font-size: 28px; line-height: 1.25; }
.banner-copy p { max-width: 660px; margin: 10px 0 18px; color: #a9b2ba; font-size: 13px; line-height: 1.7; }
.banner-actions { display: flex; gap: 8px; }
.banner-visual { position: relative; min-height: 170px; overflow: hidden; }
.banner-visual img { width: 100%; height: 100%; object-fit: cover; }
.banner-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, #121819 0%, transparent 48%); content: ""; }

.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 22px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.metric { min-width: 0; padding: 14px 17px; border-right: 1px solid var(--line-soft); }
.metric:last-child { border-right: 0; }
.metric span { display: block; color: var(--muted); font-size: 11px; }
.metric strong { display: inline-block; margin-top: 5px; font-size: 20px; }
.metric small { margin-left: 6px; color: #6f7782; font-size: 10px; }

.section-block { margin-top: 24px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-heading h2 { font-size: 16px; }
.section-heading p { margin-top: 4px; color: var(--muted); font-size: 11px; }

.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card { position: relative; min-width: 0; min-height: 304px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.tool-card:hover { border-color: #52606b; box-shadow: 0 14px 34px rgba(0,0,0,.2); transform: translateY(-2px); }
.tool-card .tool-art { height: 186px; overflow: hidden; background: #e9e9e7; }
.tool-card .tool-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.tool-card:hover .tool-art img { transform: scale(1.035); }
.workflow-card-art { position: relative; isolation: isolate; }
.workflow-card-art::after { position: absolute; inset: 48% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(6,8,10,.78)); content: ""; pointer-events: none; }
.preview-result-label { position: absolute; right: 12px; bottom: 11px; left: 12px; z-index: 4; display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font-size: 10px; }
.preview-result-label b { flex: none; border-radius: 3px; padding: 4px 6px; background: rgba(39,216,183,.9); color: #05100e; font-size: 8px; }
.preview-result-label:not(b) { text-shadow: 0 1px 8px #000; }
.card-fact-chips { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 5px; }
.card-fact-chips span { border: 1px solid rgba(255,255,255,.6); border-radius: 3px; padding: 4px 7px; background: rgba(8,12,14,.7); color: #fff; font-size: 8px; backdrop-filter: blur(6px); }
.card-view-triptych-left img { object-fit: contain !important; background: #e9e8e4; }
.card-view-pdp-hero img { object-position: center top; }
.card-view-model-full img { object-fit: contain !important; background: #e8e8e5; }
.card-view-ratio-916 img { object-position: center 45%; }
.preview-function-icon { position: absolute; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(101,229,204,.55); border-radius: 5px; background: rgba(11,23,21,.82); color: var(--cyan); }
.workflow-card-art > .preview-function-icon { left: 8px; bottom: 7px; }
.preview-function-icon svg { width: 14px; height: 14px; }
.image-preview-guides { position: absolute; inset: 13px; z-index: 2; border: 1px solid rgba(255,255,255,.42); pointer-events: none; }
.image-preview-guides span { position: absolute; width: 7px; height: 7px; border: 1px solid var(--cyan); background: rgba(8,12,13,.78); }
.image-preview-guides span:nth-child(1) { top: 17%; left: 19%; }
.image-preview-guides span:nth-child(2) { top: 46%; right: 18%; }
.image-preview-guides span:nth-child(3) { right: 35%; bottom: 13%; }
.preview-hero .image-preview-guides { inset: 12px 38% 12px 12px; border-width: 0 1px 0 0; }
.preview-pdp .image-preview-guides { left: 62%; display: grid; grid-template-rows: 1fr 1fr; gap: 5px; border: 0; }
.preview-pdp .image-preview-guides span { position: static; width: auto; height: auto; border-color: rgba(101,229,204,.45); }
.preview-pdp .image-preview-guides span:last-child { display: none; }
.preview-layout .image-preview-guides, .preview-collage .image-preview-guides { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; border: 0; }
.preview-layout .image-preview-guides span, .preview-collage .image-preview-guides span { position: static; width: auto; height: auto; border-color: rgba(255,255,255,.48); background: rgba(8,12,14,.15); }
.preview-layout .image-preview-guides span:first-child, .preview-collage .image-preview-guides span:first-child { grid-row: 1 / 3; }
.preview-batch .image-preview-guides, .preview-matrix .image-preview-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border: 0; }
.preview-batch .image-preview-guides span, .preview-matrix .image-preview-guides span { position: static; width: auto; height: auto; border-color: rgba(255,255,255,.45); background: rgba(8,12,14,.12); }
.preview-inpaint .image-preview-guides { border: 0; border-left: 2px dashed var(--cyan); }
.preview-pack .image-preview-guides { inset: 18px 12px 18px 58%; border: 1px solid rgba(255,255,255,.55); }
.preview-style .image-preview-guides { inset: 14px 58% 14px 12px; border-radius: 50% 50% 5px 5px; }
.preview-platform .image-preview-guides { inset: 7px 35%; border-radius: 6px; }
.tool-card .tool-copy { padding: 14px 15px 15px; }
.tool-copy > strong { display: block; margin-top: 8px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.tool-copy > p { display: -webkit-box; min-height: 38px; overflow: hidden; margin-top: 7px; color: #9ba4ae; font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tool-card-kicker { display: flex; align-items: center; gap: 6px; color: #6fd9c4; font-size: 9px; }
.tool-card-kicker svg { width: 13px; height: 13px; }
.tool-result-line { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 12px; border-top: 1px solid #252b31; padding-top: 10px; font-size: 9px; }
.tool-result-line span { flex: none; color: #66717c; }
.tool-result-line b { overflow: hidden; color: #c5ccd2; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.workflow-card-meta { display: flex; max-width: 100%; align-items: center; gap: 5px; margin-bottom: 8px; overflow: hidden; }
.tool-copy .workflow-card-meta { margin: 8px 0 0; }
.workflow-card-meta span { flex: none; max-width: 50%; overflow: hidden; border: 1px solid #343e43; border-radius: 4px; padding: 3px 5px; color: #87d4c5; font-size: 8px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.workflow-card-meta span:last-child { border-color: #34383f; color: #8d96a1; }
.tool-tag { position: absolute; top: 9px; left: 9px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: rgba(9,10,12,.78); color: #fff; font-size: 9px; backdrop-filter: blur(8px); }
.tool-badge { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; background: rgba(9,10,12,.8); color: var(--cyan); }
.tool-badge svg { width: 14px; }

.search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.search-box { display: flex; align-items: center; gap: 8px; min-width: 260px; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.search-box svg { width: 15px; color: var(--muted); }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.filter-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.filter-pill { flex: none; min-height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 11px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 11px; }
.filter-pill.active, .filter-pill:hover { border-color: #43675f; background: #182622; color: var(--cyan); }

.video-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.video-tool-card { display: grid; grid-template-columns: 43% minmax(0, 1fr); min-height: 188px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.video-preview-art { min-width: 0; min-height: 188px; overflow: hidden; background: #11151a; }
.video-preview-art img { width: 100%; height: 100%; object-fit: cover; }
.video-preview-art > .preview-function-icon { top: 9px; left: 9px; }
.video-preview-art .preview-subject { right: 7px; bottom: 25px; }
.video-preview-play { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; padding: 0; background: rgba(5,8,10,.72); color: #fff; cursor: pointer; transform: translate(-50%, -50%); transition: 150ms ease; }
.video-preview-play:hover, .video-preview-play:focus-visible { border-color: var(--cyan); background: #132c27; color: var(--cyan); outline: 0; transform: translate(-50%, -50%) scale(1.08); }
.video-preview-play svg { width: 15px; fill: currentColor; }
.video-preview-cover { position: absolute; top: 9px; right: 9px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 4px 6px; background: rgba(5,8,10,.68); color: #cad1d9; font-size: 8px; }
.video-preview-cover svg { width: 11px; height: 11px; color: var(--cyan); }
.video-preview-art.workflow-card-art::before { display: none; }
.video-preview-art.workflow-card-art img { transform: none; }
.video-preview-art .preview-result-label { right: 9px; bottom: 9px; left: 9px; font-size: 8px; }
.video-preview-art .preview-result-label b { display: none; }
.video-preview-strip { position: absolute; right: 7px; bottom: 7px; left: 7px; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 9px; }
.video-preview-strip span { border-radius: 1px; background: rgba(255,255,255,.38); }
.preview-aida .video-preview-strip span:nth-child(1) { background: #f8d466; }
.preview-aida .video-preview-strip span:nth-child(2) { background: #65e5cc; }
.preview-aida .video-preview-strip span:nth-child(3) { background: #f7a96b; }
.preview-aida .video-preview-strip span:nth-child(4) { background: #ff7379; }
.video-preview-art.preview-orbit::before { position: absolute; top: 50%; left: 50%; z-index: 3; width: 76px; height: 76px; border: 1px solid rgba(101,229,204,.8); border-radius: 50%; content: ""; transform: translate(-50%, -50%) rotate(-18deg) skewX(-20deg); }
.video-preview-art.preview-pas::before { position: absolute; inset: 0 48% 0 0; z-index: 2; background: rgba(12,18,22,.42); border-right: 1px solid var(--cyan); content: ""; }
.video-preview-art.preview-room::before { position: absolute; right: 10px; bottom: 18px; left: 10px; z-index: 2; height: 38%; border: 1px solid rgba(255,255,255,.42); border-top: 0; content: ""; transform: perspective(120px) rotateX(42deg); }
.video-preview-art.preview-persona::before, .video-preview-art.preview-presenter::before { position: absolute; right: 10px; bottom: 43px; z-index: 3; width: 36px; height: 48px; border: 1px solid rgba(101,229,204,.7); border-radius: 18px 18px 6px 6px; background: rgba(9,13,16,.5); content: ""; }
.video-preview-art.preview-talk::before { position: absolute; top: 28px; right: 10px; z-index: 3; width: 48px; height: 28px; border: 1px solid rgba(255,255,255,.68); border-radius: 5px 5px 5px 1px; background: rgba(8,11,14,.46); content: ""; }
.video-preview-art.preview-analysis::before { position: absolute; inset: 26px 18px 34px; z-index: 3; border: 1px solid var(--cyan); content: ""; box-shadow: 0 0 0 999px rgba(7,10,13,.18); }
.video-preview-art.preview-motion img { transform: translateX(5px) rotate(-3deg) scale(1.05); }
.video-preview-art.preview-motion::before { position: absolute; top: 38%; left: 10px; z-index: 3; width: 42px; height: 18px; border-top: 2px solid rgba(101,229,204,.75); border-bottom: 1px solid rgba(101,229,204,.48); content: ""; transform: skewX(-28deg); }
.video-preview-art.preview-pet::before { position: absolute; top: 30px; right: 12px; z-index: 3; width: 34px; height: 34px; border: 1px solid #ffcf79; border-radius: 50% 50% 50% 10%; background: rgba(27,20,9,.58); content: ""; }
.video-preview-art.preview-beat .video-preview-strip { height: 20px; align-items: end; }
.video-preview-art.preview-beat .video-preview-strip span:nth-child(1) { height: 35%; }
.video-preview-art.preview-beat .video-preview-strip span:nth-child(2) { height: 100%; background: var(--cyan); }
.video-preview-art.preview-beat .video-preview-strip span:nth-child(3) { height: 55%; }
.video-preview-art.preview-beat .video-preview-strip span:nth-child(4) { height: 80%; background: #f6b76f; }
.video-preview-art.preview-mimic::before { position: absolute; inset: 18px 50% 30px 9px; z-index: 3; border: 1px solid rgba(255,255,255,.5); content: ""; box-shadow: 70px 0 0 -1px rgba(9,13,16,.28), 70px 0 0 0 var(--cyan); }
.video-tool-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 15px; }
.video-tool-copy .workflow-card-meta { width: 100%; }
.video-tool-copy > strong { margin-top: 9px; font-size: 14px; }
.video-tool-copy > p { display: -webkit-box; overflow: hidden; margin: 7px 0 12px; color: #9ba4ae; font-size: 10px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.video-tool-copy button { margin-top: auto; }
.video-card-foot { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.video-card-foot > span { color: #68727d; font-size: 8px; line-height: 1.4; }
.video-card-foot button { flex: none; min-height: 30px; margin: 0; padding: 0 9px; }

.creation-workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: calc(100vh - 118px); border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; background: var(--surface); }
.tool-setup { min-width: 0; padding: 18px; border-right: 1px solid var(--line); overflow-y: auto; }
.tool-setup-head { margin-bottom: 14px; }
.back-link { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 13px; border: 0; padding: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.back-link svg { width: 14px; }
.tool-setup h2 { font-size: 18px; }
.tool-setup-head p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.setup-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.setup-tags span { padding: 4px 6px; border: 1px solid #343a43; border-radius: 5px; color: #abb3bd; font-size: 9px; }

.upload-zone { position: relative; display: grid; place-items: center; min-height: 176px; overflow: hidden; border: 1px dashed #46505b; border-radius: 7px; background: #111419; color: var(--muted); cursor: pointer; text-align: center; }
.upload-zone:hover { border-color: var(--cyan); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone svg { width: 25px; height: 25px; margin-bottom: 7px; color: var(--cyan); }
.upload-zone strong { display: block; color: #eef2f5; font-size: 12px; }
.upload-zone small { display: block; margin-top: 5px; font-size: 9px; }
.upload-zone.has-image { border-style: solid; }
.upload-zone.has-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0d10; }
.upload-zone.has-image .upload-overlay { position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 5px; background: rgba(8,9,11,.78); color: #fff; font-size: 9px; }

.recognition-strip { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #14171b; }
.recognition-strip .state-dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--orange); }
.recognition-strip.loading .state-dot { animation: recognition-pulse 1.1s ease-in-out infinite; }
.recognition-strip.ready .state-dot { background: var(--green); }
.recognition-strip.error .state-dot { background: var(--danger); }
.recognition-strip div { min-width: 0; }
.recognition-strip-body { flex: 1; }
.recognition-strip strong { display: block; font-size: 11px; }
.recognition-strip p { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.recognition-progress { min-height: 49px; margin-top: 9px; }
.recognition-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aeb6c0; font-size: 8px; }
.recognition-progress-meta b { flex: none; color: #e3e7eb; font-size: 8px; font-variant-numeric: tabular-nums; }
.recognition-progress-track { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: #2b3138; }
.recognition-progress-track > span { position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit; background: var(--cyan); transition: width .22s ease-out; }
.recognition-progress-track > span::after { position: absolute; top: 0; bottom: 0; width: 26px; background: rgba(255,255,255,.42); content: ""; animation: recognition-scan 1.1s linear infinite; }
.recognition-progress-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 7px; color: #59626d; font-size: 7px; }
.recognition-progress-steps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recognition-progress-steps span.active { color: #dfe5e9; }
.recognition-progress-steps span.done { color: #58cbb7; }
@keyframes recognition-pulse { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes recognition-scan { from { transform: translateX(-30px); } to { transform: translateX(250px); } }
@media (prefers-reduced-motion: reduce) {
  .recognition-strip.loading .state-dot, .recognition-progress-track > span::after { animation: none; }
  .recognition-progress-track > span { transition: none; }
}

.form-stack { display: grid; gap: 10px; margin-top: 14px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.form-stack label, .compact-field { display: grid; gap: 6px; color: #9ca4af; font-size: 10px; font-weight: 700; }
.form-stack input, .form-stack textarea, .form-stack select, .compact-field input, .compact-field textarea, .compact-field select { min-width: 0; width: 100%; border: 1px solid #343a43; border-radius: 6px; background: #0f1115; color: #f2f4f7; }
.form-stack input, .form-stack select, .compact-field input, .compact-field select { height: 36px; padding: 0 10px; }
.form-stack textarea, .compact-field textarea { min-height: 86px; resize: vertical; padding: 9px 10px; line-height: 1.55; }
.form-stack input::placeholder, .form-stack textarea::placeholder { color: #555d67; }
.form-stack .form-field { display: grid; gap: 6px; color: #9ca4af; font-size: 10px; font-weight: 700; }
.field-label-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.field-ai-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 25px; border: 1px solid #17685c; border-radius: 5px; padding: 0 8px; background: #0d2824; color: #70ead4; font-size: 9px; font-weight: 800; cursor: pointer; }
.field-ai-button:hover { border-color: #2e9f8d; background: #123a34; color: #a2f7e7; }
.field-ai-button:disabled { cursor: wait; opacity: .7; }
.field-ai-button svg { width: 12px; height: 12px; }
.field-ai-button small { color: #6ca99e; font-size: 7px; font-weight: 700; }
.setup-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
.workflow-config { display: grid; gap: 8px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 11px 0; }
.workflow-config > header { display: flex; align-items: center; justify-content: space-between; color: #d9dee5; font-size: 10px; }
.workflow-config > header small { border: 1px solid #385047; border-radius: 4px; padding: 3px 5px; color: var(--cyan); font-size: 8px; }
.workflow-field-grid { display: grid; gap: 8px; }
.workflow-reference { position: relative; display: flex; min-height: 70px; align-items: center; justify-content: center; gap: 10px; margin-top: 9px; overflow: hidden; border: 1px dashed #414a55; border-radius: 6px; background: #111419; color: #a7afb9; cursor: pointer; text-align: left; }
.workflow-reference input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.workflow-reference > svg { width: 22px; color: var(--cyan); }
.workflow-reference strong, .workflow-reference small { display: block; }
.workflow-reference strong { color: #e2e6eb; font-size: 10px; }
.workflow-reference small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.workflow-reference.has-image { justify-content: flex-start; border-style: solid; padding: 7px; }
.workflow-reference.has-image img { width: 58px; height: 58px; border-radius: 4px; object-fit: cover; }
.workflow-reference.has-image span { font-size: 9px; }
.reference-video-field { margin-top: 10px; }
.workflow-requirement { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 8px; border: 1px solid #463c2c; border-radius: 6px; background: #1a1712; color: #d7bd8f; font-size: 9px; }
.workflow-requirement svg { width: 15px; }

.creation-stage { min-width: 0; overflow: hidden; }
.stage-tabs { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.stage-tab { align-self: stretch; border: 0; border-bottom: 2px solid transparent; padding: 0 13px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.stage-tab.active { border-bottom-color: var(--cyan); color: #fff; }
.stage-content { height: calc(100% - 48px); overflow-y: auto; padding: 18px; }
.workflow-overview { margin-bottom: 18px; border-top: 1px solid #33413d; border-bottom: 1px solid var(--line); padding: 15px 0; }
.workflow-overview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workflow-overview > header > div { min-width: 0; }
.workflow-overview h3 { margin-top: 7px; font-size: 15px; }
.workflow-code, .workflow-output-count { display: inline-flex; align-items: center; min-height: 21px; border-radius: 4px; padding: 0 7px; font-size: 8px; font-weight: 900; }
.workflow-code { background: #15312c; color: var(--cyan); }
.workflow-output-count { flex: none; border: 1px solid #384047; color: #98a1ab; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 15px; border: 1px solid var(--line); background: #101216; }
.workflow-steps > div { position: relative; display: grid; min-height: 64px; align-content: center; gap: 5px; border-right: 1px solid var(--line); padding: 10px 12px; }
.workflow-steps > div:last-child { border-right: 0; }
.workflow-steps span { color: #68727e; font-size: 8px; }
.workflow-steps strong { color: #d6dbe2; font-size: 10px; }
.workflow-steps svg { position: absolute; top: 50%; right: -9px; z-index: 2; width: 16px; border-radius: 50%; background: #101216; color: #59636e; transform: translateY(-50%); }
.workflow-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.workflow-timeline span { min-width: 0; border-left: 2px solid #3c6b61; padding: 7px 8px; background: #121918; color: #aab6b3; font-size: 9px; line-height: 1.4; }
.workflow-overview > footer { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 12px; color: #89939d; font-size: 9px; }
.workflow-overview > footer span { display: inline-flex; align-items: center; gap: 4px; }
.workflow-overview > footer svg { width: 12px; color: var(--green); }
.stage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.stage-toolbar h3 { font-size: 14px; }
.stage-toolbar p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.result-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #0d0f12; }
.result-card .media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #15181c; }
.result-card .media img, .result-card .media video { width: 100%; height: 100%; object-fit: cover; }
.result-card footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 8px 9px; }
.result-card footer span { overflow: hidden; color: #b7bec7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.result-card footer button, .result-card footer a { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 5px; background: #171a1f; color: #d9dfe7; cursor: pointer; }
.result-card footer svg { width: 13px; }
.example-before-after { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: stretch; min-height: 250px; }
.workflow-source-visual, .workflow-result-visual { position: relative; min-width: 0; min-height: 250px; overflow: hidden; background: #15191e; }
.workflow-source-visual img, .workflow-result-visual img { width: 100%; height: 100%; object-fit: cover; }
.workflow-source-visual::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, transparent 68%, rgba(5,7,9,.72)); content: ""; }
.workflow-source-visual span { position: absolute; right: 7px; bottom: 7px; z-index: 2; border: 1px solid rgba(255,255,255,.24); border-radius: 4px; padding: 3px 5px; background: rgba(7,9,11,.74); color: #e9edef; font-size: 8px; }
.workflow-result-visual > .preview-function-icon { top: 8px; right: 8px; }
.workflow-result-visual.variant-2 { --preview-accent: #f5b86f; }
.workflow-result-visual.variant-3 { --preview-accent: #8ab8ff; }
.workflow-result-visual { --preview-accent: var(--cyan); }
.facts-annotations span { position: absolute; z-index: 3; width: 10px; height: 10px; border: 2px solid var(--preview-accent); border-radius: 50%; box-shadow: 0 0 0 4px rgba(6,10,11,.46); }
.facts-annotations span:nth-child(1) { top: 28%; left: 29%; }
.facts-annotations span:nth-child(2) { top: 47%; right: 24%; }
.facts-annotations span:nth-child(3) { right: 38%; bottom: 20%; }
.facts-rail { position: absolute; right: 7px; bottom: 7px; left: 7px; z-index: 3; display: grid; grid-template-columns: 18px 1fr 1fr 1fr; align-items: center; gap: 4px; min-height: 30px; padding: 5px; background: rgba(7,10,12,.78); }
.facts-rail svg { width: 13px; color: var(--preview-accent); }
.facts-rail b { height: 4px; border-radius: 2px; background: rgba(255,255,255,.46); }
.hero-copy-zone { position: absolute; top: 18px; right: 8px; z-index: 3; display: grid; width: 46%; gap: 6px; padding: 9px; border-left: 2px solid var(--preview-accent); background: rgba(5,8,10,.62); }
.hero-copy-zone svg { width: 16px; color: var(--preview-accent); }
.hero-copy-zone b { height: 5px; background: rgba(255,255,255,.76); }
.hero-copy-zone b:last-child { width: 64%; opacity: .5; }
.hero-focus-ring { position: absolute; bottom: 24px; left: 14px; z-index: 2; width: 62px; height: 62px; border: 1px solid var(--preview-accent); border-radius: 50%; box-shadow: 0 0 28px rgba(101,229,204,.18); }
.workflow-result-visual.preview-pdp { display: grid; grid-template-rows: 62% 38%; gap: 3px; padding: 3px; }
.pdp-main, .pdp-details, .pdp-details img { min-width: 0; min-height: 0; overflow: hidden; }
.pdp-details { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.detail-crop.detail-a { object-position: 30% 30%; transform: scale(1.7); }
.detail-crop.detail-b { object-position: 70% 70%; transform: scale(1.7); }
.workflow-result-visual.preview-layout { padding: 5px; background: #e9ecef; }
.layout-preview-grid { display: grid; width: 100%; height: 100%; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.layout-preview-grid > div, .layout-preview-grid > span { overflow: hidden; background: #cfd5da; }
.layout-preview-grid > div:first-child { grid-row: 1 / 3; }
.layout-preview-grid > span { border-left: 3px solid var(--preview-accent); }
.batch-preview-grid { display: grid; height: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; }
.batch-tile { min-width: 0; min-height: 0; overflow: hidden; background: #d9dde0; }
.batch-tile img { object-fit: cover; }
.batch-1 { border-top: 3px solid #65e5cc; }
.batch-2 { border-top: 3px solid #f5b86f; }
.batch-3 { border-top: 3px solid #8ab8ff; }
.batch-4 { border-top: 3px solid #ed8392; }
.collage-preview-grid { display: grid; height: 100%; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; }
.collage-preview-grid > div { min-width: 0; min-height: 0; overflow: hidden; }
.collage-main { grid-row: 1 / 3; }
.collage-preview-grid .crop-top { transform: scale(1.45); transform-origin: 35% 25%; }
.collage-preview-grid .crop-bottom { transform: scale(1.45); transform-origin: 65% 75%; }
.workflow-result-visual.preview-scene::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 46%, rgba(8,12,14,.18)); content: ""; }
.scene-window { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32%; height: 30%; border: 1px solid rgba(255,255,255,.72); box-shadow: inset 0 0 24px rgba(255,255,255,.22); }
.scene-surface { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 22%; border-top: 1px solid var(--preview-accent); background: rgba(8,11,13,.18); transform: skewY(-4deg); transform-origin: left bottom; }
.scene-spark { position: absolute; top: 18px; left: 15px; z-index: 3; width: 18px; color: var(--preview-accent); }
.workflow-result-visual.preview-inpaint::after { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 2; background: rgba(70,113,119,.25); content: ""; }
.inpaint-divider { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; border-left: 2px dashed var(--preview-accent); }
.inpaint-mask { position: absolute; top: 12px; right: 10px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; background: rgba(7,11,13,.76); color: var(--preview-accent); }
.inpaint-mask svg { width: 15px; }
.workflow-result-visual.preview-pack { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 5px; padding: 5px; background: #e3e6e7; }
.pack-product { height: 100%; min-width: 0; overflow: hidden; }
.pack-outline { display: grid; align-content: center; gap: 7px; height: 68%; border: 1px solid #647079; padding: 8px; color: #334047; }
.pack-outline svg { width: 25px; color: var(--preview-accent); }
.pack-outline span { height: 4px; background: #77828a; }
.pack-outline span:last-child { width: 60%; }
.matrix-preview-grid { display: grid; height: 100%; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.matrix-scene { min-width: 0; overflow: hidden; }
.matrix-scene img { object-position: center; transform: scale(1.16); }
.matrix-1 { border-bottom: 5px solid #82c8ba; }
.matrix-2 { border-bottom: 5px solid #8ca8d2; }
.matrix-3 { border-bottom: 5px solid #d3a56e; }
.workflow-result-visual.preview-style { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4px; padding: 4px; background: #dde1e3; }
.style-product { min-width: 0; overflow: hidden; }
.style-look { display: grid; align-content: center; justify-items: center; gap: 8px; border: 1px solid #7c858c; color: #455057; }
.style-look svg { width: 32px; color: var(--preview-accent); }
.style-look span { width: 66%; height: 4px; background: #818b92; }
.style-look span:last-child { width: 44%; }
.workflow-result-visual.preview-platform { display: grid; place-items: center; padding: 7px 29%; background: #20262b; }
.platform-phone { position: relative; width: 100%; height: 100%; overflow: hidden; border: 2px solid #9ba3aa; border-radius: 8px; }
.platform-phone img { position: absolute; inset: 0; }
.platform-safe { position: absolute; right: 5px; left: 5px; z-index: 2; border: 1px dashed var(--preview-accent); }
.platform-safe.top { top: 6px; height: 15%; }
.platform-safe.bottom { bottom: 6px; height: 23%; }
.platform-ratios { position: absolute; right: 4px; bottom: 6px; left: 4px; z-index: 4; display: flex; justify-content: center; gap: 3px; }
.platform-ratios b { border-radius: 2px; padding: 2px 3px; background: rgba(5,8,10,.76); color: #dce2e5; font-size: 6px; }
.example-arrow { display: grid; place-items: center; color: var(--cyan); background: #111419; }
.example-arrow svg { width: 14px; }
.result-card footer small { flex: none; color: #626c76; font-size: 8px; }

.workflow-demo-source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 22px; border: 1px solid #30383e; border-radius: 7px; padding: 12px; background: #111419; }
.demo-source-media { display: flex; gap: 7px; }
.demo-source-thumb { position: relative; width: 94px; height: 74px; overflow: hidden; border: 1px solid #3a4248; border-radius: 5px; background: #e7eaeb; }
.demo-source-thumb.reference { border-color: #6a5842; }
.demo-source-thumb img { width: 100%; height: 100%; object-fit: cover; }
.demo-source-thumb.source-model-shoe img { object-position: center 96%; transform: scale(2.8); transform-origin: center 96%; }
.demo-source-thumb span { position: absolute; right: 5px; bottom: 5px; border-radius: 3px; padding: 2px 5px; background: rgba(5,8,10,.8); color: #fff; font-size: 7px; }
.demo-source-thumb.reference span { color: #ffd49a; }
.demo-source-copy { min-width: 0; }
.demo-source-copy p { color: #6cd8c2; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.demo-source-copy h4 { margin-top: 4px; color: #edf1f3; font-size: 14px; }
.demo-source-copy > span { display: block; margin-top: 5px; color: #929ca5; font-size: 9px; line-height: 1.5; }
.demo-source-rule { display: flex; max-width: 220px; align-items: center; gap: 9px; border-left: 1px solid #39423f; padding-left: 15px; color: #87918f; }
.demo-source-rule svg { flex: none; width: 17px; color: #6cd8c2; }
.demo-source-rule span { font-size: 8px; line-height: 1.5; }
.demo-source-rule b { display: block; color: #cfd7d4; font-size: 9px; }
.demo-toolbar { margin-bottom: 10px; }
.demo-toolbar > span { border: 1px solid #3b444b; border-radius: 4px; padding: 4px 7px; color: #9da7ae; font-size: 8px; }
.workflow-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workflow-demo-card { --demo-accent: #66dbc3; min-width: 0; overflow: hidden; border: 1px solid #30383f; border-radius: 7px; background: #111419; }
.workflow-demo-card:nth-child(2) { --demo-accent: #e5a86e; }
.workflow-demo-card:nth-child(3) { --demo-accent: #82aef0; }
.workflow-demo-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 1px solid #30383f; background: #dfe3e4; }
.workflow-demo-media::after { position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(255,255,255,.08); content: ""; pointer-events: none; }
.workflow-demo-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-number { position: absolute; top: 8px; left: 8px; z-index: 6; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.38); border-radius: 4px; background: rgba(8,11,13,.72); color: #fff; font-size: 8px; font-weight: 900; }
.workflow-demo-copy { min-height: 148px; padding: 12px; }
.workflow-demo-copy header { min-height: 44px; }
.workflow-demo-copy header span { display: inline-flex; min-height: 19px; align-items: center; border-radius: 3px; padding: 0 6px; background: color-mix(in srgb, var(--demo-accent) 16%, #14181b); color: var(--demo-accent); font-size: 7px; font-weight: 900; }
.workflow-demo-copy h4 { margin-top: 7px; color: #edf0f2; font-size: 12px; }
.workflow-demo-copy dl { display: grid; gap: 7px; margin-top: 9px; }
.workflow-demo-copy dl > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 7px; }
.workflow-demo-copy dt { color: #68727b; font-size: 8px; }
.workflow-demo-copy dd { color: #aeb6bc; font-size: 8px; line-height: 1.5; }
.workflow-demo-copy dl > div:first-child dd { color: #d7dce0; }

.view-triptych-left > img, .view-triptych-center > img, .view-triptych-right > img { inset: 50% auto auto; width: 300%; height: auto; max-width: none; transform: translateY(-50%); }
.view-triptych-left > img { left: 0; }
.view-triptych-center > img { left: 50%; transform: translate(-50%, -50%); }
.view-triptych-right > img { right: 0; }
.view-pdp-hero > img { object-position: 50% 12%; }
.view-pdp-earpad > img { object-position: 72% 76%; transform: scale(1.55); }
.view-pdp-headband > img { object-position: 27% 72%; transform: scale(1.55); }
.view-layout-full > img, .view-layout-safe > img { object-fit: cover; object-position: 50% 50%; }
.view-scene-light > img { object-position: 45% 28%; transform: scale(1.18); }
.view-scene-contact > img { object-position: 50% 88%; transform: scale(1.72); }
.view-model-full { background: #f4f4f2; }
.view-model-full > img { object-fit: contain; }
.view-model-lower > img { object-position: 50% 84%; transform: scale(1.55); }
.view-model-shoe > img { object-position: 50% 96%; transform: scale(2.25); }
.view-ratio-916, .view-ratio-34, .view-ratio-11 { display: grid; place-items: center; background: #171d21; }
.view-ratio-916 > img, .view-ratio-34 > img, .view-ratio-11 > img { position: relative; inset: auto; border: 1px solid #778188; border-radius: 4px; object-fit: cover; }
.view-ratio-916 > img { width: 47%; height: 86%; }
.view-ratio-34 > img { width: 67%; height: 86%; object-position: center; }
.view-ratio-11 > img { width: 82%; height: auto; aspect-ratio: 1; object-position: center 47%; }

.demo-fact-pins i { position: absolute; z-index: 4; width: 11px; height: 11px; border: 2px solid var(--demo-accent); border-radius: 50%; box-shadow: 0 0 0 5px rgba(4,8,10,.38); }
.demo-fact-pins i:nth-child(1) { top: 28%; left: 28%; }
.demo-fact-pins i:nth-child(2) { top: 52%; right: 25%; }
.demo-fact-pins i:nth-child(3) { right: 38%; bottom: 18%; }
.view-facts-detail .demo-fact-pins i:nth-child(1) { top: 20%; left: 50%; }
.view-facts-detail .demo-fact-pins i:nth-child(2) { top: 63%; right: 16%; }
.view-facts-detail .demo-fact-pins i:nth-child(3) { right: 55%; bottom: 13%; }
.view-facts-scene .demo-fact-pins i:nth-child(1) { top: 37%; left: 18%; }
.view-facts-scene .demo-fact-pins i:nth-child(2) { top: 37%; right: 18%; }
.view-facts-scene .demo-fact-pins i:nth-child(3) { right: 45%; bottom: 11%; }
.demo-fact-sheet { position: absolute; right: 8px; bottom: 8px; left: 8px; z-index: 5; display: grid; grid-template-columns: auto 1fr 1fr 1fr; align-items: center; gap: 5px; min-height: 36px; padding: 6px; background: rgba(7,10,12,.84); }
.demo-fact-sheet b { color: var(--demo-accent); font-size: 7px; }
.demo-fact-sheet span { height: 4px; border-radius: 3px; background: rgba(255,255,255,.52); }
.demo-layout-map { position: absolute; inset: 15px; z-index: 4; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; pointer-events: none; }
.demo-layout-map i { border: 1px solid var(--demo-accent); background: rgba(7,10,12,.12); }
.demo-layout-map i:first-child { grid-row: 1 / 3; }
.demo-safe-zone { position: absolute; inset: 7% 6%; z-index: 4; border: 1px dashed var(--demo-accent); pointer-events: none; }
.demo-safe-zone span { position: absolute; top: 6px; right: 6px; border-radius: 3px; padding: 3px 5px; background: rgba(7,10,12,.76); color: var(--demo-accent); font-size: 6px; }
.demo-light-ray { position: absolute; top: 12%; left: 9%; z-index: 4; color: #ffe19c; }
.demo-light-ray svg { width: 21px; }
.demo-light-ray span { display: block; width: 110px; margin: 5px 0 0 8px; border-top: 2px solid currentColor; transform: rotate(28deg); transform-origin: left; }
.demo-contact-focus { position: absolute; right: 11%; bottom: 11%; z-index: 4; width: 76%; height: 28%; border: 1px solid var(--demo-accent); }
.demo-contact-focus span { position: absolute; inset: 7px; border: 1px dashed rgba(255,255,255,.7); }
.demo-contact-focus b { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; background: rgba(7,10,12,.75); color: var(--demo-accent); font-size: 6px; }
.demo-platform-safe { position: absolute; inset: 9% 12%; z-index: 4; border: 1px dashed var(--demo-accent); pointer-events: none; }
.demo-platform-safe span { position: absolute; right: 0; left: 0; border-top: 1px solid rgba(255,255,255,.68); }
.demo-platform-safe span:first-child { top: 14%; }
.demo-platform-safe span:last-child { bottom: 18%; }

.empty-state { display: grid; place-items: center; min-height: 320px; border: 1px dashed #343a43; border-radius: 7px; color: var(--muted); text-align: center; }
.empty-state svg { width: 34px; height: 34px; margin-bottom: 10px; color: #58616d; }
.empty-state strong { display: block; color: #d4d9e0; font-size: 12px; }
.empty-state span { display: block; max-width: 320px; margin-top: 6px; font-size: 10px; line-height: 1.55; }
.empty-state .lucide-loader-circle { animation: empty-state-spin 1.2s linear infinite; }
@keyframes empty-state-spin { to { transform: rotate(360deg); } }

.strategy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.strategy-block { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #111419; }
.strategy-block h3 { margin-bottom: 8px; color: var(--cyan); font-size: 11px; }
.strategy-block p, .strategy-block li { color: #bbc2cb; font-size: 11px; line-height: 1.7; }
.strategy-block ul { margin: 0; padding-left: 17px; }
.script-editor { width: 100%; min-height: 360px; border: 1px solid var(--line); border-radius: 7px; padding: 14px; resize: vertical; background: #0b0d10; color: #e5e9ef; line-height: 1.8; }
.scene-list { display: grid; gap: 8px; }
.scene-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: #111419; }
.scene-time { color: var(--cyan); font-size: 11px; font-weight: 900; }
.scene-row strong { display: block; margin-bottom: 4px; font-size: 10px; }
.scene-row p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.task-progress { margin-top: 14px; padding: 12px; border: 1px solid #33413f; border-radius: 7px; background: #101817; }
.task-progress header { display: flex; justify-content: space-between; color: #c8d1d0; font-size: 10px; }
.task-progress progress { width: 100%; height: 6px; margin-top: 9px; accent-color: var(--cyan); }

.canvas-shell { position: relative; height: calc(100vh - 118px); min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background-color: #0c0e11; background-image: radial-gradient(#303640 1px, transparent 1px); background-size: 22px 22px; }
.canvas-toolbar { position: absolute; top: 12px; left: 50%; z-index: 5; display: flex; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: rgba(16,18,22,.94); transform: translateX(-50%); }
.canvas-tool { display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 0; border-radius: 5px; padding: 0 9px; background: transparent; color: #aab2bd; cursor: pointer; font-size: 10px; }
.canvas-tool:hover { background: #242930; color: #fff; }
.canvas-tool svg { width: 14px; }
.canvas-board { position: absolute; inset: 0; min-width: 1600px; min-height: 900px; transform-origin: 0 0; }
.canvas-node { position: absolute; width: 230px; min-height: 130px; border: 1px solid #3a424d; border-radius: 7px; background: #15181d; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.canvas-node.selected { border-color: var(--cyan); }
.node-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 9px; border-bottom: 1px solid var(--line); cursor: grab; }
.node-head span { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; }
.node-head svg { width: 13px; }
.node-body { padding: 10px; color: #aeb6c0; font-size: 10px; line-height: 1.55; }
.node-body img { width: 100%; max-height: 190px; object-fit: contain; background: #0b0d10; }
.canvas-hint { position: absolute; right: 12px; bottom: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(15,17,21,.9); color: var(--muted); font-size: 9px; }

.digital-tabs { display: flex; gap: 3px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.digital-tabs button { height: 38px; border: 0; border-bottom: 2px solid transparent; padding: 0 13px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.digital-tabs button.active { border-bottom-color: var(--cyan); color: #fff; }
.digital-flow { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; align-items: start; }
.flow-column { min-width: 220px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.flow-column.span-2 { grid-column: span 2; }
.flow-head { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.flow-head span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; background: #20272a; color: var(--cyan); font-size: 10px; font-weight: 900; }
.flow-head h3 { font-size: 12px; }
.flow-body { padding: 12px; }
.flow-body .form-stack { margin-top: 0; }
.platform-row { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; min-height: 38px; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
.platform-row svg { width: 15px; color: var(--cyan); }
.platform-row button { height: 26px; border: 1px solid var(--line); border-radius: 5px; background: #181c21; color: #bbc2cc; cursor: pointer; font-size: 9px; }

.inspiration-grid { columns: 5 180px; column-gap: 10px; }
.inspiration-card { position: relative; break-inside: avoid; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.inspiration-card img { width: 100%; min-height: 180px; max-height: 330px; object-fit: cover; }
.inspiration-card footer { padding: 10px; }
.inspiration-card strong { display: block; font-size: 11px; }
.inspiration-card p { margin-top: 5px; color: var(--muted); font-size: 9px; }
.inspiration-card:hover { border-color: #56616d; }

.asset-grid, .work-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.asset-card, .work-card { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.asset-card .media, .work-card .media { position: relative; aspect-ratio: 1 / 1; background: #0d0f12; }
.work-card .media { aspect-ratio: 9 / 14; }
.asset-card .media img, .work-card .media img, .work-card .media video { width: 100%; height: 100%; object-fit: cover; }
.asset-card footer, .work-card footer { padding: 10px; }
.asset-card strong, .work-card strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.asset-card p, .work-card p { margin-top: 5px; color: var(--muted); font-size: 9px; }
.status-tag { position: absolute; top: 7px; left: 7px; padding: 4px 6px; border-radius: 5px; background: rgba(8,9,11,.82); color: #d8dee6; font-size: 9px; }
.quality-badge { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 66px); min-height: 24px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: rgba(8,9,11,.9); color: #d8dee6; font-size: 9px; white-space: nowrap; }
.quality-badge svg { width: 12px; height: 12px; }
.quality-badge.pass { border-color: rgba(118,215,143,.38); color: var(--green); }
.quality-badge.review { border-color: rgba(255,190,92,.4); color: #ffbe5c; }
.quality-badge.block { border-color: rgba(255,100,100,.42); color: #ff7b7b; }
.video-delivery { position: relative; width: min(420px,100%); margin: auto; background: #000; }
.video-delivery video { display: block; width: 100%; max-height: 680px; }

.account-layout, .admin-layout { display: grid; gap: 14px; }
.account-metrics, .admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.account-metrics .metric, .admin-metrics .metric { min-height: 92px; }
.ops-panel { padding: 16px 0 0; border-top: 1px solid var(--line); }
.ops-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ops-panel h3 { font-size: 13px; }
.ops-panel header p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.usage-table, .admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--surface); }
.usage-table th, .usage-table td, .admin-table th, .admin-table td { overflow: hidden; border-bottom: 1px solid var(--line-soft); padding: 10px 11px; color: #c7cdd6; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.usage-table th, .admin-table th { color: #737d89; font-weight: 700; }
.usage-table .positive { color: var(--green); }
.usage-table .negative { color: #ffb164; }
.admin-form { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 96px auto; gap: 8px; margin-bottom: 12px; }
.admin-form input,.admin-form select { min-width: 0; width: 100%; height: 38px; border: 1px solid #343a43; border-radius: 6px; padding: 0 10px; background: #0f1115; color: #fff; font:inherit; }
.admin-form input[type="file"]{padding:7px 9px;font-size:11px}.admin-form select{appearance:none}.case-study-form{grid-template-columns:1.1fr .7fr .8fr 1fr 1.2fr 1.2fr 1.1fr auto}
.version-history-list{display:flex;flex-direction:column;gap:10px}.version-history-list article{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px;border:1px solid #2d383d;background:#101416;border-radius:6px}.version-history-media{height:120px;background:#090c0e;overflow:hidden}.version-history-media img,.version-history-media video{width:100%;height:100%;object-fit:contain}.version-history-list article>div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.version-history-list span,.version-history-list p{margin:0;color:#8f9c99;font-size:12px}.version-history-list .secondary-button{margin-top:auto}
@media(max-width:640px){.version-history-list article{grid-template-columns:1fr}.version-history-media{height:180px}}
.user-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #21302e; color: var(--cyan); font-size: 9px; font-weight: 850; }
.credit-adjust { display: flex; gap: 5px; }
.credit-adjust input { width: 72px; height: 30px; border: 1px solid var(--line); border-radius: 5px; padding: 0 7px; background: #0b0d10; color: #fff; }
.credit-adjust button { height: 30px; border: 1px solid var(--line); border-radius: 5px; background: #1b2026; color: var(--cyan); cursor: pointer; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-panel { padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.settings-panel h2 { margin-bottom: 13px; font-size: 14px; }
.model-row { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 43px; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
.model-row:last-child { border-bottom: 0; }
.model-row span { color: var(--muted); }
.model-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ready-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.ready-mark.ready { background: var(--green); }
.standards-list { display: grid; gap: 8px; }
.standard-item { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 6px; }
.standard-item svg { width: 16px; color: var(--cyan); }
.standard-item strong { display: block; font-size: 10px; }
.standard-item p { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(620px, 100%); max-height: 80vh; overflow: auto; border: 1px solid #3b434d; border-radius: 8px; background: #12151a; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.modal.media-preview-modal { width: min(1120px, 96vw); max-height: 94vh; overflow: hidden; }
.modal > header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.modal h2 { font-size: 15px; }
#modalBody { padding: 16px; color: #bdc5ce; font-size: 11px; line-height: 1.7; }
#modalBody.media-preview-body { max-height: calc(94vh - 54px); overflow: auto; padding: 0; background: #07090b; }
.delivery-image-viewer { display: grid; justify-items: center; min-height: 320px; }
.delivery-image-viewer > img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(94vh - 112px); object-fit: contain; background: #07090b; }
.delivery-image-viewer > div { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; border-top: 1px solid var(--line); padding: 9px 12px; background: rgba(13,16,19,.96); }
.delivery-image-viewer > div > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.delivery-image-viewer > div > span svg { width: 14px; color: var(--cyan); }
.template-video-preview { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px; align-items: center; }
.template-video-player { display: block; width: 100%; max-height: 66vh; aspect-ratio: 9 / 16; border: 1px solid #363e48; border-radius: 6px; background: #050607; object-fit: contain; }
.template-video-summary h3 { margin-top: 5px; color: #f3f5f7; font-size: 18px; }
.template-video-summary > p:not(.eyebrow) { margin-top: 8px; color: var(--muted); }
.template-video-summary dl { display: grid; margin: 16px 0; border-top: 1px solid var(--line); }
.template-video-summary dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--line); padding: 9px 0; }
.template-video-summary dt { color: #7d8792; }
.template-video-summary dd { color: #d9dee4; }
.guide-steps { display: grid; gap: 9px; }
.guide-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.guide-step b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: var(--cyan-dim); color: var(--cyan); }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 80; max-width: min(380px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid #3e4853; border-radius: 7px; background: #171b20; color: #f4f6f8; box-shadow: 0 18px 45px rgba(0,0,0,.35); font-size: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: 160ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }

.rail-section-label { display: block; width: 56px; padding: 10px 2px 4px; color: #59616c; font-size: 8px; font-weight: 850; text-align: center; }

.project-command { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 220px; overflow: hidden; border: 1px solid #32423f; border-radius: 8px; background: #111719; }
.project-command .banner-copy { padding: 30px; }
.project-command .banner-copy h2 { max-width: 760px; }
.bundle-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 1px; border-left: 1px solid #2b3836; background: #202826; }
.bundle-preview span { display: grid; min-width: 0; min-height: 126px; align-content: center; justify-items: center; gap: 7px; padding: 16px 8px; background: #111719; text-align: center; }
.bundle-preview svg { width: 21px; color: var(--cyan); }
.bundle-preview b { font-size: 25px; line-height: 1; }
.bundle-preview small { color: var(--muted); font-size: 9px; }

.project-list { display: grid; border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: 38px minmax(170px, 1fr) minmax(150px, .55fr) 72px 18px; align-items: center; gap: 12px; min-height: 68px; border-bottom: 1px solid var(--line); padding: 9px 12px; background: var(--surface); cursor: pointer; }
.project-row:hover { background: #15191e; }
.project-row > div { min-width: 0; }
.project-row > div > strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-row > div > p { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-row > svg { width: 15px; color: #69727d; }
.project-row-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #34403e; border-radius: 6px; background: #17201f; color: var(--cyan); }
.project-row-icon svg { width: 17px; }
.project-progress { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.project-progress > span, .run-total > span { position: relative; display: block; height: 5px; overflow: hidden; border-radius: 3px; background: #292e35; }
.project-progress i, .run-total i { display: block; height: 100%; background: var(--cyan); }
.run-total.looping > span::after { position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(151,255,234,.88), transparent); content: ""; animation: delivery-progress-loop 1.35s ease-in-out infinite; }
.project-progress small { color: var(--muted); font-size: 9px; }
.run-status { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; color: #aeb6c0; font-size: 9px; font-style: normal; white-space: nowrap; }
.run-status.running { border-color: #31544d; background: #152a26; color: var(--cyan); }
.run-status.pass { border-color: #345940; background: #162a1d; color: var(--green); }
.run-status.review { border-color: #68502f; background: #2b2114; color: #ffc267; }
.run-status.block { border-color: #663b40; background: #2a171a; color: #ff858b; }

.project-workspace { width: min(1420px, 100%); margin: 0 auto; }
.project-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-bottom: 16px; }
.project-head .back-link { grid-column: 1 / -1; margin-bottom: 0; }
.project-head h2 { font-size: 20px; }
.bundle-cost { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid #5d482e; border-radius: 6px; padding: 0 11px; background: #201a13; color: #ffc077; font-size: 10px; }
.bundle-cost svg { width: 15px; }
.project-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px 8px 0 0; overflow: hidden; background: #0e1013; }
.project-step { display: grid; grid-template-columns: 32px 24px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 58px; border: 0; border-right: 1px solid var(--line); padding: 8px 13px; background: transparent; color: #707985; cursor: pointer; text-align: left; }
.project-step:last-child { border-right: 0; }
.project-step > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #353b43; border-radius: 6px; }
.project-step svg { width: 15px; }
.project-step b { color: #555d67; font-size: 9px; }
.project-step small { overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.project-step.active { background: #16201f; color: #fff; }
.project-step.active > span { border-color: #3e776c; background: var(--cyan-dim); color: var(--cyan); }
.project-step.done { color: #a9c7c1; }
.project-step.done > span { border-color: #31544d; color: var(--cyan); }
.project-panel { min-height: 600px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #0c0e11; }

.project-two-column, .confirmation-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr); min-height: 600px; }
.project-upload-panel, .project-facts-panel, .confirmation-form, .bundle-plan { min-width: 0; padding: 20px; }
.project-upload-panel, .confirmation-form { border-right: 1px solid var(--line); }
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-title > div { min-width: 0; }
.panel-title span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.panel-title h3 { font-size: 14px; line-height: 1.45; }
.panel-title > b { flex: none; color: var(--cyan); font-size: 11px; }
.panel-title > svg { width: 20px; color: var(--cyan); }
.confidence { min-width: 46px; min-height: 27px; border: 1px solid #34645b; border-radius: 5px; padding: 5px 8px; background: #142b27; text-align: center; }
.project-dropzone { display: grid; place-items: center; min-height: 190px; border: 1px dashed #45505a; border-radius: 7px; padding: 24px; background: #111419; cursor: pointer; text-align: center; }
.project-dropzone:hover { border-color: var(--cyan); background: #121c1a; }
.project-dropzone input { display: none; }
.project-dropzone svg { width: 31px; margin-bottom: 11px; color: var(--cyan); }
.project-dropzone strong { font-size: 12px; }
.project-dropzone small { max-width: 300px; margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.source-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.source-image { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #e7eaeb; }
.source-image.main { border-color: #3f7d70; }
.source-image img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.source-image > span { position: absolute; bottom: 5px; left: 5px; min-height: 20px; border-radius: 4px; padding: 4px 6px; background: rgba(8,9,11,.85); color: #fff; font-size: 8px; }
.source-image > em { position: absolute; right: 5px; bottom: 5px; display: flex; align-items: center; gap: 4px; min-height: 20px; border-radius: 4px; padding: 4px 6px; background: rgba(9,36,31,.9); color: #70ead2; font-size: 8px; font-style: normal; }
.source-image > em svg { width: 10px; height: 10px; }
.source-image > button { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: rgba(8,9,11,.84); color: #fff; cursor: pointer; }
.source-image > button svg { width: 13px; }
.project-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; color: var(--muted); }
.project-note svg { width: 17px; color: var(--cyan); }
.project-note p { font-size: 9px; line-height: 1.6; }
.fact-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--line); }
.fact-summary > div, .fact-summary > section { min-width: 0; padding: 12px; background: #111419; }
.fact-summary > section { grid-column: 1 / -1; }
.fact-summary span { display: block; color: var(--muted); font-size: 9px; }
.fact-summary strong { display: block; overflow: hidden; margin-top: 5px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fact-summary p { margin-top: 5px; color: #c4cbd4; font-size: 10px; line-height: 1.55; }
.fact-summary .selling-point-editor { display: grid; gap: 7px; }
.selling-point-editor .field-label-action { min-height: 27px; }
.selling-point-editor textarea { width: 100%; min-height: 92px; resize: vertical; border: 1px solid #343c46; border-radius: 6px; padding: 9px 10px; background: #0b0e11; color: #f0f3f5; font: inherit; font-size: 10px; line-height: 1.6; }
.selling-point-editor textarea:focus { outline: 1px solid #288778; border-color: #288778; }
.selling-point-editor textarea::placeholder { color: #555e68; }
.selling-point-editor > small { color: #727d88; font-size: 8px; line-height: 1.5; }
.project-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.confirmation-layout { grid-template-columns: minmax(0, 1fr) 370px; }
.confirmation-form .form-stack { margin-top: 0; }
.bundle-plan { align-self: start; position: sticky; top: 0; }
.bundle-items { display: grid; border-top: 1px solid var(--line); }
.bundle-items > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 46px; border-bottom: 1px solid var(--line-soft); }
.bundle-items svg { width: 15px; color: var(--cyan); }
.bundle-items span { min-width: 0; font-size: 10px; }
.bundle-items b { color: var(--muted); font-size: 8px; }
.cost-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; margin-top: 17px; border: 1px solid #5b482f; border-radius: 7px; padding: 13px; background: #1d1812; }
.cost-summary span { color: #bea77f; font-size: 10px; }
.cost-summary strong { color: #ffc274; font-size: 13px; }
.cost-summary small { grid-column: 1 / -1; color: #88775f; font-size: 9px; line-height: 1.5; }
.confirm-check { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0; color: #a5adb7; font-size: 9px; line-height: 1.55; }
.confirm-check input { flex: none; width: 16px; height: 16px; accent-color: var(--cyan); }
.bundle-plan > .primary-button, .bundle-plan > .ghost-button { width: 100%; margin-top: 8px; }
.template-pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 16px; }
.template-pack-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #12161a; color: #dce2e7; cursor: pointer; text-align: left; }
.template-pack-card:hover { border-color: #50605e; }
.template-pack-card.active { border-color: #2c9d89; background: #13211f; box-shadow: inset 3px 0 #3ad7ba; }
.template-pack-card img { width: 64px; height: 58px; object-fit: cover; border-radius: 4px; }
.template-pack-card span { display: grid; min-width: 0; gap: 4px; }
.template-pack-card strong { font-size: 10px; }
.template-pack-card small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-pack-card > i { position: absolute; top: 5px; right: 5px; border-radius: 3px; padding: 3px 5px; background: #563721; color: #ffc783; font-size: 7px; font-style: normal; }
.pack-preview { margin: 0 0 16px; border: 1px solid var(--line); background: #0c1013; }
.pack-preview-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.pack-preview-tabs button { display: inline-flex; min-width: 0; height: 34px; align-items: center; justify-content: center; gap: 5px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.pack-preview-tabs button:last-child { border-right: 0; }
.pack-preview-tabs button:hover { color: #e7efed; }
.pack-preview-tabs button.active { background: #13211f; color: #62e4cc; box-shadow: inset 0 -2px #32c8ac; }
.pack-preview-tabs svg { width: 13px; height: 13px; }
.pack-preview-stage { position: relative; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); min-height: 176px; overflow: hidden; }
.pack-preview-stage > img { width: 100%; height: 100%; min-height: 176px; max-height: 230px; object-fit: cover; background: #171c20; }
.pack-preview-stage > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 7px; padding: 18px; }
.pack-preview-stage > div > span { color: #43d6bb; font-size: 8px; font-weight: 700; }
.pack-preview-stage h4 { margin: 0; color: #f4f7f6; font-size: 13px; line-height: 1.35; }
.pack-preview-stage p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.pack-preview-stage.video > img { filter: brightness(.68); }
.preview-cover-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.32); border-radius: 4px; padding: 5px 7px; background: rgba(7,11,13,.76); color: #d8dee3; font-size: 8px; font-weight: 800; }
.preview-cover-badge svg { width: 12px; height: 12px; color: var(--cyan); }
.fact-review-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; margin-bottom: 14px; border: 1px solid #665035; border-radius: 6px; padding: 11px; background: #19150f; }
.fact-review-notice > svg { width: 17px; color: var(--orange); }
.fact-review-notice strong { display: block; color: #f4e6cb; font-size: 10px; }
.fact-review-notice p { margin-top: 4px; color: #d1bea0; font-size: 9px; line-height: 1.55; }
.fact-review-notice small { display: block; margin-top: 5px; color: #8f8678; font-size: 8px; line-height: 1.5; }
.plan-section { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 13px; }
.plan-label { display: block; margin-bottom: 8px; color: #9ea8b2; font-size: 9px; font-weight: 800; }
.package-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.package-mode-tabs button { display: grid; align-content: center; gap: 5px; min-width: 0; min-height: 68px; border: 0; border-right: 1px solid var(--line); padding: 9px; background: #111419; color: #9ca5af; cursor: pointer; text-align: left; }
.package-mode-tabs button:last-child { border-right: 0; }
.package-mode-tabs button.active { background: #15302b; color: #effffb; }
.package-mode-tabs strong { font-size: 9px; }
.package-mode-tabs small { font-size: 7px; line-height: 1.45; }
.presenter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.presenter-card { display: grid; min-width: 0; min-height: 118px; align-content: start; justify-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #111419; color: #9da6b0; cursor: pointer; }
.presenter-card.active { border-color: #2fa78f; background: #14231f; color: #fff; }
.presenter-card img, .presenter-card > span { display: grid; place-items: center; width: 100%; height: 84px; overflow: hidden; border-radius: 4px; background: #2c3338; color: #d5e3df; font-size: 22px; object-fit: cover; object-position: center 6%; }
.presenter-card strong { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.presenter-card small { overflow: hidden; max-width: 100%; color: #69747e; font-size: 7px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.presenter-card.active small { color: #7fcfbe; }
.plan-help { display: block; margin-top: 7px; color: #6f7882; font-size: 8px; line-height: 1.5; }
.voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.voice-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 50px; border: 1px solid var(--line); border-radius: 6px; padding: 7px; background: #111419; color: #a8b0b8; cursor: pointer; text-align: left; }
.voice-card.active { border-color: #98713b; background: #251e14; color: #fff2d9; }
.voice-card svg { width: 17px; color: #e3a64e; }
.voice-card span { display: grid; min-width: 0; gap: 3px; }
.voice-card strong { font-size: 8px; }
.voice-card small { overflow: hidden; color: #8f98a2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.voice-delivery-settings { display: grid; gap: 12px; }
.audio-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.audio-mode-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 66px; border: 1px solid #303b41; border-radius: 6px; padding: 10px; background: #0f1316; color: #a2ada9; text-align: left; cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.audio-mode-card:hover { border-color: #4b5d5a; color: #e5eeeb; }
.audio-mode-card.active { border-color: #2f8f7d; background: #132620; color: #effffb; box-shadow: inset 3px 0 #38d7b8; }
.audio-mode-card > svg { width: 19px; color: #65736f; }
.audio-mode-card.active > svg { color: var(--cyan); }
.audio-mode-card > span { display: grid; min-width: 0; gap: 4px; }
.audio-mode-card strong { font-size: 10px; }
.audio-mode-card small { color: #74817d; font-size: 8px; line-height: 1.45; }
.audio-mode-card.active small { color: #8fbdb4; }
.voice-language-field { display: grid; gap: 7px; min-width: 0; color: #8f98a2; font-size: 8px; font-weight: 800; }
.voice-language-field > div { display: grid; grid-template-columns: 25px minmax(0, 1fr) 20px; align-items: center; min-height: 42px; border: 1px solid var(--line); border-radius: 6px; background: #0e1215; color: #dce5e7; }
.voice-language-field > div:focus-within { border-color: #2fa78f; box-shadow: 0 0 0 1px rgba(47, 167, 143, .16); }
.voice-language-field svg { width: 14px; height: 14px; justify-self: center; color: #42d5b7; pointer-events: none; }
.voice-language-field select { width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; appearance: none; background: transparent; color: #edf2f4; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.voice-language-field select option { background: #11161a; color: #edf2f4; }
.voice-language-help { margin: -4px 0 0; color: #6f7882; font-size: 7px; line-height: 1.55; }
.voice-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voice-content-chain { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 7px; margin: 0; border: 1px solid #24483f; border-radius: 6px; padding: 9px; background: #101b18; color: #8faaa3; font-size: 7px; line-height: 1.55; }
.voice-content-chain > svg { width: 14px; color: #42d5b7; }
.voice-content-chain span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.voice-content-chain b { color: #dce8e5; font-size: 7px; }
.voice-content-chain em { color: #4f6a64; font-style: normal; }
.digital-presenters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.digital-presenters .presenter-card { min-height: 148px; }
.digital-presenters .presenter-card img { height: 112px; }
.digital-voice-label { margin-top: 16px; }
.digital-production-cta { width: 100%; margin-top: 14px; }
.option-fields details { border: 1px solid var(--line); border-radius: 6px; padding: 9px; background: #111419; }
.option-fields summary { color: #a9b1ba; cursor: pointer; font-size: 9px; font-weight: 800; }
.option-fields details textarea { margin-top: 9px; min-height: 74px; }
.refined-options { display: grid; gap: 12px; }
.production-option-group { display: grid; gap: 7px; }
.production-option-group > span, .scene-field > span { color: #9ea8b2; font-size: 9px; font-weight: 800; }
.option-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.option-tile { display: grid; min-width: 0; min-height: 36px; align-content: center; gap: 3px; border: 1px solid #303841; border-radius: 5px; padding: 7px 9px; background: #111419; color: #9ca6b0; cursor: pointer; text-align: left; transition: border-color .16s, background .16s, color .16s; }
.option-tile:hover { border-color: #4b5a60; color: #d8e0e4; }
.option-tile.active { border-color: #2f8f7d; background: #142722; color: #effffb; box-shadow: inset 2px 0 #38d7b8; }
.option-tile strong { overflow: hidden; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.option-tile small { color: #69747e; font-size: 7px; line-height: 1.35; }
.option-tile.active small { color: #87b9af; }
.ratio-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.image-ratio-group { margin-bottom: 9px; border: 1px solid #273039; border-radius: 6px; padding: 9px; background: #0e1215; }
.scene-field { display: grid; gap: 7px; }
.scene-field > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; min-height: 38px; border: 1px solid #303841; border-radius: 5px; background: #111419; }
.scene-field svg { justify-self: center; width: 13px; color: #66727c; }
.scene-field input { min-width: 0; width: 100%; height: 36px; border: 0; outline: 0; padding: 0 9px 0 0; background: transparent; color: #ecf1f3; font-size: 9px; }
.scene-field input::placeholder, .option-fields textarea::placeholder { color: #56616b; }
.option-fields textarea { width: 100%; border: 1px solid #303841; border-radius: 5px; padding: 9px; background: #0e1114; color: #e9edef; font-size: 9px; line-height: 1.5; resize: vertical; }
.video-production-options { display: grid; gap: 11px; }
.video-quality-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-ratio-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.video-mode-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fixed-video-duration { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #2d4f47; border-radius: 6px; padding: 10px; background: #101b18; }
.fixed-video-duration > svg { width: 17px; color: var(--cyan); }
.fixed-video-duration span { display: grid; gap: 2px; min-width: 0; }
.fixed-video-duration strong { color: #edf8f5; font-size: 9px; }
.fixed-video-duration small { color: #72857f; font-size: 7px; line-height: 1.45; }
.fixed-video-duration > b { color: var(--cyan); font-size: 12px; }
.duration-control { border: 1px solid #273039; border-radius: 6px; padding: 9px; background: #0e1215; }
.duration-control > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.duration-control > span b { color: var(--cyan); font-size: 10px; }
.duration-control > small { color: #68747d; font-size: 7px; }
.duration-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.duration-presets button { min-width: 0; height: 28px; border: 1px solid #303841; border-radius: 4px; background: #111419; color: #8e99a3; font-size: 8px; font-weight: 800; cursor: pointer; }
.duration-presets button:hover { border-color: #4b5a60; color: #d8e0e4; }
.duration-presets button.active { border-color: #2f8f7d; background: #142722; color: #effffb; }
.duration-control input[type="range"] { width: 100%; height: 18px; accent-color: var(--cyan); cursor: pointer; }
.model-limit-note { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 6px; border: 1px solid #34423f; border-radius: 5px; padding: 8px; background: #111916; color: #7f918c; font-size: 8px; line-height: 1.5; }
.model-limit-note svg { width: 13px; color: var(--cyan); }
.panel-title.compact { margin-bottom: 7px; }
.locked-rules { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin-top: 12px; border: 1px solid #334441; border-radius: 6px; padding: 10px; background: #121b19; color: #8fa49f; }
.locked-rules svg { width: 16px; color: var(--cyan); }
.locked-rules p { font-size: 8px; line-height: 1.6; }

.plan-workspace { min-width: 0; }
.plan-goal-strip { display: grid; grid-template-columns: minmax(230px, .62fr) minmax(520px, 1.38fr); align-items: center; gap: 24px; border-bottom: 1px solid var(--line); padding: 18px 20px; background: #101316; }
.plan-goal-strip > div:first-child > span { color: var(--cyan); font-size: 9px; font-weight: 800; }
.plan-goal-strip h3 { margin-top: 4px; font-size: 16px; }
.plan-goal-strip p { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.goal-tabs { border-radius: 7px; }
.goal-tabs button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; align-content: center; min-height: 64px; gap: 8px; padding: 10px 12px; }
.goal-tabs button > svg { width: 19px; color: #69737e; }
.goal-tabs button.active > svg { color: var(--cyan); }
.goal-tabs button > span { display: grid; min-width: 0; gap: 4px; }
.goal-tabs strong { font-size: 10px; }
.goal-tabs small { overflow: hidden; color: #75808b; font-size: 8px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.compact-plan { min-height: 0; grid-template-columns: minmax(0, 1fr) 420px; }
.compact-plan .confirmation-form { display: grid; align-content: start; gap: 12px; }
.compact-plan .bundle-plan { top: 12px; }
.product-facts-editor, .pack-change { border: 1px solid var(--line); border-radius: 7px; background: #111419; }
.product-facts-editor > summary, .pack-change > summary { display: grid; align-items: center; list-style: none; cursor: pointer; }
.product-facts-editor > summary::-webkit-details-marker, .pack-change > summary::-webkit-details-marker { display: none; }
.product-facts-editor > summary { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 11px; padding: 8px; }
.product-facts-editor > summary > img { width: 56px; height: 56px; border-radius: 5px; object-fit: cover; background: #fff; }
.product-facts-editor > summary > span { display: grid; min-width: 0; gap: 3px; }
.product-facts-editor > summary small { color: var(--cyan); font-size: 8px; font-weight: 800; }
.product-facts-editor > summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-facts-editor > summary em { color: var(--muted); font-size: 8px; font-style: normal; }
.product-facts-editor > summary > svg, .pack-change > summary > svg { width: 15px; color: #69737d; transition: transform .18s; }
.product-facts-editor[open] > summary > svg, .pack-change[open] > summary > svg { transform: rotate(180deg); }
.compact-facts { border-top: 1px solid var(--line); padding: 14px; }
.product-facts-editor .fact-review-notice { margin: 0 14px 14px; }
.recommended-pack { display: grid; grid-template-columns: 82px minmax(0, 1fr) 24px; align-items: center; gap: 13px; min-height: 102px; border: 1px solid #315149; border-radius: 7px; padding: 9px; background: #111a18; }
.recommended-pack > img { width: 82px; height: 82px; border-radius: 5px; object-fit: contain; background: #f5f5f3; }
.recommended-pack > div { min-width: 0; }
.recommended-pack span { color: var(--cyan); font-size: 8px; font-weight: 800; }
.recommended-pack h3 { margin-top: 4px; font-size: 14px; }
.recommended-pack p { margin-top: 6px; color: #97a29f; font-size: 9px; line-height: 1.55; }
.recommended-pack > svg { width: 21px; color: var(--cyan); }
.pack-change > summary { grid-template-columns: minmax(0, 1fr) 18px; min-height: 42px; padding: 0 12px; color: #aab3bc; font-size: 9px; font-weight: 800; }
.pack-change > summary > span { display: inline-flex; align-items: center; gap: 7px; }
.pack-change > summary span svg { width: 15px; color: var(--cyan); }
.pack-change .template-pack-grid { margin: 0; border-top: 1px solid var(--line); padding: 10px; }
.template-pack-grid.compact .template-pack-card { grid-template-columns: 34px minmax(0, 1fr); min-height: 56px; padding: 7px; }
.pack-icon { display: grid !important; place-items: center; width: 34px; height: 34px; border: 1px solid #34413e; border-radius: 5px; background: #17201e; }
.pack-icon svg { width: 16px; color: var(--cyan); }
.image-output-picker { border-top: 1px solid var(--line); padding-top: 14px; }
.output-presets { display: flex; gap: 6px; margin-bottom: 9px; }
.output-presets button { min-height: 30px; border: 1px solid var(--line); border-radius: 5px; padding: 0 10px; background: #111419; color: #8e98a3; font-size: 9px; cursor: pointer; }
.output-presets button.active { border-color: #337667; background: #142722; color: #7de8d3; }
.image-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.image-usage-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 68px; border: 1px solid var(--line); border-radius: 6px; padding: 9px; background: #111419; color: #8d98a3; text-align: left; cursor: pointer; }
.image-usage-card > svg { width: 17px; color: #717d87; }
.image-usage-card > span { display: grid; min-width: 0; gap: 4px; }
.image-usage-card strong { color: #dce4e8; font-size: 10px; }
.image-usage-card small { color: #68737e; font-size: 8px; line-height: 1.45; }
.image-usage-card > b { color: #66717a; font-size: 8px; font-weight: 600; white-space: nowrap; }
.image-usage-card.active { border-color: #2e8572; background: #13251f; box-shadow: inset 3px 0 0 var(--cyan); }
.image-usage-card.active > svg, .image-usage-card.active > b { color: var(--cyan); }
.custom-selection-note { display: flex; align-items: center; gap: 7px; margin: -3px 0 10px; color: #8c98a1; font-size: 8px; }
.custom-selection-note svg { width: 14px; color: var(--cyan); }
.output-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.output-choice { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 6px; padding: 7px; background: #111419; color: #89939e; cursor: pointer; text-align: left; }
.output-choice > svg { width: 15px; color: #68727c; }
.output-choice > span { display: grid; min-width: 0; gap: 3px; }
.output-choice strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.output-choice small { color: #656f79; font-size: 8px; }
.output-choice.active { border-color: #338a78; background: #14231f; color: #eefbf8; }
.output-choice.active > svg { color: var(--cyan); }
.detail-page-toggle { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 7px; background: #111419; color: #8f99a3; cursor: pointer; text-align: left; }
.detail-page-toggle > svg { width: 17px; }
.detail-page-toggle > span { display: grid; gap: 3px; }
.detail-page-toggle strong { font-size: 9px; }
.detail-page-toggle small { color: #69737d; font-size: 8px; }
.detail-page-toggle.active { border-color: #3c7569; background: #14231f; color: #dffaf4; }
.detail-page-toggle.active > svg { color: var(--cyan); }
.video-mode-summary { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid #315149; border-radius: 7px; padding: 13px; background: #111a18; }
.video-mode-summary > svg { width: 25px; color: var(--cyan); }
.video-mode-summary strong { font-size: 11px; }
.video-mode-summary p { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.tone-guidance { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px; margin-bottom: 10px; border: 1px solid #2f4843; border-radius: 5px; padding: 8px; background: #121b19; color: #9bada9; font-size: 8px; line-height: 1.5; }
.tone-guidance svg { width: 14px; color: var(--cyan); }
.presenter-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.presenter-grid.compact .presenter-card { min-height: 166px; }
.presenter-grid.compact .presenter-card img, .presenter-grid.compact .presenter-card > span { height: 114px; }
.avatar-source-settings { display: grid; gap: 14px; }
.avatar-source-block { display: grid; gap: 10px; padding: 13px; border: 1px solid #2d383c; border-radius: 6px; background: #0f1316; }
.source-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.source-block-head > span { color: #dfe8e5; font-size: 11px; font-weight: 800; }
.source-segmented { display: inline-grid; grid-template-columns: 1fr 1fr; min-width: 210px; border: 1px solid #334047; border-radius: 5px; overflow: hidden; background: #0c1013; }
.source-segmented button { min-height: 32px; border: 0; border-right: 1px solid #334047; background: transparent; color: #879490; font: inherit; font-size: 10px; cursor: pointer; }
.source-segmented button:last-child { border-right: 0; }
.source-segmented button.active { background: #123029; color: #57e4c9; font-weight: 800; }
.product-presenter-settings { display: grid; gap: 12px; }
.product-presenter-settings .source-segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 340px; }
.presenter-none-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 70px; margin: 0; border: 1px dashed #39464b; border-radius: 6px; padding: 12px; background: #101518; color: #8e9b97; font-size: 9px; line-height: 1.55; }
.presenter-none-note svg { width: 17px; color: var(--cyan); }
.platform-preference-grid .option-tile { min-height: 50px; }
.platform-preference-grid .option-tile strong { font-size: 10px; }
.platform-preference-grid .option-tile small { white-space: normal; }
.avatar-asset-drop { position: relative; display: flex; min-height: 110px; align-items: center; justify-content: center; gap: 14px; border: 1px dashed #415058; border-radius: 6px; background: #11171a; color: #93a19d; cursor: pointer; }
.avatar-asset-drop:hover { border-color: #38c7aa; background: #10201d; }
.avatar-asset-drop > svg { width: 26px; color: #4ce3c7; }
.avatar-asset-drop span, .avatar-upload-preview span, .avatar-audio-preview span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.avatar-asset-drop strong, .avatar-upload-preview strong, .avatar-audio-preview strong { color: #eef4f2; font-size: 11px; }
.avatar-asset-drop small, .avatar-upload-preview small, .avatar-audio-preview small { color: #85938f; font-size: 9px; line-height: 1.5; }
.avatar-asset-drop input, .compact-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar-upload-preview, .avatar-audio-preview { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border: 1px solid #354249; border-radius: 6px; background: #12181b; }
.avatar-upload-preview img { width: 92px; height: 116px; flex: 0 0 auto; object-fit: cover; object-position: center 8%; border-radius: 4px; background: #20272b; }
.avatar-audio-preview audio { width: 210px; max-width: 42%; height: 36px; }
.compact-upload { position: relative; flex: 0 0 auto; min-height: 32px; padding: 7px 9px; font-size: 9px; cursor: pointer; }
.avatar-transcript-field { display: grid; gap: 7px; color: #b7c2bf; font-size: 10px; }
.avatar-transcript-field textarea { min-height: 92px; resize: vertical; border: 1px solid #354249; border-radius: 5px; padding: 10px; background: #0d1215; color: #f1f5f4; font: inherit; line-height: 1.6; outline: none; }
.avatar-transcript-field textarea:focus { border-color: #38c7aa; }
.avatar-transcript-field small { color: #7f8d89; line-height: 1.5; }
.avatar-source-note { display: flex; align-items: center; gap: 9px; margin: 0; color: #91a09c; font-size: 10px; }
.avatar-source-note svg { width: 17px; color: #49dfc3; }
.avatar-rights-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #39443d; border-radius: 6px; background: #121914; cursor: pointer; }
.avatar-rights-check input { width: 15px; height: 15px; margin-top: 2px; accent-color: #35d7b8; }
.avatar-rights-check span { display: flex; flex-direction: column; gap: 4px; }
.avatar-rights-check strong { color: #dfe9e5; font-size: 10px; }
.avatar-rights-check small { color: #82908c; font-size: 9px; line-height: 1.5; }
.presenter-picker .panel-title { margin-bottom: 9px; }
.bundle-items.grouped > div { min-height: 58px; }
.bundle-items.grouped span { display: grid; gap: 4px; }
.bundle-items.grouped span strong { font-size: 10px; }
.bundle-items.grouped span small { overflow: hidden; color: #6f7984; font-size: 8px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.grouped-deliverables { margin-top: 17px; }

.run-layout { padding: 20px; }
.run-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 330px); align-items: center; gap: 22px; border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.run-overview h3 { margin-top: 8px; font-size: 16px; }
.run-overview p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.run-total { display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; align-items: center; gap: 9px; }
.run-total strong { font-size: 18px; }
.delivery-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.delivery-item { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 390px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #111419; }
.delivery-item.kind-copy { grid-template-rows: auto auto minmax(52px, auto) auto; min-height: 0; }
.delivery-item.review { border-color: #5e482c; }
.delivery-item.block { border-color: #60373d; }
.delivery-media { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #090b0e; }
.delivery-item.kind-copy .delivery-media { min-height: 132px; aspect-ratio: auto; place-items: start stretch; }
.delivery-media img, .delivery-media video { width: 100%; height: 100%; object-fit: contain; }
.delivery-image-button { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 0; padding: 0; background: #090b0e; cursor: zoom-in; }
.delivery-image-button img { transition: transform 180ms ease; }
.delivery-image-button:hover img { transform: scale(1.015); }
.delivery-image-button > span { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; min-height: 27px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 0 8px; background: rgba(8,10,12,.88); color: #f1f5f7; font-size: 8px; opacity: 0; transition: opacity 160ms ease; }
.delivery-image-button:hover > span, .delivery-image-button:focus-visible > span { opacity: 1; }
.delivery-image-button > span svg { width: 12px; }
.delivery-video-button { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 0; padding: 0; background: #07090b; cursor: pointer; }
.delivery-video-button video { pointer-events: none; transition: filter 180ms ease, transform 180ms ease; }
.delivery-video-button:hover video, .delivery-video-button:focus-visible video { filter: brightness(.72); transform: scale(1.012); }
.delivery-video-button > span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; background: linear-gradient(180deg, transparent 36%, rgba(5,7,9,.58)); color: #fff; }
.delivery-video-button > span svg { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; padding: 10px; background: rgba(5,8,10,.72); fill: currentColor; }
.delivery-video-button > span b { border-radius: 4px; padding: 4px 7px; background: rgba(5,8,10,.78); font-size: 9px; }
.delivery-placeholder { display: grid; justify-items: center; gap: 8px; color: #737c88; font-size: 9px; }
.delivery-placeholder svg { width: 26px; }
.delivery-placeholder.working svg { color: #69d9c4; animation: delivery-icon-breathe 1.35s ease-in-out infinite; }
.delivery-placeholder.working > span:not(.delivery-loop-track) { color: #a9b5b2; }
.delivery-placeholder.working small { color: #5f6974; font-size: 8px; }
.delivery-loop-track { position: relative; display: block; width: min(132px, 54%); height: 4px; overflow: hidden; border-radius: 3px; background: #252b31; }
.delivery-loop-track i { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: delivery-progress-loop 1.35s ease-in-out infinite; }
@keyframes delivery-progress-loop { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@keyframes delivery-icon-breathe { 0%,100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .run-total.looping > span::after, .delivery-loop-track i, .delivery-placeholder.working svg { animation-duration: 2.8s; }
}
.copy-preview { align-self: stretch; width: 100%; overflow: auto; padding: 15px; }
.copy-preview strong { display: block; font-size: 12px; line-height: 1.5; }
.copy-preview p { display: -webkit-box; overflow: hidden; margin-top: 8px; color: #adb5bf; font-size: 10px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.delivery-item > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 9px 10px; }
.delivery-item > header > div { display: flex; align-items: center; min-width: 0; gap: 7px; }
.delivery-item > header svg { flex: none; width: 14px; color: var(--cyan); }
.delivery-item > header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quality-summary { min-height: 52px; padding: 10px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.quality-summary.error { color: #ff979b; }
.delivery-item > footer { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 46px; border-top: 1px solid var(--line-soft); padding: 7px 9px; }
.delivery-item > footer:empty::after { color: #59616d; font-size: 8px; content: "完成后可修改或锁定"; }
.delivery-item > footer button, .delivery-download-link { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border: 1px solid var(--line); border-radius: 5px; padding: 0 8px; background: #181c21; color: #bfc6cf; cursor: pointer; font-size: 8px; text-decoration: none; }
.delivery-item > footer button:hover, .delivery-download-link:hover { border-color: #4d5964; color: #fff; }
.delivery-download-link { border-color: #28584f; background: #10241f; color: #79dfcc; }
.delivery-download-link.warning { border-color: #6a4b2a; background: #281d11; color: #f2bd77; }
.delivery-item > footer svg { width: 12px; }
.delivery-video-viewer { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 420px; max-height: calc(94vh - 54px); background: #050607; }
.delivery-video-viewer > video { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 0; max-height: calc(94vh - 120px); background: #030405; object-fit: contain; }
.delivery-video-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; border-top: 1px solid var(--line); padding: 10px 12px; background: #0f1216; }
.delivery-video-toolbar > span { display: inline-flex; align-items: center; gap: 8px; color: #9ba6b1; font-size: 9px; line-height: 1.5; }
.delivery-video-toolbar > span svg { flex: none; width: 16px; color: var(--cyan); }
.delivery-video-toolbar.warning { background: #18130d; }
.delivery-video-toolbar.warning > span { color: #dfb378; }
.delivery-video-toolbar.warning > span svg { color: #f0a84b; }

.delivery-final { min-height: 600px; padding: 22px; }
.delivery-final-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.delivery-final-head h2 { font-size: 19px; }
.delivery-final-head p:last-child { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.delivery-seal { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #5c3a3e; border-radius: 7px; background: #25171a; color: #ff7b82; }
.delivery-seal.ready { border-color: #356346; background: #17271c; color: var(--green); }
.delivery-seal svg { width: 26px; }
.delivery-final .delivery-item-grid { margin-top: 20px; }
.revision-form { display: grid; gap: 12px; }
.revision-form label { display: grid; gap: 7px; color: #a7afb9; font-size: 10px; }
.revision-form textarea { min-height: 120px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; resize: vertical; background: #0c0e11; color: #fff; line-height: 1.6; }

@media (max-width: 1280px) {
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-grid, .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .digital-flow { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
  .delivery-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  :root { --side: 0px; }
  .section-sidebar { display: none; }
  .app-shell { grid-template-columns: var(--rail) minmax(0,1fr); }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .creation-workspace { grid-template-columns: 300px minmax(0,1fr); }
  .result-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workflow-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-demo-source { grid-template-columns: auto minmax(0, 1fr); }
  .demo-source-rule { grid-column: 1 / -1; max-width: none; border-top: 1px solid #39423f; border-left: 0; padding-top: 10px; padding-left: 0; }
  .asset-grid, .work-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .account-metrics, .admin-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .project-command { grid-template-columns: minmax(0, 1fr) 260px; }
  .project-two-column { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); }
  .confirmation-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .compact-plan { grid-template-columns: minmax(0, 1fr) 360px; }
  .plan-goal-strip { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 760px) {
  .auth-gate { display: flex; min-height: 100vh; flex-direction: column; justify-content: center; gap: 18px; padding: 20px; }
  .auth-brand, .auth-form, .auth-gate > footer { width: min(100%, 420px); }
  body { overflow: auto; }
  .app-shell { display: block; height: auto; }
  .primary-rail { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: block; height: 62px; border-top: 1px solid var(--line); border-right: 0; }
  .brand-button, .rail-nav, .rail-bottom { display: none; }
  .mobile-nav { display: flex; height: 100%; justify-content: space-around; padding: 4px; }
  .mobile-nav .rail-item { flex: 1 1 0; min-width: 0; }
  .rail-item { flex: 1 1 44px; width: auto; min-width: 44px; min-height: 52px; }
  .workspace-shell { height: auto; }
  .topbar { position: sticky; top: 0; z-index: 10; height: 56px; padding: 0 12px; }
  .topbar h1 { max-width: 170px; font-size: 14px; }
  .service-pill, .top-action.quota { display: none; }
  .app-view { height: auto; min-height: calc(100vh - 118px); padding: 14px 12px 84px; overflow: visible; }
  .command-banner { grid-template-columns: 1fr; }
  .banner-visual { display: none; }
  .banner-copy { padding: 20px; }
  .banner-copy h2 { font-size: 22px; }
  .view-head { align-items: flex-start; flex-direction: column; }
  .search-row { align-items: stretch; flex-direction: column; }
  .search-box { min-width: 0; width: 100%; }
  .tool-grid, .video-tool-grid { grid-template-columns: 1fr; }
  .template-video-preview { grid-template-columns: 1fr; }
  .template-video-player { width: min(280px, 100%); max-height: 55vh; margin: 0 auto; }
  .creation-workspace { display: block; min-height: 0; }
  .tool-setup { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage-content { min-height: 520px; }
  .result-grid, .strategy-grid, .settings-grid, .workflow-demo-grid { grid-template-columns: 1fr; }
  .workflow-demo-source { grid-template-columns: 1fr; align-items: start; }
  .demo-source-thumb { width: 86px; height: 68px; }
  .demo-source-rule { grid-column: auto; }
  .workflow-steps, .workflow-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-steps > div:nth-child(2) { border-right: 0; }
  .workflow-steps > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .workflow-steps > div:nth-child(2) svg { display: none; }
  .scene-row { grid-template-columns: 48px 1fr; }
  .scene-row > div:last-child { grid-column: 2; }
  .canvas-shell { height: 620px; }
  .canvas-toolbar { left: 10px; max-width: calc(100% - 20px); overflow-x: auto; transform: none; }
  .digital-flow { display: flex; flex-direction: column; overflow: visible; }
  .flow-column, .flow-column.span-2 { width: 100%; min-width: 0; }
  .inspiration-grid { columns: 2 140px; }
  .asset-grid, .work-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .account-metrics, .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-form { grid-template-columns: 1fr; }
  .usage-table, .admin-table { min-width: 720px; }
  .ops-panel { overflow-x: auto; }
  .rail-section-label { display: none; }
  .project-command { grid-template-columns: 1fr; min-height: 0; }
  .project-command .banner-copy { padding: 20px; }
  .project-command .banner-copy h2 { font-size: 22px; }
  .project-command .banner-actions { align-items: stretch; flex-direction: column; }
  .bundle-preview { border-top: 1px solid #2b3836; border-left: 0; }
  .bundle-preview span { min-height: 96px; padding: 12px 5px; }
  .project-row { grid-template-columns: 36px minmax(0, 1fr) 64px 15px; gap: 9px; }
  .project-row .project-progress { grid-column: 2 / -1; grid-row: 2; }
  .project-row > .run-status { grid-column: 3; grid-row: 1; }
  .project-head { align-items: flex-start; grid-template-columns: 1fr; }
  .project-head .back-link { grid-column: 1; }
  .bundle-cost { justify-self: start; }
  .project-steps { grid-template-columns: repeat(4, minmax(58px, 1fr)); overflow-x: auto; }
  .project-step { grid-template-columns: 1fr; justify-items: center; min-height: 74px; gap: 3px; padding: 7px 4px; text-align: center; }
  .project-step b { display: none; }
  .project-step small { max-width: 100%; font-size: 9px; }
  .project-panel { min-height: 0; }
  .project-two-column, .confirmation-layout { grid-template-columns: 1fr; min-height: 0; }
  .project-upload-panel, .confirmation-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-upload-panel, .project-facts-panel, .confirmation-form, .bundle-plan { padding: 15px; }
  .bundle-plan { position: static; }
  .template-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-preview-tabs button { height: 38px; font-size: 8px; }
  .pack-preview-tabs button svg { display: none; }
  .pack-preview-stage { grid-template-columns: 42% minmax(0, 1fr); min-height: 150px; }
  .pack-preview-stage > img { min-height: 150px; }
  .pack-preview-stage > div { padding: 12px; }
  .package-mode-tabs { grid-template-columns: 1fr; }
  .package-mode-tabs button { min-height: 54px; border-right: 0; border-bottom: 1px solid var(--line); }
  .package-mode-tabs button:last-child { border-bottom: 0; }
  .presenter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-goal-strip { padding: 15px; }
  .goal-tabs { grid-template-columns: 1fr; }
  .goal-tabs button { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
  .goal-tabs button:last-child { border-bottom: 0; }
  .goal-tabs small { white-space: normal; }
  .image-usage-grid { grid-template-columns: 1fr; }
  .output-choice-grid { grid-template-columns: 1fr; }
  .ratio-options, .video-mode-options, .video-ratio-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recommended-pack { grid-template-columns: 68px minmax(0, 1fr) 20px; }
  .recommended-pack > img { width: 68px; height: 68px; }
  .digital-presenters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voice-grid, .voice-grid.compact { grid-template-columns: 1fr; }
  .audio-mode-grid { grid-template-columns: 1fr; }
  .source-block-head { align-items: stretch; flex-direction: column; }
  .source-segmented, .product-presenter-settings .source-segmented { width: 100%; min-width: 0; }
  .source-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .run-layout, .delivery-final { padding: 14px; }
  .run-overview { grid-template-columns: 1fr; gap: 14px; }
  .delivery-item-grid { grid-template-columns: 1fr; }
  .delivery-item { min-height: 360px; }
  .delivery-final-head { grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
  .delivery-final-head > a { grid-column: 1 / -1; width: 100%; }
  .delivery-seal { width: 46px; height: 46px; }
}

.service-pill.warning span { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 157, 74, 0.08); }
.system-notice { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 14px 0 20px; padding: 13px 15px; border: 1px solid #5d492f; border-radius: 7px; background: #18150f; }
.system-notice > svg { width: 20px; color: var(--orange); }
.system-notice strong { font-size: 12px; }
.system-notice p { margin-top: 4px; color: #a9a092; font-size: 10px; line-height: 1.55; }
.system-notice.critical { border-color: #63383b; background: #1b1113; }
.system-notice.critical > svg { color: var(--danger); }

.toolbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.toolbox-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.toolbox-media { position: relative; height: 150px; overflow: hidden; background: #0d1014; }
.toolbox-media img { width: 100%; height: 100%; object-fit: cover; }
.toolbox-media > span { position: absolute; left: 12px; bottom: 12px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; background: rgba(8,10,12,.82); color: var(--cyan); }
.toolbox-card:nth-child(2) .toolbox-media > span { color: var(--orange); }
.toolbox-card:nth-child(3) .toolbox-media > span { color: var(--magenta); }
.toolbox-card:nth-child(4) .toolbox-media > span { color: var(--blue); }
.toolbox-card:nth-child(3) .toolbox-media img { object-position: center top; }

.quality-review-actions {
  display: flex;
  gap: 6px;
  min-width: 104px;
}

.quality-review-actions button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.quality-review-actions button:hover { border-color: var(--cyan); }
.quality-review-actions button.danger { color: var(--red); }
.toolbox-card > div:last-child { padding: 14px; }
.toolbox-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toolbox-card h3 { font-size: 14px; }
.toolbox-card header b { border: 1px solid #31564d; border-radius: 4px; padding: 3px 6px; color: var(--green); font-size: 8px; }
.toolbox-card.limited header b { border-color: #5e4930; color: var(--orange); }
.toolbox-card p { min-height: 34px; margin: 7px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }

.settings-wide { grid-column: 1 / -1; }
.publication-art { display: grid; width: 100%; height: 100%; place-items: center; background: #101916; color: var(--cyan); }
.publication-art svg { width: 36px; height: 36px; }
.publication-art span { margin-top: -42%; font-size: 10px; font-weight: 900; }
.delivery-blocked, .delivery-locked { display: inline-flex; align-items: center; gap: 5px; color: var(--orange); font-size: 9px; font-weight: 750; }
.delivery-blocked svg, .delivery-locked svg { width: 13px; height: 13px; }
.table-scroll { width: 100%; overflow-x: auto; }
.jobs-table td { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-table td strong, .jobs-table td small { display: block; }
.jobs-table td small { margin-top: 4px; color: #646d78; font-size: 8px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.capability-grid > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid var(--line-soft); border-radius: 6px; background: #0e1013; }
.capability-grid span { font-size: 10px; }
.capability-grid b { color: var(--muted); font-size: 9px; }
.bundle-estimate-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 10px; }
.bundle-estimate-row strong { color: #f2f5f7; font-size: 11px; }
.compact-flow { grid-template-columns: repeat(4, minmax(220px, 1fr)); align-items: start; }
.delivery-standard-list { display: grid; gap: 9px; }
.delivery-standard-list span { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 5px; color: #bcc4cd; font-size: 10px; }
.delivery-standard-list svg { width: 15px; color: var(--cyan); }
.delivery-summary { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: #0d1013; }
.delivery-summary strong { font-size: 11px; }
.delivery-summary p { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.voice-audition { width: 100%; margin-top: 12px; }

@media (max-width: 1040px) {
  .toolbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-flow { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 760px) {
  .system-notice { grid-template-columns: 28px minmax(0, 1fr); }
  .system-notice > button { grid-column: 2; justify-self: start; }
  .toolbox-grid, .compact-flow { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .settings-wide { grid-column: auto; }
}

@media (max-width: 640px) {
  .modal.media-preview-modal { width: 100%; max-height: 96vh; }
  #modalBody.media-preview-body { max-height: calc(96vh - 54px); }
  .delivery-image-viewer > img { max-height: calc(96vh - 128px); }
  .delivery-image-viewer > div { align-items: stretch; flex-direction: column; }
  .delivery-image-viewer > div .secondary-button { justify-content: center; }
  .delivery-image-button > span { opacity: 1; }
  .delivery-video-viewer { min-height: 0; }
  .delivery-video-toolbar { align-items: stretch; flex-direction: column; }
  .delivery-video-toolbar .secondary-button { justify-content: center; }
}
/* Commercial six-step workspace */
.auth-tabs.three{grid-template-columns:repeat(3,1fr)}
.auth-brand[href]{color:inherit;text-decoration:none}.registration-credit{display:flex;align-items:center;gap:9px;color:#7df2db;background:#10231f;border:1px solid #245a4f;padding:11px 12px;margin:0;border-radius:5px}.registration-credit svg{width:17px}
.six-step-project .project-steps{grid-template-columns:repeat(6,minmax(0,1fr))}.six-step-project .project-step{min-width:0;padding:14px 12px}.six-step-project .project-step small{white-space:nowrap}.six-step-project .project-panel{min-height:620px}.step-intro{max-width:760px;margin-bottom:28px}.step-intro p{margin:0 0 8px;color:#3ce3c3;font-size:11px;font-weight:800;text-transform:uppercase}.step-intro h2{margin:0 0 10px;font-size:26px;letter-spacing:0}.step-intro>span{color:#98a7a4;line-height:1.65}.goal-step{padding:48px 52px}.goal-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.goal-card{min-height:210px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:26px;padding:26px;border:1px solid #293337;background:#101416;color:#eef3f1;border-radius:6px;cursor:pointer}.goal-card>svg:first-child{width:30px;height:30px;color:#46e5c7}.goal-card>svg:last-child{align-self:flex-end}.goal-card span{display:flex;flex-direction:column;gap:10px}.goal-card strong{font-size:20px}.goal-card small{font-size:13px;line-height:1.7;color:#9daba8}.goal-card:hover,.goal-card.active{border-color:#2b9e89;background:#10231f}.goal-card:disabled{opacity:.48;cursor:not-allowed}.upload-step-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);min-height:620px}.upload-step-layout>section,.upload-step-layout>aside{padding:30px}.upload-recognition-summary{border-left:1px solid #283236;display:flex;flex-direction:column}.upload-recognition-summary>.primary-button{margin-top:auto;align-self:flex-end}.source-image-grid.reorderable{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.source-image[draggable=true]{cursor:grab}.source-image.dragging{opacity:.4;border-color:#3ce3c3}.source-image>div{position:absolute;right:6px;top:6px;display:flex;gap:4px}.source-image>div button{position:static}.source-image>div button:disabled{display:none}.facts-step{padding:36px 46px}.facts-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.facts-form-grid label,.script-main-fields label,.script-scene label,.audience-fields label{display:flex;flex-direction:column;gap:8px;color:#a9b5b2;font-size:12px}.facts-form-grid input,.facts-form-grid textarea,.script-editor-step input,.script-editor-step textarea,.audience-fields input,.audience-fields select{width:100%;border:1px solid #344047;background:#111519;color:#f1f5f4;border-radius:5px;padding:12px 13px;font:inherit;outline:none}.facts-form-grid input:focus,.facts-form-grid textarea:focus,.script-editor-step input:focus,.script-editor-step textarea:focus{border-color:#34b99f}.facts-form-grid textarea{min-height:90px;resize:vertical}.facts-form-grid .wide{grid-column:1/-1}.facts-form-grid .selling-point-editor textarea{min-height:130px}.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid #273136}.six-step-project .plan-goal-strip,.six-step-project .product-facts-editor{display:none}.six-step-project .confirmation-layout.compact-plan{grid-template-columns:minmax(0,1.25fr) minmax(370px,.75fr)}.blueprint-settings{display:flex;flex-direction:column;gap:18px}.blueprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.blueprint-card{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:12px;border:1px solid #2c363b;background:#111519;color:#eaf0ee;border-radius:5px;cursor:pointer}.blueprint-card>svg{width:18px;color:#48e0c3;flex:0 0 auto}.blueprint-card span{display:flex;flex-direction:column;gap:4px}.blueprint-card small{color:#8f9c99;line-height:1.45}.blueprint-card.active{border-color:#278d79;background:#10231f}.subtype-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.audience-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:16px;border-top:1px solid #293337}.audience-fields>.panel-title{grid-column:1/-1}.audience-fields select{appearance:none}.script-confirm-step,.script-editor-step{padding:38px 46px}.script-contract-summary{border:1px solid #2b373a;background:#101517;border-radius:6px}.script-contract-summary>div{display:flex;align-items:center;gap:18px;padding:24px}.script-contract-summary>div>svg{width:28px;color:#45e3c4}.script-contract-summary>div span{display:flex;flex-direction:column;gap:6px}.script-contract-summary>div small{color:#94a29f}.script-contract-summary dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid #2b373a}.script-contract-summary dl div{padding:20px;border-right:1px solid #2b373a}.script-contract-summary dl div:last-child{border:0}.script-contract-summary dt{font-size:18px;font-weight:800}.script-contract-summary dd{margin:5px 0 0;color:#82908d;font-size:11px}.large-centered{margin:26px auto 8px;display:flex}.credit-note{text-align:center;color:#83918e;font-size:12px}.script-editor{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:18px}.script-main-fields{display:flex;flex-direction:column;gap:14px}.script-main-fields textarea{min-height:170px;resize:vertical}.script-scenes{display:flex;flex-direction:column;gap:10px}.script-scene{border:1px solid #2d383c;background:#101416;border-radius:6px;padding:15px}.script-scene header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.script-scene header>b{color:#58e8cc}.script-scene header label{flex-direction:row;align-items:center}.script-scene header input{width:68px}.script-scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.script-scene-grid .wide{grid-column:1/-1}.script-editor-step input:disabled,.script-editor-step textarea:disabled{opacity:.82;color:#c7d1ce}.submission-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding:18px;border:1px solid #2c3b38;background:#0d1917;border-radius:6px}.submission-bar>div{display:flex;align-items:center;gap:10px}.final-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.final-check-grid article{padding:22px;border:1px solid #2c363a;background:#101416;border-radius:6px}.final-check-grid svg{color:#40dfc0}.final-check-grid strong{display:block;margin:18px 0 8px}.final-check-grid p{margin:0;color:#93a09d;line-height:1.6;font-size:13px}.final-production-step>.run-layout+.delivery-final{margin-top:28px;border-top:1px solid #2b353a;padding-top:28px}
.six-step-project .confirmation-layout.compact-plan.video-plan{grid-template-columns:1fr}.video-plan>.confirmation-form{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid #293337}.video-plan>.bundle-plan{position:static}.video-plan .blueprint-group-list{display:grid;grid-template-columns:1fr 1fr}.video-plan .blueprint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-plan .subtype-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.video-plan .style-preset-grid,.video-plan .style-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1180px){.six-step-project .project-steps{grid-template-columns:repeat(3,1fr)}.upload-step-layout,.six-step-project .confirmation-layout.compact-plan,.script-editor{grid-template-columns:1fr}.upload-recognition-summary{border-left:0;border-top:1px solid #283236}.goal-card-grid{grid-template-columns:1fr}.blueprint-grid{grid-template-columns:1fr}.script-contract-summary dl{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.source-block-head{align-items:flex-start;flex-direction:column}.source-segmented{width:100%}.avatar-upload-preview,.avatar-audio-preview{align-items:stretch;flex-direction:column}.avatar-audio-preview audio{width:100%;max-width:none}.compact-upload{justify-content:center}.presenter-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.six-step-project .project-steps{display:flex;overflow-x:auto}.six-step-project .project-step{min-width:132px}.goal-step,.facts-step,.script-confirm-step,.script-editor-step{padding:24px 18px}.facts-form-grid,.audience-fields,.script-scene-grid,.final-check-grid{grid-template-columns:1fr}.facts-form-grid .wide,.audience-fields>.panel-title,.script-scene-grid .wide{grid-column:auto}.submission-bar,.step-actions{align-items:stretch;flex-direction:column}.submission-bar>div{flex-direction:column;align-items:stretch}.script-contract-summary dl{grid-template-columns:1fr 1fr}}

.script-editor-step select {
  width: 100%;
  border: 1px solid #344047;
  background: #111519;
  color: #f1f5f4;
  border-radius: 5px;
  padding: 12px 13px;
  font: inherit;
  outline: none;
}
.script-editor-step select:focus { border-color: #34b99f; }
.script-editor-step select:disabled { opacity: .82; color: #c7d1ce; }
.scene-asset-contract {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 12px;
  padding: 9px 11px;
  border-left: 2px solid #36c9ac;
  background: #0d1b18;
}
.scene-asset-contract span { display: flex; align-items: center; gap: 7px; color: #d9f6ef; font-size: 12px; font-weight: 800; }
.scene-asset-contract svg { width: 15px; color: #48e0c3; }
.scene-asset-contract small { color: #7f918d; font-size: 11px; }
.script-scene-grid.asset-fields {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #263136;
}
.script-scene-grid textarea { min-height: 68px; resize: vertical; }
.script-scene-grid .locked-field input { color: #96aba6; background: #0d1214; }
.script-scene-grid label small { color: #71817d; font-size: 10px; line-height: 1.45; }

@media(max-width:720px) {
  .scene-asset-contract { align-items: flex-start; flex-direction: column; }
}
@media(max-width:1180px){.video-plan>.confirmation-form{grid-template-columns:1fr}.video-plan .blueprint-group-list{grid-template-columns:1fr}}
@media(max-width:720px){.video-plan .blueprint-grid,.video-plan .subtype-grid,.video-plan .style-preset-grid,.video-plan .style-detail-grid{grid-template-columns:1fr}}
.audio-refine-form{display:flex;flex-direction:column;gap:18px}.audio-refine-form>label{display:flex;flex-direction:column;gap:8px}.audio-refine-form textarea{min-height:130px}.audio-refine-form textarea,.audio-refine-form select,.audio-refine-form input:not([type="range"]){border:1px solid #344047;background:#111519;color:#f3f6f5;border-radius:5px;padding:11px}.refine-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.refine-grid label{display:flex;flex-direction:column;gap:8px;color:#a5b1ae;font-size:12px}.audio-refine-form>p{margin:0;color:#8f9c99;font-size:12px}.feedback-form{display:grid;grid-template-columns:220px 1fr auto;gap:10px}.feedback-form textarea{grid-column:2/4;min-height:100px;resize:vertical}.feedback-form select,.feedback-form input,.feedback-form textarea{border:1px solid #344047;background:#111519;color:#f3f6f5;border-radius:5px;padding:11px}.project-row-actions{display:flex;gap:4px}.project-row-actions button,.work-actions button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #303a3f;background:#14191c;color:#aeb9b6;border-radius:4px;cursor:pointer}.project-row-actions svg,.work-actions button svg{width:15px}.work-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}@media(max-width:720px){.refine-grid,.feedback-form{grid-template-columns:1fr}.feedback-form textarea{grid-column:auto}.project-row-actions{display:none}}

/* Eight video blueprints and style controls */
.blueprint-group-list{display:flex;flex-direction:column;gap:14px}.blueprint-group{display:flex;flex-direction:column;gap:8px}.blueprint-group>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.blueprint-group>header strong{font-size:12px;color:#dce5e2}.blueprint-group>header small{font-size:10px;color:#74817f;text-align:right}.blueprint-card{min-height:88px;align-items:center}.blueprint-card>span{flex:1}.blueprint-card>svg:last-child{width:14px;color:#63706d}.blueprint-card.active>svg:last-child{color:#4be5c6}.blueprint-subtypes{padding-top:15px;border-top:1px solid #293337}.blueprint-subtypes>span{display:block;margin-bottom:4px;color:#d3dcda;font-size:11px;font-weight:800}.blueprint-subtypes>small{display:block;margin-bottom:10px;color:#74827f;font-size:9px;line-height:1.5}.audience-customization{border:1px solid #2b363a;background:#101416;border-radius:5px}.audience-customization>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;cursor:pointer;list-style:none}.audience-customization>summary::-webkit-details-marker{display:none}.audience-customization>summary span{display:flex;flex-direction:column;gap:3px}.audience-customization>summary b{font-size:11px}.audience-customization>summary small{color:#7f8d89;font-size:9px}.audience-customization>summary svg{width:15px;color:#778581;transition:transform .2s}.audience-customization[open]>summary svg{transform:rotate(180deg)}.audience-customization .audience-fields{margin:0 12px 12px;padding-top:12px}.video-style-customization{display:flex;flex-direction:column;gap:15px}.style-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.style-preset-card{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid #2b363a;background:#111519;color:#edf3f1;text-align:left;border-radius:5px;cursor:pointer}.style-preset-card>svg{width:17px;flex:0 0 auto;color:#7a8985}.style-preset-card>span{display:flex;min-width:0;flex-direction:column;gap:3px}.style-preset-card strong{font-size:11px}.style-preset-card small{overflow:hidden;color:#82908d;font-size:9px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.style-preset-card:hover,.style-preset-card.active{border-color:#288f7c;background:#10221f}.style-preset-card.active>svg{color:#4ce7c8}.style-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.style-detail-grid label,.style-custom-detail{display:flex;flex-direction:column;gap:6px;color:#9eaba8;font-size:10px}.style-detail-grid select,.style-custom-detail textarea{width:100%;border:1px solid #334047;background:#111519;color:#eef3f2;border-radius:5px;padding:10px;font:inherit;outline:none}.style-detail-grid select:focus,.style-custom-detail textarea:focus{border-color:#36bba1}.style-custom-detail textarea{min-height:74px;resize:vertical}.style-contract-note{display:flex;gap:8px;margin:0;color:#7f918d;font-size:10px;line-height:1.55}.style-contract-note svg{width:15px;flex:0 0 auto;color:#42dcbf}
@media(max-width:1180px){.style-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.blueprint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.style-preset-grid,.style-detail-grid,.blueprint-grid{grid-template-columns:1fr}.blueprint-group>header{align-items:flex-start;flex-direction:column}.blueprint-group>header small{text-align:left}.blueprint-card{min-height:78px}}

.blueprint-grid.recommended{grid-template-columns:repeat(3,minmax(0,1fr))}
.blueprint-grid.recommended .blueprint-card{min-height:108px}
.blueprint-card em{color:#45e3c4;font-size:9px;font-style:normal;font-weight:800}
.all-blueprint-options,.blueprint-subtypes,.style-advanced,.script-detail-editor{border:1px solid #2b363a;background:#101416;border-radius:6px}
.all-blueprint-options>summary,.blueprint-subtypes>summary,.style-advanced>summary,.script-detail-editor>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}
.all-blueprint-options>summary::-webkit-details-marker,.blueprint-subtypes>summary::-webkit-details-marker,.style-advanced>summary::-webkit-details-marker,.script-detail-editor>summary::-webkit-details-marker{display:none}
.all-blueprint-options>summary span,.blueprint-subtypes>summary span,.style-advanced>summary span,.script-detail-editor>summary span{display:flex;flex-direction:column;gap:3px}
.all-blueprint-options>summary b,.blueprint-subtypes>summary b,.style-advanced>summary b,.script-detail-editor>summary b{font-size:11px}
.all-blueprint-options>summary small,.blueprint-subtypes>summary small,.style-advanced>summary small,.script-detail-editor>summary small{color:#7f8d89;font-size:9px}
.all-blueprint-options>summary svg,.blueprint-subtypes>summary svg,.style-advanced>summary svg,.script-detail-editor>summary svg{width:15px;color:#778581;transition:transform .2s}
.all-blueprint-options[open]>summary svg,.blueprint-subtypes[open]>summary svg,.style-advanced[open]>summary svg,.script-detail-editor[open]>summary svg{transform:rotate(180deg)}
.all-blueprint-options .blueprint-grid,.blueprint-subtypes .subtype-grid,.style-advanced .style-detail-grid{margin:0 14px 14px;padding-top:13px;border-top:1px solid #273136}
.selected-subtype-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid #277a6b;background:#0f211e;border-radius:6px}
.selected-subtype-summary>span{display:flex;min-width:0;flex-direction:column;gap:4px}
.selected-subtype-summary small{color:#48dfc2;font-size:9px}
.selected-subtype-summary strong{font-size:13px}
.selected-subtype-summary em{overflow:hidden;color:#91a09c;font-size:10px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.selected-subtype-summary>b{flex:0 0 auto;color:#48dfc2;font-size:11px}
.execution-contract-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.execution-contract-preview>div,.story-rule-impact>div{display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid #293438;background:#0f1416;border-radius:5px}
.execution-contract-preview svg,.story-rule-impact svg{width:16px;flex:0 0 auto;color:#45dfc1}
.execution-contract-preview span,.story-rule-impact span{display:flex;min-width:0;flex-direction:column;gap:4px}
.execution-contract-preview strong,.story-rule-impact strong{font-size:10px}
.execution-contract-preview small,.story-rule-impact small{color:#7f8e8a;font-size:9px;line-height:1.55}
.style-preset-grid.simple{grid-template-columns:repeat(4,minmax(0,1fr))}
.style-advanced .style-custom-detail{margin:0 14px 14px}
.story-plan-review{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.story-card-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.story-beat-card{min-width:0;padding:13px;border:1px solid #2c393c;background:#101517;border-radius:6px}
.story-beat-card header{display:flex;align-items:center;gap:7px;margin-bottom:10px;color:#48e1c3;font-size:9px}
.story-beat-card header b{display:grid;width:22px;height:22px;place-items:center;border:1px solid #2b7e70;border-radius:4px}
.story-beat-card header span{font-weight:800}
.story-beat-card header svg{width:13px;margin-left:auto;color:#53615e}
.story-beat-card>strong{display:block;min-height:30px;margin-bottom:7px;font-size:11px;line-height:1.45}
.story-beat-card textarea{width:100%;min-height:92px;padding:9px;border:1px solid #2c373b;background:#0c1113;color:#cfd8d6;border-radius:4px;font:inherit;font-size:10px;line-height:1.55;resize:vertical}
.story-beat-card textarea:focus{border-color:#35b99f;outline:none}
.story-rule-impact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.script-detail-editor>.script-editor{padding:16px;border-top:1px solid #273136}
@media(max-width:1180px){.blueprint-grid.recommended,.style-preset-grid.simple{grid-template-columns:repeat(2,minmax(0,1fr))}.story-card-flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.blueprint-grid.recommended,.style-preset-grid.simple,.execution-contract-preview,.story-card-flow,.story-rule-impact{grid-template-columns:1fr}.selected-subtype-summary{align-items:flex-start;flex-direction:column}.story-beat-card>strong{min-height:0}}