:root {
    --page: #f4f5f7;
    --page-top: #fbfbfc;
    --card: rgba(255, 255, 255, .94);
    --card-solid: #ffffff;
    --soft: #f7f8fa;
    --ink: #111318;
    --muted: #707681;
    --faint: #a5abb5;
    --line: rgba(17, 19, 24, .08);
    --line-strong: rgba(17, 19, 24, .14);
    --black: #111318;
    --accent: #0a84ff;
    --success: #18875f;
    --warning: #a8660a;
    --danger: #c83f5c;
    --shadow-sm: 0 10px 30px rgba(17, 19, 24, .06);
    --shadow-md: 0 20px 60px rgba(17, 19, 24, .10);
    --shadow-lg: 0 32px 110px rgba(17, 19, 24, .18);
    --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: 16px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-xl: 34px;
    --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:
        radial-gradient(circle at 20% -10%, rgba(255,255,255,.98) 0 18rem, transparent 32rem),
        radial-gradient(circle at 90% 8%, rgba(235,239,245,.82) 0 16rem, transparent 30rem),
        linear-gradient(180deg, var(--page-top), var(--page) 42%, #eef0f3);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 48%);
}
.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmosphere i { position: absolute; display: block; border-radius: 999px; background: rgba(255,255,255,.72); filter: blur(.3px); }
.atmosphere i:nth-child(1) { width: 22rem; height: 22rem; left: -12rem; top: 5rem; box-shadow: 0 30px 90px rgba(17,19,24,.05); }
.atmosphere i:nth-child(2) { width: 26rem; height: 26rem; right: -15rem; top: 14rem; background: rgba(236,239,244,.70); }

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: 3px solid rgba(10,132,255,.16);
    outline-offset: 3px;
}

.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 rgba(255,255,255,.88);
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.95);
}
.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;
    width: 14px;
    height: 14px;
    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 rgba(255,255,255,.82);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
}
.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: rgba(247,248,250,.72);
    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;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.mode-card::after {
    content: "";
    position: absolute;
    width: 44px;
    height: 44px;
    right: -18px;
    top: -18px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
}
.mode-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mode-card span { position: relative; z-index: 1; color: var(--faint); 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: #fff; border-color: rgba(17,19,24,.96); background: linear-gradient(145deg, #101217, #2f333d); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mode-card.is-active span, .mode-card.is-active strong, .mode-card.is-active em { color: #fff; }
.mode-card.is-active::after { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.mode-card:hover, .template-option:hover, .task-card:hover, .admin-row:hover, .template-admin-item:hover { transform: translateY(-2px); 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: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.output-section .section-label, .output-section label, .output-section .fineprint { margin-bottom: 0; }
.output-section .template-picker { margin-bottom: 0; }
.quantity-field {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
}
.quantity-field span { margin-bottom: 8px; }
.quantity-field input {
    min-height: 50px;
    border-radius: 16px;
    background: var(--soft);
}

label { display: block; margin: 0 0 13px; }
label span, .field-label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 13px; }
input, textarea, select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 17px;
    outline: none;
    color: var(--ink);
    background: rgba(255,255,255,.96);
    padding: 12px 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea { resize: vertical; line-height: 1.65; }
input:focus, textarea:focus, select:focus { border-color: rgba(10,132,255,.52); box-shadow: 0 0 0 5px rgba(10,132,255,.10); }
.upload-zone {
    min-height: 174px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    position: relative;
    margin: 0;
    text-align: center;
    border: 1.5px dashed var(--line-strong);
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.upload-zone::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid var(--line);
    pointer-events: none;
}
.upload-zone::after { display: none; }
.upload-zone.is-dragging { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.upload-zone.has-files { border-style: solid; border-color: rgba(10,132,255,.30); }
.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-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; }
.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; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 20px; background: #fff; color: var(--muted); text-align: center; }
.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 var(--line); border-radius: 22px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); transition: .18s 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: rgba(10,132,255,.44); box-shadow: 0 0 0 4px rgba(10,132,255,.08); }
.quantity-field input { font-size: 22px; text-align: center; }
.primary-btn, .download-all-btn {
    min-height: 54px;
    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);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.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: .52; cursor: not-allowed; transform: none; }
.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); }
.pill-btn.danger { color: var(--danger); }
.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; }

