:root {
  color-scheme: light;
  --ink: #29313c;
  --muted: #727c89;
  --accent: #596f9b;
  --accent-strong: #465d8c;
  --accent-soft: #e9edf5;
  --line: #e5e6e4;
  --line-strong: #c9ced3;
  --canvas: #f6f5f2;
  --rail: #efeeea;
  --surface: #fffefa;
  --surface-soft: #f3f2ee;
  --positive: #4f8178;
  --positive-soft: #eaf2ef;
  --warning: #987647;
  --warning-soft: #f5efe4;
  --danger: #a85e68;
  --danger-soft: #f6ebed;
  --series-1: #6e83b0;
  --series-2: #bd795d;
  --status-warning: #9a7845;
  --status-critical: #b34f5b;
  --shadow-soft: 0 8px 24px rgba(35, 43, 56, 0.055);
  --shadow-popover: 0 16px 48px rgba(25, 32, 44, 0.16);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --control-height: 42px;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-fast: 140ms;
  --motion-normal: 200ms;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eceef3;
  --muted: #a0a7b3;
  --accent: #aab9e6;
  --accent-strong: #c1cdf0;
  --accent-soft: #2b3345;
  --line: #343a46;
  --line-strong: #4b5362;
  --canvas: #171a20;
  --rail: #1c2028;
  --surface: #222630;
  --surface-soft: #282d38;
  --positive: #8bbcb1;
  --positive-soft: #263936;
  --warning: #d2b687;
  --warning-soft: #3a3328;
  --danger: #dda1aa;
  --danger-soft: #3c2d34;
  --series-1: #91a6da;
  --series-2: #e29a79;
  --status-warning: #d2b687;
  --status-critical: #ef7b7b;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-popover: 0 18px 54px rgba(0, 0, 0, 0.38);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  font:
    15px/1.5 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 3px;
}
button {
  transition: background 0.12s;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 230px;
  border-right: 1px solid #eceef0;
  padding: 38px 18px 22px;
  display: flex;
  flex-direction: column;
}
.language-control {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  color: #60676d;
  font-size: 13px;
}
.language-control select {
  width: 100%;
  color: #60676d;
  background: #fff;
  border: 1px solid #e5e8e9;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.6px;
  padding: 0 12px;
}
nav {
  display: grid;
}
nav button {
  border: 0;
  background: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
nav button.active {
  font-weight: 550;
}
.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 20px;
}
.badge {
  margin-left: auto;
  font-size: 12px;
  color: #929a9e;
}
.badge:empty {
  display: none;
}
kbd {
  font:
    10px -apple-system,
    sans-serif;
  color: #a3a9ad;
}
.app {
  margin-left: 230px;
}
main {
  max-width: 1000px;
  padding: 68px 64px 70px;
  margin: 0 auto;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0;
}
.today-icon {
  color: #d7b451;
  font-size: 30px;
  margin-right: 8px;
}
.heading-actions {
  display: flex;
  gap: 15px;
}
.text-button {
  border: 0;
  background: none;
  padding: 5px 0;
  font-size: 12px;
  white-space: nowrap;
}
.date {
  text-transform: none;
  margin: 7px 0 36px;
}
.columns {
  display: block;
}
.focus-top {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: #8aa08f;
}
.focus-card h2 {
  font-size: 21px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.35px;
  margin: 8px 0;
}
.next-action {
  font-size: 14px;
  color: #828c85;
  margin: 7px 0 12px;
}
.focus-bottom {
  display: flex;
  align-items: center;
  gap: 18px;
}
.btn {
  border: 0;
  padding: 8px 13px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.primary {
  color: white;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  margin: 0 0 8px;
}
.section-heading h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.section-heading h2 span {
  color: #a4b2a6;
  font-size: 11px;
  font-weight: 400;
  margin-left: 8px;
}
.muted {
  font-size: 11px;
  color: #a1a7a9;
}
.task-row {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 0;
  min-height: 52px;
}
.check {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border: 1.4px solid #bdc5c8;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.task-copy {
  flex: 1;
  min-width: 0;
}
.task-title {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.task-meta {
  font-size: 11px;
  color: #a1a7aa;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.area-dot {
  display: none;
}
.task-status {
  border-radius: 4px;
  font-size: 10px;
  padding: 0 5px;
}
.task-start {
  background: none;
  border: 0;
  padding: 4px 5px;
  font-size: 16px;
}
.task-row.done .task-title {
  text-decoration: line-through;
  color: #a9afb1;
}
.add-row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 0;
  font-size: 21px;
}
.add-row span {
  font-size: 13px;
}
#laterSection {
  margin-top: 38px;
}
.completed-toggle {
  border: 0;
  background: none;
  color: #a0a8aa;
  padding: 23px 0 8px;
  font-size: 12px;
}
.completed-toggle span {
  margin-left: 5px;
}
.empty {
  font-size: 13px;
  line-height: 1.8;
}
.inbox-list {
  margin-top: 35px;
}
.inbox-hint {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 22px 0 4px;
  padding: 16px 18px;
  border: 1px solid #e7ede7;
}
.inbox-hint-icon {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  font-size: 18px;
}
.inbox-hint strong {
  font-size: 13px;
  font-weight: 550;
}
.inbox-hint p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.inbox-item {
  border-bottom: 1px solid var(--line);
}
.inbox-item p {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.inbox-item small {
  font-size: 11px;
  color: #a6adb0;
}
.inbox-actions {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}
.direction-card {
  margin-top: 35px;
}
.direction-card label {
  display: block;
  font-size: 13px;
  color: #8a9491;
}
.direction-card textarea {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  margin: 0 0 20px;
  color: var(--ink);
  line-height: 1.9;
  background: white;
}
.direction-card textarea::placeholder {
  color: #b4bcbb;
}
#visionStatus {
  font-size: 12px;
  color: #8a9d8c;
  margin-left: 10px;
}
dialog {
  padding: 28px;
  width: 460px;
  max-width: calc(100% - 32px);
  max-height: 90vh;
  overflow: auto;
}
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.dialog-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 550;
}
.close {
  border: 0;
  background: none;
  color: #929b97;
  font-size: 23px;
  padding: 0 3px;
}
dialog h2 {
  font-size: 24px;
  font-weight: 550;
  line-height: 1.3;
  margin: 20px 0;
  letter-spacing: -0.5px;
}
dialog label {
  font-size: 12px;
  color: #8b9690;
}
dialog input,
dialog select {
  display: block;
  width: 100%;
  padding: 11px;
  border: 1px solid #e1e7e1;
  border-radius: 5px;
  margin: 7px 0 18px;
  color: var(--ink);
  font-size: 13px;
  background: white;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
dialog p {
  color: #949d97;
  font-size: 13px;
  line-height: 1.7;
}
.plan-choice {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: #4e5d52;
}
.plan-choice input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.plan-choice small {
  display: block;
  font-size: 11px;
  color: #a0aaa3;
  margin-top: 3px;
}
.plan-hint {
  font-size: 12px !important;
  color: #8b9f8f;
}
.capture-dialog {
  width: min(520px, calc(100% - 32px));
  padding: 0;
  border: 1px solid #e4ebe4;
  border-radius: 20px;
  overflow: hidden;
}
.capture-card {
  padding: 26px 30px 22px;
}
.capture-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.capture-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-size: 22px;
}
.capture-eyebrow {
  margin: 22px 0 5px !important;
  color: #86a08a !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 1px;
}
.capture-card h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 550;
  letter-spacing: -0.4px;
}
.capture-description {
  margin: 7px 0 17px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
.capture-card textarea {
  display: block;
  width: 100%;
  min-height: 155px;
  border: 1px solid #e8ede8;
  border-radius: 12px;
  resize: vertical;
  padding: 15px;
  font-size: 14px;
  line-height: 1.7;
}
.capture-card textarea::placeholder {
  color: #a8b0ab;
}
.capture-card textarea:focus {
  outline: 2px solid #b6cbb8;
  outline-offset: 1px;
}
.capture-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.voice-button {
  border: 1px solid #e6ebe6;
  border-radius: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 10px 13px;
}
.capture-save {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 10px 14px;
}
.capture-status {
  font-size: 12px;
  color: #8ba18d;
  margin-top: 8px;
}
.capture-shortcut {
  margin: 12px 0 0 !important;
  color: #a1aaa3 !important;
  font-size: 10px !important;
  text-align: right;
}
.capture-shortcut kbd {
  padding: 2px 5px;
  border: 1px solid #e7ebe7;
  border-radius: 5px;
  background: #fafbfa;
  color: #77827a;
  font-size: 9px;
}
html[dir="rtl"] .capture-shortcut {
  text-align: left;
}
html[dir="rtl"] .view-caption {
  border-left-width: 1px;
  border-right: 3px solid #b2c5b2;
  border-radius: 11px 0 0 11px;
}
@media (max-width: 640px) {
  .capture-card {
    padding: 22px 20px 18px;
  }
  .capture-card textarea {
    min-height: 135px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 11px 18px;
  font-size: 12px;
  max-width: 90%;
}
@media (max-width: 1000px) {
  .sidebar {
    width: 200px;
  }
  .app {
    margin-left: 200px;
  }
  main {
    padding: 55px 35px;
  }
}
@media (max-width: 640px) {
  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    font-size: 20px;
    padding: 0;
  }
  .brand-mark {
    font-size: 24px;
  }
  .nav-icon {
    font-size: 18px;
    width: 18px;
  }
  main {
    padding: 30px 23px 50px;
  }
  h1 {
    font-size: 27px;
  }
  .text-button {
    font-size: 12px;
  }
  .focus-card {
    padding-left: 15px;
    margin-bottom: 32px;
  }
  .focus-card h2 {
    font-size: 20px;
  }
  .next-action {
    font-size: 13px;
  }
  .task-title {
    font-size: 14px;
  }
  .task-start {
    padding: 4px 2px;
  }
  .muted {
    font-size: 10px;
  }
  .inbox-item p {
    font-size: 14px;
  }
}
html[dir="rtl"] .sidebar {
  inset: 0 0 0 auto;
  border-right: 0;
  border-left: 1px solid #eceef0;
}
html[dir="rtl"] .app {
  margin-left: 0;
  margin-right: 230px;
}
html[dir="rtl"] nav button {
  text-align: right;
}
html[dir="rtl"] .badge {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .sidebar-search kbd {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .language-control,
html[dir="rtl"] .language-control select {
  text-align: right;
}
html[dir="rtl"] .money-entry-end,
html[dir="rtl"] .wealth-row-value {
  direction: ltr;
}
@media (max-width: 1000px) {
  html[dir="rtl"] .app {
    margin-right: 200px;
  }
}
@media (max-width: 640px) {
  html[dir="rtl"] .app {
    margin: 0;
  }
  html[dir="rtl"] .sidebar {
    border-left: 0;
  }
}
/* Details open only when needed. */
.task-open {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.task-open:hover {
  color: var(--accent);
}
.task-meta {
  flex-wrap: wrap;
}
.waiting-summary {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#detailDialog {
  width: 620px;
  padding: 29px 34px;
}
.detail-title {
  font-size: 25px;
  line-height: 1.35;
  width: 100%;
  resize: vertical;
  padding: 18px 0 4px;
  min-height: 90px;
  border: 0;
  background: white;
  margin: 0;
}
.detail-properties {
  display: flex;
  gap: 24px;
  margin: 12px 0 27px;
}
.detail-properties label {
  flex: 1;
  color: #9aa49d;
  font-size: 11px;
}
.detail-properties select {
  margin: 5px 0 0;
  border: 0;
  border-bottom: 1px solid #eef0ed;
  border-radius: 0;
  padding: 6px 0;
  font-size: 12px;
  color: #738376;
  background: white;
}
.detail-section {
  margin: 24px 0;
}
.detail-section > label,
.detail-section h3 {
  font-size: 12px;
  font-weight: 550;
  color: #6b8773;
  display: block;
  margin: 0 0 9px;
}
.detail-section > input {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: 7px 0 10px;
  background: white;
  font-size: 14px;
  color: #566259;
}
.detail-section input::placeholder,
.detail-section textarea::placeholder {
  color: #b0b8b2;
}
.detail-section textarea {
  width: 100%;
  resize: vertical;
  padding: 6px 0;
  border: 0;
  min-height: 100px;
  line-height: 1.75;
  color: #59665c;
  font-size: 14px;
  background: white;
}
.detail-section-heading {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.detail-section-heading > span {
  font-size: 10px;
  color: #a0aca2;
}
.detail-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
}
.detail-step label {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4d5c51;
  min-width: 0;
  cursor: pointer;
}
.detail-step label span {
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.detail-step input[type="checkbox"] {
  appearance: auto;
  accent-color: var(--accent);
  height: 16px;
  width: 16px;
  flex: none;
  margin: 3px 0 0;
  padding: 0;
}
.step-done label span {
  text-decoration: line-through;
  color: #aab3ac;
}
.detail-step .text-button {
  font-size: 10px;
  padding: 3px;
  flex: none;
}
.detail-step .step-remove {
  font-size: 17px;
  color: #b6bfb8;
  line-height: 1.2;
}
.step-form {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #adb8ae;
}
.step-form > input {
  min-width: 0;
  flex: 1;
  border: 0;
  border-bottom: 1px solid transparent;
  background: white;
  padding: 8px 0;
  margin: 0;
  font-size: 13px;
}
.step-form > span {
  font-size: 18px;
}
.step-form .text-button {
  font-size: 11px;
}
.detail-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  gap: 15px;
}
.detail-bottom > span {
  font-size: 10px;
  color: #9aaa9d;
}
.task-row.done .task-open {
  color: #a9afb1;
}
@media (max-width: 640px) {
  #detailDialog {
    padding: 24px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
  .detail-title {
    font-size: 23px;
  }
  .detail-properties {
    gap: 16px;
  }
  .detail-step label {
    font-size: 13px;
  }
}
.money-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 30px 0 32px;
}
.money-toolbar > div {
  display: flex;
  align-items: center;
  gap: 17px;
}
.money-toolbar input[type="month"],
.money-toolbar select {
  border: 0;
  background: white;
  color: #87938b;
  font-size: 12px;
  padding: 5px 0;
  max-width: 180px;
}
.all-time {
  font-size: 11px;
  color: #9da69f;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.all-time input {
  accent-color: var(--accent);
}
.money-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 25px;
  padding-bottom: 27px;
  border-bottom: 1px solid var(--line);
}
.money-summary span {
  display: block;
  font-size: 12px;
  color: #9ca69f;
  margin-bottom: 7px;
}
.money-summary strong {
  display: block;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.money-summary > div:first-child strong {
  color: #568369;
}
.money-pending {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  color: #a4aa9f;
  font-size: 11px;
  margin: 16px 0 42px;
}
.money-pending strong {
  font-weight: 400;
  color: #8f9b89;
  margin-left: 7px;
}
.money-list-heading {
  margin-bottom: 0;
}
.money-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.money-arrow {
  color: #a4aaa7;
  font-size: 20px;
  align-self: flex-start;
}
.money-entry-main {
  flex: 1;
  text-align: left;
  padding: 0;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 14px;
}
.money-entry-main > span {
  display: block;
  overflow-wrap: anywhere;
}
.money-entry-main small {
  display: block;
  font-size: 11px;
  color: #a2aba4;
  margin-top: 5px;
}
.money-entry-end {
  text-align: right;
  max-width: 45%;
}
.money-entry-end strong {
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.money-entry-end .text-button {
  display: block;
  font-size: 10px;
  margin-left: auto;
}
.money-footnote {
  font-size: 10px;
  color: #b1b8b0;
  margin-top: 25px;
}
.money-empty {
  padding: 30px 0;
}
.money-form-row {
  display: flex;
  gap: 18px;
  margin-top: 16px;
}
.money-form-row label {
  flex: 1;
  min-width: 0;
}
.money-form-row input,
.money-form-row select {
  margin-bottom: 4px;
}
.money-dialog-actions #deleteMoney {
  margin-right: auto;
  color: #b08e80;
}
.money-error {
  font-size: 12px !important;
  color: #b57766 !important;
}
.money-dialog-actions {
  gap: 10px;
}
#moneyUndo {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 12px;
  color: #9aa99c;
  padding: 15px 0;
}
@media (max-width: 640px) {
  .money-toolbar {
    margin: 27px 0;
  }
  .money-toolbar > div {
    gap: 8px;
    flex-wrap: wrap;
  }
  .money-toolbar select {
    max-width: 120px;
    font-size: 11px;
  }
  .money-toolbar input[type="month"] {
    font-size: 11px;
    max-width: 130px;
  }
  .money-summary {
    grid-template-columns: 1fr 1fr;
  }
  .money-summary > div:last-child {
    grid-column: 1/-1;
    margin-top: 8px;
  }
  .money-summary strong {
    font-size: 24px;
  }
  .money-pending {
    gap: 12px;
    margin-bottom: 30px;
  }
  .money-entry {
    gap: 9px;
  }
  .money-entry-main {
    font-size: 13px;
  }
  .money-entry-end strong {
    font-size: 12px;
  }
  .money-entry-end .text-button {
    font-size: 9px;
  }
  .money-form-row {
    gap: 12px;
  }
}
.nav-divider {
  height: 1px;
  margin: 18px 12px;
}
.inbox-icon {
  color: #719bc0;
}
.today-color {
  color: #c5ac63;
}
.anytime-icon {
  color: #639f91;
}
.someday-icon {
  color: #adb777;
}
.logbook-icon {
  color: #709785;
}
.hobbies-icon {
  color: #aa91b0;
}
.view-symbol {
  font-size: 27px;
  font-weight: 400;
  display: inline-block;
  margin-right: 8px;
  vertical-align: 1px;
}
.someday-tag {
  font-size: 10px;
  padding: 0 5px;
  border-radius: 3px;
}
.logbook-group {
  margin-bottom: 30px;
}
.logbook-group .section-heading h2 {
  font-size: 12px;
  color: #8fa297;
}
.detail-schedule {
  display: flex;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.detail-schedule > label {
  font-size: 11px;
  color: #9aa49d;
}
.detail-schedule select {
  width: auto;
  flex: 1;
  border: 0;
  margin: 0;
  padding: 8px 0;
  font-size: 12px;
  color: #738376;
  background: white;
}
.task-row.done .task-meta {
  display: flex;
}
.task-row.done .task-meta .waiting-summary,
.task-row.done .task-meta .step-count {
  display: none;
}
@media (max-width: 640px) {
  nav {
    padding-bottom: 3px;
  }
  nav button {
    font-size: 12px;
    gap: 6px;
  }
  nav .nav-divider {
    height: 20px;
    width: 1px;
    flex: 0 0 1px;
    margin: 8px 3px;
  }
  .sidebar {
    padding-left: 13px;
    padding-right: 13px;
  }
  .brand {
    padding-left: 7px;
  }
  .view-symbol {
    font-size: 25px;
  }
}
#wealthCurrency {
  border: 0;
  background: white;
  color: #859287;
  font-size: 12px;
  padding: 3px;
}
.money-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin: 30px 0 34px;
  padding-bottom: 0;
  scrollbar-width: thin;
}
.money-tabs button {
  flex: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 0 13px;
  background: none;
  font-size: 12px;
}
.net-worth {
  margin: 0 0 33px;
}
.net-worth > span {
  font-size: 12px;
  color: #929e95;
}
.net-worth > strong {
  display: block;
  font-size: 38px;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 5px 0;
}
.net-worth p {
  color: #a1aba3;
  font-size: 11px;
}
.wealth-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 45px;
}
.wealth-total {
  border-top: 1px solid var(--line);
  text-align: left;
  min-width: 0;
}
.wealth-total > span {
  font-size: 11px;
  color: #9aa59c;
}
.wealth-total > strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.wealth-total > small {
  font-size: 10px;
  color: #a8b1a9;
}
.wealth-row {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.wealth-row-main {
  border: 0;
  background: none;
  text-align: left;
  flex: 1;
  min-width: 0;
  color: #4d6052;
  padding: 0;
  font-size: 14px;
}
.wealth-row-main span {
  display: block;
  overflow-wrap: anywhere;
}
.wealth-row-main small {
  display: block;
  font-size: 11px;
  color: #a2aca4;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 450px;
}
.wealth-row > strong {
  font-size: 14px;
  font-weight: 500;
}
.wealth-row .text-button {
  padding: 4px;
}
.cashflow-heading {
  text-align: right;
}
#wealthNote {
  width: 100%;
  border: 1px solid #e1e7e1;
  border-radius: 5px;
  padding: 10px;
  margin-top: 7px;
  resize: vertical;
  font-size: 13px;
  color: var(--ink);
}
#wealthRemove {
  margin-right: auto;
  color: #b08e80;
}
#wealthUndo {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #eff4ed;
  border: 1px solid #dfe8da;
  border-radius: 7px;
  padding: 10px 17px;
  display: flex;
  gap: 17px;
  font-size: 12px;
  color: #7b907e;
  z-index: 9;
}
#wealthUndoButton {
  color: #487051;
}
@media (max-width: 850px) {
  .wealth-totals {
    grid-template-columns: repeat(2, 1fr);
  }
  .net-worth > strong {
    font-size: 34px;
  }
  .wealth-row > strong {
    font-size: 13px;
  }
}
@media (max-width: 640px) {
  .wealth-total > strong {
    font-size: 19px;
  }
  .wealth-row {
    gap: 9px;
  }
  .wealth-row-main {
    font-size: 13px;
  }
  .wealth-row > strong {
    font-size: 12px;
  }
  .net-worth p {
    line-height: 1.7;
  }
}
.worth-breakdown {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #a1aca2;
  margin: 13px 0;
}
.worth-breakdown strong {
  font-weight: 400;
  color: #738b79;
  margin-left: 7px;
}
.net-worth > strong.negative-worth {
  color: #af8e77;
}
.wealth-list-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 23px 0 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.wealth-list-tools input {
  border: 0;
  padding: 5px 0;
  color: #546a58;
  background: white;
  font-size: 12px;
  max-width: 55%;
  min-width: 0;
}
.wealth-list-tools input::placeholder {
  color: #aab4ad;
}
.wealth-list-tools .muted {
  text-align: right;
  line-height: 1.6;
}
#wealthList {
  margin-top: 4px;
}
.wealth-row-value {
  text-align: right;
  max-width: 40%;
}
.wealth-row-value > strong {
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.wealth-row-value > small {
  display: block;
  font-size: 9px;
  color: #afb8b0;
  margin-top: 5px;
}
.settled-label {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  background: #f1f5ee;
  color: #8aa180;
  border-radius: 3px;
  padding: 2px 5px;
  margin-left: 8px;
  vertical-align: 1px;
}
.wealth-welcome {
  padding: 20px 0 26px;
}
.wealth-welcome p {
  color: #a0aca1;
  font-size: 12px;
  line-height: 1.8;
  margin: 0 0 18px;
}
.wealth-welcome > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wealth-welcome .btn {
  font-size: 11px;
  background: #f3f6f0;
  color: #7c927e;
}
#exportMoney:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 640px) {
  #money > .page-heading {
    flex-wrap: wrap;
  }
  #money .heading-actions {
    gap: 16px;
  }
  .wealth-row-value > strong {
    font-size: 12px;
  }
  .wealth-list-tools {
    gap: 12px;
  }
  .wealth-list-tools .muted {
    font-size: 10px;
  }
  .wealth-list-tools input {
    max-width: 50%;
  }
  .settled-label {
    display: block;
    background: none;
    padding: 0;
    margin: 4px 0 0;
  }
  .worth-breakdown {
    gap: 15px;
  }
}
.upcoming-icon {
  color: #b38191;
}
.task-planning-options {
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.task-planning-options summary {
  font-size: 12px;
  color: #899d8d;
  cursor: pointer;
}
.task-planning-options summary span {
  font-size: 10px;
  color: #aab5ad;
  margin-left: 12px;
}
.planning-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: 18px;
}
.planning-fields label {
  font-size: 11px;
  color: #93a197;
}
.planning-fields input,
.planning-fields select {
  margin: 5px 0 9px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: white;
  font-size: 12px;
  color: #6c8272;
}
.planning-note {
  font-size: 10px !important;
  color: #a8b4aa !important;
  line-height: 1.8 !important;
}
.date-tag {
  font-size: 10px;
}
.overdue-date {
  color: #b28c75;
}
.save-template {
  margin-bottom: 18px;
  font-size: 11px;
}
.template-row {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.template-row > div {
  flex: 1;
}
.template-row h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
.template-row p {
  font-size: 11px;
  color: #9daaa0;
  margin: 5px 0 0;
}
.template-preview {
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: #98a89c !important;
}
.sidebar {
  overflow-y: auto;
}
.task-meta .date-tag {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .planning-fields {
    gap: 6px 16px;
  }
  .sidebar {
    overflow-y: visible;
  }
  .template-row h2 {
    font-size: 14px;
  }
  .template-row .text-button {
    font-size: 11px;
  }
}
/* Quiet secondary tools, with the same soft shapes as the task list. */
.sidebar-search {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0 18px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.sidebar-search kbd {
  margin-left: auto;
  font-size: 11px;
}
.sidebar-search > span {
  font-size: 23px;
}
.sidebar-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto auto 0;
  font-size: 12px;
  color: #7d858b;
}
.sidebar-settings:hover {
  color: var(--ink);
}
.storage-notice {
  padding: 14px 18px;
  background: #fff4db;
  border: 1px solid #ead7ac;
  border-radius: 12px;
  margin-bottom: 24px;
  color: #654e25;
}
.storage-notice p {
  margin: 0 0 6px;
}
.week-navigation {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 34px 0 20px;
}
.week-navigation h2 {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}
.week-navigation > button {
  font-size: 19px;
}
.week-navigation #currentWeek {
  font-size: 12px;
}
.weekly-goal {
  padding: 20px 22px;
  margin: 12px 0;
  background: #f4f6f1;
  border: 1px solid #e8ece4;
}
.goal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.goal-top label {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
  margin: 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
}
.goal-top input {
  width: 17px;
  height: 17px;
  accent-color: #6a826b;
  flex-shrink: 0;
}
.goal-done .goal-top span {
  text-decoration: line-through;
  color: #798278;
}
.weekly-goal details {
  margin: 12px 0 0 29px;
  font-size: 13px;
  color: #667063;
}
.weekly-goal summary,
.vision-details summary {
  cursor: pointer;
  list-style: none;
}
.weekly-goal summary::-webkit-details-marker,
.vision-details summary::-webkit-details-marker {
  display: none;
}
.weekly-goal summary span,
.vision-details summary span {
  float: right;
}
.goal-tasks {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.goal-tasks > button {
  text-align: left;
}
.goal-tasks label {
  font-size: 12px;
}
.goal-tasks select {
  margin-top: 7px;
}
.vision-details {
  border-top: 1px solid #e7eae3;
  margin-top: 36px;
  padding-top: 24px;
}
.vision-details > summary {
  font-size: 16px;
  font-weight: 500;
}
.vision-details .direction-card {
  margin-top: 20px;
}
.search-result {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #eef0eb;
  border-radius: 8px;
  background: transparent;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.search-result:hover,
.search-result:focus-visible {
  background: #eff3eb;
}
.search-result span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result small {
  display: block;
  color: #737e73;
  margin-top: 5px;
}
#searchResults {
  max-height: 50vh;
  overflow: auto;
}
#searchDialog {
  width: min(600px, calc(100vw - 32px));
}
.settings-backup {
  margin-top: 22px;
  border-top: 1px solid #e7eae3;
  padding-top: 14px;
}
.settings-links {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}
.settings-links h3 {
  margin: 0 0 2px;
  color: #8b9690;
  font-size: 12px;
  font-weight: 500;
}
.settings-links button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #edf0ed;
  border-radius: 9px;
  background: #fafbf9;
  color: #59655d;
  text-align: left;
  font-size: 13px;
}
.settings-links button:hover {
  background: #f0f4ef;
}
.settings-backup summary {
  cursor: pointer;
  color: #59655d;
  font-size: 14px;
}
.settings-backup hr {
  border: 0;
  border-top: 1px solid #e7eae3;
  margin: 26px 0;
}
#backupStatus {
  font-size: 14px;
  line-height: 1.6;
}
button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 2px solid #769979;
  outline-offset: 4px;
}
@media (max-width: 700px) {
  .sidebar-search {
    margin: 8px 0;
  }
  .week-navigation {
    gap: 6px;
  }
  .week-navigation h2 {
    font-size: 13px;
  }
  .weekly-goal {
    padding: 17px;
  }
  .goal-top label {
    font-size: 16px;
  }
}
.list-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  color: #647064;
  font-size: 13px;
}
.list-pages button:disabled {
  opacity: 0.4;
  cursor: default;
}
#planSearch {
  margin-bottom: 16px;
}
/* Calm visual system shared by every section. */
.brand {
  margin-bottom: 36px;
}
nav {
  gap: 6px;
}
nav button {
  border-radius: 11px;
  padding: 10px 13px;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}
