:root { color-scheme: light; --ink:#0a1738; --muted:#5d687d; --line:#dce3ec; --soft:#f4f7fb; --blue:#0b63e5; --blue2:#064cad; --green:#137a3b; --amber:#a75b00; --danger:#a5362d; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:#fff; color:var(--ink); font-family:var(--font); }
button { font:inherit; }
.app-shell { min-height:100vh; }
.topbar { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px clamp(20px,4vw,64px); border-bottom:1px solid var(--line); }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.topbar-logout { border:0; background:transparent; color:var(--blue2); font-weight:740; cursor:pointer; }
.section-link { color:var(--blue2); font-size:14px; font-weight:760; text-decoration:none; }.section-link:hover { text-decoration:underline; }
.section-link-button { display:inline-grid; place-items:center; text-decoration:none; }.section-link-button:hover { text-decoration:none; }
.eyebrow { margin:0 0 5px; color:var(--blue); font-size:12px; font-weight:760; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(26px,3vw,38px); letter-spacing:-.045em; }
.auth-state { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:650; }
.auth-dot { width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px #fff2df; }
.auth-state[data-authenticated="true"] .auth-dot { background:var(--green); box-shadow:0 0 0 4px #e5f5eb; }
main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:38px 0 50px; }
.work-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.work-overview-item { display:flex; min-width:0; align-items:baseline; gap:7px; padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:var(--soft); }
.work-overview-item strong { font-size:24px; line-height:1; }
.work-overview-item span { color:var(--muted); font-size:13px; font-weight:720; }
.work-overview-item.ready strong { color:var(--green); }.work-overview-item.preparation strong { color:var(--amber); }.work-overview-item.scheduled strong { color:var(--blue2); }
.work-overview-note { grid-column:1/-1; color:var(--muted); font-size:13px; }
.workflow-nav { display:flex; gap:5px; margin:4px 0 28px; padding:5px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.workflow-tab { display:flex; align-items:center; gap:7px; min-height:42px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:14px; font-weight:740; cursor:pointer; white-space:nowrap; }
.workflow-tab span { display:inline-grid; min-width:24px; min-height:24px; place-items:center; padding:0 6px; border-radius:999px; background:#e5eaf1; color:var(--ink); font-size:12px; }
.workflow-tab[aria-current="page"] { background:#fff; color:var(--blue2); box-shadow:0 1px 5px #0a17381a; }
.workflow-tab[aria-current="page"] span { background:#dbeafe; color:var(--blue2); }
.short-flow-layout { display:grid; grid-template-columns:minmax(250px,330px) minmax(0,1fr); gap:28px; align-items:start; }
.work-queue { position:sticky; top:18px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.work-queue .section-title { align-items:flex-start; flex-direction:column; gap:4px; }
.work-queue .section-title h2 { margin:0; font-size:20px; }
.review-pane { min-width:0; }
.app-shell:not([data-workspace-view="completed"]) .completed-schedules { display:none; }
.app-shell[data-workspace-view="completed"] .short-flow-layout,.app-shell[data-workspace-view="completed"] .candidate-browser { display:none; }
.app-shell[data-workspace-view="blocked"] .candidate-browser { display:none; }
.login { display:grid; grid-template-columns:1fr minmax(280px,420px); gap:24px; align-items:end; margin-bottom:24px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.login h2 { margin:0; }
.login p:not(.eyebrow) { margin:8px 0 0; color:var(--muted); }
.login-actions { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:end; }
.login-actions label { grid-column:1/-1; color:var(--muted); font-size:12px; font-weight:700; }
.login-actions input { min-width:0; min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:9px; font:inherit; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,280px); align-items:stretch; gap:24px; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.hero-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; }
.hero h2 { margin:0; max-width:800px; font-size:clamp(28px,3vw,40px); line-height:1.06; letter-spacing:-.045em; }
.package-meta { margin:14px 0 0; color:var(--muted); font:13px ui-monospace,SFMono-Regular,Menlo,monospace; }
.integrity { display:inline-flex; margin-top:auto; padding:10px 14px; border-radius:8px; background:#e9f7ee; color:var(--green); font-size:13px; font-weight:750; }
.review-image { width:100%; min-height:190px; max-height:250px; border-radius:11px; object-fit:cover; background:var(--soft); }
.integrity[data-valid="false"] { background:#fff0ef; color:var(--danger); }
.roles { padding:32px 0 18px; }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.section-title h2,.detail h2,.decision h2 { margin:0; font-size:22px; letter-spacing:-.025em; }
.section-title span { color:var(--muted); font-size:14px; }
.role-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:18px; }
#package-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
#package-list { grid-template-columns:1fr; }
#package-list .package-card { min-width:0; width:100%; overflow-wrap:anywhere; }
#package-list .package-card > * { min-width:0; overflow-wrap:anywhere; }
.package-card { display:grid; gap:7px; color:var(--ink); text-align:left; }
.package-card > span { display:block; color:var(--muted); font-size:12px; line-height:1.4; }
.role-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.role-card:hover,.role-card[aria-pressed="true"] { border-color:var(--blue); background:#f3f7ff; }
.role-card:focus-visible,.button:focus-visible { outline:3px solid #8dbcf8; outline-offset:2px; }
.role-card strong { display:block; min-height:40px; font-size:14px; }
.role-card span { display:block; margin-top:13px; color:var(--muted); font-size:12px; }
.role-card .ready { color:var(--green); font-weight:720; }
.channel-review .role-list { grid-template-columns:1fr; gap:7px; }
.channel-review .role-card { display:grid; grid-template-columns:minmax(145px,1.15fr) minmax(135px,1fr) minmax(150px,1fr) minmax(165px,1.2fr); gap:14px; align-items:center; padding:12px 15px; border-radius:9px; }
.channel-review .role-card strong { min-height:0; }
.channel-review .role-card span { margin:0; }
.channel-review .role-signal { font-weight:730; }
.technical-diagnosis { margin-top:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.technical-diagnosis > summary { padding:15px 18px; color:var(--muted); font-weight:740; cursor:pointer; }
.technical-diagnosis[open] > summary { border-bottom:1px solid var(--line); }
.technical-diagnosis .detail { margin:0; border:0; border-radius:0 0 12px 12px; }
.diagnostic-context { padding:0 24px 16px; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.diagnostic-context .boundary { margin-top:12px; }
.detail { margin-top:12px; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.pill { padding:7px 10px; border-radius:999px; background:#e8f5ec; color:var(--green); font-size:12px; font-weight:730; }
.detail dl { display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; margin:24px 0 0; }
.detail dl div { min-width:0; }
.detail dl .wide { grid-column:1/-1; }
dt { color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
dd { margin:6px 0 0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
#detail-copy { white-space:pre-wrap; }
.detail-image { display:block; width:min(100%,360px); max-height:260px; margin:0 0 10px; border:1px solid var(--line); border-radius:8px; object-fit:contain; background:#fff; }
.translation-qa { margin-top:22px; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.translation-qa-locales { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
.translation-locale { min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.translation-locale h3 { margin:0; font-size:18px; }
.translation-issues { margin:12px 0 0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.45; }
.translation-field { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.translation-field h4 { margin:0 0 9px; font-size:13px; }
.translation-choice { display:flex; align-items:center; gap:9px; margin:0 0 10px; color:var(--ink); font-size:13px; font-weight:730; cursor:pointer; }
.translation-choice input { width:18px; height:18px; margin:0; accent-color:var(--blue); }
.translation-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.translation-copy { min-width:0; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.translation-copy strong { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; text-transform:uppercase; }
.translation-copy p { max-height:180px; margin:0; overflow:auto; white-space:pre-wrap; font-size:12px; line-height:1.45; }
.translation-qa-apply { margin-top:18px; }
.pill.green { background:#e8f5ec; color:var(--green); }.pill.yellow { background:#fff2df; color:var(--amber); }.pill.red { background:#fff0ef; color:var(--danger); }
.decision { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 30px; align-items:center; margin-top:22px; padding:26px; border:1px solid #c6d7f2; border-radius:14px; background:#f6f9ff; }
.decision p:not(.eyebrow) { max-width:720px; margin:9px 0 0; color:var(--muted); line-height:1.5; }
.decision-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-width:138px; min-height:48px; border-radius:9px; border:1px solid var(--blue); padding:0 18px; font-weight:740; cursor:pointer; }
.button.primary { background:var(--blue); color:#fff; }
.button.secondary { background:#fff; color:var(--blue2); }
.button:disabled { border-color:#c7ced9; background:#e9edf2; color:#7a8495; cursor:not-allowed; }
.decision-note { grid-column:1/-1; padding-top:13px; border-top:1px solid #d9e4f6; font-size:13px; }
.boundary { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.boundary span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; }
.candidate-browser { margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.candidate-heading { align-items:flex-end; }
.candidate-tools { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.candidate-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,220px) minmax(170px,220px); gap:12px; align-items:end; margin-top:18px; }
.candidate-archive { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.35rem 0 .8rem; }
.candidate-archive .decision-note { margin:0; }
.candidate-control { display:grid; gap:7px; min-width:0; color:var(--muted); font-size:12px; font-weight:700; }
.candidate-control select { width:100%; min-height:48px; padding:0 38px 0 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font:inherit; }
.candidate-search { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font:inherit; }
.candidate-search:focus-visible,.candidate-control select:focus-visible { outline:3px solid #8dbcf8; outline-offset:2px; }
.candidate-list { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:min(72vh,760px); overflow:auto; padding:2px 8px 8px 2px; scroll-behavior:auto; overscroll-behavior:contain; }
.candidate-list .candidate-card { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.candidate-list .candidate-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.candidate-list .candidate-card .button { margin-top:auto; }
.candidate-list .candidate-has-package .button { margin-top:4px; }
.candidate-human-reason { min-height:2.8em; margin:3px 0 8px; color:var(--ink)!important; font-size:14px!important; line-height:1.45!important; }
.candidate-meta { margin-bottom:5px; }
.candidate-technical { margin:4px 0 8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.candidate-technical > summary { padding:10px 0; color:var(--muted); font-size:12px; font-weight:720; cursor:pointer; }
.candidate-technical-codes { margin:0 0 8px; color:var(--muted); font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.candidate-schedule { display:grid; gap:4px; margin:8px 0; padding:8px; border-radius:8px; background:#f7f9fc; }
.candidate-schedule-row { display:flex; justify-content:space-between; gap:10px; font-size:.82rem; line-height:1.35; }
.candidate-schedule-row span { text-align:right; color:var(--muted); }
.completed-schedules { margin-top:28px; padding:24px; border:1px solid #b9dec7; border-radius:14px; background:#f3fbf6; }
.section-note { margin:8px 0 18px; color:var(--muted); line-height:1.5; }
.imported-exact-plan { margin:0 0 28px; padding:24px; border:1px solid #9fc5f7; border-radius:14px; background:#f5f9ff; }
.imported-exact-list { display:grid; gap:10px; }
.imported-exact-news { padding:15px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.imported-exact-news strong { display:block; margin-bottom:7px; }
.imported-exact-news p { margin:4px 0; color:var(--muted); font-size:13px; line-height:1.45; }
.imported-exact-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.imported-exact-status[data-state="error"] { color:var(--danger); }
.imported-exact-status[data-state="complete"] { color:var(--green); font-weight:740; }
.completed-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.completed-card { display:grid; gap:8px; min-width:0; padding:16px; border:1px solid #b9dec7; border-radius:12px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.completed-card:hover,.completed-card[aria-current="true"] { border-color:var(--blue); box-shadow:0 0 0 2px #dbeafe; }
.completed-card strong { line-height:1.35; }
.completed-state { color:var(--green); font-weight:740; }
.completed-times { display:grid; gap:4px; margin-top:8px; color:var(--muted); font-size:12px; }
.completed-card > .completed-times { display:grid; }
.completion-source { color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.execution-summary { margin-top:22px; padding:24px; border:1px solid #b9dec7; border-radius:14px; background:#f3fbf6; }
.execution-list { display:grid; gap:9px; margin-top:16px; }
.execution-row { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(11rem,auto) auto; gap:18px; align-items:center; padding:12px 14px; border:1px solid #d4eadb; border-radius:9px; background:#fff; }
.execution-row span { color:var(--muted); }
.execution-row .execution-ok { color:var(--green); font-weight:740; }
.control-binding { overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:.78rem; }
.app-shell[data-state="error"] main > :not(.hero):not(.login) { display:none; }
@media (max-width:900px) { .login { grid-template-columns:1fr; } .short-flow-layout { grid-template-columns:1fr; } .work-queue { position:static; } .role-list,#package-list,.candidate-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .channel-review .role-list,#package-list { grid-template-columns:1fr; } .channel-review .role-card { grid-template-columns:1fr 1fr; } .candidate-controls { grid-template-columns:1fr 1fr; } .candidate-search-control { grid-column:1/-1; } .decision { grid-template-columns:1fr; } .decision-actions { justify-content:flex-start; } }
@media (max-width:600px) { .topbar,.detail-heading,.candidate-heading { align-items:flex-start; flex-direction:column; }.topbar-actions { width:100%; align-items:flex-start; } main { width:min(100% - 28px,1180px); padding-top:24px; } .workflow-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .workflow-tab { min-width:0; justify-content:center; gap:4px; padding:6px 4px; font-size:12px; line-height:1.2; text-align:center; white-space:normal; } .workflow-tab span { flex:none; min-width:20px; min-height:20px; padding:0 4px; } .hero { grid-template-columns:1fr; padding:18px; } .hero h2 { font-size:32px; } .review-image { min-height:180px; } .login-actions { grid-template-columns:1fr; } .login-actions label { grid-column:auto; } .role-list,#package-list,.candidate-list,.completed-list,.translation-qa-locales,.translation-compare,.candidate-controls,.channel-review .role-card { grid-template-columns:1fr; } .candidate-search-control { grid-column:auto; } .candidate-tools { width:100%; justify-content:space-between; } .candidate-archive { align-items:stretch; flex-direction:column; } .candidate-list { max-height:68vh; } .completed-schedules { padding:18px; } .detail dl { grid-template-columns:1fr; } .detail dl .wide { grid-column:auto; } .execution-row { grid-template-columns:1fr; gap:.3rem; } .decision-actions { width:100%; flex-direction:column-reverse; } .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
.draft-live-preview { min-width:0; border:1px solid #ccd8de; border-radius:10px; padding:12px; background:#fff; }
.draft-live-preview[hidden] { display:none; }
.candidate-live-open { grid-column:1 / -1; }
.candidate-list:has(.candidate-live-open) { max-height:none; overflow:visible; }
.candidate-browser[data-focused="true"] > :not(.candidate-list) { display:none; }
.candidate-browser[data-focused="true"] .candidate-list { display:block; max-height:none; overflow:visible; }
.candidate-browser[data-focused="true"] .candidate-list > .candidate-card:not(.candidate-live-open) { display:none; }
.candidate-live-open > strong,.candidate-live-open > .candidate-next-action,.candidate-live-open > .candidate-technical,.candidate-live-open > .candidate-human-reason,.candidate-live-open > .candidate-meta,.candidate-live-open > .package-state { display:none; }
.candidate-live-open .draft-live-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.draft-live-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.draft-live-back { min-height:40px; }
.draft-live-note { grid-column:1 / -1; }
.draft-live-status,.draft-live-note { font-size:.85rem; color:var(--muted); }
.draft-live-object { min-width:0; border-top:1px solid #e3e9ed; padding:10px 0; overflow-wrap:anywhere; }
.draft-live-object summary { cursor:pointer; font-weight:650; line-height:1.5; }
.lifecycle-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:12px 0; padding:0; list-style:none; }
.lifecycle-steps li { min-width:0; padding:7px 5px; border-radius:7px; background:#edf1f6; color:var(--muted); font-size:11px; font-weight:700; text-align:center; }
.lifecycle-steps li[data-state="complete"] { background:#e8f5ec; color:var(--green); }.lifecycle-steps li[data-state="current"] { background:#dbeafe; color:var(--blue2); box-shadow:inset 0 0 0 2px #8dbcf8; }
.draft-live-copy { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; line-height:1.65; }
.draft-live-image { display:block; width:100%; max-width:460px; max-height:340px; object-fit:contain; margin:10px 0; border-radius:8px; }
@media (max-width:600px) { .candidate-live-open .draft-live-content { grid-template-columns:1fr; } }
@media (max-width:600px) { .execution-summary .section-title { flex-direction:column; align-items:flex-start; gap:8px; } }
.exact-draft-control { grid-column:1 / -1; margin-top:14px; padding:18px; border:1px solid #b9cbe8; border-radius:10px; background:#f6f9ff; }
.exact-draft-control h3 { margin:0; font-size:20px; }
.exact-draft-field { display:grid; gap:6px; margin-top:14px; color:var(--muted); font-size:12px; font-weight:700; }
.exact-draft-time { margin:12px 0; color:var(--muted); font-size:13px; }
.draft-editor-links { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.read-only-note { color:var(--muted); font-size:12px; line-height:1.4; }
.exact-draft-channels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.exact-draft-channel { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.exact-draft-choice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; cursor:pointer; }
.exact-draft-choice input { width:18px; height:18px; accent-color:var(--blue); }
.exact-draft-choice span { color:var(--muted); font-size:12px; }
.exact-draft-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media (max-width:700px) { .exact-draft-channels { grid-template-columns:1fr; } .exact-draft-choice { grid-template-columns:auto 1fr; } .exact-draft-choice span { grid-column:2; } .draft-live-head { align-items:stretch; flex-direction:column; } .lifecycle-steps { grid-template-columns:1fr 1fr; } }