:root {
  --primary: #1c1c1e;
  --on-primary: #fff;
  --yellow: #ffd02f;
  --yellow-deep: #fcb900;
  --yellow-light: #fff8e0;
  --yellow-dark: #746019;
  --blue: #4262ff;
  --blue-pressed: #2a41b6;
  --coral: #ff9999;
  --coral-light: #ffc6c6;
  --coral-dark: #600000;
  --rose: #fde0f0;
  --teal: #0fbcb0;
  --teal-light: #c3faf5;
  --moss: #187574;
  --success: #00a86b;
  --canvas: #fff;
  --surface: #f7f8fa;
  --surface-soft: #fafbfc;
  --lavender: #f5f3ff;
  --hairline: #e0e2e8;
  --hairline-soft: #eef0f3;
  --hairline-strong: #c7cad5;
  --ink-deep: #050038;
  --ink: #1c1c1e;
  --slate: #555a6a;
  --steel: #6b6f7e;
  --stone: #8e91a0;
  --muted: #a5a8b5;
  --danger: #b42318;
  --navigation-height: 68px;
  --topbar-height: 72px;
  --shadow-modal: rgba(5, 0, 56, .12) 0 16px 48px -8px;
  font-family: "Roobert PRO", "Noto Sans SC", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { max-width: 100%; }
code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

.app-shell { min-height: 100vh; }
.site-header { position: sticky; z-index: 30; top: 0; height: var(--navigation-height); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--hairline-soft); backdrop-filter: blur(14px); }
.top-navigation { width: 100%; height: 100%; display: flex; align-items: center; gap: clamp(16px,2.4vw,36px); padding: 0 clamp(20px,2.5vw,40px); }
.brand { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; background: var(--yellow); color: var(--primary); font-size: 17px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(28,28,30,.05); }
.brand-mark.large { width: 54px; height: 54px; border-radius: 14px; font-size: 24px; }
.brand strong { font-size: 19px; font-weight: 650; letter-spacing: -.35px; }
.brand small { color: var(--stone); font-size: 10px; letter-spacing: .1px; }
.nav-groups { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-groups::-webkit-scrollbar { display: none; }
.nav-item { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border-radius: 9px; color: var(--slate); font-weight: 500; white-space: nowrap; transition: background .16s ease, color .16s ease; }
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.active { background: var(--primary); color: var(--on-primary); }
.nav-shortcuts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-shortcut { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 12px; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.nav-shortcut:hover { background: var(--surface); }
.nav-shortcut.active { background: var(--surface); border-color: var(--hairline-strong); }
.nav-shortcut.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.nav-shortcut.primary:hover { background: #2c2c34; }
.top-user { min-width: 0; display: flex; align-items: center; gap: 12px; padding-left: clamp(12px,2vw,28px); border-left: 1px solid var(--hairline-soft); }
.nav-groups + .top-user { margin-left: auto; }
.user-meta { min-width: 0; display: flex; flex-direction: column; }
.user-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-meta small { overflow: hidden; color: var(--stone); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { min-height: 34px; padding: 7px 12px; background: transparent; color: var(--slate); border: 1px solid var(--hairline); border-radius: 8px; white-space: nowrap; }
.logout-button:hover { background: var(--surface); color: var(--ink); }
.app-main { min-height: calc(100vh - var(--navigation-height)); }
.topbar { position: sticky; z-index: 20; top: var(--navigation-height); height: var(--topbar-height); display: flex; align-items: center; gap: 14px; padding: 0 clamp(20px, 2.5vw, 40px); background: rgba(255,255,255,.93); border-bottom: 1px solid var(--hairline-soft); backdrop-filter: blur(14px); }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.2px; }
.topbar .eyebrow { margin-bottom: 1px; }
.content { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px clamp(20px, 2.5vw, 40px) 56px; }
.tasks-page .content { max-width: none; }

.eyebrow { margin: 0 0 6px; color: var(--stone); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .65px; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.62); }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 28px; }
.page-intro.compact { align-items: center; margin-bottom: 20px; }
.page-intro > .range-filter { flex: 0 1 auto; justify-content: flex-end; align-items: center; }
.page-intro > .range-filter .pill-tabs.inline { flex-wrap: wrap; }
.page-intro h2 { max-width: 820px; margin: 0; color: var(--ink-deep); font-size: clamp(25px, 2.2vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.6px; }
.page-intro p:not(.eyebrow) { max-width: 740px; margin: 8px 0 0; color: var(--steel); font-size: 14px; }
.card { background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: 16px; padding: 24px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.card-header h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; }
.card-header .eyebrow { margin-bottom: 3px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border: 1px solid transparent; border-radius: 999px; font-weight: 500; line-height: 1.25; white-space: nowrap; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--primary); color: var(--on-primary); }
.button-primary:hover { background: #2c2c34; }
.button-blue { background: var(--blue); color: #fff; }
.button-blue:hover { background: var(--blue-pressed); }
.button-secondary { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.button-secondary:hover { background: var(--surface); }
.button-ghost { min-height: 36px; padding: 8px 12px; background: transparent; color: var(--ink); border-radius: 8px; }
.button-ghost:hover { background: var(--surface); }
.button.compact { min-height: 36px; padding: 8px 15px; font-size: 13px; }
.button.full { width: 100%; }
.button.disabled { opacity: .45; pointer-events: none; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.button-row.center { justify-content: center; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); border-radius: 999px; font-size: 16px; }
.icon-button:hover { background: var(--surface); }
.icon-button.danger { color: var(--danger); }
.text-link { color: var(--blue); font-weight: 500; }
.text-danger { color: var(--danger) !important; }
.muted { color: var(--stone); }

.metric-grid { display: grid; gap: 12px; margin-bottom: 20px; }
.metric-grid.six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.metric-grid.five { grid-template-columns: repeat(5, minmax(0,1fr)); }
.metric-card { min-height: 138px; display: flex; flex-direction: column; padding: 20px; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: 16px; }
.metric-card.yellow { background: var(--yellow); border-color: var(--yellow); }
.metric-card.coral { background: var(--coral-light); border-color: var(--coral-light); }
.metric-card.rose { background: var(--rose); border-color: var(--rose); }
.metric-card.teal { background: var(--teal-light); border-color: var(--teal-light); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--slate); font-size: 13px; font-weight: 500; }
.metric-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .55; }
.metric-card strong { margin-top: auto; font-size: clamp(30px, 3vw, 42px); font-weight: 500; line-height: 1; letter-spacing: -1px; }
.metric-card small { margin-top: 7px; color: var(--steel); font-size: 11px; }
.metric-card.yellow small, .metric-card.yellow .metric-top, .metric-card.coral small, .metric-card.teal small { color: rgba(28,28,30,.65); }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }
.task-stack, .mini-list, .recent-grid { display: flex; flex-direction: column; }
.task-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 18px; min-height: 68px; padding: 12px 4px 12px 16px; border-top: 1px solid var(--hairline-soft); }
.task-row:first-child { border-top: 0; }
.task-row:hover, .recent-item:hover { background: var(--surface-soft); }
.priority-bar { position: absolute; left: 0; width: 3px; height: 30px; border-radius: 999px; background: var(--hairline-strong); }
.priority-bar.priority-urgent { background: var(--danger); }
.priority-bar.priority-high { background: var(--coral); }
.priority-bar.priority-normal { background: var(--blue); }
.priority-bar.priority-low { background: var(--teal); }
.task-main { min-width: 0; display: flex; flex-direction: column; }
.task-main strong, .mini-list strong, .recent-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.task-main small, .mini-list small, .recent-item small { color: var(--stone); font-size: 11px; }
.task-deadline { color: var(--steel); font-size: 12px; }
.mini-list > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline-soft); }
.mini-list > a:first-child { border: 0; }
.mini-list span { min-width: 0; display: flex; flex-direction: column; }
.mini-list time { flex: 0 0 auto; color: var(--steel); font-size: 12px; }
.workload-list { display: flex; flex-direction: column; gap: 14px; }
.workload-row { display: grid; grid-template-columns: 86px 1fr 24px; align-items: center; gap: 12px; }
.workload-row > span { display: flex; flex-direction: column; }
.workload-row small { color: var(--stone); font-size: 10px; }
.progress { height: 7px; overflow: hidden; background: var(--surface); border-radius: 999px; }
.progress i { display: block; min-width: 4px; height: 100%; background: var(--primary); border-radius: inherit; }
.progress.coral i { background: var(--coral); }
.recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 20px; }
.recent-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; }
.recent-item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.recent-mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--yellow-light); border-radius: 10px; font-weight: 600; }
.recent-mark.tone-1 { background: var(--coral-light); }.recent-mark.tone-2 { background: var(--teal-light); }.recent-mark.tone-3 { background: var(--lavender); }

