:root {
  --bg: #eef4fa;
  --surface: #ffffff;
  --surface-soft: #f7fafe;
  --ink: #16243a;
  --muted: #71839a;
  --faint: #9aabbd;
  --line: #dbe6f0;
  --blue: #236fc5;
  --blue-dark: #174b8e;
  --cyan: #2ca6ba;
  --green: #168362;
  --orange: #c77d1e;
  --red: #c84c5b;
  --nav: #102039;
  --shadow: 0 12px 32px rgba(33, 77, 117, .08);
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font: 14px/1.55 Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.shell { display: flex; min-height: 100vh; }

/* Login: a restrained editorial surface, with no dependency on remote assets. */
.login-screen { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 24px; background: #07162c; color: #e9f4ff; }
.login-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(27, 108, 185, .28), transparent 48%), linear-gradient(315deg, rgba(30, 57, 108, .65), #07162c 68%); }
.login-atmosphere { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.login-atmosphere span { position: absolute; width: 44vw; height: 1px; background: rgba(137, 220, 255, .20); transform: rotate(-18deg); }
.login-atmosphere span:nth-child(1) { top: 20%; left: -8%; }
.login-atmosphere span:nth-child(2) { top: 64%; right: -12%; transform: rotate(26deg); }
.login-atmosphere span:nth-child(3) { bottom: 12%; left: 28%; transform: rotate(-5deg); opacity: .4; }
.login-shell { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 80px; align-items: center; position: relative; z-index: 1; }
.login-copy { max-width: 610px; }
.login-kicker, .eyebrow, .panel-kicker, .modal-kicker { color: #62cae9; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.login-copy h1 { margin: 20px 0 16px; font-size: clamp(34px, 4.5vw, 60px); line-height: 1.14; font-weight: 650; letter-spacing: 0; }
.login-copy h1 em { color: #7fe4f5; font-style: normal; }
.login-copy p { max-width: 520px; color: rgba(225, 239, 255, .73); font-size: 15px; line-height: 1.9; }
.login-signal { display: flex; align-items: center; gap: 6px; margin-top: 34px; color: rgba(207, 230, 251, .58); font: 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .09em; }
.login-signal i { width: 5px; height: 5px; border-radius: 50%; background: #72dff0; box-shadow: 0 0 12px #72dff0; }
.login-signal i:nth-child(2) { opacity: .55; }.login-signal i:nth-child(3) { opacity: .25; }.login-signal b { margin-left: 8px; font-weight: 600; }
.login-card { width: 100%; padding: 32px; color: var(--ink); background: rgba(255, 255, 255, .96); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.login-brand, .brand { display: flex; align-items: center; gap: 11px; }
.login-brand strong, .brand strong { display: block; font-size: 15px; letter-spacing: .01em; }.login-brand small, .brand small { display: block; color: var(--faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.login-logo, .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 800; border-radius: 12px; background: linear-gradient(140deg, #51cfe5, #3f6ee0); box-shadow: 0 8px 20px rgba(47, 130, 205, .27); }
.login-card h2 { margin: 27px 0 4px; font-size: 21px; }.login-card > p { margin: 0 0 22px; color: var(--muted); }
.login-card label, .field-label { display: grid; gap: 6px; margin: 13px 0; color: #49617a; font-size: 12px; font-weight: 700; }
.login-card input, .field-label input, .field-label select, .field-label textarea { width: 100%; padding: 10px 11px; color: var(--ink); background: #fbfdff; border: 1px solid var(--line); border-radius: 7px; outline: 0; }
.login-card input:focus, .field-label input:focus, .field-label select:focus, .field-label textarea:focus { border-color: #55a6d8; box-shadow: 0 0 0 3px rgba(58, 154, 210, .13); }
.login-error { min-height: 18px; color: var(--red); font-size: 12px; }.login-foot { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font: 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; }

.sidebar { width: 246px; flex: 0 0 246px; display: flex; flex-direction: column; padding: 21px 14px 17px; color: #cddcf0; background: linear-gradient(180deg, #0d1c34, #112744); }
.sidebar .brand { padding: 0 10px 23px; }.sidebar .brand small { color: #7490b0; }.sidebar .brand-mark { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
.workspace-switcher { display: block; width: calc(100% - 6px); min-width: 0; margin: 0 3px 18px; padding: 10px 11px; color: #e8f4ff; border: 1px solid rgba(156, 198, 231, .2); border-radius: 8px; outline: none; background: #162d4b; cursor: pointer; }.workspace-switcher:hover, .workspace-switcher:focus { border-color: rgba(117, 213, 238, .65); background: #1a385b; }.workspace-switcher option { color: #16243a; background: #fff; }
.sidebar nav { flex: 1; }.nav-label { margin: 13px 10px 7px; color: #7189a9; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; margin: 3px 0; color: #a9bdd5; border-radius: 7px; text-decoration: none; }.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }.nav-item.active { color: #fff; background: rgba(111, 215, 239, .13); box-shadow: inset 3px 0 #6cdcf1; }.nav-icon { width: 18px; color: #6cdcf1; text-align: center; font-size: 15px; }.nav-item em { margin-left: auto; padding: 1px 6px; color: #a9e9f5; background: rgba(94, 201, 222, .14); border-radius: 10px; font-size: 10px; font-style: normal; }.sidebar-footer { padding: 15px 10px 0; border-top: 1px solid rgba(179,208,235,.13); }.status-line { display: flex; align-items: center; gap: 7px; color: #9fb5cf; font-size: 11px; }.status-dot, .top-status i, .live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #40ca9c; box-shadow: 0 0 0 4px rgba(64,202,156,.13); }.sidebar-version { margin-top: 9px; color: #728aa8; font: 10px/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; }.logout { width: 100%; margin-top: 16px; color: #a9bdd5; border-color: rgba(179,208,235,.18); background: transparent; }
.main { min-width: 0; flex: 1; min-height: 100vh; background: linear-gradient(145deg, #f5f9fd, #eaf3fb 72%, #e5f0f8); }.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.74); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; }.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }.breadcrumb b { color: var(--ink); font-size: 15px; }.top-actions, .user-chip { display: flex; align-items: center; gap: 10px; }.top-status { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 10px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }.avatar { width: 31px; height: 31px; display: grid; place-items: center; color: #2568ab; border-radius: 50%; background: #d9ebfb; font-weight: 800; }.user-chip small { color: var(--faint); font-size: 10px; }.content { max-width: 1620px; margin: auto; padding: 30px 36px 58px; }.content.is-loading { opacity: .72; transition: opacity .18s; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }.page-header h1 { margin: 5px 0 5px; color: #142b4a; font-size: 29px; line-height: 1.15; }.page-header p { margin: 0; color: var(--muted); }.header-actions { display: flex; gap: 9px; }.btn { padding: 9px 14px; color: #39536d; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-weight: 700; transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; }.btn:hover { border-color: #aac9e4; background: #f9fcff; transform: translateY(-1px); }.btn.primary { color: #fff; border-color: #2779cb; background: linear-gradient(135deg, #287fcf, #315bc0); box-shadow: 0 7px 17px rgba(39, 119, 198, .2); }.btn.primary:hover { box-shadow: 0 10px 22px rgba(39, 119, 198, .27); }.btn.secondary { background: rgba(255,255,255,.58); }.btn.tiny { padding: 6px 10px; font-size: 12px; }.btn.success { color: var(--green); border-color: #bde6d6; background: #effbf6; }.btn.danger { color: var(--red); border-color: #f0c4ca; background: #fff5f6; }.btn.full { width: 100%; margin-top: 18px; }.icon-btn { width: 29px; height: 29px; display: inline-grid; place-items: center; padding: 0; color: #55718f; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.icon-btn:hover { color: var(--blue); border-color: #afd0eb; }.muted { color: var(--muted); font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }.stat-card { min-width: 0; padding: 17px 19px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.88); box-shadow: var(--shadow); }.stat-label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }.stat-card strong { display: block; overflow: hidden; margin: 6px 0 3px; color: #193b63; font-size: 24px; white-space: nowrap; text-overflow: ellipsis; }.stat-detail { color: var(--green); font-size: 11px; }.stat-card.orange .stat-detail { color: var(--orange); }.stat-card.blue { border-top: 3px solid #3485d2; }.stat-card.green { border-top: 3px solid #3ba983; }.stat-card.orange { border-top: 3px solid #de9d4a; }
.workspace-layout, .workflow-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 16px; align-items: start; }.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.9); box-shadow: var(--shadow); }.workspace-panel, .drama-panel { padding: 21px; }.panel-heading, .drama-heading, .queue-heading, .workflow-toolbar, .source-card-top, .source-footer, .run-row, .worker-row, .ops-card-top, .progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.panel-heading { margin-bottom: 14px; }.panel-heading h2, .queue-heading h2 { margin: 3px 0 0; color: #193554; font-size: 17px; }.workspace-list { min-width: 0; display: grid; gap: 6px; }.workspace-item { width: 100%; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px; color: var(--ink); text-align: left; border: 1px solid transparent; border-radius: 8px; background: transparent; }.workspace-item:hover { background: #f4f8fd; }.workspace-item.active { border-color: #c7e0f5; background: #edf6ff; }.workspace-avatar { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; color: #2476bd; border-radius: 8px; background: #dceeff; font-weight: 800; }.workspace-item-copy { min-width: 0; flex: 1; }.workspace-item-copy strong, .workspace-item-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.workspace-item-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }.visibility, .version-chip { padding: 3px 6px; border-radius: 4px; font-size: 10px; white-space: nowrap; }.visibility.private { color: #a56c15; background: #fff2dc; }.visibility.team_shared { color: #276e97; background: #e8f6fb; }.workspace-tip { display: flex; gap: 9px; margin-top: 18px; padding: 12px; color: #4d6b88; border-top: 1px solid var(--line); }.workspace-tip > span { color: #3a9ac2; font-size: 17px; }.workspace-tip strong, .workspace-tip small { display: block; }.workspace-tip strong { font-size: 11px; }.workspace-tip small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.workflow-next-action { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 13px 16px; color: #365f7d; border: 1px solid #cce2f1; border-radius: 8px; background: #eff9ff; }.workflow-next-action strong { color: #1676a7; }.workflow-next-action span { flex: 1; font-size: 13px; }.project-wizard .brief-fields { margin-top: 16px; }
.drama-heading { align-items: flex-start; }.panel-kicker { color: var(--blue); }.drama-name { margin-top: 4px; font-size: 21px; font-weight: 800; }.ratio-chip { display: inline-block; margin-left: 7px; padding: 2px 7px; color: #2869a7; border: 1px solid #c8dff1; border-radius: 5px; font-size: 10px; vertical-align: 3px; }.drama-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 11px; }.drama-meta .live-dot { width: 5px; height: 5px; box-shadow: none; }.stage-track { display: grid; grid-template-columns: repeat(8, minmax(90px, 1fr)); gap: 5px; margin: 24px 0 30px; overflow-x: auto; }.stage-step { min-width: 90px; padding-top: 9px; border-top: 3px solid #dbe6ef; color: var(--faint); }.stage-step span, .stage-step b, .stage-step small { display: block; }.stage-step span { font: 10px "SFMono-Regular", Consolas, monospace; }.stage-step b { margin-top: 3px; color: inherit; font-size: 11px; }.stage-step small { margin-top: 2px; font-size: 10px; }.stage-step.done { color: var(--green); border-color: #31a781; }.stage-step.current { color: var(--blue); border-color: #2b7ecb; }.queue-heading { margin-bottom: 12px; }.queue-heading > div span { color: var(--muted); font-size: 11px; }.task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.task-card { display: flex; min-width: 0; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.task-thumb { width: 76px; height: 76px; flex: 0 0 auto; overflow: hidden; border-radius: 7px; background: #e8f1f8; }.task-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }.task-thumb.placeholder { display: grid; place-items: center; color: #74a2c0; font-size: 22px; }.task-content { min-width: 0; flex: 1; }.task-top { display: flex; justify-content: space-between; gap: 6px; }.task-stage { color: var(--blue); font: 9px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }.task-card h3 { overflow: hidden; margin: 3px 0 0; color: #213c5b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.task-card p { display: -webkit-box; overflow: hidden; min-height: 37px; margin: 6px 0 0; color: var(--muted); font-size: 11px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.task-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.status-badge { display: inline-flex; align-items: center; padding: 3px 7px; color: #a36c17; border-radius: 4px; background: #fff1d9; font-size: 10px; white-space: nowrap; }.status-badge.approved { color: #177957; background: #e7f8f0; }.status-badge.rework, .status-badge.failed { color: #b23f4e; background: #fff0f2; }.status-badge.running, .status-badge.generating { color: #2a6fb4; background: #e9f3ff; }.status-badge.ready { color: #287894; background: #e8f7fb; }.empty-state, .loading-state { padding: 48px 20px; color: var(--muted); text-align: center; }.empty-state.compact { padding: 25px 10px; }.empty-drama { display: grid; min-height: 350px; place-items: center; align-content: center; padding: 45px; text-align: center; }.empty-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 13px; color: #2a84cb; border: 1px solid #bfdcf2; border-radius: 14px; background: #edf7ff; font-size: 24px; }.empty-drama h2 { margin: 0; color: #1f3b5b; }.empty-drama p { max-width: 400px; margin: 8px 0 18px; color: var(--muted); }

.research-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 16px 18px; border: 1px solid #c9e4f0; border-radius: var(--radius); background: #edf9fc; }.research-hero-icon { width: 35px; height: 35px; display: grid; place-items: center; color: #2189a9; border-radius: 9px; background: #d7f1f6; font-size: 20px; }.research-hero strong { color: #245878; }.research-hero p { margin: 2px 0 0; color: #668399; font-size: 11px; }.research-policy { margin-left: auto; color: #278366; font-size: 11px; white-space: nowrap; }.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }.filter-tabs { display: flex; gap: 5px; }.filter-tab { padding: 7px 11px; color: var(--muted); border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 12px; }.filter-tab:hover, .filter-tab.active { color: var(--blue); border-color: #c6def2; background: #edf6ff; }.filter-tab span { margin-left: 3px; font-size: 10px; }.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.source-card { position: relative; min-width: 0; padding: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.source-type { padding: 3px 7px; color: #287894; border-radius: 4px; background: #e8f7fb; font-size: 10px; }.source-type.video_page, .source-type.video_file { color: #785c99; background: #f3edfa; }.source-card h3 { overflow: hidden; margin: 12px 0 5px; color: #203d5c; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.source-card p { display: -webkit-box; min-height: 43px; overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }.source-url { display: block; overflow: hidden; margin-top: 10px; color: #6686a3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.source-footer { margin-top: 14px; padding-top: 10px; color: var(--faint); border-top: 1px solid #edf2f6; font-size: 10px; }.rights-select { max-width: 102px; padding: 4px; color: #607a92; border: 1px solid var(--line); border-radius: 5px; background: #fbfdff; font-size: 10px; }.source-cover { height: 90px; margin-top: 11px; overflow: hidden; border-radius: 6px; }.source-cover img { width: 100%; height: 100%; object-fit: cover; }

.run-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }.run-summary > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.75); }.run-summary span, .run-summary strong { display: block; }.run-summary span { color: var(--muted); font-size: 11px; }.run-summary strong { overflow: hidden; margin-top: 4px; color: #214466; text-overflow: ellipsis; white-space: nowrap; }.run-panel { padding: 20px; }.run-list { display: grid; gap: 7px; }.run-row { width: 100%; padding: 12px; color: var(--ink); text-align: left; border: 1px solid #e4edf4; border-radius: 7px; background: #fbfdff; }.run-row:hover { border-color: #bfd9ee; background: #f5faff; }.run-status { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #d4dde5; }.run-status.running { background: #3f91df; box-shadow: 0 0 0 4px #e1f0ff; }.run-status.waiting_review { background: #db9a3b; }.run-status.failed { background: #d45e69; }.run-main { min-width: 0; flex: 1; }.run-main strong, .run-main small { display: block; }.run-main strong { font-size: 12px; }.run-main small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.run-arrow { color: #9bb2c7; font-size: 18px; }

.workflow-toolbar { margin-bottom: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.74); }.workflow-name { color: #214466; font-weight: 800; }.version-chip { margin-left: 8px; color: #2872ad; background: #eaf4ff; }.workflow-toolbar .status-badge { margin-left: 6px; }.workflow-layout { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }.flow-panel, .config-panel { padding: 20px; }.flow-canvas-caption { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 13px; color: #55738f; border-bottom: 1px solid var(--line); font: 10px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }.flow-canvas-caption small { color: var(--muted); font: 11px/1.3 inherit; letter-spacing: 0; }.flow-list { display: grid; gap: 9px; margin-top: 15px; }.flow-node-card { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-left: 3px solid #2d81ca; border-radius: 8px; background: #fff; }.flow-node-index { width: 26px; color: #7b9bb8; font: 11px "SFMono-Regular", Consolas, monospace; }.flow-node-icon { width: 29px; height: 29px; display: grid; place-items: center; color: #2478b9; border-radius: 8px; background: #eaf5ff; font-weight: 800; }.flow-node-copy { min-width: 0; flex: 1; }.flow-node-copy strong { margin-right: 8px; color: #244362; }.node-kind { color: #7890a7; font: 10px "SFMono-Regular", Consolas, monospace; }.flow-node-copy small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.node-edit { opacity: .65; }.flow-node-card:hover .node-edit { opacity: 1; }.config-panel h2 { margin: 3px 0 16px; color: #214466; font-size: 17px; }.config-panel textarea { min-height: 105px; resize: vertical; }.policy-list { display: grid; gap: 8px; margin-top: 18px; }.policy-list div { padding: 10px; border: 1px solid #e4edf4; border-radius: 7px; background: #f8fbfe; }.policy-list span, .policy-list strong { display: block; }.policy-list span { color: var(--muted); font-size: 10px; }.policy-list strong { margin-top: 3px; color: #3b5874; font-size: 11px; }

.ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }.ops-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }.ops-card-top { color: var(--muted); font-size: 11px; }.service-state { width: 8px; height: 8px; border-radius: 50%; background: #d06269; }.service-state.online { background: #3bbc8a; box-shadow: 0 0 0 4px #dff6ec; }.service-state.degraded { background: #dd9b3b; box-shadow: 0 0 0 4px #fff1d8; }.service-state.disabled { background: #9aabbd; }.ops-card strong { display: block; margin: 9px 0 2px; color: #214466; font-size: 20px; }.ops-card small { color: var(--muted); font-size: 10px; }.worker-panel { padding: 20px; }.worker-row { padding: 12px 0; border-top: 1px solid #edf2f6; }.worker-row:first-of-type { border-top: 0; }.worker-icon { width: 29px; height: 29px; display: grid; place-items: center; color: #2677ba; border-radius: 8px; background: #eaf5ff; }.worker-row > div { min-width: 0; flex: 1; }.worker-row strong, .worker-row small { display: block; }.worker-row strong { font-size: 12px; }.worker-row small, .worker-row time { color: var(--muted); font-size: 10px; }.ops-note { margin-top: 12px; color: var(--muted); font-size: 11px; }
.error-state { display: grid; justify-items: start; gap: 7px; padding: 50px 20px; color: var(--red); }.error-state span { color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(12, 35, 63, .42); backdrop-filter: blur(4px); }.modal { width: min(470px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 25px; border: 1px solid #c8dbe9; border-radius: 12px; background: #fff; box-shadow: 0 25px 80px rgba(10, 34, 61, .28); }.modal-head h2 { margin: 5px 0 4px; color: #1b395a; font-size: 20px; }.modal-head p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }.modal-kicker { color: var(--blue); }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.source-examples { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }.source-examples b { padding: 3px 6px; color: #2c7795; border-radius: 4px; background: #eaf7fb; font-size: 10px; font-weight: 600; }.check-row { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #4a6580; font-size: 12px; }.check-row input { accent-color: var(--blue); }.run-monitor { margin: 25px 0 18px; }.progress-line { height: 8px; overflow: hidden; border-radius: 99px; background: #e4edf5; }.progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #43b9d0, #3479cc); transition: width .25s ease; }.progress-meta { margin-top: 8px; }.progress-meta strong { color: var(--blue); }.progress-meta span { color: var(--muted); font-size: 11px; }
.brief-fields { margin: 18px 0 2px; padding: 14px 14px 5px; border: 1px solid #dceaf2; border-radius: 8px; background: #f7fbfd; }
.brief-fields-title { margin-bottom: 10px; color: #2f7899; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.brief-fields .field-label { margin: 10px 0; }
.brief-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 9px; }
@media (max-width: 520px) { .brief-grid { grid-template-columns: 1fr; gap: 0; } }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 40; padding: 11px 15px; color: #fff; border-radius: 7px; background: #18304d; box-shadow: 0 12px 30px rgba(5, 28, 52, .25); }.toast.success { background: #176d55; }.toast.danger { background: #9e3e4b; }

.worker-task-list { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf2f6; }.modal-section-label { color: var(--blue); font: 10px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }.worker-task-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-top: 1px solid #edf2f6; }.worker-task-item:first-of-type { border-top: 0; }.worker-task-item > div:first-child { min-width: 0; flex: 1; }.worker-task-item strong, .worker-task-item small { display: block; }.worker-task-item small { color: var(--muted); font-size: 10px; }.worker-task-actions { width: 100%; display: flex; gap: 6px; }

@media (max-width: 1100px) { .login-shell { grid-template-columns: minmax(0, 1fr) 360px; gap: 35px; }.sidebar { width: 220px; flex-basis: 220px; }.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .login-shell { display: block; max-width: 420px; }.login-copy { display: none; }.sidebar { width: 68px; flex-basis: 68px; padding: 19px 9px; }.sidebar .brand { justify-content: center; padding: 0 0 22px; }.sidebar .brand > div:last-child, .workspace-switcher-name, .workspace-switcher .chevron, .nav-label, .nav-item span:not(.nav-icon), .nav-item em, .sidebar-footer { display: none; }.workspace-switcher { justify-content: center; padding: 10px 0; }.nav-item { justify-content: center; padding: 11px 0; }.main { min-width: 0; }.topbar { padding: 0 16px; }.top-status, .user-chip small { display: none; }.content { padding: 22px 16px 40px; }.page-header { display: block; }.header-actions { margin-top: 14px; }.workspace-layout, .workflow-layout { grid-template-columns: minmax(0, 1fr); }.task-grid, .source-grid { grid-template-columns: minmax(0, 1fr); }.run-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ops-grid { grid-template-columns: minmax(0, 1fr); }.research-hero { align-items: flex-start; }.research-policy { display: none; }.drama-heading { flex-wrap: wrap; }.drama-heading > div:first-child { min-width: 0; width: 100%; }.drama-heading .heading-actions { width: 100%; max-width: 100%; flex-wrap: wrap; }.drama-select, .episode-select { min-width: 0; max-width: 100%; flex: 1 1 145px; } }
@media (max-width: 520px) { .model-row { flex-wrap: wrap; }.model-copy { flex: 1 1 180px; }.model-row .status-badge { margin-left: 42px; } }
@media (max-width: 430px) { .login-screen { padding: 15px; }.login-card { padding: 25px 21px; }.stats-grid, .run-summary { grid-template-columns: minmax(0, 1fr); }.topbar { height: 62px; }.breadcrumb b { font-size: 13px; }.drama-panel, .workspace-panel { padding: 15px; }.stage-track { margin-bottom: 22px; }.queue-heading { align-items: flex-start; flex-direction: column; }.task-card { padding: 10px; }.task-thumb { width: 58px; height: 58px; }.modal { padding: 21px; } }
.source-actions { margin-top: 10px; }.snapshot-excerpt { max-height: 330px; overflow: auto; padding: 14px; color: #3f5c77; border: 1px solid #e0ebf3; border-radius: 8px; background: #f7fbfe; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.heading-actions { display: flex; gap: 6px; }
.codex-connection { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 9px; color: #47708d; border: 1px solid #d6e4ed; border-radius: 7px; background: #f8fbfd; font-size: 11px; font-weight: 700; }.codex-connection i { width: 7px; height: 7px; border-radius: 50%; background: #a5b4c0; }.codex-connection.online, .codex-connection.busy { color: #147755; border-color: #bfe5d4; background: #f0fbf6; }.codex-connection.online i { background: #24a878; box-shadow: 0 0 0 3px rgba(36,168,120,.12); }.codex-connection.busy i { background: #2d84cf; box-shadow: 0 0 0 3px rgba(45,132,207,.12); }.codex-connection.offline, .codex-connection.degraded { color: #9b5360; border-color: #f0d6db; background: #fff7f8; }.codex-connection.offline i, .codex-connection.degraded i { background: #ce6876; }
.workflow-contract-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 13px 0 2px; padding: 12px; border: 1px solid #cfe4ed; border-radius: 8px; background: #f3fafb; }.workflow-contract-guide > div { min-width: 0; padding: 3px 5px; }.workflow-contract-guide span, .workflow-contract-guide strong, .workflow-contract-guide small { display: block; }.workflow-contract-guide strong { margin: 4px 0; color: #26506d; font-size: 12px; line-height: 1.5; }.workflow-contract-guide small { color: #668098; font-size: 11px; line-height: 1.55; }.executor-chip { display: inline-flex; margin-left: 7px; padding: 2px 5px; color: #52738d; border-radius: 4px; background: #edf3f7; font-size: 9px; font-weight: 700; vertical-align: 1px; }.executor-chip.codex { color: #6b4a9d; background: #f1ebfa; }.prompt-source { overflow: hidden; margin-top: 5px; color: #618099; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.prompt-contract-editor { margin: 16px 0 6px; padding: 13px; border: 1px solid #d8e8ef; border-radius: 8px; background: #f8fcfd; }.prompt-contract-editor .field-label { margin-top: 11px; }.prompt-contract-preview { margin-top: 10px; color: #55728d; font-size: 11px; }.prompt-contract-preview summary { cursor: pointer; font-weight: 700; }.prompt-contract-preview ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
@media (max-width: 780px) { .codex-connection span { display: none; }.codex-connection { width: 30px; justify-content: center; padding: 5px; }.workflow-contract-guide { grid-template-columns: minmax(0, 1fr); } }
.episode-select { max-width: 150px; padding: 7px 9px; color: #31516f; border: 1px solid #cfe0ed; border-radius: 7px; background: #fff; font-size: 11px; }
.drama-select { max-width: 170px; padding: 7px 9px; color: #31516f; border: 1px solid #cfe0ed; border-radius: 7px; background: #fff; font-size: 11px; }
.multi-select { min-height: 82px; padding: 7px; }
.node-card-actions { display: flex; gap: 3px; }.node-edit, .node-delete { opacity: .65; }.node-delete { color: #ba5361; }.flow-node-card:hover .node-edit, .flow-node-card:hover .node-delete { opacity: 1; }
.worker-task-output { max-width: 100%; max-height: 100px; overflow: auto; margin: 7px 0 0; padding: 7px; color: #5b7290; border: 1px solid #e4edf4; border-radius: 5px; background: #f8fbfe; font: 10px/1.45 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }.worker-task-error { margin-top: 6px; color: #b23f4e !important; }
.member-list { display: grid; gap: 7px; max-height: 170px; overflow: auto; margin-bottom: 10px; }
.member-row { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e5edf4; border-radius: 7px; background: #fafcff; }
.member-avatar { width: 27px; height: 27px; display: grid; place-items: center; color: #2678bb; border-radius: 50%; background: #e3f1fc; font-weight: 700; }
.member-row div { min-width: 0; flex: 1; }.member-row strong, .member-row small { display: block; }.member-row strong { font-size: 12px; }.member-row small { color: var(--muted); font-size: 10px; }
.workspace-group { min-width: 0; width: 100%; overflow: hidden; }.workspace-group + .workspace-group { margin-top: 14px; }
.workspace-group-label { display: flex; align-items: center; justify-content: space-between; margin: 4px 4px 6px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.workspace-group-label em { padding: 2px 5px; color: #5e82a0; border-radius: 5px; background: #eef5fa; font-style: normal; font-size: 9px; }
.reviewer-note { padding: 8px 11px; color: #6f8294; border: 1px dashed #cbdce8; border-radius: 7px; background: #f8fbfd; font-size: 11px; }
.canvas-summary-state { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid #dce9f2; border-radius: 7px; background: #f7fbfe; }
.canvas-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #acbdca; }.canvas-state-dot.completed, .canvas-state-dot.succeeded { background: #2ca27b; }.canvas-state-dot.running, .canvas-state-dot.queued { background: #3785cf; }.canvas-state-dot.waiting_review { background: #d89b3f; }
.canvas-summary-state small { margin-left: auto; color: var(--muted); font-size: 10px; }.canvas-node-list { display: grid; gap: 6px; max-height: 270px; overflow: auto; margin-top: 14px; }
.canvas-node-row { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e3edf4; border-radius: 7px; background: #fff; }.canvas-node-number { color: #8ca4b7; font: 10px "SFMono-Regular", Consolas, monospace; }.canvas-node-row > div { min-width: 0; flex: 1; }.canvas-node-row strong, .canvas-node-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.canvas-node-row strong { color: #264563; font-size: 11px; }.canvas-node-row small { color: var(--muted); font-size: 10px; }
.canvas-edge-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf2f6; }.canvas-edge-list .modal-section-label { width: 100%; }.canvas-edge-list span:not(.modal-section-label) { padding: 4px 7px; color: #55718c; border-radius: 5px; background: #eef5fa; font-size: 10px; }.canvas-edge-list b { color: #2f8ab7; margin: 0 3px; }

/* Media review stays inside the decision surface so reviewers do not lose context. */
.wide-modal, .modal-wide { width: min(1180px, calc(100vw - 48px)); }
.review-content-summary { margin: 4px 0 18px; padding: 16px 18px; border: 1px solid #d9e8f2; border-radius: 10px; background: linear-gradient(135deg, #f6fbff, #eef8f5); }
.review-summary-title { color: #173b5d; font-size: 18px; font-weight: 800; }
.review-content-summary p { margin: 6px 0 0; color: #55718c; font-size: 13px; line-height: 1.6; }
.scene-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scene-card { min-width: 0; padding: 14px; border: 1px solid #dce8f1; border-radius: 9px; background: #fff; }
.scene-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; }
.scene-card-head span { color: #2a8bb0; font: 10px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.scene-card-head strong { color: #244866; line-height: 1.5; }
.scene-card-head em { color: #7890a6; font-size: 11px; font-style: normal; }
.scene-dialogue { margin-top: 10px; padding: 9px 11px; color: #285b77; border-left: 3px solid #59b9c6; background: #f0fafb; font-size: 12px; line-height: 1.6; }
.scene-note { margin-top: 9px; color: #6a8195; font-size: 12px; line-height: 1.6; }
.subtitle-table, .timeline-list { display: grid; gap: 6px; }
.subtitle-row, .timeline-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e0ebf3; border-radius: 7px; background: #fbfdff; }
.subtitle-row time, .timeline-row small { color: #64819a; font: 11px "SFMono-Regular", Consolas, monospace; }
.subtitle-row span { color: #284c69; font-size: 13px; }
.timeline-row { grid-template-columns: 34px 100px 100px minmax(0, 1fr); }
.timeline-index { color: #2e8db5; font-weight: 800; }
.timeline-row strong { color: #294d6a; }
.timeline-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parameter-disclosure, .technical-json { margin-top: 16px; border-top: 1px solid #e2ecf3; }
.parameter-disclosure summary, .technical-json summary { padding: 12px 0; color: #47708d; cursor: pointer; font-size: 12px; font-weight: 700; }
.parameter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.parameter-item { min-width: 0; padding: 9px 10px; border: 1px solid #e0ebf3; border-radius: 6px; background: #f8fbfd; }
.parameter-item span, .parameter-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parameter-item span { color: #7890a5; font-size: 10px; }
.parameter-item strong { margin-top: 3px; color: #2f5875; font-size: 11px; }
.technical-json .technical-json-preview { max-height: 38vh; }
.media-preview-shell { display: grid; min-height: 220px; place-items: center; overflow: hidden; border: 1px solid #dce8f1; border-radius: 10px; background: #122b43; }
.media-preview-image { display: block; width: 100%; max-height: min(64vh, 560px); object-fit: contain; }
.media-preview-video { display: block; width: 100%; max-height: min(64vh, 560px); background: #071522; }
.media-preview-audio { display: grid; width: 100%; min-height: 180px; place-items: center; gap: 16px; padding: 28px; background: linear-gradient(135deg, #153c5c, #1d7180); }
.media-preview-audio audio { width: min(520px, 100%); }
.media-audio-icon { width: 68px; height: 68px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(255,255,255,.14); font-size: 31px; }
.media-unavailable { padding: 48px 22px; color: #a7bfd2; text-align: center; }
.candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.candidate-card { min-width: 0; padding: 10px; border: 1px solid #dce8f1; border-radius: 9px; background: #fbfdff; }
.candidate-media { display: grid; min-height: 145px; place-items: center; overflow: hidden; border-radius: 7px; background: #112b44; }
.candidate-media .media-preview-image, .candidate-media .media-preview-video { max-height: 190px; }
.candidate-meta { display: flex; justify-content: space-between; gap: 7px; margin: 9px 1px; }
.candidate-meta strong { overflow: hidden; color: #294865; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-meta span { color: #7890a7; font-size: 10px; white-space: nowrap; }
.candidate-count { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; color: #fff; border-radius: 5px; background: rgba(22, 54, 82, .8); font-size: 10px; }
.task-thumb { position: relative; }
.task-thumb-media { color: #4f8fbb; font-size: 21px; }
.canvas-graph-wrap { max-height: 390px; overflow: auto; margin-top: 14px; padding: 12px; border: 1px solid #dce8f1; border-radius: 9px; background: #f4f9fc; }
.canvas-graph { display: block; width: 100%; min-width: 650px; height: auto; }
.canvas-edge-line { fill: none; stroke: #86a9c4; stroke-width: 2; stroke-dasharray: 5 4; }
.canvas-graph-node rect { fill: #fff; stroke: #bed7e8; stroke-width: 1.2; filter: drop-shadow(0 3px 4px rgba(30, 77, 113, .08)); }
.canvas-graph-node circle { fill: #e9f5ff; stroke: #9dc8e6; }
.canvas-graph-node text { fill: #3072a7; font: 10px "SFMono-Regular", Consolas, monospace; }
.canvas-graph-node .canvas-graph-label { fill: #264563; font: 700 12px system-ui, sans-serif; }
.canvas-graph-node .canvas-graph-kind { fill: #7890a7; font: 10px system-ui, sans-serif; }
.canvas-graph-node .canvas-graph-link { fill: #2478b9; font-size: 15px; }
@media (max-width: 720px) { .candidate-grid { grid-template-columns: minmax(0, 1fr); }.candidate-media { min-height: 180px; }.wide-modal, .modal-wide { width: calc(100vw - 24px); padding: 18px; }.scene-card-list, .parameter-grid { grid-template-columns: minmax(0, 1fr); }.subtitle-row, .timeline-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }.timeline-row { align-items: start; } }

.artifact-filter-row { display: flex; gap: 6px; margin: 13px 0 11px; overflow-x: auto; padding-bottom: 3px; }
.artifact-filter { flex: 0 0 auto; padding: 6px 10px; color: #6f879c; border: 1px solid transparent; border-radius: 6px; background: #f4f8fb; font-size: 10px; }
.artifact-filter:hover, .artifact-filter.active { color: #2374b5; border-color: #c7def0; background: #eaf5ff; }
.artifact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.artifact-card { min-width: 0; overflow: hidden; border: 1px solid #dce8f1; border-radius: 9px; background: #fff; box-shadow: 0 6px 16px rgba(36, 78, 111, .045); }
.artifact-visual { display: grid; height: 140px; place-items: center; overflow: hidden; background: #edf4f8; }
.artifact-thumb-image { width: 100%; height: 100%; object-fit: cover; }
.artifact-thumb-media { color: #4f8fbb; font-size: 24px; }
.artifact-placeholder { color: #78a3be; font-size: 23px; font-weight: 800; }
.artifact-body { min-width: 0; padding: 11px 12px 12px; }
.artifact-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.artifact-kind { overflow: hidden; color: #2b80ba; font: 9px "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.artifact-body h3 { overflow: hidden; margin: 7px 0 4px; color: #213e5c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.artifact-body p { display: -webkit-box; min-height: 31px; overflow: hidden; margin: 0; color: #6c8498; font-size: 10px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.artifact-version { display: block; margin-top: 7px; color: #9aafbf; font-size: 9px; }
.subtitle-preview { display: grid; gap: 5px; margin: 10px 0; padding: 9px 10px; border-left: 2px solid var(--blue); border-radius: 4px; background: rgba(90, 147, 193, .07); color: var(--text-soft); font-size: 12px; }
.subtitle-preview span { display: flex; min-width: 0; gap: 8px; align-items: baseline; }
.subtitle-preview b { flex: 0 0 auto; color: var(--blue); font-size: 10px; font-weight: 700; }
.artifact-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.btn.lock { color: #6b5d9a; border-color: #dbd5f0; background: #f7f4ff; }
.execution-task-strip { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #d4e1eb; }
.execution-task-strip > span { display: block; margin-bottom: 8px; color: #8197a9; font: 9px "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.execution-task-strip .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 780px) { .artifact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.execution-task-strip .task-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 430px) { .artifact-grid { grid-template-columns: minmax(0, 1fr); }.artifact-visual { height: 155px; } }

.workspace-search { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 8px 10px; border: 1px solid #dbe8f2; border-radius: 7px; background: #f8fbfe; color: #7c9ab2; }
.workspace-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.workspace-search:focus-within { border-color: #8fc5e6; background: #fff; box-shadow: 0 0 0 3px rgba(72, 163, 208, .1); }
.workspace-panel .workspace-list { max-height: min(62vh, 640px); overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
/* workflow graph */
.workflow-graph-wrap { margin-top: 15px; overflow-x: auto; padding: 10px 0 3px; border: 1px solid #e5eef6; border-radius: 9px; background: linear-gradient(180deg, #fbfdff, #f5faff); }
.workflow-graph-help { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 12px 8px; color: #7890a7; font-size: 10px; }
.workflow-graph { display: block; min-width: 760px; width: 100%; height: auto; }
.workflow-edge { fill: none; stroke: #86a9c4; stroke-width: 2; stroke-dasharray: 4 3; }
.workflow-graph-node { cursor: pointer; outline: none; }
.workflow-graph-node rect { fill: #fff; stroke: #bfd7ea; stroke-width: 1.5; }
.workflow-graph-node:hover rect, .workflow-graph-node:focus rect { stroke: #2d81ca; stroke-width: 2.5; filter: drop-shadow(0 4px 8px rgba(45,129,202,.18)); }
.workflow-graph-node.is-gate rect { fill: #fffaf0; stroke: #e7bd68; }
.workflow-graph-node circle { fill: #2d81ca; }
.workflow-graph-node.is-gate circle { fill: #d89222; }
.workflow-graph-label { fill: #244362; font-size: 12px; font-weight: 800; }
.workflow-graph-kind { fill: #7890a7; font-size: 9px; }
.workflow-graph-meta { fill: #587896; font-size: 9px; }
.workflow-empty-graph { display: grid; justify-items: center; gap: 5px; margin-top: 15px; padding: 32px 12px; color: #7890a7; border: 1px dashed #bfd7ea; border-radius: 9px; background: #fbfdff; }
.workflow-empty-graph span { color: #2d81ca; font-size: 24px; }
.workflow-empty-graph strong { color: #345675; font-size: 13px; }
.workflow-empty-graph small { font-size: 11px; }
.flow-node-card[draggable="true"] { cursor: grab; }
.flow-node-card.is-dragging { opacity: .45; border-color: #2d81ca; }
.model-list { display: grid; gap: 8px; }
.model-row { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.model-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #2478b9; border-radius: 8px; background: #eaf5ff; font-weight: 800; }
.model-copy { min-width: 0; flex: 1; }.model-copy strong, .model-copy small { display: block; }.model-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.model-explainer, .skill-explainer, .script-flow-explainer, .script-generation-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.model-explainer, .skill-explainer { padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; background: #f7fafb; }
.model-explainer p, .skill-explainer span { margin: 3px 0 0; color: var(--muted); font-size: 13px; }.model-explainer-icon { display: grid; place-items: center; width: 32px; height: 32px; background: #193248; color: #fff; border-radius: 7px; font-weight: 700; }.model-catalog-group { border-top: 1px solid var(--line); }.model-group-heading { display: flex; justify-content: space-between; padding: 12px 0 7px; color: var(--muted); font-size: 13px; }.model-availability { color: #26704e; font-size: 12px; }.model-section-heading { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.script-flow-explainer { margin: 2px 0 18px; padding: 10px 12px; border-radius: 7px; background: #f6fbf7; color: #2c6247; font-size: 13px; }.script-flow-explainer b { color: #80a48d; }.script-generation-summary { display: grid; grid-template-columns: 80px 1fr; padding: 12px; margin-bottom: 14px; border-radius: 7px; background: #f7fafb; font-size: 13px; }.script-generation-summary span { color: var(--muted); }

/* Stage filters are real controls: they must look clickable and remain usable
   when the review queue is narrowed to one production stage. */
.stage-step { min-width: 90px; padding: 9px 7px 0; color: var(--faint); text-align: left; border: 0; border-top: 3px solid #dbe6ef; border-radius: 0; background: transparent; cursor: pointer; }
.stage-step:hover { color: #2b7ecb; background: #f5faff; }
.stage-step.current { color: #216fae; border-top-color: #2d81ca; background: #f5faff; }
.stage-step.done { color: #4a789b; border-top-color: #75b891; }
.stage-step:focus-visible { outline: 2px solid #2d81ca; outline-offset: 2px; }
.review-history-list { display: grid; gap: 8px; }.review-history-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }.review-history-row strong, .review-history-row small { display: block; }.review-history-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.artifact-content-preview { max-height: 52vh; overflow: auto; margin: 0; padding: 14px; color: #345675; border: 1px solid var(--line); border-radius: 8px; background: #f7fafe; font: 12px/1.6 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }.technical-json-preview { max-height: 52vh; overflow: auto; margin: 0; padding: 14px; color: #345675; border: 1px solid var(--line); border-radius: 8px; background: #f7fafe; font: 12px/1.6 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }.business-content-preview { max-height: none; overflow: visible; padding: 0; color: inherit; border: 0; border-radius: 0; background: transparent; font: inherit; white-space: normal; }.content-preview-media { margin-bottom: 12px; }
.flow-node-card { min-width: 0; max-width: 100%; }
.flow-node-copy { min-width: 0; overflow: hidden; }
.flow-node-copy > div { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workspace-page { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.script-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.script-row strong { color: #2478b9; }.script-row span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-chip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }.skill-chip b { padding: 3px 7px; border-radius: 5px; background: #eef7ff; color: #2b73a8; font-size: 10px; font-weight: 600; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.config-card { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 20px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.9); box-shadow: var(--shadow); }.config-card:hover { border-color: #a9cce7; background: #fff; text-decoration: none; }.config-card-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; color: #287dc1; border-radius: 9px; background: #eaf5ff; font-size: 18px; }.config-card span:nth-child(2) { min-width: 0; flex: 1; }.config-card strong, .config-card small { display: block; }.config-card strong { color: #193554; }.config-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }.config-card > b { color: #6b9bc0; font-size: 18px; }.skill-library { padding: 21px; }.skill-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #edf2f6; }.skill-row:first-of-type { border-top: 0; }.skill-row-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #277dbd; border-radius: 8px; background: #eef7ff; }.skill-row-copy { min-width: 0; flex: 1; }.skill-row-copy strong, .skill-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.skill-row-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }.skill-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.script-strategy { padding: 21px; margin-bottom: 16px; }.strategy-grid, .script-meta-grid, .node-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.script-strategy textarea { min-height: 74px; }.strategy-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }.strategy-actions .help { margin: 0; }.script-center { padding: 21px; }.script-row { min-width: 0; }.script-version { width: 34px; flex: 0 0 auto; color: #2478b9; font-weight: 800; }.script-row-copy { min-width: 0; flex: 1; }.script-row-copy strong, .script-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.script-row-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }.script-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }.script-meta-grid { margin-bottom: 15px; }.script-meta-grid > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }.script-meta-grid span, .script-meta-grid strong { display: block; }.script-meta-grid span { color: var(--muted); font-size: 10px; }.script-meta-grid strong { margin-top: 3px; font-size: 12px; }
.model-binding-heading, .model-adapter-note, .model-schema-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 15px 0 7px; }.model-binding-heading strong, .model-adapter-note strong, .model-schema-heading strong { color: #183a57; font-size: 13px; }.model-binding-heading small, .model-adapter-note span, .model-schema-heading small { color: var(--muted); font-size: 11px; }.model-adapter-note { margin-top: 11px; padding: 9px 11px; border-left: 3px solid #8bb9d9; background: #f5faff; }.model-schema-controls { margin: 12px 0 16px; padding: 14px; border: 1px solid #cfe1ee; border-radius: 7px; background: #fbfdff; }.model-schema-heading { margin-top: 0; }.model-schema-field { margin: 11px 0; }.model-schema-group { margin: 10px 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.model-schema-group > summary { padding: 9px 11px; cursor: pointer; color: #254a67; font-size: 12px; font-weight: 800; }.model-schema-group-fields { padding: 0 11px 8px; }.model-number-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr); gap: 9px; align-items: center; }.model-range { width: 100%; accent-color: #2f91ca; }.model-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #34536d; font-weight: 700; }.model-toggle input { width: 16px; height: 16px; accent-color: #2f91ca; }.media-reference { border-style: dashed !important; }.model-schema-empty { padding: 10px; color: var(--muted); font-size: 12px; background: var(--surface-soft); border-radius: 6px; }
.skill-filters { display: grid; gap: 10px; margin: 12px 0 16px; }.skill-category-tabs { display: flex; flex-wrap: wrap; gap: 6px; }.skill-category-tabs .btn.active { color: #fff; background: #277fba; border-color: #277fba; }.skill-category { display: inline-block; padding: 2px 6px; border-radius: 4px; color: #2a709e; background: #eef7ff; font-weight: 700; }
@media (max-width: 720px) { .model-binding-heading, .model-adapter-note, .model-schema-heading { display: grid; gap: 4px; }.model-number-control { grid-template-columns: minmax(0, 1fr); }.model-schema-controls { padding: 11px; } }
.list-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #edf2f6; color: var(--muted); font-size: 11px; }.list-pagination .icon-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 720px) { .shell { min-width: 0; }.main { min-width: 0; }.content { min-width: 0; overflow-x: hidden; }.page-header, .drama-heading { flex-wrap: wrap; }.workspace-layout { grid-template-columns: minmax(0, 1fr); }.model-row { min-width: 0; flex-wrap: wrap; }.workspace-page { overflow-x: auto; } }
@media (max-width: 780px) { .config-grid { grid-template-columns: minmax(0, 1fr); }.skill-row { align-items: flex-start; flex-wrap: wrap; }.skill-row .status-badge { margin-left: 44px; }.skill-row-actions { width: 100%; margin-left: 44px; }.workspace-switcher { width: 50px; padding: 10px 3px; text-overflow: ellipsis; } }
/* Creative center */
.creative-page{max-width:1180px;margin:0 auto}.creative-hero{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr);gap:28px;padding:28px;margin-bottom:24px}.creative-hero h2{margin:8px 0}.creative-form-row{display:flex;gap:14px;align-items:flex-end}.creative-form-row .field-label{flex:1}.creative-generate{white-space:nowrap}.creative-candidates-section{padding:8px 0}.creative-candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.creative-candidate{background:var(--panel,#fff);border:1px solid var(--line,#dce5ef);border-radius:16px;padding:18px;min-width:0}.creative-candidate-head{display:flex;justify-content:space-between;gap:12px}.candidate-kicker{font-size:11px;color:var(--muted,#718096);letter-spacing:.08em}.creative-candidate h3{margin:6px 0 12px;overflow-wrap:anywhere}.creative-business{display:grid;gap:12px}.creative-business span{display:block;font-size:12px;color:var(--muted,#718096)}.creative-business strong{display:block;margin-top:3px}.creative-business p{margin:4px 0;line-height:1.6;overflow-wrap:anywhere}.candidate-footer,.candidate-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}.candidate-footer{font-size:12px;color:var(--muted,#718096)}.quality-score{font-weight:700;color:var(--ink,#182333)}.creative-empty{grid-column:1/-1}.creative-modal{max-width:760px;width:min(760px,calc(100vw - 32px))}
@media (max-width:900px){.creative-hero{grid-template-columns:1fr}.creative-candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.creative-form-row{flex-direction:column;align-items:stretch}.creative-candidate-grid{grid-template-columns:1fr}.creative-hero{padding:20px}.creative-candidate{padding:15px}}

.creative-tasks-panel{margin:0 0 24px;padding:20px}.creative-task-list{display:grid;gap:10px}.creative-task-card{padding:14px 16px;border:1px solid #dce8f2;border-radius:12px;background:#fbfdff}.creative-task-card.danger{border-color:#f0c9c9;background:#fffafa}.creative-task-card.success{border-color:#c7e5d3}.creative-task-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.creative-task-head strong{display:block;margin-top:4px;color:#234565}.creative-task-progress{display:flex;align-items:center;gap:10px;margin-top:12px}.creative-task-progress>div{height:7px;flex:1;overflow:hidden;border-radius:99px;background:#e5eef5}.creative-task-progress>div span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#43b9d0,#3479cc);transition:width .25s ease}.creative-task-progress b{min-width:38px;color:#277dbd;text-align:right;font-size:11px}.creative-task-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;color:#7890a7;font-size:11px}.creative-task-error{display:grid;gap:3px;margin-top:10px;padding:9px 11px;border-left:3px solid #dc6b6b;border-radius:5px;background:#fff1f1}.creative-task-error strong{color:#a64545;font-size:12px}.creative-task-error small{color:#a26b6b;overflow-wrap:anywhere}.creative-task-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}.creative-task-actions .muted{font-size:11px}