:root {
  color-scheme: light;
  --ink: #17211c;
  --ink-soft: #53615a;
  --ink-faint: #849089;
  --surface: #f6f7f2;
  --surface-strong: #ffffff;
  --surface-muted: #eef1eb;
  --line: #dfe4dc;
  --sidebar: #18241e;
  --sidebar-soft: #24332b;
  --accent: #d97706;
  --accent-dark: #b75c05;
  --accent-soft: #fff1dc;
  --teal: #0f8b7a;
  --teal-soft: #e2f4f0;
  --blue: #4f67d8;
  --blue-soft: #e9edff;
  --danger: #c2413b;
  --danger-soft: #ffebe8;
  --warning: #b45309;
  --warning-soft: #fff3d8;
  --success: #267a4c;
  --success-soft: #e5f4ea;
  --shadow-sm: 0 1px 2px rgba(24, 36, 30, 0.05), 0 8px 24px rgba(24, 36, 30, 0.05);
  --shadow-lg: 0 24px 64px rgba(19, 29, 24, 0.18);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --sidebar-width: 248px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(circle at 100% 0%, rgba(217, 119, 6, 0.07), transparent 26rem), var(--surface);
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(217, 119, 6, 0.22);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 24px 18px 18px;
  color: #eef4ef;
  background: radial-gradient(circle at 20% 0%, rgba(217, 119, 6, 0.18), transparent 18rem), linear-gradient(180deg, #1a2821, #142019);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.brand { display: flex; gap: 11px; align-items: center; padding: 0 8px 28px; }

.brand-mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: var(--accent);
  background: #fff6e7;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.brand-mark svg { width: 31px; height: 31px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: 0.01em; }
.brand small { margin-top: 1px; color: #94a39a; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.main-nav { display: grid; gap: 5px; }

.nav-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  color: #aab7af;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: 160ms ease;
}

.nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.055); }
.nav-item.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { display: inline-grid; place-items: center; }
.nav-count { min-width: 24px; padding: 1px 7px; color: #c5cec8; font-size: 11px; text-align: center; background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
.nav-item.is-active .nav-count { color: #fff; background: var(--accent); }

.sidebar-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: auto;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; background: #54d49a; border-radius: 50%; box-shadow: 0 0 0 4px rgba(84, 212, 154, 0.12); }
.sidebar-note strong { display: block; color: #dfe8e2; font-size: 12px; }
.sidebar-note p { margin: 2px 0 0; color: #8e9c93; font-size: 11px; line-height: 1.45; }
.workspace { min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 14px clamp(22px, 4vw, 54px);
  background: rgba(246, 247, 242, 0.86);
  border-bottom: 1px solid rgba(223, 228, 220, 0.8);
  backdrop-filter: blur(18px);
}

.topbar-context { display: flex; gap: 7px; align-items: baseline; }
.context-label { color: var(--ink-faint); font-size: 12px; }
.topbar-context strong { font-size: 14px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--ink-soft);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: 160ms ease;
}

.icon-button:hover { color: var(--accent-dark); border-color: #e7c99e; transform: translateY(-1px); }

.button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  font-weight: 650;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: 160ms ease;
}

.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 8px 22px rgba(217, 119, 6, 0.22); }
.button-primary:hover { background: var(--accent-dark); }
.button-secondary { color: var(--ink); background: var(--surface-strong); border-color: var(--line); }
.button-secondary:hover { border-color: #cbd3ca; }
.button-ghost { color: var(--ink-soft); background: transparent; }
.button-danger { color: var(--danger); background: var(--danger-soft); }
.button-small { min-height: 32px; padding: 5px 10px; font-size: 12px; border-radius: 9px; }
.quick-add-button kbd { padding: 2px 6px; color: #fff4e4; font: inherit; font-size: 10px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; }
.view-root { width: min(1240px, 100%); margin: 0 auto; padding: 42px clamp(22px, 4vw, 54px) 72px; }

.page-heading { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.eyebrow { margin: 0 0 6px; color: var(--accent-dark); font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.page-title { margin: 0; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.18; letter-spacing: -0.035em; }
.page-title.compact { font-size: clamp(25px, 2.5vw, 32px); }
.page-subtitle { max-width: 680px; margin: 10px 0 0; color: var(--ink-soft); font-size: 16px; }
.page-heading-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }

.stat-card {
  display: flex;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(223, 228, 220, 0.92);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stat-icon { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; color: var(--accent-dark); background: var(--accent-soft); border-radius: 13px; }
.stat-icon.teal { color: var(--teal); background: var(--teal-soft); }
.stat-icon.blue { color: var(--blue); background: var(--blue-soft); }
.stat-icon.red { color: var(--danger); background: var(--danger-soft); }
.stat-copy strong { display: block; font-size: 24px; line-height: 1; letter-spacing: -0.03em; }
.stat-copy span { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 12px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr); gap: 18px; align-items: start; }
.stack { display: grid; gap: 18px; }

.panel { overflow: hidden; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-header { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 19px 21px 15px; border-bottom: 1px solid #edf0eb; }
.panel-title-row { min-width: 0; }
.panel-kicker { margin: 0 0 4px; color: var(--ink-faint); font-size: 10px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.panel-title { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 17px; letter-spacing: -0.015em; }
.panel-title .count-pill { padding: 1px 8px; color: var(--ink-soft); font-size: 11px; font-weight: 600; background: var(--surface-muted); border-radius: 999px; }
.panel-body { padding: 8px 8px 10px; }
.panel-body.spacious { padding: 20px; }
.task-list { display: grid; }

.task-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 14px 13px;
  border-radius: 12px;
  cursor: pointer;
  transition: 140ms ease;
}

.task-row + .task-row::before { position: absolute; top: 0; right: 13px; left: 52px; height: 1px; background: #edf0eb; content: ""; }
.task-row:hover { background: #f8faf7; }
.task-row.is-done .task-title { color: var(--ink-faint); text-decoration: line-through; }

.task-check {
  display: grid;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  place-items: center;
  color: transparent;
  background: #fff;
  border: 1.5px solid #c8d1c8;
  border-radius: 50%;
  cursor: pointer;
  transition: 150ms ease;
}

.task-check:hover { color: var(--success); border-color: var(--success); }
.task-row.is-done .task-check { color: #fff; background: var(--success); border-color: var(--success); }
.task-main { min-width: 0; }
.task-title-row { display: flex; gap: 8px; align-items: center; }
.task-title { overflow: hidden; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.task-note { overflow: hidden; margin: 3px 0 0; color: var(--ink-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

.badge { display: inline-flex; gap: 4px; align-items: center; padding: 3px 8px; color: var(--ink-soft); font-size: 11px; font-weight: 600; background: var(--surface-muted); border-radius: 999px; }
.badge.high { color: #a33d35; background: var(--danger-soft); }
.badge.medium { color: var(--warning); background: var(--warning-soft); }
.badge.low { color: #3465a4; background: var(--blue-soft); }
.badge.focus { color: var(--accent-dark); background: var(--accent-soft); }
.badge.overdue { color: var(--danger); background: var(--danger-soft); }
.badge.project { color: var(--teal); background: var(--teal-soft); }
.task-actions { display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity 140ms ease; }
.task-row:hover .task-actions, .task-row:focus-within .task-actions { opacity: 1; }

.task-action {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.task-action:hover { color: var(--ink); background: var(--surface-muted); }
.focus-list { display: grid; gap: 10px; padding: 8px; }
.focus-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px; background: #fbfcf9; border: 1px solid #e9ede7; border-radius: 14px; }
.focus-rank { display: grid; width: 28px; height: 28px; place-items: center; color: var(--accent-dark); font-size: 12px; font-weight: 800; background: var(--accent-soft); border-radius: 9px; }
.focus-copy { min-width: 0; }
.focus-copy strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.focus-copy span { display: block; overflow: hidden; margin-top: 2px; color: var(--ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.focus-remove { color: var(--ink-faint); background: transparent; border: 0; cursor: pointer; }
.focus-remove:hover { color: var(--danger); }
.progress-card { padding: 18px 20px 20px; }
.progress-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.progress-head strong { font-size: 26px; letter-spacing: -0.04em; }
.progress-head span { color: var(--ink-faint); font-size: 12px; }
.progress-bar { height: 8px; overflow: hidden; background: #e8ece6; border-radius: 999px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #f3a63f); border-radius: inherit; transition: width 250ms ease; }
.progress-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; }
.empty-state { display: grid; justify-items: center; padding: 46px 20px; color: var(--ink-soft); text-align: center; }
.empty-icon { display: grid; width: 52px; height: 52px; margin-bottom: 13px; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 17px; }
.empty-state strong { color: var(--ink); font-size: 15px; }
.empty-state p { max-width: 360px; margin: 6px 0 0; color: var(--ink-faint); font-size: 12px; }

.capture-card {
  padding: 18px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fff9ee, #ffffff 62%);
  border: 1px solid #f0ddbd;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.capture-card h2 { margin: 0 0 5px; font-size: 17px; }
.capture-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 12px; }
.capture-input-row { display: flex; gap: 10px; }
.input, .select, .textarea { width: 100%; color: var(--ink); background: #fff; border: 1px solid #d8ded6; border-radius: 11px; transition: 150ms ease; }
.input, .select { min-height: 42px; padding: 9px 12px; }
.textarea { min-height: 112px; padding: 10px 12px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #c7d0c6; }
.input:focus, .select:focus, .textarea:focus { border-color: #e1b169; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1); }
.capture-input { flex: 1; }
.inbox-list { display: grid; }

.inbox-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(148px, 210px) 150px auto;
  gap: 12px;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #edf0eb;
}

.inbox-row:last-child { border-bottom: 0; }
.inbox-task { min-width: 0; }
.inbox-task strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.inbox-task span { display: block; overflow: hidden; margin-top: 3px; color: var(--ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.inbox-actions { display: flex; gap: 6px; justify-content: flex-end; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.project-card {
  position: relative;
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: 180ms ease;
}

.project-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--project-color, var(--accent)); content: ""; }
.project-card:hover { border-color: #cdd6cc; box-shadow: 0 16px 36px rgba(24, 36, 30, 0.1); transform: translateY(-3px); }
.project-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.project-symbol { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--project-color, var(--accent)); border-radius: 13px; }
.project-card h3 { margin: 17px 0 0; font-size: 18px; letter-spacing: -0.02em; }
.project-card p { display: -webkit-box; margin: 7px 0 18px; overflow: hidden; color: var(--ink-soft); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.project-progress { margin-top: auto; }
.project-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--ink-faint); font-size: 11px; }
.project-progress-head strong { color: var(--ink); font-size: 12px; }
.project-next { display: flex; gap: 7px; align-items: center; min-width: 0; margin-top: 14px; color: var(--ink-soft); font-size: 11px; }
.project-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.project-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  margin-bottom: 18px;
  color: #fff;
  background: radial-gradient(circle at 88% 5%, rgba(255, 255, 255, 0.18), transparent 16rem), var(--project-color, #17211c);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(24, 36, 30, 0.16);
}

.project-detail-hero h1 { margin: 5px 0 6px; font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.04em; }
.project-detail-hero p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, 0.76); }
.hero-progress { min-width: 150px; text-align: right; }
.hero-progress strong { display: block; font-size: 36px; line-height: 1; }
.hero-progress span { color: rgba(255, 255, 255, 0.72); font-size: 12px; }
.detail-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.search-panel { padding: 9px; margin-bottom: 18px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.search-input-wrap { position: relative; }
.search-input-wrap .search-icon { position: absolute; top: 50%; left: 14px; color: var(--ink-faint); transform: translateY(-50%); }
.search-input-wrap .input { min-height: 54px; padding-left: 44px; font-size: 16px; border: 0; background: transparent; }
.search-input-wrap .input:focus { box-shadow: none; }
.result-section + .result-section { margin-top: 18px; }
.result-section-title { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.search-results { overflow: hidden; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

.search-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0eb;
  cursor: pointer;
}

.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: #f8faf7; }
.result-icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 10px; }
.search-result strong, .search-result span { display: block; }
.search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result span { overflow: hidden; margin-top: 2px; color: var(--ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.data-card { padding: 22px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.data-card.full { grid-column: 1 / -1; }
.data-icon { display: grid; width: 44px; height: 44px; margin-bottom: 16px; place-items: center; color: var(--accent-dark); background: var(--accent-soft); border-radius: 13px; }
.data-card h3 { margin: 0; font-size: 17px; }
.data-card p { margin: 7px 0 17px; color: var(--ink-soft); font-size: 12px; }
.data-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.data-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; color: var(--ink-soft); background: #f8faf7; border-radius: 12px; font-size: 12px; }
.data-note strong { color: var(--ink); }
.filter-tabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-muted); border-radius: 10px; }
.filter-tab { padding: 5px 10px; color: var(--ink-soft); font-size: 11px; font-weight: 650; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.filter-tab.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(24, 36, 30, 0.08); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(17, 26, 21, 0.42);
  backdrop-filter: blur(4px);
  animation: fade-in 150ms ease;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 110;
  width: min(560px, calc(100vw - 30px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  animation: modal-in 180ms ease;
}

.modal-header, .drawer-header { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 21px 22px 16px; border-bottom: 1px solid #edf0eb; }
.modal-header h2, .drawer-header h2 { margin: 0; font-size: 20px; letter-spacing: -0.025em; }
.modal-header p, .drawer-header p { margin: 4px 0 0; color: var(--ink-faint); font-size: 12px; }
.modal-body { padding: 20px 22px; }
.modal-footer { display: flex; gap: 9px; align-items: center; justify-content: space-between; padding: 15px 22px 20px; border-top: 1px solid #edf0eb; }
.modal-actions { display: flex; gap: 8px; }
.quick-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

.quick-chip {
  padding: 6px 10px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.quick-chip:hover, .quick-chip.is-active { color: var(--accent-dark); background: var(--accent-soft); border-color: #efd3a8; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  width: min(500px, 100vw);
  overflow: auto;
  background: #fff;
  box-shadow: -18px 0 48px rgba(19, 29, 24, 0.18);
  animation: drawer-in 210ms ease;
}

.drawer-body { display: grid; gap: 16px; padding: 20px 22px 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { color: #4e5d55; font-size: 11px; font-weight: 700; }
.field-hint { color: var(--ink-faint); font-size: 10px; }
.check-row { display: flex; gap: 10px; align-items: center; min-height: 42px; padding: 9px 11px; background: #f8faf7; border: 1px solid var(--line); border-radius: 11px; }
.check-row input { accent-color: var(--accent); }
.check-row label { font-size: 12px; }
.drawer-section { padding-top: 17px; border-top: 1px solid #edf0eb; }
.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 9px; width: min(340px, calc(100vw - 30px)); }
.toast { display: flex; gap: 10px; align-items: center; padding: 12px 14px; color: #fff; background: #1d2c24; border-radius: 13px; box-shadow: 0 14px 32px rgba(16, 25, 20, 0.22); animation: toast-in 180ms ease; }
.toast strong { font-size: 12px; }
.toast.is-error { background: #7d2929; }
.text-muted { color: var(--ink-faint); }
.mobile-only { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -47%) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 1050px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-row { grid-template-columns: minmax(200px, 1fr) 180px 145px auto; }
}

@media (max-width: 860px) {
  :root { --sidebar-width: 78px; }
  .sidebar { padding-right: 10px; padding-left: 10px; }
  .brand { justify-content: center; padding-right: 0; padding-left: 0; }
  .brand > span:last-child, .nav-item > span:not(.nav-icon):not(.nav-count), .nav-count, .sidebar-note { display: none; }
  .nav-item { display: grid; grid-template-columns: 1fr; place-items: center; padding: 13px 8px; }
  .nav-item.is-active { box-shadow: inset 0 -3px 0 var(--accent); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .inbox-row { grid-template-columns: 1fr 1fr; }
  .inbox-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --sidebar-width: 0px; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 50;
    display: block;
    width: auto;
    height: 64px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(17, 26, 21, 0.28);
  }

  .brand { display: none; }
  .main-nav { display: grid; grid-template-columns: repeat(5, 1fr); }
  .nav-item { padding: 10px 4px; }
  .nav-icon svg { width: 20px; height: 20px; }
  .topbar { min-height: 66px; padding: 12px 16px; }
  .quick-add-button kbd, .topbar-actions .icon-button { display: none; }
  .view-root { padding: 28px 16px 100px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .page-heading-actions { width: 100%; }
  .page-heading-actions .button { flex: 1; }
  .stat-grid { gap: 9px; }
  .stat-card { min-height: 78px; padding: 13px; }
  .stat-icon { width: 38px; height: 38px; }
  .stat-copy strong { font-size: 21px; }
  .project-grid, .data-grid { grid-template-columns: 1fr; }
  .capture-input-row { flex-direction: column; }
  .inbox-row { grid-template-columns: 1fr; gap: 9px; }
  .inbox-actions { justify-content: stretch; }
  .inbox-actions .button { flex: 1; }
  .project-detail-hero { grid-template-columns: 1fr; padding: 22px; }
  .hero-progress { text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .modal-footer { align-items: stretch; flex-direction: column-reverse; }
  .modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .task-actions { opacity: 1; }
}
/* Minimal Japanese paper theme */
:root {
  color-scheme: light;
  --ink: #292521;
  --ink-soft: #6c655e;
  --ink-faint: #9a9289;
  --surface: #f3efe8;
  --surface-strong: #fbf9f5;
  --surface-muted: #ebe5dc;
  --line: #ddd5ca;
  --sidebar: #302a25;
  --sidebar-soft: #40372f;
  --accent: #8a6f57;
  --accent-dark: #68513f;
  --accent-soft: #eee5da;
  --teal: #736f68;
  --teal-soft: #ebe7e1;
  --blue: #817565;
  --blue-soft: #ede8e1;
  --danger: #8b5f51;
  --danger-soft: #f0e4df;
  --warning: #806b50;
  --warning-soft: #eee6d9;
  --success: #68685f;
  --success-soft: #e9e7e0;
  --shadow-sm: 0 1px 0 rgba(73, 59, 49, 0.04), 0 9px 26px rgba(73, 59, 49, 0.045);
  --shadow-lg: 0 24px 70px rgba(54, 43, 35, 0.16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --sidebar-width: 244px;
}

body {
  color: var(--ink);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)),
    repeating-linear-gradient(90deg, rgba(97, 77, 60, 0.018) 0, rgba(97, 77, 60, 0.018) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(97, 77, 60, 0.012) 0, rgba(97, 77, 60, 0.012) 1px, transparent 1px, transparent 7px),
    var(--surface);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 84% 4%, rgba(255, 255, 255, 0.7), transparent 24rem);
  content: "";
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: rgba(104, 81, 63, 0.24);
}

button:active,
.button:active,
.icon-button:active {
  transform: scale(0.98);
}

.sidebar {
  padding: 26px 16px 18px;
  color: #f4f0eb;
  background:
    repeating-linear-gradient(87deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg, #39312b 0%, #28231f 100%);
  border-right-color: rgba(255, 255, 255, 0.045);
}

.brand { padding-bottom: 30px; }
.brand-mark { color: #8a6f57; background: #eee5da; border-radius: 12px; box-shadow: none; }
.brand strong { font-weight: 650; letter-spacing: 0.01em; }
.brand small { color: #a99f96; font-size: 9px; letter-spacing: 0.12em; }
.main-nav { gap: 7px; }

.nav-item {
  grid-template-columns: 21px 1fr auto;
  padding: 11px 12px;
  color: #b8afa7;
  border-radius: 13px;
}

.nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav-item.is-active { color: #fff; background: rgba(255, 255, 255, 0.09); box-shadow: inset 2px 0 0 #a98a6a; }
.nav-count { color: #c7beb6; background: rgba(255, 255, 255, 0.08); }
.nav-item.is-active .nav-count { color: #2f2924; background: #cab59f; }
.sidebar-note { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.055); border-radius: 14px; }
.status-dot { background: #b49a7f; box-shadow: 0 0 0 4px rgba(180, 154, 127, 0.1); }
.sidebar-note strong { color: #e7e0da; }
.sidebar-note p { color: #a39a92; }

.topbar {
  min-height: 70px;
  background: rgba(243, 239, 232, 0.76);
  border-bottom-color: rgba(221, 213, 202, 0.8);
  backdrop-filter: saturate(1.1) blur(24px);
}

.context-label { color: #9a9289; }
.topbar-context strong { font-weight: 620; }

.icon-button {
  color: #6c655e;
  background: rgba(251, 249, 245, 0.74);
  border-color: rgba(221, 213, 202, 0.9);
  border-radius: 13px;
}

.icon-button:hover { color: var(--accent-dark); border-color: #cbbdaf; transform: none; }

.button {
  min-height: 42px;
  font-weight: 580;
  border-radius: 13px;
}

.button-primary {
  color: #f8f6f2;
  background: #4a3d33;
  box-shadow: 0 7px 18px rgba(74, 61, 51, 0.14);
}

.button-primary:hover { background: #3e332b; transform: none; }
.button-secondary { background: rgba(251, 249, 245, 0.82); border-color: var(--line); }
.button-secondary:hover { border-color: #c9beb1; transform: none; }
.button-danger { color: #805548; background: #eee2dc; }
.quick-add-button kbd { color: #eee5da; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.12); }
.view-root { padding-top: 48px; }

.page-heading { margin-bottom: 30px; }
.eyebrow { color: #8a7564; font-size: 10px; letter-spacing: 0.12em; }
.page-title { font-weight: 620; letter-spacing: -0.04em; }
.page-subtitle { color: #777068; font-size: 15px; }
.stat-grid { gap: 12px; margin-bottom: 20px; }

.stat-card {
  min-height: 84px;
  background: rgba(251, 249, 245, 0.84);
  border-color: rgba(221, 213, 202, 0.92);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.stat-icon { color: #765f4d; background: #eee5da; border-radius: 12px; }
.stat-icon.teal, .stat-icon.blue { color: #736b62; background: #ece7e0; }
.stat-icon.red { color: #875e51; background: #efe3de; }
.stat-copy strong { font-weight: 620; }
.stat-copy span { color: #928a82; }

.content-grid { gap: 16px; }
.stack { gap: 16px; }
.panel { background: rgba(251, 249, 245, 0.92); border-color: rgba(221, 213, 202, 0.94); border-radius: 20px; box-shadow: var(--shadow-sm); }
.panel-header { padding: 20px 21px 15px; border-bottom-color: #e9e2d9; }
.panel-kicker { color: #999087; font-size: 9px; letter-spacing: 0.13em; }
.panel-title { font-weight: 620; }
.panel-title .count-pill { color: #716960; background: #eae4dc; }
.panel-body { padding: 7px 8px 9px; }

.task-row { padding: 15px 13px; border-radius: 14px; }
.task-row + .task-row::before { right: 13px; left: 52px; background: #eae3da; }
.task-row:hover { background: rgba(239, 233, 225, 0.52); }
.task-check { background: #fbf9f5; border-color: #c9c0b6; }
.task-check:hover { color: #6d5d50; border-color: #8a6f57; }
.task-row.is-done .task-check { background: #777168; border-color: #777168; }
.task-title { font-weight: 580; }
.task-note { color: #999087; }
.badge { padding: 3px 8px; color: #706860; background: #ece7e0; font-weight: 560; }
.badge.high, .badge.overdue { color: #7c5044; background: #efe2dc; }
.badge.medium { color: #79664e; background: #eee6d9; }
.badge.low { color: #6e6b66; background: #eae7e2; }
.badge.focus { color: #71563f; background: #eee3d6; }
.badge.project { color: #6d665f; background: #e9e6e1; }
.task-action:hover { background: #eae4dc; }

.focus-item { background: #f8f5f0; border-color: #e7dfd6; border-radius: 14px; }
.focus-rank { color: #6e5541; background: #eee3d6; border-radius: 8px; }
.progress-head strong { font-weight: 620; }
.progress-bar { height: 7px; background: #e7e0d7; }
.progress-fill { background: linear-gradient(90deg, #75604e, #a18870); }
.progress-note { color: #777068; }
.empty-icon { color: #786655; background: #eee5da; }
.capture-card {
  background: rgba(251, 249, 245, 0.88);
  border-color: #ddd3c7;
  border-radius: 20px;
}

.capture-card h2 { font-weight: 620; }
.input, .select, .textarea { background: #fcfaf7; border-color: #d8cfc4; border-radius: 12px; }
.input:hover, .select:hover, .textarea:hover { border-color: #c6b9ab; }
.input:focus, .select:focus, .textarea:focus { border-color: #9f8872; box-shadow: 0 0 0 3px rgba(138, 111, 87, 0.11); }
.inbox-row { border-bottom-color: #e9e2d9; }
.inbox-task span { color: #978f86; }

.project-grid { gap: 14px; }
.project-card { min-height: 220px; background: rgba(251, 249, 245, 0.92); border-color: #ddd5ca; border-radius: 20px; box-shadow: var(--shadow-sm); }
.project-card::before { height: 3px; opacity: 0.8; }
.project-card:hover { border-color: #c9beb1; box-shadow: 0 12px 30px rgba(73, 59, 49, 0.07); transform: translateY(-2px); }
.project-symbol { color: #f7f3ee; border-radius: 12px; }
.project-card h3 { font-weight: 620; }
.project-card p { color: #777068; }
.project-progress-head, .project-next { color: #938b82; }
.project-detail-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--project-color) 88%, #2b2521), #43382f); border-radius: 20px; box-shadow: 0 16px 36px rgba(73, 59, 49, 0.12); }
.project-detail-hero h1 { font-weight: 620; }
.hero-progress strong { font-weight: 620; }
.detail-toolbar { margin-bottom: 17px; }

.search-panel { background: rgba(251, 249, 245, 0.88); border-color: #ddd5ca; border-radius: 20px; box-shadow: var(--shadow-sm); }
.search-result { border-bottom-color: #e9e2d9; }
.search-result:hover { background: rgba(239, 233, 225, 0.55); }
.result-icon { color: #746556; background: #ede6dc; border-radius: 11px; }
.search-result span { color: #978f86; }

.data-card { background: rgba(251, 249, 245, 0.9); border-color: #ddd5ca; border-radius: 20px; box-shadow: var(--shadow-sm); }
.data-icon { color: #715b49; background: #eee5da; border-radius: 12px; }
.data-card h3 { font-weight: 620; }
.data-card p { color: #777068; }
.data-note { background: #f7f3ed; border: 1px solid #e7dfd6; }
.filter-tabs { background: #e9e3da; border-radius: 11px; }
.filter-tab { border-radius: 8px; }
.filter-tab.is-active { background: #fbf9f5; box-shadow: 0 1px 3px rgba(73, 59, 49, 0.06); }

.overlay { background: rgba(40, 34, 29, 0.36); backdrop-filter: blur(6px); }
.modal, .drawer { background: #f9f6f1; border-color: rgba(255, 255, 255, 0.45); }
.modal-header, .drawer-header, .modal-footer { border-color: #e7dfd6; }
.modal-header h2, .drawer-header h2 { font-weight: 620; }
.quick-chip { background: #f3eee7; border-color: #ded4c8; }
.quick-chip:hover, .quick-chip.is-active { color: #68513f; background: #ece2d6; border-color: #cbb9a6; }
.drawer { box-shadow: -18px 0 50px rgba(54, 43, 35, 0.14); }
.field label, .field-label { color: #6d655d; }
.check-row { background: #f4f0e9; border-color: #dfd6cb; }
.drawer-section { border-top-color: #e7dfd6; }
.toast { color: #f7f4ef; background: #3a322c; box-shadow: 0 14px 30px rgba(54, 43, 35, 0.18); }
.toast.is-error { background: #754f44; }

@media (max-width: 860px) {
  .sidebar {
    background:
      repeating-linear-gradient(87deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, transparent 1px, transparent 6px),
      linear-gradient(180deg, #39312b 0%, #28231f 100%);
  }
}

@media (max-width: 640px) {
  .sidebar {
    background: rgba(247, 243, 237, 0.84);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 14px 34px rgba(54, 43, 35, 0.14);
    backdrop-filter: saturate(1.15) blur(24px);
  }

  .nav-item { color: #817970; border-radius: 13px; }
  .nav-item:hover { color: #4f473f; background: rgba(84, 67, 54, 0.06); }
  .nav-item.is-active { color: #3f3731; background: rgba(84, 67, 54, 0.1); box-shadow: none; }
  .topbar { background: rgba(243, 239, 232, 0.82); }
  .page-title { font-size: 30px; }
  .stat-card { border-radius: 16px; }
  .panel, .project-card, .data-card, .capture-card, .search-panel { border-radius: 18px; }
}
/* Acorn daily channels */
.main-nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar { display: none; }
.nav-section-label { margin: 14px 12px 5px; color: #81786f; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-section-label:first-child { margin-top: 0; }
.nav-item { min-height: 42px; }
.channel-heading { align-items: center; }
.sync-status { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; color: #756c63; font-size: 11px; background: rgba(251, 249, 245, 0.7); border: 1px solid #ddd5ca; border-radius: 12px; }

.segmented-control {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  margin-bottom: 16px;
  background: #e8e1d8;
  border-radius: 13px;
}

.segmented-control button,
.segmented-control label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 13px;
  color: #716960;
  font-size: 12px;
  font-weight: 580;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.segmented-control button.is-active,
.segmented-control label:has(input:checked) { color: #342f2a; background: #fbf9f5; box-shadow: 0 1px 3px rgba(73, 59, 49, 0.07); }
.segmented-control input { display: none; }
.segmented-control.compact { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 16px; }

.demo-notice {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 11px 14px;
  margin-bottom: 16px;
  color: #776f67;
  font-size: 11px;
  background: rgba(239, 233, 225, 0.72);
  border: 1px solid #e3d9ce;
  border-radius: 14px;
}

.hot-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.7fr); gap: 16px; align-items: start; }
.hot-list { display: grid; gap: 10px; }
.hot-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 19px 20px; background: rgba(251, 249, 245, 0.92); border: 1px solid #ddd5ca; border-radius: 18px; box-shadow: var(--shadow-sm); }
.hot-rank { color: #a3988e; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; }
.hot-copy { min-width: 0; }
.hot-title-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.hot-title-row h2 { margin: 0; font-size: 16px; font-weight: 610; line-height: 1.45; }
.hot-copy > p { margin: 6px 0 11px; color: #777068; font-size: 12px; }
.save-icon { display: inline-grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; color: #a69c93; background: rgba(244, 239, 232, 0.78); border: 1px solid #e1d8ce; border-radius: 10px; cursor: pointer; }
.save-icon:hover, .save-icon.is-saved { color: #6f5642; background: #eee3d6; border-color: #d6c2ae; }
.channel-aside { display: grid; gap: 13px; }
.compact-panel .panel-body.spacious { padding: 18px; }
.aside-copy { margin: 0; color: #777068; font-size: 12px; }
.mini-list { display: grid; gap: 9px; margin-top: 15px; color: #6f675f; font-size: 11px; }
.mini-list span { display: flex; gap: 7px; align-items: center; }

.bookshelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.book-card { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 16px; min-height: 184px; padding: 17px; text-align: left; background: rgba(251, 249, 245, 0.9); border: 1px solid #ddd5ca; border-radius: 19px; box-shadow: var(--shadow-sm); cursor: pointer; transition: 160ms ease; }
.book-card:hover { border-color: #c9beb1; box-shadow: 0 12px 30px rgba(73, 59, 49, 0.07); transform: translateY(-2px); }
.book-cover { position: relative; display: flex; min-height: 148px; flex-direction: column; justify-content: space-between; padding: 13px 10px; overflow: hidden; color: #f8f5f0; background: linear-gradient(145deg, color-mix(in srgb, var(--cover-tone) 88%, #fff), var(--cover-tone)); border-radius: 4px 9px 9px 4px; box-shadow: 5px 7px 14px rgba(55, 44, 35, 0.16); }
.book-cover::after { position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; background: rgba(255, 255, 255, 0.18); content: ""; }
.book-cover-line { width: 28px; height: 1px; background: rgba(255, 255, 255, 0.55); }
.book-cover-title { font-family: "Songti SC", SimSun, serif; font-size: 15px; font-weight: 650; line-height: 1.45; letter-spacing: 0.08em; }
.book-cover-author { color: rgba(255, 255, 255, 0.7); font-size: 9px; letter-spacing: 0.06em; }
.book-meta { display: flex; min-width: 0; flex-direction: column; }
.book-category { margin-bottom: 8px; color: #958b81; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.book-meta strong { font-size: 15px; font-weight: 610; line-height: 1.45; }
.book-meta > span { margin-top: 4px; font-size: 10px; }
.book-progress-row { display: flex !important; gap: 8px; align-items: center; margin-top: auto !important; }
.book-progress { flex: 1; height: 4px; overflow: hidden; background: #e7e0d7; border-radius: 999px; }
.book-progress i { display: block; height: 100%; background: #7b6959; border-radius: inherit; }

.reader-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.reader-cover-wrap { position: sticky; top: 95px; display: grid; gap: 18px; }
.reader-cover { display: flex; min-height: 350px; flex-direction: column; justify-content: space-between; padding: 30px 24px; color: #f7f3ed; background: linear-gradient(145deg, color-mix(in srgb, var(--cover-tone) 86%, #fff), var(--cover-tone)); border-radius: 5px 13px 13px 5px; box-shadow: 9px 12px 28px rgba(55, 44, 35, 0.18); }
.reader-cover > span { color: rgba(255, 255, 255, 0.62); font-size: 10px; letter-spacing: 0.12em; }
.reader-cover strong { font-family: "Songti SC", SimSun, serif; font-size: 28px; font-weight: 650; line-height: 1.35; letter-spacing: 0.08em; }
.reader-cover small { color: rgba(255, 255, 255, 0.72); }
.reader-progress { padding: 16px; background: #fbf9f5; border: 1px solid #ddd5ca; border-radius: 16px; }
.reader-page { min-height: 680px; padding: clamp(32px, 5vw, 64px); background: #fbf9f4; border: 1px solid #ded5ca; border-radius: 6px 20px 20px 6px; box-shadow: 8px 12px 30px rgba(73, 59, 49, 0.07); }
.reader-page h1 { margin: 8px 0 4px; font-family: "Songti SC", SimSun, serif; font-size: 34px; font-weight: 650; }
.reader-author { color: #90877f; font-size: 12px; }
.reader-rule { width: 45px; height: 1px; margin: 30px 0; background: #a99b8f; }
.reader-page > p { color: #5f5851; font-family: "Songti SC", SimSun, serif; font-size: 16px; line-height: 2.1; }
.reader-lead { font-size: 18px !important; }
.reader-page h3 { margin: 36px 0 14px; font-size: 14px; }
.chapter-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.chapter-list span { padding: 10px 12px; color: #6c645c; font-size: 11px; background: #f2ede6; border-radius: 10px; }
.reader-actions { display: flex; gap: 9px; margin-top: 32px; flex-wrap: wrap; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.65fr); gap: 16px; align-items: start; }
.review-side { display: grid; gap: 14px; }
.review-compose .panel-body { display: grid; gap: 17px; }
.mood-row { display: grid; gap: 8px; }
.mood-options { display: flex; gap: 6px; flex-wrap: wrap; }
.mood-options button { padding: 6px 11px; color: #756d65; font-size: 11px; background: #f2ede6; border: 1px solid #e1d8ce; border-radius: 999px; cursor: pointer; }
.mood-options button.is-active { color: #5f4938; background: #eadfce; border-color: #d4bea8; }
.reflection-input { min-height: 210px !important; font-family: "Songti SC", SimSun, serif; font-size: 15px; line-height: 1.95; }
.review-grid { margin-top: 2px; }
.prompt-list { display: grid; gap: 1px; margin-top: 14px; overflow: hidden; background: #e7dfd6; border-radius: 12px; }
.prompt-list p { margin: 0; padding: 11px 12px; color: #70685f; font-size: 11px; background: #f8f5f0; }
.review-entry { padding: 12px 13px; border-bottom: 1px solid #e9e2d9; }
.review-entry:last-child { border-bottom: 0; }
.review-entry strong { font-size: 11px; }
.review-entry p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: #7d756d; font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.aesthetic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 15px; }
.aesthetic-card { display: flex; min-height: 0; flex-direction: column; overflow: hidden; background: rgba(251, 249, 245, 0.92); border: 1px solid #ddd5ca; border-radius: 18px; box-shadow: var(--shadow-sm); }
.aesthetic-card.tall { grid-row: span 2; }
.aesthetic-card.wide { grid-column: span 2; }
.aesthetic-card.square { grid-row: span 1; }
.aesthetic-visual { position: relative; flex: 1; min-height: 120px; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--visual-tone) 58%, #f6f2eb), var(--visual-tone)); }
.aesthetic-visual::before { position: absolute; inset: 12% 10%; border: 1px solid rgba(255, 255, 255, 0.36); content: ""; transform: rotate(-3deg); }
.aesthetic-visual::after { position: absolute; right: 14%; bottom: 12%; width: 38%; height: 42%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); content: ""; transform: rotate(8deg); }
.visual-grain { position: absolute; inset: 0; opacity: 0.2; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.12) 1px, transparent 1px, transparent 5px); }
.visual-label { position: absolute; top: 14px; left: 15px; z-index: 1; color: rgba(255, 255, 255, 0.88); font-size: 10px; letter-spacing: 0.1em; }
.aesthetic-visual .save-icon { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(251, 249, 245, 0.68); border-color: rgba(255, 255, 255, 0.46); }
.aesthetic-copy { padding: 13px 15px 15px; }
.aesthetic-copy strong { display: block; font-size: 13px; font-weight: 610; }
.aesthetic-copy p { margin: 4px 0 7px; color: #7a726a; font-size: 10px; }
.aesthetic-copy > span { color: #9a9289; font-size: 9px; }

.study-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.study-status > div { padding: 16px 18px; background: rgba(251, 249, 245, 0.88); border: 1px solid #ddd5ca; border-radius: 17px; }
.study-status span { display: block; color: #938b82; font-size: 10px; }
.study-status strong { display: block; margin-top: 5px; font-size: 18px; font-weight: 620; }
.study-grid { display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.study-sections { display: grid; gap: 9px; }
.study-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 14px; text-align: left; background: rgba(251, 249, 245, 0.88); border: 1px solid #ddd5ca; border-radius: 16px; cursor: pointer; }
.study-card.is-active { background: #f7f1e9; border-color: #cdbcab; box-shadow: inset 3px 0 0 #8a7058; }
.study-card-icon { display: grid; width: 40px; height: 40px; place-items: center; color: #705a48; background: #eee5da; border-radius: 12px; }
.study-card-copy { min-width: 0; }
.study-card-copy small, .study-card-copy strong, .study-card-copy span { display: block; }
.study-card-copy small { color: #958c83; font-size: 9px; }
.study-card-copy strong { font-size: 14px; }
.study-card-copy span { overflow: hidden; color: #817971; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.study-percent { color: #74685d; font-size: 12px; font-weight: 650; }
.study-material { padding: 18px; margin: 0; color: #625b54; font-family: "Songti SC", SimSun, serif; font-size: 15px; line-height: 1.9; background: #f5f0e8; border: 1px solid #e4dbd1; border-radius: 14px; }
.study-task-list { display: grid; gap: 8px; margin: 18px 0; }
.study-task-list label { display: flex; gap: 9px; align-items: center; color: #6f675f; font-size: 12px; }
.study-task-list input { accent-color: #7b6959; }
.finance-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.finance-summary article { padding: 19px 20px; background: rgba(251, 249, 245, 0.9); border: 1px solid #ddd5ca; border-radius: 18px; }
.finance-summary span, .finance-summary small { display: block; color: #928a82; font-size: 10px; }
.finance-summary strong { display: block; margin: 7px 0 4px; font-size: 23px; font-weight: 620; letter-spacing: -0.03em; }
.finance-summary .positive strong { color: #5d665b; }
.finance-summary .negative strong { color: #805548; }
.finance-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.62fr); gap: 16px; align-items: start; }
.bar-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 220px; align-items: end; }
.bar-item { display: grid; grid-template-rows: 18px 1fr 22px; gap: 5px; height: 100%; text-align: center; }
.bar-value { color: #8e857c; font-size: 9px; }
.bar-track { display: flex; align-items: flex-end; overflow: hidden; background: #f0ebe4; border-radius: 8px; }
.bar-track i { display: block; width: 100%; min-height: 5px; background: linear-gradient(180deg, #927961, #716052); border-radius: 8px 8px 0 0; }
.bar-item small { color: #9a9289; font-size: 9px; }
.transaction-list { display: grid; }
.transaction-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #e9e2d9; }
.transaction-row:last-child { border-bottom: 0; }
.transaction-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #766351; background: #eee5da; border-radius: 10px; }
.transaction-copy { min-width: 0; }
.transaction-copy strong, .transaction-copy small { display: block; }
.transaction-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy small { color: #989087; font-size: 9px; }
.transaction-row > strong { font-size: 13px; font-weight: 620; }
.transaction-row > strong.income { color: #5f6c60; }
.transaction-row > strong.expense { color: #72574c; }
.finance-form .panel-body { display: grid; gap: 14px; }

.health-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.health-metrics article { padding: 16px; background: rgba(251, 249, 245, 0.9); border: 1px solid #ddd5ca; border-radius: 17px; }
.health-metrics span { display: flex; gap: 6px; align-items: center; color: #928a82; font-size: 10px; }
.health-metrics strong { display: block; margin: 9px 0 4px; font-size: 24px; font-weight: 620; letter-spacing: -0.03em; }
.health-metrics strong small { margin-left: 3px; color: #80786f; font-size: 10px; font-weight: 500; }
.health-metrics em { color: #9a9289; font-size: 9px; font-style: normal; }
.health-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 16px; }
.sleep-content { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
.sleep-ring { display: grid; width: 158px; height: 158px; place-items: center; background: conic-gradient(#7d6c5d var(--sleep), #e7e0d7 0); border-radius: 50%; }
.sleep-ring::before { position: absolute; width: 122px; height: 122px; background: #f8f5f0; border-radius: 50%; content: ""; }
.sleep-ring span { position: relative; z-index: 1; text-align: center; }
.sleep-ring strong, .sleep-ring small { display: block; }
.sleep-ring strong { font-size: 31px; font-weight: 620; }
.sleep-ring small { color: #918980; font-size: 9px; }
.sleep-details { display: grid; gap: 1px; overflow: hidden; background: #e7dfd6; border-radius: 13px; }
.sleep-details p { display: grid; gap: 3px; margin: 0; padding: 12px 14px; background: #f8f5f0; }
.sleep-details strong { font-size: 12px; }
.sleep-details span { color: #958d84; font-size: 9px; }
.weight-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 180px; align-items: end; }
.weight-chart i { display: block; min-height: 8px; background: linear-gradient(180deg, #93806e, #70645a); border-radius: 7px 7px 2px 2px; }
.chart-caption { display: flex; justify-content: space-between; margin-top: 10px; color: #968e85; font-size: 9px; }

.job-list { display: grid; gap: 10px; }
.job-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 18px; background: rgba(251, 249, 245, 0.92); border: 1px solid #ddd5ca; border-radius: 18px; box-shadow: var(--shadow-sm); }
.job-logo { display: grid; width: 48px; height: 48px; place-items: center; color: #f7f3ed; font-size: 18px; font-weight: 650; background: #756557; border-radius: 13px; }
.job-main { min-width: 0; }
.job-title-row { display: flex; gap: 9px; align-items: center; }
.job-title-row h2 { margin: 0; font-size: 15px; font-weight: 610; }
.job-main > p { margin: 4px 0 8px; color: #777068; font-size: 11px; }
.job-actions { display: flex; gap: 7px; align-items: center; }

@media (max-width: 1100px) {
  .bookshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-metrics { grid-template-columns: repeat(3, 1fr); }
  .aesthetic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hot-layout, .review-layout, .study-grid, .finance-layout, .health-layout { grid-template-columns: 1fr; }
  .bookshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aesthetic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-summary { grid-template-columns: repeat(3, 1fr); }
  .health-metrics { grid-template-columns: repeat(3, 1fr); }
  .reader-shell { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .main-nav { display: flex; gap: 2px; overflow-x: auto; overflow-y: visible; }
  .nav-section-label { display: none; }
  .nav-item { flex: 0 0 54px; min-height: 50px; }
  .channel-heading { align-items: flex-start; }
  .sync-status { width: 100%; justify-content: center; }
  .segmented-control { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .segmented-control button, .segmented-control label { width: 100%; }
  .bookshelf { grid-template-columns: 1fr; }
  .book-card { grid-template-columns: 82px minmax(0, 1fr); min-height: 164px; }
  .book-cover { min-height: 130px; }
  .reader-shell { grid-template-columns: 1fr; }
  .reader-cover-wrap { position: static; grid-template-columns: 130px 1fr; align-items: center; }
  .reader-cover { min-height: 180px; padding: 18px 14px; }
  .reader-cover strong { font-size: 19px; }
  .reader-page { min-height: 0; padding: 28px 22px; border-radius: 14px; }
  .chapter-list { grid-template-columns: 1fr; }
  .aesthetic-grid { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .aesthetic-card.wide { grid-column: span 1; }
  .aesthetic-card.tall { grid-row: span 1; }
  .study-status, .finance-summary, .health-metrics { grid-template-columns: 1fr 1fr; }
  .study-status > div:last-child, .finance-summary article:last-child, .health-metrics article:last-child { grid-column: 1 / -1; }
  .sleep-content { grid-template-columns: 1fr; justify-items: center; }
  .job-card { grid-template-columns: 42px minmax(0, 1fr); }
  .job-logo { width: 42px; height: 42px; }
  .job-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.aesthetic-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aesthetic-visual img + .visual-grain { z-index: 1; }
.aesthetic-visual .save-icon, .aesthetic-visual .visual-label { z-index: 2; }
.aesthetic-copy a { display: inline-block; margin-top: 7px; color: #6f5845; font-size: 9px; text-decoration: underline; text-underline-offset: 2px; }
.hot-title-row h2 a { color: inherit; text-decoration: none; }
.hot-title-row h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.button { text-decoration: none; }
.aesthetic-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #302a25; }
.aesthetic-visual video + .visual-grain { pointer-events: none; }
/* Pure black workspace theme */
body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f4f2ef;
  --ink-soft: #aaa7a2;
  --ink-faint: #74716d;
  --surface: #050505;
  --surface-strong: #0c0c0c;
  --surface-muted: #151515;
  --line: #242424;
  --sidebar: #030303;
  --sidebar-soft: #101010;
  --accent: #c9b8a5;
  --accent-dark: #f2ede7;
  --accent-soft: #1b1917;
  --teal: #b8b5af;
  --teal-soft: #161616;
  --blue: #c1bdb7;
  --blue-soft: #181818;
  --danger: #c99386;
  --danger-soft: #251918;
  --warning: #baa58b;
  --warning-soft: #211d18;
  --success: #c8c8c4;
  --success-soft: #191919;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.025), 0 14px 40px rgba(0, 0, 0, 0.35);
  background-color: #050505;
  background-image: radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.055), transparent 24rem);
}

body[data-theme="dark"]::before { background: none; }
body[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #090909, #020202); border-right-color: #1c1c1c; }
body[data-theme="dark"] .brand-mark { color: #f1ece6; background: #151515; box-shadow: none; }
body[data-theme="dark"] .brand small,
body[data-theme="dark"] .nav-section-label { color: #6f6c68; }
body[data-theme="dark"] .nav-item { color: #8f8d89; }
body[data-theme="dark"] .nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.055); }
body[data-theme="dark"] .nav-item.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 2px 0 0 #d6c7b6; }
body[data-theme="dark"] .nav-count { color: #aaa7a2; background: #1b1b1b; }
body[data-theme="dark"] .nav-item.is-active .nav-count { color: #050505; background: #d4c5b4; }
body[data-theme="dark"] .sidebar-note { background: #0d0d0d; border-color: #202020; }
body[data-theme="dark"] .sidebar-note strong { color: #ddd9d4; }
body[data-theme="dark"] .sidebar-note p { color: #777470; }
body[data-theme="dark"] .status-dot { background: #c9b8a5; box-shadow: 0 0 0 4px rgba(201, 184, 165, 0.08); }
body[data-theme="dark"] .topbar { background: rgba(5, 5, 5, 0.84); border-bottom-color: #1d1d1d; backdrop-filter: saturate(1.1) blur(26px); }
body[data-theme="dark"] .context-label,
body[data-theme="dark"] .topbar-context strong { color: #898681; }
body[data-theme="dark"] .icon-button { color: #c6c3be; background: #101010; border-color: #252525; }
body[data-theme="dark"] .icon-button:hover { color: #fff; border-color: #3a3a3a; background: #161616; }
body[data-theme="dark"] .button-primary { color: #050505; background: #f0ebe5; box-shadow: none; }
body[data-theme="dark"] .button-secondary,
body[data-theme="dark"] .button-ghost { color: #cbc8c3; background: #101010; border-color: #282828; }
body[data-theme="dark"] .sync-status { color: #9d9a95; background: #0d0d0d; border-color: #242424; }
body[data-theme="dark"] .page-title { color: #f7f5f2; }
body[data-theme="dark"] .eyebrow { color: #9d8f81; }
body[data-theme="dark"] .page-subtitle { color: #8d8a85; }
body[data-theme="dark"] .segmented-control { background: #101010; border: 1px solid #1e1e1e; }
body[data-theme="dark"] .segmented-control button,
body[data-theme="dark"] .segmented-control label { color: #8c8984; }
body[data-theme="dark"] .segmented-control button.is-active,
body[data-theme="dark"] .segmented-control label:has(input:checked) { color: #fff; background: #242424; box-shadow: none; }
body[data-theme="dark"] .demo-notice { color: #9a9792; background: #0b0b0b; border-color: #202020; }
body[data-theme="dark"] .aesthetic-grid { background: transparent; }
body[data-theme="dark"] .aesthetic-card { background: #090909; border-color: #222; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38); }
body[data-theme="dark"] .aesthetic-visual { background: #111; }
body[data-theme="dark"] .aesthetic-copy strong { color: #f3f0ec; }
body[data-theme="dark"] .aesthetic-copy p,
body[data-theme="dark"] .aesthetic-copy > span { color: #827f7a; }
body[data-theme="dark"] .aesthetic-copy a { color: #c8b7a5; }
body[data-theme="dark"] .save-icon { color: #8c8984; background: rgba(8, 8, 8, 0.72); border-color: #333; }
body[data-theme="dark"] .save-icon:hover,
body[data-theme="dark"] .save-icon.is-saved { color: #fff; background: #2a2521; border-color: #50463e; }
body[data-theme="dark"] .empty-state { color: #aaa7a2; }
body[data-theme="dark"] .empty-state strong { color: #f0ede9; }
body[data-theme="dark"] .empty-state p { color: #777470; }
body[data-theme="dark"] .empty-icon { color: #d0c0ae; background: #171513; }
body[data-theme="dark"] .progress-bar { background: #1d1d1d; }
body[data-theme="dark"] .progress-fill { background: linear-gradient(90deg, #7d7165, #d1c0ad); }
body[data-theme="dark"] .modal,
body[data-theme="dark"] .drawer { color: #f1efec; background: #0b0b0b; border-color: #242424; }
body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .drawer-header,
body[data-theme="dark"] .modal-footer { border-color: #222; }
body[data-theme="dark"] .input,
body[data-theme="dark"] .select,
body[data-theme="dark"] .textarea { color: #f1efec; background: #111; border-color: #2b2b2b; }
body[data-theme="dark"] .input::placeholder,
body[data-theme="dark"] .textarea::placeholder { color: #66635f; }
body[data-theme="dark"] .check-row { background: #111; border-color: #282828; }
body[data-theme="dark"] .quick-chip { color: #95928d; background: #111; border-color: #292929; }
body[data-theme="dark"] .quick-chip:hover,
body[data-theme="dark"] .quick-chip.is-active { color: #fff; background: #24211e; border-color: #51463d; }
body[data-theme="dark"] .toast { color: #0b0b0b; background: #f0ede8; }
body[data-theme="dark"] .toast.is-error { color: #fff; background: #643a32; }

@media (max-width: 640px) {
  body[data-theme="dark"] .sidebar { background: rgba(5, 5, 5, 0.86); border-color: #222; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42); }
  body[data-theme="dark"] .nav-item { color: #8d8a85; }
  body[data-theme="dark"] .nav-item:hover,
  body[data-theme="dark"] .nav-item.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); }
  body[data-theme="dark"] .topbar { background: rgba(5, 5, 5, 0.86); }
}
/* Full workspace dark component coverage */
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .capture-card,
body[data-theme="dark"] .project-card,
body[data-theme="dark"] .search-panel,
body[data-theme="dark"] .search-results,
body[data-theme="dark"] .data-card,
body[data-theme="dark"] .hot-item,
body[data-theme="dark"] .book-card,
body[data-theme="dark"] .study-status > div,
body[data-theme="dark"] .study-card,
body[data-theme="dark"] .finance-summary article,
body[data-theme="dark"] .health-metrics article,
body[data-theme="dark"] .job-card {
  background: rgba(11, 11, 11, 0.96);
  border-color: #242424;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .panel-header,
body[data-theme="dark"] .inbox-row,
body[data-theme="dark"] .search-result,
body[data-theme="dark"] .data-card p,
body[data-theme="dark"] .transaction-row,
body[data-theme="dark"] .review-entry {
  border-color: #232323;
}

body[data-theme="dark"] .stat-icon,
body[data-theme="dark"] .stat-icon.teal,
body[data-theme="dark"] .stat-icon.blue,
body[data-theme="dark"] .data-icon,
body[data-theme="dark"] .study-card-icon,
body[data-theme="dark"] .result-icon,
body[data-theme="dark"] .transaction-icon {
  color: #cbbdaf;
  background: #171513;
}

body[data-theme="dark"] .stat-icon.red { color: #c99487; background: #211716; }
body[data-theme="dark"] .stat-copy span { color: #777470; }
body[data-theme="dark"] .panel-kicker,
body[data-theme="dark"] .text-muted { color: #6f6c68; }
body[data-theme="dark"] .panel-title .count-pill { color: #aaa7a2; background: #1b1b1b; }
body[data-theme="dark"] .task-row:hover { background: rgba(255, 255, 255, 0.035); }
body[data-theme="dark"] .task-row + .task-row::before { background: #202020; }
body[data-theme="dark"] .task-check { color: transparent; background: #0d0d0d; border-color: #3a3a3a; }
body[data-theme="dark"] .task-row.is-done .task-check { color: #050505; background: #d2c3b2; border-color: #d2c3b2; }
body[data-theme="dark"] .task-note { color: #777470; }
body[data-theme="dark"] .badge,
body[data-theme="dark"] .badge.low,
body[data-theme="dark"] .badge.project { color: #aaa7a2; background: #1a1a1a; }
body[data-theme="dark"] .badge.high,
body[data-theme="dark"] .badge.overdue { color: #ca9588; background: #241817; }
body[data-theme="dark"] .badge.medium { color: #c0a98d; background: #211d18; }
body[data-theme="dark"] .badge.focus { color: #d2c3b2; background: #201c18; }
body[data-theme="dark"] .task-action:hover { color: #fff; background: #1b1b1b; }
body[data-theme="dark"] .focus-item { background: #111; border-color: #252525; }
body[data-theme="dark"] .focus-rank { color: #d3c3b2; background: #201c18; }
body[data-theme="dark"] .focus-copy span { color: #777470; }
body[data-theme="dark"] .progress-note { color: #888580; }
body[data-theme="dark"] .inbox-task span { color: #777470; }
body[data-theme="dark"] .project-card h3 { color: #f3f0ec; }
body[data-theme="dark"] .project-card p,
body[data-theme="dark"] .project-next { color: #888580; }
body[data-theme="dark"] .project-detail-hero { background: linear-gradient(135deg, #171411, #050505); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42); }
body[data-theme="dark"] .search-result:hover { background: #141414; }
body[data-theme="dark"] .search-result span { color: #777470; }
body[data-theme="dark"] .data-note { color: #8c8984; background: #111; border-color: #242424; }
body[data-theme="dark"] .filter-tabs { background: #141414; }
body[data-theme="dark"] .filter-tab { color: #85827d; }
body[data-theme="dark"] .filter-tab.is-active { color: #fff; background: #252525; box-shadow: none; }

body[data-theme="dark"] .hot-title-row h2,
body[data-theme="dark"] .hot-title-row h2 a,
body[data-theme="dark"] .book-meta strong,
body[data-theme="dark"] .study-card-copy strong,
body[data-theme="dark"] .finance-summary strong,
body[data-theme="dark"] .health-metrics strong,
body[data-theme="dark"] .job-title-row h2 { color: #f3f0ec; }
body[data-theme="dark"] .hot-rank,
body[data-theme="dark"] .hot-copy > p,
body[data-theme="dark"] .aside-copy,
body[data-theme="dark"] .book-meta > span,
body[data-theme="dark"] .study-card-copy span,
body[data-theme="dark"] .job-main > p { color: #85827d; }

body[data-theme="dark"] .reader-progress { background: #0d0d0d; border-color: #242424; }
body[data-theme="dark"] .reader-page { color: #d8d5d0; background: #0a0a0a; border-color: #242424; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38); }
body[data-theme="dark"] .reader-page > p { color: #aaa7a2; }
body[data-theme="dark"] .reader-author,
body[data-theme="dark"] .reader-cover small { color: #777470; }
body[data-theme="dark"] .chapter-list span { color: #aaa7a2; background: #151515; }

body[data-theme="dark"] .mood-options button { color: #918e89; background: #141414; border-color: #292929; }
body[data-theme="dark"] .mood-options button.is-active { color: #fff; background: #2a2521; border-color: #51463d; }
body[data-theme="dark"] .reflection-input { color: #e8e5e0; }
body[data-theme="dark"] .prompt-list { background: #222; }
body[data-theme="dark"] .prompt-list p { color: #aaa7a2; background: #111; }
body[data-theme="dark"] .review-entry p { color: #85827d; }

body[data-theme="dark"] .study-card.is-active { background: #171513; border-color: #3b332d; box-shadow: inset 3px 0 0 #bda995; }
body[data-theme="dark"] .study-material { color: #b9b6b1; background: #111; border-color: #292929; }
body[data-theme="dark"] .study-task-list label { color: #a09d98; }
body[data-theme="dark"] .bar-track { background: #191919; }
body[data-theme="dark"] .bar-track i { background: linear-gradient(180deg, #a08b77, #574c43); }
body[data-theme="dark"] .transaction-copy small,
body[data-theme="dark"] .bar-item small,
body[data-theme="dark"] .bar-value { color: #777470; }
body[data-theme="dark"] .transaction-row > strong.income { color: #a9b7aa; }
body[data-theme="dark"] .transaction-row > strong.expense { color: #ca9588; }

body[data-theme="dark"] .sleep-ring { background: conic-gradient(#b8a28c var(--sleep), #202020 0); }
body[data-theme="dark"] .sleep-ring::before { background: #0d0d0d; }
body[data-theme="dark"] .sleep-details { background: #242424; }
body[data-theme="dark"] .sleep-details p { background: #111; }
body[data-theme="dark"] .sleep-details span,
body[data-theme="dark"] .chart-caption { color: #777470; }
body[data-theme="dark"] .weight-chart i { background: linear-gradient(180deg, #a18c78, #514941); }

body[data-theme="dark"] .job-logo { color: #050505; background: #cfc0af; }
body[data-theme="dark"] .aesthetic-visual video { background: #000; }
body[data-theme="dark"] select option { color: #f1efec; background: #111; }
body[data-theme="dark"] ::selection { color: #050505; background: #d2c3b2; }
/* iPhone PWA safe areas */
@supports (padding: max(0px)) {
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); }

  @media (max-width: 640px) {
    .view-root { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .sidebar { bottom: max(12px, env(safe-area-inset-bottom)); }
  }
}
.auth-overlay { z-index: 300; }
.auth-modal { z-index: 310; width: min(440px, calc(100vw - 30px)); }
.auth-modal .modal-body { padding-top: 18px; }
.auth-modal .field { gap: 8px; }
.auth-error { margin: 12px 0 0; padding: 10px 12px; color: #f3c7bd; font-size: 11px; background: #2a1816; border: 1px solid #56302a; border-radius: 10px; }
body[data-theme="dark"] .auth-modal { background: #0b0b0b; }
body[data-theme="dark"] .auth-modal .modal-footer { background: #090909; }
.book-cover img,
.reader-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.book-cover-title,
.book-cover-author,
.book-cover-line,
.reader-cover > span,
.reader-cover > strong,
.reader-cover > small { position: relative; z-index: 1; }
.reader-source-link { color: #c9b8a5; text-decoration: underline; text-underline-offset: 4px; }
.epub-reader-page { max-height: calc(100vh - 130px); overflow: auto; }
.epub-content { color: #5f5851; font-family: "Songti SC", SimSun, serif; font-size: 16px; line-height: 2; }
.epub-content h1,
.epub-content h2,
.epub-content h3 { margin: 1.6em 0 .7em; font-family: "Songti SC", SimSun, serif; line-height: 1.45; }
.epub-content p { margin: 0 0 1.25em; }
.epub-content img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 8px; }
.epub-content blockquote { margin: 1.5em 0; padding: 12px 18px; border-left: 2px solid #8a7058; }
.reader-pagination { align-items: center; justify-content: space-between; }
.reader-pagination > span { color: #8f887f; font-size: 11px; }
.reader-pagination .button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
body[data-theme="dark"] .epub-content { color: #b9b6b1; }
body[data-theme="dark"] .epub-content blockquote { border-left-color: #c9b8a5; }