.work-summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.work-summary-grid.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.my-work-toolbar { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 16px; }
.my-work-intro { min-width: 0; }
.my-work-intro h2 { margin: 0; color: var(--ink-deep); font-size: clamp(25px, 2.2vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.6px; }
.my-work-intro > p:last-child { margin: 8px 0 0; color: var(--steel); font-size: 13px; }
.my-work-toolbar .work-summary-grid { gap: 10px; margin: 0; overflow-x: auto; }
.my-work-toolbar .work-summary-grid.cols-5 { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.my-work-toolbar .work-summary-grid.cols-4 { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.my-work-toolbar .work-summary-card { min-height: 104px; padding: 14px 16px; }
.my-work-toolbar .work-summary-card strong { font-size: 27px; }
.my-work-all-tasks { white-space: nowrap; }
.work-summary-card { min-height: 118px; display: flex; flex-direction: column; padding: 18px 20px; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: 14px; transition: border-color .16s ease, transform .16s ease; }
.work-summary-card:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.work-summary-card.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.work-summary-card > span { color: var(--slate); font-size: 12px; font-weight: 500; }
.work-summary-card strong { margin-top: auto; font-size: 30px; font-weight: 500; line-height: 1; }
.work-summary-card small { margin-top: 7px; color: var(--stone); font-size: 10px; }
.work-summary-card.active > span, .work-summary-card.active small { color: rgba(255,255,255,.68); }
.my-work-list-card { padding: 0; overflow: hidden; }
.my-work-list-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--hairline-soft); }
.my-work-list-header h3 { margin: 0; font-size: 18px; font-weight: 500; }
.my-work-list-header .eyebrow { margin-bottom: 2px; }
.my-work-list { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px; }
.my-work-card { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 24px; padding: 20px 22px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 14px; transition: border-color .16s ease; }
.my-work-card:hover { background: var(--surface-soft); border-color: var(--hairline-strong); }
.my-work-card-main { min-width: 0; display: flex; flex-direction: column; }
.my-work-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.my-work-card-no { flex: 0 0 auto; overflow: hidden; color: var(--ink-deep); font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.my-work-card-date { flex: 0 0 auto; color: var(--stone); font-size: 12px; white-space: nowrap; }
.my-work-sku-list { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
.my-work-sku-chip { display: flex; align-items: center; min-width: 0; gap: 8px; }
.my-work-sku-code { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.my-work-sku-thumb-empty { display: grid; place-items: center; width: 64px; height: 48px; flex: 0 0 64px; overflow: hidden; background: #fff; color: var(--stone); border: 1px dashed var(--hairline); border-radius: 7px; font-size: 12px; }
.my-work-sku-more { color: var(--stone); font-size: 12px; }
.my-work-req-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.my-work-req-item { display: inline-flex; }
.my-work-req-button { padding: 5px 14px; background: var(--surface); color: var(--slate); border: 1px solid var(--hairline); border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; }
.my-work-req-button:hover { color: var(--blue); border-color: var(--blue); }
.my-work-card-foot { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: auto; padding-top: 13px; color: var(--steel); font-size: 11px; }
.my-work-card-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 18px; padding-left: 22px; border-left: 1px solid var(--hairline-soft); }
.my-work-statuses { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; text-align: right; }
.my-work-statuses small { color: var(--stone); font-size: 10px; }
.my-work-actions { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
/* 返工按钮独占一行，宽度与确认按钮一致并左移让出去处理按钮的位置，文字正好居中压在确认按钮上方 */
.my-work-rework { flex: 0 0 110px; margin-right: 79px; }
.my-work-actions form { display: contents; }
.my-work-empty { min-height: 260px; }
.my-work-empty .button { margin-top: 10px; }
.people-work-sections { display: grid; gap: 16px; }
.people-role-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.people-role-tab { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; min-height: 94px; padding: 16px 18px; border: 1px solid var(--hairline-soft); border-radius: 14px; background: var(--canvas); color: var(--ink-deep); }
.people-role-tab:hover { border-color: var(--hairline-strong); }
.people-role-tab > span { font-size: 14px; font-weight: 500; }
.people-role-tab > strong { grid-row: span 2; align-self: center; font-size: 28px; font-weight: 500; }
.people-role-tab > small { color: var(--stone); font-size: 11px; }
.people-role-tab.active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.people-role-tab.active > small { color: rgba(255,255,255,.68); }
.people-work-section { padding: 0; overflow: hidden; }
.people-work-list { display: grid; }
.people-person-tabs { display: flex; gap: 8px; padding: 14px 22px; overflow-x: auto; border-bottom: 1px solid var(--hairline-soft); background: var(--surface-soft); }
.people-person-tab { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; padding: 9px 13px; border: 1px solid var(--hairline-soft); border-radius: 999px; background: var(--canvas); color: var(--slate); }
.people-person-tab span { font-size: 13px; font-weight: 500; }
.people-person-tab small { color: var(--stone); font-size: 10px; }
.people-person-tab.active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.people-person-tab.active small { color: rgba(255,255,255,.68); }
.people-work-person { border-top: 1px solid var(--hairline-soft); }
.people-work-person:first-child { border-top: 0; }
.people-work-person-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 22px; background: var(--surface-soft); }
.people-work-person-header > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.people-work-person-header strong { color: var(--ink-deep); font-size: 15px; }
.people-work-person-header code, .people-work-person-header > span { color: var(--stone); font-size: 11px; }
.people-work-table th:first-child, .people-work-table td:first-child { padding-left: 22px; }
.people-work-table th:last-child, .people-work-table td:last-child { padding-right: 22px; }
.people-work-none { padding: 18px 22px; color: var(--stone); font-size: 13px; }

.status-badge, .tag, .priority-pill, .count-badge, .substatus { display: inline-flex; align-items: center; width: max-content; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.status-badge { background: var(--surface); color: var(--slate); }
.status-pending { background: var(--yellow-light); color: var(--yellow-dark); }
.status-pending_assignment { background: var(--yellow-light); color: var(--yellow-dark); }
.status-pending_accept { background: var(--lavender); color: var(--blue); }
.status-in_progress { background: #e9efff; color: var(--blue-pressed); }
.status-pending_review { background: var(--teal-light); color: var(--moss); }
.status-rework { background: var(--coral-light); color: var(--coral-dark); }
.status-completed { background: #dff8ee; color: #087b51; }
.status-not_required { background: var(--surface); color: var(--stone); }
.status-waiting_shooting { background: var(--yellow-light); color: var(--yellow-dark); }
.status-paused { background: var(--yellow-light); color: var(--yellow-dark); }
.status-cancelled { background: var(--surface); color: var(--stone); }
.tag { background: var(--surface); color: var(--slate); }
.tag-yellow { background: var(--yellow-light); color: var(--yellow-dark); }
.tag-coral { background: var(--coral-light); color: var(--coral-dark); }
.tag-purple { background: var(--lavender); color: var(--blue); }
.count-badge { background: var(--surface); color: var(--steel); }
.priority-pill { background: var(--surface); color: var(--slate); }
.priority-pill.priority-urgent { background: #fee4e2; color: var(--danger); }
.priority-pill.priority-high { background: var(--coral-light); color: var(--coral-dark); }
.priority-pill.priority-low { background: var(--teal-light); color: var(--moss); }
.substatus { background: var(--surface); color: var(--steel); }

.pill-tabs { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tab { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 8px 16px; background: var(--canvas); color: var(--steel); border: 1px solid var(--hairline); border-radius: 999px; font-weight: 500; }
.pill-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pill-tabs.inline { margin: 0; }
.pill-tabs.analytics-tabs { margin: 6px 0 18px; }
.analytics-tab-panels { display: flex; flex-direction: column; gap: 18px; }
.analytics-tab-panel[hidden] { display: none; }
.analytics-tab-panel > .analytics-grid { margin: 0; }
.pill-tab .count { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: var(--surface-soft); color: var(--stone); font-size: 11px; font-weight: 600; line-height: 1; }
.pill-tab.active .count { background: rgba(255, 255, 255, .22); color: #fff; }
.pill-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pill-radio span { display: inline-flex; min-height: 36px; align-items: center; padding: 7px 15px; background: #fff; color: var(--steel); border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; }
.pill-radio input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }

.filter-card { margin-bottom: 16px; padding: 18px; }
.filter-grid { display: grid; grid-template-columns: 2fr repeat(4, minmax(130px,1fr)); gap: 12px; align-items: end; }
.filter-grid.task-filter-simple { grid-template-columns: minmax(280px,640px) auto; justify-content: start; }
.task-filter-simple .search-field, .task-filter-simple .filter-actions { grid-column: auto; }
.filter-grid.compact { grid-template-columns: repeat(2, minmax(180px, 260px)) auto; }
.filter-card.narrow { padding: 16px 18px; }
.filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .choice-field legend { color: var(--slate); font-size: 12px; font-weight: 500; }
.field > span b { color: var(--danger); font-weight: 500; }
.field input, .field select, .field textarea, .upload-form select, .upload-form input[type=file] { width: 100%; min-height: 44px; padding: 10px 13px; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: 8px; outline: none; transition: border .15s ease, box-shadow .15s ease; }
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .upload-form select:focus, .upload-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,98,255,.12); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field small, .form-help { margin: 0; color: var(--stone); font-size: 11px; }
.field.compact { flex-direction: row; align-items: center; }
.field.compact input { width: 150px; min-height: 36px; }
.form-grid { display: grid; gap: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid .span-2, .info-grid .span-2, .compact-info .span-2 { grid-column: span 2; }
.input-prefix { position: relative; }
.input-prefix span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--stone); }
.input-prefix input { padding-left: 34px; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 8px; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-checks label { position: relative; }
.chip-checks input { position: absolute; opacity: 0; pointer-events: none; }
.chip-checks span { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 15px; background: var(--canvas); color: var(--steel); border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; }
.chip-checks input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.chip-checks input:focus-visible + span { box-shadow: 0 0 0 3px rgba(66,98,255,.18); }

.table-card { padding: 0; overflow: hidden; }
.table-card > .card-header { padding: 20px 24px 0; }
.table-shell { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; color: var(--ink); font-size: 13px; }
.data-table th { padding: 12px 16px; background: var(--surface-soft); color: var(--stone); border-bottom: 1px solid var(--hairline); font-size: 11px; font-weight: 600; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { min-width: 90px; padding: 14px 16px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-soft); }
.data-table td:first-child { min-width: 170px; }
.task-table { width: 100%; min-width: 0; table-layout: fixed; }
.task-table th, .task-table td { padding: 12px; min-width: 0; }
.task-table th { white-space: normal; }
.task-table .col-task-no { width: 7%; }
.task-table .col-date { width: 6%; }
.task-table .col-department { width: 5%; }
.task-table .col-contact { width: 5.5%; }
.task-table .col-sku { width: 8%; }
.task-table .col-image { width: 7.5%; }
.task-table .col-requirement { width: 8%; }
.task-table .col-owner { width: 6.5%; }
.task-table .col-deadline { width: 5.5%; }
.task-table .col-path { width: 6.5%; }
.task-table .col-note { width: 6.5%; }
.task-table .col-action { width: 7%; }
/* 任务行统一最小高度（与带双按钮的操作列一致），避免行高参差 */
.task-table tbody > tr:not(.task-item-subrow) { height: 106px; }
.task-table td { vertical-align: top; word-break: break-word; }
.task-table td:first-child { min-width: 0; }
.task-table .row-actions { min-width: 0; }
.task-table .task-no-cell { position: sticky; left: 0; z-index: 2; background: var(--canvas); box-shadow: 7px 0 10px -12px rgba(5,0,56,.5); }
.task-no-stack { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.task-no-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.task-no-meta { display: flex; align-items: center; gap: 6px; }
.task-type-label { color: var(--stone); font-size: 11px; line-height: 1.4; }
.task-collapse-button { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; padding: 0; background: var(--surface); color: var(--stone); border: 1px solid var(--hairline); border-radius: 6px; cursor: pointer; }
.task-collapse-button:hover { color: var(--blue); border-color: var(--blue); }
.task-collapse-button svg { transition: transform .16s ease; }
.task-collapse-button.is-collapsed svg { transform: rotate(180deg); }
.task-table tbody tr:hover .task-no-cell { background: var(--surface-soft); }
.task-table thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface-soft); }
.task-table .icon-button { margin-top: 1px; }
/* 我的工作「去处理」跳转后，罩在目标任务整行上的闪烁边框 */
@keyframes task-flash-blink {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: 1; }
}
.task-flash-outline { position: absolute; z-index: 6; pointer-events: none; border: 3px solid rgba(66, 98, 255, .65); border-radius: 8px; opacity: 0; animation: task-flash-blink .9s ease-in-out 3; }
.task-table-shell { position: relative; max-width: 100%; }
.task-stack { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding-right: 2px; }
.task-stack-row { display: flex; align-items: flex-start; gap: 6px; min-height: 48px; min-width: 0; }
.task-stack-index { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; background: var(--surface); color: var(--stone); border-radius: 50%; font-size: 10px; line-height: 1; }
.task-stack-value { min-width: 0; overflow: visible; white-space: normal; word-break: break-word; }
.table-sku { display: flex; align-items: center; gap: 6px; min-width: 0; }
.table-sku .table-clamp { flex: 1 1 auto; }
.table-image { display: flex; align-items: center; gap: 6px; min-width: 0; }
.table-image .table-path { flex: 1 1 auto; }
.table-product-thumb-frame { display: block; width: 64px; height: 48px; flex: 0 0 64px; overflow: hidden; background: #fff; border: 1px solid var(--hairline); border-radius: 7px; }
.table-product-thumb { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; cursor: zoom-in; }
.table-product-thumb-frame:hover { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(66,98,255,.15); }
.table-clamp { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-clamp-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--table-line-clamp, 3); white-space: pre-line; word-break: break-word; }
.cell-expand-wrap { position: relative; }
.task-shared-requirement { padding-top: 8px !important; padding-bottom: 8px !important; vertical-align: top; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline); }
.task-table tbody tr:hover .task-shared-requirement { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.cell-stack > * { display: block; width: fit-content; }
.cell-stack > * + * { margin-top: 6px; }
.cell-expand-wrap .table-clamp-lines.is-truncated { padding-right: 0; }
.cell-expand { position: absolute; top: 10px; right: 8px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; color: var(--stone); background: var(--surface); border: 1px solid var(--hairline); border-radius: 5px; cursor: pointer; }
.task-shared-requirement .cell-expand { top: 6px; right: 0; width: 14px; height: 14px; border-radius: 4px; }
.cell-expand:hover { color: var(--blue); border-color: var(--blue); }
.cell-expand[hidden] { display: none; }
.cell-expand-popover { position: fixed; z-index: 90; max-width: min(420px, calc(100vw - 32px)); max-height: 320px; overflow: auto; padding: 8px 16px; background: #fff; color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: 12px; box-shadow: var(--shadow-modal); white-space: pre-line; font-size: 13px; line-height: 1.6; }
.cell-expand-plain { margin: 9px 0; }
.cell-expand-entry { padding: 10px 0; }
.cell-expand-entry + .cell-expand-entry, .cell-expand-entry + .cell-expand-plain, .cell-expand-plain + .cell-expand-entry { border-top: 1px solid var(--hairline-soft); }
.cell-expand-entry-head { display: flex; align-items: center; gap: 8px; }
.cell-expand-entry-tag { flex: 0 0 auto; padding: 2px 9px; background: var(--surface); color: var(--slate); border-radius: 999px; font-size: 11px; font-weight: 600; }
.cell-expand-entry-tag.is-rework { background: var(--coral-light); color: var(--coral-dark); }
.cell-expand-entry-meta { color: var(--stone); font-size: 11px; }
.cell-expand-entry-body { margin-top: 5px; white-space: pre-line; }
.table-path { display: block; max-width: 100%; padding: 0; overflow: hidden; background: transparent; color: var(--blue); border: 0; font-size: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.table-path:hover { color: var(--blue-pressed); text-decoration: underline; }
.table-stack-path { min-width: 0; }
.table-path-cell { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.table-path-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.table-path-label { align-self: flex-start; padding: 1px 6px; background: var(--surface); color: var(--stone); border: 1px solid var(--hairline); border-radius: 5px; font-size: 10px; line-height: 1.5; }
.table-path-row > .path-actions { flex-wrap: nowrap; }
.table-path-value { display: block; min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.path-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.path-action { padding: 0; background: transparent; color: var(--blue); border: 0; font-size: 11px; font-weight: 600; cursor: pointer; }
.path-action:hover { color: var(--blue-pressed); text-decoration: underline; }
/* 备注列 td 必须保持 table-cell，rowspan 才会生效；改成 flex 会被匿名单元格取代导致无法跨行。 */
.task-note-cell { min-width: 0; }
.task-note-cell .table-clamp-lines { width: 100%; }
.task-note-cell .cell-expand { top: 0; right: 0; width: 14px; height: 14px; border-radius: 4px; }
.task-note-cell.note-updated { background: var(--coral-light); }
.task-note-cell .note-edit-button { position: absolute; left: 0; bottom: 0; border-radius: 5px 0 0 0; }
.note-edit-button { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; padding: 0; color: var(--stone); background: var(--surface); border: 1px solid var(--hairline); border-radius: 5px; cursor: pointer; }
.note-edit-button svg { display: block; }
.note-edit-button:hover { color: var(--blue); border-color: var(--blue); }
.cell-expand-popover-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline-soft); color: var(--stone); font-size: 11px; }
.detail-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.detail-note.note-updated { padding: 10px 12px; background: var(--coral-light); border-radius: 10px; }
.detail-note-text { white-space: pre-line; }
.danger-text { color: var(--coral-dark) !important; }
.row-actions { display: flex; min-width: 108px; flex-direction: column; align-items: stretch; gap: 6px; }
.row-actions.inline { flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; }
.row-actions form { display: contents; }
.row-actions .button { width: 100%; justify-content: center; white-space: nowrap; }
.row-actions.inline .button { width: auto; }
.filter-hint { margin: 12px 0 0; color: var(--stone); font-size: 11px; }
.table-primary { color: var(--ink-deep); font-weight: 600; }
.table-secondary { display: block; margin-top: 2px; color: var(--stone); font-size: 11px; font-weight: 400; }
.clamp { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-toolbar { display: flex; justify-content: space-between; padding: 14px 18px; color: var(--stone); border-bottom: 1px solid var(--hairline-soft); font-size: 11px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--hairline-soft); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--steel); text-align: center; }
.empty-state.compact { min-height: 120px; gap: 4px; padding: 20px; }
.empty-state.large { min-height: 460px; gap: 10px; }
.empty-state.large h2, .empty-state.large h3, .empty-state.compact strong { margin: 0; color: var(--ink); font-weight: 500; }
.empty-state p, .empty-state span { margin: 0; }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px !important; background: var(--surface); color: var(--stone); border-radius: 999px; font-size: 20px; }

.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.form-main { display: flex; flex-direction: column; gap: 18px; }
.form-aside { position: sticky; top: 94px; display: flex; flex-direction: column; gap: 14px; }
.form-section { display: flex; flex-direction: column; gap: 22px; }
.section-heading { display: flex; align-items: center; gap: 13px; }
.section-heading > .button { margin-left: auto; }
.section-heading h3 { margin: 0; font-size: 18px; font-weight: 500; }
.section-heading p { margin: 2px 0 0; color: var(--stone); font-size: 12px; }
.section-number { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; }
.paste-box { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--hairline-soft); border-radius: 12px; }
.sku-editor { display: flex; flex-direction: column; overflow-x: auto; }
.sku-row { min-width: 620px; display: grid; grid-template-columns: 30px minmax(130px,1fr) minmax(170px,1.3fr) minmax(130px,1fr) 36px; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--hairline-soft); }
.sku-row input { min-width: 0; height: 40px; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: 8px; outline: none; }
.sku-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,98,255,.12); }
.sku-header { color: var(--stone); border-top: 0; font-size: 11px; font-weight: 600; }
.drag-handle { width: 28px; height: 36px; padding: 0; background: transparent; color: var(--stone); border: 0; cursor: grab; }
.sku-row.dragging { opacity: .45; }
.tip-card { padding: 22px; }
.tip-card.yellow { background: var(--yellow); border-color: var(--yellow); }
.tip-card h3 { margin: 10px 0 5px; font-size: 17px; font-weight: 500; }
.tip-card p { margin: 0; color: var(--slate); font-size: 12px; }
.tip-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 600; }

.task-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 2px 0 20px; padding: 25px 28px; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: 20px; }
.task-hero h2 { max-width: 900px; margin: 10px 0 4px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.5px; }
.task-hero p { margin: 0; color: var(--stone); font-size: 12px; }
.task-kicker, .task-hero-actions, .tag-list { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sticky-tabs { position: sticky; z-index: 10; top: calc(var(--topbar-height) + 8px); width: max-content; max-width: 100%; padding: 6px; background: rgba(247,248,250,.93); border-radius: 999px; backdrop-filter: blur(12px); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail-aside { position: sticky; top: 128px; display: flex; flex-direction: column; gap: 14px; }
.detail-section { scroll-margin-top: 140px; }
.module-work-card { display: flex; flex-direction: column; gap: 16px; }
.module-owner { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline-soft); }
.module-owner > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.module-owner small { color: var(--stone); font-size: 10px; }
.module-owner strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.requirement-copy { min-height: 66px; padding: 12px; background: var(--surface-soft); color: var(--slate); border-radius: 10px; white-space: pre-line; }
.path-field { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px; background: var(--surface-soft); border-radius: 10px; }
.path-field > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.path-field small { color: var(--stone); font-size: 10px; }
.path-field code { display: block; max-width: 100%; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.module-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.module-actions form { display: contents; }
.module-actions .button { flex: 1 1 150px; }
.item-path-actions { align-self: end; }
.item-path-actions .path-copy { padding: 0; background: transparent; color: var(--blue); border: 0; font-size: 10px; cursor: pointer; }
.item-path-actions .path-copy:hover { text-decoration: underline; }
.milestone-list { margin: 0; padding: 0; list-style: none; }
.milestone-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hairline-soft); }
.milestone-list li:first-child { border-top: 0; }
.milestone-list span { color: var(--stone); font-size: 11px; }
.milestone-list time { color: var(--slate); font-size: 11px; text-align: right; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; margin: 0; }
.info-grid > div { padding: 14px 0; border-top: 1px solid var(--hairline-soft); }
.info-grid > div:nth-child(-n+2) { border-top: 0; }
.info-grid dt, .compact-info dt, .milestones dt { color: var(--stone); font-size: 11px; }
.info-grid dd, .compact-info dd, .milestones dd { margin: 4px 0 0; font-weight: 500; }
.item-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.item-card { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--hairline-soft); border-radius: 12px; }
.item-order { display: grid; place-items: center; width: 34px; height: 34px; background: #fff; color: var(--stone); border: 1px solid var(--hairline); border-radius: 9px; font-size: 11px; }
.item-card strong { font-weight: 600; }
.item-card p { margin: 1px 0; color: var(--slate); }
.item-card small { color: var(--stone); font-size: 11px; }
.path-copy { padding: 5px 8px; background: transparent; color: var(--blue); border: 0; font-size: 11px; }
.detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; scroll-margin-top: 140px; }
.requirement-group { margin-top: 14px; }
.requirement-group > small { display: block; margin-bottom: 7px; color: var(--stone); }
.requirement-copy { min-height: 90px; margin-top: 16px; padding: 14px; background: var(--surface-soft); border-radius: 10px; color: var(--slate); white-space: pre-wrap; }
.path-field, .path-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.path-field { margin-top: 14px; padding: 12px; background: var(--surface); border-radius: 10px; }
.path-field > span, .path-banner > span { min-width: 0; display: flex; flex-direction: column; }
.path-field small, .path-banner small { color: var(--stone); font-size: 10px; }
.path-banner { padding: 18px 20px; }
.submission-stack { display: flex; flex-direction: column; gap: 12px; }
.submission-card { display: grid; grid-template-columns: 110px minmax(0,1fr); overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; }
.submission-version { display: flex; flex-direction: column; padding: 18px; background: var(--primary); color: #fff; }
.submission-version strong { font-size: 15px; }
.submission-version span { margin-top: 4px; color: var(--on-dark-muted); font-size: 11px; }
.submission-body { min-width: 0; padding: 16px; }
.submission-body > p { margin: 10px 0 0; color: var(--slate); }
.submission-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--stone); font-size: 11px; }
.review-result, .rework-note { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; }
.review-result.pass { background: #e9fbf4; color: #087b51; }.review-result.rework, .rework-note { background: #fff1f0; color: var(--coral-dark); }
.review-result span, .rework-note span:last-child { color: var(--slate); }
.version-list { display: flex; flex-direction: column; }
.version-list article { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hairline-soft); }
.version-list article:first-child { border-top: 0; }
.version-number { display: grid; place-items: center; width: 42px; height: 42px; background: var(--yellow-light); color: var(--yellow-dark); border-radius: 11px; font-weight: 600; }
.version-list p, .version-list small { margin: 1px 0 0; color: var(--stone); font-size: 11px; }
.timeline { position: relative; margin: 0; padding: 0 0 0 12px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 18px; top: 12px; bottom: 12px; width: 1px; background: var(--hairline); }
.timeline li { position: relative; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 14px; padding: 9px 0; }
.timeline-dot { z-index: 1; width: 13px; height: 13px; margin-top: 4px; background: #fff; border: 3px solid var(--primary); border-radius: 999px; }
.timeline p, .timeline small { margin: 2px 0 0; color: var(--stone); font-size: 11px; }
.action-card .card-header { margin-bottom: 14px; }
.owner-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--hairline-soft); }
.owner-row:first-of-type { border-top: 0; }
.owner-row > span:last-child { display: flex; flex-direction: column; }
.owner-row small { color: var(--stone); font-size: 10px; }
.owner-row strong { font-size: 13px; }
.owner-row em { color: var(--steel); font-size: 9px; font-style: normal; }
.tone-coral { background: var(--coral-light); color: var(--coral-dark); }.tone-teal { background: var(--teal-light); color: var(--moss); }
.action-stack { display: flex; flex-direction: column; gap: 9px; }
.milestones dl { margin: 0; }
.milestones dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline-soft); }
.milestones dl > div:first-child { border-top: 0; }
.milestones dd { font-size: 11px; text-align: right; }
.metric-note { display: flex; flex-direction: column; margin-top: 14px; padding: 12px; border-radius: 10px; }
.metric-note.success { background: #e9fbf4; color: #087b51; }.metric-note.danger { background: #fff1f0; color: var(--danger); }
.metric-note span { margin-top: 2px; color: var(--slate); font-size: 10px; }
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-list > span { display: flex; flex-direction: column; padding: 8px; background: var(--surface); border-radius: 8px; }
.file-list small { color: var(--stone); font-size: 10px; }
.upload-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.upload-form select, .upload-form input[type=file] { min-height: 38px; padding: 7px 9px; font-size: 11px; }

.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.review-card { display: flex; flex-direction: column; }
.review-card-top, .review-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card-top time { color: var(--stone); font-size: 11px; }
.review-card h3 { margin: 16px 0 2px; font-size: 17px; font-weight: 500; }
.review-card > p { margin: 0; color: var(--stone); font-size: 11px; }
.compact-info { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; padding: 14px; background: var(--surface-soft); border-radius: 10px; }
.compact-info dd { font-size: 12px; }
.review-card-actions { margin-top: auto; }
.range-filter { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.analytics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.rate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.rate-grid > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rate-ring { --value: 0; display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 12px; background: conic-gradient(var(--primary) calc(var(--value) * 1%), var(--surface) 0); border-radius: 999px; position: relative; }
.rate-ring::after { content: ""; position: absolute; inset: 10px; background: #fff; border-radius: inherit; }
.rate-ring.coral { background: conic-gradient(var(--coral) calc(var(--value) * 1%), var(--surface) 0); }.rate-ring.teal { background: conic-gradient(var(--teal) calc(var(--value) * 1%), var(--surface) 0); }
.rate-ring b { z-index: 1; font-size: 21px; font-weight: 500; }
.rate-grid strong { font-weight: 500; }.rate-grid small { color: var(--stone); font-size: 10px; }
.stat-list { margin: 0; }
.stat-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hairline-soft); }
.stat-list > div:first-child { border: 0; }
.stat-list dt { color: var(--slate); }.stat-list dd { margin: 0; font-size: 18px; font-weight: 500; }
.bar-list { display: flex; flex-direction: column; gap: 13px; }
.bar-list > div { display: grid; grid-template-columns: 100px 1fr 28px; align-items: center; gap: 10px; }
.bar-list > div > span { display: flex; flex-direction: column; }.bar-list small { color: var(--stone); font-size: 10px; }
.analytics-table { margin-bottom: 16px; }

.master-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.master-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.master-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 13px 16px; border: 1px solid var(--hairline-soft); border-radius: 12px; background: var(--canvas); color: var(--slate); font-weight: 500; }
.master-tab span { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); color: var(--stone); font-size: 11px; }
.master-tab.active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.master-tab.active span { background: rgba(255,255,255,.13); color: var(--on-primary); }
.master-tab-panel { min-height: 420px; }
.master-list { display: flex; flex-direction: column; }
.master-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline-soft); }
.master-list > div:first-child { border: 0; }
.master-list span:first-child { display: flex; flex-direction: column; }.master-list small { color: var(--stone); font-size: 10px; }.master-list i { font-style: normal; }
.reason-columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.rank-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.reason-columns h4 { margin: 0 0 8px; font-size: 13px; }
.reason-columns > div > span { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--hairline-soft); }
.reason-columns > div > .reason-option { align-items: center; flex-direction: row; justify-content: space-between; gap: 10px; }
.reason-option > span { display: flex; min-width: 0; flex-direction: column; }
.reason-option form, .master-list form { flex: 0 0 auto; margin: 0; }
.reason-columns small { color: var(--stone); font-size: 10px; }
.toggle-row { display: flex; gap: 18px; padding: 12px; background: var(--surface); border-radius: 10px; }