.sidebar-search {
  border-radius: 12px;
  transition:
    background 160ms ease,
    transform 160ms ease;
}
.sidebar-search:hover {
  transform: translateY(-1px);
}
.sidebar-settings {
  border-radius: 9px;
  padding: 8px 10px;
}
.app main {
  max-width: 1080px;
  padding-top: 52px;
}
h1 {
  color: #27332c;
}
.page-heading {
  margin-bottom: 4px;
}
.date {
  margin-bottom: 24px;
  color: #89958b;
}
.today-overview {
  display: grid;
  align-items: center;
  margin: 0 0 24px;
  border: 1px solid #e3ebe2;
}
.today-overview-intro {
  display: flex;
  align-items: center;
}
.overview-spark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
}
.today-overview-intro strong {
  font-weight: 600;
}
.today-overview-intro p {
  margin: 3px 0 0;
  color: #849087;
  line-height: 1.5;
}
.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.overview-stat {
  min-width: 0;
  text-align: left;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}
.overview-stat > span,
.overview-stat > small {
  display: block;
  color: #829086;
  font-size: 10px;
}
.overview-stat > strong {
  display: inline-block;
  margin: 2px 5px 0 0;
  font-weight: 600;
  line-height: 1.2;
}
.overview-stat > small {
  display: inline;
}
.commitments {
  margin-top: 12px;
  padding: 19px 22px 15px;
  border: 1px solid #e9ede9;
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.section-heading h2 {
  color: #506d56;
}
.task-row {
  margin: 2px -8px;
  padding: 12px 8px;
  border-radius: 11px;
}
.task-row:hover {
  background: #f7f9f6;
}
.check {
  border-radius: 6px;
}
.check:hover {
  transform: scale(1.08);
}
.task-title {
  transition: color 150ms ease;
}
.task-title:hover {
  color: #4c7557;
}
.add-row {
  border-radius: 10px;
  padding: 12px 8px;
  transition:
    background 150ms ease,
    color 150ms ease;
}
.focus-card {
  margin: 0 0 18px;
  padding: 20px 22px;
  border: 1px solid #e0e9e0;
  border-left: 3px solid #85a889;
  border-radius: 16px;
}
.btn {
  transition:
    transform 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.primary {
  background: #52765c;
  box-shadow: 0 3px 8px rgba(55, 94, 64, 0.12);
}
.primary:hover {
  background: #42674d;
  box-shadow: 0 5px 12px rgba(55, 94, 64, 0.18);
}
.secondary {
  background: #edf2ed;
  color: #586b5c;
}
.secondary:hover {
  background: #e4ece4;
}
.text-button {
  border-radius: 8px;
  transition:
    color 150ms ease,
    background 150ms ease;
}
.view-caption {
  border-left: 3px solid #b2c5b2;
}
.inbox-hint {
  border-radius: 15px;
}
.inbox-hint-icon {
  border-radius: 11px;
}
.inbox-item {
  margin: 10px 0;
  padding: 16px 18px;
  border: 1px solid #e9eee9;
  border-radius: 13px;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}
.inbox-item:hover {
  transform: translateY(-1px);
}
.inbox-item p {
  margin-top: 0;
}
.section-task-list {
  margin-top: 22px;
}
.empty {
  padding: 22px 18px;
  border: 1px dashed #dce6dc;
  border-radius: 14px;
}
dialog {
  border: 1px solid #e3ebe3;
  border-radius: 20px;
}
dialog input,
dialog select,
dialog textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="month"],
textarea,
select {
  border-color: #e2e9e2;
  border-radius: 10px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}
.money-tabs {
  gap: 18px;
  margin-top: 24px;
}
.money-tabs button {
  border-radius: 9px 9px 0 0;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}
.money-tabs button[aria-selected="true"] {
  border-bottom-color: #7ca184;
}
.net-worth {
  padding: 23px 25px;
  border: 1px solid #e2ebe1;
}
.wealth-totals {
  gap: 12px;
}
.wealth-total {
  padding: 16px;
  border: 1px solid #e8ede8;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}
.wealth-total:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.wealth-row:hover {
  background: #fbfcfa;
}
.money-entry:hover {
  background: #fbfcfa;
}
.weekly-goal {
  box-shadow: 0 5px 18px rgba(48, 69, 53, 0.04);
}
.weekly-goal:nth-child(3n + 2) {
  background: #f4f2f7;
  border-color: #e9e5ef;
}
.weekly-goal:nth-child(3n) {
  background: #f8f4ed;
  border-color: #eee6d8;
}
.template-row {
  padding: 18px 14px;
  transition: background 160ms ease;
}
#toast {
  border-radius: 12px;
}
@keyframes viewEnter {
  from {
    opacity: 0.55;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes rowEnter {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .commitments {
    padding: 15px 13px 12px;
    border-radius: 14px;
  }
  .focus-card {
    padding: 16px;
  }
  .wealth-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Things-inspired inline capture and task composer. */
.task-composer-mount,
.capture-composer-mount {
  margin: 16px 0 22px;
}
.inline-task-composer,
.inline-capture-card {
  border: 1px solid #e4e9e5;
  padding: 19px 21px 16px;
  animation: composer-in 180ms ease-out both;
}
.composer-heading,
.inline-capture-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.inline-capture-heading p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.composer-title {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 0 5px;
  font-size: 21px;
  font-weight: 560;
  letter-spacing: -0.3px;
}
.composer-title::placeholder,
.inline-capture-card textarea::placeholder,
#composerNotes::placeholder {
  color: #a8b0ab;
  font-weight: 400;
}
#composerNotes,
#composerSteps,
.inline-capture-card textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--ink);
  line-height: 1.6;
}
#composerNotes {
  min-height: 55px;
  padding: 5px 0 12px;
}
.inline-capture-card textarea {
  min-height: 115px;
  padding: 19px 0 12px;
}
.inline-capture-card .capture-controls {
  margin-top: 10px;
}
.composer-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.composer-when,
.composer-option > summary {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
  cursor: pointer;
}
.composer-option > summary::-webkit-details-marker {
  display: none;
}
.composer-when > span:first-child,
.composer-option > summary > span {
  color: var(--accent);
  font-size: 15px;
}
.composer-when select,
.composer-option input,
.composer-option select {
  border: 0;
  background: transparent;
  font-size: 12px;
  outline: 0;
}
.composer-option {
  position: relative;
}
.composer-option[open] {
  flex: 1 1 100%;
}
.composer-option[open] > summary {
  display: inline-flex;
  margin-bottom: 9px;
}
.composer-option > input,
.composer-option > textarea,
.composer-option > select {
  display: block;
  width: min(100%, 430px);
  border: 1px solid #e4e9e5;
  border-radius: 9px;
  padding: 9px 11px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
#composerSteps {
  min-height: 72px;
}
.composer-date-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #7e8982;
  font-size: 12px;
}
.composer-date-wrap input {
  border: 1px solid #e4e9e5;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  color: var(--ink);
}
.composer-hint {
  margin: 11px 0 0;
  font-size: 11px;
}
.composer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 13px;
  margin-top: 11px;
}
.composer-actions .btn {
  min-height: 38px;
  padding: 8px 13px;
}
.task-tag {
  display: inline-block;
  border: 1px solid #dfe6df;
  border-radius: 999px;
  padding: 1px 7px;
  color: #687d70;
  font-size: 10px;
}
@keyframes composer-in {
  from {
    opacity: 0.65;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.detail-section #detailTags {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid #e1e7e1;
  border-radius: 8px;
  color: var(--ink);
  background: white;
}
html[data-theme="dark"] .composer-when select,
html[data-theme="dark"] .composer-option input,
html[data-theme="dark"] .composer-option select,
html[data-theme="dark"] #composerNotes,
html[data-theme="dark"] #composerSteps,
html[data-theme="dark"] .inline-capture-card textarea,
html[data-theme="dark"] .detail-section #detailTags {
  color: #e2e8e4;
  background: #1b241e;
  border-color: #3b4b3f;
}
html[data-theme="dark"] .composer-title {
  color: #e2e8e4;
  background: transparent;
}
html[data-theme="dark"] .composer-hint,
html[data-theme="dark"] .inline-capture-heading p {
  color: #aab8ac;
}
@media (max-width: 640px) {
  .inline-task-composer,
  .inline-capture-card {
    padding: 16px 14px 13px;
  }
  .composer-toolbar {
    gap: 7px;
  }
  .composer-when {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .composer-option > input,
  .composer-option > textarea,
  .composer-option > select {
    width: 100%;
  }
}
.theme-control {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  color: #7e8b81;
  font-size: 12px;
}
.theme-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e8ede8;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.theme-switch input {
  appearance: none;
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease;
}
.theme-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(28, 47, 31, 0.22);
  transition: transform 180ms ease;
}
.theme-switch input:checked::after {
  transform: translateX(16px);
}
html[dir="rtl"] .theme-switch input::after {
  left: auto;
  right: 3px;
}
html[dir="rtl"] .theme-switch input:checked::after {
  transform: translateX(-16px);
}
/* Settings window inspired by the compact macOS-style reference. */
#settingsDialog {
  width: min(1120px, calc(100vw - 28px));
  height: min(820px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #dfe4df;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
}
.settings-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.settings-rail {
  min-width: 0;
  padding: 24px 14px;
  overflow-y: auto;
  border-right: 1px solid #e1e4e1;
}
.settings-rail-heading {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding: 0 9px 20px;
}
.settings-rail-heading h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.55px;
}
.settings-window-close {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff6258;
}
.settings-window-close:hover {
  background: #ff766d;
}
.settings-nav {
  display: grid;
  gap: 5px;
}
.settings-nav button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 520;
}
.settings-nav button > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  flex: 0 0 24px;
  font-size: 19px;
}
.settings-nav button[aria-selected="true"] {
  font-weight: 620;
}
.settings-main {
  min-width: 0;
  overflow: auto;
  padding: clamp(28px, 6vw, 68px);
}
.settings-panel {
  width: min(680px, 100%);
  margin: 12px auto 48px;
}
.settings-panel[data-settings-panel="features"] {
  width: min(1100px, 100%);
}
.settings-panel[hidden] {
  display: none;
}
.settings-kicker {
  margin: 0 0 12px !important;
  color: #99a09c !important;
  font-size: 10px !important;
  font-weight: 650;
  letter-spacing: 1.2px;
}
.settings-panel > h3 {
  margin: 0;
  color: #262c29;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.8px;
}
.settings-intro {
  margin: 10px 0 30px !important;
  color: #818985 !important;
  font-size: 14px !important;
}
.settings-summary-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border: 1px solid #e8ece8;
  border-radius: 15px;
  background: #fafbfa;
}
.settings-summary-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  color: #62816a;
  background: #edf3ed;
  font-size: 22px;
}
.settings-summary-card strong {
  color: #303733;
  font-size: 14px;
}
.settings-summary-card p {
  margin: 5px 0 0 !important;
  color: #858e89 !important;
  font-size: 12px !important;
}
.settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0;
  padding: 19px 20px;
  border: 1px solid #e7ebe7;
  border-radius: 14px;
  background: #fafbfa;
  cursor: pointer;
}
.settings-option strong,
.settings-option small {
  display: block;
}
.settings-option strong {
  color: #303733;
  font-size: 14px;
  font-weight: 600;
}
.settings-option small {
  margin-top: 4px;
  color: #8b938f;
  font-size: 12px;
}
.settings-option > input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
.feature-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
[data-feature-nav][hidden],
.optional-nav-divider[hidden] {
  display: none !important;
}
.feature-setting-card {
  min-width: 0;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--line);
}
.feature-setting-copy {
  display: flex;
  min-height: 64px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.feature-setting-copy h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.feature-setting-copy p {
  margin: 5px 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.feature-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  cursor: pointer;
}
.feature-switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.feature-switch span {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #dfe5df;
  transition: background 0.18s ease;
  pointer-events: none;
}
.feature-switch span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #25352a33;
  transition: transform 0.18s ease;
}
.feature-switch input:checked + span::after {
  transform: translateX(18px);
}
.feature-switch input:focus-visible + span {
  outline: 2px solid #86ad96;
  outline-offset: 3px;
}
.feature-switch input:disabled + span {
  opacity: 0.55;
}
.feature-preview {
  position: relative;
  display: flex;
  height: 142px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.preview-calendar {
  background: linear-gradient(135deg, #a9c8ff, #638cdd);
}
.preview-window {
  position: absolute;
  inset: 17px 11px -17px 25px;
  padding: 9px 10px;
  border-radius: 9px 9px 0 0;
  background: #fff;
  box-shadow: 0 7px 18px #233d6b20;
}
.preview-topline {
  display: flex;
  gap: 4px;
  height: 10px;
  margin-bottom: 9px;
}
.preview-topline i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dfe7f8;
}
.preview-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.preview-calendar-grid b {
  height: 15px;
  border: 1px solid #edf0f5;
  border-radius: 2px;
  background: #fff;
}
.preview-calendar-grid b:nth-child(9n) {
  background: #ffccb8;
  border-color: #ffccb8;
}
.preview-calendar-grid b:nth-child(13n) {
  background: #ffe0a6;
  border-color: #ffe0a6;
}
.preview-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #9bd9f1, #52b9d8);
}
.preview-quadrant {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-content: center;
  gap: 7px;
  padding: 9px;
  border-radius: 7px;
  background: #ffffffed;
}
.preview-quadrant i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff777b;
}
.preview-quadrant span {
  height: 5px;
  border-radius: 4px;
  background: #edf0f2;
}
.preview-quadrant span:first-of-type {
  width: 70%;
  background: #ffd5d5;
}
.preview-quadrant.q-two i {
  background: #ffbd48;
}
.preview-quadrant.q-two span:first-of-type {
  background: #ffe5ae;
}
.preview-quadrant.q-three i {
  background: #7596ff;
}
.preview-quadrant.q-three span:first-of-type {
  background: #cfdaff;
}
.preview-quadrant.q-four i {
  background: #59c8a8;
}
.preview-quadrant.q-four span:first-of-type {
  background: #c8f0e4;
}
.preview-pomodoro {
  justify-content: space-evenly;
  background: linear-gradient(135deg, #ffb39b, #ff786d);
}
.preview-timer {
  display: grid;
  width: 102px;
  height: 102px;
  place-content: center;
  justify-items: center;
  border: 5px solid #e8edf1;
  border-radius: 50%;
  background: #fff;
}
.preview-timer strong {
  font-size: 13px;
  font-weight: 550;
}
.preview-timer i {
  display: grid;
  width: 23px;
  height: 17px;
  margin-top: 8px;
  place-items: center;
  border-radius: 9px;
  color: white;
  background: #648cff;
  font-size: 8px;
  font-style: normal;
}
.preview-side {
  display: grid;
  width: 35%;
  gap: 8px;
}
.preview-side b {
  height: 24px;
  border-radius: 5px;
  background: #ffffff9e;
}
.preview-side span {
  width: 75%;
  height: 7px;
  border-radius: 5px;
  background: #ffffff9e;
}
.preview-habits {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 17px;
  background: linear-gradient(135deg, #a6ebbd, #4bd3a6);
}
.preview-week,
.preview-habit-row {
  display: grid;
  grid-template-columns: 18px repeat(7, 1fr);
  align-items: center;
  gap: 5px;
}
.preview-week {
  color: #a5adb1;
  font-size: 7px;
  text-align: center;
}
.preview-week span:first-child {
  visibility: hidden;
}
.preview-habit-row {
  height: 22px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #ffffffed;
}
.preview-habit-row i {
  color: #68ccdd;
  font-size: 11px;
  font-style: normal;
}
.preview-habit-row:nth-of-type(3) i {
  color: #ffbd60;
}
.preview-habit-row:nth-of-type(4) i {
  color: #ff8595;
}
.preview-habit-row b {
  width: 17px;
  height: 4px;
  border-radius: 4px;
  background: #ebeff2;
}
.preview-habit-row em {
  display: grid;
  width: 10px;
  height: 10px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #6f93ff;
  font-size: 7px;
  font-style: normal;
}
.preview-habit-row em:empty {
  background: #eef1f4;
}
.preview-countdown {
  gap: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #a9c8ff, #728ce4);
}
.preview-date-card {
  display: grid;
  min-width: 0;
  flex: 1;
  justify-items: center;
  gap: 2px;
  padding: 10px 3px;
  border-radius: 8px;
  background: #ffffffed;
}
.preview-date-card i {
  color: #ffae52;
  font-style: normal;
  font-size: 12px;
}
.preview-date-card span {
  width: 60%;
  height: 4px;
  border-radius: 4px;
  background: #e9edf2;
}
.preview-date-card b {
  color: #6689f3;
  font-size: 19px;
}
.preview-date-card small {
  color: #a4aab0;
  font-size: 6px;
  letter-spacing: 0.5px;
}
.preview-ai {
  background: linear-gradient(135deg, #92c3fa, #8ee2df);
}
.preview-ai-panel {
  display: flex;
  width: 82%;
  height: 92px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #ffffffed;
}
.preview-ai-panel > i {
  color: #648cff;
  font-size: 24px;
  font-style: normal;
}
.preview-ai-panel div {
  display: grid;
  flex: 1;
  gap: 7px;
}
.preview-ai-panel b {
  height: 6px;
  border-radius: 5px;
  background: #e9edf3;
}
.preview-ai-panel b:first-child {
  width: 42%;
  background: #cad8ff;
}
.preview-ai-panel b:last-child {
  width: 76%;
}
.preview-ai-panel > span {
  color: #74a9ff;
  font-size: 20px;
}
.feature-ai-card {
  opacity: 0.78;
}
#settingsDialog.features-layout {
  width: min(1450px, calc(100vw - 28px));
}
@media (min-width: 701px) and (max-width: 1000px) {
  .feature-settings {
    grid-template-columns: 1fr;
  }
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
.calendar-weekday {
  padding: 9px 4px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: 650;
}
.calendar-day {
  min-height: 104px;
  padding: 9px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.calendar-day > strong {
  display: block;
  margin-bottom: 6px;
}
.calendar-day > button {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 3px 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.calendar-day > small {
  color: var(--muted);
  font-size: 10px;
}
.matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.matrix-quadrant,
.feature-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.matrix-quadrant h2 {
  margin: 0;
  font-size: 17px;
}
.matrix-quadrant > p,
.timer-card > p {
  color: var(--muted);
  font-size: 13px;
}
.matrix-task-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.matrix-task {
  flex: 1;
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: left;
}
.matrix-flag {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
}
.timer-card {
  width: min(480px, 100%);
  margin: 20px auto;
  text-align: center;
}
.timer-display {
  padding: 22px 0;
  font-size: clamp(56px, 10vw, 86px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -3px;
}
.timer-presets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}
.timer-presets button {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.feature-form {
  display: flex;
  gap: 9px;
  margin: 18px 0;
}
.feature-form input:first-child {
  flex: 1;
}
.feature-list {
  display: grid;
  gap: 8px;
}
.feature-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.feature-row > label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}
.feature-row > div {
  display: grid;
  flex: 1;
  gap: 4px;
}
.feature-row small,
.feature-row > span {
  color: var(--muted);
  font-size: 12px;
}
.feature-row > b {
  font-size: 13px;
}
@media (max-width: 680px) {
  .calendar-day {
    min-height: 72px;
    padding: 5px;
  }
  .calendar-day > button {
    font-size: 9px;
    padding: 3px;
  }
  .matrix-grid {
    grid-template-columns: 1fr;
  }
  .feature-form {
    flex-wrap: wrap;
  }
}
.settings-option select {
  width: min(230px, 48%);
  margin: 0;
  border: 1px solid #dfe4df;
  border-radius: 9px;
  padding: 9px 11px;
  color: #424a46;
  background: #fff;
  font-size: 13px;
}
.settings-option.language-control {
  display: flex;
  margin: 0;
  font-size: inherit;
}
.notification-settings-card {
  display: grid;
  gap: 10px;
}
.notification-time-option > input[type="time"] {
  width: 112px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dfe4df;
  border-radius: 9px;
}
.notification-time-option > input:disabled {
  opacity: 0.5;
}
.browser-notification-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.browser-notification-card strong {
  font-size: 14px;
}
.browser-notification-card p,
.notification-note {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.notification-note {
  margin-top: 16px;
}
.hotkey-list {
  display: grid;
  gap: 8px;
}
.hotkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.hotkey-row > span {
  display: grid;
  gap: 3px;
}
.hotkey-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.hotkey-row small {
  color: var(--muted);
  font-size: 11px;
}
.hotkey-row kbd {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  font:
    11px/1.2 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  white-space: nowrap;
}
.hotkey-row kbd b {
  margin: 0 4px;
  color: var(--muted);
  font-weight: 500;
}
html[dir="rtl"] .hotkey-row {
  text-align: right;
}
html[data-theme="dark"] .hotkey-row {
  background: #252829;
  border-color: #393d3e;
}
html[data-theme="dark"] .hotkey-row kbd {
  color: #e1e4e3;
  background: #202324;
  border-color: #414546;
}
.settings-backup-card {
  padding: 21px;
  border: 1px solid #e7ebe7;
  border-radius: 14px;
  background: #fafbfa;
}
.settings-backup-card > strong {
  color: #303733;
  font-size: 14px;
}
.settings-backup-card > p {
  color: #838c87;
  font-size: 12px;
  line-height: 1.7;
}
.settings-backup-card hr {
  margin: 23px 0;
  border: 0;
  border-top: 1px solid #e5e9e5;
}
.settings-backup-card > label {
  display: block;
  margin: 8px 0;
  color: #707a74;
  font-size: 12px;
}
.settings-backup-card #restoreFile {
  width: 100%;
  margin-bottom: 12px;
}
.settings-destinations {
  display: grid;
  gap: 10px;
}
.settings-destinations button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px;
  border: 1px solid #e7ebe7;
  border-radius: 13px;
  color: #536057;
  background: #fafbfa;
  text-align: left;
}
.settings-destinations button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #65816b;
  background: #edf3ed;
  font-size: 18px;
}
.settings-destinations strong,
.settings-destinations small {
  display: block;
}
.settings-destinations strong {
  color: #313a34;
  font-size: 13px;
}
.settings-destinations small {
  margin-top: 3px;
  color: #87908a;
  font-size: 11px;
}
.settings-destinations b {
  color: #a1a8a3;
  font-size: 22px;
  font-weight: 400;
}
html[data-theme="dark"] .settings-rail-heading h2 {
  color: #f1f2f2;
}
html[data-theme="dark"] .settings-nav button > span {
  color: #b3b6b7;
}
html[data-theme="dark"] .settings-nav button:hover {
  color: #f0f1f1;
}
html[data-theme="dark"] .settings-panel > h3,
html[data-theme="dark"] .settings-option strong,
html[data-theme="dark"] .settings-summary-card strong,
html[data-theme="dark"] .settings-backup-card > strong,
html[data-theme="dark"] .settings-destinations strong {
  color: #f1f2f2;
}
html[data-theme="dark"] .settings-intro,
html[data-theme="dark"] .settings-option small,
html[data-theme="dark"] .settings-summary-card p,
html[data-theme="dark"] .settings-backup-card > p,
html[data-theme="dark"] .settings-destinations small {
  color: #989d9e !important;
}
html[data-theme="dark"] .settings-summary-card,
html[data-theme="dark"] .settings-option,
html[data-theme="dark"] .settings-backup-card,
html[data-theme="dark"] .settings-destinations button {
  color: #e1e4e3;
  background: #252829;
  border-color: #393d3e;
}
html[data-theme="dark"] .settings-option select {
  color: #e2e5e4;
  background: #202324;
  border-color: #414546;
}
html[data-theme="dark"] .settings-backup-card hr {
  border-color: #3b3e3f;
}
html[dir="rtl"] .settings-nav button,
html[dir="rtl"] .settings-destinations button {
  text-align: right;
}
@media (max-width: 700px) {
  #settingsDialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
  #settingsDialog.features-layout {
    width: calc(100vw - 16px);
  }
  .settings-shell {
    grid-template-columns: 168px minmax(0, 1fr);
  }
  .settings-rail {
    padding: 18px 8px;
  }
  .settings-rail-heading {
    gap: 18px;
    padding: 0 8px 14px;
  }
  .settings-rail-heading h2 {
    font-size: 20px;
  }
  .settings-nav button {
    gap: 8px;
    min-height: 43px;
    padding: 8px;
    border-radius: 9px;
    font-size: 12px;
  }
  .settings-nav button > span {
    width: 20px;
    flex-basis: 20px;
    font-size: 16px;
  }
  .settings-main {
    padding: 28px 17px;
  }
  .feature-settings {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 440px) {
  .settings-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .settings-rail {
    padding: 13px 11px 9px;
    border-right: 0;
    border-bottom: 1px solid #e1e4e1;
  }
  .settings-rail-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 5px 8px;
  }
  .settings-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
  }
  .settings-nav button {
    flex: 0 0 auto;
    min-height: 36px;
    white-space: nowrap;
  }
  .settings-nav button > span {
    display: none;
  }
  .hotkey-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
/* Final dark-mode semantic colors take precedence over the original palette. */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .date,
html[data-theme="dark"] .view-caption {
  color: var(--muted);
}
html[data-theme="dark"] .check:hover {
  color: var(--accent-strong);
}
html[data-theme="dark"] .inbox-item {
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .settings-nav button[aria-selected="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
/* Keep the daily page quiet: one small overview, then the work itself. */
.today-overview {
  grid-template-columns: minmax(190px, 0.9fr) minmax(360px, 1.4fr);
  gap: 16px;
  margin-bottom: 15px;
  padding: 11px 14px;
  border-radius: 14px;
  box-shadow: none;
}
.overview-spark {
  flex-basis: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 18px;
}
.today-overview-intro {
  gap: 10px;
}
.today-overview-intro strong {
  font-size: 13px;
}
.today-overview-intro p {
  margin-top: 1px;
  font-size: 10px;
}
.overview-stats {
  gap: 0;
}
.overview-stat {
  padding: 4px 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
button.overview-stat:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.45);
}
.overview-stat > span {
  font-size: 10px;
}
.overview-stat > strong {
  margin-top: 1px;
  font-size: 17px;
}
.overview-stat > small {
  font-size: 9px;
}
#today .commitments {
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#today .section-heading {
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
#today .section-heading h2 {
  color: var(--ink);
  font-size: 15px;
}
#today .task-row {
  margin: 0 -5px;
  padding: 10px 5px;
}
.view-caption {
  max-width: 760px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.5;
}
html[data-theme="dark"] .overview-stat {
  border-left-color: var(--line);
}
html[data-theme="dark"] #today .section-heading {
  border-color: var(--line);
}
html[data-theme="dark"] #today .section-heading h2 {
  color: var(--ink);
}
html[data-theme="dark"] .view-caption {
  border: 0;
}
nav button:hover {
  transform: none;
}
@media (max-width: 800px) {
  .today-overview {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}
@media (max-width: 520px) {
  .today-overview {
    padding: 10px 11px;
  }
  .overview-stat {
    padding: 4px 7px;
  }
  .overview-stat > span {
    font-size: 9px;
  }
  .overview-stat > strong {
    font-size: 16px;
  }
}
/* Steady color and interaction system: cool, calm surfaces with one clear accent. */
body {
  color: var(--ink);
  background: var(--canvas);
}
.brand {
  color: var(--ink);
}
.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  font: italic 20px Georgia;
  letter-spacing: 0;
}
.sidebar-search {
  border: 1px solid transparent;
}
.sidebar-search:hover {
  color: var(--ink);
}
.sidebar-search kbd {
  color: var(--muted);
}
nav button {
  color: #53596a;
}
nav button:hover {
  color: var(--ink);
  background: #e9eaf1;
}
nav button.active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #dfe3fb;
}
.nav-icon {
  color: #777f95;
}
.inbox-icon,
.today-color,
.upcoming-icon,
.anytime-icon,
.someday-icon,
.hobbies-icon {
  color: var(--accent);
}
.badge,
.muted,
.date {
  color: var(--muted);
}
.nav-divider {
  background: var(--line);
}
.app main {
  color: var(--ink);
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
}
h1 {
  font-weight: 620;
  letter-spacing: -0.75px;
}
.today-icon,
.view-symbol {
  color: var(--accent);
}
.date {
  font-size: 13px;
}
.today-overview {
  border-color: var(--line);
  background: var(--surface-soft);
}
.overview-spark {
  color: var(--accent);
  background: #fff;
}
.today-overview-intro p,
.overview-stat > span,
.overview-stat > small {
  color: var(--muted);
}
.overview-stat > strong {
  color: var(--accent-strong);
}
#today .section-heading h2,
.section-heading h2 {
  color: var(--ink);
}
.section-heading {
  border-color: var(--line);
}
.task-title,
.task-open,
.money-entry-main,
.wealth-row-main {
  color: var(--ink);
}
.task-title:hover,
.task-open:hover {
  color: var(--accent-strong);
}
.task-row:hover,
.wealth-row:hover,
.money-entry:hover {
  background: #f0f1f8;
}
.task-status.waiting {
  color: var(--warning);
  background: var(--warning-soft);
}
.btn {
  border-radius: 11px;
}
.btn.secondary:hover,
.secondary:hover {
  color: var(--ink);
}
.text-button {
  color: #60677b;
}
.text-button:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.add-row {
  color: var(--accent);
}
.add-row:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.view-caption {
  color: var(--muted);
}
.inbox-hint {
  color: var(--ink);
  border-color: var(--line);
  background: #f1f2f8;
  box-shadow: none;
}
.inbox-hint-icon {
  color: var(--accent);
  background: #e4e8fb;
}
.inbox-hint p {
  color: var(--muted);
}
.inbox-item:hover {
  box-shadow: var(--shadow-soft);
}
button,
input,
textarea,
select {
  accent-color: var(--accent);
}
input,
textarea,
select,
dialog input,
dialog textarea,
dialog select {
  border-color: var(--line-strong);
}
dialog {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 24px 80px rgba(29, 35, 62, 0.18);
}
.capture-dialog,
.capture-card {
  border-color: var(--line);
  background: var(--surface);
}
.capture-mark {
  color: var(--accent);
  background: var(--accent-soft);
}
.capture-card h2 {
  color: var(--ink);
}
.capture-description {
  color: var(--muted) !important;
}
.capture-card textarea {
  color: var(--ink);
  border-color: var(--line);
  background: #fbfbfd;
}
.capture-card textarea:focus {
  border-color: var(--accent);
  background: #fff;
}
.voice-button {
  color: #565e73;
  background: var(--surface-soft);
  border-color: var(--line);
}
.voice-button:hover {
  background: var(--accent-soft);
}
.voice-button.listening {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #efd6da;
}
.capture-shortcut,
.capture-shortcut kbd {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-soft);
}
.net-worth > strong {
  color: var(--accent-strong);
}
.wealth-total {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}
.wealth-total > strong,
.money-summary strong {
  color: var(--ink);
}
.wealth-row,
.money-entry {
  border-color: var(--line);
}
.incoming {
  color: var(--positive) !important;
}
.liability {
  color: var(--warning) !important;
}
.money-arrow,
.settled-label {
  color: var(--muted);
}
.template-row {
  border-color: var(--line);
  background: var(--surface);
}
.template-row:hover {
  background: var(--surface-soft);
}
.settings-nav button {
  color: #53596a;
}
.settings-nav button > span {
  color: #737b91;
}
.settings-nav button:hover {
  color: var(--ink);
  background: #e9eaf1;
}
.settings-nav button[aria-selected="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.settings-panel > h3,
.settings-option strong,
.settings-summary-card strong,
.settings-backup-card > strong {
  color: var(--ink);
}
.settings-intro,
.settings-option small,
.settings-summary-card p,
.settings-backup-card > p {
  color: var(--muted) !important;
}
.settings-option,
.settings-summary-card,
.settings-backup-card,
.settings-destinations button {
  border-color: var(--line);
  background: var(--surface-soft);
}
.settings-option > input[type="checkbox"] {
  accent-color: var(--accent);
}
.settings-destinations button > span:first-child,
.settings-summary-icon {
  color: var(--accent);
  background: var(--accent-soft);
}
.theme-switch input {
  background: #d6d9e4;
}
.feature-setting-card {
  border-color: var(--line);
  background: var(--surface);
}
.calendar-day {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.calendar-day.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.matrix-quadrant,
.feature-card,
.feature-row {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.matrix-task {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
.timer-presets button {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
.browser-notification-card {
  background: var(--surface-soft);
  border-color: var(--line);
}
.hotkey-row {
  background: var(--surface);
  border-color: var(--line);
}
.hotkey-row kbd {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
html[data-theme="dark"] .brand {
  color: var(--ink);
}
html[data-theme="dark"] .sidebar-search:hover,
html[data-theme="dark"] nav button:hover {
  background: #303340;
}
html[data-theme="dark"] .nav-divider {
  background: var(--line);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: var(--ink);
}
html[data-theme="dark"] .overview-stat,
html[data-theme="dark"] .overview-stat > strong {
  color: var(--ink);
}
html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] .secondary:hover {
  background: #333746;
}
html[data-theme="dark"] .inbox-item:hover,
html[data-theme="dark"] .template-row:hover {
  background: var(--surface-soft);
}
html[data-theme="dark"] .net-worth {
  color: var(--ink);
}
html[data-theme="dark"] .settings-nav button {
  color: #c1c4cf;
}
html[data-theme="dark"] .settings-nav button:hover {
  background: #303340;
}
html[data-theme="dark"] .settings-panel > h3,
html[data-theme="dark"] .settings-option strong,
html[data-theme="dark"] .settings-summary-card strong,
html[data-theme="dark"] .settings-backup-card > strong {
  color: var(--ink);
}
html[data-theme="dark"] .settings-destinations button:hover {
  background: #303340;
}
html[data-theme="dark"] .settings-destinations button > span:first-child,
html[data-theme="dark"] .settings-summary-icon {
  color: var(--accent);
  background: var(--accent-soft);
}
/* Detail forms, task states, money, and controls share the same quieter finish. */
#settingsDialog {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
.settings-window-close {
  box-shadow: 0 1px 3px rgba(36, 39, 50, 0.18);
}
.settings-option,
.settings-summary-card,
.settings-backup-card,
.settings-destinations button,
.notification-settings-card .settings-option {
  border-radius: 13px;
}
.task-row.is-active {
  border-radius: 12px;
  background: var(--accent-soft);
}
.task-start {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
}
.task-start:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.task-tag,
.date-tag,
.someday-tag,
.step-count,
.waiting-summary,
.task-status {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  line-height: 1.4;
}
.step-count {
  color: var(--positive);
  border-color: #d8ebe5;
  background: var(--positive-soft);
}
.waiting-summary {
  max-width: 230px;
  color: var(--warning);
  border-color: #eee4d1;
  background: var(--warning-soft);
}
.detail-title {
  color: var(--ink);
  font-weight: 620;
  letter-spacing: -0.35px;
}
.detail-properties {
  border-color: var(--line);
}
.detail-properties label,
.detail-section > label,
.detail-section h3 {
  color: var(--muted);
}
.detail-section {
  border-color: var(--line);
}
.detail-section textarea,
.detail-section input,
.detail-properties select {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
.detail-step {
  border-color: var(--line);
}
.detail-step label span {
  color: var(--ink);
}
.detail-bottom {
  border-color: var(--line);
  color: var(--muted);
}
.inline-task-composer,
.inline-capture-card {
  border-radius: 17px;
}
.composer-when,
.composer-option > summary {
  color: #555d72;
  background: var(--surface-soft);
}
.composer-when select,
.composer-option input,
.composer-option select {
  color: var(--ink);
}
.composer-option > input,
.composer-option > textarea,
.composer-option > select,
.composer-date-wrap input {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.composer-hint {
  color: var(--muted);
}
.composer-title {
  color: var(--ink);
}
.money-entry {
  border-color: var(--line);
}
.money-entry-end .text-button {
  color: var(--muted);
}
.money-empty {
  color: var(--muted);
}
.money-toolbar input,
.money-toolbar select,
.wealth-list-tools input {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.money-summary > div {
  border-color: var(--line);
  background: var(--surface);
}
.net-worth {
  border-radius: 17px;
}
.wealth-total {
  border-radius: 13px;
}
.wealth-row {
  border-color: var(--line);
}
.weekly-goal {
  border-radius: 14px;
}
.goal-tasks > button,
.goal-tasks select {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
.template-row {
  border-radius: 14px;
}
.settings-option > input[type="checkbox"],
.theme-switch input {
  accent-color: var(--accent);
}
.settings-option select,
.language-control select {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.notification-time-option > input[type="time"] {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.hotkey-row kbd {
  border-radius: 7px;
}
.feature-setting-card {
  border-radius: 15px;
  box-shadow: 0 3px 12px rgba(43, 51, 83, 0.035);
}
.feature-setting-card:hover {
  box-shadow: var(--shadow-soft);
}
.feature-preview {
  border-radius: 11px;
}
.calendar-day {
  border-radius: 11px;
}
.matrix-quadrant,
.feature-card,
.feature-row {
  border-radius: 14px;
}
.money-tabs button:focus-visible,
.settings-nav button:focus-visible {
  outline-offset: 2px;
}
html[data-theme="dark"] #settingsDialog {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .settings-rail {
  background: var(--rail);
  border-color: var(--line);
}
html[data-theme="dark"] .settings-main {
  background: var(--surface);
}
html[data-theme="dark"] .task-start:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
html[data-theme="dark"] .detail-section textarea,
html[data-theme="dark"] .detail-section input,
html[data-theme="dark"] .detail-properties select {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
html[data-theme="dark"] .composer-when select,
html[data-theme="dark"] .composer-option input,
html[data-theme="dark"] .composer-option select {
  color: var(--ink);
}
html[data-theme="dark"] .composer-hint {
  color: var(--muted);
}
html[data-theme="dark"] .money-toolbar input,
html[data-theme="dark"] .money-toolbar select,
html[data-theme="dark"] .wealth-list-tools input,
html[data-theme="dark"] .notification-time-option > input[type="time"] {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface);
}
html[data-theme="dark"] .money-summary > div {
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .goal-tasks > button,
html[data-theme="dark"] .goal-tasks select {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
html[data-theme="dark"] .feature-setting-card:hover {
  border-color: #4a5067;
}
@media (max-width: 640px) {
  .task-row {
    gap: 9px;
  }
  .task-start {
    width: 28px;
    height: 28px;
  }
  .page-heading {
    align-items: flex-start;
  }
  .heading-actions {
    gap: 7px;
  }
  .focus-bottom {
    flex-wrap: wrap;
    gap: 9px;
  }
  .inbox-hint {
    padding: 13px;
  }
  .money-summary {
    gap: 8px;
  }
}
/* Small, purposeful motion; avoid repeated row movement and respect OS settings. */
.view:not([hidden]) {
  animation: viewSettle 190ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.task-row {
  animation: none;
  transition: background-color 140ms ease;
}
.check {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}
.check:active,
.btn:active,
.sidebar-search:active {
  transform: scale(0.98);
}
.task-composer-mount:not([hidden]) form,
.capture-composer-mount:not([hidden]) .inline-capture-card {
  animation: composerSettle 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
dialog[open] {
  animation: dialogSettle 190ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
button,
a,
input,
textarea,
select {
  transition-duration: 150ms;
}
@keyframes viewSettle {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}
@keyframes composerSettle {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dialogSettle {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
html[data-theme="dark"] body {
  background: var(--canvas);
  color: var(--ink);
}
html[data-theme="dark"] .sidebar {
  background: #1a231d;
  border-color: #2d3a30;
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
  color: #e7eee8;
}
html[data-theme="dark"] nav button {
  color: #b5c0b7;
}
html[data-theme="dark"] nav button:hover {
  background: #27342a;
}
html[data-theme="dark"] nav button.active {
  color: #e5f0e5;
  background: #2b3b2e;
  box-shadow: inset 0 0 0 1px #3c5240;
}
html[data-theme="dark"] .badge,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .date,
html[data-theme="dark"] .view-caption,
html[data-theme="dark"] .section-heading h2 span {
  color: #a2b0a5;
}
html[data-theme="dark"] .sidebar-search:hover {
  background: #334336;
}
html[data-theme="dark"] .sidebar-search kbd {
  color: #afbbb1;
}
html[data-theme="dark"] .overview-spark,
html[data-theme="dark"] .overview-stat {
  background: #2a382e;
  border-color: #3a4b3d;
  color: #e1e9e2;
}
html[data-theme="dark"] .today-overview-intro p,
html[data-theme="dark"] .overview-stat > span,
html[data-theme="dark"] .overview-stat > small {
  color: #aab8ac;
}
html[data-theme="dark"] button.overview-stat:hover {
  background: #334338;
}
html[data-theme="dark"] .commitments,
html[data-theme="dark"] .inbox-item,
html[data-theme="dark"] .wealth-total,
html[data-theme="dark"] .template-row:hover {
  background: var(--surface);
  border-color: #334238;
}
html[data-theme="dark"] .section-heading {
  border-color: #354238;
}
html[data-theme="dark"] .section-heading h2 {
  color: #b4cdb7;
}
html[data-theme="dark"] .task-title,
html[data-theme="dark"] .money-entry-main,
html[data-theme="dark"] .wealth-row-main {
  color: #dce6dd;
}
html[data-theme="dark"] .task-title:hover {
  color: #b8d2bc;
}
html[data-theme="dark"] .task-meta,
html[data-theme="dark"] .task-meta .date-tag,
html[data-theme="dark"] .inbox-item small,
html[data-theme="dark"] .money-entry-main small,
html[data-theme="dark"] .wealth-row-main small {
  color: #9eaca1;
}
html[data-theme="dark"] .add-row {
  color: #acc3ae;
}
html[data-theme="dark"] .add-row:hover {
  background: #26352a;
  color: #c8ddca;
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .next-action {
  color: #a8b9aa;
}
html[data-theme="dark"] .btn.primary {
  color: #132017;
  background: #a6c5aa;
}
html[data-theme="dark"] .btn.primary:hover {
  background: #b8d2bb;
}
html[data-theme="dark"] .btn.secondary {
  color: #d1dfd2;
  background: #2c3a30;
}
html[data-theme="dark"] .btn.secondary:hover {
  background: #36483a;
}
html[data-theme="dark"] .text-button:hover {
  background: #2a382e;
  color: #e1ece2;
}
html[data-theme="dark"] .view-caption {
  border-color: #344539;
  background: #222e25;
  color: #b1beb2;
}
html[data-theme="dark"] .inbox-hint p {
  color: #b1bdb3;
}
html[data-theme="dark"] .empty {
  color: #aab8ac;
}
html[data-theme="dark"] .inbox-item {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
html[data-theme="dark"] .inbox-item:hover {
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] dialog p,
html[data-theme="dark"] dialog label {
  color: #acb9ae;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] dialog input,
html[data-theme="dark"] dialog textarea,
html[data-theme="dark"] dialog select {
  color: #e0e8e1;
  background-color: #1a231d;
  border-color: #3c4a3f;
}
html[data-theme="dark"] .capture-dialog {
  background: #202a23;
  border-color: #3b4b3f;
}
html[data-theme="dark"] .capture-mark {
  background: #304235;
  color: #bbd2bd;
}
html[data-theme="dark"] .capture-card textarea {
  background: #1b241e;
  border-color: #3a493d;
  color: #e5ece6;
}
html[data-theme="dark"] .capture-card textarea:focus {
  background: #202a23;
}
html[data-theme="dark"] .capture-card textarea::placeholder {
  color: #89988c;
}
html[data-theme="dark"] .voice-button:hover {
  background: #304034;
}
html[data-theme="dark"] .voice-button.listening {
  color: #efb99e;
  background: #3a2d27;
  border-color: #65483a;
}
html[data-theme="dark"] .capture-shortcut,
html[data-theme="dark"] .capture-shortcut kbd {
  color: #a5b2a7;
  border-color: #3c4a3f;
  background: #202a23;
}
html[data-theme="dark"] .net-worth > strong {
  color: #c0d9c2;
}
html[data-theme="dark"] .wealth-total > strong,
html[data-theme="dark"] .money-summary strong {
  color: #e2eae3;
}
html[data-theme="dark"] .weekly-goal {
  color: #e3ebe4;
  background: #263329;
  border-color: #39483c;
}
html[data-theme="dark"] .weekly-goal:nth-child(3n + 2) {
  background: #2b2934;
  border-color: #403c4d;
}
html[data-theme="dark"] .weekly-goal:nth-child(3n) {
  background: #332e25;
  border-color: #4b4232;
}
html[data-theme="dark"] .theme-switch {
  color: #d6e0d7;
  background: #1b241e;
  border-color: #3b4a3e;
}
html[data-theme="dark"] .settings-links h3 {
  color: #a9b6ab;
}
html[data-theme="dark"] .settings-links button {
  color: #d5e0d6;
  background: #252f28;
  border-color: #39473c;
}
html[data-theme="dark"] .settings-links button:hover {
  background: #304034;
}
html[data-theme="dark"] .language-control {
  color: #b4c0b6;
}
html[data-theme="dark"] .language-control select {
  color: #e0e8e1;
  background: #1b241e;
  border-color: #3b4a3e;
}
html[data-theme="dark"] #wealthCurrency {
  color: #d1ddd2;
  background: #1a231d;
}
html[data-theme="dark"] .money-arrow,
html[data-theme="dark"] .settled-label {
  color: #a7b3a8;
}
html[data-theme="dark"] .step-count,
html[data-theme="dark"] .waiting-summary {
  color: #a9b7ab;
}
html[data-theme="dark"] .theme-switch input {
  background: #405044;
  border: 0;
}
html[data-theme="dark"] .theme-switch input:checked {
  background: #84a68a;
}
html[data-theme="dark"] .theme-switch input::after {
  background: #e7efe8;
}
html[data-theme="dark"] .theme-switch input:checked::after {
  transform: translateX(16px);
}
html[dir="rtl"][data-theme="dark"] .theme-switch input:checked::after {
  transform: translateX(-16px);
}
/* Dark appearance for the calm indigo visual system. Loaded after legacy rules. */
html[data-theme="dark"] {
  color-scheme: dark;
  color: var(--ink);
  background: var(--canvas);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app {
  color: var(--ink);
  background: var(--canvas);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .settings-rail {
  background: var(--rail);
  border-color: var(--line);
}
html[data-theme="dark"] .settings-main,
html[data-theme="dark"] #settingsDialog {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: var(--ink);
}
html[data-theme="dark"] .brand-mark {
  color: #20232b;
  background: var(--accent);
}
html[data-theme="dark"] .sidebar-search {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
html[data-theme="dark"] nav button,
html[data-theme="dark"] .settings-nav button {
  color: #c1c4cf;
}
html[data-theme="dark"] nav button.active,
html[data-theme="dark"] .settings-nav button[aria-selected="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #414966;
}
html[data-theme="dark"] .nav-icon {
  color: #a4aac0;
}
html[data-theme="dark"] .today-overview {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
  box-shadow: none;
}
html[data-theme="dark"] .overview-spark {
  color: var(--accent);
  background: var(--surface);
}
html[data-theme="dark"] .overview-stat {
  color: var(--ink);
  border-color: transparent;
  background: transparent;
}
html[data-theme="dark"] .overview-stat > strong {
  color: var(--ink);
}
html[data-theme="dark"] .overview-stat > span,
html[data-theme="dark"] .overview-stat > small,
html[data-theme="dark"] .today-overview-intro p {
  color: var(--muted);
}
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] #today .section-heading {
  border-color: var(--line);
}
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] #today .section-heading h2 {
  color: var(--ink);
}
html[data-theme="dark"] .task-row.is-active {
  background: var(--accent-soft);
}
html[data-theme="dark"] .task-title,
html[data-theme="dark"] .task-open,
html[data-theme="dark"] .money-entry-main,
html[data-theme="dark"] .wealth-row-main {
  color: var(--ink);
}
html[data-theme="dark"] .task-title:hover,
html[data-theme="dark"] .task-open:hover,
html[data-theme="dark"] .task-start:hover {
  color: var(--accent-strong);
}
html[data-theme="dark"] .task-meta,
html[data-theme="dark"] .task-meta .date-tag,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .date {
  color: var(--muted);
}
html[data-theme="dark"] .check {
  color: var(--accent);
  border-color: var(--line-strong);
  background: var(--surface);
}
html[data-theme="dark"] .check:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="dark"] .date-tag {
  color: var(--accent-strong);
  border-color: #3a405d;
  background: #2b3045;
}
html[data-theme="dark"] .date-tag.overdue-date {
  color: var(--danger);
  border-color: #56363e;
  background: var(--danger-soft);
}
html[data-theme="dark"] .someday-tag {
  color: var(--warning);
  border-color: #50432e;
  background: var(--warning-soft);
}
html[data-theme="dark"] .step-count {
  color: var(--positive);
  border-color: #344c47;
  background: var(--positive-soft);
}
html[data-theme="dark"] .waiting-summary {
  color: var(--warning);
  border-color: #50432e;
  background: var(--warning-soft);
}
html[data-theme="dark"] .task-status {
  color: var(--positive);
  background: var(--positive-soft);
}
html[data-theme="dark"] .task-status.waiting {
  color: var(--warning);
  background: var(--warning-soft);
}
html[data-theme="dark"] .focus-card {
  color: var(--ink);
  border-color: var(--line);
  border-left-color: var(--accent);
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .next-action,
html[data-theme="dark"] .view-caption {
  color: var(--muted);
}
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .primary {
  color: #222638;
  background: var(--accent);
}
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .primary:hover {
  color: #222638;
  background: #c0c9ff;
}
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .secondary {
  color: var(--ink);
  background: var(--surface-soft);
}
html[data-theme="dark"] .text-button {
  color: #b6bbca;
}
html[data-theme="dark"] .text-button:hover,
html[data-theme="dark"] .add-row:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
html[data-theme="dark"] .inbox-hint {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
html[data-theme="dark"] .inbox-hint-icon {
  color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="dark"] .inbox-hint p,
html[data-theme="dark"] .empty {
  color: var(--muted);
}
html[data-theme="dark"] .empty {
  border-color: var(--line-strong);
  background: var(--surface);
}
html[data-theme="dark"] .inbox-item,
html[data-theme="dark"] .wealth-total,
html[data-theme="dark"] .template-row {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .net-worth {
  border-color: var(--line);
}
html[data-theme="dark"] .net-worth > span,
html[data-theme="dark"] .net-worth p,
html[data-theme="dark"] .wealth-total > span,
html[data-theme="dark"] .wealth-total > small,
html[data-theme="dark"] .money-summary span,
html[data-theme="dark"] .money-pending,
html[data-theme="dark"] .money-footnote {
  color: var(--muted);
}
html[data-theme="dark"] .net-worth > strong,
html[data-theme="dark"] .wealth-total > strong,
html[data-theme="dark"] .money-summary strong {
  color: var(--ink);
}
html[data-theme="dark"] .wealth-row,
html[data-theme="dark"] .money-entry {
  border-color: var(--line);
}
html[data-theme="dark"] .incoming {
  color: var(--positive) !important;
}
html[data-theme="dark"] .liability {
  color: var(--warning) !important;
}
html[data-theme="dark"] .weekly-goal,
html[data-theme="dark"] .weekly-goal:nth-child(3n + 2),
html[data-theme="dark"] .weekly-goal:nth-child(3n) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .goal-top label,
html[data-theme="dark"] .weekly-goal details,
html[data-theme="dark"] .weekly-goal summary {
  color: var(--ink);
}
html[data-theme="dark"] .settings-option,
html[data-theme="dark"] .settings-summary-card,
html[data-theme="dark"] .settings-backup-card,
html[data-theme="dark"] .settings-destinations button {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
html[data-theme="dark"] .settings-option strong,
html[data-theme="dark"] .settings-summary-card strong,
html[data-theme="dark"] .settings-backup-card > strong {
  color: var(--ink);
}
html[data-theme="dark"] .settings-intro,
html[data-theme="dark"] .settings-option small,
html[data-theme="dark"] .settings-summary-card p,
html[data-theme="dark"] .settings-backup-card > p {
  color: var(--muted) !important;
}
html[data-theme="dark"] .settings-summary-icon,
html[data-theme="dark"] .settings-destinations button > span:first-child {
  color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="dark"] .feature-setting-card,
html[data-theme="dark"] .matrix-quadrant,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .feature-row {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .calendar-day {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .calendar-day > button {
  color: var(--ink);
  background: var(--accent-soft);
}
html[data-theme="dark"] .matrix-task,
html[data-theme="dark"] .timer-presets button,
html[data-theme="dark"] .hotkey-row kbd {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
html[data-theme="dark"] .matrix-flag.selected {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
}
html[data-theme="dark"] .browser-notification-card,
html[data-theme="dark"] .hotkey-row {
  border-color: var(--line);
  background: var(--surface-soft);
}
html[data-theme="dark"] .detail-title,
html[data-theme="dark"] .detail-step label span {
  color: var(--ink);
}
html[data-theme="dark"] .detail-properties,
html[data-theme="dark"] .detail-section,
html[data-theme="dark"] .detail-bottom,
html[data-theme="dark"] .detail-step {
  border-color: var(--line);
}
html[data-theme="dark"] .detail-properties label,
html[data-theme="dark"] .detail-section > label,
html[data-theme="dark"] .detail-section h3 {
  color: var(--muted);
}
html[data-theme="dark"] .inline-task-composer,
html[data-theme="dark"] .inline-capture-card {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .composer-when,
html[data-theme="dark"] .composer-option > summary {
  color: var(--ink);
  background: var(--surface-soft);
}
html[data-theme="dark"] .composer-option > input,
html[data-theme="dark"] .composer-option > textarea,
html[data-theme="dark"] .composer-option > select,
html[data-theme="dark"] .composer-date-wrap input {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .capture-card h2 {
  color: var(--ink);
}
html[data-theme="dark"] .capture-description {
  color: var(--muted) !important;
}
html[data-theme="dark"] .voice-button {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
html[data-theme="dark"] .money-tabs {
  border-color: var(--line);
}
html[data-theme="dark"] .money-tabs button {
  color: var(--muted);
}
html[data-theme="dark"] .money-tabs button[aria-selected="true"] {
  color: var(--accent-strong);
  border-color: var(--accent);
}
html[data-theme="dark"] #toast {
  color: var(--ink);
  background: #34394b;
}
html[data-theme="dark"] dialog {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] dialog::backdrop {
  background: rgba(10, 12, 20, 0.62);
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line-strong);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(174, 185, 255, 0.16);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #8e94a4;
}
html[data-theme="dark"] #wealthCurrency,
html[data-theme="dark"] .language-control select {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .settings-option > input[type="checkbox"],
html[data-theme="dark"] .feature-switch input:checked + span {
  accent-color: var(--accent);
}
html[data-theme="dark"] .sidebar-settings {
  color: var(--muted);
  border-color: var(--line);
}
/* Shared light surface and component colours. */
body,
.app {
  color: var(--ink);
  background: var(--canvas);
}
.sidebar {
  background: var(--rail);
  border-color: var(--line);
}
.brand,
.app main,
h1,
h2,
h3,
h4 {
  color: var(--ink);
}
.brand-mark {
  color: #fff;
  background: var(--accent);
}
.sidebar-search {
  color: var(--ink);
  background: #e8e7e3;
  border-color: transparent;
}
.sidebar-search:hover {
  background: #e1e1de;
}
.sidebar-search kbd,
.badge,
.muted,
.date,
.view-caption {
  color: var(--muted);
}
nav button,
.settings-nav button {
  color: #59616c;
}
nav button:hover,
.settings-nav button:hover {
  color: var(--ink);
  background: #e7e7e4;
}
nav button.active,
.settings-nav button[aria-selected="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #dbe1ed;
}
.nav-icon,
.settings-nav button > span {
  color: #7b8799;
}
.inbox-icon,
.today-color,
.upcoming-icon,
.anytime-icon,
.someday-icon,
.hobbies-icon,
.today-icon,
.view-symbol {
  color: var(--accent);
}
.today-overview,
.inbox-hint {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
  box-shadow: none;
}
.overview-spark,
.inbox-hint-icon,
.settings-summary-icon,
.settings-destinations button > span:first-child {
  color: var(--accent);
  background: var(--accent-soft);
}
.overview-stat {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}
.overview-stat > span,
.overview-stat > small,
.today-overview-intro p,
.inbox-hint p {
  color: var(--muted);
}
.overview-stat > strong,
.section-heading h2 {
  color: var(--ink);
}
.commitments,
.feature-setting-card,
.matrix-quadrant,
.feature-card,
.feature-row,
.calendar-day,
.wealth-total,
.template-row,
.settings-option,
.settings-summary-card,
.settings-backup-card,
.settings-destinations button,
.hotkey-row {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}
.task-row:hover,
.wealth-row:hover,
.money-entry:hover,
.inbox-item:hover {
  background: var(--surface-soft);
}
.task-title,
.task-open,
.money-entry-main,
.wealth-row-main,
.detail-title {
  color: var(--ink);
}
.task-title:hover,
.task-open:hover,
.task-start:hover,
.text-button:hover,
.add-row:hover {
  color: var(--accent-strong);
}
.task-meta,
.task-meta .date-tag,
.money-entry-main small,
.wealth-row-main small {
  color: var(--muted);
}
.check {
  color: var(--accent-strong);
  border-color: var(--line-strong);
  background: var(--surface);
}
.check:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.task-status {
  color: var(--positive);
  background: var(--positive-soft);
}
.task-status.waiting,
.waiting-summary {
  color: var(--warning);
  background: var(--warning-soft);
}
.date-tag {
  color: var(--accent-strong);
  border-color: #dbe1ed;
  background: var(--accent-soft);
}
.date-tag.overdue-date {
  color: var(--danger);
  border-color: #ecd5d9;
  background: var(--danger-soft);
}
.someday-tag {
  color: var(--warning);
  border-color: #e8decb;
  background: var(--warning-soft);
}
.focus-card {
  color: var(--ink);
  border-color: var(--line);
  border-left-color: var(--accent);
  background: linear-gradient(120deg, #eff1f6, var(--surface) 76%);
  box-shadow: var(--shadow-soft);
}
.eyebrow,
.next-action {
  color: var(--muted);
}
.btn.primary,
.primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 3px 9px rgba(69, 89, 133, 0.14);
}
.btn.primary:hover,
.primary:hover {
  color: #fff;
  background: var(--accent-strong);
}
.btn.secondary,
.secondary {
  color: #4f5968;
  background: #eaeae7;
}
.btn.secondary:hover,
.secondary:hover {
  background: #e2e2de;
}
.text-button,
.add-row {
  color: #626c79;
}
.text-button:hover,
.add-row:hover {
  background: var(--accent-soft);
}
.empty {
  color: var(--muted);
  border-color: var(--line-strong);
  background: var(--surface);
}
.inbox-item {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}
dialog,
#settingsDialog {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 24px 80px rgba(29, 35, 48, 0.18);
}
dialog::backdrop {
  background: rgba(28, 34, 45, 0.32);
  backdrop-filter: blur(5px);
}
dialog p,
dialog label {
  color: var(--muted);
}
input,
textarea,
select {
  color: var(--ink);
  accent-color: var(--accent);
  border-color: var(--line-strong);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(89, 111, 155, 0.15);
}
input::placeholder,
textarea::placeholder {
  color: #939aa4;
}
.inline-task-composer,
.inline-capture-card {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(35, 43, 56, 0.09);
}
.composer-when,
.composer-option > summary,
.voice-button {
  color: #596474;
  background: var(--surface-soft);
  border-color: var(--line);
}
.composer-option > input,
.composer-option > textarea,
.composer-option > select,
.composer-date-wrap input,
.detail-section textarea,
.detail-section input,
.detail-properties select {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}
.money-tabs {
  border-color: var(--line);
}
.money-tabs button {
  color: var(--muted);
}
.money-tabs button[aria-selected="true"] {
  color: var(--accent-strong);
  border-color: var(--accent);
}
.net-worth {
  color: var(--ink);
  border-color: #dce1e9;
  background: linear-gradient(120deg, #e9edf5, #f4f3f0);
}
.net-worth > span,
.net-worth p,
.wealth-total > span,
.wealth-total > small,
.money-summary span,
.money-pending,
.money-footnote {
  color: var(--muted);
}
.net-worth > strong,
.wealth-total > strong,
.money-summary strong {
  color: var(--ink);
}
.weekly-goal,
.weekly-goal:nth-child(3n + 2),
.weekly-goal:nth-child(3n) {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}
.goal-top label,
.weekly-goal details,
.weekly-goal summary {
  color: var(--ink);
}
.settings-rail {
  background: var(--rail);
  border-color: var(--line);
}
.settings-main {
  background: var(--surface);
}
.settings-panel > h3,
.settings-panel h4,
.settings-option strong,
.settings-summary-card strong,
.settings-backup-card > strong,
.settings-destinations strong {
  color: var(--ink);
}
.settings-option,
.settings-summary-card,
.settings-backup-card,
.settings-destinations button,
.browser-notification-card {
  border-color: var(--line);
  background: var(--surface-soft);
}
.feature-switch input:checked + span {
  background: var(--accent);
}
.settings-destinations button:hover {
  background: #e9eaf0;
}
.theme-switch {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
.theme-switch input:checked {
  background: var(--accent);
}
.feature-row,
.hotkey-row {
  border-color: var(--line);
  background: var(--surface);
}
.feature-row > b {
  color: var(--accent-strong);
}
.hotkey-row kbd,
.matrix-task,
.timer-presets button {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-soft);
}
.matrix-flag.selected {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.calendar-day > button {
  color: var(--ink);
  background: var(--accent-soft);
}
.browser-notification-card strong {
  color: var(--ink);
}
.browser-notification-card p,
.notification-note {
  color: var(--muted);
}
#toast {
  color: #fff;
  background: #30394b;
  box-shadow: 0 12px 35px rgba(35, 43, 56, 0.2);
}
/* Feature previews keep their meaning while sharing the same quiet palette. */
.preview-calendar,
.preview-countdown,
.preview-matrix,
.preview-pomodoro,
.preview-habits,
.preview-ai {
  background: linear-gradient(135deg, #dce3f0, #cbd5e7);
}
.preview-calendar-grid b:nth-child(4n) {
  background: #c6d0e3;
  border-color: #c6d0e3;
}
.preview-calendar-grid b:nth-child(9n),
.preview-calendar-grid b:nth-child(13n) {
  background: #ece7df;
  border-color: #ece7df;
}
.preview-quadrant i,
.preview-quadrant.q-two i,
.preview-quadrant.q-three i,
.preview-quadrant.q-four i {
  background: #7888aa;
}
.preview-quadrant span:first-of-type,
.preview-quadrant.q-two span:first-of-type,
.preview-quadrant.q-three span:first-of-type,
.preview-quadrant.q-four span:first-of-type {
  background: #e4e8f0;
}
.preview-timer {
  color: var(--ink);
  border-right-color: var(--accent);
}
.preview-timer i,
.preview-habit-row em {
  background: var(--accent);
}
.preview-habit-row i,
.preview-habit-row:nth-of-type(3) i,
.preview-habit-row:nth-of-type(4) i,
.preview-date-card i {
  color: #7888aa;
}
/* Dark theme component surfaces. */
html[data-theme="dark"] .sidebar-search:hover,
html[data-theme="dark"] nav button:hover,
html[data-theme="dark"] .settings-nav button:hover {
  background: #303541;
}
html[data-theme="dark"] .task-row:hover,
html[data-theme="dark"] .wealth-row:hover,
html[data-theme="dark"] .money-entry:hover {
  background: #2b303b;
}
html[data-theme="dark"] .focus-card {
  background: linear-gradient(120deg, #2b3040, #222630 75%);
}
html[data-theme="dark"] .net-worth {
  background: linear-gradient(120deg, #2b3040, #252832);
}
html[data-theme="dark"] .preview-calendar,
html[data-theme="dark"] .preview-countdown,
html[data-theme="dark"] .preview-matrix,
html[data-theme="dark"] .preview-pomodoro,
html[data-theme="dark"] .preview-habits,
html[data-theme="dark"] .preview-ai {
  background: linear-gradient(135deg, #3a4358, #303848);
}
html[data-theme="dark"] .preview-window,
html[data-theme="dark"] .preview-quadrant,
html[data-theme="dark"] .preview-timer,
html[data-theme="dark"] .preview-habit-row,
html[data-theme="dark"] .preview-date-card,
html[data-theme="dark"] .preview-ai-panel {
  background: #f8f8f5;
}
html[data-theme="dark"] .preview-timer {
  color: #29313c;
}
/* Clear focus states and small tactile feedback; respect reduced-motion settings. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.feature-switch input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 3px;
}
.task-row:focus-within,
.wealth-row:focus-within,
.money-entry:focus-within {
  background: var(--surface-soft);
}
.check:active,
.btn:active {
  transform: scale(0.97);
}
.feature-setting-card:hover {
  border-color: var(--line-strong);
}
.task-start {
  opacity: 0.45;
  transition:
    opacity 150ms ease,
    color 150ms ease;
}
.task-row:hover .task-start,
.task-row:focus-within .task-start {
  opacity: 1;
}
@media (hover: none) {
  .task-start {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Task deletion: quiet until hovered; the toast action reads on the dark toast. */
.detail-bottom .delete-task {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 12px;
}
.detail-bottom .delete-task:hover,
.detail-bottom .delete-task:focus-visible {
  color: var(--danger);
}
#toast .toast-action {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  padding: 0 0 0 6px;
}
html[dir="rtl"] .calendar-step {
  transform: scaleX(-1);
}
/* Weekly backup nudge on Today. */
.backup-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft, #f4f3ef);
}
.backup-nudge[hidden] {
  display: none;
}
.backup-nudge p {
  flex: 1;
  margin: 0;
  font-size: 13px;
}
.backup-nudge-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--accent-strong);
  background: var(--accent-soft);
}
@media (max-width: 640px) {
  .backup-nudge {
    flex-wrap: wrap;
  }
  .backup-nudge p {
    flex-basis: calc(100% - 46px);
  }
}
/* Reorder handle: quiet until the row is hovered or focused; always visible on touch. */
.task-row {
  position: relative;
}
.drag-handle {
  position: absolute;
  inset-inline-start: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: -2px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.task-row:hover .drag-handle,
.drag-handle:focus-visible,
.task-row.dragging .drag-handle {
  opacity: 1;
}
.task-row.dragging {
  z-index: 2;
  box-shadow: 0 10px 28px rgba(35, 43, 56, 0.16);
  cursor: grabbing;
}
.task-row.dragging .drag-handle {
  cursor: grabbing;
}
@media (hover: none), (max-width: 640px) {
  .drag-handle {
    position: static;
    transform: none;
    opacity: 0.55;
    flex: 0 0 22px;
  }
}
/* Weekly review */
.review-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 8px;
}
.review-stat {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  text-align: start;
}
button.review-stat {
  cursor: pointer;
}
button.review-stat:hover {
  border-color: var(--accent-soft);
}
.review-stat strong {
  font-size: 24px;
  font-weight: 600;
}
.review-stat span {
  color: var(--muted);
  font-size: 12px;
}
.review-section {
  margin-top: 24px;
}
.review-priority,
.review-money {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.review-priority small {
  margin-inline-start: auto;
  color: var(--muted);
}
.review-priority.goal-done strong {
  color: var(--muted);
  text-decoration: line-through;
}
.review-money span {
  color: var(--muted);
  font-size: 13px;
}
.review-money strong {
  color: var(--ink);
}
.review-money .incoming {
  color: var(--success, #3f7a5a);
}
.review-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--accent-soft);
}
.review-next p {
  margin: 0;
}
#review .drag-handle {
  display: none;
}
@media (max-width: 640px) {
  .review-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Habits: weekly target, this week's days, streak. */
.habit-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "check check meta meta" "week . target remove"; align-items: center; gap: 10px 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.habit-check { grid-area: check; display: flex; align-items: center; gap: 10px; min-width: 0; }
.habit-check strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.habit-week { grid-area: week; display: flex; gap: 5px; }
.habit-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.habit-dot i { font-style: normal; }
.habit-dot.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.habit-dot.today { box-shadow: 0 0 0 2px var(--accent-soft); }
.habit-dot.future { opacity: 0.45; }
.habit-meta { grid-area: meta; display: grid; gap: 2px; font-size: 12px; color: var(--muted); text-align: end; }
.habit-streak { color: var(--accent-strong); font-weight: 600; }
.habit-target { grid-area: target; font-size: 12px; }
.habit-row > .text-button { grid-area: remove; }

/* Long-term goals */
.aims { margin-top: 32px; }
.aim-main { display: grid; gap: 6px; width: 100%; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.aim-main:hover { border-color: var(--accent-soft); }
.aim-title { font-weight: 600; }
.aim-main small { color: var(--muted); font-size: 12px; }
.aim-why { color: var(--muted); font-size: 13px; }
.aim-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.aim-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.aim-achieved .aim-title { text-decoration: line-through; color: var(--muted); }
.aim-paused { opacity: 0.7; }
.goal-aim { display: block; color: var(--muted); font-size: 11px; }

/* Charts: two calm series, recessive grid, tooltip, and table view. */
.chart { position: relative; margin-top: 6px; }
.chart-plot { position: relative; overflow-x: auto; }
.chart svg { display: block; max-width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-baseline { stroke: var(--muted); stroke-width: 1; opacity: 0.5; }
.chart-tick { fill: var(--muted); font-size: 11px; }
.chart-hit { fill: transparent; }
.chart-band { outline: none; cursor: default; }
.chart-band:hover .chart-hit, .chart-band:focus-visible .chart-hit { fill: var(--line); opacity: 0.45; }
.chart-tip { position: absolute; top: 0; z-index: 3; padding: 6px 9px; border-radius: 8px; background: var(--ink); color: var(--canvas); font-size: 12px; white-space: nowrap; pointer-events: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; }
.chart-table { margin-top: 4px; font-size: 12px; color: var(--muted); }
.chart-table summary { cursor: pointer; }
.chart-table table { margin-top: 6px; border-collapse: collapse; }
.chart-table th, .chart-table td { padding: 3px 10px 3px 0; text-align: start; font-weight: 400; }
.chart-table td { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Dark theme: retire colours left over from the earlier green dark palette. */
html[data-theme="dark"] .view-caption {
  border-color: transparent;
  background: none;
  color: var(--muted);
}
html[data-theme="dark"] kbd,
html[data-theme="dark"] .task-meta,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .inbox-hint p,
html[data-theme="dark"] .today-overview-intro p,
html[data-theme="dark"] .composer-hint,
html[data-theme="dark"] dialog p,
html[data-theme="dark"] dialog label,
html[data-theme="dark"] #worthBreakdown,
html[data-theme="dark"] #visionStatus {
  color: var(--muted);
}
html[data-theme="dark"] .add-row {
  color: var(--muted);
}
html[data-theme="dark"] .add-row:hover {
  color: var(--ink);
  background: var(--surface-soft);
}
html[data-theme="dark"] #wealthUndo {
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .sidebar-search kbd,
html[data-theme="dark"] #taskCount,
html[data-theme="dark"] .inbox-item small,
html[data-theme="dark"] .template-row p,
html[data-theme="dark"] .wealth-welcome p,
html[data-theme="dark"] .weekly-goal.goal-done .goal-top label span {
  color: var(--muted);
}
html[data-theme="dark"] .worth-breakdown strong {
  color: var(--ink);
}

/* Spending by category: one hue (magnitude), sorted, labelled. */
.category-breakdown { margin: 20px 0 28px; }
#categoryBars { display: grid; grid-template-columns: minmax(90px, 9rem) minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; font-size: 13px; }
.category-row { display: contents; }
.category-track { display: block; height: 10px; }
.category-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--series-1); }
html[dir="rtl"] .category-track i { border-radius: 4px 0 0 4px; }
.category-amount { font-variant-numeric: tabular-nums; text-align: end; }
.category-amount small { margin-inline-start: 6px; color: var(--muted); }
.money-category { margin-inline-start: 8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-style: normal; }

/* Budgets: status colours always come with an icon and a label. */
.category-breakdown .section-heading { display: flex; align-items: baseline; justify-content: space-between; }
.budget-summary { margin: 4px 0 10px; font-size: 13px; color: var(--ink); }
.category-track { position: relative; }
.category-track.near i { background: var(--status-warning); }
.category-track.over i { background: var(--status-critical); }
.budget-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-inline-start: -1px; border-radius: 1px; background: var(--ink); opacity: 0.55; }
.budget-flag { font-weight: 600; color: var(--ink); }
.budget-flag.over { color: var(--status-critical); }
.budget-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 8px 0; }
.budget-fields label { display: grid; gap: 4px; font-size: 12px; }
html[data-theme="dark"] .budget-flag.over { color: #ef7b7b; }
.chart { margin-bottom: 18px; }

/* Today's planned load against daily focus time. */
.day-load { display: grid; gap: 6px; margin: 4px 0 12px; font-size: 12px; color: var(--muted); }
.day-load-text { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.day-load-track { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.day-load-track i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--series-1); }
.day-load.full .day-load-track i { background: var(--status-warning); }
.day-load.over .day-load-track i { background: var(--status-critical); }
.day-load.over .day-load-text span { color: var(--ink); font-weight: 600; }
.estimate-tag { color: var(--muted); }

/* Today's schedule (time blocks) and plan suggestions. */
.schedule { margin: 4px 0 14px; }
.schedule-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.schedule-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; border-inline-start: 3px solid var(--series-1); border-radius: 8px; background: var(--surface-soft); font-size: 13px; }
.schedule-item time { min-width: 92px; color: var(--muted); font-variant-numeric: tabular-nums; }
.schedule-item .task-open { flex: 1; min-width: 0; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.schedule-item.is-now { background: var(--accent-soft); }
.schedule-item.overlaps { border-inline-start-color: var(--status-warning); }
.schedule-flag { font-size: 11px; font-weight: 600; color: var(--accent-strong); }
.schedule-flag.warn { color: var(--ink); }
.plan-suggest { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 4px; font-size: 12px; color: var(--muted); }
.plan-reason { margin-inline-start: 4px; color: var(--accent-strong); font-style: normal; font-weight: 550; }

/* ===== Sidebar (redesign): line icons, group labels, clear active state. ===== */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sidebar .nav-icon, .sidebar-search .nav-icon, .sidebar-settings .nav-icon {
  flex: 0 0 18px; width: 18px; height: 18px; margin: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  color: var(--muted); font-size: 0;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; margin: 2px 4px 18px; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.sidebar-search { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; text-align: start; cursor: pointer; transition: border-color .15s, color .15s; }
.sidebar-search:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--ink); background: var(--surface); transform: none; }
.sidebar-search .nav-text { flex: 1; font-size: 14px; }
.sidebar-search kbd { margin: 0; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--muted); font-size: 11px; font-family: inherit; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.nav-label { margin: 14px 12px 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.nav-label[hidden] { display: none; }
.sidebar nav .nav-divider { display: none; }
.sidebar nav .nav-more { display: none; }
.sidebar nav button { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 450; text-align: start; transform: none; transition: background .15s, color .15s; }
.sidebar nav button .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); transform: none; }
.sidebar nav button:hover .nav-icon { color: var(--ink); }
.sidebar nav button.active { background: var(--surface); color: var(--accent-strong); font-weight: 600; box-shadow: 0 1px 2px rgba(35, 43, 56, 0.08), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.sidebar nav button.active .nav-icon { color: var(--accent-strong); }
.sidebar nav button.active::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-strong); }
html[dir="rtl"] .sidebar nav button.active::before { border-radius: 3px 0 0 3px; }
.sidebar nav button[data-view="today"] .nav-icon { color: #d89a2b; }
.sidebar nav .badge { min-width: 20px; margin: 0; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.sidebar nav button.active .badge { background: color-mix(in srgb, var(--accent-strong) 16%, transparent); color: var(--accent-strong); }
.sidebar nav #inboxBadge:not(:empty) { background: var(--accent-strong); color: var(--surface); }
.sidebar-settings { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; margin-top: auto; padding: 0 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.sidebar-settings:hover { color: var(--ink); background: transparent; }
.sidebar-settings:hover .nav-icon { color: var(--ink); }
html[data-theme="dark"] .sidebar nav button { color: var(--ink); }
html[data-theme="dark"] .sidebar nav button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
html[data-theme="dark"] .sidebar nav button.active { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-theme="dark"] .sidebar-search { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .sidebar-search kbd { background: var(--surface); }
html[data-theme="dark"] .sidebar nav button[data-view="today"] .nav-icon { color: #e3b155; }
html[data-theme="dark"] .sidebar nav #inboxBadge:not(:empty) { color: var(--canvas); }
@media (min-width: 641px) {
  /* Long lists scroll inside the nav; brand, search and Settings stay in place. */
  .sidebar { overflow: hidden; }
  .sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-inline: -6px; padding-inline: 6px; scrollbar-width: thin; }
  .sidebar nav button { min-height: 36px; flex-shrink: 0; }
  .sidebar-settings { flex-shrink: 0; }
}

/* Responsive system: compact header, focused mobile tabs, and adaptable content. */
.nav-more { display: none; }
@media (max-width: 900px) {
  .sidebar { width: 206px; padding-inline: 14px; }
  .app { margin-inline-start: 206px; }
  .app main { padding-inline: 28px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .settings-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .settings-rail { padding-inline: 12px; }
}
@media (max-width: 640px) {
  .sidebar {
    position: sticky;
    inset: 0 0 auto;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-inline: 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
    box-shadow: var(--shadow-soft);
  }
  .sidebar .brand { margin: 0; gap: 0; font-size: 0; }
  .sidebar .brand-name { display: none; }
  .sidebar .brand-mark { font-size: 17px; }
  .sidebar-search { min-width: 0; min-height: var(--control-height); margin: 0; }
  .sidebar-search kbd, .nav-label { display: none; }
  .sidebar-settings { width: auto; min-height: var(--control-height); margin: 0; padding: 0 8px; border: 0; }
  .sidebar-settings .nav-text { display: none; }
  .sidebar-settings .nav-icon { width: 20px; height: 20px; }
  .sidebar nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    max-width: none;
    margin: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    overflow: visible;
    border-top: 1px solid var(--line);
    background: var(--canvas);
    box-shadow: 0 -6px 18px rgba(35, 43, 56, 0.06);
  }
  .sidebar nav > button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: 6px 2px;
    border-radius: var(--radius-md);
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
  }
  .sidebar nav > button .nav-text { flex: 0 0 auto; max-width: 100%; }
  .sidebar nav > button .nav-icon { flex-basis: 20px; width: 20px; height: 20px; margin: 0; font-size: 17px; }
  .sidebar nav > button.active::before, .sidebar nav > .nav-divider { display: none; }
  .sidebar nav > button .badge {
    position: absolute;
    top: 4px;
    inset-inline-end: calc(50% - 22px);
    min-width: 16px;
    margin: 0;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    line-height: 16px;
    color: var(--surface);
    background: var(--accent-strong);
  }
  .sidebar nav:not(.nav-open) > button:not([data-view="inbox"], [data-view="today"], [data-view="upcoming"], [data-view="money"], .nav-more) { display: none; }
  .sidebar nav > .nav-more { display: flex; }
  .sidebar nav.nav-open {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-height: min(75dvh, 620px);
    padding-top: 14px;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 0 100vmax rgba(20, 24, 32, 0.32);
  }
  .sidebar nav.nav-open > .nav-more { grid-column: 1 / -1; min-height: 44px; flex-direction: row; }
  .app { margin: 0; min-width: 0; }
  .app main { min-width: 0; padding: 22px 18px calc(96px + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; gap: 12px; }
  .page-heading h1 { min-width: 0; flex-wrap: wrap; }
  .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .money-summary, .wealth-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .settings-rail { padding: 13px 11px 9px; border-inline: 0; border-bottom: 1px solid var(--line); }
  .settings-rail-heading { display: flex; align-items: center; gap: 12px; padding: 0 5px 8px; }
  .settings-rail-heading h2 { font-size: 20px; }
  .settings-nav { display: flex; gap: 5px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; white-space: nowrap; }
  .settings-main { min-width: 0; padding: 22px 17px; }
  .feature-settings { grid-template-columns: 1fr; }
  dialog { width: min(520px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 22px 18px; border-radius: var(--radius-lg); }
  #settingsDialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: 0; border-radius: 16px; }
}
@media (max-width: 380px) {
  .sidebar { gap: 7px; padding-inline: 10px; }
  .app main { padding-inline: 14px; }
  .money-summary, .wealth-totals { grid-template-columns: 1fr; }
  .heading-actions { justify-content: flex-start; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions > .btn { flex: 1 1 auto; }
  .settings-main { padding-inline: 12px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .app main { padding-block: 28px; }
  .wealth-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog { max-width: calc(100vw - 32px); }
}
html[data-theme="dark"] .sidebar nav > button .badge { color: var(--canvas); }

.money-fx-notice,
.money-rate-basis {
  margin: 10px 0;
  padding: 10px 13px;
  border-radius: var(--radius-md);
  font-size: 13px;
}
.money-fx-notice {
  color: var(--warning);
  background: var(--warning-soft);
}
.money-rate-basis {
  color: var(--muted);
  background: var(--surface-soft);
}
.money-equivalent {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
}
.money-equivalent.missing { color: var(--warning); }
.exchange-rate-card {
  max-width: 680px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.exchange-rate-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
}
.exchange-rate-form label,
.exchange-entry-rate {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.exchange-rate-form input,
.exchange-entry-rate input {
  width: 100%;
  min-height: var(--control-height);
  padding: 9px 11px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.exchange-rate-card .form-hint { margin: 14px 0 6px; }
.exchange-rate-history { display: grid; gap: 4px; margin-top: 14px; }
.exchange-rate-history h4 { margin: 0 0 5px; }
.exchange-rate-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-align: start;
  background: transparent;
}
.exchange-rate-history-row:hover { background: var(--surface-soft); }
.exchange-rate-history-row strong { margin-inline-start: auto; }
.exchange-rate-history-row span,
.exchange-rate-history-row strong { direction: ltr; unicode-bidi: isolate; }
.exchange-rate-history-row small { color: var(--accent-strong); }
.exchange-entry-rate { margin-top: 12px; }
@media (max-width: 640px) {
  .exchange-rate-form { grid-template-columns: 1fr; }
  .exchange-rate-form .btn { width: 100%; }
  .exchange-rate-card { padding: 15px; }
}

/* Page titles carry the same line icon as their sidebar entry. */
.page-heading h1 { display: flex; align-items: center; gap: 12px; }
.title-icon { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--accent-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#today .title-icon { stroke: #d89a2b; }
html[data-theme="dark"] #today .title-icon { stroke: #e3b155; }
@media (max-width: 640px) { .title-icon { flex-basis: 22px; width: 22px; height: 22px; } }

/* Sync: a quiet status line above Settings, and the account form. */
.sync-badge { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding: 6px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
.sync-badge[hidden] { display: none; }
.sync-badge + .sidebar-settings { margin-top: 0; }
.sync-badge i, .sync-line i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.sync-badge[data-state="synced"] i, .sync-line[data-state="synced"] i { background: #2e9f62; }
.sync-badge[data-state="syncing"] i, .sync-line[data-state="syncing"] i { background: var(--series-1); animation: syncPulse 1s ease-in-out infinite alternate; }
.sync-badge[data-state="offline"] i, .sync-line[data-state="offline"] i { background: var(--status-warning); }
.sync-badge[data-state="error"] i, .sync-line[data-state="error"] i { background: var(--status-critical); }
.sync-line { display: flex; align-items: center; gap: 8px; }
@keyframes syncPulse { from { opacity: 0.35; } to { opacity: 1; } }
.account-form { display: grid; gap: 10px; }
.account-form label { display: grid; gap: 4px; font-size: 12px; }
.account-form .dialog-actions { justify-content: flex-start; }
.account-recovery-code { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border: 1px solid var(--series-1); border-radius: 14px; background: color-mix(in srgb, var(--series-1) 9%, var(--surface)); }
.account-recovery-code p, .account-recovery p { margin: 0; color: var(--muted); font-size: 13px; }
.account-recovery-code code { display: block; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; letter-spacing: .04em; user-select: all; }
.account-recovery { margin: 12px 0; }
.account-recovery summary { cursor: pointer; font-weight: 600; }
.account-recovery p { margin: 8px 0 12px; }
.account-delete summary { cursor: pointer; color: var(--danger); font-weight: 600; }
.account-delete > p { color: var(--muted); font-size: 13px; }
.account-delete .btn.danger { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); }
.account-switch-card { display: grid; gap: 12px; }
.account-switch-card > p { margin: 0; }
@media (max-width: 640px) { .sync-badge { display: none; } }