:root {
    --page: #f3f4f6;
    --page-top: #f7f8fa;
    --card: #ffffff;
    --card-solid: #ffffff;
    --soft: #f6f7f9;
    --ink: #111318;
    --muted: #68707d;
    --faint: #9aa2ad;
    --line: #e4e7ec;
    --line-strong: #cfd5df;
    --black: #111318;
    --accent: #1769e0;
    --success: #18875f;
    --warning: #a8660a;
    --danger: #c83f5c;
    --accent-soft: #eef5ff;
    --success-soft: #edf9f3;
    --warning-soft: #fff7ea;
    --danger-soft: #fff2f5;
    --shadow-sm: 0 6px 16px rgba(17, 19, 24, .05);
    --shadow-md: 0 12px 28px rgba(17, 19, 24, .08);
    --shadow-lg: 0 24px 70px rgba(17, 19, 24, .16);
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-soft: cubic-bezier(.16,1,.3,1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    --mono: "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    font-family: var(--body);
    background: linear-gradient(180deg, var(--page-top), var(--page));
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
body::before { display: none; }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, label:focus-within {
    outline: 2px solid rgba(23,105,224,.20);
    outline-offset: 2px;
}

.topbar {
    width: calc(100% - 20px);
    min-height: 64px;
    margin: 10px auto 0;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: sticky;
    top: 8px;
    z-index: 40;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(17,19,24,.04);
}
.brand { min-width: 0; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.topbar.solo .brand { margin-right: 0; }
.brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, #111318, #2b2f38);
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 12px 26px rgba(17,19,24,.16), inset 0 1px 0 rgba(255,255,255,.14);
}
.brand strong, .brand small { display: block; min-width: 0; }
.brand strong { color: var(--ink); font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { margin-top: 1px; color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { flex: 0 0 auto; }
.topbar-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(247,248,250,.92);
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.topbar-action:hover { transform: translateY(-1px); background: #fff; box-shadow: var(--shadow-sm); }
.text-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.text-btn.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid rgba(17,19,24,.16);
    border-top-color: var(--ink);
    animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.app-shell {
    width: min(100% - 20px, 1500px);
    margin: 12px auto calc(38px + env(safe-area-inset-bottom));
}
.studio-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 4px 14px rgba(17,19,24,.035);
    overflow: hidden;
    transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.studio-card:hover { border-color: #d8dde6; box-shadow: 0 8px 22px rgba(17,19,24,.055); }
.reveal { animation: reveal var(--dur-slow) var(--ease-out) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

.workspace-layout, .admin-layout { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.workspace-main { min-width: 0; display: grid; gap: 12px; }
.workspace-hero { padding: 22px; display: grid; gap: 14px; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--line-strong); }
.workspace-hero h1, .admin-login h1 {
    max-width: 760px;
    margin: 9px 0 10px;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(34px, 9vw, 54px);
    font-weight: 760;
    line-height: .98;
    letter-spacing: -.055em;
}
.workspace-hero p, .panel-head p, .admin-login p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}
.hero-limit {
    width: fit-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.creator-card, .task-board, .settings-card, .worker-card, .template-admin-card, .admin-tasks-card { padding: 16px; display: grid; gap: 14px; }
.panel-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.panel-head.compact { grid-template-columns: 1fr auto; align-items: center; }
.panel-head h2 {
    margin: 7px 0 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: 28px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.045em;
}
.panel-head p { max-width: 440px; font-size: 13px; }
.creator-section {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fafbfc;
    padding: 13px;
}
.section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}
.section-label span { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.section-label strong { color: var(--ink); font-size: 14px; font-weight: 720; }
.mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.mode-card {
    min-height: 92px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #d9dee7;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.mode-card::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    right: 14px;
    top: 14px;
    border-radius: 999px;
    background: #d0d6df;
}
.mode-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mode-card span { position: relative; z-index: 1; color: #8d96a3; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.mode-card strong { position: relative; z-index: 1; color: var(--ink); font-size: 18px; font-weight: 760; }
.mode-card em { position: relative; z-index: 1; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.45; }
.mode-card.is-active { color: var(--ink); border-color: #111318; background: #fff; box-shadow: inset 0 0 0 1px #111318; }
.mode-card.is-active span { color: #606875; }
.mode-card.is-active strong { color: var(--ink); }
.mode-card.is-active em { color: #4f5865; }
.mode-card.is-active::after { background: #111318; }
.mode-card:hover, .template-option:hover, .task-card:hover, .template-admin-item:hover { box-shadow: var(--shadow-sm); }
.creator-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.upload-section { display: grid; }
.output-section {
    align-self: stretch;
    display: grid;
    align-content: start;
    gap: 12px;
    background: #fff;
}
.output-section .section-label, .output-section label, .output-section .fineprint { margin-bottom: 0; }
.output-section .template-picker { margin-bottom: 0; }
.quantity-field,
.aspect-picker {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fafbfc;
}
.quantity-field span { margin-bottom: 8px; }
.quantity-field input {
    min-height: 48px;
    border-radius: 12px;
    background: #fff;
}
.aspect-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}
.aspect-options label {
    position: relative;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #dfe4eb;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.aspect-options input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.aspect-options label:has(input:checked) {
    border-color: #111318;
    box-shadow: 0 0 0 2px rgba(17,19,24,.055);
}
.aspect-options span {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 740;
}
.aspect-options em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

label { display: block; margin: 0 0 13px; }
label span, .field-label { display: block; margin: 0 0 8px; color: #59616d; font-size: 13px; font-weight: 650; }
input, textarea, select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: #fff;
    padding: 11px 13px;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, textarea:hover, select:hover { border-color: #bfc6d2; background: #fff; }
textarea { resize: vertical; line-height: 1.65; }
select {
    appearance: none;
    padding-right: 40px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 6.25L8 10L11.75 6.25' stroke='%2368707D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 13px center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: #a0a7b2; }
input:focus, textarea:focus, select:focus { border-color: #1769e0; background: #fff; box-shadow: inset 0 0 0 1px #1769e0; }
input:disabled, textarea:disabled, select:disabled { color: #949ba6; background: #f4f6f8; cursor: not-allowed; box-shadow: none; }
.upload-zone {
    min-height: 174px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    position: relative;
    margin: 0;
    text-align: center;
    border: 1px dashed #bfc6d2;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.upload-zone::before, .upload-zone::after { display: none; }
.upload-zone.is-dragging { border-color: var(--accent); background: #f8fbff; box-shadow: inset 0 0 0 1px var(--accent); }
.upload-zone.has-files { border-style: solid; border-color: #b7cdf6; background: #f8fbff; }
.upload-zone.has-error { border-color: var(--danger); background: #fff7f9; box-shadow: inset 0 0 0 1px var(--danger); }
.upload-zone input, .mini-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone strong { position: relative; z-index: 1; color: var(--ink); font-size: clamp(28px, 8vw, 44px); font-weight: 780; letter-spacing: -.055em; }
.upload-zone em, .upload-kicker { position: relative; z-index: 1; }
.upload-zone em { max-width: 260px; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.55; }
.upload-kicker { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.upload-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 10px 0 0; }
.upload-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(10,132,255,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f4f9ff);
    color: var(--muted);
    font-size: 12px;
}
.upload-summary > div { min-width: 0; display: grid; gap: 3px; }
.upload-summary strong { color: var(--ink); font-size: 13px; }
.upload-summary span { color: var(--accent); font-weight: 700; line-height: 1.45; }
.upload-clear-all { min-height: 32px; flex: 0 0 auto; padding: 5px 10px; font-size: 12px; }
.upload-tile { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); animation: tileIn var(--dur-slow) var(--ease-soft) both; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.upload-tile:hover { transform: translateY(-2px); border-color: rgba(10,132,255,.22); box-shadow: 0 12px 28px rgba(17,19,24,.08), inset 0 1px 0 rgba(255,255,255,.96); }
.upload-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.upload-tile figcaption { display: grid; gap: 2px; padding: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; }
.upload-tile figcaption b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.upload-tile figcaption span { overflow: hidden; text-overflow: ellipsis; }
.upload-remove { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.88); border-radius: 50%; background: rgba(17,19,24,.76); color: #fff; line-height: 1; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease; }
.upload-remove:hover { transform: scale(1.06); background: rgba(200,63,92,.88); }
@keyframes tileIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.empty-preview, .empty-inline { min-height: 72px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 20px; background: #fff; color: var(--muted); text-align: center; }
.empty-preview::before, .empty-inline::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 10px;
    background: linear-gradient(145deg, #f2f4f7, #fff);
    box-shadow: inset 0 0 0 1px rgba(17,19,24,.06);
}
.template-picker { margin-bottom: 0; }
.template-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.template-option { position: relative; margin: 0; padding: 10px; border: 1px solid #d9dee7; border-radius: var(--radius-md); background: #fff; box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.template-option input { position: absolute; opacity: 0; }
.template-cover { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); margin-bottom: 9px; }
.template-option img, .template-blank { display: block; width: 100%; aspect-ratio: 1.35; object-fit: cover; background: var(--soft); }
.template-option strong, .template-option em { display: block; }
.template-option strong { color: var(--ink); font-size: 14px; font-weight: 750; }
.template-option em { color: var(--muted); font-size: 12px; font-style: normal; margin-top: 4px; }
.template-option.is-selected { border-color: #111318; background: #fff; box-shadow: inset 0 0 0 1px #111318; }
.quantity-field input { font-size: 22px; text-align: center; }
.primary-btn, .download-all-btn {
    min-height: 54px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, #111318, #292d35);
    box-shadow: 0 14px 30px rgba(17,19,24,.16), inset 0 1px 0 rgba(255,255,255,.14);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.primary-btn::after, .download-all-btn::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 48%);
    pointer-events: none;
}
.primary-btn { width: 100%; }
.primary-btn i { display: none; }
.primary-btn:hover, .download-all-btn:hover { transform: translateY(-1px); box-shadow: 0 20px 42px rgba(17,19,24,.22); }
.primary-btn:active, .download-all-btn:active, .text-btn:active, .pill-btn:active, .mode-card:active { transform: scale(.975); }
.primary-btn:disabled, .download-all-btn:disabled { opacity: .56; cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.primary-btn.is-loading { opacity: .92; pointer-events: none; }
.primary-btn.is-loading::before {
    content: "";
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.30);
    border-top-color: #fff;
    animation: spin .75s linear infinite;
}
.primary-btn span, .download-all-btn span { position: relative; z-index: 1; }
.download-all-btn { min-width: 150px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.text-btn, .pill-btn {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    padding: 8px 12px;
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.text-btn:hover, .pill-btn:hover { border-color: rgba(17,19,24,.18); background: #fff; box-shadow: var(--shadow-sm); }
.text-btn:disabled, .pill-btn:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.pill-btn.danger { color: var(--danger); }
.pill-btn.danger:hover { border-color: rgba(200,63,92,.22); background: #fff5f7; }
.fineprint { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.error-box { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(200,63,92,.22); border-radius: 18px; color: var(--danger); background: #fff3f5; line-height: 1.65; }
.notice-box { margin-top: 12px; padding: 12px 14px; border: 1px solid #f0d8b5; border-radius: 18px; color: #9a6b20; background: #fffaf2; line-height: 1.65; }
.form-feedback { margin-top: 0; font-size: 12px; }

.task-board { align-self: start; }
.board-metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.board-metric-row span, .meta-pill { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.board-metric-row span { min-height: 58px; display: grid; align-content: center; padding: 10px; }
.board-metric-row strong { color: var(--ink); font-size: 18px; line-height: 1; }
.board-metric-row em { color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }
.task-list, .admin-task-list, .template-admin-list { display: grid; gap: 10px; min-height: 0; overflow: visible; scrollbar-width: thin; scrollbar-color: #c9ced8 transparent; }
.empty-state { min-height: 148px; display: grid; place-items: center; align-content: center; justify-items: center; gap: 10px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 24px; background: linear-gradient(145deg, #fff, #fafbfc); color: var(--muted); text-align: center; line-height: 1.65; }
.empty-state::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: linear-gradient(145deg, #eef2f6, #fff);
    box-shadow: inset 0 0 0 1px rgba(17,19,24,.06), 0 10px 24px rgba(17,19,24,.05);
}
.compact-empty { min-height: 108px; }
.loading-state { min-height: 220px; }
.task-card, .template-admin-item { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); transition: transform .18s ease, box-shadow .18s ease; }
.template-admin-body { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.task-code { margin-bottom: 6px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.task-main h3, .template-admin-item h3 { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.35; letter-spacing: -.02em; }
.task-meta, .detail-status-line { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; }
.task-meta { margin-top: 9px; }
.meta-pill { min-height: 27px; display: inline-flex; align-items: center; padding: 0 9px; color: var(--muted); font-size: 12px; }
.time-pill { color: #555d6a; }
.badge { min-height: 27px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 12px; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.queued { border-color: #f0d8b5; background: #fff8ed; color: var(--warning); }
.badge.running, .badge.dispatching { border-color: #c9def8; background: #edf6ff; color: var(--accent); }
.badge.succeeded { border-color: #c7eadc; background: #edf9f3; color: var(--success); }
.badge.failed { border-color: #f3c8d1; background: #fff3f5; color: var(--danger); }
.badge.cancelled { border-color: #d8dde5; background: #f6f7f9; color: #6a7280; }
.status-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f7f9fb;
    color: #4f5661;
    font-size: 12px;
    line-height: 1.6;
}
.status-note::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    margin-top: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 11%, transparent);
}
.status-note p { margin: 0; }
.status-note.queued { border-color: #f0d8b5; background: #fffaf2; color: var(--warning); }
.status-note.running, .status-note.dispatching { border-color: #c9def8; background: #f3f8ff; color: var(--accent); }
.status-note.succeeded { border-color: #c7eadc; background: #f3fbf7; color: var(--success); }
.status-note.failed { border-color: #f3c8d1; background: #fff5f7; color: var(--danger); }
.status-note.cancelled { border-color: #d8dde5; background: #f8f9fb; color: #6a7280; }
.detail-status-note { margin: 12px 0 0; }
.task-progress { position: relative; min-height: 20px; display: flex; align-items: center; overflow: hidden; border: 1px solid #e3e7ee; border-radius: 999px; background: #f6f8fb; }
.task-progress span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #70a8f5); transition: width .28s ease; }
.task-progress em { position: relative; z-index: 1; margin-left: auto; padding: 0 8px; color: #56616e; font-size: 11px; font-style: normal; font-weight: 750; }
.task-progress.compact { min-height: 18px; }
.task-progress.succeeded span { background: linear-gradient(90deg, var(--success), #74c69d); }
.task-progress.failed span { background: linear-gradient(90deg, var(--danger), #e87991); }
.task-progress.cancelled span { background: linear-gradient(90deg, #9aa2ad, #c2c7d0); }
.detail-task-actions { display: grid; gap: 8px; margin-top: 12px; padding: 11px 12px; border: 1px solid #e3e7ee; border-radius: 18px; background: #fbfcfd; }
.detail-task-actions > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-task-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
.task-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }

.task-card {
    position: relative;
    gap: 12px;
    padding: 15px;
    border-color: #e7ebf0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(17,19,24,.045);
    overflow: hidden;
    cursor: pointer;
    transition: transform .22s var(--ease-out), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.task-card:hover, .task-card:focus-within {
    transform: translateY(-2px);
    border-color: #d8dde5;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17,19,24,.075);
}
.task-card-body {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    outline: none;
}
.task-open-cue {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f7f8fa;
    color: #66707d;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}
.task-open-cue i { font-style: normal; font-size: 15px; line-height: 1; }
.task-card:hover .task-open-cue, .task-card:focus-within .task-open-cue { opacity: 1; transform: translateY(0); background: #111318; color: #fff; }
.task-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.task-status-wrap { display: flex; justify-content: flex-end; }
.task-card .task-code {
    margin-bottom: 7px;
    color: #8a929d;
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}
.task-card .task-main h3 { font-size: 17px; font-weight: 720; letter-spacing: -.018em; }
.task-card .badge {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 12px;
    font-weight: 650;
}
.task-card .badge::before { width: 6px; height: 6px; }
.task-card .status-note {
    padding: 11px 12px;
    border-radius: 16px;
    background: #f7f8fa;
    border-color: #eceff3;
    color: #5f6671;
    box-shadow: none;
}
.task-card .status-note::before { width: 8px; height: 8px; margin-top: 6px; box-shadow: none; }
.task-card .status-note.queued { background: #fff9ef; border-color: #f4e4c9; }
.task-card .status-note.running, .task-card .status-note.dispatching { background: #f2f8ff; border-color: #dbeafe; }
.task-card .status-note.succeeded { background: #f2faf6; border-color: #d8f0e4; }
.task-card .status-note.failed { background: #fff4f6; border-color: #f5d5dc; }
.task-card .status-note.cancelled { background: #f7f8fa; border-color: #e5e8ee; }
.task-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 0;
}
.task-card .meta-pill {
    min-height: 32px;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    background: #f7f8fa;
    color: #66707d;
}
.task-card .time-pill { color: #66707d; }
.task-card-actions {
    position: static;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
}
.task-card::after { display: none; }
.task-card:hover .task-card-actions,
.task-card:focus-within .task-card-actions {
    transform: none;
}
.task-card-actions .pill-btn {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.task-card-actions .pill-btn.view {
    background: #111318;
    color: #fff;
    border-color: #111318;
}
.task-card-actions .pill-btn.view:hover { background: #20242b; color: #fff; }
.task-card-actions .pill-btn.danger {
    background: #fff;
    color: #a24658;
    border-color: #efd2d9;
}
.task-card-actions .pill-btn.danger:hover { background: #fff6f8; color: #923449; }
.task-card.is-new {
    border-color: rgba(10,132,255,.32);
    box-shadow: 0 18px 42px rgba(10,132,255,.13), inset 0 1px 0 rgba(255,255,255,.98);
    animation: taskCardIn 680ms var(--ease-soft) both, taskHighlight 2.4s var(--ease-out) 180ms both;
}
.task-card.is-new::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--accent);
    box-shadow: 0 0 0 7px rgba(10,132,255,.07);
    pointer-events: none;
}
@keyframes taskCardIn { from { opacity: 0; transform: translateY(10px) scale(.982); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes taskHighlight { 0%, 68% { border-color: rgba(10,132,255,.36); } 100% { border-color: #e7ebf0; box-shadow: 0 8px 18px rgba(17,19,24,.045); } }

.admin-login { min-height: auto; margin: 12px auto 0; padding: 24px; display: grid; gap: 22px; }
.settings-card { display: block; }
.settings-card > label, .settings-card .form-grid, .template-form > label, .template-form .form-grid { margin-top: 14px; }
.worker-card, .template-admin-card, .admin-tasks-card { min-width: 0; }
.template-form { display: grid; }
.form-grid.two { display: grid; grid-template-columns: 1fr; gap: 0; }
.mini-upload { min-height: 86px; position: relative; display: grid; place-items: center; border: 1px dashed rgba(17,19,24,.16); border-radius: 22px; background: linear-gradient(145deg, #fff, #f8fafc); color: var(--muted); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--ease-out); }
.mini-upload:hover { transform: translateY(-1px); border-color: rgba(10,132,255,.28); background: #fff; box-shadow: var(--shadow-sm); }
.mini-upload span { margin: 0; color: #626b77; font-weight: 650; }
.template-upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 10px; }
.template-upload-preview.empty-inline { display: grid; grid-template-columns: 1fr; margin-top: 10px; min-height: 58px; }
.template-upload-summary { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.template-upload-summary strong { color: var(--ink); font-size: 13px; }
.template-upload-thumb { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.template-upload-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin: 0; }
.template-upload-thumb figcaption { display: grid; gap: 2px; padding: 8px; min-width: 0; }
.template-upload-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12px; font-weight: 650; }
.template-upload-thumb em { color: var(--muted); font-size: 11px; font-style: normal; }
.form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.template-admin-item { grid-template-columns: 1fr; align-items: start; }
.template-admin-preview { width: 100%; aspect-ratio: 1.75; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); }
.template-admin-preview img, .template-admin-preview .template-blank { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.template-admin-item p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.worker-card { display: grid; gap: 16px; overflow: hidden; }
.worker-status { display: grid; gap: 14px; min-height: auto; place-items: stretch; text-align: left; }
.worker-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(226,230,236,.92);
    border-radius: 24px;
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}
.worker-orb { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 18px; background: #f1f3f6; color: var(--muted); }
.worker-orb i { width: 16px; height: 16px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 12%, transparent); }
.worker-orb.succeeded { background: #edf9f3; color: var(--success); }
.worker-orb.running { background: #edf6ff; color: var(--accent); }
.worker-orb.queued { background: #fff8ed; color: var(--warning); }
.worker-hero-copy { min-width: 0; display: grid; gap: 3px; }
.worker-hero-copy span, .worker-section-title em, .worker-command-card p { color: var(--muted); font-size: 12px; }
.worker-hero-copy strong { color: var(--ink); font-size: 22px; line-height: 1.05; letter-spacing: -.035em; }
.worker-hero-copy p { margin: 0; color: #6d7580; font-size: 13px; line-height: 1.55; }
.worker-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.worker-metric { min-width: 0; position: relative; overflow: hidden; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.worker-metric::after { content: ""; position: absolute; right: -22px; top: -34px; width: 72px; height: 72px; border-radius: 50%; background: rgba(10,132,255,.055); pointer-events: none; }
.worker-metric span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.worker-metric strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.worker-metric em { display: block; margin-top: 6px; color: var(--faint); font-size: 11px; font-style: normal; line-height: 1.35; overflow-wrap: anywhere; }
.worker-section { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(226,230,236,.85); border-radius: 20px; background: #fbfcfd; }
.worker-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.worker-section-title span, .worker-command-card span { color: var(--ink); font-size: 14px; font-weight: 720; }
.worker-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.worker-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #67707c; font-size: 12px; }
.worker-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.worker-chip strong { color: var(--ink); font-size: 12px; }
.worker-chip.is-ok { border-color: #c7eadc; background: #f3fbf7; color: var(--success); }
.worker-chip.is-off { border-color: #e2e6ee; background: #f7f8fa; color: #8a929d; }
.ops-diagnostic-grid { display: grid; gap: 8px; }
.ops-diagnostic-card { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid #e3e7ee; border-radius: 16px; background: #fff; }
.ops-diagnostic-card span { color: var(--muted); font-size: 11px; }
.ops-diagnostic-card strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.ops-diagnostic-card p { margin: 0; color: #626b77; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ops-suggestions { display: grid; gap: 6px; padding: 11px 12px; border: 1px solid #f0d8b5; border-radius: 16px; background: #fffaf2; }
.ops-suggestions strong { color: var(--ink); font-size: 13px; }
.ops-suggestions p { margin: 0; color: #79531a; font-size: 12px; line-height: 1.5; }
.worker-command-grid { display: grid; gap: 10px; }
.worker-command-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.worker-command-card p { margin: 4px 0 0; line-height: 1.5; }
.worker-command-card code { display: block; overflow-x: auto; white-space: nowrap; padding: 10px 12px; border-radius: 14px; background: #f6f7f9; color: #3f4650; font-size: 12px; line-height: 1.5; scrollbar-width: thin; }
.worker-log-grid { display: grid; gap: 8px; }
.worker-log-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.worker-log-card summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; color: var(--ink); font-size: 13px; font-weight: 700; }
.worker-log-card summary span { color: var(--muted); font-weight: 500; }
.worker-log-card pre { max-height: 150px; overflow: auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); background: #f8f9fb; color: #545d69; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.worker-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ops-actions { grid-template-columns: minmax(0, 1fr) minmax(130px, auto); }
.ops-status { gap: 16px; }
.ops-hero { overflow: hidden; }
.ops-hero::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -74px;
    top: -90px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    pointer-events: none;
}
.worker-status.is-good .ops-hero { color: var(--success); border-color: #c7eadc; background: linear-gradient(145deg, #fff, #f3fbf7); }
.worker-status.is-warning .ops-hero { color: var(--warning); border-color: #f0d8b5; background: linear-gradient(145deg, #fff, #fff8ed); }
.worker-status.is-idle .ops-hero { color: #6a7280; border-color: #d8dde5; background: linear-gradient(145deg, #fff, #f7f8fa); }
.worker-status.is-good .worker-hero-copy strong,
.worker-status.is-warning .worker-hero-copy strong,
.worker-status.is-idle .worker-hero-copy strong { color: var(--ink); }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.health-item {
    min-width: 0;
    position: relative;
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
}
.health-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #d8dde5;
}
.health-item div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.health-item span { color: var(--muted); font-size: 12px; }
.health-item strong { color: var(--ink); font-size: 13px; white-space: nowrap; }
.health-item p { margin: 0; color: #626b77; font-size: 12px; line-height: 1.55; }
.health-item.ok, .health-item.fixed { border-color: #c7eadc; background: #f7fcfa; }
.health-item.ok::before, .health-item.fixed::before { background: var(--success); }
.health-item.ok strong, .health-item.fixed strong { color: var(--success); }
.health-item.action_required { border-color: #f0d8b5; background: #fffaf2; }
.health-item.action_required::before { background: var(--warning); }
.health-item.action_required strong { color: var(--warning); }
.health-item.unknown { border-color: #d8dde5; background: #f8f9fb; }
.health-action-log { display: grid; gap: 6px; padding: 12px 13px; border: 1px solid #c9def8; border-radius: 18px; background: #f3f8ff; }
.health-action-log strong { color: var(--ink); font-size: 13px; }
.health-action-log p { margin: 0; color: #506276; font-size: 12px; line-height: 1.55; }
.health-advanced { border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.health-advanced summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; color: var(--ink); font-size: 14px; font-weight: 720; }
.health-advanced summary span { color: var(--muted); font-size: 12px; font-weight: 500; }
.health-advanced > .worker-metrics,
.health-advanced > .worker-section,
.health-advanced > .worker-command-grid,
.health-advanced > .worker-log-grid { margin: 0 12px 12px; }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translate(-50%, 16px);
    opacity: 0;
    pointer-events: none;
    z-index: 80;
    max-width: min(560px, calc(100% - 28px));
    padding: 13px 18px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255,255,255,.94);
    backdrop-filter: none;
    box-shadow: 0 22px 70px rgba(17,19,24,.18), inset 0 1px 0 rgba(255,255,255,.95);
    transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast { transform: translate(-50%, 16px) scale(.98); }
.task-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 0; background: transparent; color: var(--ink); }
.task-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(17,19,24,.42); backdrop-filter: none; }
.dialog-card { height: 100%; max-height: none; overflow: auto; position: relative; padding: 14px 10px 30px; border: 0; border-radius: 0; background: #f3f5f8; box-shadow: none; scrollbar-width: thin; scrollbar-color: #c8ced8 transparent; }
.dialog-card::-webkit-scrollbar { width: 8px; height: 8px; }
.dialog-card::-webkit-scrollbar-thumb { background: #c8ced8; border-radius: 999px; }
.task-dialog[open] .dialog-card, .confirm-dialog[open] .confirm-card { animation: dialogIn 260ms var(--ease-soft) both; }
dialog.dialog-fallback-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(17,19,24,.42);
}
.task-dialog.dialog-fallback-open,
.image-preview-dialog.dialog-fallback-open { display: block; }
.task-dialog.dialog-fallback-open { background: #f3f5f8; }
.annotation-dialog.dialog-fallback-open { background: rgba(17,19,24,.34); }
.image-preview-dialog.dialog-fallback-open { background: rgba(17,19,24,.76); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dialog-close { position: sticky; top: 8px; float: right; z-index: 5; width: 44px; height: 44px; border: 1px solid rgba(17,19,24,.10); border-radius: 50%; background: rgba(255,255,255,.94); color: #59616d; font-size: 27px; box-shadow: var(--shadow-sm); }
.confirm-dialog { width: min(420px, calc(100vw - 28px)); border: 0; padding: 0; background: transparent; color: var(--ink); }
.confirm-card {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.95);
}
.confirm-kicker { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.confirm-card h2 { margin: 9px 0 9px; color: var(--ink); font-family: var(--display); font-size: 28px; line-height: 1.05; letter-spacing: -.045em; }
.confirm-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.confirm-actions .primary-btn.danger { background: linear-gradient(145deg, #b92d48, #d84f68); box-shadow: 0 14px 30px rgba(200,63,92,.20), inset 0 1px 0 rgba(255,255,255,.18); }
.detail-layout { clear: both; display: grid; gap: 12px; min-width: 0; }
.detail-head { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.82); border-radius: 28px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.detail-title-row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; min-width: 0; }
.detail-head h2 { margin: 8px 0 10px; color: var(--ink); font-size: clamp(26px, 5vw, 38px); font-weight: 760; line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
.detail-status-line { align-items: center; margin: 10px 0 12px; min-width: 0; }
.source-strip { min-width: 0; margin: 0; padding: 14px; border: 1px solid rgba(255,255,255,.82); border-radius: 26px; background: #fff; overflow: hidden; }
.section-mini-title, .story-heading span { color: var(--ink); font-size: 24px; font-weight: 760; letter-spacing: -.035em; }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 120px)); justify-content: start; gap: 10px; overflow: visible; padding: 12px 1px 2px; }
.source-tile { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.source-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.source-tile figcaption { padding: 7px 8px; color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 2px 14px; }
.story-heading em { color: var(--faint); font-size: 11px; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.story-stack { overflow: hidden; border: 1px solid rgba(17,19,24,.08); border-radius: 24px; background: #fff; box-shadow: 0 10px 28px rgba(17,19,24,.06); }
.story-stack img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: #fff; vertical-align: top; }
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.gallery-grid img { display: block; width: 100%; border: 1px solid rgba(17,19,24,.08); border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(17,19,24,.06); }
@keyframes shimmer { to { background-position: -220% 0; } }

.dialog-card {
    background:
        radial-gradient(circle at 16% 0, rgba(255,255,255,.92), transparent 24rem),
        radial-gradient(circle at 100% 12%, rgba(221,228,238,.72), transparent 26rem),
        linear-gradient(180deg, #f7f8fa, #eef1f4);
}
.dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    float: none;
    display: grid;
    place-items: center;
    margin: 0;
    color: #5e6672;
    backdrop-filter: none;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}
.dialog-close:hover { transform: scale(1.04); background: #fff; color: var(--ink); }
.detail-layout { max-width: 1120px; margin: 0 auto; }
.detail-head {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.92);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 50px rgba(17,19,24,.08), inset 0 1px 0 rgba(255,255,255,.98);
}
.detail-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(10,132,255,0), rgba(17,19,24,.08));
}
.detail-title-row, .detail-status-line, .detail-status-note, .detail-head .error-box, .detail-head .notice-box { position: relative; z-index: 1; }
.detail-title-copy { min-width: 0; }
.detail-primary-action { display: flex; align-items: center; justify-content: flex-start; }
.detail-primary-action .download-all-btn { width: 100%; }
.detail-head .detail-status-note {
    background: #f8fafc;
    border-color: rgba(17,19,24,.07);
}
.detail-section {
    border: 1px solid rgba(255,255,255,.88);
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 34px rgba(17,19,24,.055), inset 0 1px 0 rgba(255,255,255,.98);
}
.detail-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.section-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.detail-section-head em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
}
.source-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.source-tile {
    border-color: rgba(17,19,24,.07);
    box-shadow: 0 10px 24px rgba(17,19,24,.05), inset 0 1px 0 rgba(255,255,255,.96);
}
.source-tile img { transition: transform .22s ease; }
.source-tile:hover img { transform: scale(1.035); }
.image-preview-trigger { cursor: zoom-in; outline: none; }
.image-preview-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.18), 0 10px 24px rgba(17,19,24,.05); border-color: rgba(10,132,255,.36); }
.source-tile.image-preview-trigger { position: relative; }
.source-tile.image-preview-trigger::after { content: '查看大图'; position: absolute; right: 7px; bottom: 7px; padding: 4px 7px; border-radius: 999px; background: rgba(17,19,24,.72); color: #fff; font-size: 11px; font-weight: 700; opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; }
.source-tile.image-preview-trigger:hover::after, .source-tile.image-preview-trigger:focus-visible::after { opacity: 1; transform: translateY(0); }
.story-section {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 28px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 12px 34px rgba(17,19,24,.055), inset 0 1px 0 rgba(255,255,255,.98);
}
.story-heading div { display: grid; gap: 4px; }
.story-heading small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.story-stack, .gallery-grid img { border-color: rgba(17,19,24,.07); box-shadow: 0 10px 28px rgba(17,19,24,.06); }
.story-image-frame { position: relative; margin: 0; background: #fff; }
.story-image-frame + .story-image-frame { border-top: 1px solid rgba(17,19,24,.05); }
.story-image-frame img { display: block; width: 100%; height: auto; transition: filter .18s ease; }
.story-image-frame:hover img, .story-image-frame:focus-visible img { filter: brightness(.96); }
.image-preview-hint { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(17,19,24,.78); color: #fff; font-size: 12px; font-weight: 720; opacity: 0; transform: translateY(-3px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.story-image-frame:hover .image-preview-hint, .story-image-frame:focus-visible .image-preview-hint { opacity: 1; transform: translateY(0); }
.story-image-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--muted); border: 1px solid rgba(17,19,24,.08); box-shadow: 0 8px 18px rgba(17,19,24,.08); font-size: 12px; font-weight: 720; }
.story-image-badge.is-new { color: #0f766e; border-color: rgba(15,118,110,.18); background: rgba(240,253,250,.94); }
.story-image-badge.is-inherited { color: #64748b; }
.gallery-grid .story-image-frame { border: 1px solid rgba(17,19,24,.07); border-radius: 24px; overflow: hidden; box-shadow: 0 10px 28px rgba(17,19,24,.06); transition: transform .22s var(--ease-out), box-shadow .22s ease; }
.gallery-grid .story-image-frame:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(17,19,24,.09); }
.gallery-grid .story-image-frame img { border: 0; border-radius: 0; box-shadow: none; }
.version-strip { position: relative; z-index: 1; margin-top: 14px; display: grid; gap: 10px; }
.version-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.version-strip-head span { color: var(--ink); font-size: 14px; font-weight: 720; }
.version-strip-head em { color: var(--muted); font-size: 12px; font-style: normal; }
.version-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 1px 1px 4px; scrollbar-width: thin; }
.version-tab { min-width: 112px; display: grid; gap: 3px; justify-items: start; border: 1px solid #d9dee7; border-radius: 12px; background: #fff; padding: 10px 12px; color: var(--muted); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.version-tab strong { color: var(--ink); font-size: 16px; line-height: 1; }
.version-tab span, .version-tab em { font-size: 11px; font-style: normal; white-space: nowrap; }
.version-tab.is-active { border-color: #111318; background: #fff; box-shadow: inset 0 0 0 1px #111318; }
.version-tab.failed { border-color: rgba(200,63,92,.22); }
.version-tab.running, .version-tab.dispatching { border-color: rgba(10,132,255,.25); }
.version-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.revision-panel { display: grid; gap: 14px; }
.revision-form { display: grid; gap: 13px; }
.revision-mode-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.revision-mode-row label { margin: 0; position: relative; border: 1px solid #d9dee7; border-radius: 12px; background: #fff; padding: 13px 14px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.revision-mode-row input { position: absolute; inset: 0; opacity: 0; }
.revision-mode-row label:has(input:checked) { border-color: #111318; box-shadow: inset 0 0 0 1px #111318; }
.revision-mode-row label:hover { border-color: #bfc6d2; }
.revision-mode-row span { margin: 0; color: var(--ink); font-weight: 720; }
.revision-targets { display: grid; gap: 9px; }
.revision-target-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.revision-target-count { flex: none; font-style: normal; color: var(--muted); font-size: 12px; }
.revision-target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.revision-target-card { position: relative; display: grid; gap: 8px; margin: 0; padding: 9px; border: 1px solid #d9dee7; border-radius: 14px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.revision-target-card:hover { border-color: #bfc6d2; box-shadow: var(--shadow-sm); }
.revision-target-choice { display: grid; gap: 8px; margin: 0; cursor: pointer; }
.revision-target-card input { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; min-height: 20px; z-index: 2; accent-color: #111318; }
.revision-target-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--soft); }
.revision-target-card span { margin: 0; color: var(--muted); font-size: 12px; }
.revision-target-card.is-selected { border-color: #111318; box-shadow: inset 0 0 0 1px #111318; }
.revision-target-card.is-annotated::after { content: '已标注'; position: absolute; right: 9px; top: 9px; padding: 4px 7px; border-radius: 999px; background: rgba(255,39,86,.92); color: #fff; font-size: 11px; font-weight: 750; box-shadow: 0 8px 18px rgba(255,39,86,.2); }
.revision-target-card .pill-btn { min-height: 32px; font-size: 12px; }
.revision-upload { margin: 0; }
.revision-annotation-summary { padding: 11px 12px; border: 1px dashed var(--line-strong); border-radius: 16px; background: #fff; color: var(--muted); font-size: 12px; line-height: 1.6; }
.revision-annotation-summary.has-items { border-style: solid; border-color: rgba(10,132,255,.22); background: #f5faff; color: #3d607f; }
.annotation-dialog { width: min(980px, calc(100vw - 24px)); border: 0; padding: 0; background: transparent; color: var(--ink); }
.annotation-dialog::backdrop { background: rgba(17,19,24,.34); backdrop-filter: none; }
.annotation-dialog[open] .annotation-card { animation: dialogIn var(--dur-slow) var(--ease-soft) both; }
.annotation-card { display: grid; gap: 14px; max-height: calc(100dvh - 20px); overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.88); border-radius: 28px; background: rgba(255,255,255,.98); box-shadow: var(--shadow-lg); }
.annotation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.annotation-head h2 { margin: 5px 0 0; font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -.045em; }
.annotation-head .dialog-close { position: static; float: none; }
.annotation-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.annotation-tools span { flex: 1 1 auto; min-width: 12px; }
.annotation-tools .is-active { border-color: #111318; background: #111318; color: #fff; }
.annotation-canvas { display: block; justify-self: center; width: auto; max-width: 100%; height: auto; max-height: 68dvh; object-fit: initial; border: 1px solid var(--line); border-radius: 20px; background: #fff; touch-action: none; cursor: crosshair; box-shadow: none; }
.image-preview-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 0; background: transparent; color: #fff; }
.image-preview-dialog::backdrop { background: rgba(17,19,24,.76); backdrop-filter: none; }
.image-preview-card { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 54px 72px 34px; }
.image-preview-figure { display: grid; justify-items: center; gap: 14px; max-width: 100%; max-height: 100%; margin: 0; }
.image-preview-figure img { display: block; max-width: min(100%, 1180px); max-height: calc(100dvh - 136px); width: auto; height: auto; object-fit: contain; border-radius: 18px; background: #fff; box-shadow: 0 26px 80px rgba(0,0,0,.34); }
.image-preview-figure figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 34px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(17,19,24,.46); color: rgba(255,255,255,.94); font-size: 13px; font-weight: 700; }
.image-preview-figure figcaption em { color: rgba(255,255,255,.62); font-style: normal; font-weight: 600; }
.image-preview-close, .image-preview-nav { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.18); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.image-preview-close:hover, .image-preview-nav:hover { transform: scale(1.04); background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); }
.image-preview-close { top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; }
.image-preview-nav { top: 50%; width: 48px; height: 64px; border-radius: 999px; font-size: 42px; line-height: 1; transform: translateY(-50%); }
.image-preview-nav:hover { transform: translateY(-50%) scale(1.04); }
.image-preview-nav.prev { left: 18px; }
.image-preview-nav.next { right: 18px; }
.image-preview-nav[hidden] { display: none; }

.topbar,
.studio-card,
.creator-section,
.detail-head,
.detail-section,
.story-section,
.source-strip,
.confirm-card,
.annotation-card,
.worker-hero,
.worker-metric,
.health-item,
.worker-section,
.worker-command-card,
.worker-log-card,
.health-advanced,
.task-card,
.template-admin-item,
.board-metric-row span,
.meta-pill,
.empty-state,
.empty-preview,
.empty-inline,
.upload-tile,
.template-option,
.revision-mode-row label,
.revision-target-card,
.version-tab {
    background: #fff;
    border-color: var(--line);
    box-shadow: none;
}

.studio-card:hover,
.task-card:hover,
.task-card:focus-within,
.template-option:hover,
.template-admin-item:hover,
.revision-target-card:hover,
.gallery-grid .story-image-frame:hover {
    border-color: #cfd5df;
    box-shadow: 0 6px 18px rgba(17,19,24,.055);
}

.task-dialog::backdrop,
.confirm-dialog::backdrop,
.annotation-dialog::backdrop {
    background: rgba(17,19,24,.42);
    backdrop-filter: none;
}

.dialog-card {
    background: #f3f4f6;
}

.dialog-close,
.toast,
.task-card-actions {
    background: #fff;
    border-color: var(--line);
    backdrop-filter: none;
}

.toast { box-shadow: 0 16px 44px rgba(17,19,24,.14); }
.task-card-actions { box-shadow: 0 8px 20px rgba(17,19,24,.08); }
.upload-summary { background: #f8fbff; box-shadow: none; }
.mini-upload { background: #fff; border-color: #cfd5df; box-shadow: none; }
.mode-card.is-active,
.template-option.is-selected,
.version-tab.is-active,
.revision-mode-row label:has(input:checked),
.revision-target-card.is-selected {
    border-color: #111318;
    box-shadow: inset 0 0 0 1px #111318;
}
.worker-status.is-good .ops-hero,
.worker-status.is-warning .ops-hero,
.worker-status.is-idle .ops-hero { background: #fff; }

@media (max-width: 719px) {
    .ops-actions { grid-template-columns: 1fr; }
    .health-grid { grid-template-columns: 1fr; }
    .health-advanced summary { align-items: flex-start; flex-direction: column; }
    .workspace-hero { padding: 18px; }
    .workspace-hero h1, .admin-login h1 { font-size: clamp(30px, 10vw, 40px); letter-spacing: -.05em; }
    .workspace-hero p, .panel-head p { font-size: 13px; line-height: 1.65; }
    .creator-card, .task-board { padding: 12px; gap: 12px; }
    .creator-section { padding: 12px; border-radius: 24px; }
    .mode-grid { gap: 8px; }
    .mode-card { min-height: auto; padding: 13px 14px; border-radius: 20px; gap: 5px; }
    .mode-card strong { font-size: 16px; }
    .mode-card em { font-size: 12px; }
    .upload-zone { min-height: 150px; border-radius: 24px; }
    .upload-zone::before { inset: 10px; border-radius: 19px; }
    .upload-zone strong { font-size: 24px; letter-spacing: -.035em; }
    .upload-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .upload-summary { align-items: flex-start; flex-direction: column; }
    .upload-clear-all { align-self: flex-start; }
    .output-section { gap: 10px; }
    .quantity-field { padding: 10px; border-radius: 18px; }
    input, textarea, select { min-height: 46px; border-radius: 16px; }
    .primary-btn { min-height: 50px; }
    .task-card, .template-admin-item { border-radius: 22px; padding: 13px; }
    .task-card {
        gap: 0;
        padding: 14px;
        border-radius: 26px;
        background: linear-gradient(145deg, #fff 0%, #fbfcfe 100%);
        box-shadow: 0 12px 28px rgba(17,19,24,.06), inset 0 1px 0 rgba(255,255,255,.98);
    }
    .task-card-body { gap: 10px; }
    .task-card-top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
    .task-status-wrap { justify-content: flex-end; }
    .task-card .task-code { margin-bottom: 5px; font-size: 11px; color: #9aa2ad; }
    .task-card .task-main h3 { font-size: 16px; line-height: 1.35; }
    .task-card .badge { min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
    .task-card .status-note {
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #7a838f;
        font-size: 12px;
        line-height: 1.55;
    }
    .task-card .status-note::before { display: none; }
    .task-card.failed .status-note,
    .task-card.cancelled .status-note {
        padding: 9px 10px;
        border: 1px solid #f1d5dc;
        border-radius: 14px;
        background: #fff7f8;
        color: var(--danger);
    }
    .task-card.cancelled .status-note { border-color: #e3e7ee; background: #f8f9fb; color: #6a7280; }
    .task-meta-grid { display: flex; flex-wrap: wrap; gap: 7px; }
    .task-card .meta-pill {
        width: auto;
        min-height: 27px;
        flex: 0 0 auto;
        justify-content: flex-start;
        padding: 5px 9px;
        border-radius: 999px;
        background: #f4f6f8;
        color: #66707d;
        font-size: 12px;
    }
    .task-card::after { display: none; }
    .task-card-actions {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
        border: 0;
        border-top: 1px solid rgba(226,230,236,.85);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        backdrop-filter: none;
    }
    .task-card:hover .task-card-actions, .task-card:focus-within .task-card-actions { transform: none; }
    .task-card-actions .pill-btn {
        min-height: 32px;
        padding: 6px 12px;
        border: 1px solid rgba(216,221,229,.95);
        background: #fff;
        font-size: 12px;
    }
    .task-card-actions .pill-btn.view { display: inline-flex; background: #202124; color: #fff; }
    .status-note { padding: 10px; border-radius: 16px; }
    .worker-card { padding: 13px; border-radius: 24px; }
    .worker-hero { grid-template-columns: auto minmax(0, 1fr); }
    .worker-hero > .badge { grid-column: 1 / -1; justify-self: start; }
    .worker-metrics { grid-template-columns: 1fr; }
    .worker-actions { grid-template-columns: 1fr; }
    .worker-command-card code { white-space: pre-wrap; }
    .dialog-card { padding: 12px 10px 30px; }
    .dialog-close { width: 42px; height: 42px; top: 14px; right: 14px; margin: 0; }
    .detail-layout { gap: 12px; }
    .detail-head { padding: 18px; border-radius: 24px; }
    .detail-primary-action { width: 100%; }
    .detail-status-line { margin-bottom: 10px; }
    .detail-section, .story-section { padding: 12px; border-radius: 24px; }
    .story-stack, .gallery-grid .story-image-frame { border-radius: 18px; }
    .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .revision-mode-row { grid-template-columns: 1fr; }
    .revision-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .revision-target-card .pill-btn, .annotation-tools .pill-btn { min-height: 40px; }
    .annotation-dialog { width: calc(100vw - 16px); }
    .annotation-card { max-height: calc(100dvh - 16px); overflow: auto; padding: 14px; border-radius: 24px; }
    .annotation-head h2 { font-size: 26px; }
    .annotation-canvas { max-height: 58dvh; }
    .image-preview-card { padding: 58px 12px 22px; }
    .image-preview-figure img { max-height: calc(100dvh - 150px); border-radius: 14px; }
    .image-preview-figure figcaption { max-width: calc(100vw - 24px); flex-wrap: wrap; border-radius: 18px; text-align: center; }
    .image-preview-nav { top: auto; bottom: 22px; width: 44px; height: 44px; font-size: 34px; transform: none; }
    .image-preview-nav:hover { transform: scale(1.04); }
    .image-preview-nav.prev { left: 16px; }
    .image-preview-nav.next { right: 16px; }
}

@media (min-width: 720px) {
    .topbar, .app-shell { width: min(100% - 32px, 1500px); }
    .topbar { margin-top: 14px; padding: 10px 12px; }
    .app-shell { margin-top: 16px; }
    .workspace-layout, .admin-layout { gap: 16px; }
    .workspace-hero, .creator-card, .task-board, .settings-card, .worker-card, .template-admin-card, .admin-tasks-card { padding: 22px; }
    .workspace-hero { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
    .mode-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mode-card { min-height: 112px; }
    .creator-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); }
    .upload-zone { min-height: 230px; }
    .upload-preview { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .template-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .template-admin-body { grid-template-columns: minmax(0,1fr) auto; }
    .task-actions { justify-content: flex-end; }
    .form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .form-actions { grid-template-columns: 1fr auto; }
    .template-admin-item { grid-template-columns: 112px minmax(0,1fr); }
    .template-admin-preview { width: 112px; aspect-ratio: 1; }
    .admin-login { width: min(920px, calc(100vw - 36px)); min-height: 480px; margin-top: 6vh; padding: 42px; grid-template-columns: minmax(0,1fr) 360px; align-items: center; }
    .task-dialog { width: min(1120px, calc(100vw - 36px)); height: auto; max-height: 88dvh; margin: auto; }
    .dialog-card { height: auto; max-height: 88dvh; overflow: auto; padding: 30px; border: 1px solid rgba(255,255,255,.86); border-radius: 32px; box-shadow: 0 34px 100px rgba(17,19,24,.24); }
    .dialog-close { position: absolute; top: 18px; right: 18px; }
    .detail-layout { gap: 18px; }
    .detail-head { padding: 26px; padding-right: 78px; }
    .detail-title-row { grid-template-columns: minmax(0,1fr) auto; }
    .detail-primary-action .download-all-btn { width: auto; }
    .source-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 136px)); overflow: visible; }
    .source-tile { min-width: 0; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 1120px) {
    .mode-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .workspace-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); gap: 18px; }
    .admin-layout { grid-template-columns: minmax(380px, 430px) minmax(0, 1fr); gap: 18px; }
    .task-board { position: sticky; top: 96px; max-height: calc(100dvh - 124px); grid-template-rows: auto auto minmax(0,1fr); }
    .task-list, .admin-task-list, .template-admin-list { overflow: auto; padding-right: 4px; }
    .admin-tasks-card { grid-column: 1 / -1; }
}

@media (min-width: 1440px) {
    .topbar, .app-shell { width: min(100% - 44px, 1600px); }
    .workspace-layout { grid-template-columns: minmax(0, 1fr) 400px; }
    .admin-layout { grid-template-columns: 430px minmax(0, 1fr); }
}

@media (max-width: 390px) {
    .topbar { width: calc(100% - 14px); border-radius: 22px; }
    .app-shell { width: calc(100% - 14px); }
    .brand-mark { width: 42px; height: 42px; border-radius: 15px; }
    .brand strong { font-size: 14px; }
    .topbar-action { padding: 0 11px; font-size: 12px; }
    .workspace-hero h1, .detail-head h2 { font-size: 29px; }
    .panel-head { display: grid; grid-template-columns: 1fr; }
    .upload-preview { grid-template-columns: 1fr; }
    .board-metric-row span { min-height: 52px; padding: 8px; }
    .board-metric-row strong { font-size: 16px; }
    .board-metric-row em { font-size: 10px; }
}

label:focus-within { outline: none; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(17,19,24,.16);
    outline-offset: 2px;
}
.mode-card:has(input:focus-visible),
.template-option:has(input:focus-visible),
.aspect-options label:has(input:focus-visible),
.revision-mode-row label:has(input:focus-visible),
.revision-target-card:has(input:focus-visible) {
    outline: 2px solid rgba(17,19,24,.34);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(17,19,24,.08);
}

input,
textarea,
select {
    border-color: #d1d7e0;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: none;
}
input:hover,
textarea:hover,
select:hover {
    border-color: #b8c0cc;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #111318;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(17,19,24,.055);
}
select {
    background-color: #fff;
}

.topbar,
.studio-card,
.creator-section,
.quantity-field,
.upload-zone,
.upload-summary,
.upload-tile,
.empty-preview,
.empty-inline,
.empty-state,
.template-option,
.task-card,
.template-admin-item,
.board-metric-row span,
.meta-pill,
.worker-hero,
.worker-metric,
.worker-section,
.worker-command-card,
.worker-log-card,
.health-item,
.health-advanced,
.detail-head,
.detail-section,
.story-section,
.source-strip,
.source-tile,
.confirm-card,
.annotation-card,
.revision-mode-row label,
.revision-target-card,
.version-tab {
    border-color: var(--line);
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
}
.creator-section,
.quantity-field,
.worker-section,
.empty-state,
.empty-preview,
.empty-inline {
    background: #fafbfc;
}
.topbar,
.studio-card:hover,
.task-card:hover,
.task-card:focus-within,
.template-option:hover,
.template-admin-item:hover,
.revision-target-card:hover,
.gallery-grid .story-image-frame:hover {
    box-shadow: 0 6px 18px rgba(17,19,24,.055);
}
.brand-mark,
.primary-btn,
.download-all-btn,
.text-btn,
.pill-btn,
.board-metric-row span,
.meta-pill,
.upload-tile,
.worker-metric,
.health-item,
.detail-head,
.detail-section,
.story-section,
.source-tile {
    box-shadow: none;
}
.primary-btn,
.download-all-btn {
    background: #111318;
    box-shadow: 0 10px 22px rgba(17,19,24,.16);
}
.primary-btn::after,
.download-all-btn::after {
    display: none;
}
.primary-btn:hover,
.download-all-btn:hover {
    background: #20242b;
    box-shadow: 0 14px 30px rgba(17,19,24,.18);
}
.primary-btn:disabled,
.download-all-btn:disabled {
    box-shadow: none;
}
.text-btn,
.pill-btn,
.topbar-action,
.dialog-close,
.toast,
.task-card-actions {
    border-color: var(--line);
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
}
.text-btn:hover,
.pill-btn:hover,
.topbar-action:hover {
    border-color: #c8ced8;
    background: #f8f9fb;
    box-shadow: none;
}
.upload-zone.is-dragging,
.upload-zone.has-files,
.upload-zone.has-error {
    box-shadow: none;
}
.upload-summary {
    background: #f8fbff;
    border-color: #dbeafe;
}
.upload-tile:hover,
.gallery-grid .story-image-frame:hover {
    transform: translateY(-1px);
    border-color: #c8ced8;
    box-shadow: 0 8px 20px rgba(17,19,24,.06);
}
.task-card::after {
    background: rgba(17,19,24,.035);
}
.task-card-actions {
    box-shadow: 0 8px 20px rgba(17,19,24,.08);
}
.task-card.is-new {
    border-color: #1769e0;
    box-shadow: none;
}
.task-card.is-new::before {
    box-shadow: none;
}
.mode-card.is-active,
.template-option.is-selected,
.version-tab.is-active,
.revision-mode-row label:has(input:checked),
.revision-target-card.is-selected {
    border-color: #111318;
    background: #fafbfc;
    box-shadow: none;
}
.worker-status.is-good .ops-hero,
.worker-status.is-warning .ops-hero,
.worker-status.is-idle .ops-hero {
    background: #fff;
}
.task-dialog::backdrop,
.confirm-dialog::backdrop,
.annotation-dialog::backdrop {
    background: rgba(17,19,24,.42);
    backdrop-filter: none;
}
.dialog-card {
    background: #f3f4f6;
    border-color: var(--line);
    box-shadow: none;
}
@media (min-width: 720px) {
    .dialog-card {
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: 0 24px 70px rgba(17,19,24,.14);
    }
}

.detail-head::before,
.empty-state::before,
.empty-preview::before,
.empty-inline::before,
.worker-metric::after,
.ops-hero::after,
.health-item::before,
.task-card::after,
.task-card.is-new::before,
.mode-card::after {
    display: none;
}

.status-note,
.task-card .status-note,
.detail-status-note {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid #eceff3;
    border-radius: 999px;
    background: #f7f8fa;
    color: #656e7a;
    box-shadow: none;
}
.status-note::before,
.task-card .status-note::before {
    display: none;
}
.status-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}
.status-note.queued,
.task-card .status-note.queued {
    border-color: #f1e2c8;
    background: #fff9ef;
    color: #8b641f;
}
.status-note.running,
.status-note.dispatching,
.task-card .status-note.running,
.task-card .status-note.dispatching {
    border-color: #d8e8fb;
    background: #f4f8fd;
    color: #426b99;
}
.status-note.succeeded,
.task-card .status-note.succeeded {
    border-color: #d8eee4;
    background: #f3faf7;
    color: #2f7b5f;
}
.status-note.failed,
.task-card .status-note.failed {
    border-color: #f3d5dc;
    background: #fff6f8;
    color: #a24658;
}
.status-note.cancelled,
.task-card .status-note.cancelled {
    border-color: #e4e8ee;
    background: #f8f9fb;
    color: #6a7280;
}

.detail-head,
.detail-section,
.story-section,
.source-strip,
.task-card,
.creator-section,
.template-option,
.revision-target-card,
.version-tab,
.worker-hero,
.worker-section,
.health-item,
.annotation-card,
.confirm-card {
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
}
.detail-head .detail-status-note,
.detail-head .error-box,
.detail-head .notice-box {
    background: #f7f8fa;
    border-color: #eceff3;
    box-shadow: none;
}
.story-stack,
.gallery-grid img,
.gallery-grid .story-image-frame,
.source-tile,
.upload-tile {
    box-shadow: none;
}
.upload-zone,
.mini-upload,
.worker-hero,
.worker-status.is-good .ops-hero,
.worker-status.is-warning .ops-hero,
.worker-status.is-idle .ops-hero,
.empty-state {
    background: #fff;
}
.upload-zone:hover,
.mini-upload:hover,
.task-card:hover,
.task-card:focus-within,
.template-option:hover,
.template-admin-item:hover,
.revision-target-card:hover,
.gallery-grid .story-image-frame:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(17,19,24,.05);
}
.task-card-actions {
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(17,19,24,.07);
}
.mode-card.is-active,
.template-option.is-selected,
.version-tab.is-active,
.revision-mode-row label:has(input:checked),
.revision-target-card.is-selected {
    border-color: #111318;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(17,19,24,.06);
}

#taskDetail,
.detail-layout,
.detail-workbench,
.detail-main-column,
.detail-side-column {
    min-width: 0;
    min-height: 0;
}

.task-dialog {
    width: min(1180px, calc(100vw - 28px));
    max-width: none;
    height: min(860px, calc(100dvh - 28px));
    max-height: none;
    margin: auto;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: transparent;
}
.task-dialog::backdrop {
    background: rgba(17,19,24,.36);
    backdrop-filter: none;
}
.dialog-card {
    height: 100%;
    max-height: none;
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding: 16px;
    border: 1px solid #dfe4eb;
    border-radius: 30px;
    background: #f6f7f9;
    box-shadow: 0 28px 80px rgba(17,19,24,.18);
    scrollbar-width: none;
}
.dialog-card::-webkit-scrollbar,
.detail-main-column::-webkit-scrollbar,
.detail-side-column::-webkit-scrollbar,
.story-stack::-webkit-scrollbar,
.gallery-grid::-webkit-scrollbar,
.source-grid::-webkit-scrollbar,
.version-tabs::-webkit-scrollbar {
    display: none;
}
#taskDetail {
    height: 100%;
    overflow: hidden;
}
.dialog-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border: 1px solid #e1e5ec;
    border-radius: 999px;
    background: #fff;
    color: #69717d;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(17,19,24,.07);
}
.dialog-close:hover {
    transform: translateY(-1px);
    border-color: #cfd5df;
    color: #111318;
    box-shadow: 0 10px 24px rgba(17,19,24,.09);
}
.detail-layout {
    height: 100%;
    max-width: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    margin: 0;
}
.detail-head {
    padding: 20px 72px 18px 20px;
    border: 1px solid #e3e7ee;
    border-radius: 24px;
    background: #fff;
    overflow: visible;
}
.detail-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}
.detail-head h2 {
    max-width: 760px;
    margin: 7px 0 0;
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.08;
}
.detail-status-line {
    margin: 13px 0 0;
    gap: 8px;
}
.detail-status-note {
    margin: 12px 0 0;
}
.detail-primary-action {
    align-self: start;
    padding-top: 2px;
}
.detail-primary-action .download-all-btn {
    width: auto;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
}
.version-strip {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
}
.version-tabs {
    padding-bottom: 0;
    scrollbar-width: none;
}
.version-tab {
    min-width: 104px;
    border-radius: 16px;
}
.detail-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 14px;
    overflow: hidden;
}
.detail-main-column,
.detail-side-column {
    display: grid;
    gap: 14px;
    overflow: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.detail-side-column {
    align-content: start;
}
.detail-section,
.story-section,
.source-strip,
.revision-panel {
    border: 1px solid #e3e7ee;
    border-radius: 24px;
    background: #fff;
    box-shadow: none;
}
.story-section {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 16px;
}
.story-heading {
    margin: 0 0 12px;
    padding: 0 2px;
}
.story-heading span,
.section-mini-title {
    font-size: 20px;
    letter-spacing: -.025em;
}
.story-heading small,
.detail-section-head em,
.section-kicker {
    color: #8b94a1;
}
.story-stack,
.gallery-grid {
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    border-radius: 20px;
    background: #f6f7f9;
}
.story-stack {
    border: 1px solid #eef1f5;
}
.story-image-frame,
.gallery-grid .story-image-frame,
.gallery-grid img {
    border-color: #eef1f5;
    border-radius: 18px;
    box-shadow: none;
}
.story-stack .story-image-frame,
.story-stack img {
    border-radius: 0;
}
.source-strip,
.revision-panel {
    padding: 14px;
}
.detail-section-head {
    align-items: center;
}
.source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 0;
    overflow: visible;
}
.source-tile {
    border-radius: 16px;
    border-color: #eef1f5;
}
.source-tile figcaption {
    padding: 6px 8px;
    font-size: 11px;
}
.revision-form {
    gap: 12px;
}
.revision-mode-row,
.revision-target-grid {
    gap: 8px;
}
.revision-target-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.revision-target-card {
    border-radius: 16px;
}
.revision-form textarea {
    min-height: 96px;
}

@media (max-width: 899px) {
    .task-dialog {
        width: 100vw;
        height: 100dvh;
        border-radius: 24px 24px 0 0;
    }
    .dialog-card {
        padding: 12px;
        border-width: 0;
        border-radius: 24px 24px 0 0;
        box-shadow: none;
    }
    .dialog-close {
        top: 18px;
        right: 18px;
    }
    .detail-layout {
        gap: 12px;
    }
    .detail-head {
        padding: 18px 64px 16px 16px;
        border-radius: 22px;
    }
    .detail-title-row {
        grid-template-columns: 1fr;
    }
    .detail-primary-action .download-all-btn {
        width: 100%;
    }
    .detail-workbench {
        grid-template-columns: 1fr;
        overflow: auto;
        scrollbar-width: none;
    }
    .detail-workbench::-webkit-scrollbar {
        display: none;
    }
    .detail-main-column,
    .detail-side-column,
    .story-stack,
    .gallery-grid {
        overflow: visible;
    }
    .story-section {
        min-height: auto;
    }
    .source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.task-dialog {
    width: min(1180px, calc(100vw - 28px));
    height: auto;
    max-height: calc(100dvh - 28px);
    overflow: hidden;
}
.dialog-card {
    height: auto;
    max-height: calc(100dvh - 28px);
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dialog-card::-webkit-scrollbar,
#taskDetail::-webkit-scrollbar,
.detail-layout::-webkit-scrollbar,
.detail-workbench::-webkit-scrollbar,
.detail-main-column::-webkit-scrollbar,
.detail-side-column::-webkit-scrollbar,
.story-stack::-webkit-scrollbar,
.gallery-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
#taskDetail,
.detail-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
}
.detail-layout {
    display: grid;
    grid-template-rows: none;
    gap: 14px;
}
.detail-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 14px;
    overflow: visible;
    align-items: start;
}
.detail-main-column,
.detail-side-column,
.story-stack,
.gallery-grid {
    height: auto;
    max-height: none;
    overflow: visible;
}
.story-section {
    min-height: auto;
    display: grid;
    grid-template-rows: auto auto;
}
.detail-side-column {
    position: sticky;
    top: 0;
    align-self: start;
}

@media (max-width: 899px) {
    .task-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
    }
    .dialog-card {
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
    }
    .detail-workbench {
        grid-template-columns: 1fr;
    }
    .detail-side-column {
        position: static;
    }
}

:where(.primary-btn, .download-all-btn, .text-btn, .pill-btn, .topbar-action, .dialog-close) {
    transform: translate3d(0,0,0);
    transition:
        transform 160ms var(--ease-out),
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}
:where(.primary-btn, .download-all-btn, .text-btn, .pill-btn, .topbar-action, .dialog-close):hover:not(:disabled) {
    transform: translate3d(0,-1px,0);
    will-change: transform;
}
:where(.primary-btn, .download-all-btn, .text-btn, .pill-btn, .topbar-action, .dialog-close):active:not(:disabled) {
    transform: translate3d(0,0,0);
}
:where(.text-btn, .pill-btn, .topbar-action, .dialog-close) {
    border-color: #dfe4eb;
    background: #fff;
    box-shadow: none;
}
:where(.text-btn, .pill-btn, .topbar-action, .dialog-close):hover:not(:disabled) {
    border-color: #cfd5df;
    background: #f8f9fb;
    box-shadow: 0 6px 16px rgba(17,19,24,.045);
}
:where(.primary-btn, .download-all-btn) {
    border: 0;
    background: #111318;
    color: #fff;
    box-shadow: 0 10px 24px rgba(17,19,24,.14);
}
:where(.primary-btn, .download-all-btn):hover:not(:disabled) {
    background: #20242b;
    box-shadow: 0 14px 30px rgba(17,19,24,.17);
}
:where(.primary-btn, .download-all-btn, .text-btn, .pill-btn):disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.primary-btn.is-loading,
.text-btn.is-loading,
.pill-btn.is-loading,
.download-all-btn.is-loading {
    pointer-events: none;
}
.pill-btn.danger {
    color: #a24658;
    border-color: #efd2d9;
}
.pill-btn.danger:hover:not(:disabled) {
    color: #923449;
    background: #fff6f8;
    border-color: #e9bdc7;
}

:where(.studio-card, .task-card, .template-admin-item, .template-option, .revision-target-card, .upload-tile, .mini-upload, .gallery-grid .story-image-frame) {
    transition:
        transform 180ms var(--ease-out),
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}
:where(.studio-card, .task-card, .template-admin-item, .template-option, .revision-target-card, .upload-tile, .mini-upload, .gallery-grid .story-image-frame):hover {
    transform: translate3d(0,-1px,0);
    border-color: #cfd5df;
    box-shadow: 0 8px 22px rgba(17,19,24,.055);
}
.task-card {
    cursor: default;
}
.task-card-body {
    cursor: pointer;
}
.task-card-actions {
    position: static;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.task-card-actions .pill-btn {
    border: 1px solid #dfe4eb;
    background: #fff;
}
.task-card-actions .pill-btn.view {
    border-color: #111318;
    background: #111318;
    color: #fff;
}
.task-card-actions .pill-btn.view:hover {
    background: #20242b;
    border-color: #20242b;
}

:is(.dialog-card, .detail-workbench, .detail-main-column, .detail-side-column, .story-stack, .gallery-grid, .source-grid, .version-tabs, .task-list, .admin-task-list, .template-admin-list) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
:is(.dialog-card, .detail-workbench, .detail-main-column, .detail-side-column, .story-stack, .gallery-grid, .source-grid, .version-tabs, .task-list, .admin-task-list, .template-admin-list)::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.dialog-card {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.detail-workbench,
.detail-main-column,
.detail-side-column,
.story-stack,
.gallery-grid {
    overflow: visible;
}

:where(.detail-head, .detail-section, .story-section, .source-strip, .creator-section, .worker-section, .health-item, .template-option, .revision-target-card, .version-tab, .confirm-card, .annotation-card) {
    border-color: #e3e7ee;
    background: #fff;
    box-shadow: none;
}
:where(.mode-card.is-active, .template-option.is-selected, .version-tab.is-active, .revision-mode-row label:has(input:checked), .revision-target-card.is-selected) {
    border-color: #111318;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(17,19,24,.06);
}

.task-card {
    cursor: default;
    padding: 16px;
    border-radius: 24px;
    overflow: hidden;
}
.task-card-body {
    cursor: pointer;
    transition: transform 180ms var(--ease-out), opacity 180ms ease;
}
.task-card:hover .task-card-body,
.task-card:focus-within .task-card-body {
    transform: translate3d(0,-1px,0);
}
.task-card-top {
    align-items: start;
}
.task-card .task-main h3 {
    line-height: 1.32;
}
.task-card .status-note {
    width: auto;
    border-radius: 18px;
    background: #fafbfc;
}
.task-card .meta-pill {
    min-height: 30px;
    background: #f8f9fb;
    border: 1px solid transparent;
}
.task-card-actions {
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    transition: opacity 180ms ease, transform 180ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease;
}
.task-card-actions .pill-btn {
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
}
.task-card-actions .pill-btn.view {
    border-color: #111318;
    background: #111318;
    color: #fff;
}
.task-card-actions .pill-btn.danger {
    border-color: #f0d5dc;
    background: #fff;
    color: #a24658;
}
.task-card-actions .pill-btn.danger:hover {
    background: #fff6f8;
    border-color: #e8bdc7;
}
.task-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    border-radius: inherit;
    background: rgba(255,255,255,.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
.task-card:hover::before,
.task-card:focus-within::before {
    opacity: 1;
}
.task-card.is-new {
    border-color: #cfe0f7;
    box-shadow: 0 10px 26px rgba(23,105,224,.08);
}
.task-card.is-new::before {
    display: block;
}

@media (hover: none), (pointer: coarse) {
    .task-card::before {
        display: none;
    }
    .task-card-actions {
        position: static;
        max-width: none;
        margin-top: 2px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        justify-content: flex-start;
    }
}

@media (hover: hover) and (pointer: fine) {
    .task-card-actions {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: inherit;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        pointer-events: none;
        transform: scale(.985);
    }
    .task-card:hover .task-card-actions,
    .task-card:focus-within .task-card-actions {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
    .task-card-actions::before {
        content: "";
        position: absolute;
        width: calc(100% - 28px);
        max-width: 260px;
        height: 48px;
        border: 1px solid #e3e7ee;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(17,19,24,.12);
    }
    .task-card-actions .pill-btn {
        position: relative;
        z-index: 1;
    }
}

.revision-panel {
    gap: 16px;
}
.revision-helper {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    background: #fafbfc;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}
.revision-mode-row label {
    min-height: 48px;
    border-radius: 18px;
    padding: 13px 14px;
}
.revision-mode-row label:has(input:checked) {
    box-shadow: 0 0 0 2px rgba(17,19,24,.055);
}
.revision-targets {
    gap: 10px;
}
.revision-target-head {
    padding: 0 2px;
}
.revision-target-count {
    padding: 5px 9px;
    border-radius: 999px;
    background: #f6f7f9;
    color: #4f5663;
}
.revision-target-card {
    gap: 9px;
    padding: 10px;
    border-radius: 18px;
}
.revision-target-card img {
    border-radius: 14px;
}
.revision-target-card input {
    left: 12px;
    top: 12px;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(17,19,24,.12);
}
.revision-target-card.is-annotated::after {
    right: 10px;
    top: 10px;
    border: 1px solid #f0d5dc;
    background: #fff6f8;
    color: #a24658;
    box-shadow: none;
}
.revision-target-card .pill-btn {
    justify-content: center;
}
.revision-annotation-summary {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-style: solid;
    border-radius: 18px;
    background: #fafbfc;
}
.revision-annotation-summary span {
    color: var(--ink);
    font-weight: 740;
}
.revision-annotation-summary em {
    color: var(--muted);
    font-style: normal;
}
.revision-annotation-summary.has-items {
    border-color: #f0d5dc;
    background: #fff8fa;
    color: inherit;
}
.annotation-card {
    gap: 16px;
    border-radius: 24px;
    background: #fff;
}
.annotation-head h2 {
    font-size: 24px;
    letter-spacing: -.03em;
}
.annotation-tools {
    gap: 6px;
    padding: 6px;
    border: 1px solid #e3e7ee;
    border-radius: 18px;
    background: #f8f9fb;
}
.annotation-tools .pill-btn {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.annotation-tools .pill-btn:hover:not(:disabled) {
    background: #fff;
    box-shadow: none;
}
.annotation-tools .is-active,
.annotation-tools .is-active:hover:not(:disabled) {
    border-color: #111318;
    background: #111318;
    color: #fff;
}
.annotation-canvas {
    border-radius: 18px;
    border-color: #e3e7ee;
    background: #fff;
}

.admin-layout {
    grid-template-columns: 1fr;
    gap: 16px;
}
.admin-console-card,
.admin-panel {
    border-radius: 30px;
    border-color: #e2e6ed;
    background: #fff;
    box-shadow: 0 10px 26px rgba(17,19,24,.045);
}
.admin-console-card {
    padding: 16px;
    display: grid;
    gap: 14px;
    overflow: hidden;
}
.admin-console-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    align-items: center;
    padding: 4px 4px 0;
}
.admin-console-head h1 {
    margin: 6px 0 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1;
    letter-spacing: -.048em;
}
.admin-console-head p {
    max-width: 560px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}
.admin-console-head .text-btn {
    justify-self: start;
    background: #fafbfc;
}
.admin-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 6px;
    border: 1px solid #e9edf2;
    border-radius: 24px;
    background: #f7f8fa;
}
.admin-tab {
    min-height: 70px;
    position: relative;
    padding: 13px 14px 13px 48px;
    display: grid;
    gap: 3px;
    align-content: center;
    border: 1px solid transparent;
    border-radius: 19px;
    background: transparent;
    color: var(--muted);
    text-align: left;
    transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.admin-tab em {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff;
    color: #8a93a0;
    font-size: 10px;
    font-style: normal;
    font-weight: 760;
    letter-spacing: .04em;
    box-shadow: inset 0 0 0 1px #e4e8ef;
    transform: translateY(-50%);
}
.admin-tab strong,
.admin-tab span {
    display: block;
}
.admin-tab strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 780;
    letter-spacing: -.01em;
}
.admin-tab span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.admin-tab:hover {
    background: #fff;
    border-color: #dde2ea;
    transform: translateY(-1px);
}
.admin-tab.is-active {
    background: #fff;
    border-color: #cfd5df;
    color: var(--ink);
    box-shadow: 0 10px 22px rgba(17,19,24,.07);
}
.admin-tab.is-active::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #111318;
}
.admin-tab.is-active em {
    background: #111318;
    color: #fff;
    box-shadow: none;
}
.admin-tab.is-active strong {
    color: var(--ink);
}
.admin-tab.is-active span {
    color: #656d79;
}
.admin-panel {
    min-width: 0;
    padding: 18px;
    gap: 16px;
}
.admin-panel .panel-head {
    padding: 2px 2px 15px;
    border-bottom: 1px solid #edf0f4;
}
.admin-panel .panel-head h2 {
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -.04em;
}
.admin-panel .panel-head p {
    margin-top: 9px;
    line-height: 1.65;
}
.admin-panel[hidden] {
    display: none !important;
}
.settings-card.admin-panel,
.worker-card.admin-panel,
.template-admin-card.admin-panel,
.admin-tasks-card.admin-panel {
    display: grid;
}
.settings-card.admin-panel > label,
.settings-card.admin-panel .form-grid,
.template-admin-card.admin-panel .template-form > label,
.template-admin-card.admin-panel .template-form .form-grid {
    margin-top: 0;
}
.settings-card.admin-panel,
.template-form {
    gap: 14px;
}
.admin-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    background: #fafbfc;
}
.admin-form-section.compact {
    background: #fff;
}
.admin-form-section-head {
    display: grid;
    gap: 4px;
    padding: 0 1px 2px;
}
.admin-form-section-head strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 780;
    letter-spacing: -.01em;
}
.admin-form-section-head span {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}
.admin-save-row {
    display: flex;
    justify-content: flex-start;
    padding-top: 2px;
}
.settings-card.admin-panel .admin-save-row .primary-btn {
    width: auto;
    min-width: 150px;
    padding-inline: 22px;
}
.settings-card.admin-panel label,
.template-form label {
    min-width: 0;
    margin: 0;
}
.settings-card.admin-panel .form-grid.two,
.template-form .form-grid.two {
    gap: 12px;
}
.settings-card.admin-panel label span,
.template-form label span {
    color: #59616d;
    font-size: 12px;
    font-weight: 700;
}
.settings-card.admin-panel input,
.settings-card.admin-panel select,
.template-form input,
.template-form select,
.template-form textarea {
    min-height: 48px;
    background: #fff;
    border-color: #dfe4eb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
.settings-card.admin-panel textarea,
.template-form textarea {
    min-height: 104px;
}
.settings-card.admin-panel input:focus,
.settings-card.admin-panel select:focus,
.template-form input:focus,
.template-form select:focus,
.template-form textarea:focus {
    background: #fff;
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17,19,24,.055);
}
.worker-card.admin-panel {
    overflow: visible;
}
.worker-card.admin-panel .worker-status {
    min-height: 180px;
}
.worker-card.admin-panel .worker-hero,
.worker-card.admin-panel .worker-metric,
.worker-card.admin-panel .worker-section,
.worker-card.admin-panel .health-advanced {
    border-color: #e4e8ef;
}
.worker-card.admin-panel .worker-metric::after {
    background: rgba(17,19,24,.04);
}
.worker-card.admin-panel .ops-actions {
    justify-content: start;
    padding-top: 2px;
}
.worker-card.admin-panel .ops-actions .primary-btn {
    width: auto;
    min-width: 138px;
    padding-inline: 20px;
}
.template-admin-card.admin-panel {
    align-items: start;
}
.template-editor-shell,
.template-library-shell {
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #edf0f4;
    border-radius: 24px;
    background: #fafbfc;
}
.template-library-shell {
    background: #fff;
}
.template-admin-card.admin-panel .template-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.template-admin-card.admin-panel .mini-upload {
    background: #fff;
    border-radius: 20px;
}
.template-admin-card.admin-panel .template-upload-preview {
    margin-top: 0;
}
.template-admin-card.admin-panel .form-actions {
    margin-top: 0;
}
.template-admin-card.admin-panel .form-actions .primary-btn {
    width: auto;
    min-width: 132px;
    padding-inline: 20px;
}
.template-admin-list,
.admin-task-list {
    gap: 11px;
}
.template-admin-item {
    border-radius: 22px;
    border-color: #e5e9ef;
    background: #fff;
    box-shadow: none;
}
.template-admin-item:hover {
    border-color: #d2d8e2;
    box-shadow: 0 10px 22px rgba(17,19,24,.055);
}
.template-admin-preview {
    border-radius: 18px;
    background: #f6f7f9;
}
.template-admin-body {
    gap: 14px;
}
.template-admin-item .task-actions {
    gap: 7px;
}
.template-admin-item .pill-btn {
    min-height: 34px;
    padding-inline: 13px;
    background: #fafbfc;
}
.admin-tasks-card.admin-panel .admin-task-list,
.template-admin-card.admin-panel .template-admin-list {
    min-height: 220px;
}
.admin-tasks-card.admin-panel .admin-task-ledger {
    gap: 0;
    min-height: 220px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #e2e7ee;
    border-radius: 26px;
    background: #f7f9fb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.admin-task-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 10px 13px;
}
.admin-task-toolbar > div:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.admin-task-toolbar strong {
    color: #171b21;
    font-size: 15px;
    font-weight: 790;
    letter-spacing: -.015em;
}
.admin-task-toolbar span {
    color: #7a838f;
    font-size: 12px;
}
.admin-task-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.admin-task-counts span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #e3e8ef;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #656e7a;
    font-size: 12px;
    font-weight: 650;
}
.admin-task-column-head,
.admin-task-item {
    display: grid;
    grid-template-columns: minmax(300px, 1.28fr) minmax(310px, 1fr) minmax(176px, auto);
    column-gap: 20px;
    align-items: center;
}
.admin-task-column-head {
    padding: 0 14px 7px;
    color: #8b94a0;
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
}
.admin-task-column-head span:last-child {
    text-align: right;
}
.admin-task-item {
    position: relative;
    min-height: 88px;
    margin-top: 8px;
    padding: 16px 16px 16px 18px;
    border: 1px solid #e4e9f0;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17,19,24,.025);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.admin-task-item:focus { outline: none; }
.admin-task-item::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #a8b0bc;
}
.admin-task-item:hover,
.admin-task-item:focus-visible,
.admin-task-item:focus-within {
    border-color: #d3dae5;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17,19,24,.055);
}
.admin-task-item:focus-visible {
    outline: 3px solid rgba(10,132,255,.22);
    outline-offset: 2px;
}
.admin-task-item.is-queued::before,
.admin-task-item.is-creating::before { background: #d39a2c; }
.admin-task-item.is-running::before,
.admin-task-item.is-dispatching::before { background: #3d7ec0; }
.admin-task-item.is-succeeded::before { background: #2b946b; }
.admin-task-item.is-failed::before { background: #cf5067; }
.admin-task-item.is-cancelled::before { background: #9ba4b0; }
.admin-task-identity {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding-left: 18px;
}
.admin-task-titleline {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.admin-task-titleline h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 790;
    line-height: 1.35;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-task-titleline .badge {
    min-height: 24px;
    flex: 0 0 auto;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 730;
}
.admin-task-subline {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: #7b8491;
    font-size: 12px;
    line-height: 1.35;
}
.admin-task-subline code {
    padding: 2px 7px;
    border: 1px solid #e5eaf1;
    border-radius: 999px;
    background: #f8fafc;
    color: #6e7783;
    font-family: var(--mono);
    font-size: 11px;
}
.admin-task-subline span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 999px;
    background: #c5ccd6;
}
.admin-task-error {
    margin: 0;
    overflow: hidden;
    color: #af4358;
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-task-facts {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.admin-task-facts span {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding-inline: 13px;
    border-left: 1px solid #edf1f5;
}
.admin-task-facts span:first-child {
    border-left: 0;
    padding-left: 0;
}
.admin-task-facts em {
    overflow: hidden;
    color: #929aa6;
    font-size: 11px;
    font-style: normal;
    font-weight: 720;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-task-facts strong {
    overflow: hidden;
    color: #303640;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-task-actions {
    min-width: 0;
    justify-content: flex-end;
    gap: 7px;
}
.admin-task-item .admin-task-actions .pill-btn {
    min-height: 32px;
    padding: 0 12px;
    border-color: #dfe4ec;
    border-radius: 999px;
    background: #fff;
    color: #3f4651;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}
.admin-task-item .admin-task-actions .pill-btn:hover {
    border-color: #cbd3df;
    background: #f8f9fb;
    box-shadow: none;
}
.admin-task-item .admin-task-actions .pill-btn.view {
    border-color: #15191f;
    background: #15191f;
    color: #fff;
}
.admin-task-item .admin-task-actions .pill-btn.retry {
    border-color: #d6e5f7;
    color: #2f6fad;
}
.admin-task-item .admin-task-actions .pill-btn.danger {
    border-color: #f0ced7;
    color: #ad465a;
}
.admin-task-item .admin-task-actions .pill-btn.danger.subtle {
    border-color: #e2e7ee;
    color: #7a838f;
}
@media (max-width: 1080px) {
    .admin-task-column-head {
        display: none;
    }
    .admin-task-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        min-height: 0;
        padding: 16px;
    }
    .admin-task-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .admin-task-actions {
        justify-content: flex-start;
        padding-left: 18px;
    }
}
@media (max-width: 719px) {
    .admin-tasks-card.admin-panel .admin-task-ledger {
        padding: 8px;
        border-radius: 20px;
    }
    .admin-task-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-task-counts {
        justify-content: flex-start;
    }
    .admin-task-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .admin-task-facts span {
        padding: 0;
        border-left: 0;
    }
    .admin-task-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-task-actions .pill-btn {
        justify-content: center;
    }
}
@media (min-width: 720px) {
    .admin-console-card,
    .admin-panel {
        padding: 22px;
    }
    .admin-console-head {
        grid-template-columns: minmax(0,1fr) auto;
        align-items: start;
    }
    .admin-tabs {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
    .admin-tab {
        min-height: 86px;
        align-content: center;
    }
    .admin-form-section {
        padding: 16px;
    }
}
@media (min-width: 1120px) {
    .admin-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .admin-console-card {
        position: sticky;
        top: 96px;
        z-index: 6;
    }
    .settings-card.admin-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .settings-card.admin-panel .panel-head,
    .settings-card.admin-panel .admin-save-row {
        grid-column: 1 / -1;
    }
    .settings-card.admin-panel .admin-form-section {
        min-height: 100%;
        align-content: start;
    }
    .template-admin-card.admin-panel {
        grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
        gap: 18px;
    }
    .template-admin-card.admin-panel .panel-head {
        grid-column: 1 / -1;
    }
    .template-admin-card.admin-panel .template-admin-list,
    .admin-tasks-card.admin-panel .admin-task-list {
        max-height: calc(100dvh - 270px);
        overflow: auto;
        padding-right: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}