/* Shared surfaces keep every view and dialog consistent with the selected theme. */
:root {
  --paper: #f3f6f7; --surface: #fff; --ink: #263734; --muted: #647771;
  --line: #d8e2df; --green: #17785e; --green-soft: #e3f2eb;
  --yellow: #ca951f; --blue: #488bc0; --red: #c34e60;
  --accent: #e7b848; --on-primary: #fff; --hover: #edf4f1;
  --texture: none; --shadow: 0 5px 16px #243e3410;
}
body { background-image: var(--texture); line-height: 1.5; }
/* Authentication and account security share the same theme tokens as the workspace. */
.login-overlay { overflow-y: auto; }
.login-panel { color: var(--ink); box-shadow: var(--shadow); margin-block: auto; }
.login-panel > label + label, #registerFields { margin-top: 16px; }
.login-panel .auth-description { margin: -14px 0 24px; color: var(--muted); font-size: 13px; }
.login-panel .form-error { color: var(--red); overflow-wrap: anywhere; }
.login-panel .field-hint { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.6; }
.account-security { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-security h3 { margin: 0 0 8px; }
.account-security p, .account-security details { color: var(--muted); font-size: 13px; line-height: 1.7; }
.security-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.totp-provision { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--hover); }
.totp-provision > p:first-child { margin-top: 0; }
.totp-provision summary { cursor: pointer; color: var(--green); font-weight: 600; }
#totpSecret { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; letter-spacing: .08em; }
.security-status { min-height: 20px; overflow-wrap: anywhere; }
[data-theme="pixel"] :is(.login-panel, .totp-provision, #totpSecret) { border-radius: 0; }
[data-theme="cartoon"] :is(.login-panel, .totp-provision) { border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
@media (max-width: 520px) {
  .login-panel { padding: 24px; }
  .totp-provision { padding: 14px; }
  .security-actions .button { flex: 1 1 140px; }
}
.topbar { height: 76px; background: var(--surface); padding: 0 28px; gap: 16px; }
.brand-mark { background: var(--green); box-shadow: 3px 3px 0 var(--accent); }
.brand-button strong { font-size: 19px; }
.top-actions { gap: 10px; }
.theme-picker { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.theme-picker select { width: 144px; padding: 8px; min-height: 38px; font-size: 12px; }
.button, .icon-button { transition: background .15s, border-color .15s, box-shadow .15s; }
.button:hover, .icon-button:hover, .task-item:hover { background: var(--hover); border-color: var(--green); }
.button.primary { color: var(--on-primary); }
.button.primary:hover { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
[aria-current="page"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
input, select, textarea, .dialog, .login-panel { background: var(--surface); border-color: var(--line); }
label { color: var(--ink); }
button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
input[type="checkbox"] { accent-color: var(--green); }
.workspace { grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.sidebar { padding: 28px 16px; position: sticky; top: 76px; height: calc(100vh - 76px); scrollbar-width: thin; }
.sidebar-heading { align-items: center; margin-bottom: 12px; }
.sidebar-heading .eyebrow { margin-bottom: 6px; }
.sidebar-heading h2 { font-size: 17px; }
.filter-row { margin-inline: 0; }
.filter-row input { min-width: 0; font-size: 13px; }
.task-list { gap: 8px; }
.task-item { border-color: var(--line); background: var(--surface); padding-block: 14px; }
.task-item.selected { border-color: var(--green); }
.main-content { padding: 30px 32px 64px; max-width: 1600px; width: 100%; margin: 0 auto; }
.page-heading h1 { font-size: 28px; overflow-wrap: anywhere; }
.page-heading { margin-bottom: 20px; align-items: center; }
.page-heading p { font-size: 13px; }
.eyebrow { color: var(--green); }
.overview-heading { min-height: 110px; }
.desk-art { width: 160px; height: 105px; flex: 0 0 160px; position: relative; overflow: hidden; }
.art-sheet { position: absolute; width: 69px; height: 82px; left: 30px; top: 10px; border: 2px solid var(--green); border-radius: 5px; background: repeating-linear-gradient(0deg, var(--surface) 0 13px, var(--line) 13px 15px); transform: rotate(-10deg); box-shadow: 6px 6px 0 var(--green-soft); }
.art-pencil { position: absolute; width: 10px; height: 77px; background: var(--accent); border: 2px solid var(--ink); left: 106px; top: 10px; transform: rotate(24deg); }
.art-stamp { position: absolute; bottom: 4px; right: 15px; height: 36px; width: 36px; display: grid; place-items: center; color: var(--on-primary); background: var(--green); border: 2px solid var(--ink); font-weight: 800; transform: rotate(9deg); }
.summary-strip { margin: 0 0 16px; background: var(--surface); border-block: 1px solid var(--line); }
.summary-cell, .summary-cell:first-child { padding: 18px 22px; border-right: 1px solid var(--line); border-bottom: 0; }
.summary-cell:last-child { border-right: 0; }
.summary-cell strong { color: var(--green); font-size: 28px; font-variant-numeric: tabular-nums; }
.summary-cell:nth-child(2) strong { color: var(--blue); }
.summary-cell:nth-child(3) strong { color: var(--red); }
.section { min-width: 0; padding-block: 22px; }
.section-heading { align-items: center; flex-wrap: wrap; }
.section-heading h2 { display: flex; align-items: center; gap: 9px; }
.section-heading h2::before { content: ""; width: 4px; height: 17px; background: var(--green); }
.overview-list { gap: 0; }
.overview-row { border-bottom: 1px solid var(--line); padding: 18px 4px; grid-template-columns: minmax(110px, 1fr) minmax(110px, 1.2fr) auto; }
.overview-row:last-child { border-bottom: 0; }
.overview-name, .overview-metrics { min-width: 0; overflow-wrap: anywhere; }
.overview-name strong { font-size: 14px; }
.overview-name small { font-size: 11px; }
.mini-progress-label { flex-wrap: wrap; gap: 4px 8px; }
.status-badge:empty { display: none; }
.progress-track, .heat-cell, .heat-legend i { background: var(--line); }
.gantt-day-mark, .gantt-label, .review-note-record { border-color: var(--line); }
.gantt-scale-btn.active { border-color: var(--green); }
.status-badge.paused { background: var(--line); color: var(--muted); }
.chart-guide { stroke: var(--line); }.chart-area { fill: var(--green-soft); }
.metric-card, .review-chart-card { box-shadow: var(--shadow); }
.login-overlay { background: var(--paper); }
.toast, .schedule-day[data-tooltip]::after { background: var(--ink); color: var(--surface); }
.schedule-day { min-height: 46px; }
.schedule-actions { gap: 5px; }
.schedule-actions .button { font-size: 12px; }
.schedule-dots .dot, .schedule-legend .dot { box-shadow: 0 0 0 1px var(--surface); }
.schedule-day[data-tooltip]::after { right: auto; left: 0; max-width: 220px; }
.schedule-day:nth-child(7n)::after, .schedule-day:nth-child(7n - 1)::after, .schedule-day:nth-child(7n - 2)::after { left: auto; right: 0; }
.record-actions, .page-heading > .top-actions { flex-wrap: wrap; gap: 12px; }
.mobile-tasks { display: none; }
@media (min-width: 1180px) {
  .main-content[data-page="home"] { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); column-gap: 30px; align-content: start; }
  [data-page="home"] > .overview-heading, [data-page="home"] > .summary-strip { grid-column: 1 / -1; }
  [data-page="home"] > .section { grid-column: 1; }
  [data-page="home"] > .schedule-board { grid-column: 2; grid-row: 3 / span 2; border-left: 1px solid var(--line); padding-left: 26px; }
  .schedule-board > .section-heading { align-items: flex-start; }
}
/* Pixel terminal: crisp blocks, scan lines and cyan/rose highlights. */
:root[data-theme="pixel"] {
  --paper: #15171e; --surface: #20232d; --ink: #e7f6f7; --muted: #a4b7c3; --line: #3c4856;
  --green: #68e5cf; --green-soft: #223e40; --blue: #78b8ff; --yellow: #efc560; --red: #ff91ad;
  --accent: #f285b5; --on-primary: #162621; --hover: #2a3542; --shadow: 4px 4px 0 #090c12;
  --texture: repeating-linear-gradient(0deg, transparent 0 3px, #ffffff03 3px 4px);
  font-family: Consolas, "Microsoft YaHei", monospace;
}
[data-theme="pixel"] :is(.button,.icon-button,input,select,textarea,.task-item,.dialog,.metric-card,.schedule-day,.status-badge,.progress-track,.brand-mark) { border-radius: 0; }
[data-theme="pixel"] .button.primary, [data-theme="pixel"] .task-item.selected { box-shadow: 3px 3px 0 var(--blue); }
[data-theme="pixel"] .progress-fill { background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 10px); }
[data-theme="pixel"] .art-sheet, [data-theme="pixel"] .art-pencil, [data-theme="pixel"] .art-stamp { transform: none; border-radius: 0; }
/* Cartoon notebook: ink outlines, paper ruling and offset print shadows. */
:root[data-theme="cartoon"] {
  --paper: #f5f8ff; --surface: #fffefd; --ink: #353644; --muted: #6d6a7d; --line: #d5d4e4;
  --green: #396cba; --green-soft: #e8efff; --blue: #a14878; --yellow: #d7a52e; --red: #bf4b65;
  --accent: #ffda6b; --hover: #fff4d4; --shadow: 3px 4px 0 #353644;
  --texture: repeating-linear-gradient(0deg, transparent 0 31px, #8b9bc414 31px 32px);
}
[data-theme="cartoon"] :is(.button,.icon-button,.task-item,.metric-card,.review-chart-card,.dialog) { border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
[data-theme="cartoon"] .button:hover { box-shadow: 1px 1px 0 var(--ink); }
[data-theme="cartoon"] .summary-strip { border-block: 2px solid var(--ink); }
[data-theme="cartoon"] .section-heading h2::before { width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--ink); transform: rotate(12deg); }
[data-theme="cartoon"] .brand-mark { background: var(--accent); color: var(--ink); border: 2px solid var(--ink); }
/* Rick & Morty: laboratory green, acid yellow and cyan instrument details. */
:root[data-theme="rick-morty"] {
  --paper: #171d1b; --surface: #242d29; --ink: #eff7e4; --muted: #b1bca9; --line: #485749;
  --green: #b5e65c; --green-soft: #34452b; --blue: #86d8e5; --yellow: #eed36e; --red: #f99497;
  --accent: #eed36e; --on-primary: #24301d; --hover: #354234; --shadow: 3px 3px 0 #101610;
  --texture: repeating-linear-gradient(120deg, transparent 0 44px, #b5e65c04 44px 46px);
}
[data-theme="rick-morty"] .topbar { border-bottom: 2px solid var(--green); }
[data-theme="rick-morty"] .brand-mark { background: var(--blue); color: #182d2c; box-shadow: 3px 3px 0 var(--green); }
[data-theme="rick-morty"] .section-heading h2::before { background: var(--blue); }
[data-theme="rick-morty"] .art-sheet { background: repeating-linear-gradient(0deg, var(--green-soft) 0 13px, var(--green) 13px 15px); border-color: var(--blue); transform: rotate(-5deg); }
[data-theme="rick-morty"] .art-stamp { width: 56px; color: var(--on-primary); font: bold 11px Consolas, monospace; transform: rotate(-8deg); font-size: 0; }
[data-theme="rick-morty"] .art-stamp::after { content: "C-137"; font-size: 11px; }
[data-theme="rick-morty"] .art-sheet { width: 76px; height: 76px; left: 8px; top: 8px; background: url('/static/assets/rick.jpeg') center / cover; border: 3px solid var(--blue); box-shadow: 4px 4px 0 #101610; transform: rotate(-9deg); }
[data-theme="rick-morty"] .art-pencil { width: 65px; height: 65px; left: 80px; top: 19px; background: url('/static/assets/morty.jpeg') center / cover; border: 3px solid var(--accent); transform: rotate(8deg); }
[data-theme="rick-morty"] .art-stamp { height: 23px; bottom: 0; right: 8px; }
[data-theme="rick-morty"] .progress-fill { background: var(--green); box-shadow: inset 0 -2px 0 #759e36; }
:root[data-theme="rose"] { --paper: #fff5f8; --surface: #fffafd; --ink: #4f3042; --muted: #936f82; --line: #efd6e1; --green: #c6527d; --green-soft: #f9e2ec; --blue: #8f76c5; --yellow: #e2aa55; --red: #d84f68; --accent: #f4adc4; --on-primary: #fff; --hover: #fff0f5; --shadow: 0 5px 16px #9c416218; --texture: radial-gradient(circle at 12% 18%, #f4adc422 0 2px, transparent 3px), radial-gradient(circle at 84% 9%, #c6527d18 0 1px, transparent 2px); }
[data-theme="rose"] .brand-mark { background: var(--green); box-shadow: 3px 3px 0 var(--accent); }
[data-theme="rose"] .section-heading h2::before { background: var(--accent); }
[data-theme="rose"] .progress-fill { background: linear-gradient(90deg, #e77da4, var(--green)); }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .topbar { padding-inline: 18px; }.main-content { padding-inline: 24px; }
  .theme-picker > span { display: none; }
}
@media (max-width: 820px) {
  .topbar { height: auto; min-height: 76px; padding: 12px 16px; flex-wrap: wrap; }
  .top-actions { gap: 7px; }.theme-picker select { width: 126px; }
  .workspace { display: block; }.mobile-tasks { display: block; margin: 14px 16px 0; }
  .sidebar { display: none; position: static; height: auto; max-height: 340px; padding: 20px 16px; }
  .tasks-open .sidebar { display: block; }
  .main-content { padding: 20px 16px 48px; }
  .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-cell, .summary-cell:first-child { padding: 14px 12px; }
  .summary-cell strong { font-size: 24px; }
  .overview-row { grid-template-columns: minmax(95px, 1fr) minmax(95px, 1.3fr) auto; gap: 10px; }
}
@media (max-width: 520px) {
  .topbar { gap: 12px; }.brand-button { flex: 1 0 100%; }
  .brand-button small { display: block; }.top-actions { width: 100%; justify-content: space-between; gap: 5px; }
  .top-actions > .button { padding: 7px 9px; font-size: 12px; }
  .top-actions > .primary { width: 38px; font-size: 0; }
  .theme-picker select { width: 119px; }.theme-picker { margin-left: auto; }
  .page-heading { gap: 12px; flex-wrap: wrap; }.page-heading h1 { font-size: 24px; }
  .overview-heading { flex-wrap: nowrap; }.desk-art { width: 95px; flex-basis: 95px; }
  .art-sheet { left: 9px; width: 50px; }.art-pencil { left: 70px; }.art-stamp { right: 3px; }
  [data-theme="rick-morty"] .art-sheet { width: 58px; height: 58px; left: 3px; }
  [data-theme="rick-morty"] .art-pencil { width: 49px; height: 49px; left: 40px; top: 40px; }
  .summary-cell span { font-size: 11px; }
  .schedule-actions { width: 100%; }.schedule-actions .primary { margin-left: auto; }
  .schedule-day { min-height: 44px; padding: 5px; }.schedule-dots { right: 4px; bottom: 4px; gap: 3px; }
  .schedule-dots .dot { width: 5px; height: 5px; flex-basis: 5px; }
  .schedule-item { gap: 7px; }.schedule-item .button { padding-inline: 8px; font-size: 12px; }
  .review-day summary { flex-wrap: wrap; }.review-day-records { padding-left: 14px; }
  .metric-cards { grid-template-columns: minmax(0, 1fr); }
  .record-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Action hierarchy and review use the existing theme palette throughout. */
.today-focus-list { display: grid; gap: 10px; }
.today-focus-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 14px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.today-focus-item:hover { background: var(--hover); border-color: var(--green); }
.today-focus-item strong, .today-focus-item small { display: block; }
.today-focus-item small, .metric-scope { color: var(--muted); font-size: 12px; }
.today-focus-item > span:last-child { color: var(--green); flex-shrink: 0; }
.metric-scope { display: block; margin: 3px 0 6px; }
.no-target-summary, .metric-card > small { display: block; margin-top: 8px; line-height: 1.6; }
.paused-tasks, .task-more { margin-top: 16px; }
.paused-tasks summary, .task-more summary, .chart-data summary { cursor: pointer; color: var(--muted); padding-block: 10px; }
.record-date-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-block: 16px; }
.record-save-status { color: var(--green); min-height: 24px; margin-bottom: 0; font-size: 13px; overflow-wrap: anywhere; }
.record-grid small { display: block; }
.heatmap .heat-cell { width: 100%; height: 100%; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 3px; }
.heatmap .heat-blank { visibility: hidden; }
.heat-cell.level-0 { background: var(--surface); }
.heat-cell.level-1 { background: var(--green-soft); border-color: var(--green); }
.heat-cell.level-3 { background: var(--green); }
.heatmap .heat-cell:hover { outline: 2px solid var(--blue); outline-offset: 1px; }
.heatmap { grid-template-rows: repeat(7, 22px); grid-auto-columns: 22px; }
.review-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin-bottom: 22px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.review-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.review-presets label { margin-left: auto; min-width: 180px; }
.review-search { margin-bottom: 16px; }
.guide-links { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 18px; }
.guide-links .button { text-decoration: none; }
.review-next-step { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.review-next-step h3 { margin-top: 0; }
.review-next-step .button { margin-top: 14px; }
.chart-scroll { overflow-x: auto; }
.review-chart-grid { grid-template-columns: minmax(0, 1fr); }
.review-chart-card, .review-chart-head > div { min-width: 0; }
.review-chart-head h3 { overflow-wrap: anywhere; }
.chart-scroll { max-width: 100%; min-width: 0; }
.chart-svg { min-width: 560px; min-height: 0; }
.chart-bar { fill: var(--green); }
.chart-bar:hover { fill: var(--blue); }
.chart-insights span, .chart-trend, .chart-subtitle { font-size: 12px; }
.chart-insights strong { overflow-wrap: anywhere; }
.chart-table-wrap { overflow: auto; max-height: 280px; }
.chart-data table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart-data th, .chart-data td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
.checkin-calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.checkin-day { display: grid; text-align: center; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.checkin-day.done { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.checkin-day.zero { border-style: dashed; }
.review-day summary::after { content: "展开"; margin-left: auto; color: var(--muted); font-size: 12px; }
.review-day[open] summary::after { content: "收起"; }
.gantt-scale-switch { flex-wrap: wrap; align-items: center; gap: 8px; }
.gantt-scale-btn { min-height: 38px; }
.gantt-layout { --gantt-row-height: 38px; }
.gantt-label { display: flex; align-items: center; }
.gantt-month-band { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-theme="pixel"] :is(.today-focus-item, .review-filters, .review-next-step, .checkin-day) { border-radius: 0; }
[data-theme="cartoon"] :is(.today-focus-item, .review-filters, .review-next-step) { border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
@media (min-width: 1180px) {
  [data-page="home"] > .today-focus { grid-column: 1; grid-row: 3; }
  [data-page="home"] > .schedule-board { grid-row: 3 / span 3; }
}
@media (max-width: 820px) {
  .review-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .overview-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .overview-row .status-badge { justify-self: start; }
  .overview-row .overview-name { display: block; }
  .review-filters { padding: 12px; }
  .review-presets label { width: 100%; margin-left: 0; }
  .chart-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .review-chart-head { align-items: flex-start; }
  .review-chart-head > span { flex-shrink: 0; }
  .review-chart-head .icon-button, .schedule-item .icon-button, .top-actions > .icon-button { min-width: 44px; width: 44px; min-height: 44px; }
  .button, .icon-button, .gantt-scale-btn { min-height: 44px; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .top-actions > .primary { width: auto; font-size: 12px; }
  .today-focus-item { align-items: flex-start; }
  .record-actions { align-items: stretch; }
  .record-actions .button { width: 100%; }
  .heatmap { grid-template-rows: repeat(7, 44px); grid-auto-columns: 44px; }
}