.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; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 24px; background: #fff; color: var(--muted); text-align: center; }
.compact-empty { min-height: 108px; }
.loading-state { min-height: 220px; }
.task-card, .admin-row, .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; }
.task-card-head, .admin-row-head, .template-admin-body { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.task-code, .task-type { margin-bottom: 6px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.task-main h3, .admin-row 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-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 {
    display: grid;
    gap: 12px;
    min-width: 0;
    outline: none;
}
.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: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid rgba(216,221,229,.88);
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(18px) saturate(135%);
    box-shadow: 0 14px 28px rgba(17,19,24,.10);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.97);
    transition: opacity .16s ease, transform .18s var(--ease-out), border-color .18s ease;
}
.task-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255,255,255,.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.task-card:hover::after, .task-card:focus-within::after { opacity: 1; }
.task-card:hover .task-card-actions, .task-card:focus-within .task-card-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.task-card-actions .pill-btn {
    min-height: 34px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.task-card-actions .pill-btn.view {
    background: #202124;
    color: #fff;
    box-shadow: none;
}
.task-card-actions .pill-btn.view:hover { background: #30333a; color: #fff; }
.task-card-actions .pill-btn.danger {
    background: transparent;
    color: #a94a5a;
}
.task-card-actions .pill-btn.danger:hover { background: #fff1f4; color: #972e44; }
.task-tap-hint { display: none; color: var(--faint); font-size: 12px; }
.task-card.is-new { animation: taskCardIn var(--dur-slow) var(--ease-soft) both; }
@keyframes taskCardIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.admin-login { min-height: auto; margin: 12px auto 0; padding: 24px; display: grid; gap: 22px; }
.settings-card { display: block; }
.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 var(--line-strong); border-radius: 20px; background: #fff; color: var(--muted); }
.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; }
.admin-row { grid-template-columns: 1fr; }
.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.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; 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 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; }
.worker-note { display: grid; gap: 4px; padding: 12px 13px; border-radius: 18px; font-size: 13px; line-height: 1.55; }
.worker-note strong { color: var(--ink); }
.worker-note span { color: #6d7580; }
.worker-note.running { border: 1px solid #c9def8; background: #f3f8ff; }
.worker-note.warning { border: 1px solid #f0d8b5; background: #fffaf2; }
.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; }

.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: blur(16px) saturate(140%);
    box-shadow: var(--shadow-lg);
    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,.28); backdrop-filter: blur(12px); }
.dialog-card { height: 100%; max-height: none; overflow: auto; position: relative; padding: 12px 10px 28px; border: 0; border-radius: 0; background: var(--page); box-shadow: none; scrollbar-width: none; -ms-overflow-style: none; }
.dialog-card::-webkit-scrollbar { width: 0; height: 0; display: none; }
.task-dialog[open] .dialog-card, .confirm-dialog[open] .confirm-card { animation: dialogIn var(--dur-slow) var(--ease-soft) both; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(10px) 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 var(--line); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--muted); 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(30px, 8vw, 44px); font-weight: 760; line-height: 1.02; letter-spacing: -.05em; overflow-wrap: anywhere; }
.detail-status-line { align-items: center; margin: 8px 0 13px; 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 12px; }
.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 var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow-sm); }
.story-stack img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: #fff; vertical-align: top; }
.gallery-grid, .detail-skeleton { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gallery-grid img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.detail-skeleton i { min-height: 160px; border-radius: 24px; background: linear-gradient(110deg, #fff, #f1f3f6, #fff); background-size: 220% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.dialog-card {
    background:
        radial-gradient(circle at 18% 0, rgba(255,255,255,.98), transparent 22rem),
        linear-gradient(180deg, #f8f9fb, #eef1f4);
}
.dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    float: none;
    display: grid;
    place-items: center;
    margin: 0;
    color: #5e6672;
    backdrop-filter: blur(16px) saturate(140%);
    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: 1040px; margin: 0 auto; }
.detail-head {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-color: rgba(255,255,255,.9);
    background:
        radial-gradient(circle at 88% 0, rgba(255,255,255,.96), transparent 18rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,248,251,.94));
    box-shadow: 0 22px 60px rgba(17,19,24,.10), inset 0 1px 0 rgba(255,255,255,.98);
}
.detail-head::before {
    content: "";
    position: absolute;
    right: -72px;
    top: -92px;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: rgba(10,132,255,.06);
    border: 1px solid rgba(10,132,255,.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: rgba(255,255,255,.76);
    border-color: rgba(17,19,24,.07);
}
.detail-section {
    border-color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 46px rgba(17,19,24,.07), 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); }
.story-section {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 46px rgba(17,19,24,.07), 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 14px 34px rgba(17,19,24,.08); }

@media (max-width: 719px) {
    .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)); }
    .output-section { gap: 10px; }
    .quantity-field { padding: 10px; border-radius: 18px; }
    .primary-btn { min-height: 50px; }
    .task-card, .admin-row, .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: 26px; }
    .detail-primary-action { width: 100%; }
    .detail-status-line { margin-bottom: 10px; }
    .detail-section, .story-section { padding: 12px; border-radius: 24px; }
    .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}

@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(3, minmax(0,1fr)); }
    .mode-card { min-height: 122px; }
    .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)); }
    .task-card-head, .admin-row-head, .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(1040px, calc(100vw - 36px)); height: auto; max-height: 86dvh; margin: auto; }
    .dialog-card { height: auto; max-height: 86dvh; overflow: auto; padding: 28px; border: 1px solid rgba(255,255,255,.86); border-radius: 34px; box-shadow: 0 34px 100px rgba(17,19,24,.24); scrollbar-width: none; -ms-overflow-style: none; }
    .dialog-close { position: absolute; top: 18px; right: 18px; }
    .detail-layout { gap: 18px; }
    .detail-head { padding: 28px; 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, .detail-skeleton { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 1120px) {
    .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: 31px; }
    .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; }
}

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