.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; background: #fff; border: 0; border-radius: 20px; box-shadow: var(--shadow-modal); user-select: none; -webkit-user-select: none; }
.modal input, .modal textarea { user-select: text; -webkit-user-select: text; }
html.modal-lock, body.modal-lock { overflow: hidden; }
.modal.wide { width: min(680px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(5,0,56,.38); backdrop-filter: blur(2px); }
.modal > form { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-header h3 { margin: 0; font-size: 21px; font-weight: 500; }
.modal-actions { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; gap: 10px; margin: 6px -24px -24px; padding: 16px 24px; background: #fff; border-top: 1px solid var(--hairline-soft); }
.modal.task-create-modal { width: min(900px, calc(100vw - 32px)); height: min(820px, calc(100vh - 40px)); max-height: calc(100vh - 40px); overflow: hidden; }
.task-create-modal > form { height: 100%; min-height: 0; gap: 0; overflow: hidden; }
.task-create-modal .modal-header { flex: 0 0 auto; padding-bottom: 18px; }
.modal-subtitle { margin: 4px 0 0; color: var(--steel); font-size: 12px; }
.task-create-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding: 2px 4px 4px 0; }
.modal-section { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--surface-soft); border: 1px solid var(--hairline-soft); border-radius: 12px; }
.modal-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.modal-section-heading .eyebrow { margin: 0; }
.modal-section-heading h4 { margin: 0; color: var(--ink-deep); font-size: 18px; font-weight: 500; }
.modal-section-heading > .form-help { margin-left: auto; }
.field-readonly { display: flex; min-height: 44px; flex-direction: column; justify-content: center; padding: 8px 13px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
.field-readonly strong { font-weight: 500; line-height: 1.3; }
.field-readonly small { margin-top: 2px; color: var(--stone); font-size: 10px; }
.task-create-modal .task-sku-editor { overflow: visible; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px; }
.task-create-modal .task-sku-row, .task-create-modal .sku-header { min-width: 0; grid-template-columns: 88px minmax(180px,1fr) 36px; gap: 12px; padding: 10px 12px; }
.task-create-modal .sku-header { grid-template-columns: 88px minmax(180px,1fr) auto; }
.task-create-modal .sku-header .sku-add-button { width: auto; padding: 4px 12px; font-size: 11px; }
.task-create-modal .sku-header { background: var(--surface); border-radius: 12px 12px 0 0; }
.task-create-modal .task-sku-row input[name="sku"] { width: 100%; min-width: 0; }
.sku-image-picker { display: block; min-width: 0; cursor: pointer; }
.sku-image-picker > input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.sku-image-preview { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; background: var(--surface); color: var(--stone); border: 1px dashed var(--hairline-strong); border-radius: 9px; font-size: 11px; }
.sku-image-preview:hover { border-color: var(--blue); color: var(--blue); }
.sku-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.sku-add-button { width: 100%; }
.task-create-modal > form > .modal-actions { flex: 0 0 auto; position: static; margin: 16px -24px -24px; }
.module-toggles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.module-toggle { min-height: 68px; display: flex; align-items: flex-start; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px; }
.module-toggle:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,98,255,.1); }
.module-toggle.active-panel { background: var(--lavender); }
.module-toggle > input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 17px 0 0 15px; accent-color: var(--blue); cursor: pointer; }
.module-toggle > button { flex: 1; min-width: 0; min-height: 66px; display: flex; align-items: flex-start; padding: 13px 14px; background: transparent; color: inherit; border: 0; text-align: left; cursor: pointer; }
.module-toggle[data-create-module-choice="shooting"] > input[type="checkbox"] { accent-color: var(--coral); }
.module-toggle[data-create-module-choice="shooting"]:has(input:checked) { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,153,153,.18); }
.module-toggle[data-create-module-choice="shooting"].active-panel { background: #fff1f0; }
.module-toggle[data-create-module-choice="shooting"] strong { color: #b3362f; }
.module-toggle[data-create-module-choice="design"] > input[type="checkbox"] { accent-color: var(--blue); }
.module-toggle[data-create-module-choice="design"]:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,98,255,.12); }
.module-toggle[data-create-module-choice="design"].active-panel { background: var(--lavender); }
.module-toggle[data-create-module-choice="design"] strong { color: var(--blue); }
.module-toggle span { display: flex; flex-direction: column; gap: 3px; }
.module-toggle strong { font-weight: 500; }
.module-toggle small { color: var(--stone); font-size: 11px; line-height: 1.4; }
.module-fields { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px; }
.module-fields[hidden] { display: none; }
.module-fields[data-create-module-panel="shooting"] { background: #fff1f0; border-color: #f2c9c5; }
.module-fields[data-create-module-panel="design"] { background: var(--lavender); border-color: #ddd7f5; }
.module-fields-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-fields-heading h5 { margin: 0; font-size: 14px; font-weight: 500; }
.rework-fields { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff7f6; border: 1px solid #fbd4d4; border-radius: 12px; }
.alert { padding: 11px 13px; border-radius: 9px; font-size: 12px; }
.alert.error { background: #fff1f0; color: var(--danger); border: 1px solid #fbd4d4; }
.alert.warning { background: var(--yellow-light); color: var(--yellow-dark); border: 1px solid #f8e9a6; }
.toast { position: fixed; z-index: 60; top: 84px; right: 24px; min-width: 280px; max-width: calc(100vw - 48px); display: grid; grid-template-columns: 24px minmax(0,1fr) 28px; align-items: center; gap: 10px; padding: 12px 14px; background: var(--primary); color: #fff; border-radius: 12px; box-shadow: var(--shadow-modal); animation: toast-in .2s ease-out; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(5,0,56,.72); backdrop-filter: blur(2px); animation: toast-in .15s ease-out; }
.lightbox img { max-width: min(90vw, 1400px); max-height: 85vh; object-fit: contain; background: #fff; border-radius: 10px; box-shadow: var(--shadow-modal); }
.lightbox-close { position: absolute; top: 16px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.24); }
.toast > span { display: grid; place-items: center; width: 22px; height: 22px; background: var(--success); border-radius: 999px; font-size: 11px; }
.toast.error > span { background: var(--danger); }
.toast button { background: transparent; color: #fff; border: 0; font-size: 18px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.login-body { background: #fff; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(480px,1.08fr) minmax(420px,.92fr); }
.login-brand-panel { position: relative; overflow: hidden; display: flex; align-items: center; padding: clamp(50px,7vw,110px); background: var(--primary); color: #fff; }
.login-brand-panel::after { content: ""; position: absolute; width: 430px; height: 430px; right: -170px; bottom: -180px; background: var(--yellow); border-radius: 50%; opacity: .95; }
.login-brand-content { position: relative; z-index: 1; width: min(650px,100%); }
.login-brand-content .eyebrow { margin-top: 26px; }
.login-brand-content h1 { margin: 10px 0 20px; font-size: clamp(42px,5vw,68px); font-weight: 500; line-height: 1.06; letter-spacing: -1.7px; }
.login-brand-content > p:last-of-type { max-width: 520px; color: rgba(255,255,255,.68); font-size: 16px; }
.workflow-illustration { position: relative; height: 220px; margin-top: 48px; }
.sticky { position: absolute; z-index: 2; width: 148px; height: 112px; padding: 20px; color: var(--ink); border-radius: 4px; font-size: 20px; font-weight: 500; box-shadow: rgba(0,0,0,.15) 0 14px 26px -12px; transform: rotate(-3deg); }
.sticky small { font-size: 11px; font-weight: 400; }.sticky.yellow { left: 0; top: 20px; background: var(--yellow); }.sticky.coral { left: 34%; top: 72px; background: var(--coral-light); transform: rotate(2deg); }.sticky.teal { left: 67%; top: 5px; background: var(--teal-light); transform: rotate(-1deg); }
.flow-line { position: absolute; z-index: 1; left: 90px; right: 90px; top: 87px; height: 2px; background: rgba(255,255,255,.35); }
.login-form-panel { display: grid; place-items: center; padding: 40px; }
.login-card { width: min(410px,100%); display: flex; flex-direction: column; gap: 18px; }
.login-heading { margin-bottom: 10px; }
.login-heading h2 { margin: 2px 0 5px; font-size: 36px; font-weight: 500; letter-spacing: -.6px; }
.login-heading > p:last-child { margin: 0; color: var(--steel); }
.brand-mobile { display: none; }

@media (max-width: 1280px) {
  .metric-grid.six { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .filter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .filter-grid.task-filter-grid { grid-template-columns: minmax(0,1fr) auto; }
  .search-field { grid-column: span 2; }
  .review-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1080px) {
  .brand small, .top-user .user-meta small { display: none; }
  .top-navigation { gap: 14px; }
  .nav-item { padding-inline: 10px; }
  .nav-shortcuts { gap: 5px; }
  .nav-shortcut { padding-inline: 9px; }
  .metric-grid.five { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid .span-2, .dashboard-grid .span-3 { grid-column: span 2; }
  .form-layout, .detail-layout { grid-template-columns: 1fr; }
  .form-aside, .detail-aside { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .action-card, .milestones { min-width: 0; }
  .analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-grid .span-2 { grid-column: span 2; }
  .reason-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .work-summary-grid, .work-summary-grid.cols-4 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .my-work-toolbar { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) auto; gap: 12px; }
  .my-work-toolbar .work-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .my-work-toolbar .work-summary-card { min-height: 96px; padding: 12px; }
}

@media (max-width: 900px) {
  :root { --navigation-height: 108px; --topbar-height: 64px; }
  .top-navigation { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: 48px 60px; grid-template-areas: "brand user" "nav nav"; gap: 0 16px; padding-inline: 16px; }
  body:has(.site-header.has-shortcut) { --navigation-height: 156px; }
  .site-header.has-shortcut .top-navigation { grid-template-rows: 48px 48px 60px; grid-template-areas: "brand user" "shortcuts shortcuts" "nav nav"; }
  .brand { grid-area: brand; }
  .nav-groups { grid-area: nav; width: calc(100% + 32px); margin-inline: -16px; padding: 0 16px; align-self: stretch; border-top: 1px solid var(--hairline-soft); }
  .nav-shortcuts { grid-area: shortcuts; align-self: stretch; justify-content: flex-end; width: calc(100% + 32px); margin-inline: -16px; padding: 0 16px; border-top: 1px solid var(--hairline-soft); }
  .top-user { grid-area: user; justify-self: end; border-left: 0; padding-left: 0; }
  .topbar .eyebrow { display: none; }
  .content { padding-top: 22px; }
  .my-work-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .my-work-toolbar .work-summary-grid { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .my-work-all-tasks { grid-column: 2; grid-row: 1; }
  .login-layout { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .brand-mobile { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; font-size: 18px; font-weight: 600; }
  .login-form-panel { min-height: 100vh; }
}

@media (max-width: 720px) {
  .content { padding-inline: 14px; }
  .topbar { padding-inline: 14px; }
  .page-intro, .task-hero { align-items: flex-start; flex-direction: column; }
  .task-hero-actions { width: 100%; }
  .task-hero-actions .button { flex: 1; }
  .metric-grid.six, .metric-grid.five { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .span-2, .dashboard-grid .span-3 { grid-column: span 1; }
  .recent-grid, .detail-columns, .item-grid, .form-grid.two, .form-grid.three, .info-grid, .review-grid, .analytics-grid, .master-grid, .form-aside, .detail-aside { grid-template-columns: 1fr; }
  .analytics-grid .span-2, .master-grid .span-2, .form-grid .span-2, .info-grid .span-2 { grid-column: span 1; }
  .filter-grid, .filter-grid.compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-grid.task-filter-grid { grid-template-columns: 1fr; }
  .search-field { grid-column: span 2; }
  .filter-actions { grid-column: span 2; }
  .task-filter-grid .search-field, .task-filter-grid .filter-actions { grid-column: span 1; }
  .task-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .task-deadline { grid-column: 1; }
  .work-summary-grid, .work-summary-grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .my-work-toolbar .work-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-work-card { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .my-work-card-side { align-items: stretch; padding: 15px 0 0; border-top: 1px solid var(--hairline-soft); border-left: 0; }
  .my-work-statuses { align-items: flex-start; text-align: left; }
  .my-work-actions { justify-content: flex-start; }
  .submission-card { grid-template-columns: 1fr; }
  .submission-version { flex-direction: row; justify-content: space-between; }
  .rate-grid { grid-template-columns: 1fr; }
  .reason-columns { grid-template-columns: 1fr; }
  .range-filter { align-items: stretch; flex-direction: column; }
  .field.compact { justify-content: space-between; }
  .field.compact input { width: 65%; }
  .sticky-actions { position: static; }
  .modal.task-create-modal { width: calc(100vw - 20px); height: calc(100vh - 20px); max-height: calc(100vh - 20px); border-radius: 16px; }
  .task-create-modal > form { padding: 18px; }
  .task-create-modal > form > .modal-actions { margin: 16px -18px -18px; padding: 14px 18px; }
  .task-create-modal .module-toggles { grid-template-columns: 1fr; }
  .task-create-modal .task-sku-editor { padding-bottom: 4px; }
  .task-create-modal .task-sku-row, .task-create-modal .sku-header { min-width: 0; grid-template-columns: 80px minmax(150px,1fr) 36px; }
  .task-create-modal .sku-header { grid-template-columns: 80px minmax(150px,1fr) auto; }
  .sku-image-preview { width: 64px; height: 64px; }
}

@media (max-width: 480px) {
  .topbar h1 { font-size: 17px; }
  .page-intro h2 { font-size: 26px; }
  .metric-card { min-height: 122px; padding: 16px; }
  .metric-card strong { font-size: 32px; }
  .filter-grid, .filter-grid.compact { grid-template-columns: 1fr; }
  .search-field, .filter-actions { grid-column: span 1; }
  .filter-grid.task-filter-simple { grid-template-columns: 1fr; }
  .card { padding: 18px; border-radius: 14px; }
  .table-card { padding: 0; }
  .work-summary-grid, .work-summary-grid.cols-4 { grid-template-columns: 1fr; }
  .my-work-toolbar { grid-template-columns: 1fr; }
  .my-work-toolbar .work-summary-grid, .my-work-all-tasks { grid-column: 1; }
  .my-work-all-tasks { grid-row: 2; justify-self: start; }
  .my-work-toolbar .work-summary-grid { grid-row: 3; grid-template-columns: 1fr; }
  .work-summary-card { min-height: 94px; }
  .task-hero { padding: 20px; }
  .form-section { padding: 18px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading > .button { margin-left: 49px; }
  .paste-box { grid-template-columns: 1fr; }
  .login-form-panel { padding: 24px; }
  .login-heading h2 { font-size: 30px; }
  .modal > form { padding: 20px; }
  .modal-actions { bottom: -20px; margin: 4px -20px -20px; padding: 14px 20px; }
  .toast { top: 72px; right: 12px; min-width: 0; max-width: calc(100vw - 24px); }
  .modal.task-create-modal { width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: calc(100vh - 16px); }
  .task-create-modal > form { padding: 16px; }
  .task-create-modal > form > .modal-actions { margin: 16px -16px -16px; padding: 12px 16px; }
  .task-create-modal .modal-section { padding: 14px; }
  .task-create-modal .modal-section-heading > .form-help { width: 100%; margin-left: 0; }
}

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