:root {
  color-scheme: dark;
  --bg: #071722;
  --surface: rgba(15, 39, 52, 0.68);
  --surface-2: rgba(28, 66, 83, 0.76);
  --surface-3: rgba(45, 96, 115, 0.84);
  --text: rgba(244, 251, 255, 0.90);
  --muted: rgba(189, 208, 217, 0.72);
  --faint: rgba(130, 163, 176, 0.58);
  --line: rgba(170, 224, 238, 0.32);
  --line-soft: rgba(170, 224, 238, 0.15);
  --accent: #48d88b;
  --accent-2: #39a8ff;
  --danger: #ff7e8d;
  --cash: #22c9e8;
  --cash-soft: rgba(34, 201, 232, 0.22);
  --investment: #35d28a;
  --investment-soft: rgba(53, 210, 138, 0.19);
  --home: #8390ff;
  --home-soft: rgba(131, 144, 255, 0.19);
  --debt: #ff7285;
  --debt-soft: rgba(255, 114, 133, 0.19);
  --planning: #efb45c;
  --planning-soft: rgba(239, 180, 92, 0.18);
  --net-worth-value: #67b9ff;
  --assets-value: #42d8e8;
  --home-value: #a8afff;
  --debt-value: #ff8a99;
  --shadow: rgba(0, 10, 18, 0.36);
  --glass: rgba(12, 34, 47, 0.58);
  --glass-strong: rgba(10, 32, 44, 0.94);
  --field-bg: rgba(255, 255, 255, 0.075);
  --theme-card-bg: rgba(7, 28, 40, 0.40);
  --theme-card-hover: rgba(17, 53, 69, 0.58);
  --theme-nav-bg: rgba(7, 28, 40, 0.46);
  --theme-nav-expanded: rgba(7, 28, 40, 0.70);
  --theme-label-bg: rgba(7, 28, 40, 0.34);
  --theme-panel-bg: rgba(7, 28, 40, 0.62);
  --theme-drawer-bg: rgba(7, 28, 40, 0.84);
  --glass-panel-bg: rgba(255, 255, 255, 0.055);
  --glass-blur: 0px;
  --radius: 18px;
  --radius-small: 12px;
  --radius-pill: 999px;
  --type-caption: 12px;
  --type-label: 13px;
  --type-body: 14px;
  --type-panel-title: 17px;
  --type-metric-value: 24px;
  --nav-rail-width: 62px;
  --nav-rail-expanded-width: 214px;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(42, 141, 205, 0.32), transparent 31%),
    radial-gradient(circle at 92% 7%, rgba(54, 209, 135, 0.22), transparent 34%),
    radial-gradient(circle at 58% 105%, rgba(27, 107, 157, 0.22), transparent 38%),
    linear-gradient(135deg, #071722 0%, #0a2534 47%, #0c3d47 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

body.app-loading .app-shell,
body.app-loading .auth-gate {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.app-shell,
.auth-gate {
  transition: opacity 140ms ease;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at 22% 12%, rgba(62, 167, 144, 0.24), transparent 38%), rgba(4, 20, 31, 0.94);
  backdrop-filter: blur(22px);
}

.auth-gate[hidden] { display: none; }

.auth-gate:not([hidden]) + .app-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.auth-card {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid rgba(170, 224, 238, 0.28);
  border-radius: 28px;
  background: rgba(28, 57, 69, 0.82);
  box-shadow: 0 28px 70px rgba(0, 8, 14, 0.5), inset 0 1px rgba(255, 255, 255, 0.12);
}

.auth-card h1, .auth-card p { margin: 0; }
.auth-card label { display: grid; gap: 7px; color: var(--muted); font-weight: 700; }
.auth-card [hidden] { display: none; }
.auth-card input,
.auth-card select {
  width: 100%;
  min-height: 48px;
  padding: 10px 15px;
  border: 1px solid rgba(170, 224, 238, 0.22);
  border-radius: 16px;
  outline: none;
  color: var(--text);
  background: rgba(8, 31, 43, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.auth-card input:hover,
.auth-card select:hover {
  border-color: rgba(170, 224, 238, 0.34);
  background: rgba(13, 40, 52, 0.64);
}

.auth-card input:focus,
.auth-card select:focus {
  border-color: rgba(72, 194, 142, 0.82);
  background: rgba(12, 39, 50, 0.78);
  box-shadow: 0 0 0 3px rgba(72, 194, 142, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px rgb(12, 39, 50) inset;
  border-color: rgba(72, 194, 142, 0.62);
}

.auth-reset-link { justify-self: center; color: var(--muted); font-size: 12px; }
.auth-reset-panel { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.auth-reset-panel[hidden] { display: none; }
.auth-error { min-height: 18px; color: #ff9aab; font-size: 13px; }
.signed-in-user { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }

.family-accounts-card { grid-column: 1 / -1; }
.family-account-list { display: grid; gap: 8px; margin: 10px 0 16px; }
.family-account-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(124, 198, 224, 0.08); }
.family-account-row span { color: var(--muted); }
.family-account-row > div {
  display: grid;
  gap: 3px;
}

.family-account-row .family-account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.family-account-actions select {
  min-width: 142px;
  min-height: 34px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background-color: rgba(8, 31, 43, 0.62);
  color: var(--text);
  font: inherit;
  font-size: var(--type-label);
  font-weight: 700;
}

.family-account-actions select:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.family-account-row .secondary-button {
  align-self: center;
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
}

.family-account-row .family-account-remove {
  min-height: 34px;
  color: var(--danger);
}

.family-account-row .family-account-remove:disabled {
  color: var(--faint);
  cursor: not-allowed;
}

.family-account-form > button {
  align-self: end;
}

.family-account-switcher {
  display: grid;
  gap: 7px;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.family-account-switcher[hidden] {
  display: none;
}

.family-account-switcher > span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.family-account-switcher > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.family-account-switcher button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  min-height: 46px;
  padding: 7px 12px 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
}

.family-account-switcher button:hover:not(:disabled),
.family-account-switcher button:focus-visible {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.family-account-switcher button:disabled {
  color: var(--muted);
  cursor: default;
}

.family-account-switcher button span {
  color: var(--muted);
  font-size: 11px;
}

.family-account-switcher button strong {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-right: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-return-button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(72, 194, 142, 0.36);
  border-radius: 999px;
  background: rgba(72, 194, 142, 0.12);
  color: rgba(221, 249, 234, 0.94);
  font-weight: 800;
}

.account-return-button:hover,
.account-return-button:focus-visible {
  background: rgba(72, 194, 142, 0.20);
  outline: none;
}

.child-dashboard[hidden],
.child-settings[hidden] {
  display: none;
}

.child-dashboard,
.child-settings {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

body.child-account .mode-switch,
body.child-account .history-actions,
body.child-account #monthEndToggle,
body.child-account #monthEndReview,
body.child-account #openFamilyAccounts,
body.child-account #openAppearanceSettings,
body.child-account #demoModeToggle,
body.child-account #financeLockScreen,
body.child-account #lockFinance,
body.child-account main > .summary-grid,
body.child-account main > .tabs,
body.child-account main > .panel {
  display: none;
}

body.child-account .topbar-inner {
  justify-content: flex-end;
}

body.child-account main {
  width: min(1362px, calc(100vw - 56px));
  display: block;
  margin-inline: auto;
  padding-top: 4px;
}

.child-dashboard-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  min-height: 96px;
  padding: 8px 2px 4px;
}

.child-dashboard-header h1 {
  margin: 3px 0 4px;
}

.child-dashboard-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.child-settings-icon-button {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
}

.child-settings-icon-button:hover,
.child-settings-icon-button:focus-visible {
  border-color: rgba(170, 224, 238, 0.38);
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  outline: none;
}

.child-settings-icon-button .button-icon {
  width: 19px;
  height: 19px;
}

.child-dashboard-header > div > span {
  color: var(--muted);
  font-weight: 650;
}

.child-dashboard-breadcrumb {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 750;
}

.child-dashboard-breadcrumb[hidden] {
  display: none;
}

.child-dashboard-breadcrumb button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(216, 237, 245, 0.84);
  font: inherit;
}

.child-dashboard-breadcrumb button::before {
  margin-right: 6px;
  content: "‹";
}

.child-dashboard-breadcrumb button:hover,
.child-dashboard-breadcrumb button:focus-visible {
  border-color: rgba(170, 224, 238, 0.38);
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  outline: none;
}

.child-dashboard-breadcrumb strong {
  color: var(--text);
}

.child-month-summary {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 150px;
}

.child-month-summary span,
.child-month-summary small {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.child-month-summary strong {
  font-size: 28px;
}

.child-bucket-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.child-bucket {
  --bucket-color: #58b1e7;
  --bucket-soft: rgba(88, 177, 231, 0.12);
  --bucket-share: 50;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 246px;
  padding: 20px 16px;
  border: 1px solid color-mix(in srgb, var(--bucket-color) 34%, transparent);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--bucket-soft), rgba(255, 255, 255, 0.035));
  color: var(--text);
  font: inherit;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 32px rgba(0, 12, 20, 0.15);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.child-bucket::after {
  position: absolute;
  top: 14px;
  right: 16px;
  color: color-mix(in srgb, var(--bucket-color) 72%, white);
  font-size: 25px;
  line-height: 1;
  content: "›";
  opacity: 0.66;
}

.child-bucket:hover,
.child-bucket:focus-visible {
  border-color: color-mix(in srgb, var(--bucket-color) 56%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bucket-soft) 84%, white 4%), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 18px 38px rgba(0, 12, 20, 0.20), 0 0 24px color-mix(in srgb, var(--bucket-color) 10%, transparent);
  outline: none;
  transform: translateY(-2px);
}

.child-bucket-save {
  --bucket-color: #48d88b;
  --bucket-soft: rgba(72, 216, 139, 0.12);
}

.child-bucket-grow {
  --bucket-color: #a795ff;
  --bucket-soft: rgba(167, 149, 255, 0.12);
}

.child-bucket-give {
  --bucket-color: #efb45c;
  --bucket-soft: rgba(239, 180, 92, 0.13);
}

.child-bucket-ring {
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(9, 35, 47, 0.96) 0 65%, transparent 67%),
    conic-gradient(var(--bucket-color) calc(var(--bucket-share) * 1%), rgba(150, 190, 205, 0.16) 0);
  box-shadow: 0 0 24px color-mix(in srgb, var(--bucket-color) 12%, transparent);
}

.child-bucket-ring span {
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
}

.child-bucket-copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.child-bucket-copy > span {
  color: color-mix(in srgb, var(--bucket-color) 80%, white);
  font-size: 19px;
  font-weight: 850;
}

.child-bucket-copy strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 29px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-bucket-caption {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
  text-align: center;
}

.child-dashboard[data-child-view="home"] .child-bucket {
  min-height: 440px;
  gap: 18px;
  padding: 30px 22px;
}

.child-dashboard[data-child-view="home"] .child-bucket-ring {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 38px color-mix(in srgb, var(--bucket-color) 16%, transparent);
}

.child-dashboard[data-child-view="home"] .child-bucket-ring span {
  font-size: 23px;
}

.child-dashboard[data-child-view="home"] .child-bucket-copy > span {
  font-size: 23px;
}

.child-dashboard[data-child-view="home"] .child-bucket-copy strong {
  font-size: 36px;
}

.child-dashboard[data-child-view="home"] .child-bucket-caption {
  font-size: 15px;
}

.child-plan-summary {
  display: none;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 3px 4px;
}

.child-dashboard[data-child-view="home"] .child-learning-grid,
.child-dashboard[data-child-view="home"] .child-dashboard-grid {
  display: none;
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="grow"], [data-child-view="give"]) .child-bucket-grid {
  grid-template-columns: minmax(320px, 540px);
  justify-content: center;
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="grow"], [data-child-view="give"]) .child-bucket {
  min-height: 190px;
  cursor: default;
  pointer-events: none;
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="grow"], [data-child-view="give"]) .child-bucket::after {
  display: none;
}

.child-dashboard[data-child-view="spend"] .child-bucket:not(.child-bucket-spend),
.child-dashboard[data-child-view="save"] .child-bucket:not(.child-bucket-save),
.child-dashboard[data-child-view="grow"] .child-bucket:not(.child-bucket-grow),
.child-dashboard[data-child-view="give"] .child-bucket:not(.child-bucket-give) {
  display: none;
}

.child-dashboard[data-child-view="spend"] .child-goals-panel,
.child-dashboard[data-child-view="spend"] .child-allowance-panel,
.child-dashboard[data-child-view="spend"] .child-growth-panel,
.child-dashboard[data-child-view="save"] .child-growth-panel,
.child-dashboard[data-child-view="grow"] .child-learning-grid,
.child-dashboard[data-child-view="give"] .child-learning-grid,
.child-dashboard[data-child-view="give"] .child-growth-panel {
  display: none;
}

.child-dashboard[data-child-view="spend"] .child-learning-grid {
  grid-template-columns: minmax(320px, 720px);
  justify-content: center;
}

.child-dashboard[data-child-view="spend"] .child-learning-side {
  display: block;
}

.child-dashboard[data-child-view="save"] .child-learning-grid {
  grid-template-columns: 1fr;
}

.child-dashboard[data-child-view="save"] .child-learning-side {
  display: none;
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="give"]) .child-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="give"]) .child-money-actions {
  grid-column: 1;
  grid-row: 1;
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="give"]) .child-activity-panel {
  grid-column: 2;
  grid-row: 1;
}

.child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="grow"], [data-child-view="give"]) .child-use-bucket-field {
  display: none;
}

.child-plan-summary > strong {
  color: var(--muted);
  font-size: var(--type-caption);
}

.child-plan-summary .child-allocation-bar {
  height: 9px;
}

.child-plan-summary-labels {
  display: flex;
  gap: 12px;
}

.child-plan-summary-labels span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.child-plan-summary-labels strong {
  color: var(--text);
}

.child-learning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: stretch;
  gap: 12px;
}

.child-goals-panel,
.child-purchase-panel,
.child-allowance-panel {
  min-width: 0;
}

.child-goals-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.child-goals-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.child-goals-heading-actions > span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
  white-space: nowrap;
}

.child-goals-heading-actions > span strong {
  color: #8aefb8;
}

.child-goals-heading-actions .compact-button,
.child-allowance-panel .compact-button {
  min-height: 34px;
  padding: 6px 11px;
  font-size: var(--type-caption);
}

.child-goals-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.child-goals-empty {
  display: flex;
  grid-column: 1 / -1;
  min-height: 136px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 1px dashed rgba(72, 216, 139, 0.28);
  border-radius: 8px;
  background: rgba(72, 216, 139, 0.045);
  color: var(--text);
  text-align: left;
}

.child-goals-empty:hover,
.child-goals-empty:focus-visible {
  border-color: rgba(72, 216, 139, 0.52);
  background: rgba(72, 216, 139, 0.09);
  outline: none;
}

.child-goals-empty > .button-icon {
  width: 34px;
  height: 34px;
  color: #70e4a5;
}

.child-goals-empty > span {
  display: grid;
  gap: 4px;
}

.child-goals-empty small {
  color: var(--muted);
  font-size: var(--type-caption);
}

.child-goal-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 144px;
  padding: 12px;
  border: 1px solid rgba(72, 216, 139, 0.19);
  border-radius: 8px;
  background: rgba(72, 216, 139, 0.055);
}

.child-goal-card.complete {
  border-color: rgba(72, 216, 139, 0.42);
  background: rgba(72, 216, 139, 0.105);
}

.child-goal-ring {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(9, 35, 47, 0.97) 0 56%, transparent 58%),
    conic-gradient(#48d88b calc(var(--goal-progress) * 1%), rgba(150, 190, 205, 0.15) 0);
  box-shadow: 0 0 18px rgba(72, 216, 139, 0.09);
}

.child-goal-ring span {
  font-size: 12px;
  font-weight: 850;
}

.child-goal-content {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.child-goal-content > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.child-goal-content > div:first-child > strong {
  overflow: hidden;
  font-size: var(--type-card-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-goal-content > span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.child-goal-edit {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.child-goal-edit:hover,
.child-goal-edit:focus-visible {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  outline: none;
}

.child-goal-edit .button-icon {
  width: 15px;
  height: 15px;
}

.child-goal-progress,
.child-purchase-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(150, 190, 205, 0.14);
}

.child-goal-progress i,
.child-purchase-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #48d88b;
  transition: width 180ms ease;
}

.child-goal-allocate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.child-goal-allocate input,
.child-purchase-form input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 800;
  outline: none;
}

.child-goal-allocate input {
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}

.child-goal-allocate button {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid rgba(72, 216, 139, 0.35);
  border-left: 0;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: rgba(72, 216, 139, 0.14);
  color: #c9f7de;
  font-size: 12px;
  font-weight: 800;
}

.child-goal-allocate button:disabled,
.child-goal-allocate input:disabled {
  opacity: 0.52;
}

.child-goal-complete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #7ce5aa;
  font-size: var(--type-caption);
}

.child-goal-complete button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid rgba(72, 216, 139, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(72, 216, 139, 0.13);
  color: #c9f7de;
  font-size: 11px;
  font-weight: 800;
}

.child-learning-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}

.child-purchase-panel,
.child-allowance-panel {
  display: grid;
  align-content: start;
  gap: 11px;
}

.child-purchase-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(100px, 0.8fr);
  gap: 9px;
}

.child-purchase-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.child-purchase-meter i {
  background: #58b1e7;
}

.child-purchase-status {
  min-height: 42px;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.45;
}

.child-purchase-status.ready { color: #8aefb8; }
.child-purchase-status.waiting { color: #ffd28c; }

.child-allowance-readout {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.child-feature-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(156, 215, 239, 0.82);
  -webkit-mask: url("/assets/icons/svg/recurring.svg") center / 25px 25px no-repeat;
  mask: url("/assets/icons/svg/recurring.svg") center / 25px 25px no-repeat;
}

.child-allowance-readout > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.child-allowance-readout strong {
  font-size: var(--type-card-title);
}

.child-allowance-readout span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.child-goal-dialog input,
.child-allowance-dialog input,
.child-allowance-dialog select {
  font-size: var(--type-body);
}

.child-goal-dialog .field small {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
}

.child-allowance-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 750;
}

.child-allowance-toggle input {
  width: 20px;
  min-height: 20px;
  accent-color: #48d88b;
}

.child-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
}

.child-money-actions,
.child-plan-panel,
.child-growth-panel,
.child-activity-panel {
  min-width: 0;
  overflow: hidden;
}

.child-money-actions {
  grid-column: 1;
  grid-row: 1;
}

.child-activity-panel {
  grid-column: 1;
  grid-row: 2;
}

.child-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.child-money-form {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.child-money-form > strong {
  font-size: var(--type-card-title);
}

.child-money-form label,
.child-growth-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.child-money-form input,
.child-money-form select,
.child-money-form textarea,
.child-growth-controls input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--type-body);
  font-weight: 800;
  line-height: 1.25;
  outline: none;
}

.child-money-form input:focus,
.child-money-form select:focus,
.child-money-form textarea:focus,
.child-growth-controls input:focus {
  border-color: rgba(72, 194, 142, 0.70);
  box-shadow: 0 0 0 3px rgba(72, 194, 142, 0.12);
}

.child-money-form textarea {
  min-height: 72px;
  resize: vertical;
}

.child-money-form input::placeholder,
.child-money-form textarea::placeholder {
  color: var(--muted);
  font-weight: 700;
  opacity: 0.86;
}

.child-money-form button {
  align-self: end;
  margin-top: 2px;
}

.child-source-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  min-width: 0;
}

.child-source-control select {
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}

.child-source-control button {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font-size: 21px;
  font-weight: 700;
}

.child-source-control button:hover,
.child-source-control button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.child-title-with-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.child-title-with-info h2 {
  margin: 0;
}

.child-allocation-bar {
  display: flex;
  width: 100%;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(150, 190, 205, 0.14);
}

.child-allocation-bar i {
  min-width: 0;
  transition: width 180ms ease;
}

#childSpendBar {
  background: #58b1e7;
}

#childSummarySpendBar {
  background: #58b1e7;
}

#childSaveBar,
#childSummarySaveBar {
  background: #48d88b;
}

#childGrowBar,
#childSummaryGrowBar {
  background: #a795ff;
}

#childGiveBar,
#childSummaryGiveBar {
  background: #efb45c;
}

.child-plan-controls {
  display: grid;
  grid-template-columns: minmax(92px, 0.65fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
}

.child-plan-controls > div,
.child-plan-controls > label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.child-plan-controls > div > span,
.child-plan-controls > label > span:first-child {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.child-plan-controls > div > strong {
  display: grid;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: rgba(88, 177, 231, 0.08);
}

.child-plan-stepper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.child-plan-stepper input {
  width: 100%;
  min-width: 0;
  padding-inline: 4px;
  text-align: center;
}

.child-growth-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.child-settings-header {
  display: flex;
  min-height: 96px;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 2px 4px;
}

.child-settings-header h1 {
  margin: 3px 0 4px;
}

.child-settings-header > div > span {
  color: var(--muted);
  font-weight: 650;
}

.child-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.child-settings-grid > .table-panel {
  min-width: 0;
}

.child-money-sources-panel {
  grid-column: 1 / -1;
}

.child-setting-state {
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.child-settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.child-settings-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.child-settings-form .field > span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.child-settings-form input,
.child-settings-form select,
.child-money-source-form input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 800;
  outline: none;
}

.child-settings-form input:focus,
.child-settings-form select:focus,
.child-money-source-form input:focus {
  border-color: rgba(72, 194, 142, 0.70);
  box-shadow: 0 0 0 3px rgba(72, 194, 142, 0.12);
}

.child-settings-form .auth-error {
  grid-column: 1 / -1;
  margin: 0;
}

.child-settings-form > .primary-button {
  justify-self: end;
}

.child-money-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.child-money-source-list span {
  padding: 7px 11px;
  border: 1px solid rgba(88, 177, 231, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(88, 177, 231, 0.08);
  color: var(--text);
  font-size: var(--type-caption);
  font-weight: 750;
}

.child-money-source-form {
  display: grid;
  grid-template-columns: minmax(180px, 360px) auto;
  justify-content: start;
  gap: 8px;
}

.child-growth-panel .section-header > strong {
  color: rgba(113, 231, 166, 0.95);
  font-size: 24px;
}

.child-growth-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
}

.child-growth-years {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 40px;
}

.child-growth-years button {
  min-height: 34px;
}

#childSavingsGrowthChart {
  display: block;
  width: 100%;
  height: 280px;
  margin-top: 8px;
}

.child-growth-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.child-growth-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

.child-growth-summary span {
  color: var(--muted);
  font-weight: 700;
}

.child-activity-list {
  display: grid;
  gap: 4px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.child-activity-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.child-activity-row:last-child {
  border-bottom: 0;
}

.child-activity-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(88, 177, 231, 0.13);
  color: #9edcff;
  font-weight: 900;
}

.child-activity-row.save .child-activity-icon {
  background: rgba(72, 216, 139, 0.13);
  color: #8aefb8;
}

.child-activity-row.grow .child-activity-icon {
  background: rgba(167, 149, 255, 0.14);
  color: #c2b7ff;
}

.child-activity-row.give .child-activity-icon {
  background: rgba(239, 180, 92, 0.14);
  color: #ffd28c;
}

.child-activity-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.child-activity-row > div strong,
.child-activity-row > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-activity-row > div span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.child-activity-row > strong {
  white-space: nowrap;
}

.child-activity-actions {
  display: flex;
  justify-content: flex-end;
}

.child-activity-actions button {
  display: grid;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.child-activity-actions button:hover,
.child-activity-actions button:focus-visible {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  outline: none;
}

.child-activity-actions .button-icon {
  width: 15px;
  height: 15px;
}

.child-activity-empty {
  display: grid;
  min-height: 130px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.child-activity-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--theme-drawer-bg);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(var(--glass-blur, 18px));
}

.child-activity-dialog::backdrop {
  background: rgba(2, 14, 23, 0.62);
  backdrop-filter: blur(5px);
}

.child-activity-dialog form,
.child-activity-dialog .field {
  display: grid;
  gap: 10px;
}

.child-activity-dialog form {
  gap: 14px;
}

.child-activity-dialog .field > span {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 760;
}

.child-activity-dialog input,
.child-activity-dialog select,
.child-activity-dialog textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  outline: none;
  background: var(--field-bg);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 800;
}

.child-activity-dialog textarea {
  min-height: 84px;
  resize: vertical;
}

.child-activity-dialog-actions {
  align-items: center;
}

@media (max-width: 1120px) {
  .child-dashboard[data-child-view="home"] .child-bucket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-dashboard[data-child-view="home"] .child-bucket {
    min-height: 390px;
  }

  .child-dashboard[data-child-view="home"] .child-bucket-ring {
    width: 170px;
    height: 170px;
  }

  .child-learning-grid {
    grid-template-columns: 1fr;
  }

  .child-learning-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .child-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="give"]) .child-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .child-settings-grid {
    grid-template-columns: 1fr;
  }

  .child-money-sources-panel {
    grid-column: auto;
  }

  .child-growth-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .child-money-actions,
  .child-plan-panel,
  .child-activity-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="give"]) .child-money-actions,
  .child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="give"]) .child-activity-panel {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  body.child-account main {
    width: calc(100vw - 24px);
  }

  .account-return-button {
    max-width: 150px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .child-dashboard-header {
    align-items: start;
    flex-direction: column;
    min-height: 0;
  }

  .child-settings-header {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .child-month-summary {
    justify-items: start;
  }

  .child-bucket-grid,
  .child-action-grid,
  .child-plan-controls,
  .child-growth-controls,
  .child-goals-list,
  .child-learning-side,
  .child-purchase-form {
    grid-template-columns: 1fr;
  }

  .child-dashboard:is([data-child-view="spend"], [data-child-view="save"], [data-child-view="grow"], [data-child-view="give"]) .child-bucket-grid {
    grid-template-columns: 1fr;
  }

  .child-dashboard[data-child-view="home"] .child-bucket-grid {
    grid-template-columns: 1fr;
  }

  .child-plan-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .child-plan-summary-labels {
    justify-content: space-between;
  }

  .child-settings-form,
  .child-money-source-form {
    grid-template-columns: 1fr;
  }

  .child-settings-form > .primary-button,
  .child-money-source-form > button {
    width: 100%;
  }

  .child-learning-side {
    grid-template-rows: auto;
  }

  .child-goals-panel .section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .child-goals-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .child-bucket {
    min-height: 210px;
  }

  .child-bucket-ring {
    width: 92px;
    height: 92px;
  }

  .child-dashboard[data-child-view="home"] .child-bucket {
    min-height: 350px;
  }

  .child-dashboard[data-child-view="home"] .child-bucket-ring {
    width: 168px;
    height: 168px;
  }

  .child-growth-panel .section-header {
    align-items: start;
    flex-direction: column;
  }

  .child-activity-row {
    grid-template-columns: 32px minmax(0, 1fr) auto 34px;
  }

  .child-activity-actions {
    grid-column: auto;
  }

  #childSavingsGrowthChart {
    height: 230px;
  }
}

body[data-appearance-theme="midnight"] {
  --theme-card-bg: rgba(10, 20, 49, 0.42);
  --theme-card-hover: rgba(24, 42, 80, 0.60);
  --theme-nav-bg: rgba(8, 18, 43, 0.48);
  --theme-nav-expanded: rgba(8, 18, 43, 0.72);
  --theme-label-bg: rgba(11, 22, 51, 0.36);
  background:
    radial-gradient(circle at 12% 0%, rgba(54, 93, 177, 0.30), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(81, 77, 170, 0.18), transparent 35%),
    linear-gradient(145deg, #050c19 0%, #0b1830 52%, #121d38 100%);
}

body[data-appearance-theme="forest"] {
  --theme-card-bg: rgba(7, 39, 31, 0.40);
  --theme-card-hover: rgba(18, 70, 54, 0.58);
  --theme-nav-bg: rgba(6, 35, 28, 0.48);
  --theme-nav-expanded: rgba(6, 35, 28, 0.72);
  --theme-label-bg: rgba(8, 42, 33, 0.36);
  background:
    radial-gradient(circle at 10% 0%, rgba(52, 160, 117, 0.27), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(92, 151, 83, 0.20), transparent 38%),
    linear-gradient(140deg, #071612 0%, #0b2923 50%, #12372f 100%);
}

body[data-appearance-theme="sunset"] {
  --theme-card-bg: rgba(38, 24, 49, 0.42);
  --theme-card-hover: rgba(72, 42, 66, 0.60);
  --theme-nav-bg: rgba(34, 21, 45, 0.50);
  --theme-nav-expanded: rgba(34, 21, 45, 0.74);
  --theme-label-bg: rgba(43, 27, 51, 0.38);
  background:
    radial-gradient(circle at 12% 0%, rgba(194, 89, 91, 0.28), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(232, 153, 77, 0.23), transparent 36%),
    linear-gradient(145deg, #171224 0%, #2b1d36 48%, #3c2a32 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

body::before {
  background-image: var(--app-background-image, none);
  background-position: center;
  background-size: cover;
  opacity: var(--app-background-image-opacity, 0);
}

body::after {
  background: var(--app-background-tone, transparent);
}

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

select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.compact-select {
  width: min(280px, 100%);
  min-height: 38px;
  padding: 7px 36px 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  outline: none;
  background-color: var(--field-bg);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 650;
  text-align: center;
}

.compact-select:hover {
  border-color: rgba(170, 224, 238, 0.28);
  background-color: rgba(255, 255, 255, 0.10);
}

.compact-select:focus {
  border-color: rgba(72, 194, 142, 0.72);
  box-shadow: 0 0 0 3px rgba(72, 194, 142, 0.12);
}

.form-grid .compact-select {
  width: min(280px, 100%);
  justify-self: start;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0 0 48px;
}

.topbar {
  position: relative;
  z-index: 30;
  display: block;
  padding: 7px 0;
  background: transparent;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.topbar-inner {
  position: relative;
  width: min(1440px, calc(100vw - 56px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  min-width: 180px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
}

.brand-mark img {
  width: 42px;
  height: 39px;
  object-fit: contain;
  opacity: 1;
}

.demo-mode-badge {
  padding: 4px 7px;
  border: 1px solid rgba(242, 198, 79, 0.44);
  border-radius: var(--radius-pill);
  background: rgba(242, 198, 79, 0.16);
  color: #ffe39a;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.demo-mode-toggle {
  min-height: 34px;
  padding: 0 13px;
  font-size: 12px;
}

body.demo-mode .demo-mode-toggle {
  border-color: rgba(242, 198, 79, 0.38);
  background: rgba(242, 198, 79, 0.14);
  color: #ffe39a;
}

.mode-switch {
  position: static;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(9, 31, 43, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: none;
}

.mode-button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.mode-button.active {
  background: rgba(74, 202, 132, 0.82);
  color: #122316;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  line-height: 1.15;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 21px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.user-menu {
  position: relative;
}

.user-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 3px 8px 3px 4px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 999px;
  background: var(--glass-panel-bg);
  cursor: pointer;
  list-style: none;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.06);
}

.user-menu > summary::-webkit-details-marker { display: none; }

.user-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #102719;
  background: rgba(75, 202, 139, 0.88);
  font-size: 12px;
  font-weight: 850;
}

.user-menu-chevron {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}

.user-menu[open] .user-menu-chevron { transform: rotate(180deg) translateY(1px); }

.user-menu-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  width: min(250px, calc(100vw - 24px));
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(170, 224, 238, 0.20);
  border-radius: 18px;
  background: rgba(18, 43, 55, 0.94);
  box-shadow: 0 20px 44px rgba(0, 8, 14, 0.38), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.08);
}

.user-menu-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px 11px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--line-soft);
}

.user-menu-identity strong {
  overflow-wrap: anywhere;
  color: var(--text);
}

.user-menu-identity span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.topbar .user-menu-popover button {
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  padding: 7px 10px;
  border: 0;
  border-radius: 11px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.topbar .user-menu-popover button:hover { background: rgba(145, 204, 225, 0.10); }
.topbar .user-menu-popover .user-menu-signout { color: #ff9dad; }

.topbar .user-menu-popover .family-account-switcher button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: 46px;
  padding: 7px 12px 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.topbar .user-menu-popover .family-account-switcher button:hover:not(:disabled),
.topbar .user-menu-popover .family-account-switcher button:focus-visible {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.08);
}

.history-actions {
  display: inline-flex;
  height: 34px;
  gap: 4px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: var(--glass-panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.06);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.06);
}

body.mode-finance .history-actions { display: none; }

.history-action-button {
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.history-action-button span {
  display: block;
  width: auto;
  height: auto;
  background: transparent;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(1.5px);
}

.history-action-button:disabled {
  cursor: default;
  opacity: 0.28;
}

.topbar .history-action-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
}

.topbar .history-action-button:not(:disabled):hover,
.topbar .history-action-button:not(:disabled):focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.month-end-toggle {
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px;
  align-items: center;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  border-color: rgba(170, 224, 238, 0.16);
  color: rgba(244, 251, 255, 0.80);
  background: rgba(12, 34, 47, 0.48);
  font-weight: 900;
}

.month-end-toggle span {
  color: var(--muted);
  font-size: 12px;
}

.month-end-toggle strong {
  color: rgba(238, 188, 103, 0.92);
}

.month-end-toggle.needs-update strong {
  color: #d9ad65;
}

.month-end-toggle.is-open {
  border-color: rgba(170, 224, 238, 0.28);
}

.status-pill,
.save-state-button {
  min-width: 92px;
  height: 34px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-pill);
  text-align: center;
  font-weight: 700;
}

.status-pill.dirty {
  color: #222;
  background: var(--accent);
}

.status-pill.error {
  color: #2a0e0e;
  background: var(--danger);
}

.save-state-button {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 14px;
  top: auto;
  transform: translateX(-50%) translateY(10px);
  z-index: 80;
  min-width: 108px;
  height: 36px;
  min-height: 36px;
  width: auto;
  padding: 0 16px;
  border-color: rgba(143, 208, 122, 0.40);
  color: rgba(225, 255, 237, 0.94);
  background: rgba(56, 95, 50, 0.82);
  box-shadow: 0 16px 34px rgba(0, 10, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease, transform 600ms ease, background 160ms ease;
}

.save-state-button.dirty {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  color: var(--text);
  background: rgba(56, 95, 50, 0.76);
  border-color: rgba(143, 208, 122, 0.42);
}

.save-state-button.error {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  color: #2a0e0e;
  background: var(--danger);
  border-color: rgba(255, 126, 141, 0.9);
}

.save-state-button.autosave-status {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: none;
  color: rgba(225, 240, 247, 0.88);
  background: rgba(35, 65, 78, 0.82);
  border-color: rgba(170, 224, 238, 0.24);
}

.save-state-button.autosave-status.saved {
  color: rgba(225, 255, 237, 0.94);
  background: rgba(48, 91, 67, 0.82);
  border-color: rgba(105, 210, 151, 0.34);
}

.save-state-button.autosave-status.saved.saved-fading {
  opacity: 0.08;
  transform: translateX(-50%) translateY(5px);
}

.save-state-button.autosave-status.error { pointer-events: auto; }
body.mode-finance .save-state-button.autosave-status:not(.error) { display: none; }

button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  color: rgba(248, 252, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.primary-button {
  padding: 0 22px;
  border-color: rgba(83, 217, 142, 0.30);
  background: rgba(72, 216, 139, 0.24);
  color: rgba(225, 255, 237, 0.92);
  font-weight: 650;
}

.secondary-button {
  padding: 0 16px;
  font-weight: 550;
}

.text-button {
  min-height: 28px;
  justify-self: center;
  padding: 0 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.text-button:hover {
  background: transparent;
  color: var(--text);
}

.compact-button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 14px;
}

.button-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.has-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-icon {
  flex: 0 0 auto;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.button-icon {
  width: 20px;
  height: 20px;
}

.small-button .button-icon,
.compact-button .button-icon {
  width: 17px;
  height: 17px;
}

.timer-actions .button-icon {
  width: 22px;
  height: 22px;
}

.button-icon-only {
  position: relative;
  gap: 0;
  font-size: 0;
}

.button-icon-only .button-icon {
  width: 15px;
  height: 15px;
}

.button-icon-only .button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.house-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin: 18px 0 20px;
}

.house-actions span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.3;
}

.icon-button {
  width: 44px;
  font-size: 20px;
}

.topbar button {
  min-height: 34px;
}

.topbar .primary-button {
  padding: 0 18px;
}

.topbar .icon-button {
  width: 38px;
  font-size: 18px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.month-end-review {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 45;
  width: min(980px, calc(100vw - 56px));
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 20px;
  background: rgba(8, 28, 40, 0.96);
  border: 1px solid rgba(170, 224, 238, 0.26);
  border-radius: var(--radius);
  box-shadow: 0 18px 42px rgba(0, 10, 18, 0.58);
  backdrop-filter: blur(20px);
}

.month-end-review[hidden] {
  display: none;
}

.month-end-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px minmax(145px, 0.24fr) auto 42px;
  gap: 10px;
  align-items: center;
}

.month-end-summary > * {
  min-width: 0;
}

.month-end-summary h2 {
  margin-bottom: 3px;
}

.month-end-title-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.28);
  border-radius: 999px;
  background: rgba(12, 34, 47, 0.72);
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.info-tip span {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 60;
  width: min(360px, 72vw);
  padding: 12px 14px;
  border: 1px solid rgba(170, 224, 238, 0.22);
  border-radius: var(--radius-small);
  background: rgba(8, 28, 40, 0.98);
  box-shadow: 0 14px 34px rgba(0, 10, 18, 0.52);
  color: rgba(244, 251, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.42;
  text-align: left;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.info-tip:hover,
.info-tip:focus-visible {
  color: var(--text);
  border-color: rgba(170, 224, 238, 0.42);
  outline: none;
}

.info-tip:hover span,
.info-tip:focus-visible span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.month-end-summary span,
.month-end-item em {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.3;
}

.month-end-progress {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.month-end-picker {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.month-end-month-stepper {
  width: 100%;
  max-width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
}

.month-end-month-stepper input {
  width: 100%;
  min-width: 0;
}

.month-end-month-stepper > button {
  width: 34px;
  min-width: 34px;
}

.month-end-progress strong {
  font-size: 24px;
}

.month-end-progress-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(7, 23, 34, 0.76);
}

.month-end-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.month-end-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.month-end-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--planning);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.month-end-item.is-done {
  border-left-color: var(--accent);
  background: color-mix(in srgb, rgba(72, 216, 139, 0.16) 70%, rgba(255, 255, 255, 0.055));
}

.month-end-item.needs-update {
  border-left-color: var(--planning);
}

.month-end-item .compact-button {
  grid-column: 3;
  justify-self: end;
}

.month-end-copy {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--text);
  font-weight: 900;
}

.month-end-copy strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.12;
}

.month-end-copy em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.month-end-status {
  min-width: 58px;
  padding: 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  color: var(--muted);
  background: var(--field-bg);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.month-end-item.is-done .month-end-status {
  color: #13210f;
  background: var(--accent);
  border-color: var(--accent);
}

.metric-card {
  min-height: 100px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-left-width: 1px;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 12, 20, 0.16);
  backdrop-filter: blur(12px);
  display: grid;
  align-content: center;
  gap: 8px;
}

.metric-card[data-jump-section] {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.metric-card[data-jump-section]:hover {
  border-color: rgba(170, 224, 238, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 17px 32px rgba(0, 12, 20, 0.22);
  transform: translateY(-1px);
}

.metric-card[data-jump-section]:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(72, 216, 139, 0.44);
  outline-offset: 2px;
}

.metric-card[data-jump-section]:active {
  transform: translateY(0);
}

.assets-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(220px, 1.25fr);
  align-items: center;
  gap: 12px;
}

.net-worth-card {
  background:
    linear-gradient(135deg, rgba(103, 185, 255, 0.15), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.055);
}

.assets-card {
  background:
    linear-gradient(135deg, rgba(66, 216, 232, 0.13), rgba(72, 216, 139, 0.08)),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.055);
}

.home-equity-card {
  background:
    linear-gradient(135deg, rgba(131, 144, 255, 0.13), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.055);
}

.debt-card {
  background:
    linear-gradient(135deg, rgba(255, 114, 133, 0.13), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.055);
}

.metric-card span {
  color: rgba(226, 238, 243, 0.64);
  font-size: 14px;
  font-weight: 500;
}

.metric-card strong {
  font-size: 28px;
  font-weight: 650;
}

.metric-card > strong,
.asset-total > strong {
  color: var(--assets-value);
}

.net-worth-card > strong {
  color: var(--net-worth-value);
}

.home-equity-card > strong {
  color: var(--home-value);
}

.debt-card > strong {
  color: var(--debt-value);
}

.metric-card small {
  color: rgba(226, 238, 243, 0.64);
  font-size: 13px;
  font-weight: 500;
}

.asset-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}

.asset-breakdown div {
  display: grid;
  grid-template-columns: minmax(82px, 0.8fr) minmax(134px, 1.2fr);
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 4px 10px;
  border-left: 3px solid var(--line-soft);
}

.asset-breakdown .tone-cash {
  border-left-color: var(--cash);
}

.asset-breakdown .tone-cash strong span {
  color: var(--cash);
}

.asset-breakdown .tone-investment {
  border-left-color: var(--investment);
}

.asset-breakdown .tone-investment strong span {
  color: var(--investment);
}

.asset-breakdown strong {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  font-size: 17px;
  text-align: right;
  white-space: nowrap;
}

.asset-breakdown em {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

main {
  width: min(1440px, calc(100vw - 56px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--nav-rail-width) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: start;
}

.finance-lock-screen {
  grid-column: 1 / -1;
  display: grid;
  min-height: min(520px, calc(100vh - 140px));
  place-items: center;
}

.finance-lock-screen[hidden] {
  display: none;
}

.finance-lock-card {
  width: min(400px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid rgba(170, 224, 238, 0.25);
  border-radius: var(--radius);
  background: rgba(12, 38, 51, 0.88);
  box-shadow: 0 24px 60px rgba(0, 8, 14, 0.32), inset 0 1px rgba(255, 255, 255, 0.09);
  text-align: center;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.finance-lock-card h1,
.finance-lock-card p {
  margin: 0;
}

.finance-lock-card h1 {
  font-size: 30px;
}

.finance-lock-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.5;
}

.finance-lock-form {
  width: min(300px, 100%);
  display: grid;
  gap: 10px;
  justify-self: center;
}

.finance-lock-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
  text-align: left;
}

.finance-lock-form input {
  width: 100%;
  min-height: 46px;
  padding: 9px 14px;
  border: 1px solid rgba(170, 224, 238, 0.24);
  border-radius: 15px;
  outline: none;
  background: rgba(8, 31, 43, 0.72);
  color: var(--text);
  font-size: 18px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.finance-lock-form input:hover {
  border-color: rgba(170, 224, 238, 0.38);
  background: rgba(13, 40, 52, 0.78);
}

.finance-lock-form input:focus {
  border-color: rgba(72, 194, 142, 0.82);
  background: rgba(12, 39, 50, 0.88);
  box-shadow: 0 0 0 3px rgba(72, 194, 142, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.finance-lock-form input:-webkit-autofill,
.finance-lock-form input:-webkit-autofill:hover,
.finance-lock-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px rgb(12, 39, 50) inset;
  border-color: rgba(72, 194, 142, 0.62);
}

.finance-lock-form .primary-button {
  width: 100%;
}

#financeLockStatus {
  text-align: center;
}

@media (min-width: 761px) {
  body.tasks-wide-layout main,
  body.tasks-wide-layout .topbar-inner {
    width: calc(100vw - 32px);
    max-width: none;
  }
}

.summary-grid {
  grid-column: 1 / -1;
}

.hide-financial-summary main > .summary-grid {
  display: none;
}

body.mode-work .finance-only,
body.mode-work .summary-grid,
body.mode-work .tab-group[data-mode="finance"],
body.mode-work .panel[data-group]:not([data-group="work"]) {
  display: none;
}

body.mode-finance .tab-group[data-mode="work"],
body.mode-finance .panel[data-group="work"] {
  display: none;
}

body.finance-locked .topbar .finance-only,
body.finance-locked main > :not(#financeLockScreen) {
  display: none;
}

body.finance-locked #financeLockScreen {
  display: grid;
}

.tabs {
  position: sticky;
  top: 66px;
  z-index: 25;
  display: grid;
  grid-column: 1;
  gap: 6px;
  align-self: start;
  width: var(--nav-rail-width);
  max-height: calc(100vh - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  margin-bottom: 0;
  background: var(--glass-panel-bg);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 28px rgba(0, 12, 20, 0.12);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.08);
  transition:
    width 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mobile-menu-toggle,
.mobile-nav-header,
.mobile-nav-tools,
.mobile-menu-backdrop {
  display: none;
}

.mobile-menu-toggle[hidden] {
  display: none;
}

.tabs:hover,
.tabs:focus-within {
  width: var(--nav-rail-expanded-width);
  background: var(--glass-panel-bg);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow:
    0 22px 48px rgba(0, 12, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tab-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tab {
  width: 40px;
  height: 40px;
  min-height: 40px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: 0;
  font-weight: 800;
  text-indent: -999px;
  text-align: left;
  white-space: nowrap;
  transition:
    font-size 140ms ease,
    justify-content 140ms ease,
    padding 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.subtab {
  width: 40px;
  height: 40px;
  min-height: 40px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: rgba(170, 224, 238, 0.14);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0;
  font-weight: 800;
  text-indent: -999px;
  text-align: left;
  white-space: nowrap;
  transition:
    font-size 140ms ease,
    justify-content 140ms ease,
    padding 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.nav-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: rgba(222, 240, 247, 0.78);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-indent: 0;
}

.subtab .nav-icon {
  flex-basis: 26px;
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.nav-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.subtab .nav-icon::before {
  width: 22px;
  height: 22px;
}

.nav-label {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 0;
}

.tabs:hover .tab,
.tabs:focus-within .tab,
.tabs:hover .subtab,
.tabs:focus-within .subtab {
  width: 100%;
  justify-self: stretch;
  justify-content: flex-start;
  gap: 10px;
  font-size: 14px;
  text-indent: 0;
}

.tabs:not(:hover):not(:focus-within) .nav-label {
  display: none !important;
}

.tabs:hover .nav-label,
.tabs:focus-within .nav-label {
  display: inline;
}

.tabs:hover .tab,
.tabs:focus-within .tab {
  padding: 7px 14px;
}

.tabs:hover .subtab,
.tabs:focus-within .subtab {
  padding: 7px 12px 7px 18px;
}

.tabs .tab.active,
.tabs .subtab.active {
  background: rgba(72, 216, 139, 0.20);
  color: rgba(236, 255, 243, 0.94);
  border-color: rgba(83, 217, 142, 0.30);
}

.tabs .tab.active .nav-icon {
  color: rgba(218, 255, 232, 0.96);
}

.tabs .subtab.active {
  background: rgba(72, 216, 139, 0.82);
  color: #16301f;
  border-color: rgba(83, 217, 142, 0.84);
}

.tabs .subtab.active .nav-icon {
  color: #16301f;
}

.dropdown-menu {
  position: static;
  min-width: 0;
  max-height: 0;
  display: grid;
  gap: 4px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    max-height 180ms ease,
    opacity 160ms ease,
    transform 180ms ease,
    padding 180ms ease,
    border-color 180ms ease;
}

.tab-group.active .dropdown-menu {
  max-height: 360px;
  padding: 0 0 4px;
  border-left-color: transparent;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tabs:hover .tab-group.active .dropdown-menu,
.tabs:focus-within .tab-group.active .dropdown-menu {
  border-left-color: var(--line-soft);
}

.panel {
  display: none;
  grid-column: 2;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.panel.active {
  display: block;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-overview-layout {
  grid-template-columns: minmax(480px, 0.62fr) minmax(0, 1.38fr);
}

.dashboard-summary-list {
  display: grid;
  gap: 0;
}

.dashboard-summary-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.dashboard-summary-row.semantic-row {
  border-left: 3px solid transparent;
  padding-left: 12px;
}

.dashboard-summary-row:last-child {
  border-bottom: 0;
}

.dashboard-summary-row span {
  min-width: 0;
  color: var(--text);
  font-weight: 800;
}

.dashboard-summary-row em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.dashboard-summary-row .source-badge {
  margin-left: 9px;
}

.dashboard-summary-row strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-action-row {
  cursor: pointer;
}

.dashboard-action-row:hover,
.dashboard-action-row:focus-visible {
  color: var(--text);
  outline: none;
}

.dashboard-action-row:hover span,
.dashboard-action-row:focus-visible span {
  color: var(--accent);
}

.compact-allocation-row td {
  height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 15px;
  line-height: 1.2;
}

.allocation-note-cell {
  cursor: help;
  text-decoration: underline;
  text-decoration-color: rgba(244, 251, 255, 0.20);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.debt-summary-row strong {
  color: #ff9a9a;
}

.dashboard-editor {
  margin-top: 4px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(14, 39, 52, 0.68);
}

.dashboard-editor summary {
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-editor[open] summary {
  margin-bottom: 16px;
  color: var(--text);
}

.trend-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 12px;
  margin-bottom: 12px;
}

.forecast-chart-layout {
  grid-template-columns: 1fr;
}

.planning-scenario-popover[hidden] {
  display: none;
}

.planning-scenario-popover {
  z-index: 20;
}

.planning-scenario-popover > summary {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.planning-scenario-popover > summary.active {
  border-color: rgba(57, 168, 255, 0.55);
  color: var(--text);
  background: rgba(57, 168, 255, 0.16);
}

.planning-scenario-panel {
  width: min(310px, calc(100vw - 40px));
  gap: 10px;
  padding: 13px;
}

.planning-scenario-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.planning-scenario-heading strong {
  color: var(--text);
  font-size: 13px;
}

.planning-scenario-heading span,
.planning-scenario-panel label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.scenario-control.planning-scenario-control {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
}

.integrated-stepper {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: stretch;
  min-height: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--field-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.integrated-stepper:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(57, 168, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.integrated-stepper > button {
  width: 36px;
  min-width: 36px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.integrated-stepper > button:first-child {
  border-right: 1px solid var(--line-soft);
}

.integrated-stepper > button:last-child {
  border-left: 1px solid var(--line-soft);
}

.integrated-stepper > button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
}

.integrated-stepper > button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -3px;
}

.integrated-stepper > button:disabled {
  color: var(--faint);
  cursor: default;
  opacity: 0.48;
}

.integrated-stepper input,
.work-filter-panel .integrated-stepper input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 800;
  text-align: center;
  appearance: textfield;
}

.integrated-stepper input::-webkit-inner-spin-button,
.integrated-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.planning-scenario-stepper {
  flex: 0 0 178px;
  width: 178px;
}

.planning-scenario-control > .planning-scenario-reset {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
}

.planning-scenario-reset {
  font-size: 14px !important;
}

.planning-page-header {
  align-items: flex-start;
  margin-bottom: 12px;
}

.planning-page-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.planning-page-title > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.planning-page-title-row,
.planning-page-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.planning-page-title-row h2 {
  margin: 0;
}

.planning-page-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.planning-view-tabs {
  flex: 0 0 auto;
  padding: 2px;
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(7, 26, 38, 0.56);
}

.planning-view-tabs button {
  min-height: 29px;
  padding: 4px 11px;
  font-size: var(--type-caption);
  line-height: 1;
}

.planning-info-popover {
  z-index: 18;
}

.planning-info-popover .info-button::before,
.planning-info-popover .info-button::after {
  display: none;
}

.planning-info-panel {
  right: auto;
  left: 0;
  width: min(390px, calc(100vw - 40px));
}

.work-filter-panel.planning-info-panel-wide {
  width: min(860px, calc(100vw - 40px));
}

.work-filter-panel.investment-projection-info-panel {
  width: min(610px, calc(100vw - 40px));
}

.planning-info-summary {
  display: grid;
  gap: 4px;
}

.planning-info-panel strong,
.planning-info-panel span {
  display: block;
}

.planning-info-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.planning-info-calculation {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.planning-info-calculation h3 {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
}

.planning-primary-chart-panel {
  display: grid;
}

.planning-key-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.planning-key-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--line-soft);
}

.planning-key-metric:last-child {
  border-right: 0;
}

.planning-key-metric span {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
}

.planning-key-metric strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--type-metric-value);
  font-weight: 850;
}

.planning-key-metric em {
  color: var(--muted);
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.planning-contribution-overview,
.retirement-coverage-overview {
  display: grid;
  gap: 10px;
  padding-top: 13px;
}

.planning-visual-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.planning-visual-header strong {
  color: var(--text);
  font-size: 15px;
}

.planning-visual-header span {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
}

.planning-contribution-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.planning-contribution-title > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-contribution-info {
  position: relative;
}

.planning-contribution-info .info-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  font-size: 11px;
}

.planning-contribution-info .planning-info-panel {
  top: calc(100% + 8px);
  left: 0;
}

.planning-contribution-track,
.retirement-coverage-track {
  display: flex;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(6, 24, 35, 0.72);
}

.planning-contribution-track > span,
.retirement-coverage-track > span {
  display: block;
  height: 100%;
}

.contribution-cash,
.retirement-coverage-social {
  background: var(--cash);
}

.contribution-withheld,
.retirement-coverage-portfolio {
  background: var(--investment);
}

.contribution-match {
  background: var(--planning);
}

.contribution-scenario {
  background: var(--accent-2);
}

.retirement-coverage-gap {
  background: var(--danger);
}

.planning-contribution-legend,
.retirement-coverage-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.planning-contribution-legend > div,
.retirement-coverage-legend > div {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.planning-contribution-legend > div > span:first-child,
.retirement-coverage-legend > div > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.planning-contribution-legend > div > span:nth-child(2),
.retirement-coverage-legend > div > span:nth-child(2) {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-contribution-legend strong,
.retirement-coverage-legend strong {
  color: var(--text);
  font-size: 12px;
}

.planning-contribution-sources {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.planning-contribution-source-row {
  display: grid;
  grid-template-columns: 9px minmax(150px, 1fr) minmax(170px, 1.15fr) minmax(92px, auto) 30px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.planning-contribution-source-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.planning-contribution-source-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.planning-contribution-source-identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--type-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-contribution-source-identity small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-contribution-account {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 10px 7px;
  color: var(--text);
  padding: 4px 30px 4px 11px;
  font-size: var(--type-label);
  font-weight: 700;
  outline: none;
  text-align: left;
}

select.planning-contribution-account:hover {
  border-color: rgba(170, 224, 238, 0.48);
  background-color: rgba(255, 255, 255, 0.10);
}

select.planning-contribution-account:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(57, 168, 255, 0.16);
}

select.planning-contribution-account option {
  background: #0f2a38;
  color: var(--text);
}

.planning-contribution-account-readonly {
  display: flex;
  align-items: center;
  background-image: none;
  color: var(--muted);
}

.planning-contribution-source-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
}

.planning-contribution-source-amount strong {
  color: var(--text);
  font-size: var(--type-body);
}

.planning-contribution-source-amount input {
  width: 78px;
  min-width: 0;
  min-height: 32px;
  padding: 4px 7px;
  font-size: var(--type-body);
  font-weight: 800;
  text-align: right;
}

.planning-contribution-source-action {
  display: flex;
  justify-content: flex-end;
  width: 30px;
}

.planning-contribution-source-action:empty {
  visibility: hidden;
}

.planning-contribution-source-action .row-action {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.planning-contribution-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 9px;
}

.planning-contribution-actions .secondary-button {
  min-height: 30px;
}

.planning-contribution-progress {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}

.planning-contribution-progress-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.planning-contribution-progress-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.planning-contribution-progress-header > div:last-child {
  justify-items: end;
  text-align: right;
}

.planning-contribution-progress-header strong {
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 800;
}

.planning-contribution-progress-header small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
  line-height: 1.35;
}

.planning-contribution-progress-amount-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.planning-contribution-goal-editor {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.planning-contribution-goal-stepper {
  flex: 0 0 148px;
  width: 148px;
}

.planning-contribution-goal-stepper input {
  text-align: center;
}

.planning-contribution-progress-track {
  display: flex;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(115, 187, 222, 0.11);
  box-shadow: inset 0 1px 3px rgba(1, 13, 20, 0.28);
}

.planning-contribution-goal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(115, 187, 222, 0.07);
}

.planning-contribution-goal-summary span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
  line-height: 1.35;
}

.planning-contribution-goal-summary strong {
  color: var(--text);
  font-size: var(--type-label);
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.planning-contribution-progress-track > span {
  display: block;
  flex: 0 0 auto;
  height: 100%;
}

.contribution-progress-employee {
  background: var(--investment);
}

.contribution-progress-employer {
  background: var(--planning);
}

.contribution-progress-personal {
  background: var(--cash);
}

.contribution-progress-unclassified {
  background: var(--accent-2);
}

.planning-contribution-progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

.planning-contribution-progress-item {
  display: grid;
  grid-template-columns: 7px auto auto;
  align-items: center;
  gap: 6px;
  margin: -3px -5px;
  padding: 3px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.planning-contribution-progress-item:is(button) {
  cursor: pointer;
}

.planning-contribution-progress-item:is(button) > span:nth-child(2) {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(115, 187, 222, 0.42);
  text-underline-offset: 2px;
}

.planning-contribution-progress-item:is(button):hover,
.planning-contribution-progress-item:is(button):focus-visible {
  background: rgba(115, 187, 222, 0.11);
  outline: none;
}

.planning-contribution-progress-item > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.planning-contribution-progress-item > span:nth-child(2) {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
}

.planning-contribution-progress-item strong {
  color: var(--text);
  font-size: var(--type-label);
  font-weight: 800;
}

#investmentProjection .source-badge {
  font-size: var(--type-caption);
}

#retirementStatusBanner {
  margin-bottom: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: rgba(8, 29, 41, 0.38);
}

.retirement-lifestyle-panel {
  margin-bottom: 12px;
  overflow: visible;
}

.retirement-lifestyle-info-panel {
  width: min(470px, calc(100vw - 40px));
}

.retirement-lifestyle-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.retirement-lifestyle-levels button {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 128px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.retirement-lifestyle-levels button:last-child {
  border-right: 0;
}

.retirement-lifestyle-levels button:hover,
.retirement-lifestyle-levels button:focus-visible {
  background: rgba(79, 153, 181, 0.09);
  outline: none;
}

.retirement-lifestyle-levels button.active {
  background: rgba(72, 216, 139, 0.10);
  box-shadow: inset 0 3px 0 var(--cash);
}

.retirement-lifestyle-levels span {
  color: var(--accent-2);
  font-size: var(--type-body);
  font-weight: 850;
}

.retirement-lifestyle-levels strong {
  color: var(--text);
  font-size: 21px;
  font-weight: 850;
}

.retirement-lifestyle-levels small {
  max-width: 38ch;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
  line-height: 1.4;
}

.retirement-lifestyle-answer {
  display: grid;
  grid-template-columns: minmax(250px, 1.1fr) minmax(380px, 1fr);
  gap: 22px;
  align-items: center;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(41, 116, 105, 0.10);
}

.retirement-lifestyle-answer-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.retirement-lifestyle-answer-copy > span,
.retirement-lifestyle-answer-copy small,
.retirement-lifestyle-answer-metrics span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.4;
}

.retirement-lifestyle-answer-copy > strong {
  color: var(--text);
  font-size: 26px;
  font-weight: 850;
}

.retirement-lifestyle-answer-copy > strong span {
  color: var(--cash);
}

.retirement-lifestyle-answer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.retirement-lifestyle-answer-metrics > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 5px 13px;
  border-left: 1px solid var(--line-soft);
}

.retirement-lifestyle-answer-metrics strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
}

.retirement-lifestyle-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(190px, 0.72fr) minmax(235px, 0.9fr);
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.retirement-lifestyle-control,
.retirement-lifestyle-outcome {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 20px;
}

.retirement-lifestyle-control {
  gap: 12px;
  border-right: 1px solid var(--line-soft);
}

.retirement-lifestyle-control-header,
.retirement-lifestyle-balance,
.retirement-lifestyle-income-sources > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.retirement-lifestyle-control-header span,
.retirement-lifestyle-outcome > span,
.retirement-lifestyle-balance span,
.retirement-lifestyle-income-sources span {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
}

.retirement-lifestyle-control-header strong {
  color: var(--text);
  font-size: var(--type-metric-value);
  font-weight: 850;
}

.retirement-lifestyle-control input[type="range"] {
  width: 100%;
  height: 8px;
  margin: 4px 0 0;
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  outline: none;
  background: linear-gradient(90deg, var(--investment) 0 var(--range-progress), rgba(124, 185, 211, 0.18) var(--range-progress) 100%);
  box-shadow: inset 0 0 0 1px rgba(177, 215, 229, 0.09);
  cursor: pointer;
}

.retirement-lifestyle-control input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  appearance: none;
  border: 3px solid rgba(226, 243, 249, 0.94);
  border-radius: 50%;
  background: var(--investment);
  box-shadow: 0 0 0 5px rgba(87, 176, 217, 0.14), 0 5px 13px rgba(0, 12, 20, 0.34);
}

.retirement-lifestyle-control input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 3px solid rgba(226, 243, 249, 0.94);
  border-radius: 50%;
  background: var(--investment);
  box-shadow: 0 0 0 5px rgba(87, 176, 217, 0.14), 0 5px 13px rgba(0, 12, 20, 0.34);
}

.retirement-lifestyle-scale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.retirement-lifestyle-scale span,
.retirement-lifestyle-scale strong,
.retirement-lifestyle-balance small {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.retirement-lifestyle-scale strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retirement-lifestyle-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.retirement-lifestyle-balance strong {
  color: var(--text);
  font-size: 20px;
}

.retirement-lifestyle-balance small {
  grid-column: 1 / -1;
  text-align: right;
}

.retirement-lifestyle-gauge {
  --lifestyle-ring-color: var(--danger);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 18px 12px;
  border-right: 1px solid var(--line-soft);
  text-align: center;
}

.retirement-lifestyle-gauge.close {
  --lifestyle-ring-color: var(--planning);
}

.retirement-lifestyle-gauge.on-target,
.retirement-lifestyle-gauge.more-room {
  --lifestyle-ring-color: var(--cash);
}

.retirement-lifestyle-gauge.more-room .retirement-lifestyle-ring {
  filter: drop-shadow(0 0 10px rgba(72, 216, 139, 0.22));
}

.retirement-lifestyle-ring {
  position: relative;
  display: grid;
  width: 164px;
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--lifestyle-ring-color) 0 var(--lifestyle-coverage), rgba(111, 177, 203, 0.16) var(--lifestyle-coverage) 100%);
}

.retirement-lifestyle-ring::before {
  position: absolute;
  width: calc(100% - 24px);
  aspect-ratio: 1;
  border: 1px solid rgba(170, 224, 238, 0.08);
  border-radius: 50%;
  background: rgba(8, 29, 41, 0.94);
  content: "";
}

.retirement-lifestyle-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
}

.retirement-lifestyle-ring strong {
  color: var(--text);
  font-size: 25px;
  font-weight: 850;
}

.retirement-lifestyle-ring span,
.retirement-lifestyle-gauge > span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.retirement-lifestyle-gauge > strong {
  color: var(--lifestyle-ring-color);
  font-size: var(--type-body);
  font-weight: 850;
}

.retirement-lifestyle-outcome {
  gap: 8px;
}

.retirement-lifestyle-outcome > strong {
  color: var(--text);
  font-size: 32px;
  font-weight: 850;
}

.retirement-lifestyle-income-sources {
  display: grid;
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.retirement-lifestyle-income-sources > div {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.retirement-lifestyle-income-sources strong {
  color: var(--text);
  font-size: var(--type-label);
}

.retirement-lifestyle-scenarios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 12px;
}

.retirement-lifestyle-scenarios button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 86px;
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.retirement-lifestyle-scenarios button:last-child {
  border-right: 0;
}

.retirement-lifestyle-scenarios button:hover,
.retirement-lifestyle-scenarios button:focus-visible,
.retirement-lifestyle-scenarios button.active {
  background: rgba(76, 151, 179, 0.10);
  outline: none;
}

.retirement-lifestyle-scenarios button.active {
  box-shadow: inset 0 3px 0 var(--cash);
}

.retirement-lifestyle-scenarios span {
  color: var(--accent-2);
  font-size: var(--type-label);
  font-weight: 800;
}

.retirement-lifestyle-scenarios strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retirement-lifestyle-scenarios small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#investmentProjectionDetailed > .table-panel,
#retirementIncomeDetailed > .table-panel {
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .planning-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .planning-page-actions {
    justify-content: space-between;
  }

  .planning-key-metrics,
  .planning-contribution-legend,
  .retirement-coverage-legend {
    grid-template-columns: 1fr;
  }

  .retirement-lifestyle-main {
    grid-template-columns: 1fr;
  }

  .retirement-lifestyle-levels,
  .retirement-lifestyle-answer,
  .retirement-lifestyle-answer-metrics {
    grid-template-columns: 1fr;
  }

  .retirement-lifestyle-levels button {
    min-height: 104px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .retirement-lifestyle-levels button:last-child {
    border-bottom: 0;
  }

  .retirement-lifestyle-answer {
    gap: 14px;
  }

  .retirement-lifestyle-answer-metrics > div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .retirement-lifestyle-control,
  .retirement-lifestyle-gauge {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .retirement-lifestyle-scenarios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .retirement-lifestyle-scenarios button:nth-child(2) {
    border-right: 0;
  }

  .retirement-lifestyle-scenarios button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-soft);
  }

  .planning-contribution-source-row {
    grid-template-columns: 9px minmax(0, 1fr) 30px;
  }

  .planning-contribution-account,
  .planning-contribution-source-amount {
    grid-column: 2;
  }

  .planning-contribution-source-action {
    grid-column: 3;
    grid-row: 1;
  }

  .planning-contribution-progress-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .planning-contribution-progress-header > div:last-child {
    justify-items: start;
    text-align: left;
  }

  .planning-contribution-progress-amount-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .planning-contribution-goal-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .planning-contribution-goal-summary strong {
    text-align: left;
  }

  .planning-key-metric {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .planning-key-metric:last-child {
    border-bottom: 0;
  }
}

.planning-overview-header {
  align-items: flex-end;
  margin-bottom: 14px;
}

.planning-overview-header h2 {
  margin: 4px 0 0;
}

.planning-preview-label,
.planning-overview-kicker,
.planning-overview-eyebrow {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.planning-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 170px;
  margin-bottom: 12px;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, var(--accent) 8%), var(--panel));
  box-shadow: var(--shadow);
}

.planning-overview-hero[data-tone="warning"] {
  border-color: color-mix(in srgb, #e3b45f 44%, var(--border));
}

.planning-overview-hero[data-tone="danger"] {
  border-color: color-mix(in srgb, #df7c78 48%, var(--border));
}

.planning-overview-hero h3 {
  max-width: 820px;
  margin: 8px 0 9px;
  color: var(--text);
  font-size: clamp(25px, 3vw, 39px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.planning-overview-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.planning-overview-hero-metric {
  min-width: 185px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  text-align: right;
}

.planning-overview-hero-metric span,
.planning-overview-hero-metric em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.planning-overview-hero-metric strong {
  display: block;
  margin: 5px 0;
  color: var(--text);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.04em;
}

.planning-overview-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.planning-overview-card {
  display: flex;
  min-height: 178px;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.planning-overview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.planning-overview-card-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.planning-status-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.planning-status-pill.warning {
  background: rgba(227, 180, 95, 0.14);
  color: #e3b45f;
}

.planning-status-pill.danger {
  background: rgba(223, 124, 120, 0.14);
  color: #df7c78;
}

.planning-overview-card > strong {
  display: block;
  margin: 17px 0 5px;
  color: var(--text);
  font-size: clamp(24px, 2.5vw, 34px);
  letter-spacing: -0.035em;
}

.planning-overview-card > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.planning-overview-card button {
  align-self: flex-start;
  margin-top: auto;
}

.planning-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 12px;
  margin-bottom: 12px;
}

.planning-overview-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.planning-overview-panel .section-header h2 {
  margin: 3px 0 0;
}

.planning-milestone-timeline {
  display: grid;
  grid-template-columns: repeat(var(--milestone-count, 4), minmax(112px, 1fr));
  gap: 0;
  overflow-x: auto;
  padding: 18px 0 4px;
}

.planning-milestone {
  position: relative;
  min-width: 112px;
  padding: 27px 12px 0 0;
}

.planning-milestone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
  z-index: 1;
}

.planning-milestone:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 11px;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.planning-milestone.warning::before {
  background: #e3b45f;
  box-shadow: 0 0 0 2px rgba(227, 180, 95, 0.24);
}

.planning-milestone strong,
.planning-milestone span,
.planning-milestone em {
  display: block;
}

.planning-milestone strong {
  color: var(--text);
  font-size: 17px;
}

.planning-milestone span {
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.planning-milestone em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.planning-overview-guidance {
  display: grid;
  gap: 9px;
}

.planning-guidance-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 4%);
}

.planning-guidance-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.planning-guidance-item.warning .planning-guidance-dot { background: #e3b45f; }
.planning-guidance-item.danger .planning-guidance-dot { background: #df7c78; }

.planning-guidance-item strong,
.planning-guidance-item span {
  display: block;
}

.planning-guidance-item strong {
  color: var(--text);
  font-size: 12px;
}

.planning-guidance-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.planning-guidance-item button {
  margin-top: 8px;
}

.planning-overview-footer-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border: 1px dashed var(--border);
  border-radius: 15px;
  color: var(--muted);
}

.planning-overview-footer-note strong,
.planning-overview-footer-note span {
  display: block;
}

.planning-overview-footer-note strong {
  margin-bottom: 3px;
  color: var(--text);
}

@media (max-width: 1050px) {
  .planning-overview-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .planning-overview-hero {
    grid-template-columns: 1fr;
    padding: 21px;
  }

  .planning-overview-hero-metric {
    min-width: 0;
    text-align: left;
  }

  .planning-overview-cards {
    grid-template-columns: 1fr;
  }

  .planning-overview-footer-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

.compact-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

#timeTracking .compact-layout {
  grid-template-columns: minmax(0, 460px) minmax(420px, 1fr);
  align-items: stretch;
}

.retirement-readiness-panel {
  display: grid;
  gap: 12px;
}

.retirement-readiness-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 12px;
  align-items: start;
}

.chart-panel,
.table-panel {
  background: var(--glass-panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 12, 20, 0.18);
}

#planningSettings > .table-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section-header.compact {
  margin-top: 16px;
}

.section-header span {
  color: var(--muted);
  font-weight: 500;
}

.chart-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-trend-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.dashboard-trend-controls label {
  gap: 5px;
  font-size: 12px;
}

.dashboard-trend-controls input,
.dashboard-trend-controls select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  padding: 7px 10px;
  text-align: center;
  outline: none;
}

.dashboard-trend-canvas {
  height: 320px;
}

.overview-beta {
  min-width: 0;
}

.overview-beta-page-header {
  align-items: end;
  margin-bottom: 12px;
}

.overview-beta-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.overview-beta-title-row h2 {
  margin: 0;
}

.overview-beta-badge {
  border-color: rgba(57, 168, 255, 0.30);
  background: rgba(57, 168, 255, 0.12);
  color: rgba(209, 236, 255, 0.88);
}

.overview-beta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.overview-beta-view-control {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 3px;
}

.overview-beta-view-control button {
  min-height: 28px;
  padding: 4px 11px;
  font-size: var(--type-caption);
}

.overview-beta-history-controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.overview-beta-range-control {
  min-height: 34px;
  padding: 3px;
}

.overview-beta-range-control button {
  min-height: 28px;
  padding: 4px 10px;
  font-size: var(--type-caption);
}

.overview-beta-compare-control {
  grid-template-columns: auto 150px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.overview-beta-compare-control select {
  width: 150px;
  min-height: 34px;
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 10px 7px;
  color: var(--text);
  outline: none;
}

.overview-beta-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.overview-beta-kpi {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 250px;
  padding: 17px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.052);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.overview-beta-kpi:hover,
.overview-beta-kpi:focus-visible {
  border-color: rgba(170, 224, 238, 0.34);
  background: rgba(255, 255, 255, 0.075);
  outline: none;
}

.overview-beta-kpi-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.overview-beta-kpi-label-row > span:first-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-beta-kpi-info {
  flex-basis: 18px;
}

.overview-beta-kpi-info::after {
  width: min(240px, calc(100vw - 40px));
  font-weight: 650;
}

.overview-beta-kpi:hover,
.overview-beta-kpi:focus-within {
  z-index: 20;
}

.overview-beta-kpi-main {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
}

.overview-beta-kpi-main > strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 28px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-beta-kpi-meter {
  width: min(154px, 88%);
  height: 85px;
  justify-self: center;
}

.overview-beta-kpi-meter svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.overview-beta-kpi-meter-track,
.overview-beta-kpi-meter-zone,
.overview-beta-kpi-meter-progress {
  fill: none;
  stroke-linecap: round;
  stroke-width: 8;
}

.overview-beta-kpi-meter-track {
  stroke: rgba(158, 192, 209, 0.17);
}

.overview-beta-kpi-meter-zone.worse {
  stroke: rgba(255, 126, 141, 0.28);
}

.overview-beta-kpi-meter-zone.better {
  stroke: rgba(72, 216, 139, 0.28);
}

.overview-beta-kpi-meter-progress {
  stroke: rgba(72, 216, 139, 0.84);
}

.overview-beta-kpi-meter.bad .overview-beta-kpi-meter-progress {
  stroke: rgba(239, 180, 92, 0.84);
}

.overview-beta-kpi-meter-needle {
  stroke: rgba(231, 241, 246, 0.88);
  stroke-linecap: round;
  stroke-width: 3;
}

.overview-beta-kpi-meter.good .overview-beta-kpi-meter-needle {
  stroke: rgba(96, 232, 157, 0.94);
}

.overview-beta-kpi-meter.bad .overview-beta-kpi-meter-needle {
  stroke: rgba(255, 139, 153, 0.94);
}

.overview-beta-kpi-meter.neutral .overview-beta-kpi-meter-needle {
  stroke: rgba(105, 190, 232, 0.94);
}

.overview-beta-kpi-meter-hub {
  fill: rgba(231, 241, 246, 0.94);
  stroke: rgba(13, 42, 55, 0.72);
  stroke-width: 2;
}

.overview-beta-kpi > small {
  align-self: center;
  min-height: 34px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.overview-beta-kpi > small.good {
  color: rgba(116, 224, 161, 0.88);
}

.overview-beta-kpi > small.bad {
  color: rgba(255, 139, 153, 0.90);
}

.overview-beta-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.overview-beta-guidance-view[hidden],
.overview-beta-history-controls[hidden],
#overviewBetaHistoryView[hidden] {
  display: none;
}

.overview-beta-guidance-section {
  min-width: 0;
}

.overview-beta-guidance-section > .section-header {
  margin-bottom: 10px;
}

.overview-beta-guidance-info {
  flex-basis: 18px;
}

.overview-beta-guidance-info::after {
  right: -4px;
  left: auto;
  width: min(300px, calc(100vw - 40px));
  transform: translate(0, -4px);
}

.overview-beta-guidance-info:hover::after,
.overview-beta-guidance-info:focus-visible::after {
  transform: translate(0, 0);
}

.overview-beta-guidance-info::before {
  right: 4px;
  left: auto;
}

.overview-beta-guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.overview-beta-guidance-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 7px;
  min-width: 0;
  min-height: 248px;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.052);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: var(--text);
  cursor: pointer;
}

.overview-beta-guidance-card:hover,
.overview-beta-guidance-card:focus-visible,
.overview-beta-guidance-card:focus-within {
  z-index: 20;
  border-color: rgba(170, 224, 238, 0.34);
  background: rgba(255, 255, 255, 0.075);
  outline: none;
}

.overview-beta-guidance-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.overview-beta-guidance-card-header > strong {
  overflow: hidden;
  font-size: var(--type-card-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-beta-guidance-gauge {
  display: grid;
  place-items: center;
  min-height: 96px;
}

.overview-beta-benchmark-meter {
  width: min(184px, 100%);
  height: 100px;
}

.overview-beta-benchmark-meter svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.overview-beta-benchmark-track,
.overview-beta-benchmark-zone {
  fill: none;
  stroke-linecap: butt;
  stroke-width: 13;
}

.overview-beta-benchmark-track {
  stroke: rgba(158, 192, 209, 0.15);
}

.overview-beta-benchmark-zone.good {
  stroke: rgba(72, 216, 139, 0.68);
}

.overview-beta-benchmark-zone.warning {
  stroke: rgba(239, 180, 92, 0.70);
}

.overview-beta-benchmark-zone.bad {
  stroke: rgba(255, 126, 141, 0.66);
}

.overview-beta-benchmark-zone.neutral {
  stroke: rgba(105, 190, 232, 0.58);
}

.overview-beta-benchmark-needle {
  stroke: rgba(240, 248, 252, 0.94);
  stroke-linecap: round;
  stroke-width: 4;
}

.overview-beta-benchmark-hub {
  fill: rgba(240, 248, 252, 0.96);
  stroke: rgba(13, 42, 55, 0.78);
  stroke-width: 3;
}

.overview-beta-benchmark-marker {
  stroke: rgba(240, 248, 252, 0.72);
  stroke-width: 3;
}

.overview-beta-guidance-value {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.overview-beta-guidance-value strong {
  font-size: 25px;
}

.overview-beta-guidance-value span,
.overview-beta-guidance-card > small {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.35;
}

.overview-beta-guidance-card > small {
  align-self: end;
}

.overview-beta-scenario-band {
  margin-top: 14px;
  padding: 15px 0 2px;
  border-top: 1px solid var(--line-soft);
}

.overview-beta-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.overview-beta-scenario-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border-left: 3px solid rgba(105, 190, 232, 0.52);
  background: rgba(255, 255, 255, 0.038);
}

.overview-beta-scenario-card.conservative {
  border-left-color: rgba(239, 180, 92, 0.72);
}

.overview-beta-scenario-card.strong {
  border-left-color: rgba(72, 216, 139, 0.68);
}

.overview-beta-scenario-card span,
.overview-beta-scenario-card small {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.overview-beta-scenario-card strong {
  overflow: hidden;
  font-size: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-beta-panel {
  min-width: 0;
  margin: 0;
  padding: 15px;
  border-radius: 8px;
}

.overview-beta-panel .section-header {
  min-height: 42px;
  margin-bottom: 7px;
}

.overview-beta-panel .section-header > div {
  min-width: 0;
}

.overview-beta-panel .section-header h2 {
  font-size: var(--type-panel-title);
}

.overview-beta-panel .section-header span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  font-size: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-beta-open {
  flex: 0 0 auto;
  justify-self: end;
  color: var(--muted);
}

.overview-beta-open:hover {
  color: var(--text);
}

.overview-beta-net-worth-panel {
  grid-column: span 8;
}

.overview-beta-cash-flow-panel {
  grid-column: span 4;
}

.overview-beta-categories-panel {
  grid-column: span 6;
}

.overview-beta-assets-panel,
.overview-beta-retirement-panel {
  grid-column: span 3;
}

.overview-beta-affordability-panel {
  grid-column: 1 / -1;
}

.overview-beta .overview-beta-canvas {
  width: 100%;
  height: 300px;
}

.overview-beta .overview-beta-wide-canvas {
  height: 320px;
}

.chart-caption {
  display: grid;
  gap: 3px;
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.chart-caption strong {
  color: var(--text);
  font-size: 14px;
}

.segmented-control {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.055);
}

.segmented-control button {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-weight: 550;
}

.segmented-control button.active {
  background: rgba(72, 216, 139, 0.26);
  color: rgba(225, 255, 237, 0.92);
}

.local-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.055);
}

.local-tab {
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-weight: 650;
}

.local-tab.active {
  background: rgba(72, 216, 139, 0.26);
  color: rgba(225, 255, 237, 0.92);
}

.time-tab-panel[hidden] {
  display: none;
}

.task-readouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.task-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 24px;
  margin-bottom: 12px;
}

.task-board-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(180px, 260px);
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.task-board-toolbar select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background-color: var(--field-bg);
  color: var(--text);
  padding: 7px 36px 7px 14px;
  outline: none;
}

.work-filter-panel input,
.work-filter-panel select,
.work-filter-panel textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  background-color: var(--field-bg);
  color: var(--text);
  padding: 7px 36px 7px 14px;
  outline: none;
}

.work-filter-panel input,
.work-filter-panel select {
  border-radius: var(--radius-pill);
}

.work-filter-panel input {
  padding-right: 14px;
}

.work-filter-panel textarea {
  min-height: 92px;
  padding: 10px 12px;
  border-radius: 16px;
  resize: vertical;
}

.work-filter-panel input[type="search"] {
  text-align: left;
}

.work-filter-popover {
  position: relative;
}

.work-filter-popover summary {
  list-style: none;
  cursor: pointer;
}

.work-filter-popover summary::-webkit-details-marker {
  display: none;
}

.work-filter-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.work-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  width: min(360px, calc(100vw - 40px));
  display: grid;
  gap: 12px;
  justify-content: stretch;
  margin: 0;
  padding: 16px;
  border-radius: 22px;
  background: rgba(10, 48, 59, 0.96);
  box-shadow: 0 22px 50px rgba(0, 12, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.work-filter-panel label {
  grid-template-columns: 84px minmax(0, 1fr);
}

.task-client-filter-field {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.task-client-filter-field > span {
  padding-top: 11px;
}

.task-client-multiselect-menu {
  position: relative;
}

.task-client-multiselect-menu > summary {
  min-height: 38px;
  padding: 9px 36px 8px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  list-style: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.task-client-multiselect-menu > summary::-webkit-details-marker { display: none; }

.task-client-multiselect-menu > summary::after {
  position: absolute;
  top: 9px;
  right: 14px;
  content: "▾";
  color: var(--muted);
}

.task-client-multiselect-choices {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 34, 44, 0.98);
}

.work-filter-panel .task-client-multiselect-choices label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
}

.work-filter-panel .task-client-multiselect-choices label:hover {
  background: rgba(112, 192, 216, 0.10);
}

.work-filter-panel .task-client-multiselect-choices input[type="checkbox"] {
  appearance: none;
  display: grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.32);
  border-radius: 50%;
  background: rgba(5, 24, 36, 0.28);
  cursor: pointer;
}

.work-filter-panel .task-client-multiselect-choices input[type="checkbox"]::after {
  color: rgba(216, 255, 231, 0.96);
  content: "";
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.work-filter-panel .task-client-multiselect-choices input[type="checkbox"]:checked {
  border-color: rgba(74, 202, 132, 0.42);
  background: rgba(74, 202, 132, 0.24);
}

.work-filter-panel .task-client-multiselect-choices input[type="checkbox"]:checked::after {
  content: "✓";
}

.work-filter-panel .task-client-multiselect-choices input[type="checkbox"]:focus-visible {
  border-color: rgba(170, 224, 238, 0.70);
  outline: 2px solid rgba(105, 194, 242, 0.20);
  outline-offset: 2px;
}

.category-manager-panel {
  width: min(420px, calc(100vw - 40px));
}

.spending-filter-panel {
  width: min(500px, calc(100vw - 40px));
}

.spending-filter-panel label {
  grid-template-columns: 96px minmax(0, 1fr);
}

.category-manager-panel label {
  grid-template-columns: 110px minmax(0, 1fr);
}

.category-manager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.category-manager-chip {
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(124, 198, 224, 0.10);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.task-board {
  display: grid;
  gap: 18px;
}

.experimental-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.experimental-title-row .source-badge {
  margin-left: 0;
}

#workTasks > .section-header {
  align-items: flex-end;
  margin-bottom: 10px;
}

.task-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.quick-access-panel {
  display: block;
  margin: 0;
}

.quick-access-grid {
  min-width: 0;
  margin-right: 0;
}

.task-board-scope-host {
  display: flex;
  min-height: 40px;
  margin: 0;
  align-items: center;
}

.task-board-scope-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.task-quick-access-button {
  min-height: 34px;
  padding: 4px 13px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
}

.task-column-dialog.quick-access-browser-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  padding: 22px;
}

.quick-access-browser-header { margin-bottom: 16px; }

.quick-access-mini-timer {
  --mini-hour-angle: 0deg;
  --mini-minute-angle: 0deg;
  position: relative;
  display: none;
  width: 112px;
  min-width: 112px;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 2px 4px;
  background: transparent;
  text-align: center;
}

.quick-access-mini-clock {
  appearance: none;
  position: relative;
  width: 104px;
  min-width: 104px;
  height: 104px;
  min-height: 104px;
  padding: 0;
  border: 1px solid rgba(188, 222, 236, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(170, 224, 238, 0.08) 0 3%, transparent 4%);
  box-shadow: inset 0 0 0 7px rgba(8, 31, 44, 0.26), 0 8px 22px rgba(0, 12, 20, 0.10);
  cursor: pointer;
}

.quick-access-mini-clock::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, rgba(220, 240, 247, 0.70) 0 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 86%, #000 87% 94%, transparent 95%);
  mask: radial-gradient(circle, transparent 0 86%, #000 87% 94%, transparent 95%);
  pointer-events: none;
}

.quick-access-mini-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}

.quick-access-mini-rings .timer-day-ring-track {
  stroke: rgba(170, 224, 238, 0.10);
  stroke-width: 1.15;
}

.quick-access-mini-rings .timer-day-ring-progress {
  stroke: rgba(196, 157, 128, 0.82);
  stroke-width: 1.15;
  filter: none;
  opacity: 1;
}

.quick-access-mini-rings .timer-overtime-ring-track,
.quick-access-mini-rings .timer-overtime-ring-progress,
.quick-access-mini-rings .mini-overtime-session-segments {
  opacity: 0;
  transition: opacity 160ms ease;
}

.quick-access-mini-rings .timer-overtime-ring-track {
  stroke: rgba(92, 156, 194, 0.16);
  stroke-width: 1;
}

.quick-access-mini-rings .timer-overtime-ring-progress {
  stroke: rgba(103, 190, 238, 0.82);
  stroke-width: 1.1;
  filter: none;
}

.quick-access-mini-rings .timer-session-segment { stroke-width: 1.15; }
.quick-access-mini-rings .mini-overtime-session-segments .timer-session-segment.timer-session-overtime { stroke-width: 1.1; }
.quick-access-mini-timer.is-sessions .quick-access-mini-rings .timer-session-segments { opacity: 1; }
.quick-access-mini-timer.is-sessions .quick-access-mini-rings .timer-day-ring-progress { opacity: 0; }
.quick-access-mini-timer.has-overtime:not(.is-sessions) .quick-access-mini-rings .timer-overtime-ring-track,
.quick-access-mini-timer.has-overtime:not(.is-sessions) .quick-access-mini-rings .timer-overtime-ring-progress,
.quick-access-mini-timer.has-overtime.is-sessions .quick-access-mini-rings .timer-overtime-ring-track,
.quick-access-mini-timer.has-overtime.is-sessions .quick-access-mini-rings .mini-overtime-session-segments { opacity: 1; }

#timeTracking .timer-core {
  width: calc(100% + 32px);
  min-height: calc(100% + 22px);
  margin: -6px -16px -16px;
  padding: 20px 30px 30px;
}

#timeTracking .timer-core:not(.journey-panel) {
  border-color: transparent;
  background: transparent;
}

#timeTracking .timer-core .timer-ring-mode-toggle { left: 16px; }
#timeTracking .timer-core .timer-range-tabs { right: 16px; }
#timeTracking .timer-core .timer-ring-mode-toggle,
#timeTracking .timer-core .timer-range-tabs { top: 6px; }

#timeTracking:not(.clock-expanded) .timer-range-tabs {
  display: none;
}

#timeTracking:not(.clock-expanded) .timer-expand-button {
  top: 6px;
  right: 16px;
}

.quick-access-mini-clock:hover {
  border-color: rgba(170, 224, 238, 0.38);
  background: radial-gradient(circle at center, rgba(170, 224, 238, 0.12) 0 3%, transparent 4%);
}

.quick-access-mini-hour,
.quick-access-mini-minute {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  border-radius: 3px;
  background: rgba(235, 248, 252, 0.92);
  opacity: 0.28;
  transform-origin: 50% 100%;
  transition: opacity 180ms ease;
}

.quick-access-mini-hour { height: 27px; transform: translateX(-50%) rotate(var(--mini-hour-angle)); }
.quick-access-mini-minute { height: 37px; transform: translateX(-50%) rotate(var(--mini-minute-angle)); }
.quick-access-mini-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(241, 250, 253, 0.98);
  box-shadow: 0 0 8px rgba(105, 194, 242, 0.30);
  transform: translate(-50%, -50%);
  opacity: 0.32;
  transition: opacity 180ms ease;
}

.quick-access-mini-timer.is-running .quick-access-mini-clock {
  border-color: rgba(67, 178, 255, 0.42);
  box-shadow: inset 0 0 0 5px rgba(20, 78, 118, 0.28), 0 0 18px rgba(67, 178, 255, 0.12);
}

.quick-access-mini-timer.is-running .quick-access-mini-hour,
.quick-access-mini-timer.is-running .quick-access-mini-minute,
.quick-access-mini-timer.is-running .quick-access-mini-pivot {
  opacity: 0.78;
}

.quick-access-mini-duration {
  position: absolute;
  left: 50%;
  bottom: 19px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0.34;
  transition: opacity 180ms ease;
}

.quick-access-mini-timer.is-running .quick-access-mini-duration { opacity: 0.88; }

.quick-access-mini-timer > span:not(.quick-access-mini-pivot) {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#quickAccessMiniDescription { display: none; }

@media (max-width: 760px) {
  .task-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .quick-access-mini-timer { display: none; }
}

.quick-access-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.quick-access-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 760;
}

.quick-access-grid {
  position: relative;
  min-height: 1px;
  transition: height 180ms ease;
}

.quick-access-grid > .quick-access-group,
.quick-access-grid > .quick-access-panel-form {
  position: absolute;
  transition: top 180ms ease, left 180ms ease, width 180ms ease, border-color 160ms ease, opacity 160ms ease, min-height 180ms ease;
}

.quick-access-grid.unified {
  position: static;
  height: auto;
}

.quick-access-grid.unified > .quick-access-unified-group {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.quick-access-unified-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: 10px 12px;
}

.quick-access-inline-client-group {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-rows: auto auto;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(170, 224, 238, 0.12);
}

.quick-access-inline-client-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.quick-access-inline-client-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}

.quick-access-inline-client-heading > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quick-client-color);
}

.quick-access-inline-client-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  gap: 12px;
  align-items: start;
  justify-content: start;
}

.quick-access-inline-client-items > .quick-access-tile,
.quick-access-inline-client-items > .quick-access-add {
  flex: 0 0 118px;
  width: 118px;
}

.quick-access-inline-add {
  appearance: none;
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  align-self: flex-start;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 66px;
  min-height: 66px;
  margin-top: 0;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(184, 211, 220, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.quick-access-inline-add:hover,
.quick-access-inline-add:focus-visible,
.quick-access-inline-add.active {
  border-color: rgba(170, 224, 238, 0.28);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(236, 248, 251, 0.9);
}

.quick-access-inline-add-icon {
  width: 18px;
  height: 18px;
}

.quick-access-unified-grid > .quick-access-form {
  width: min(720px, 100%);
}

.quick-access-unified-grid > .quick-access-unified-empty {
  width: 100%;
}

.quick-access-client-separator,
.quick-access-unified-empty {
  grid-column: 1 / -1;
}

.quick-access-client-separator {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  margin: 0 0 -2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.quick-access-client-separator:not(:first-child) {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(170, 224, 238, 0.08);
}

.quick-access-client-separator > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--quick-client-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quick-client-color) 15%, transparent);
}

.quick-access-unified-empty {
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
}

.quick-access-group {
  position: relative;
  display: grid;
  grid-column: span 4;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 140px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--glass-panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 12, 20, 0.14);
  transition: border-color 160ms ease, opacity 160ms ease, min-height 180ms ease;
}

.quick-access-group.collapsed {
  grid-template-rows: auto;
  min-height: 48px;
  cursor: pointer;
}

.quick-access-group.collapsed .quick-access-group-header {
  min-height: 48px;
  padding: 8px 14px;
  cursor: pointer;
}

.quick-access-group.collapsed .quick-access-group-header h4 {
  flex: 1;
}

.quick-access-group.size-slim {
  grid-column: span 4;
}

.quick-access-group.size-standard {
  grid-column: span 6;
}

.quick-access-group.size-wide {
  grid-column: span 8;
}

.quick-access-group.dragging {
  opacity: 0.45;
}

.quick-access-group.resizing {
  border-color: color-mix(in srgb, var(--quick-client-color) 68%, white 8%);
}

.quick-access-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 14px 3px;
  border-bottom: 0;
  background: transparent;
  cursor: grab;
  user-select: none;
}

.quick-access-group-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-access-group-count {
  flex: none;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.075);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.quick-access-group.collapsed .quick-access-group-count {
  margin-left: auto;
}

.quick-access-client-swatch {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--quick-client-color, rgba(170, 224, 238, 0.40));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quick-client-color, rgba(170, 224, 238, 0.40)) 18%, transparent);
}

.quick-access-panel-add {
  appearance: none;
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  cursor: pointer;
}

.quick-access-panel-add:hover {
  border-color: color-mix(in srgb, var(--quick-client-color) 55%, rgba(170, 224, 238, 0.18));
  background: color-mix(in srgb, var(--quick-client-color) 12%, transparent);
  color: var(--text);
}

.quick-access-panel-add-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.quick-access-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 118px));
  gap: 12px;
  align-items: start;
  align-content: start;
  min-height: 96px;
  padding: 6px 12px 12px;
}

.quick-access-group-grid.quick-access-unified-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.quick-access-group-grid.drag-over .quick-access-tile:not(.dragging),
.quick-access-group-grid.drag-over .quick-access-add {
  border-color: rgba(74, 202, 132, 0.26);
}

.quick-access-group-grid.task-drop-target {
  background: color-mix(in srgb, var(--quick-client-color) 10%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--quick-client-color) 56%, rgba(170, 224, 238, 0.18));
}

.quick-access-tile,
.quick-access-add {
  position: relative;
  width: 100%;
  aspect-ratio: 1.64 / 1;
  min-height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.quick-access-tile {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.quick-access-tile.dragging {
  opacity: 0.48;
  pointer-events: none;
}

body.quick-access-is-dragging,
body.quick-access-is-dragging * {
  cursor: grabbing !important;
}

.quick-access-drag-preview {
  position: fixed;
  z-index: 2700;
  display: grid;
  width: max-content;
  max-width: min(210px, calc(100vw - 20px));
  min-height: 46px;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--quick-client-color, #58b1e7) 52%, rgba(170, 224, 238, 0.22));
  border-radius: 12px;
  background: rgba(15, 44, 58, 0.90);
  color: rgba(237, 250, 255, 0.94);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 18px color-mix(in srgb, var(--quick-client-color, #58b1e7) 16%, transparent);
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.quick-access-drag-preview.native-drag-image {
  left: 0;
  top: 0;
}

.quick-access-drag-preview-icon {
  width: 27px;
  height: 27px;
  background: currentColor;
  color: color-mix(in srgb, var(--quick-client-color, #58b1e7) 70%, white);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.quick-access-drag-preview strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-access-drop-indicator {
  position: fixed;
  z-index: 2690;
  width: 4px;
  min-height: 48px;
  border-radius: 999px;
  background: rgba(80, 220, 151, 0.92);
  box-shadow:
    0 0 0 3px rgba(80, 220, 151, 0.12),
    0 0 16px rgba(80, 220, 151, 0.46);
  pointer-events: none;
}

.quick-access-drop-indicator::before,
.quick-access-drop-indicator::after {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(80, 220, 151, 0.92);
  border-radius: 50%;
  background: rgba(15, 44, 58, 0.94);
  content: "";
  transform: translateX(-50%);
}

.quick-access-drop-indicator::before {
  top: -4px;
}

.quick-access-drop-indicator::after {
  bottom: -4px;
}

.quick-access-tile.timer-active {
  border-color: rgba(67, 178, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(67, 178, 255, 0.13);
}

.quick-access-launch,
.quick-access-add {
  appearance: none;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 9px 6px 8px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.quick-access-launch:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.quick-access-add:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
}

.quick-access-launch:hover {
  background: transparent;
}

.quick-access-icon {
  width: 32px;
  height: 32px;
  background: currentColor;
  color: rgba(232, 250, 255, 0.92);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.quick-access-status {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(170, 224, 238, 0.22);
}

.quick-access-tile.timer-active .quick-access-status {
  background: rgb(67, 178, 255);
  box-shadow: 0 0 0 3px rgba(67, 178, 255, 0.14);
}

.quick-access-tile.timer-active .quick-access-icon {
  color: rgb(67, 178, 255);
  filter: drop-shadow(0 0 7px rgba(67, 178, 255, 0.32));
}

.quick-access-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: rgba(237, 250, 255, 0.92);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-access-tile.tone-blue {
  border-color: rgba(88, 177, 231, 0.28);
  background: rgba(20, 71, 101, 0.52);
}

.quick-access-tile.tone-green {
  border-color: rgba(74, 202, 132, 0.28);
  background: rgba(29, 91, 70, 0.48);
}

.quick-access-tile.tone-amber {
  border-color: rgba(239, 180, 92, 0.30);
  background: rgba(98, 74, 38, 0.48);
}

.quick-access-tile.tone-violet {
  border-color: rgba(174, 146, 239, 0.30);
  background: rgba(62, 48, 103, 0.50);
}

.quick-access-tile.tone-rose {
  border-color: rgba(232, 101, 118, 0.30);
  background: rgba(96, 43, 58, 0.48);
}

/* Keep Quick Access visually related to task cards instead of panel accent swatches. */
.quick-access-tile.client-accent {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.quick-access-tile.client-accent:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.quick-access-tile.client-accent .quick-access-icon {
  color: rgba(188, 220, 235, 0.88);
}

.quick-access-tile.client-accent.timer-active {
  border-color: rgba(67, 178, 255, 0.34);
  background: rgba(20, 78, 118, 0.68);
  box-shadow:
    0 10px 26px rgba(67, 178, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.quick-access-tile.client-accent.timer-active:hover {
  border-color: rgba(82, 190, 255, 0.46);
  background: rgba(24, 88, 132, 0.76);
}

.quick-access-tile.client-accent.timer-active .quick-access-icon {
  color: rgb(117, 203, 255);
  filter: drop-shadow(0 0 7px rgba(67, 178, 255, 0.3));
}

.quick-access-tile.client-accent.timer-active .quick-access-status {
  background: rgb(67, 178, 255);
  box-shadow: 0 0 0 3px rgba(67, 178, 255, 0.14);
}

.quick-access-add {
  border-style: dashed;
  color: var(--muted);
}

.quick-access-add .quick-access-icon,
.quick-access-add .quick-access-label {
  color: var(--muted);
}

.quick-access-form {
  display: grid;
  gap: 8px;
  min-width: 178px;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 18px;
  background: rgba(9, 30, 43, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.quick-access-group-grid > .quick-access-form {
  grid-column: 1 / -1;
  width: min(100%, 300px);
}

.quick-access-form label {
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.quick-access-link-field {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

.quick-access-link-field legend {
  margin-bottom: 5px;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.quick-access-link-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(170, 224, 238, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.quick-access-link-type button {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.quick-access-link-type button.active {
  background: rgba(74, 202, 132, 0.18);
  color: var(--text);
}

.quick-access-form input {
  min-height: 32px;
  padding: 0 9px;
  font-size: 13px;
}

.quick-access-form select {
  min-height: 32px;
  padding: 0 9px;
  font-size: 13px;
}

.quick-access-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.quick-access-form-actions button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(170, 224, 238, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
}

.quick-access-form-actions button[type="submit"] {
  border-color: rgba(74, 202, 132, 0.28);
  background: rgba(72, 216, 139, 0.18);
  color: rgba(225, 255, 237, 0.92);
}

.quick-access-panel-form {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 1fr) 92px 140px auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(170, 224, 238, 0.16);
  border-radius: 12px;
  background: rgba(9, 30, 43, 0.58);
}

.quick-access-panel-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.quick-access-panel-form input,
.quick-access-panel-form select {
  min-height: 36px;
  padding: 0 9px;
}

.quick-access-panel-form input[type="color"] {
  width: 100%;
  padding: 4px;
}

.quick-access-panel-form .quick-access-form-actions {
  min-width: 150px;
}

.quick-access-resize-handle {
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.quick-access-group:hover .quick-access-resize-handle,
.quick-access-group.resizing .quick-access-resize-handle,
.quick-access-resize-handle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.quick-access-resize-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 3px;
  height: 28px;
  border-radius: 3px;
  background: rgba(170, 224, 238, 0.16);
  transform: translateY(-50%);
}

.quick-access-resize-handle:hover::before,
.quick-access-group.resizing .quick-access-resize-handle::before {
  background: color-mix(in srgb, var(--quick-client-color) 66%, white 10%);
}

@media (max-width: 1100px) {
  .quick-access-group.size-slim {
    grid-column: span 6;
  }

  .quick-access-group.size-standard,
  .quick-access-group.size-wide {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  .quick-access-group.size-slim,
  .quick-access-group.size-standard,
  .quick-access-group.size-wide {
    grid-column: span 12;
  }

  .quick-access-panel-form {
    grid-template-columns: 1fr;
  }

  .quick-access-panel-form .quick-access-form-actions {
    min-width: 0;
  }
}

.client-color-input {
  min-height: 38px;
  padding: 4px;
}

.task-board-section {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.task-board-scope-tabs,
.task-board-grouping-tabs {
  justify-self: start;
  margin: 0;
  min-height: 34px;
  padding: 3px;
}

.task-board-scope-tabs button,
.task-board-grouping-tabs button {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
}

.task-board-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
}

.task-board-section-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 760;
}

.task-board-section-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.task-board-row {
  position: relative;
  width: 100%;
  min-height: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-width: none;
  transition: height 180ms ease, padding-bottom 180ms ease;
  cursor: grab;
}

.task-board-row.is-panning {
  cursor: grabbing;
  user-select: none;
}

.task-board-row .task-column { cursor: default; }
.task-board-row.is-panning .task-column { cursor: grabbing; }

.task-board-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--task-board-scroll-width, 100%) - 1px);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.task-board-row::-webkit-scrollbar { display: none; width: 0; height: 0; }

body.dragging-task-column .task-board-row {
  padding-bottom: 10px;
}

.task-column-new-row-dropzone {
  position: absolute;
  top: calc(var(--task-board-content-height, 0px) + 12px);
  left: 0;
  width: var(--task-board-scroll-width, 100%);
  height: 68px;
  display: none;
  place-items: center;
  border: 1px dashed rgba(170, 224, 238, 0.26);
  border-radius: var(--radius);
  background: rgba(170, 224, 238, 0.045);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  pointer-events: auto;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.task-board-section.column-drag-source .task-column-new-row-dropzone {
  display: grid;
}

.task-board-row.new-row-drop .task-column-new-row-dropzone {
  border-color: rgba(72, 216, 139, 0.64);
  background: rgba(72, 216, 139, 0.14);
  color: rgba(225, 255, 237, 0.94);
  box-shadow: inset 0 0 0 1px rgba(72, 216, 139, 0.12);
}

.task-column {
  position: absolute;
  min-width: 280px;
  height: var(--task-board-column-height, 520px);
  min-height: 360px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--glass-panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 12, 20, 0.14);
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 160ms ease, background 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}

.task-column.upcoming-queue {
  min-width: 280px;
  padding-left: 4px;
  padding-right: 10px;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body.resizing-task-board,
body.resizing-task-board * {
  cursor: ns-resize !important;
  user-select: none !important;
}

body.resizing-task-board .task-column {
  transition: none;
}

.task-column.collapsed {
  flex: 0 0 54px;
  min-width: 54px;
  padding: 10px 7px;
  grid-template-rows: 1fr;
  cursor: default;
}

@media (max-width: 620px) {
  #workTasks > .section-header {
    align-items: center;
    text-align: center;
  }

  #workTasks > .section-header > div:first-child {
    width: 100%;
  }

  #workTasks > .section-header h2,
  #workTasks > .section-header .panel-note {
    text-align: center;
  }

  #workTasks .task-header-actions {
    justify-content: center;
  }

  .task-board-row {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    cursor: default;
    touch-action: pan-x pan-y;
  }

  .task-board-row > .task-column {
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .task-column-resize-handle {
    display: none;
  }
}

.task-column.collapsed .task-column-header {
  min-height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2px 0;
}

.task-column.collapsed .task-column-header h3 {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  order: 2;
}

.task-column.collapsed .task-column-header > span {
  order: 1;
  min-width: 30px;
  padding: 4px;
}

.task-column.collapsed .task-column-count.urgency-yellow {
  border: 1px solid rgba(242, 198, 79, 0.52);
  background: rgba(242, 198, 79, 0.22);
  color: #ffe39a;
  box-shadow: 0 0 12px rgba(242, 198, 79, 0.16);
}

.task-column.collapsed .task-column-count.urgency-orange {
  border: 1px solid rgba(239, 145, 64, 0.58);
  background: rgba(239, 145, 64, 0.24);
  color: #ffc28b;
  box-shadow: 0 0 12px rgba(239, 145, 64, 0.18);
}

.task-column.collapsed .task-column-count.urgency-red {
  border: 1px solid rgba(232, 80, 102, 0.62);
  background: rgba(232, 80, 102, 0.25);
  color: #ffabb8;
  box-shadow: 0 0 12px rgba(232, 80, 102, 0.20);
}

.task-column.collapsed .task-column-project {
  display: block;
  flex: 0 0 auto;
  order: 3;
  max-width: none;
  overflow: visible;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(145, 200, 226, 0.72);
  font-size: 10px;
  text-overflow: clip;
  white-space: nowrap;
}

.task-column.collapsed .task-card-list {
  display: none;
}

.task-column-resize-handle {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  z-index: 4;
  height: 12px;
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}

.task-column-resize-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: rgba(170, 224, 238, 0.44);
  transform: translateX(-50%);
}

.task-column:hover .task-column-resize-handle,
.task-column-resize-handle:focus-visible,
body.resizing-task-board .task-column-resize-handle {
  opacity: 1;
}

.task-column-resize-handle:hover,
.task-column-resize-handle:focus-visible {
  outline: none;
  background: rgba(94, 185, 211, 0.08);
}

.task-column.collapsed .task-column-resize-handle {
  display: none;
}

.task-column.drag-over {
  background: rgba(72, 216, 139, 0.12);
  box-shadow: inset 0 0 0 1px rgba(72, 216, 139, 0.28), 0 14px 30px rgba(0, 12, 20, 0.14);
}

.task-column.column-dragging {
  opacity: 0.48;
}

.task-column.column-drag-over {
  box-shadow: inset 3px 0 0 rgba(88, 177, 231, 0.9), 0 14px 30px rgba(0, 12, 20, 0.14);
}

.task-column.column-drag-over.drop-after {
  box-shadow: inset -3px 0 0 rgba(88, 177, 231, 0.9), 0 14px 30px rgba(0, 12, 20, 0.14);
}

.task-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  cursor: grab;
  user-select: none;
}

.task-column-header:active {
  cursor: grabbing;
}

.upcoming-queue .task-column-header,
.upcoming-queue .task-column-header:active {
  cursor: pointer;
}

.upcoming-queue:not(.collapsed) .task-column-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 1px 2px 7px;
  border-bottom: 1px solid rgba(151, 207, 223, 0.12);
}

.upcoming-queue:not(.collapsed) .task-column-header h3 {
  max-width: none;
}

.task-column-header .upcoming-queue-summary {
  grid-column: 1;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(174, 207, 218, 0.58);
  font-size: 10px;
  font-weight: 680;
  text-align: left;
}

.upcoming-queue:not(.collapsed) .task-column-menu-button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.task-column-header h3 {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-column-project {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(145, 200, 226, 0.78);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-column-project::before {
  content: "↳ ";
}

.task-column-header span {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.075);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.task-column-menu-button {
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 0;
  letter-spacing: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}

.task-column:hover .task-column-menu-button,
.task-column-menu-button:focus-visible,
.task-column-menu-button[aria-expanded="true"] {
  opacity: 1;
}

.task-column-menu-button:hover {
  border-color: var(--line-soft);
  background: rgba(115, 187, 222, 0.12);
  color: var(--text);
}

.task-column.collapsed .task-column-menu-button {
  display: none;
}

.task-column.collapsed .task-column-header h3 {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.task-column:not(.collapsed) .task-column-count {
  display: none;
}

.task-column-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: var(--theme-drawer-bg);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(var(--glass-blur, 18px));
}

.task-column-dialog::backdrop {
  background: rgba(2, 14, 23, 0.58);
  backdrop-filter: blur(5px);
}

.task-structure-dialog {
  width: min(500px, calc(100vw - 32px));
}

.checklist-paste-dialog {
  width: min(520px, calc(100vw - 32px));
}

.checklist-paste-target {
  max-width: 100%;
  margin: -4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checklist-paste-zone {
  display: grid;
  min-height: 270px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(170, 224, 238, 0.30);
  border-radius: 14px;
  outline: none;
  background: rgba(8, 35, 49, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.checklist-paste-zone:focus {
  border-color: rgba(91, 180, 226, 0.64);
  background: rgba(8, 35, 49, 0.62);
  box-shadow: 0 0 0 3px rgba(67, 178, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.checklist-paste-placeholder {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--muted);
}

.checklist-paste-placeholder strong {
  color: rgba(224, 242, 248, 0.80);
  font-size: 14px;
}

.checklist-paste-placeholder kbd {
  min-width: 76px;
  padding: 8px 14px;
  border: 1px solid rgba(170, 224, 238, 0.24);
  border-radius: 12px;
  background: rgba(170, 224, 238, 0.08);
  color: rgba(224, 242, 248, 0.92);
  font: 760 15px/1 inherit;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}

.checklist-paste-zone img {
  width: 100%;
  height: 270px;
  padding: 8px;
  object-fit: contain;
}

.checklist-paste-zone img[hidden],
.checklist-paste-placeholder[hidden] {
  display: none !important;
}

.checklist-paste-status {
  min-height: 18px;
  margin: -4px 2px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quick-access-shortcut-dialog {
  width: min(560px, calc(100vw - 32px));
}

.transaction-category-review-dialog {
  width: min(940px, calc(100vw - 32px));
}

.transaction-category-review-dialog form {
  display: grid;
  gap: 14px;
}

.transaction-category-review-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
  gap: 10px;
}

.transaction-category-review-intro > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.transaction-category-review-intro span,
.transaction-category-review-table td small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.transaction-category-review-intro strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-category-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.transaction-category-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
}

.transaction-category-select-all .inline-checkbox {
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 0;
}

.transaction-category-review-table-wrap {
  max-height: min(390px, 45vh);
  overscroll-behavior: contain;
  border: 1px solid rgba(170, 224, 238, 0.13);
  border-radius: 14px;
}

.transaction-category-review-table {
  min-width: 760px;
}

.transaction-category-review-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-right: 14px;
  background: rgba(13, 39, 52, 0.98);
}

.transaction-category-review-table th:first-child,
.transaction-category-review-table td:first-child {
  width: 48px;
  text-align: center;
}

.transaction-category-review-table td {
  padding-block: 9px;
  vertical-align: middle;
}

.transaction-category-review-table td strong,
.transaction-category-review-table td small {
  display: block;
}

.transaction-category-review-table td strong {
  max-width: 280px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-category-current-row {
  background: rgba(72, 194, 142, 0.10);
}

.transaction-category-caution-row {
  background: rgba(239, 180, 92, 0.055);
}

.transaction-category-rule-toggle {
  min-height: 58px;
  border-color: rgba(72, 194, 142, 0.22);
  background: rgba(72, 194, 142, 0.075);
}

.transaction-category-rule-toggle[hidden] {
  display: none;
}

.transaction-category-rule-toggle span {
  display: grid;
  gap: 2px;
}

.transaction-category-rule-toggle small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.transaction-category-review-actions {
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .transaction-category-review-intro {
    grid-template-columns: 1fr;
  }

  .transaction-category-review-actions .dialog-action-spacer {
    display: none;
  }

  .transaction-category-review-actions button {
    flex: 1 1 180px;
  }
}

.quick-access-shortcut-dialog [hidden] {
  display: none !important;
}

.quick-access-shortcut-dialog input,
.quick-access-shortcut-dialog select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 38px 9px 13px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  outline: none;
  background-color: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.quick-access-shortcut-dialog input {
  padding-right: 13px;
}

.quick-access-shortcut-dialog input:focus,
.quick-access-shortcut-dialog select:focus {
  border-color: rgba(91, 180, 226, 0.52);
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10);
}

.quick-access-shortcut-type-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.quick-access-shortcut-type-field legend,
.quick-access-shortcut-dialog .field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.quick-access-shortcut-type-field small {
  font: inherit;
  opacity: 0.68;
}

.quick-access-shortcut-type {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.quick-access-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.quick-access-shortcut-wide-field {
  grid-column: 1 / -1;
}

.quick-access-shortcut-dialog .drawer-help-text {
  min-height: 22px;
  margin: 0;
}

@media (max-width: 620px) {
  .quick-access-shortcut-grid {
    grid-template-columns: 1fr;
  }

  .quick-access-shortcut-wide-field {
    grid-column: auto;
  }
}

.task-structure-dialog [hidden] {
  display: none !important;
}

.task-structure-dialog .panel-note {
  margin: 0;
  line-height: 1.5;
}

.task-structure-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.task-structure-options legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 750;
}

.task-structure-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.task-structure-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.task-structure-option > span {
  display: grid;
  min-height: 82px;
  align-content: start;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(170, 224, 238, 0.16);
  border-radius: 8px;
  background: rgba(7, 28, 40, 0.24);
}

.task-structure-option strong {
  color: var(--text);
  font-size: 13px;
}

.task-structure-option small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.task-structure-option:has(input:checked) > span {
  border-color: rgba(74, 202, 132, 0.52);
  background: rgba(40, 147, 99, 0.18);
  box-shadow: inset 0 0 0 1px rgba(74, 202, 132, 0.10);
}

.task-structure-option:has(input:focus-visible) > span {
  outline: 2px solid rgba(105, 194, 242, 0.50);
  outline-offset: 2px;
}

.task-structure-option-wide {
  grid-column: 1 / -1;
}

.task-structure-option-wide > span {
  min-height: 64px;
}

.task-structure-option.disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.task-structure-merge-preview {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-left: 2px solid rgba(235, 177, 87, 0.46);
  background: rgba(235, 177, 87, 0.055);
}

.task-structure-merge-preview > strong {
  color: rgba(229, 239, 242, 0.92);
  font-size: 12px;
}

.task-structure-merge-preview > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.task-structure-merge-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.task-structure-merge-stats span {
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(205, 225, 232, 0.82);
  font-size: 10px;
  font-weight: 720;
}

#confirmTaskStructure.danger-confirm {
  border-color: rgba(235, 177, 87, 0.48);
  background: rgba(151, 103, 38, 0.64);
  color: rgba(255, 242, 218, 0.96);
}

@media (max-width: 560px) {
  .task-structure-options {
    grid-template-columns: 1fr;
  }

  .task-structure-option > span {
    min-height: 0;
  }
}

.adjust-timer-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  color: var(--text);
  background: var(--theme-drawer-bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(var(--glass-blur, 18px));
}

.collaboration-dialog {
  width: min(560px, calc(100vw - 32px));
}

.adjust-timer-dialog::backdrop {
  background: rgba(2, 14, 23, 0.58);
  backdrop-filter: blur(5px);
}

.adjust-timer-dialog form,
.adjust-timer-dialog .field { display: grid; gap: 10px; }
.adjust-timer-dialog form { gap: 16px; }
.adjust-timer-dialog .field > span { color: var(--muted); font-size: 13px; font-weight: 760; }

#adjustTimerStart,
#collaborationDate,
#collaborationStart,
#collaborationEnd,
#timeOffStartDate,
#timeOffEndDate,
#timeOffStartTime,
#timeOffEndTime {
  width: 100%;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  outline: none;
  color: var(--text);
  color-scheme: dark;
  background: rgba(255, 255, 255, 0.065);
}

#adjustTimerStart:focus,
#collaborationDate:focus,
#collaborationStart:focus,
#collaborationEnd:focus,
#timeOffStartDate:focus,
#timeOffEndDate:focus,
#timeOffStartTime:focus,
#timeOffEndTime:focus {
  border-color: rgba(91, 180, 226, 0.52);
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10);
}

.collaboration-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.collaboration-live-timing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.collaboration-live-timing[hidden] {
  display: none;
}

.collaboration-live-timing > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(91, 180, 226, 0.20);
  border-radius: 13px;
  background: rgba(67, 178, 255, 0.08);
}

.collaboration-live-timing span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.collaboration-live-timing strong {
  color: rgba(224, 242, 249, 0.94);
  font-size: 13px;
  line-height: 1.3;
}

@media (max-width: 520px) {
  .collaboration-live-timing {
    grid-template-columns: 1fr;
  }
}

.collaboration-wide-field {
  grid-column: 1 / -1;
}

.time-off-dialog {
  width: min(540px, calc(100vw - 32px));
}

.time-off-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.time-off-dialog select,
.time-off-dialog textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 38px 9px 13px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  outline: none;
  color: var(--text);
  color-scheme: dark;
  background-color: rgba(255, 255, 255, 0.065);
  font: inherit;
}

.time-off-dialog textarea {
  padding-right: 13px;
  resize: vertical;
}

.time-off-dialog select:focus,
.time-off-dialog textarea:focus {
  border-color: rgba(91, 180, 226, 0.52);
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10);
}

.time-off-all-day-toggle {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 740;
  cursor: pointer;
}

.time-off-all-day-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.dialog-action-spacer { flex: 1 1 auto; }

.collaboration-dialog select,
.collaboration-dialog textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 38px 9px 13px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  outline: none;
  background-color: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.collaboration-dialog textarea {
  min-height: 82px;
  padding-right: 13px;
  resize: vertical;
}

.collaboration-dialog select:focus,
.collaboration-dialog textarea:focus {
  border-color: rgba(91, 180, 226, 0.52);
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10);
}

.collaboration-duration-stepper {
  width: 100%;
  min-height: 44px;
}

.collaboration-duration-stepper > button,
.collaboration-duration-stepper input {
  min-height: 42px;
}

.adjust-timer-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 170px; gap: 8px; }
.adjust-timer-presets > button { min-height: 40px; padding: 6px 9px; font-size: 12px; font-weight: 750; }
.adjust-timer-minute-stepper {
  width: 100%;
  min-height: 40px;
}
.adjust-timer-minute-stepper > button,
.adjust-timer-minute-stepper input {
  min-height: 38px;
}
.adjust-timer-preview { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 14px; background: rgba(124, 198, 224, 0.08); }
.adjust-timer-preview span { color: var(--muted); }
.adjust-timer-preview strong { color: var(--text); }

.adjust-timer-timeline {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 15px;
  background: rgba(6, 24, 35, 0.44);
}

.adjust-timer-timeline-header,
.adjust-timer-timeline-context {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.adjust-timer-timeline-header strong {
  color: rgba(222, 241, 247, 0.90);
  font-size: 12px;
}

.adjust-timer-timeline-track {
  position: relative;
  height: 62px;
  overflow: hidden;
  border: 1px solid rgba(170, 224, 238, 0.13);
  border-radius: 11px;
  background:
    repeating-linear-gradient(90deg, rgba(170, 224, 238, 0.07) 0 1px, transparent 1px 25%),
    rgba(21, 54, 70, 0.40);
  cursor: grab;
  touch-action: none;
}

.adjust-timer-timeline-track.is-panning {
  cursor: grabbing;
}

.adjust-timer-timeline-session,
.adjust-timer-timeline-running {
  position: absolute;
  top: 20px;
  height: 25px;
  min-width: 2px;
  overflow: hidden;
  border-radius: 6px;
}

.adjust-timer-session-label {
  position: absolute;
  inset: 0 7px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: rgba(237, 249, 252, 0.90);
  font-size: 9px;
  font-weight: 740;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.adjust-timer-session-handle {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(225, 247, 252, 0.58);
  cursor: ew-resize;
}

.adjust-timer-session-handle.start { left: 0; }
.adjust-timer-session-handle.end { right: 0; }

.collaboration-log-timeline .adjust-timer-timeline-running {
  border-color: rgba(239, 180, 92, 0.48);
  background: rgba(239, 180, 92, 0.28);
  cursor: grab;
  touch-action: none;
}

.collaboration-log-timeline .adjust-timer-timeline-running.dragging {
  cursor: grabbing;
  filter: brightness(1.18);
}

.collaboration-log-timeline .adjust-timer-timeline-marker.end {
  background: rgba(255, 207, 128, 0.96);
  box-shadow: 0 0 0 3px rgba(239, 180, 92, 0.14), 0 0 12px rgba(239, 180, 92, 0.34);
}

.collaboration-log-timeline .adjust-timer-timeline-marker {
  touch-action: none;
}

.collaboration-log-timeline .adjust-timer-timeline-marker.dragging {
  filter: brightness(1.22);
}

.adjust-timer-timeline-session {
  border: 1px solid color-mix(in srgb, var(--adjust-session-color, #58b1e7) 72%, white 8%);
  background: color-mix(in srgb, var(--adjust-session-color, #58b1e7) 64%, transparent);
  cursor: grab;
  touch-action: none;
}

.adjust-timer-timeline-session.dragging {
  z-index: 3;
  cursor: grabbing;
  filter: brightness(1.16);
}

.adjust-timer-timeline-session.overlap {
  border-color: rgba(238, 103, 119, 0.86);
  background: rgba(171, 48, 67, 0.72);
  box-shadow: 0 0 0 2px rgba(238, 103, 119, 0.14);
}

.adjust-timer-timeline-running {
  min-width: 10px;
  border: 1px solid rgba(85, 211, 151, 0.34);
  background: rgba(55, 173, 116, 0.24);
}

.adjust-timer-timeline-marker {
  position: absolute;
  z-index: 4;
  top: 7px;
  bottom: 5px;
  width: 2px;
  border-radius: 2px;
  background: rgba(228, 248, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(84, 190, 229, 0.16), 0 0 12px rgba(84, 190, 229, 0.42);
  cursor: ew-resize;
}

.adjust-timer-timeline-marker span {
  position: absolute;
  top: -4px;
  left: 50%;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(8, 29, 42, 0.94);
  color: rgba(230, 248, 255, 0.96);
  font-size: 10px;
  font-weight: 800;
  transform: translateX(-50%);
  white-space: nowrap;
}

.adjust-timer-timeline-context strong {
  color: rgba(199, 225, 234, 0.88);
}

.adjust-timer-overlap {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(239, 180, 92, 0.34);
  border-radius: 14px;
  background: rgba(239, 180, 92, 0.10);
}

.adjust-timer-overlap[hidden] { display: none; }
.adjust-timer-overlap > div:first-child { display: grid; gap: 4px; }
.adjust-timer-overlap strong { color: rgba(255, 220, 160, 0.98); }
.adjust-timer-overlap span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.adjust-timer-overlap-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adjust-timer-overlap-actions button { min-height: 38px; padding: 7px 10px; font-size: 12px; }

.task-column-dialog form,
.task-column-dialog .field {
  display: grid;
  gap: 10px;
}

.task-column-dialog form { gap: 16px; }
.task-column-dialog .field > span,
.task-column-purpose-fieldset legend { color: var(--muted); font-size: 13px; font-weight: 760; }
.task-column-dialog input[type="text"],
.task-column-dialog select { width: 100%; min-height: 44px; }

#taskColumnName {
  height: 44px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  outline: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.065);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

#taskColumnName:hover {
  border-color: rgba(170, 224, 238, 0.30);
  background: rgba(255, 255, 255, 0.085);
}

#taskColumnName:focus {
  border-color: rgba(91, 180, 226, 0.52);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#taskColumnName:disabled {
  color: var(--muted);
  border-color: var(--line-soft);
  background: rgba(7, 21, 31, 0.46);
  cursor: not-allowed;
}

#taskColumnTarget,
#taskColumnMoveTarget,
#taskStructureTarget,
#taskStructureStatus {
  height: 42px;
  min-height: 42px;
  padding: 8px 38px 8px 13px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

#taskColumnTarget:hover,
#taskColumnMoveTarget:hover,
#taskStructureTarget:hover,
#taskStructureStatus:hover {
  border-color: rgba(170, 224, 238, 0.30);
  background-color: rgba(255, 255, 255, 0.085);
}

#taskColumnTarget:focus,
#taskColumnMoveTarget:focus,
#taskStructureTarget:focus,
#taskStructureStatus:focus {
  border-color: rgba(91, 180, 226, 0.52);
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.task-column-move-field { margin-top: 2px; }

.task-column-purpose-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.task-column-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 9px;
}

.task-column-purpose-grid label { position: relative; }
.task-column-purpose-grid input { position: absolute; opacity: 0; pointer-events: none; }
.task-column-purpose-grid label > span {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(9, 38, 53, 0.48);
  cursor: pointer;
}
.task-column-purpose-grid small { color: var(--muted); line-height: 1.35; }
.task-column-purpose-grid input:checked + span {
  border-color: rgba(74, 202, 132, 0.58);
  background: rgba(74, 202, 132, 0.16);
  box-shadow: inset 0 0 0 1px rgba(74, 202, 132, 0.16);
}
.task-column-dialog-actions { align-items: center; }
.dialog-action-spacer { flex: 1; }

@media (max-width: 560px) {
  .task-column-purpose-grid { grid-template-columns: 1fr; }
}

.task-card-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.task-card-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

.upcoming-queue .task-card-list {
  gap: 6px;
  padding: 0 2px;
}

@media (max-width: 560px) {
  .collaboration-form-grid { grid-template-columns: 1fr; }
  .collaboration-wide-field { grid-column: auto; }
  .time-off-form-grid { grid-template-columns: 1fr; }
}

.task-card,
.upcoming-project-card,
.task-add-column {
  cursor: pointer;
}

.task-empty-state {
  margin: 0;
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.task-list-divider {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 5px;
  margin: 7px 1px 3px;
  color: rgba(195, 224, 232, 0.62);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.task-list-divider-icon {
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

.upcoming-project-card {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(170, 224, 238, 0.11);
  border-radius: 9px;
  background: rgba(135, 178, 192, 0.075);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.upcoming-project-row-content {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.upcoming-project-card .upcoming-project-title {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 740;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.upcoming-project-card .upcoming-project-schedule {
  min-width: 0;
  color: rgba(188, 215, 224, 0.60);
  font-size: 10px;
  font-weight: 680;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

.upcoming-project-card .upcoming-project-context {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.upcoming-project-card:hover {
  border-color: rgba(132, 205, 228, 0.26);
  background: rgba(135, 190, 208, 0.13);
}

.drawer-action-row {
  justify-content: stretch;
  margin: -2px 0 4px;
}

.drawer-action-row > button {
  width: 100%;
}

.task-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(170, 224, 238, 0.12);
  border-radius: 16px;
  background: var(--theme-card-bg);
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: grab;
}

.task-card.has-card-background::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(7, 29, 40, 0.98);
  background-image:
    linear-gradient(
      to bottom,
      rgba(5, 24, 35, 0.54) 0,
      rgba(5, 24, 35, 0.62) 160px,
      rgba(6, 26, 37, 0.76) 280px,
      rgba(7, 28, 39, 0.90) 400px,
      rgba(7, 29, 40, 0.97) 540px,
      rgba(7, 29, 40, 0.98) 100%
    ),
    var(--task-card-background-image);
  background-position: top center, top center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% auto;
  content: "";
  filter: saturate(0.82);
  pointer-events: none;
}

.task-card.has-card-background > * {
  position: relative;
  z-index: 1;
}

.task-card.clocked-in {
  border-color: rgba(67, 178, 255, 0.72);
  background: rgba(20, 78, 118, 0.64);
  box-shadow:
    0 0 0 1px rgba(67, 178, 255, 0.18),
    0 12px 28px rgba(67, 178, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.task-card.clocked-in:hover {
  border-color: rgba(82, 190, 255, 0.86);
  background: rgba(24, 88, 132, 0.76);
}

.task-card:hover {
  border-color: rgba(170, 224, 238, 0.28);
  background: var(--theme-card-hover);
}

.task-card.due-later {
  border-color: rgba(74, 202, 132, 0.22);
  background: rgba(35, 96, 78, 0.36);
}

.task-card.due-later:hover {
  border-color: rgba(74, 202, 132, 0.36);
  background: rgba(40, 112, 88, 0.46);
}

.task-card.due-soon {
  border-color: rgba(239, 180, 92, 0.34);
  background: rgba(103, 74, 37, 0.4);
}

.task-card.due-soon:hover {
  border-color: rgba(239, 180, 92, 0.5);
  background: rgba(118, 83, 40, 0.52);
}

.task-card.due-now {
  border-color: rgba(232, 101, 118, 0.44);
  background: rgba(105, 42, 53, 0.46);
}

.task-card.due-now:hover {
  border-color: rgba(232, 101, 118, 0.62);
  background: rgba(124, 48, 60, 0.58);
}

.task-card.due-gradient {
  border-color: var(--task-due-border);
  background: var(--task-due-bg);
}

.task-card.due-gradient:hover {
  border-color: var(--task-due-border);
  background: var(--task-due-bg-hover);
}

.task-card.clocked-in,
.task-card.clocked-in.due-later,
.task-card.clocked-in.due-soon,
.task-card.clocked-in.due-now,
.task-card.clocked-in.due-gradient {
  border-color: rgba(67, 178, 255, 0.72);
  background: rgba(20, 78, 118, 0.64);
  box-shadow:
    0 0 0 1px rgba(67, 178, 255, 0.18),
    0 12px 28px rgba(67, 178, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.task-card.clocked-in:hover,
.task-card.clocked-in.due-later:hover,
.task-card.clocked-in.due-soon:hover,
.task-card.clocked-in.due-now:hover,
.task-card.clocked-in.due-gradient:hover {
  border-color: rgba(82, 190, 255, 0.86);
  background: rgba(24, 88, 132, 0.76);
}

.upcoming-queue .task-card.upcoming-task-row,
.upcoming-queue .task-card.upcoming-task-row.due-later,
.upcoming-queue .task-card.upcoming-task-row.due-soon,
.upcoming-queue .task-card.upcoming-task-row.due-now,
.upcoming-queue .task-card.upcoming-task-row.due-gradient {
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(170, 224, 238, 0.11);
  border-radius: 9px;
  background: rgba(135, 178, 192, 0.075);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.upcoming-queue .task-card.upcoming-task-row:hover,
.upcoming-queue .task-card.upcoming-task-row.due-later:hover,
.upcoming-queue .task-card.upcoming-task-row.due-soon:hover,
.upcoming-queue .task-card.upcoming-task-row.due-now:hover,
.upcoming-queue .task-card.upcoming-task-row.due-gradient:hover {
  border-color: rgba(132, 205, 228, 0.26);
  background: rgba(135, 190, 208, 0.13);
}

.upcoming-queue .task-card.upcoming-task-row.clocked-in,
.upcoming-queue .task-card.upcoming-task-row.clocked-in:hover {
  border-color: rgba(82, 190, 255, 0.48);
  background: rgba(30, 106, 151, 0.24);
  box-shadow: inset 2px 0 0 rgba(82, 190, 255, 0.64);
}

.upcoming-task-row .task-card-title-row {
  align-items: center;
}

.upcoming-task-row .task-card-title-text {
  font-size: 14px;
}

.upcoming-task-row .task-assignee-avatar {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  font-size: 9px;
}

.task-card.dragging {
  opacity: 0.52;
}

body.task-card-is-dragging,
body.task-card-is-dragging * {
  cursor: grabbing !important;
}

.task-card-drag-preview {
  position: fixed;
  z-index: 2600;
  display: flex;
  width: max-content;
  max-width: min(260px, calc(100vw - 20px));
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(170, 224, 238, 0.28);
  border-radius: 11px;
  background: rgba(15, 44, 58, 0.92);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.task-card-drag-preview.native-drag-image {
  left: 0;
  top: 0;
}

.task-card-drag-preview > span {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--task-client-color, #58b1e7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-client-color, #58b1e7) 18%, transparent);
}

.task-card-drag-preview strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card.nest-drop-target,
.task-card.nest-drop-target:hover {
  border-color: rgba(74, 202, 132, 0.82);
  background: rgba(36, 116, 83, 0.68);
  box-shadow:
    0 0 0 3px rgba(74, 202, 132, 0.16),
    0 14px 34px rgba(15, 77, 55, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: scale(0.985);
}

.task-card.nest-drop-target::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: rgba(22, 86, 61, 0.68);
  content: "";
  pointer-events: none;
}

.task-card.nest-drop-target::after {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  padding: 4px 9px;
  border: 1px solid rgba(117, 232, 171, 0.42);
  border-radius: var(--radius-pill);
  background: rgba(13, 59, 43, 0.90);
  box-shadow: 0 5px 16px rgba(4, 31, 22, 0.28);
  color: rgba(218, 255, 235, 0.94);
  content: "Move into task";
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.task-card.checklist-drop-target,
.task-card.checklist-drop-target:hover {
  border-color: rgba(88, 177, 231, 0.88);
  background: rgba(30, 91, 126, 0.68);
  box-shadow:
    0 0 0 3px rgba(88, 177, 231, 0.18),
    0 14px 34px rgba(12, 61, 91, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: scale(0.985);
}

.task-card.checklist-drop-target::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: rgba(20, 70, 101, 0.64);
  content: "";
  pointer-events: none;
}

.task-card.checklist-drop-target::after {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  padding: 4px 9px;
  border: 1px solid rgba(139, 211, 255, 0.46);
  border-radius: var(--radius-pill);
  background: rgba(11, 49, 72, 0.92);
  color: rgba(224, 246, 255, 0.96);
  content: "Move checklist item here";
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.task-card-drop-indicator {
  position: fixed;
  z-index: 2590;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(80, 220, 151, 0.94);
  box-shadow:
    0 0 0 3px rgba(80, 220, 151, 0.11),
    0 0 15px rgba(80, 220, 151, 0.46);
  pointer-events: none;
}

.task-card-drop-indicator::before,
.task-card-drop-indicator::after {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(80, 220, 151, 0.94);
  border-radius: 50%;
  background: rgba(15, 44, 58, 0.96);
  content: "";
  transform: translateY(-50%);
}

.task-card-drop-indicator::before { left: -4px; }
.task-card-drop-indicator::after { right: -4px; }

.task-card.done {
  opacity: 0.72;
}

.task-card.done-complete {
  opacity: 1;
  border-color: rgba(74, 202, 132, 0.42);
  background: rgba(35, 116, 81, 0.48);
}

.task-card.done-complete:hover {
  border-color: rgba(74, 202, 132, 0.56);
  background: rgba(39, 132, 91, 0.58);
}

.task-card.compact {
  gap: 5px;
  padding: 10px 11px;
}

.task-card.compact.clocked-in {
  padding-bottom: 10px;
}

.task-card-title-row {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.task-card-client-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--task-client-color, #58b1e7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-client-color, #58b1e7) 18%, transparent);
}

.task-assignee-avatar {
  flex: 0 0 26px;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(173, 229, 242, 0.24);
  border-radius: 50%;
  background: rgba(173, 229, 242, 0.13);
  color: rgba(235, 250, 255, 0.92);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.task-card strong {
  flex: 1;
  min-width: 0;
  overflow: visible;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: clip;
}

.task-card-title-text {
  display: block;
  flex: 1 1 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.task-card-status {
  flex: 0 0 auto;
  max-width: 88px;
  overflow: hidden;
  padding: 3px 6px;
  border: 1px solid rgba(154, 201, 214, 0.22);
  border-radius: var(--radius-pill);
  color: rgba(205, 228, 234, 0.72);
  background: rgba(122, 166, 179, 0.10);
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-status.status-in-progress { border-color: rgba(74, 202, 132, 0.32); color: rgba(143, 230, 183, 0.88); background: rgba(74, 202, 132, 0.11); }
.task-card-status.status-waiting { border-color: rgba(239, 180, 92, 0.34); color: rgba(244, 202, 139, 0.90); background: rgba(239, 180, 92, 0.11); }
.task-card-status.status-done { color: rgba(182, 207, 214, 0.58); }

.task-project-column .task-column-header {
  cursor: pointer;
}

.task-project-column-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 0 2px 5px;
}

.task-project-done-toggle {
  display: inline-flex;
  width: auto;
  min-width: 38px;
  height: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(74, 202, 132, 0.34);
  border-radius: var(--radius-pill);
  color: rgba(190, 239, 209, 0.86);
  background: rgba(74, 202, 132, 0.10);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.task-project-done-toggle:hover,
.task-project-done-toggle:focus-visible {
  border-color: rgba(74, 202, 132, 0.52);
  color: rgba(220, 255, 233, 0.98);
  background: rgba(74, 202, 132, 0.16);
  outline: none;
}

.task-project-done-toggle[aria-expanded="true"] {
  border-color: rgba(74, 202, 132, 0.30);
  color: rgba(194, 238, 211, 0.82);
  background: rgba(74, 202, 132, 0.10);
}

.task-project-column-footer .task-add-column {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-style: solid;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 520;
  line-height: 1;
}

.task-running-control {
  display: inline-flex;
  width: auto;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 6px;
  margin: 3px 0 0;
  padding: 5px 9px;
  border: 1px solid rgba(139, 211, 255, 0.30);
  border-radius: var(--radius-pill);
  background: rgba(67, 178, 255, 0.14);
  color: rgba(213, 241, 255, 0.94);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 14px rgba(45, 158, 255, 0.09);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.task-running-control:hover,
.task-running-control:focus-visible {
  border-color: rgba(139, 211, 255, 0.52);
  background: rgba(67, 178, 255, 0.24);
  color: rgba(241, 251, 255, 0.98);
  outline: none;
}

.task-running-control .button-icon {
  width: 15px;
  height: 15px;
}

.task-running-control .button-label {
  font-size: 11px;
}

.task-running-control strong {
  flex: none;
  min-width: auto;
  overflow: visible;
  color: inherit;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
}

.task-running-control.timer-action-loading {
  min-width: 68px;
  cursor: wait;
}

.task-running-control .timer-action-spinner {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.task-card-meta,
.task-card-footer {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.task-card-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-card-meta-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-card-origin {
  justify-self: start;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: rgba(151, 194, 211, 0.58);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.task-card-origin:hover,
.task-card-origin:focus-visible {
  outline: none;
  color: rgba(188, 226, 239, 0.88);
  text-decoration: underline;
}

.task-card-outcome {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 5px 7px;
  border-left: 2px solid rgba(105, 194, 242, 0.26);
  border-radius: 0 6px 6px 0;
  background: rgba(105, 194, 242, 0.045);
}

.task-card-outcome > strong {
  color: rgba(137, 197, 220, 0.68);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-card-outcome > span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: rgba(193, 218, 227, 0.72);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-card-time-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.task-card.attachment-drag-over {
  outline: 2px solid rgba(72, 216, 139, 0.72);
  outline-offset: 2px;
}

.task-card-attachments {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  margin-top: 3px;
}

.task-card-attachments img {
  width: 100%;
  height: 58px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}

.task-card-attachments small {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(7, 23, 34, 0.82);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
}

.task-attachments-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(170, 224, 238, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 140ms ease, background 140ms ease;
}

.task-outcome-editor {
  overflow: hidden;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 12px;
  background: rgba(7, 28, 40, 0.28);
}

.task-outcome-editor > summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.task-outcome-editor > summary::-webkit-details-marker {
  display: none;
}

.task-outcome-editor > summary::before {
  color: rgba(145, 198, 218, 0.62);
  content: "+";
  font-size: 16px;
  font-weight: 500;
}

.task-outcome-editor[open] > summary::before {
  content: "−";
}

.task-outcome-editor > summary > strong {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 760;
}

.task-outcome-editor > summary > span {
  color: rgba(163, 201, 215, 0.58);
  font-size: 10px;
  font-weight: 720;
}

.time-entry-fields .task-outcome-input {
  width: calc(100% - 20px);
  min-height: 64px;
  margin: 0 10px 10px;
  padding: 8px 9px;
  border-color: rgba(105, 194, 242, 0.18);
  border-radius: 8px;
  background: rgba(8, 35, 49, 0.36);
  color: rgba(216, 237, 244, 0.88);
  font-size: 12px;
  line-height: 1.35;
  resize: vertical;
}

.task-attachments-editor.drag-over {
  border-color: rgba(72, 216, 139, 0.58);
  background: rgba(72, 216, 139, 0.10);
}

.task-attachments-header,
.task-attachment-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-attachments-header .secondary-button { min-height: 32px; padding: 5px 10px; font-size: 12px; }

.task-attachment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.task-attachment-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(170, 224, 238, 0.13);
  border-radius: 13px;
  background: rgba(8, 28, 40, 0.22);
}

.task-attachment-preview {
  width: 100%;
  height: 104px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
}

.task-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.task-attachment-item > span { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-attachment-item a,
.task-attachment-item > div button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.task-attachment-item a:hover,
.task-attachment-item > div button:hover { color: var(--text); }
.task-attachment-empty { grid-column: 1 / -1; margin: 0; padding: 16px 8px; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }

.task-attachment-lightbox {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 36px;
  background: rgba(2, 10, 16, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.task-attachment-lightbox-stage {
  display: grid;
  place-items: center;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
}

.task-attachment-lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
}

.task-attachment-lightbox .row-action { position: absolute; top: 18px; right: 18px; }

.task-attachment-lightbox-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 4px;
  border: 1px solid rgba(191, 220, 232, 0.28);
  border-radius: 50%;
  background: rgba(18, 45, 59, 0.62);
  color: rgba(227, 241, 247, 0.78);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.task-attachment-lightbox-nav:hover {
  border-color: rgba(191, 220, 232, 0.48);
  background: rgba(30, 67, 83, 0.8);
  color: var(--text);
}

.task-attachment-lightbox-nav.previous { left: 18px; }
.task-attachment-lightbox-nav.next { right: 18px; }

.task-attachment-lightbox-caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, 52vw);
  padding: 8px 12px;
  border: 1px solid rgba(191, 220, 232, 0.18);
  border-radius: 999px;
  background: rgba(10, 31, 42, 0.62);
  color: var(--muted);
  font-size: 12px;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.task-attachment-lightbox-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-attachment-lightbox-caption strong {
  flex: 0 0 auto;
  color: var(--text);
}

.task-attachment-lightbox .task-attachment-lightbox-remove {
  top: auto;
  right: 18px;
  bottom: 18px;
  width: auto;
}

.task-attachment-lightbox-remove.timer-action-loading {
  display: inline-grid;
  place-items: center;
  cursor: wait;
}

.task-attachment-lightbox-remove .timer-action-spinner {
  width: 18px;
  height: 18px;
}

@media (max-width: 700px) {
  .task-attachment-lightbox { padding: 62px 14px 76px; }
  .task-attachment-lightbox-stage,
  .task-attachment-lightbox img { max-width: 94vw; max-height: 78vh; }
  .task-attachment-lightbox-nav { width: 38px; height: 38px; font-size: 32px; }
  .task-attachment-lightbox-nav.previous { left: 8px; }
  .task-attachment-lightbox-nav.next { right: 8px; }
  .task-attachment-lightbox-caption { bottom: 68px; max-width: 78vw; }
  .task-attachment-lightbox .task-attachment-lightbox-remove { right: 14px; bottom: 14px; }
}

.archive-header { align-items: center; }

.archive-filters {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(125px, 0.85fr));
  gap: 8px;
  width: min(720px, 68vw);
}

.archive-filters input,
.archive-filters select {
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding-top: 7px;
  padding-bottom: 7px;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.archive-filters input { padding-inline: 13px; }
.archive-filters select { padding-left: 13px; padding-right: 34px; }
.archive-filters input::placeholder { color: var(--muted); opacity: 0.82; }
.archive-filters input:focus,
.archive-filters select:focus { border-color: rgba(91, 180, 226, 0.50); outline: none; box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.10); }

.archive-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.archive-row-actions .row-action { min-width: 62px; }

@media (max-width: 980px) {
  .archive-header { align-items: stretch; flex-direction: column; }
  .archive-filters { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.task-card-checklist {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 7px;
  padding: 7px 0 2px;
  border-top: 1px solid rgba(170, 224, 238, 0.10);
}

.task-card-checklist[hidden] {
  display: none;
}

.task-card-checklist-item {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 20px minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: start;
  color: rgba(224, 242, 248, 0.88);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.3;
  cursor: grab;
}

.task-card-checklist-content {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-card-checklist-text {
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-user-drag: element;
  cursor: grab;
  user-select: none;
}

.task-card-checklist-outcome {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: rgba(176, 207, 217, 0.60);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-card-checklist-outcome::before {
  color: rgba(113, 190, 218, 0.62);
  content: "Outcome · ";
  font-weight: 720;
}

.task-card-checklist-actions {
  display: inline-flex;
  min-width: 18px;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 0;
  text-decoration: none;
}

.task-checklist-attachment-thumb,
.task-checklist-attachment-add {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  margin: -1px 1px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(170, 224, 238, 0.20);
  border-radius: 5px;
  background: rgba(170, 224, 238, 0.06);
  color: rgba(184, 211, 220, 0.72);
  cursor: pointer;
}

.task-checklist-attachment-thumb:hover,
.task-checklist-attachment-thumb:focus-visible,
.task-checklist-attachment-add:hover,
.task-checklist-attachment-add:focus-visible {
  border-color: rgba(139, 211, 255, 0.52);
  outline: none;
  background: rgba(67, 178, 255, 0.16);
  color: rgba(218, 244, 255, 0.96);
}

.task-checklist-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-checklist-attachment-thumb > span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  min-width: 10px;
  padding: 1px 2px;
  border-radius: 4px 0 0;
  background: rgba(5, 23, 34, 0.88);
  color: rgba(239, 250, 255, 0.96);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.task-checklist-attachment-add .button-icon {
  width: 12px;
  height: 12px;
}

.task-checklist-attachment-thumb.editor-thumb,
.task-checklist-editor-actions .task-checklist-attachment-add {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
}

.task-checklist-attachment-add {
  border: 0;
  background: transparent;
  color: rgba(184, 211, 220, 0.54);
}

.task-checklist-attachment-add:hover,
.task-checklist-attachment-add:focus-visible {
  border-color: transparent;
  background: rgba(105, 194, 242, 0.09);
  color: rgba(190, 227, 241, 0.88);
}

.task-attachment-hover-preview {
  position: fixed;
  z-index: 240;
  width: min(300px, calc(100vw - 24px));
  height: 210px;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(170, 224, 238, 0.30);
  border-radius: 9px;
  background: rgba(6, 25, 36, 0.96);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.44);
  pointer-events: none;
}

.task-attachment-hover-preview img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: contain;
}

.task-checklist-tracked-time,
.task-checklist-live-time,
.task-card-total-time {
  margin-right: 4px;
  color: rgba(184, 211, 220, 0.62);
  font-size: 10px;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.task-checklist-live-time { color: rgba(139, 211, 255, 0.96); }

.task-card-checklist-clock {
  display: inline-grid;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  margin: -1px 0 0;
  padding: 0 0 1px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(184, 211, 220, 0.68);
  font: 700 16px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.task-card-checklist-item:hover .task-card-checklist-clock,
.task-card-checklist-clock:focus-visible,
.task-card-checklist-item.clocked-in .task-card-checklist-clock {
  opacity: 1;
}

.task-card-checklist-clock:hover:not(:disabled),
.task-card-checklist-item.clocked-in .task-card-checklist-clock {
  background: rgba(67, 178, 255, 0.20);
  color: rgba(139, 211, 255, 0.98);
}

.task-card-checklist-clock:disabled {
  cursor: not-allowed;
  opacity: 0.22;
}

.task-card-checklist-clock.timer-action-loading {
  cursor: wait;
  opacity: 1;
  color: rgba(139, 211, 255, 0.98);
}

.task-card-checklist-clock .timer-action-spinner {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.task-card-clock-button {
  opacity: 0.30;
}

.task-card:hover .task-card-clock-button,
.task-card-clock-button:focus-visible,
.task-card.clocked-in .task-card-clock-button {
  opacity: 1;
}

.task-card:hover .task-card-clock-button:disabled {
  opacity: 0.22;
}

.task-card-checklist-item.clocked-in {
  color: rgba(222, 245, 255, 0.96);
  text-shadow: 0 0 12px rgba(67, 178, 255, 0.18);
}

.task-card-checklist-item.promoted .task-card-checklist-text {
  color: rgba(157, 211, 240, 0.90);
  font-weight: 600;
}

.task-card-checklist-task-link { cursor: pointer; }
.task-card-checklist-task-link:hover { color: rgba(191, 229, 250, 0.98); text-decoration: underline; }

.task-card-checklist-item.checklist-dragging {
  cursor: grabbing;
  opacity: 0.42;
}
.task-card-checklist-item.checklist-drop-before::before,
.task-card-checklist-item.checklist-drop-after::after {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(105, 194, 242, 0.76);
  box-shadow: 0 0 8px rgba(105, 194, 242, 0.26);
  content: "";
  pointer-events: none;
}

.task-card-checklist-item.checklist-drop-before::before { top: -4px; }
.task-card-checklist-item.checklist-drop-after::after { bottom: -5px; }

.task-card-checklist-item.complete {
  color: rgba(168, 200, 210, 0.62);
}

.task-card-checklist-item.complete .task-card-checklist-text {
  text-decoration: line-through;
}

.task-card-checklist-marker {
  appearance: none;
  display: inline-grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.32);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(5, 24, 36, 0.28);
  color: rgba(216, 255, 231, 0.96);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.task-card-checklist-marker:hover,
.task-card-checklist-marker:focus-visible {
  border-color: rgba(170, 224, 238, 0.58);
  background: rgba(170, 224, 238, 0.12);
  outline: none;
}

.task-card-checklist-item.complete .task-card-checklist-marker {
  border-color: rgba(74, 202, 132, 0.42);
  background: rgba(74, 202, 132, 0.24);
}

.task-card-checklist-item.meeting-note .task-card-checklist-marker,
.task-checklist-editor-item.meeting-note .task-card-checklist-marker {
  box-shadow: 0 0 0 1.5px rgba(239, 180, 92, 0.82);
}

.task-checklist-touch-menu {
  display: none;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: rgba(190, 219, 226, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

@media (hover: none), (pointer: coarse) {
  .task-checklist-touch-menu {
    display: inline-grid;
    place-items: center;
  }
}

.task-card-checklist-add {
  display: flex;
  gap: 6px;
  min-height: 24px;
  align-items: center;
  margin: 2px 0 -2px;
}

.task-card-checklist-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.task-card-meta > .task-card-empty-checklist-add {
  flex: 0 0 auto;
  order: -1;
}

.task-card-meta > .task-card-empty-checklist-add + .task-card-meta-text {
  margin-right: auto;
}

.task-card-checklist.empty:not([hidden]) {
  padding-top: 5px;
}

.task-card-checklist-add-button {
  position: relative;
  display: inline-grid;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  margin-left: 0;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.18);
  border-radius: 50%;
  background: rgba(170, 224, 238, 0.06);
  color: var(--muted);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.task-card-checklist-add-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.task-card-checklist-add-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.task-card-checklist-add-button:hover,
.task-card-checklist-add-button:focus-visible {
  border-color: rgba(74, 202, 132, 0.42);
  background: rgba(74, 202, 132, 0.14);
  color: rgba(220, 255, 233, 0.96);
  outline: none;
}

.task-card-checklist-completed-toggle {
  display: inline-flex;
  width: auto;
  min-width: 30px;
  height: 20px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 10px;
  background: rgba(170, 224, 238, 0.045);
  color: rgba(184, 211, 220, 0.56);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
}

.task-card-checklist-completed-toggle:hover,
.task-card-checklist-completed-toggle:focus-visible {
  border-color: rgba(170, 224, 238, 0.32);
  background: rgba(170, 224, 238, 0.10);
  color: rgba(224, 242, 248, 0.88);
  outline: none;
}

.task-card-checklist-completed-toggle[aria-pressed="true"] {
  border-color: rgba(74, 202, 132, 0.32);
  background: rgba(74, 202, 132, 0.12);
  color: rgba(194, 238, 211, 0.82);
}

.task-card-checklist-completed-icon {
  font-size: 11px;
}

.task-card-checklist-inline-form {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.task-card-checklist-inline-form:not([hidden]) { display: grid; }

.task-card-checklist-inline-form input {
  appearance: none;
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(170, 224, 238, 0.20);
  border-radius: 8px;
  outline: none;
  background: rgba(8, 35, 49, 0.54);
  color: var(--text);
  caret-color: rgba(105, 194, 242, 0.96);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.task-card-checklist-inline-form input::placeholder {
  color: rgba(184, 211, 220, 0.58);
}

.task-card-checklist-inline-form input:focus {
  border-color: rgba(105, 194, 242, 0.52);
  background: rgba(10, 43, 59, 0.68);
  box-shadow: 0 0 0 2px rgba(105, 194, 242, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.task-card-checklist-inline-form button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(74, 202, 132, 0.32);
  border-radius: 8px;
  background: rgba(74, 202, 132, 0.16);
  color: rgba(224, 255, 236, 0.96);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.task-checklist-editor {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 12px;
  background: rgba(7, 28, 40, 0.28);
}

.task-checklist-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}

.task-checklist-heading > span {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.task-checklist-editor-list {
  display: grid;
  gap: 0;
}

.task-checklist-editor-item,
.task-checklist-add {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.task-checklist-editor-item {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}

.task-checklist-editor-item > .task-card-checklist-marker {
  align-self: start;
  margin-top: 4px;
  cursor: grab;
}

.task-checklist-editor-item > .task-card-checklist-marker:active,
.task-checklist-editor-item.checklist-dragging {
  cursor: grabbing;
}

.task-checklist-editor-item.checklist-dragging {
  opacity: 0.42;
}

.task-checklist-editor-item.checklist-drop-before {
  box-shadow: inset 0 2px rgba(105, 194, 242, 0.76);
}

.task-checklist-editor-item.checklist-drop-after {
  box-shadow: inset 0 -2px rgba(105, 194, 242, 0.76);
}

.task-checklist-editor-item input[type="text"],
.task-checklist-add input {
  min-width: 0;
}

.task-checklist-editor-content {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.time-entry-fields .task-checklist-editor-text {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  margin: -3px 0;
  padding: 4px 5px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: rgba(224, 242, 248, 0.90);
  font: inherit;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.3;
  overflow-wrap: anywhere;
  cursor: text;
  resize: none;
  user-select: text;
  white-space: pre-wrap;
}

.task-checklist-editor-text:hover {
  background: rgba(170, 224, 238, 0.035);
}

.task-checklist-editor-text:focus {
  border-color: rgba(105, 194, 242, 0.34);
  background: rgba(8, 35, 49, 0.52);
  box-shadow: 0 0 0 2px rgba(105, 194, 242, 0.08);
}

.task-checklist-editor-actions {
  display: inline-flex;
  min-width: 48px;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.task-checklist-outcome-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  min-width: 0;
  padding: 1px 5px 2px;
}

.task-checklist-outcome-field > span {
  color: rgba(145, 198, 218, 0.68);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.3;
}

.time-entry-fields .task-checklist-outcome-input,
.task-card .task-checklist-outcome-input {
  width: 100%;
  min-height: 20px;
  margin: 0;
  padding: 0 2px 2px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(105, 194, 242, 0.20);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: rgba(205, 230, 239, 0.82);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  resize: none;
}

.time-entry-fields .task-checklist-outcome-input:focus,
.task-card .task-checklist-outcome-input:focus {
  border-color: rgba(105, 194, 242, 0.46);
  background: transparent;
  box-shadow: none;
}

.task-card-checklist-outcome-field {
  padding: 1px 0 0;
}

.task-card .task-card-checklist-outcome-field .task-checklist-outcome-input {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(170, 224, 238, 0.20);
  border-radius: 8px;
  background: rgba(8, 35, 49, 0.54);
  color: var(--text);
  caret-color: rgba(105, 194, 242, 0.96);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.task-card .task-card-checklist-outcome-field .task-checklist-outcome-input::placeholder {
  color: rgba(184, 211, 220, 0.58);
}

.task-card .task-card-checklist-outcome-field .task-checklist-outcome-input:focus {
  border-color: rgba(105, 194, 242, 0.52);
  background: rgba(10, 43, 59, 0.68);
  box-shadow: 0 0 0 2px rgba(105, 194, 242, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.task-checklist-editor-outcome-readout {
  padding-inline: 5px;
  border-radius: 4px;
  cursor: text;
}

.task-checklist-editor-outcome-readout:hover,
.task-checklist-editor-outcome-readout:focus-visible {
  outline: none;
  background: rgba(105, 194, 242, 0.07);
  color: rgba(196, 224, 233, 0.78);
}

.task-checklist-editor-item:hover .task-card-checklist-clock,
.task-checklist-editor-item .task-card-checklist-clock:focus-visible,
.task-checklist-editor-item.clocked-in .task-card-checklist-clock {
  opacity: 1;
}

.task-checklist-editor-item.clocked-in {
  border-color: rgba(67, 178, 255, 0.22);
  background: rgba(67, 178, 255, 0.055);
}

.task-checklist-editor-item.complete .task-card-checklist-marker {
  border-color: rgba(74, 202, 132, 0.42);
  background: rgba(74, 202, 132, 0.24);
}

.task-checklist-editor-item.complete .task-checklist-editor-text {
  color: rgba(168, 200, 210, 0.62);
  text-decoration: line-through;
}

.task-checklist-editor-item.promoted .task-checklist-editor-text {
  color: rgba(157, 211, 240, 0.90);
  font-weight: 600;
}

.task-checklist-remove {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 50%;
  background: rgba(170, 224, 238, 0.035);
  color: rgba(184, 211, 220, 0.62);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.task-checklist-remove:hover {
  border-color: rgba(170, 224, 238, 0.34);
  background: rgba(170, 224, 238, 0.10);
  color: rgba(230, 246, 251, 0.94);
}

.task-checklist-add {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  min-height: 30px;
  padding: 2px 3px 0;
}

.task-checklist-add .task-card-checklist-add-button {
  align-self: center;
}

.task-checklist-add input {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(170, 224, 238, 0.16);
  border-radius: 8px;
  background: rgba(8, 35, 49, 0.38);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 620;
}

.task-checklist-add input:focus {
  border-color: rgba(105, 194, 242, 0.42);
  outline: none;
  background: rgba(10, 43, 59, 0.56);
  box-shadow: 0 0 0 2px rgba(105, 194, 242, 0.10);
}

.task-context-menu {
  position: fixed;
  z-index: 100;
  display: grid;
  min-width: 190px;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(173, 229, 242, 0.22);
  border-radius: 16px;
  background: rgba(9, 34, 46, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.quick-access-context-menu {
  position: absolute;
  z-index: 10000;
}

.task-context-menu button {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 12px;
  background: rgba(74, 202, 132, 0.18);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  text-align: left;
}

.task-context-menu button:not(:disabled):hover {
  background: rgba(74, 202, 132, 0.28);
}

.task-context-menu button.danger-menu-item {
  background: rgba(232, 101, 118, 0.14);
  color: rgba(255, 224, 228, 0.96);
}

.task-context-menu button.danger-menu-item:not(:disabled):hover {
  background: rgba(232, 101, 118, 0.24);
}

.task-context-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.task-context-menu span {
  padding: 4px 8px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.time-flow-blank-context-menu {
  width: min(300px, calc(100vw - 20px));
}

.time-flow-blank-context-menu button {
  line-height: 1.3;
  white-space: normal;
}

.timer-label-context-menu {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.timer-label-context-menu::-webkit-scrollbar {
  display: none;
}

.task-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.task-priority {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(239, 180, 92, 0.18);
  color: rgba(250, 224, 179, 0.92);
}

.task-priority.high {
  background: rgba(255, 114, 133, 0.18);
  color: rgba(255, 198, 205, 0.92);
}

.task-priority.low {
  background: rgba(72, 216, 139, 0.16);
  color: rgba(205, 248, 222, 0.92);
}

.task-add-column {
  min-height: 34px;
  border: 1px dashed rgba(170, 224, 238, 0.22);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.task-add-column:hover {
  border-color: rgba(170, 224, 238, 0.36);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.retirement-spending-presets {
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 14px;
}

.retirement-spending-presets button {
  min-height: 38px;
}

.year-toggle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}

.year-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-small);
  background: rgba(8, 26, 37, 0.52);
  color: var(--muted);
  font-weight: 800;
}

.year-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.year-toggle-empty {
  color: var(--muted);
  font-weight: 800;
}

.small-button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

canvas {
  display: block;
  width: 100%;
  max-width: 620px;
  height: 360px;
  margin: 0 auto;
}

.asset-canvas {
  max-width: 520px;
  aspect-ratio: 1 / 1.08;
  height: auto;
}

.budget-canvas {
  width: min(100%, 420px);
  max-width: 420px;
  aspect-ratio: 1 / 1;
  height: auto;
}

.clickable-chart {
  cursor: pointer;
}

.chart-legend-list {
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: var(--theme-label-bg);
}

.tall-legend {
  max-height: 430px;
}

.chart-legend-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-color: transparent;
  background: var(--theme-card-bg);
  text-align: left;
}

.chart-legend-item:hover {
  border-color: var(--line);
  background: var(--theme-card-hover);
}

div.chart-legend-item {
  cursor: default;
}

.chart-legend-swatch {
  width: 22px;
  height: 22px;
  border-radius: 3px;
}

.chart-legend-text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chart-legend-text strong,
.chart-legend-text em,
.legend-delta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-legend-text strong {
  color: var(--text);
  font-style: normal;
  font-weight: 800;
}

.chart-legend-text em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.legend-delta {
  color: rgba(244, 251, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.legend-delta.good {
  color: rgba(108, 220, 156, 0.86);
}

.legend-delta.bad {
  color: rgba(255, 137, 150, 0.86);
}

.bills-filter-panel {
  width: min(340px, calc(100vw - 40px));
}

.bills-filter-panel label {
  grid-template-columns: 76px minmax(0, 1fr);
}

.bills-filter-panel input,
.bills-filter-panel select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  color: var(--text);
  padding: 6px 12px;
  text-align: center;
  outline: none;
}

.bills-filter-panel select {
  appearance: none;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 38px;
}

.bills-grid-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: var(--glass-panel-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 36px rgba(0, 12, 20, 0.16);
}

.bills-grid-panel > .section-header {
  margin-bottom: 0;
}

.bills-grid-panel .button-row span {
  color: var(--muted);
  font-weight: 800;
}

.bills-year-wrap {
  max-height: 70vh;
  overflow-x: hidden;
}

#billYearTable {
  width: 100%;
  table-layout: fixed;
}

#billYearTable th,
#billYearTable td {
  height: 40px;
  padding: 7px 5px;
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

#billYearTable th {
  font-size: 13px;
}

#billYearTable td:first-child,
#billYearTable th:first-child {
  font-size: 13px;
  text-align: center;
}

#billYearTable td:nth-child(2),
#billYearTable th:nth-child(2) {
  text-align: left;
}

#billYearTable td:not(:nth-child(2)),
#billYearTable th:not(:nth-child(2)) {
  text-align: center;
}

#billYearTable .bill-missing-label {
  color: rgba(244, 251, 255, 0.58);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

#billYearTable .bill-year-value {
  display: inline-block;
  width: 100%;
}

.bill-month-button {
  width: 100%;
  min-height: 28px;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.bill-month-button.bill-source-imported {
  border-color: rgba(244, 251, 255, 0.16);
  background: rgba(244, 251, 255, 0.08);
  color: rgba(244, 251, 255, 0.92);
}

.bill-month-button.bill-source-manual {
  border-color: rgba(238, 160, 75, 0.32);
  background: rgba(180, 103, 42, 0.26);
  color: rgba(255, 205, 146, 0.96);
}

.bill-month-button.bill-source-missing {
  border-color: rgba(255, 137, 150, 0.20);
  background: rgba(142, 50, 62, 0.16);
}

.bill-month-button.bill-source-upcoming {
  color: rgba(244, 251, 255, 0.50);
}

.bill-month-button:hover,
.bill-month-button:focus-visible {
  background: rgba(170, 224, 238, 0.10);
  outline: none;
}

.bill-name-button {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
}

.bill-name-button:hover,
.bill-name-button:focus-visible {
  background: transparent;
  color: var(--accent);
  outline: none;
}

.bill-month-button.bill-source-empty {
  color: rgba(244, 251, 255, 0.42);
}

.bill-manual-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(170, 224, 238, 0.16);
  border-radius: var(--radius-small);
  background: rgba(14, 38, 51, 0.72);
}

.bill-manual-panel strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.bill-manual-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.drawer-help-text {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.bill-manual-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

#bills .compact-layout {
  grid-template-columns: 1fr;
}

.property-drawer {
  position: fixed;
  top: 126px;
  right: 24px;
  z-index: 40;
  width: min(460px, calc(100vw - 48px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--theme-drawer-bg);
  box-shadow: 0 18px 42px var(--shadow);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 32px));
  transition:
    opacity 160ms ease,
    transform 180ms ease;
}

.property-drawer::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.property-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

#bills > .bill-detail-panel {
  top: 16px;
  right: 0;
  bottom: 16px;
  width: min(460px, calc(100vw - 16px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  border-radius: var(--radius) 0 0 var(--radius);
}

#bills > .bill-detail-panel::-webkit-scrollbar {
  display: block;
  width: 8px;
}

.import-data-sheet {
  z-index: 90;
  width: min(860px, calc(100vw - 48px));
}

.import-data-sheet .import-tool-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.import-data-sheet .import-field-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.import-data-sheet .import-tool-panel > label,
.import-data-sheet .import-field-group > label {
  width: 100%;
}

.account-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-capabilities-field {
  display: grid;
  gap: 8px;
}

.account-capabilities-title {
  color: var(--muted);
  font-weight: 650;
}

.time-entry-fields .account-capabilities label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(124, 198, 224, 0.10);
  color: var(--text);
  font-weight: 650;
}

.time-entry-fields .account-capabilities .inline-checkbox {
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 0;
}

.property-drawer .section-header {
  align-items: center;
  margin-bottom: 10px;
}

.work-activity-section {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(118, 174, 195, 0.08);
}

.work-activity-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.work-activity-section > summary::-webkit-details-marker { display: none; }

.work-activity-section > summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  color: var(--muted);
  font-size: 22px;
}

.work-activity-section[open] > summary::after { content: "−"; }
.work-activity-section > summary span { color: var(--text); font-weight: 750; }
.work-activity-section > summary small { color: var(--muted); font-size: 12px; }

.work-activity-body {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
}

.work-contributor-list {
  display: grid;
  gap: 6px;
}

.work-contributor-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(139, 202, 224, 0.08);
}

.work-contributor-list strong { color: var(--text); }

.work-activity-timeline {
  display: grid;
  gap: 11px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.work-activity-timeline > div {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
}

.work-activity-timeline > div > div { display: grid; gap: 2px; }
.work-activity-timeline strong { color: var(--text); font-size: 13px; line-height: 1.35; }
.work-activity-timeline small { color: var(--muted); font-size: 11px; }

.work-activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: rgba(166, 205, 220, 0.65);
}

.work-activity-dot.time { background: rgba(77, 205, 145, 0.9); }

.work-activity-delete {
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(174, 204, 215, 0.46);
  cursor: pointer;
}

.work-activity-delete .button-icon {
  width: 15px;
  height: 15px;
}

.work-activity-delete:hover,
.work-activity-delete:focus-visible {
  background: rgba(255, 125, 140, 0.08);
  color: var(--danger);
}

.work-activity-delete:focus-visible {
  outline: 1px solid rgba(255, 125, 140, 0.46);
  outline-offset: 1px;
}

.bills-year-wrap th:first-child,
.bills-year-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.bills-year-wrap th:first-child {
  z-index: 3;
}

.projection-canvas {
  max-width: 100%;
  height: 400px;
  cursor: crosshair;
}

.readout-list {
  display: grid;
  gap: 10px;
}

.compact-readout-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
}

#investmentProjectionReadouts.compact-readout-list,
#retirementIncomeReadouts.compact-readout-list,
#retirementCoverageReadouts.compact-readout-list {
  grid-template-columns: 1fr;
  gap: 0;
}

.readout-group {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.readout-group:last-child {
  border-bottom: 0;
}

.readout-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.readout-group-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
}

.readout-group .readout {
  border-bottom: 0;
}

.readout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.readout:last-child {
  border-bottom: 0;
}

.readout span {
  color: var(--muted);
  font-weight: 500;
}

#timeReadouts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 18px;
}

#timeReadouts .readout {
  padding: 10px 0;
}

#latestSnapshot.readout-list {
  gap: 0;
}

#latestSnapshot .readout {
  gap: 10px;
  padding: 8px 0;
}

#latestSnapshot .readout span {
  font-size: 13px;
  line-height: 1.25;
}

#latestSnapshot .readout strong {
  font-size: 15px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
}

.readout-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.info-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  border: 1px solid #7a7a7a;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  padding: 0;
  overflow: visible;
}

.info-button:hover,
.info-button:focus-visible {
  border-color: var(--accent);
  background: transparent;
  color: var(--text);
  outline: none;
}

.info-button::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 60;
  top: 28px;
  left: 50%;
  width: min(340px, 70vw);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: rgba(9, 27, 39, 0.96);
  box-shadow: 0 12px 26px var(--shadow);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.info-button::before {
  content: "";
  position: absolute;
  z-index: 61;
  top: 23px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: rgba(9, 27, 39, 0.96);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity 120ms ease;
}

.info-button:hover::after,
.info-button:focus-visible::after,
.info-button:hover::before,
.info-button:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.info-button:hover::before,
.info-button:focus-visible::before {
  transform: translateX(-50%) rotate(45deg);
}

.readout strong {
  font-size: 19px;
}

.readout strong em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.compact-readout-list .readout {
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 86px;
  padding: 14px 0;
}

.compact-readout-list .readout-group .readout {
  min-height: 0;
  padding: 6px 0;
}

.compact-readout-list .readout strong {
  font-size: 18px;
}

.drift-readout span {
  display: grid;
  gap: 4px;
}

.drift-readout em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.insight-bars {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.insight-bar-row {
  display: grid;
  gap: 8px;
}

.insight-bar-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-weight: 800;
}

.insight-bar-row strong {
  color: var(--text);
}

.insight-bar-track {
  height: 14px;
  overflow: hidden;
  background: rgba(8, 26, 37, 0.70);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}

.insight-bar-track span {
  display: block;
  height: 100%;
  background: var(--cash);
  border-radius: inherit;
}

.affordability-status-banner {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0 13px;
  border-bottom: 1px solid var(--line-soft);
}

.affordability-status-light {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(221, 255, 237, 0.62);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(72, 216, 139, 0.10), 0 0 14px rgba(72, 216, 139, 0.42);
}

.affordability-status-banner > div {
  display: grid;
  gap: 2px;
}

.affordability-status-banner strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
}

.affordability-status-banner span:not(.affordability-status-light) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.affordability-status-banner.cash-warning .affordability-status-light {
  border-color: rgba(255, 235, 197, 0.70);
  background: var(--planning);
  box-shadow: 0 0 0 5px var(--planning-soft), 0 0 14px rgba(239, 180, 92, 0.40);
}

.affordability-status-banner.cash-danger .affordability-status-light {
  border-color: rgba(255, 222, 226, 0.70);
  background: var(--danger);
  box-shadow: 0 0 0 5px var(--debt-soft), 0 0 14px rgba(255, 126, 141, 0.42);
}

#insights.panel {
  padding: 0;
}

#insights .trend-layout {
  gap: 10px;
  margin-bottom: 10px;
}

#insights .chart-panel,
#insights .table-panel {
  padding: 16px;
}

#insights .section-header {
  margin-bottom: 7px;
}

#insights .section-header.compact {
  margin-top: 12px;
}

#insights .projection-canvas {
  height: 390px;
}

.affordability-chart-header {
  align-items: end;
}

.affordability-chart-header > div:first-child {
  display: grid;
  gap: 2px;
}

.affordability-chart-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}

.affordability-chart-scale-tabs button {
  min-width: 48px;
}

.affordability-range-popover > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 5px 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.affordability-range-popover[open] > summary,
.affordability-range-popover > summary:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.affordability-range-panel {
  width: min(330px, calc(100vw - 40px));
  gap: 11px;
  padding: 14px;
}

.affordability-range-heading {
  display: grid;
  gap: 3px;
}

.affordability-range-heading strong {
  color: var(--text);
  font-size: 13px;
}

.affordability-range-heading span,
.affordability-range-status {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.affordability-range-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.affordability-range-panel .affordability-range-inputs label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.affordability-currency-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 36px;
  padding-left: 10px;
  overflow: hidden;
  border: 1px solid rgba(145, 193, 211, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.affordability-currency-input > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.affordability-range-panel .affordability-currency-input input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px 6px 3px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.affordability-range-status {
  min-height: 15px;
  margin: 0;
}

.affordability-range-status.warning {
  color: #efbd68;
}

.affordability-range-panel > button {
  width: 100%;
}

@media (max-width: 700px) {
  .affordability-chart-header {
    align-items: flex-start;
  }

  .affordability-chart-header-actions {
    flex-wrap: wrap;
  }
}

.affordability-chart-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.affordability-chart-info .info-button::before,
.affordability-chart-info .info-button::after {
  display: none;
}

.affordability-chart-info-panel {
  right: auto;
  left: 0;
  width: min(310px, calc(100vw - 40px));
  gap: 4px;
}

.affordability-chart-info-panel > .planning-info-summary > strong {
  color: var(--text);
  font-size: 13px;
}

.affordability-chart-info-panel > .planning-info-summary > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.affordability-chart-header > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.affordability-calculation-popover {
  z-index: 16;
}

.affordability-calculation-panel {
  width: min(610px, calc(100vw - 40px));
  max-height: min(680px, calc(100vh - 150px));
  overflow-y: auto;
  gap: 12px;
}

.affordability-calculation-panel h3 {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.affordability-calculation-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.affordability-calculation-flow span {
  position: relative;
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: rgba(8, 29, 41, 0.46);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}

.affordability-calculation-flow span:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -7px;
  z-index: 1;
  color: var(--muted);
  font-weight: 900;
}

.affordability-calculation-inputs,
.affordability-formulas {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.affordability-calculation-inputs > div,
.affordability-formulas > div {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid var(--line-soft);
}

.affordability-calculation-inputs span,
.affordability-formulas small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.affordability-calculation-inputs strong,
.affordability-formulas strong {
  color: var(--text);
  font-size: 13px;
}

.affordability-formulas > div {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 0;
}

.affordability-formulas > div > span {
  display: grid;
  gap: 2px;
}

.affordability-cash-allocation {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.affordability-allocation-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.affordability-allocation-header strong {
  color: var(--text);
  font-size: 14px;
}

.affordability-allocation-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.affordability-allocation-track {
  display: flex;
  height: 13px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(6, 24, 35, 0.72);
}

.affordability-allocation-track span {
  display: block;
  height: 100%;
}

.affordability-allocation-reserve {
  background: var(--cash);
}

.affordability-allocation-available {
  background: var(--accent);
}

.affordability-cash-allocation.has-reserve-shortfall .affordability-allocation-reserve {
  background: var(--danger);
}

.affordability-cash-equation {
  display: grid;
  grid-template-columns: repeat(3, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.affordability-cash-equation > div {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 8px;
  min-width: 118px;
}

.affordability-cash-equation b {
  position: absolute;
  left: -11px;
  color: var(--muted);
  font-size: 14px;
}

.affordability-cash-equation span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.affordability-cash-equation strong {
  color: var(--text);
  font-size: 13px;
}

.affordability-cash-equation em {
  align-self: center;
  color: var(--danger);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.scenario-control-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 38, 51, 0.62);
}

#insights .scenario-control-panel {
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 0;
  padding: 8px 10px;
}

.scenario-control-panel > * {
  min-width: 0;
}

.scenario-control-panel strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 18px;
}

#insights .scenario-control-panel strong {
  margin-bottom: 2px;
  font-size: 14px;
}

.scenario-control-panel span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

#insights .scenario-control-panel span {
  font-size: 12px;
  line-height: 1.25;
}

.scenario-control {
  display: grid;
  grid-template-columns: 38px minmax(86px, 112px) 38px;
  gap: 10px;
  align-items: center;
  justify-content: start;
  min-width: 0;
}

#insights .scenario-control {
  grid-template-columns: 32px minmax(82px, 92px) 32px;
  gap: 6px;
}

#insights .scenario-control .compact-button {
  min-height: 32px;
  padding: 5px 8px;
}

.scenario-number-input {
  width: 100%;
  max-width: 118px;
  min-width: 0;
}

#insights .scenario-number-input {
  max-width: 86px;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 14px;
}

.coverage-bars {
  display: grid;
  gap: 16px;
}

.coverage-bar-row {
  display: grid;
  gap: 8px;
}

.coverage-bar-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-weight: 800;
}

.coverage-bar-row strong {
  color: var(--text);
}

.coverage-bar-track {
  display: flex;
  height: 22px;
  overflow: hidden;
  background: rgba(8, 26, 37, 0.70);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}

.coverage-bar-track span {
  display: block;
  height: 100%;
}

.coverage-fill-spending {
  background: var(--planning);
}

.coverage-fill-social {
  background: var(--cash);
}

.coverage-fill-gap {
  background: var(--investment);
}

.timer-column {
  display: grid;
  justify-self: start;
  width: min(100%, 460px);
}

.time-side-column {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 18px;
  align-self: stretch;
  align-items: stretch;
  min-width: 0;
}

.time-side-column > .table-panel {
  min-width: 0;
  height: 100%;
}

.timer-panel {
  display: grid;
  gap: 16px;
  width: 100%;
  height: 100%;
}

#timeTracking .timer-panel {
  padding-top: 6px;
  overflow: hidden;
}

.timer-console {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1.28fr);
  gap: 18px;
  align-items: stretch;
}

#timeTracking .timer-console {
  grid-template-columns: minmax(0, 1fr);
}

.timer-context-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
}

#timeTracking .timer-form.timer-inline-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto) minmax(118px, 1fr);
  gap: 10px;
  min-height: 0;
}

#timeTracking .timer-form.timer-inline-form .timer-field-full,
#timeTracking .timer-form.timer-inline-form .timer-description-field {
  grid-column: 1 / -1;
}

#timeTracking .timer-form.timer-inline-form .timer-description-field {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.timer-inline-form label {
  gap: 5px;
  font-size: 13px;
  font-weight: 750;
}

.timer-inline-form select,
.timer-inline-form textarea {
  min-width: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

#timeTracking .timer-form.timer-inline-form textarea {
  height: 100%;
  min-height: 76px;
  resize: vertical;
}

.timer-context-panel .timer-context-summary {
  display: none;
}

@media (max-width: 620px) {
  #timeTracking .timer-form.timer-inline-form {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  #timeTracking .timer-form.timer-inline-form .timer-field-full,
  #timeTracking .timer-form.timer-inline-form .timer-description-field {
    grid-column: auto;
  }

  #timeTracking .timer-form.timer-inline-form .timer-description-field {
    grid-template-rows: auto;
  }

  #timeTracking .timer-form.timer-inline-form textarea {
    height: auto;
  }
}

.time-side-column > .table-panel:last-child {
  align-self: stretch;
  width: 100%;
}

.time-summary-header {
  align-items: center;
}

.time-summary-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.time-summary-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

#timeSummaryRange {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.time-summary-tabs {
  flex: 0 0 auto;
  padding: 2px;
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(7, 26, 38, 0.56);
}

.time-summary-tabs button {
  min-height: 25px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1;
}

.time-summary-panel #timeReadouts {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.time-summary-group {
  display: grid;
  gap: 2px;
  padding: 11px 14px 6px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 17px;
  background: rgba(26, 56, 70, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.time-summary-group > h3 {
  margin: 0;
  color: rgba(172, 199, 210, 0.74);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.time-summary-group-body {
  display: grid;
}

.time-summary-group.behind {
  border-color: rgba(239, 158, 73, 0.28);
  background: linear-gradient(135deg, rgba(108, 70, 35, 0.20), rgba(26, 56, 70, 0.42) 54%);
}

.time-summary-group.behind > h3 {
  color: rgba(245, 184, 112, 0.86);
}

.time-goal-readout {
  row-gap: 8px;
}

.time-plan-readout strong {
  color: var(--text);
}

.time-plan-readout > span {
  align-self: center;
  font-size: 14px;
  font-weight: 650;
}

.time-plan-readout > strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.time-plan-value-suffix {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.time-plan-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 7px;
  margin-top: 0;
}

.time-plan-detail {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid rgba(153, 210, 228, 0.10);
  border-radius: 10px;
  background: rgba(86, 139, 162, 0.07);
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.time-plan-detail small {
  color: rgba(177, 197, 207, 0.72);
  font-size: inherit;
  font-weight: 600;
  line-height: 1.15;
}

.time-plan-detail b {
  color: rgba(215, 232, 239, 0.82);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.2;
}

.time-goal-progress {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(153, 210, 228, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(86, 139, 162, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.time-goal-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: rgba(68, 207, 139, 0.82);
  box-shadow: 0 0 8px rgba(68, 207, 139, 0.24);
  transition: width 220ms ease;
}

.time-plan-behind > strong,
.time-plan-behind .time-plan-detail b {
  color: rgba(255, 194, 125, 0.96);
}

.time-plan-behind .time-goal-progress-fill {
  background: rgba(240, 158, 73, 0.90);
  box-shadow: 0 0 8px rgba(240, 158, 73, 0.28);
}

.time-plan-ahead > strong {
  color: rgba(116, 224, 171, 0.96);
}

.time-goal-progress-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.time-goal-progress-ticks i {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: rgba(224, 244, 250, 0.48);
  box-shadow: 0 0 0 1px rgba(5, 26, 37, 0.16);
}

.time-goal-progress-ticks i.is-filled {
  background: rgba(5, 42, 32, 0.72);
  box-shadow: 0 0 0 1px rgba(5, 42, 32, 0.10);
}

.timer-context-header {
  align-items: center;
  margin-bottom: 0;
}

.timer-context-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.timer-context-title-row h2 {
  margin: 0;
}

#activeTimerStatus {
  display: inline-grid;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(157, 190, 204, 0.22);
  border-radius: 999px;
  background: rgba(8, 27, 39, 0.44);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.timer-context-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.timer-context-item {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(157, 190, 204, 0.16);
  border-radius: var(--radius-small);
  background: rgba(8, 28, 40, 0.34);
}

.timer-context-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.timer-context-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.timer-context-item strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.timer-context-empty {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(157, 190, 204, 0.22);
  border-radius: var(--radius-small);
  color: var(--muted);
  font-weight: 700;
}

.timer-settings-panel {
  width: min(520px, calc(100vw - 40px));
}

.timer-settings-panel label {
  grid-template-columns: 92px minmax(0, 1fr);
}

.timer-settings-panel textarea {
  min-height: 92px;
  border-radius: 16px;
}

.timer-core {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 9px;
  justify-self: center;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(9, 30, 43, 0.64);
  overflow: hidden;
  transition: background 600ms ease, box-shadow 600ms ease;
}

.timer-core.journey-panel {
  background:
    radial-gradient(circle at 50% 48%, rgba(94, 185, 211, 0.15), transparent 45%),
    linear-gradient(155deg, rgba(14, 53, 72, 0.9), rgba(7, 25, 38, 0.96));
  box-shadow: inset 0 0 90px rgba(9, 32, 46, 0.42);
}

.timer-core.journey-panel[data-journey-tone="morning"] {
  background: radial-gradient(circle at 28% 76%, rgba(248, 183, 116, 0.22), transparent 42%), linear-gradient(155deg, #194b64, #0a2335 72%);
}

.timer-core.journey-panel[data-journey-tone="evening"] {
  background: radial-gradient(circle at 72% 76%, rgba(245, 149, 91, 0.24), transparent 43%), linear-gradient(155deg, #243f62, #101f35 72%);
}

.timer-core.journey-panel[data-journey-tone="night"] {
  background: radial-gradient(circle at 52% 28%, rgba(99, 121, 213, 0.18), transparent 44%), linear-gradient(155deg, #142846, #071522 72%);
}

.timer-range-tabs,
.timer-ring-mode-toggle {
  position: absolute;
  top: 10px;
  z-index: 6;
  padding: 1px;
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(7, 26, 38, 0.72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.timer-range-tabs {
  right: 10px;
}

.timer-ring-mode-toggle {
  left: 10px;
}

.timer-expand-button {
  position: absolute;
  top: 43px;
  right: 12px;
  z-index: 7;
  display: grid;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(190, 216, 226, 0.62);
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.timer-expand-icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timer-expand-icon-inward {
  display: none;
}

.timer-expand-button.active .timer-expand-icon-outward {
  display: none;
}

.timer-expand-button.active .timer-expand-icon-inward {
  display: inline;
}

.timer-expand-button:hover,
.timer-expand-button:focus-visible,
.timer-expand-button.active {
  background: transparent;
  color: var(--text);
}

.timer-expand-button:focus-visible {
  outline: 1px solid rgba(170, 224, 238, 0.58);
  outline-offset: 2px;
}

.timer-expand-button:active {
  transform: scale(0.94);
}

.timer-range-tabs button,
.timer-ring-mode-toggle button {
  min-height: 21px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
}

.timer-analog {
  --timer-hour-angle: 0deg;
  --timer-minute-angle: 0deg;
  --timer-day-progress: 0;
  --timer-overtime-progress: 0;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  min-height: 350px;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  transition: background 600ms ease, box-shadow 600ms ease;
}

#timeTracking .timer-analog { top: 10px; }

.journey-atmosphere,
.journey-caption,
.journey-celebration {
  display: none;
}

.timer-analog.journey-view {
  background: transparent;
  box-shadow: none;
}

.timer-analog.journey-view[data-journey-tone="morning"] {
  background: transparent;
}

.timer-analog.journey-view[data-journey-tone="evening"] {
  background: transparent;
}

.timer-analog.journey-view[data-journey-tone="night"] {
  background: transparent;
}

.journey-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.journey-view .journey-atmosphere {
  display: block;
}

.journey-atmosphere span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(218, 241, 248, 0.58);
  box-shadow: 62px 28px rgba(218, 241, 248, 0.34), -86px 67px rgba(218, 241, 248, 0.28), 104px 112px rgba(218, 241, 248, 0.24);
  opacity: calc(.16 + var(--timer-day-progress) * .68);
}

.journey-atmosphere span:nth-child(1) { left: 24%; top: 23%; }
.journey-atmosphere span:nth-child(2) { right: 28%; top: 18%; transform: scale(.7); }
.journey-atmosphere span:nth-child(3) { left: 47%; bottom: 23%; transform: scale(.55); }

.journey-view[data-journey-phase="momentum"] .timer-analog-face,
.journey-view[data-journey-phase="halfway"] .timer-analog-face {
  filter: drop-shadow(0 0 22px rgba(93, 199, 220, 0.18));
}

.journey-view[data-journey-phase="golden"] .timer-analog-face,
.journey-view[data-journey-phase="almost"] .timer-analog-face,
.journey-view[data-journey-phase="complete"] .timer-analog-face {
  filter: drop-shadow(0 0 28px rgba(246, 190, 91, 0.28));
}

.journey-view[data-journey-phase="complete"] .timer-hand,
.journey-view[data-journey-phase="complete"] .timer-pivot {
  opacity: 0.12;
}

.journey-view .timer-day-ring-progress {
  stroke: rgba(246, 194, 96, 0.9);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 8px rgba(246, 194, 96, 0.30));
}

.journey-caption {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 5;
  gap: 2px;
  justify-items: center;
  color: rgba(240, 248, 251, 0.92);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.journey-view .journey-caption { display: grid; }
.journey-caption strong { font-size: 13px; letter-spacing: .02em; }
.journey-caption span { color: rgba(191, 216, 226, 0.78); font-size: 11px; font-weight: 650; }

.journey-view[data-journey-phase="complete"] .journey-caption {
  top: 50%;
  gap: 4px;
  text-shadow: 0 3px 20px rgba(5, 20, 30, 0.82);
}

.journey-view[data-journey-phase="complete"] .journey-caption strong {
  color: #fff3cb;
  font-size: 18px;
}

.journey-celebration {
  position: absolute;
  inset: 0;
  z-index: 7;
  place-items: center;
  color: #fff3cb;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 4px 24px rgba(246, 186, 75, .66);
  pointer-events: none;
  opacity: 0;
}

.journey-view .journey-celebration.is-celebrating {
  display: grid;
  animation: journey-celebration 5.2s ease both;
}

.journey-view:has(.journey-celebration.is-celebrating) .timer-analog-face {
  opacity: 0.16;
  filter: blur(0.5px);
}

.journey-view:has(.journey-celebration.is-celebrating) .journey-caption {
  opacity: 0;
}

@keyframes journey-celebration {
  0% { opacity: 0; transform: scale(.96); background: transparent; }
  18%, 72% { opacity: 1; transform: scale(1); background: radial-gradient(circle, rgba(246, 190, 86, .18), transparent 52%); }
  100% { opacity: 0; transform: scale(1.02); background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .timer-analog,
  .timer-analog-face { transition: none; }
  .journey-view .journey-celebration.is-celebrating { animation: journey-celebration-reduced 2.8s linear both; }
  @keyframes journey-celebration-reduced { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
}

.timer-analog-face {
  position: relative;
  width: clamp(268px, 94%, 372px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(226, 242, 249, 0.10) 0 2px, transparent 3px),
    radial-gradient(circle at center, rgba(36, 98, 116, 0.13), rgba(8, 29, 42, 0.03) 64%, transparent 65%);
  transition: filter 240ms ease, opacity 240ms ease;
}

.timer-analog-face::before,
.timer-analog-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  display: none;
}

.timer-analog-face::before {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(244, 250, 253, 0.72) 0deg 0.9deg,
    transparent 0.9deg 6deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 81%, #000 82% 84%, transparent 85% 100%);
  mask: radial-gradient(circle, transparent 0 81%, #000 82% 84%, transparent 85% 100%);
}

.timer-analog-face::after {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(250, 253, 255, 0.92) 0deg 2.6deg,
    transparent 2.6deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 77% 86%, transparent 87% 100%);
  mask: radial-gradient(circle, transparent 0 76%, #000 77% 86%, transparent 87% 100%);
}

.timer-day-ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(88, 184, 239, 0.18));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.timer-day-ring-track,
.timer-day-ring-progress,
.timer-overtime-ring-track,
.timer-overtime-ring-progress {
  fill: none;
  pointer-events: none;
}

.timer-day-ring-track {
  stroke: rgba(94, 147, 168, 0.22);
  stroke-width: 1.35;
}

.timer-day-ring-progress {
  stroke: rgba(98, 205, 157, 0.82);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 263.89;
  stroke-dashoffset: 263.89;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(89, 210, 154, 0.24));
}

.timer-overtime-ring-track {
  stroke: rgba(92, 156, 194, 0.15);
  stroke-width: 1.05;
}

.timer-overtime-ring-progress {
  stroke: rgba(103, 190, 238, 0.78);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 226.19;
  stroke-dashoffset: 226.19;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(88, 184, 239, 0.24));
}

.timer-session-segments {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.timer-session-segment {
  fill: none;
  stroke: var(--timer-session-color);
  stroke-width: 1.25;
  stroke-linecap: butt;
  pointer-events: stroke;
  cursor: help;
  transition: filter 120ms ease, stroke-width 120ms ease;
}

.timer-session-segment.timer-session-overtime {
  stroke-width: 1;
}

.timer-session-segment.is-active-session {
  filter: drop-shadow(0 0 7px var(--timer-session-color));
}

.timer-session-segment:hover {
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px var(--timer-session-color));
}

.timer-session-segment.label-highlighted {
  stroke-width: 2;
  filter: drop-shadow(0 0 10px var(--timer-session-color));
}

.timer-session-segment.timer-session-overtime:hover {
  stroke-width: 1.45;
}

.timer-analog.has-day-progress .timer-day-ring-progress {
  opacity: 1;
}

.timer-analog.has-overtime-progress .timer-overtime-ring-progress {
  opacity: 1;
}

.timer-analog.session-ring-mode .timer-session-segments {
  opacity: 1;
  pointer-events: auto;
}

.timer-analog.session-ring-mode .timer-day-ring-progress,
.timer-analog.session-ring-mode .timer-overtime-ring-progress {
  opacity: 0;
}

.timer-session-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 3px;
  width: max-content;
  max-width: min(260px, calc(100% - 20px));
  padding: 8px 10px;
  border: 1px solid rgba(170, 224, 238, 0.22);
  border-radius: 8px;
  background: rgba(5, 20, 30, 0.96);
  box-shadow: 0 10px 26px rgba(0, 8, 14, 0.32);
  color: var(--text);
  pointer-events: none;
}

.timer-session-tooltip[hidden] {
  display: none;
}

.timer-session-tooltip strong,
.timer-session-tooltip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.timer-session-tooltip strong {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.timer-session-tooltip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.timer-expanded-labels {
  display: none;
}

#timeTracking.clock-expanded .time-side-column {
  display: none;
}

#timeTracking.clock-expanded > .section-header {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 4px;
}

#timeTracking.clock-expanded > .section-header > div:first-child {
  display: none;
}

#timeTracking.clock-expanded .time-tracking-header-actions {
  max-width: 100%;
}

#timeTracking.clock-expanded .timer-range-tabs {
  display: none;
}

#timeTracking.clock-expanded #timeEntriesPanel {
  display: contents;
}

#timeTracking.clock-expanded #timeEntriesPanel > :not(.time-entry-detail-panel) {
  display: none;
}

main:has(#timeTracking.clock-expanded) {
  grid-template-columns: minmax(0, 1fr);
}

main:has(#timeTracking.clock-expanded) > .tabs {
  display: none;
}

#timeTracking.clock-expanded {
  grid-column: 1 / -1;
}

#timeTracking.clock-expanded .compact-layout {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

#timeTracking.clock-expanded .timer-column {
  justify-self: center;
  width: min(100%, 1180px);
}

#timeTracking.clock-expanded .timer-panel {
  min-height: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#timeTracking.clock-expanded .timer-core {
  grid-template-rows: minmax(540px, 1fr);
  width: 100%;
  min-height: clamp(620px, calc(100vh - 160px), 820px);
  margin: 0;
  padding: 18px 26px 26px;
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  overflow: hidden;
}

#timeTracking.clock-expanded .timer-analog {
  grid-area: 1 / 1;
  top: 0;
  min-height: clamp(430px, calc(100vh - 300px), 620px);
  overflow: visible;
}

#timeTracking.clock-expanded .timer-analog-face {
  width: clamp(380px, min(52vw, calc(100vh - 310px)), 590px);
  background: transparent;
}

#timeTracking.clock-expanded .timer-display {
  z-index: 4;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  min-height: 0;
  color: rgba(232, 246, 251, 0.58);
  font-size: 52px;
  font-weight: 300;
  opacity: 0.72;
  animation: none !important;
  pointer-events: none;
  transform: translateY(clamp(88px, 11vw, 132px));
  text-shadow:
    0 0 8px rgba(190, 235, 252, 0.24),
    0 0 22px rgba(91, 190, 231, 0.14);
}

#timeTracking.clock-expanded .timer-analog.journey-view:not([data-journey-phase="complete"]) .journey-caption {
  top: calc(62% - 20px);
  gap: 4px;
}

#timeTracking.clock-expanded .timer-analog.journey-view .journey-caption strong,
#timeTracking.clock-expanded .timer-analog.journey-view .journey-caption span {
  line-height: 1.2;
}

#timeTracking.clock-expanded .timer-actions {
  display: none;
}

#timeTracking.clock-expanded .timer-expand-button {
  top: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

@media (max-width: 720px) {
  #timeTracking.clock-expanded > .section-header {
    align-items: stretch;
    flex-direction: row;
    top: 5px;
  }

  #timeTracking.clock-expanded .time-tracking-header-actions {
    width: 100%;
    justify-content: center;
  }

  #timeTracking.clock-expanded .time-period-controls {
    flex: 1 1 220px;
  }
}

#timeTracking.clock-expanded .timer-expand-button:active {
  transform: translateX(-50%) scale(0.94);
}

#timeTracking.clock-expanded .timer-expanded-labels {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  pointer-events: none;
}

.timer-expanded-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.timer-expanded-connectors polyline {
  fill: none;
  stroke: var(--expanded-session-color);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  opacity: 0.54;
}

.timer-expanded-label {
  position: absolute;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--expanded-session-color) 12%, transparent);
  border-radius: 12px;
  background: rgba(8, 29, 40, 0.18);
  box-shadow: none;
  color: var(--text);
  font: inherit;
  line-height: 1.15;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

button.timer-expanded-label {
  cursor: pointer;
}

.timer-expanded-label:hover,
.timer-expanded-label:focus-visible {
  border-color: color-mix(in srgb, var(--expanded-session-color) 22%, transparent);
  background: rgba(10, 34, 46, 0.28);
}

.timer-expanded-label.side-left {
  justify-items: end;
  text-align: right;
}

.timer-expanded-label.side-right {
  justify-items: start;
  text-align: left;
}

.timer-expanded-label strong {
  width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--expanded-session-color) 72%, white);
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-expanded-label-meta {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.timer-expanded-checklist-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: color-mix(in srgb, var(--expanded-session-color) 34%, var(--muted));
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-expanded-label-time {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-expanded-label.side-left .timer-expanded-label-meta {
  justify-content: flex-end;
}

.timer-expanded-label:hover strong,
.timer-expanded-label:focus-visible strong {
  color: white;
  text-shadow: 0 0 12px var(--expanded-session-color);
}

.timer-expanded-label:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--expanded-session-color) 56%, transparent);
  outline-offset: 4px;
}

.timer-expanded-label-empty {
  position: absolute;
  top: 74px;
  left: 50%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transform: translateX(-50%);
}

#timeTracking.clock-expanded .timer-expanded-labels.compact {
  inset: auto 18px 126px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  pointer-events: auto;
}

.timer-expanded-labels.compact .timer-expanded-label {
  position: static;
  width: auto !important;
  padding: 5px 8px;
  border-left: 2px solid var(--expanded-session-color);
  border-radius: 0 4px 4px 0;
  background: transparent;
  text-align: left;
  transform: none;
}

#timeTracking:not(.clock-expanded) .timer-console {
  height: 100%;
}

#timeTracking:not(.clock-expanded) .timer-core {
  height: calc(100% + 22px);
  min-height: 0;
}

@media (max-width: 800px) {
  #timeTracking.clock-expanded .timer-core {
    grid-template-rows: minmax(560px, 1fr);
    min-height: 760px;
    padding: 14px;
  }

  #timeTracking.clock-expanded .timer-analog {
    min-height: 560px;
    padding-top: 62px;
    place-items: start center;
  }

  #timeTracking.clock-expanded .timer-analog-face {
    width: min(82vw, 390px);
  }

  #timeTracking.clock-expanded .timer-display {
    font-size: 44px;
    transform: translateY(88px);
  }

  #timeTracking.clock-expanded .timer-expanded-labels.compact {
    inset: auto 12px 120px;
  }
}

.timer-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 3;
  display: block;
  border-radius: 999px;
  background: rgba(235, 246, 252, 0.94);
  box-shadow: 0 0 18px rgba(215, 242, 252, 0.16);
  transform-origin: 50% 100%;
  transition: opacity 240ms ease;
}

.timer-hour-hand {
  width: 6px;
  height: 24%;
  transform: translateX(-50%) rotate(var(--timer-hour-angle));
}

.timer-minute-hand {
  width: 4px;
  height: 34%;
  transform: translateX(-50%) rotate(var(--timer-minute-angle));
}

.timer-pivot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(8, 31, 43, 0.82);
  border-radius: 50%;
  background: rgba(247, 252, 255, 0.98);
  box-shadow: 0 0 18px rgba(220, 246, 255, 0.22);
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease;
}

.timer-analog.is-running .timer-pivot {
  box-shadow: 0 0 0 7px rgba(72, 216, 139, 0.08), 0 0 22px rgba(220, 246, 255, 0.26);
}

.timer-display {
  min-height: 58px;
  display: grid;
  place-items: center;
  color: rgba(245, 252, 255, 0.98);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(-6px);
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.92),
    0 0 10px rgba(191, 235, 251, 0.48),
    0 0 24px rgba(91, 190, 231, 0.28),
    0 0 42px rgba(72, 216, 139, 0.12);
  transition: color 240ms ease, text-shadow 400ms ease;
}

.timer-core:has(.timer-analog.is-running) .timer-display {
  color: rgba(250, 254, 255, 1);
  animation: timer-display-glow 3.2s ease-in-out infinite;
}

@keyframes timer-display-glow {
  0%,
  100% {
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.94),
      0 0 11px rgba(190, 235, 252, 0.54),
      0 0 26px rgba(87, 193, 236, 0.31),
      0 0 44px rgba(72, 216, 139, 0.14);
  }

  50% {
    text-shadow:
      0 0 3px rgba(255, 255, 255, 1),
      0 0 15px rgba(210, 244, 255, 0.70),
      0 0 34px rgba(94, 205, 247, 0.42),
      0 0 58px rgba(72, 216, 139, 0.20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timer-core:has(.timer-analog.is-running) .timer-display {
    animation: none;
  }
}

.timer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.timer-actions button {
  min-width: 0;
  white-space: nowrap;
}

.timer-actions .timer-action-loading {
  cursor: wait;
}

.timer-action-spinner {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(225, 241, 247, 0.28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: timer-action-spin 720ms linear infinite;
}

@keyframes timer-action-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .timer-action-spinner { animation-duration: 1.8s; }
}

.timer-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.timer-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  padding: 10px 12px;
  text-align: center;
  outline: none;
}

.time-entries-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  align-items: start;
}

#timeEntriesView .transactions-wrap {
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow: visible;
}

.real-estate-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.planning-events-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.time-entry-detail {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: var(--glass-panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 12, 20, 0.18);
}

.time-entry-detail.property-drawer {
  padding: 14px;
  background: var(--theme-drawer-bg);
  border-color: rgba(170, 224, 238, 0.20);
  box-shadow: 0 18px 42px rgba(0, 10, 18, 0.44);
}

.drawer-meta {
  display: block;
  margin: -2px 0 12px;
  color: var(--muted);
  font-weight: 550;
}

.time-entry-fields {
  display: grid;
  gap: 14px;
}

.time-entry-fields label,
.time-entry-field-grid label {
  display: grid;
  gap: 8px;
}

.time-entry-fields input,
.time-entry-fields select,
.time-entry-fields textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background-color: var(--field-bg);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.date-picker-field {
  position: relative;
  display: block;
  width: 100%;
}

.date-picker-field > input[type="text"] {
  padding-right: 52px;
}

.native-date-picker {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.date-picker-button {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent url("/assets/Icon_Calendar.png") center / contain no-repeat;
  box-shadow: none;
  transform: translateY(-50%);
}

.date-picker-button:hover,
.date-picker-button:focus,
.date-picker-button:active {
  background: transparent url("/assets/Icon_Calendar.png") center / contain no-repeat;
  box-shadow: none;
}

.time-entry-fields textarea {
  min-height: 128px;
  border-radius: 16px;
  resize: vertical;
}

.time-entry-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.time-entry-detail-readouts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.real-estate-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.selected-row td {
  box-shadow: inset 0 0 0 9999px rgba(72, 216, 139, 0.10);
}

.time-entry-detail-row {
  cursor: pointer;
}

.entry-group-toggle {
  display: inline-grid;
  box-sizing: border-box;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(173, 229, 242, 0.18);
  border-radius: 50%;
  background: rgba(173, 229, 242, 0.08);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  aspect-ratio: 1 / 1;
}

.entry-group-toggle:hover {
  background: rgba(173, 229, 242, 0.16);
}

.muted-cell {
  color: var(--muted);
}

.numeric-cell {
  text-align: right;
  white-space: nowrap;
}

.centered-cell {
  text-align: center;
}

.empty-state {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.danger-button {
  color: var(--danger);
  border-color: #8f5757;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
}

.holdings-wrap {
  max-height: 70vh;
}

.transactions-wrap {
  max-height: 70vh;
}

.import-accounts-wrap {
  margin-bottom: 12px;
}

.import-account-setup {
  margin-bottom: 14px;
}

.import-account-totals {
  margin-top: 2px;
}

.import-account-totals .section-header {
  margin-bottom: 8px;
}

.import-account-totals h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.financial-institutions-panel,
.financial-accounts-panel {
  margin-bottom: 12px;
}

.financial-institution-bars {
  display: grid;
  gap: 11px;
}

.financial-institution-row {
  display: grid;
  gap: 6px;
}

.financial-institution-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.financial-institution-row strong {
  color: var(--text);
  font-size: 14px;
}

.financial-institution-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.financial-institution-track {
  height: 11px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(6, 24, 35, 0.72);
}

.financial-institution-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cash), var(--accent));
}

.financial-accounts-wrap {
  max-height: 62vh;
}

#financialAccounts .financial-accounts-panel {
  padding: 16px;
}

#financialAccounts .financial-institutions-panel {
  padding: 16px;
}

#financialAccounts #transactionAccountsTable td {
  font-size: 14px;
}

.account-alias-section,
.account-merge-section,
.account-delete-section {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.account-alias-section h3,
.account-merge-section h3,
.account-delete-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.account-alias-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 36px;
  gap: 7px;
  align-items: center;
}

.account-alias-row .row-action {
  width: 32px;
  min-height: 32px;
}

.account-merge-section .drawer-help-text {
  margin: 0;
}

.account-review-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 20px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.account-review-summary .readout {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 0;
}

.account-review-summary .readout strong {
  font-size: 18px;
  line-height: 1.25;
}

.account-review-actions {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .account-review-summary {
    grid-template-columns: 1fr;
  }

  .account-review-summary .readout {
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1fr);
    align-items: baseline;
    border-bottom: 1px solid var(--line-soft);
  }

  .account-review-summary .readout:last-child {
    border-bottom: 0;
  }
}

.account-delete-section .drawer-help-text {
  margin: 0;
}

.account-delete-section .account-delete-blocked {
  color: var(--muted);
}

.import-account-setup summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}

.import-account-setup summary::-webkit-details-marker {
  display: none;
}

.import-field-group {
  display: contents;
}

.import-field-group[hidden],
.import-preview-actions[hidden] {
  display: none;
}

#transactionImportMonthField[hidden] {
  display: none !important;
}

.import-review-toggle-row {
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.import-review-toggle-row .panel-note {
  margin: 0;
}

.transaction-import-preview-table th:nth-child(1) { width: 13%; }
.transaction-import-preview-table th:nth-child(2) { width: 18%; }
.transaction-import-preview-table th:nth-child(3) { width: 34%; }
.transaction-import-preview-table th:nth-child(4) { width: 15%; }
.transaction-import-preview-table th:nth-child(5) { width: 20%; }

.transaction-import-preview-table td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-preview {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(170, 224, 238, 0.16);
  border-radius: var(--radius-small);
  background: rgba(8, 28, 40, 0.50);
}

.import-preview[hidden] {
  display: none;
}

.import-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.import-preview-summary div,
.import-preview-detail {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.import-preview-summary span,
.import-preview-detail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.import-preview-summary strong,
.import-preview-detail strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.import-preview-actions {
  justify-content: flex-start;
  margin-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mobile-table-meta,
.time-entry-mobile-meta {
  display: none;
}

.mobile-table-stack {
  min-width: 0;
}

.mobile-table-primary {
  display: block;
  min-width: 0;
}

.row-drag-cell {
  width: 38px;
  min-width: 38px;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center;
}

.row-drag-handle {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.row-drag-handle:hover,
.row-drag-handle:focus-visible {
  background: rgba(124, 198, 224, 0.14);
  color: var(--text);
}

.row-drag-handle:active {
  cursor: grabbing;
}

tr.row-dragging {
  opacity: 0.48;
}

tr.row-drag-before td {
  box-shadow: inset 0 2px 0 var(--accent);
}

tr.row-drag-after td {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.holdings-wrap thead th,
.transactions-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.semantic-row td:first-child {
  border-left: 3px solid var(--line-soft);
}

.cash-row td:first-child {
  border-left-color: var(--cash);
}

.investment-row td:first-child {
  border-left-color: var(--investment);
}

.home-row td:first-child {
  border-left-color: var(--home);
}

.debt-row td:first-child {
  border-left-color: var(--debt);
}

.other-row td:first-child {
  border-left-color: var(--planning);
}

.cash-row td {
  background: color-mix(in srgb, var(--cash-soft) 56%, rgba(255, 255, 255, 0.04));
}

.investment-row td {
  background: color-mix(in srgb, var(--investment-soft) 56%, rgba(255, 255, 255, 0.04));
}

.home-row td {
  background: color-mix(in srgb, var(--home-soft) 56%, rgba(255, 255, 255, 0.04));
}

.debt-row td {
  background: color-mix(in srgb, var(--debt-soft) 56%, rgba(255, 255, 255, 0.04));
}

.other-row td {
  background: color-mix(in srgb, var(--planning-soft) 56%, rgba(255, 255, 255, 0.04));
}

th,
td {
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding: 7px 9px;
  text-align: center;
  vertical-align: middle;
}

th {
  background: rgba(255, 255, 255, 0.075);
  color: rgba(243, 249, 252, 0.78);
  font-size: 13px;
  font-weight: 600;
}

td {
  background: rgba(255, 255, 255, 0.04);
}

tr:last-child td {
  border-bottom: 0;
}

td:last-child,
th:last-child {
  border-right: 0;
}

#timeEntriesTable td {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  transition: background-color 140ms ease, color 140ms ease;
}

#timeEntriesTable th {
  position: sticky;
  padding-right: 14px;
}

.table-column-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 4;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.table-column-resize-handle::after {
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: rgba(184, 221, 234, 0.16);
  content: "";
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.table-column-resize-handle:hover::after,
.table-column-resize-handle:focus-visible::after,
.table-column-resize-handle.active::after {
  background: rgba(109, 203, 237, 0.86);
  box-shadow: 0 0 0 3px rgba(78, 173, 211, 0.13);
}

.table-column-resize-handle:focus-visible {
  outline: none;
}

body.table-column-resizing,
body.table-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

@media (min-width: 721px) {
  #timeEntriesTable {
    min-width: 0;
  }
}

#timeEntriesTable th:first-child,
#timeEntriesTable td:first-child {
  border-right: 0;
}

#timeEntriesTable .time-entry-day-row td {
  border-top: 0;
  border-bottom-color: rgba(112, 194, 224, 0.22);
  background: rgba(42, 107, 132, 0.30);
  color: rgba(246, 252, 255, 0.96);
  font-weight: 700;
}

#timeEntriesTable .time-entry-day-spacer td {
  height: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

#timeEntriesTable .time-entry-project-row td {
  border-bottom-color: rgba(108, 202, 153, 0.13);
  background: rgba(48, 113, 82, 0.15);
  color: rgba(226, 242, 235, 0.88);
}

#timeEntriesTable .time-entry-detail-row td {
  border-bottom-color: rgba(255, 255, 255, 0.035);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(205, 221, 228, 0.72);
  font-size: 13px;
  font-weight: 500;
}

#timeEntriesTable .time-entry-day-row:hover td {
  background: rgba(48, 124, 151, 0.38);
}

#timeEntriesTable .time-entry-project-row:hover td {
  background: rgba(54, 132, 94, 0.21);
}

#timeEntriesTable .time-entry-detail-row:hover td {
  background: rgba(255, 255, 255, 0.048);
  color: rgba(232, 242, 246, 0.88);
}

#timeEntriesTable .time-entry-scheduled-row td {
  color: rgba(239, 211, 163, 0.82);
  background: rgba(239, 180, 92, 0.045);
}

#timeEntriesTable .time-entry-primary-cell {
  color: rgba(244, 251, 255, 0.92);
}

#timeEntriesTable .time-entry-project-row .time-entry-primary-cell {
  padding-left: 14px;
}

#timeEntriesTable .time-entry-task-cell {
  padding-left: 18px;
}

#timeEntriesTable .time-entry-session-label {
  padding-left: 30px;
  color: rgba(226, 237, 242, 0.84);
}

#timeEntriesTable .time-entry-hierarchy-title {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

#timeEntriesTable .time-entry-hierarchy-title strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#timeEntriesTable .time-entry-project-row .time-entry-hierarchy-title strong {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

#timeEntriesTable .time-entry-level-label {
  color: rgba(177, 205, 215, 0.58);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

#timeEntriesTable .time-entry-day-row .time-entry-level-label {
  color: rgba(154, 221, 244, 0.80);
}

#timeEntriesTable .time-entry-project-row .time-entry-level-label {
  color: rgba(119, 219, 164, 0.72);
}

#timeEntriesTable .time-entry-session-row .time-entry-level-label {
  color: rgba(185, 201, 208, 0.46);
}

#timeEntriesTable .time-entry-running-row td {
  border-top: 1px solid rgba(67, 178, 255, 0.72);
  border-bottom: 1px solid rgba(67, 178, 255, 0.72);
  background: rgba(20, 78, 118, 0.64);
  color: rgba(239, 250, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(67, 178, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#timeEntriesTable .time-entry-running-row td:first-child {
  border-left: 1px solid rgba(67, 178, 255, 0.72);
  box-shadow:
    inset 3px 0 0 rgba(82, 190, 255, 0.94),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#timeEntriesTable .time-entry-running-row td:last-child {
  border-right: 1px solid rgba(67, 178, 255, 0.72);
}

#timeEntriesTable .time-entry-running-row:hover td {
  background: rgba(24, 88, 132, 0.76);
  color: rgba(246, 253, 255, 0.98);
}

#timeEntriesTable .time-entry-running-row .time-entry-level-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(122, 218, 250, 0.92);
}

#timeEntriesTable .time-entry-running-row .time-entry-level-label::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(102, 214, 250);
  box-shadow: 0 0 0 4px rgba(91, 205, 244, 0.13);
  content: "";
  animation: time-entry-live-pulse 1.8s ease-in-out infinite;
}

#timeEntriesTable .time-entry-running-status {
  color: rgba(128, 221, 250, 0.96);
  font-weight: 760;
  white-space: nowrap;
}

@keyframes time-entry-live-pulse {
  50% {
    opacity: 0.5;
    transform: scale(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  #timeEntriesTable .time-entry-running-row .time-entry-level-label::before {
    animation: none;
  }
}

#timeEntriesTable .time-entry-session-billable .time-entry-amount-cell {
  color: rgba(118, 220, 162, 0.80);
}

#timeEntriesTable .time-entry-leaf-marker {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-left: 8px;
  border-left: 1px solid rgba(137, 181, 197, 0.30);
  border-bottom: 1px solid rgba(137, 181, 197, 0.30);
  border-radius: 0 0 0 6px;
  vertical-align: middle;
}

#timeEntriesTable .time-entry-leaf-marker::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(151, 193, 208, 0.72);
  content: "";
}

#timeEntriesTable .entry-group-toggle {
  width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  border: 1px solid rgba(159, 207, 221, 0.20);
  border-radius: 7px;
  background: rgba(4, 27, 38, 0.34);
  color: rgba(225, 241, 247, 0.76);
  font-size: 15px;
}

#timeEntriesTable .entry-group-toggle-nested {
  width: 23px;
  height: 23px;
  min-height: 23px;
  margin-left: 12px;
  border-color: rgba(119, 219, 164, 0.22);
  background: rgba(36, 91, 63, 0.28);
  color: rgba(142, 224, 177, 0.82);
  font-size: 13px;
}

.time-log-header {
  align-items: center;
}

.time-tracking-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.time-period-controls {
  gap: 8px;
}

.time-period-controls .time-flow-date-label {
  min-width: 34px;
  text-align: right;
}

.time-period-reset {
  min-height: 40px;
  padding: 7px 13px;
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
}

.time-log-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.time-log-header-actions > .secondary-button {
  min-height: 34px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 1;
}

.time-log-view-tabs {
  min-height: 34px;
  padding: 3px;
}

.time-log-view-tabs button {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 13px;
}

.time-period-scope-tabs {
  min-height: 34px;
  padding: 3px;
}

.time-period-scope-tabs button {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
}

.time-flow-view {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.time-flow-view[hidden] {
  display: none;
}

.time-flow-date-controls {
  display: flex;
  align-items: center;
  gap: 9px;
}

.time-flow-info span {
  right: 0;
  left: auto;
  width: min(440px, 80vw);
  transform: translateX(0) translateY(-4px);
}

.time-flow-info:hover span,
.time-flow-info:focus-visible span {
  transform: translateX(0) translateY(0);
}

.time-flow-date-label {
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 750;
}

.time-flow-date-stepper {
  grid-template-columns: 34px minmax(120px, 1fr) 34px;
  width: 188px;
  min-height: 34px;
  border-color: rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.time-flow-date-stepper:focus-within {
  border-color: rgba(170, 224, 238, 0.22);
  box-shadow: 0 0 0 2px rgba(57, 168, 255, 0.08);
}

.time-flow-date-stepper > button:first-child {
  border-right-color: rgba(255, 255, 255, 0.08);
}

.time-flow-date-stepper > button:last-child {
  border-left-color: rgba(255, 255, 255, 0.08);
}

.time-flow-date-stepper > button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  padding: 0;
  color: var(--muted);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.78;
}

.time-flow-date-stepper > button:hover:not(:disabled),
.time-flow-date-stepper > button:focus-visible {
  color: var(--text);
  opacity: 0.94;
}

.time-flow-period-button > span {
  display: block;
  line-height: 1;
  transform: translateY(-2px);
}

.time-flow-date-stepper input {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
}

.time-flow-date-stepper input::-webkit-datetime-edit {
  display: flex;
  justify-content: center;
  padding-left: 18px;
}

.time-flow-metrics {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 1px solid rgba(170, 224, 238, 0.10);
  border-bottom: 1px solid rgba(170, 224, 238, 0.10);
}

.time-flow-metrics > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid rgba(170, 224, 238, 0.08);
}

.time-flow-metrics > div:last-child {
  border-right: 0;
}

.time-flow-metrics span {
  color: rgba(177, 205, 215, 0.70);
  font-size: 12px;
  font-weight: 760;
}

.time-flow-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(243, 250, 253, 0.94);
  font-size: 18px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-flow-chart {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(170, 224, 238, 0.10);
  border-radius: var(--radius-small);
  background: rgba(7, 26, 37, 0.34);
}

.time-flow-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
}

.time-flow-scroll::-webkit-scrollbar { display: none; }

.time-flow-scroll.is-panning {
  cursor: grabbing;
  user-select: none;
}

.time-flow-canvas {
  position: relative;
  display: grid;
  min-width: calc(112px + var(--time-flow-timeline-width, 648px));
}

.time-flow-now-marker {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
}

.time-flow-now-marker::before {
  display: none;
}

.time-flow-now-marker::after {
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(119, 218, 239, 0.76), rgba(119, 218, 239, 0.22));
  box-shadow: 0 0 6px rgba(91, 201, 224, 0.20);
  content: "";
}

.time-flow-now-marker > span {
  position: absolute;
  top: 2px;
  left: 50%;
  width: max-content;
  padding: 2px 6px;
  border: 1px solid rgba(137, 226, 245, 0.24);
  border-radius: 999px;
  background: rgba(13, 42, 55, 0.88);
  color: rgba(191, 230, 239, 0.82);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
  white-space: nowrap;
}

.time-flow-now-marker.near-start > span {
  transform: translateX(-8px);
}

.time-flow-now-marker.near-end > span {
  transform: translateX(calc(-100% + 8px));
}

.time-flow-playhead {
  position: absolute;
  z-index: 11;
  top: 0;
  bottom: 0;
  width: 13px;
  pointer-events: none;
  touch-action: none;
  transform: translateX(-6px);
}

.time-flow-playhead::before {
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 6px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 196, 105, 0.96), rgba(239, 158, 73, 0.34));
  box-shadow: 0 0 7px rgba(239, 158, 73, 0.46);
  content: "";
}

.time-flow-playhead-handle {
  position: absolute;
  z-index: 3;
  top: 21px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
  transform: translateX(-50%);
}

.time-flow-playhead-handle::after {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 206, 132, 0.94);
  border-radius: 50%;
  background: rgba(49, 35, 22, 0.96);
  box-shadow: 0 0 8px rgba(239, 158, 73, 0.54);
  content: "";
}

.time-flow-playhead-handle:hover::after {
  border-color: rgba(255, 226, 181, 1);
  box-shadow: 0 0 11px rgba(239, 158, 73, 0.78);
}

.time-flow-playhead > span {
  position: absolute;
  top: 2px;
  left: 6px;
  width: max-content;
  padding: 2px 6px;
  border: 1px solid rgba(239, 180, 92, 0.28);
  border-radius: 999px;
  background: rgba(49, 35, 22, 0.92);
  color: rgba(255, 216, 157, 0.92);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.2;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.time-flow-playhead.near-start > span {
  transform: translateX(-6px);
}

.time-flow-playhead.near-end > span {
  transform: translateX(calc(-100% + 6px));
}

.time-flow-playhead:focus-visible {
  outline: none;
}

.time-flow-playhead:focus-visible::before {
  width: 2px;
  background: rgba(255, 213, 148, 0.98);
}

.time-flow-playhead.week-wide {
  z-index: 12;
}

.time-flow-playhead.week-wide::before {
  background: linear-gradient(180deg, rgba(255, 196, 105, 0.96), rgba(239, 158, 73, 0.28));
}

.time-flow-playhead.week-wide > span {
  top: 2px;
}

.time-flow-legend {
  position: relative;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(170, 224, 238, 0.08);
  background: rgba(7, 26, 37, 0.94);
  color: rgba(187, 210, 219, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.time-flow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.time-flow-legend span::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #58b1e7;
  content: "";
}

.time-flow-legend .legend-meeting::before { background: #efb45c; }
.time-flow-legend .legend-admin::before { background: #ae92ef; }
.time-flow-legend .legend-break::before { background: #7aa7b9; }
.time-flow-legend .legend-time-off::before {
  border: 1px solid rgba(158, 191, 225, 0.42);
  background: repeating-linear-gradient(135deg, rgba(128, 166, 205, 0.48) 0 3px, rgba(83, 119, 157, 0.18) 3px 6px);
}
.time-flow-legend .legend-scheduled::before {
  border: 1px dashed rgba(239, 180, 92, 0.72);
  background: repeating-linear-gradient(135deg, rgba(239, 180, 92, 0.18) 0 3px, transparent 3px 6px);
}
.time-flow-legend .legend-gap::before {
  border: 1px dashed rgba(187, 210, 219, 0.44);
  background: repeating-linear-gradient(135deg, rgba(187, 210, 219, 0.16) 0 3px, transparent 3px 6px);
}

.time-flow-legend .legend-between::before {
  border: 1px dashed rgba(137, 177, 190, 0.24);
  background: rgba(8, 26, 37, 0.32);
}

.time-flow-legend .legend-continuity::before {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #7cd5e8;
  box-shadow: 0 0 5px rgba(91, 201, 224, 0.34);
}

.time-flow-legend-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.time-flow-edit-toggle,
.time-flow-fit-toggle {
  min-width: 78px;
  min-height: 25px;
  padding: 3px 10px;
  border-color: rgba(170, 224, 238, 0.13);
  color: rgba(193, 218, 227, 0.76);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  font-weight: 760;
}

.time-flow-edit-toggle[aria-pressed="true"],
.time-flow-fit-toggle[aria-pressed="true"] {
  border-color: rgba(72, 216, 139, 0.34);
  color: rgba(224, 251, 236, 0.94);
  background: rgba(44, 132, 92, 0.28);
}

.time-flow-edit-toggle:disabled,
.time-flow-fit-toggle:disabled {
  cursor: default;
  opacity: 0.32;
}

.time-flow-edit-status {
  max-width: 300px;
  overflow: hidden;
  color: rgba(177, 205, 215, 0.68);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-flow-legend .time-flow-edit-status::before {
  display: none;
}

.time-flow-edit-status.warning { color: #efbd68; }
.time-flow-edit-status.success { color: rgba(104, 224, 159, 0.90); }

.time-flow-zoom-control {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 25px 40px 25px;
  min-height: 25px;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(170, 224, 238, 0.13);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.045);
}

.time-flow-legend-actions .time-flow-zoom-control {
  margin-left: 0;
}

.time-flow-zoom-control button {
  display: grid;
  width: 25px;
  min-width: 25px;
  min-height: 25px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(193, 218, 227, 0.76);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
}

.time-flow-zoom-control button:first-child { border-right: 1px solid rgba(170, 224, 238, 0.09); }
.time-flow-zoom-control button:last-child { border-left: 1px solid rgba(170, 224, 238, 0.09); }

.time-flow-zoom-control button:hover:not(:disabled),
.time-flow-zoom-control button:focus-visible {
  background: rgba(112, 192, 216, 0.10);
  color: var(--text);
  outline: none;
}

.time-flow-zoom-control button:disabled {
  cursor: default;
  opacity: 0.28;
}

.time-flow-zoom-control > output {
  display: grid;
  place-items: center;
  color: rgba(177, 205, 215, 0.72);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.time-flow-axis-row,
.time-flow-day-row {
  display: grid;
  grid-template-columns: 112px var(--time-flow-timeline-width, 648px);
  min-width: calc(112px + var(--time-flow-timeline-width, 648px));
}

.time-flow-axis-row {
  min-height: 28px;
  border-bottom: 1px solid rgba(170, 224, 238, 0.07);
}

.time-flow-axis {
  position: relative;
  cursor: crosshair;
  touch-action: none;
}

.time-flow-axis.is-scrubbing {
  cursor: ew-resize;
}

.time-flow-axis-row > span:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  border-right: 1px solid rgba(170, 224, 238, 0.12);
  background: rgba(7, 26, 37, 0.98);
  box-shadow: 10px 0 18px rgba(3, 17, 25, 0.24);
}

.time-flow-axis > span {
  position: absolute;
  top: 7px;
  color: rgba(177, 205, 215, 0.54);
  font-size: 11px;
  font-weight: 700;
  transform: translateX(-50%);
  white-space: nowrap;
}

.time-flow-day-row {
  min-height: 112px;
  border-bottom: 1px solid rgba(170, 224, 238, 0.07);
}

.time-flow-day-row:last-child {
  border-bottom: 0;
}

.time-flow-view[data-scope="week"] .time-flow-day-row.playhead-day .time-flow-day-label {
  background: rgba(13, 47, 61, 0.98);
  box-shadow: inset 3px 0 rgba(105, 214, 239, 0.48), 10px 0 18px rgba(3, 17, 25, 0.24);
}

.time-flow-view[data-scope="week"] .time-flow-day-row.playhead-day .time-flow-day-label strong {
  color: rgba(218, 245, 252, 0.96);
}

.time-flow-day-label {
  position: sticky;
  left: 0;
  z-index: 6;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid rgba(170, 224, 238, 0.08);
  background: rgba(7, 26, 37, 0.98);
  box-shadow: 10px 0 18px rgba(3, 17, 25, 0.24);
}

.time-flow-day-label strong {
  color: rgba(236, 247, 251, 0.90);
  font-size: 13px;
  font-weight: 780;
}

.time-flow-day-label span {
  color: rgba(177, 205, 215, 0.58);
  font-size: 11px;
  font-weight: 700;
}

.time-flow-timeline {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(170, 224, 238, 0.055) 0 1px, transparent 1px var(--time-flow-grid-step, 12.5%)),
    linear-gradient(180deg, rgba(48, 124, 151, 0.05), transparent 70%);
}

.time-flow-session,
.time-flow-gap,
.time-flow-between-gap {
  position: absolute;
  bottom: 13px;
  z-index: 3;
  height: 30px;
  min-width: 2px;
  overflow: hidden;
}

.time-flow-time-off {
  position: absolute;
  z-index: 4;
  top: 30px;
  display: flex;
  height: 18px;
  min-width: 3px;
  align-items: center;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid rgba(151, 188, 225, 0.36);
  border-radius: 4px;
  color: rgba(224, 238, 250, 0.80);
  background: repeating-linear-gradient(135deg, rgba(101, 142, 184, 0.34) 0 5px, rgba(58, 96, 137, 0.20) 5px 10px);
  box-shadow: 0 0 10px rgba(105, 158, 211, 0.08);
  cursor: pointer;
}

.time-flow-time-off span {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-flow-time-off:hover,
.time-flow-time-off:focus-visible {
  z-index: 7;
  border-color: rgba(183, 216, 246, 0.62);
  color: rgba(241, 249, 255, 0.94);
  background: repeating-linear-gradient(135deg, rgba(112, 157, 202, 0.48) 0 5px, rgba(62, 105, 148, 0.28) 5px 10px);
  outline: none;
}

.time-flow-session {
  display: flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--flow-session-color) 72%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--flow-session-color) 42%, rgba(8, 28, 40, 0.88));
  color: rgba(249, 253, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

.time-flow-session span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-flow-session:focus-visible {
  z-index: 5;
  outline: 2px solid rgba(126, 213, 244, 0.82);
  outline-offset: 1px;
}

.time-flow-session:hover {
  z-index: 4;
  border-color: color-mix(in srgb, var(--flow-session-color) 92%, white 8%);
  background: color-mix(in srgb, var(--flow-session-color) 50%, rgba(8, 28, 40, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px color-mix(in srgb, var(--flow-session-color) 20%, transparent);
}

.time-flow-session.selected {
  z-index: 5;
  border-color: rgba(224, 246, 253, 0.88);
  box-shadow: 0 0 0 2px rgba(103, 195, 231, 0.20), 0 0 16px color-mix(in srgb, var(--flow-session-color) 28%, transparent);
}

.time-flow-session.active {
  border-color: rgba(82, 190, 255, 0.90);
  background: rgba(24, 88, 132, 0.88);
  box-shadow: 0 0 0 2px rgba(67, 178, 255, 0.14), 0 0 16px rgba(67, 178, 255, 0.16);
}

.time-flow-session.scheduled {
  border-style: dashed;
  border-color: rgba(239, 180, 92, 0.78);
  background: repeating-linear-gradient(135deg, rgba(239, 180, 92, 0.18) 0 6px, rgba(8, 28, 40, 0.72) 6px 12px);
  color: rgba(250, 226, 186, 0.94);
  box-shadow: none;
}

.time-flow-next-event-countdown {
  position: absolute;
  z-index: 4;
  bottom: 50px;
  height: 12px;
  min-width: 4px;
  border-top: 1px solid rgba(239, 180, 92, 0.58);
  color: rgba(244, 207, 149, 0.88);
  pointer-events: none;
}

.time-flow-next-event-countdown::before,
.time-flow-next-event-countdown::after {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 6px;
  background: rgba(239, 180, 92, 0.68);
  content: "";
}

.time-flow-next-event-countdown::before { left: 0; }
.time-flow-next-event-countdown::after { right: 0; }

.time-flow-next-event-countdown > span {
  position: absolute;
  top: -10px;
  left: 50%;
  max-width: calc(100% - 12px);
  overflow: hidden;
  padding: 2px 7px;
  border: 1px solid rgba(239, 180, 92, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(43, 36, 27, 0.88);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

.time-flow-view.edit-mode .time-flow-session:not(.active) {
  padding-right: 10px;
  padding-left: 10px;
  cursor: grab;
  touch-action: none;
}

.time-flow-view.edit-mode .time-flow-session:not(.active):hover {
  border-color: rgba(224, 246, 253, 0.82);
}

.time-flow-session.editing {
  z-index: 8;
  cursor: grabbing !important;
  transition: none;
}

.time-flow-session.overlap {
  border-color: rgba(255, 126, 141, 0.94) !important;
  background: rgba(126, 44, 57, 0.88) !important;
  box-shadow: 0 0 0 2px rgba(255, 126, 141, 0.18), 0 0 16px rgba(255, 94, 117, 0.20) !important;
}

.time-flow-session.edit-rejected {
  animation: time-flow-edit-rejected 420ms ease;
}

@keyframes time-flow-edit-rejected {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  65% { transform: translateX(3px); }
}

.time-flow-trim-handle {
  position: absolute;
  z-index: 2;
  top: 3px;
  bottom: 3px;
  width: 7px;
  border-radius: 3px;
  background: rgba(229, 246, 251, 0.30);
  box-shadow: 0 0 0 1px rgba(9, 33, 45, 0.26);
  cursor: ew-resize;
  opacity: 0.62;
}

.time-flow-trim-handle.start { left: 2px; }
.time-flow-trim-handle.end { right: 2px; }

.time-flow-session:hover .time-flow-trim-handle,
.time-flow-session.editing .time-flow-trim-handle {
  background: rgba(236, 249, 253, 0.74);
  opacity: 0.92;
}

.time-flow-edit-preview {
  position: absolute;
  z-index: 10;
  bottom: 51px;
  width: max-content;
  max-width: 250px;
  padding: 4px 8px;
  border: 1px solid rgba(137, 226, 245, 0.24);
  border-radius: var(--radius-pill);
  color: rgba(235, 249, 253, 0.94);
  background: rgba(9, 35, 47, 0.94);
  box-shadow: 0 8px 18px rgba(0, 12, 20, 0.28), 0 0 12px rgba(91, 201, 224, 0.12);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.time-flow-edit-preview.warning {
  border-color: rgba(255, 126, 141, 0.48);
  color: rgba(255, 205, 211, 0.96);
  background: rgba(77, 31, 42, 0.95);
}

.time-flow-edit-preview.near-start { transform: translateX(0); }
.time-flow-edit-preview.near-end { transform: translateX(-100%); }

.time-flow-snap-guide {
  position: absolute;
  z-index: 9;
  top: 3px;
  bottom: 7px;
  width: 1px;
  background: rgba(157, 229, 246, 0.82);
  box-shadow: 0 0 8px rgba(105, 214, 239, 0.64);
  pointer-events: none;
  transform: translateX(-0.5px);
}

.time-flow-snap-guide::before,
.time-flow-snap-guide::after {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(205, 244, 252, 0.92);
  box-shadow: 0 0 7px rgba(105, 214, 239, 0.72);
  content: "";
  transform: translateX(-50%);
}

.time-flow-snap-guide::before { top: -1px; }
.time-flow-snap-guide::after { bottom: -1px; }
.time-flow-snap-guide[hidden] { display: none; }

body.editing-time-flow {
  cursor: grabbing;
  user-select: none;
}

.work-portfolio-flow-header {
  align-items: flex-start;
}

.portfolio-flow-actions {
  align-items: center;
}

#portfolioFlowFit {
  min-height: 29px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  line-height: 1;
}

.portfolio-flow-filter-panel {
  min-width: 250px;
}

.portfolio-flow-chart {
  overflow: hidden;
  border: 1px solid rgba(126, 171, 186, 0.22);
  border-radius: var(--radius-large);
  background: rgba(4, 24, 34, 0.44);
}

.portfolio-flow-scroll {
  overflow: auto;
  cursor: grab;
  scrollbar-color: rgba(109, 169, 186, 0.36) transparent;
}

.portfolio-flow-scroll.is-panning {
  cursor: grabbing;
  user-select: none;
}

.portfolio-flow-row-label,
.portfolio-flow-filter-panel {
  cursor: default;
}

.portfolio-flow-row-label.opens-details {
  cursor: pointer;
}

.portfolio-flow-axis-row,
.portfolio-flow-row {
  display: grid;
  grid-template-columns: 220px max-content;
  min-width: max-content;
}

.portfolio-flow-axis-row {
  position: sticky;
  z-index: 12;
  top: 0;
  height: 42px;
  border-bottom: 1px solid rgba(126, 171, 186, 0.24);
  background: rgba(7, 32, 43, 0.97);
}

.portfolio-flow-axis-label,
.portfolio-flow-row-label {
  position: sticky;
  z-index: 8;
  left: 0;
  border-right: 1px solid rgba(126, 171, 186, 0.24);
  background: rgba(7, 31, 42, 0.97);
}

.portfolio-flow-axis-label {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: rgba(202, 224, 231, 0.64);
  font-size: 11px;
  font-weight: 760;
}

.portfolio-flow-axis {
  position: relative;
  height: 42px;
}

.portfolio-flow-axis span {
  position: absolute;
  top: 14px;
  color: rgba(202, 224, 231, 0.62);
  font-size: 10px;
  font-weight: 730;
  transform: translateX(6px);
  white-space: nowrap;
}

.portfolio-flow-row {
  min-height: 48px;
  border-bottom: 1px solid rgba(126, 171, 186, 0.14);
}

.portfolio-flow-row:last-child {
  border-bottom: 0;
}

.portfolio-flow-row-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 9px 16px;
}

.portfolio-flow-row-label strong,
.portfolio-flow-row-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-flow-row-label strong {
  color: rgba(238, 248, 251, 0.92);
  font-size: 12px;
}

.portfolio-flow-row-label small {
  margin-top: 2px;
  color: rgba(187, 212, 220, 0.52);
  font-size: 10px;
}

.portfolio-flow-row.program .portfolio-flow-row-label {
  padding-left: 44px;
  cursor: pointer;
}

.portfolio-flow-row.project .portfolio-flow-row-label {
  padding-left: 60px;
  background: rgba(8, 34, 45, 0.97);
}

.portfolio-flow-disclosure {
  position: absolute;
  top: 50%;
  left: 10px;
  display: grid;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(170, 224, 238, 0.14);
  border-radius: 50%;
  color: rgba(190, 219, 226, 0.66);
  background: rgba(170, 224, 238, 0.05);
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  place-items: center;
  transform: translateY(-50%);
}

.portfolio-flow-row.project .portfolio-flow-disclosure { left: 26px; }

.portfolio-flow-disclosure:hover,
.portfolio-flow-disclosure:focus-visible {
  border-color: rgba(170, 224, 238, 0.28);
  color: rgba(230, 246, 250, 0.96);
  background: rgba(170, 224, 238, 0.10);
  outline: none;
}

.portfolio-flow-row.task .portfolio-flow-row-label {
  padding-left: 56px;
  background: rgba(9, 37, 48, 0.97);
}

.portfolio-flow-row.task .portfolio-flow-row-label strong {
  font-size: 11px;
  font-weight: 680;
}

.portfolio-flow-lane {
  position: relative;
  min-height: 48px;
  overflow: hidden;
}

.portfolio-flow-gridline,
.portfolio-flow-today {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(126, 171, 186, 0.12);
}

.portfolio-flow-today {
  z-index: 6;
  background: rgba(239, 180, 92, 0.78);
  box-shadow: 0 0 7px rgba(239, 180, 92, 0.22);
}

.portfolio-flow-actual,
.portfolio-flow-planned {
  position: absolute;
  z-index: 2;
  top: 14px;
  height: 20px;
  border-radius: 5px;
}

.portfolio-flow-actual {
  min-width: 4px;
  border: 1px solid color-mix(in srgb, var(--portfolio-flow-color) 62%, transparent);
  background: color-mix(in srgb, var(--portfolio-flow-color) 18%, rgba(8, 31, 41, 0.76));
}

.portfolio-flow-planned {
  z-index: 1;
  top: 8px;
  height: 32px;
  border: 1px dashed rgba(219, 233, 237, 0.28);
  background: rgba(219, 233, 237, 0.04);
}

.portfolio-flow-effort {
  position: absolute;
  z-index: 4;
  top: 14px;
  height: 20px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--portfolio-flow-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--portfolio-flow-color) 24%, transparent);
}

.portfolio-flow-effort.type-meeting { background: #e2a74f; }
.portfolio-flow-effort.type-collaboration { background: #68bdd2; }
.portfolio-flow-effort.type-admin { background: #a98ae8; }
.portfolio-flow-effort.type-break { background: #8caeb9; }

.portfolio-flow-tooltip {
  position: fixed;
  z-index: 1000;
  display: grid;
  gap: 2px;
  min-width: 150px;
  max-width: 280px;
  padding: 9px 11px;
  border: 1px solid rgba(137, 196, 211, 0.28);
  border-radius: 9px;
  color: rgba(211, 232, 238, 0.78);
  background: rgba(5, 27, 37, 0.97);
  box-shadow: 0 12px 28px rgba(0, 10, 18, 0.42);
  font-size: 10px;
  line-height: 1.35;
  pointer-events: none;
}

.portfolio-flow-tooltip[hidden] { display: none; }

.portfolio-flow-tooltip strong {
  overflow: hidden;
  color: rgba(239, 249, 251, 0.96);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-flow-chart .empty-state {
  margin: 0;
  padding: 34px;
  text-align: center;
}

@media (max-width: 760px) {
  .work-portfolio-flow-header,
  .portfolio-flow-actions {
    align-items: stretch;
  }

  .portfolio-flow-axis-row,
  .portfolio-flow-row {
    grid-template-columns: 168px max-content;
  }
}

.time-flow-gap {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(177, 205, 215, 0.24);
  background: repeating-linear-gradient(135deg, rgba(177, 205, 215, 0.08) 0 4px, transparent 4px 8px);
  color: rgba(199, 220, 228, 0.62);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.time-flow-between-gap {
  display: grid;
  place-items: center;
  border-top: 1px dashed rgba(137, 177, 190, 0.20);
  border-bottom: 1px dashed rgba(137, 177, 190, 0.12);
  background: rgba(8, 26, 37, 0.28);
  color: rgba(177, 205, 215, 0.42);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.time-flow-block-range {
  position: absolute;
  z-index: 4;
  top: 7px;
  height: 20px;
  min-width: 2px;
  border-top: 1px solid rgba(121, 207, 224, 0.38);
  color: rgba(184, 218, 227, 0.62);
  pointer-events: none;
}

.time-flow-block-range::before,
.time-flow-block-range::after {
  position: absolute;
  top: -1px;
  width: 1px;
  height: 5px;
  background: rgba(121, 207, 224, 0.38);
  content: "";
}

.time-flow-block-range::before { left: 0; }
.time-flow-block-range::after { right: 0; }

.time-flow-block-range span {
  position: absolute;
  top: 3px;
  left: 5px;
  max-width: calc(100% - 10px);
  overflow: hidden;
  font-size: 9px;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-flow-continuity {
  position: absolute;
  inset: 7px 0 46px;
  z-index: 2;
  width: 100%;
  height: calc(100% - 53px);
  overflow: visible;
  pointer-events: none;
}

.time-flow-continuity polyline {
  fill: none;
  stroke: rgba(116, 210, 231, 0.84);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(91, 201, 224, 0.24));
}

.time-flow-view[data-scope="week"] .time-flow-day-row {
  min-height: 82px;
}

.time-flow-view[data-scope="week"] .time-flow-session,
.time-flow-view[data-scope="week"] .time-flow-gap,
.time-flow-view[data-scope="week"] .time-flow-between-gap {
  bottom: 9px;
  height: 25px;
}

.time-flow-view[data-scope="week"] .time-flow-time-off {
  top: 22px;
  height: 15px;
}

.time-flow-view[data-scope="week"] .time-flow-continuity {
  inset: 5px 0 38px;
  height: calc(100% - 43px);
}

.time-flow-view[data-scope="week"] .time-flow-block-range {
  top: 4px;
  height: 16px;
}

.time-flow-view[data-scope="week"] .time-flow-next-event-countdown {
  bottom: 39px;
}

.time-flow-day-row.empty {
  min-height: 58px;
}

.time-flow-view[data-scope="week"] .time-flow-day-row.empty {
  min-height: 48px;
}

.time-flow-day-row.empty .time-flow-timeline {
  opacity: 0.42;
}

@media (max-width: 1100px) {
  .time-flow-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .time-flow-metrics > div:nth-child(4n) {
    border-right: 0;
  }

  .time-flow-metrics > div:nth-child(-n + 4) {
    border-bottom: 1px solid rgba(170, 224, 238, 0.08);
  }
}

@media (max-width: 720px) {
  .time-log-header {
    align-items: stretch;
    flex-direction: column;
  }

  .time-log-header-actions,
  .time-flow-date-controls {
    justify-content: space-between;
  }

  .time-tracking-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .time-period-controls {
    flex: 1 1 260px;
  }

  .time-period-controls .time-flow-date-stepper {
    flex: 1;
    width: auto;
  }

  .time-flow-view {
    overflow-x: hidden;
  }

  .time-flow-legend-actions {
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) 56px 44px 90px;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .time-flow-legend-actions:not(.has-status) {
    grid-template-columns: 56px 44px 90px;
    justify-content: end;
  }

  .time-flow-edit-status {
    max-width: none;
    min-width: 0;
  }

  .time-flow-edit-toggle,
  .time-flow-fit-toggle {
    min-width: 56px;
  }

  .time-flow-fit-toggle {
    min-width: 44px;
  }

  .time-flow-metrics {
    min-width: 600px;
  }
}

#timeProjectsTable td {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

#timeProjectsTable th:first-child,
#timeProjectsTable td:first-child {
  border-right: 0;
}

#timeProjectsTable .time-project-row td {
  background: rgba(65, 206, 143, 0.10);
}

#timeProjectsTable .time-project-task-row td {
  color: var(--muted);
  font-size: 13px;
}

#timeProjectsTable .time-entry-primary-cell {
  color: rgba(244, 251, 255, 0.92);
  font-weight: 650;
}

#timeProjectsTable .time-project-task-title {
  padding-left: 26px;
  color: rgba(244, 251, 255, 0.86);
}

#timeProjectsTable .entry-group-toggle {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
}

#spendingDetailsTable td {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

#spendingDetailsTable th {
  position: relative;
  padding-right: 14px;
}

#spendingDetailsTable th:first-child,
#spendingDetailsTable td:first-child {
  border-right: 0;
}

#spendingDetailsTable .spending-category-row td {
  background: rgba(198, 82, 96, 0.10);
  color: rgba(244, 251, 255, 0.92);
}

#spendingDetailsTable .spending-merchant-row td {
  background: rgba(73, 177, 214, 0.10);
}

#spendingDetailsTable .spending-transaction-row td {
  color: var(--text);
}

.spending-transaction-description {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}

.spending-mobile-stack {
  min-width: 0;
}

.spending-stack-primary,
.spending-desktop-text {
  display: block;
  min-width: 0;
}

.spending-mobile-text,
.spending-mobile-meta {
  display: none;
}

#spendingDetailsTable .spending-primary-cell {
  color: rgba(244, 251, 255, 0.92);
  font-weight: 650;
}

#spendingDetailsTable .entry-group-toggle {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
}

#spendingDetailsTable .entry-group-toggle-nested {
  margin-left: 8px;
}

.spending-transaction-detail-panel .transaction-description-input {
  min-height: 150px;
}

.spending-transaction-detail-panel .transaction-notes-input {
  min-height: 240px;
}

td input,
td select,
td textarea,
.inline-input,
.import-panel input,
.import-panel select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.full-label textarea,
.json-editor {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  color: var(--text);
  padding: 6px 12px;
  text-align: center;
  outline: none;
}

.inline-checkbox,
td .inline-checkbox {
  width: 24px;
  min-height: 24px;
  height: 24px;
  margin: 0 auto;
  padding: 0;
  accent-color: var(--accent);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
}

.checkbox-field input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
}

.checkbox-field span {
  color: var(--text);
}

.import-panel select,
.filter-panel select,
.timer-form select {
  min-height: 44px;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 38px;
}

td select {
  min-height: 34px;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 11px 7px;
  padding-right: 32px;
}

.form-grid select {
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 11px 7px;
  padding-right: 32px;
}

.inline-input {
  width: min(320px, 34vw);
}

.import-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.7fr) minmax(260px, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px;
  background: rgba(14, 38, 51, 0.62);
  border: 1px solid rgba(170, 224, 238, 0.10);
  border-radius: var(--radius);
}

.transaction-import-panel {
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1fr) auto;
}

.import-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.import-data-panel {
  grid-column: 1 / -1;
}

.import-tool-panel {
  grid-template-columns: minmax(160px, 0.8fr) repeat(3, minmax(190px, 1fr));
  align-items: stretch;
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  border: 0;
}

.import-tool-panel.transaction-import-panel {
  grid-template-columns: minmax(160px, 0.8fr) repeat(3, minmax(190px, 1fr));
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) repeat(6, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px;
  background: rgba(14, 38, 51, 0.62);
  border: 1px solid rgba(170, 224, 238, 0.10);
  border-radius: var(--radius);
}

.filter-panel input,
.filter-panel select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  padding: 10px 12px;
  text-align: center;
  outline: none;
}

.filter-search input {
  text-align: left;
}

.import-panel select,
.filter-panel select,
.timer-form select {
  min-height: 42px;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23bdd0d9' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 38px;
}

.timer-form textarea {
  width: 100%;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  resize: vertical;
  outline: none;
}

.import-panel input,
.import-panel select {
  min-width: 0;
}

.import-panel input[type="file"] {
  padding: 8px 10px;
}

.import-status {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
}

.copy-status {
  min-width: 170px;
}

.copy-output {
  width: 100%;
  min-height: 180px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: var(--field-bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  resize: vertical;
}

.copy-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.copy-options label {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
  background: rgba(9, 28, 39, 0.64);
  color: var(--text);
}

.copy-options input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.chat-copy-panel {
  display: grid;
  gap: 0;
}

.chat-copy-output {
  min-height: 300px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.note-list {
  display: grid;
  gap: 14px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.planning-flow-note {
  margin: -4px 0 22px;
  padding: 14px 16px;
  background: rgba(14, 39, 52, 0.62);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-small);
}

.panel-note {
  margin: 6px 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.note-list p {
  margin: 0;
}

.import-data-panel .note-list {
  gap: 6px;
  margin-top: 12px;
}

.import-data-panel .note-list p {
  color: rgba(221, 236, 241, 0.66);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

#positionsTable td select,
#snapshotsTable td select,
#historyTable td select {
  padding-right: 34px;
  background-position: right 11px center;
  background-size: 11px 7px;
}

.account-import-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  min-width: 0;
  line-height: 1.15;
}

.account-import-meta strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.account-import-meta .source-badge {
  margin-left: 0;
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.1;
}

.account-import-meta span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.source-badge.import-current {
  color: rgba(141, 225, 168, 0.96);
  border-color: rgba(79, 211, 133, 0.35);
  background: rgba(36, 113, 75, 0.26);
}

.source-badge.import-stale {
  color: rgba(238, 188, 103, 0.94);
  border-color: rgba(238, 188, 103, 0.28);
  background: rgba(121, 88, 43, 0.24);
}

.source-badge.import-empty {
  color: rgba(221, 236, 241, 0.54);
  border-color: rgba(170, 224, 238, 0.12);
}

.advanced-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 138, 138, 0.45);
  border-radius: var(--radius-small);
  background: rgba(90, 46, 46, 0.24);
  color: #f0c1c1;
}

td textarea,
.full-label textarea {
  min-height: 68px;
  border-radius: 16px;
  resize: vertical;
  text-align: left;
}

td input:focus,
td textarea:focus,
td select:focus,
.form-grid input:focus,
.timer-form select:focus,
.timer-form textarea:focus,
.full-label textarea:focus,
.json-editor:focus {
  border-color: var(--accent);
}

td input:disabled {
  color: var(--muted);
  border-color: var(--line-soft);
  background: rgba(7, 21, 31, 0.72);
  cursor: not-allowed;
}

.row-action {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  color: rgba(244, 251, 255, 0.82);
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
}

.row-action.button-icon-only .button-icon {
  width: 20px;
  height: 20px;
}

.row-action:hover,
.row-action:focus-visible {
  color: var(--text);
  border-color: rgba(170, 224, 238, 0.34);
}

.row-button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.row-action.text-action {
  width: auto;
  min-width: 58px;
  padding: 0 10px;
  color: var(--text);
  font-size: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.settings-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: var(--glass-panel-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 12, 20, 0.18);
}

.settings-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 650;
}

.settings-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.settings-card .form-grid {
  margin-top: 0;
}

.settings-page-layout {
  margin-top: 0;
}

.finance-auto-lock-field {
  width: min(280px, 100%);
}

.finance-security-card #financeAutoLockStatus {
  margin: 10px 0 0;
}

.appearance-settings-card {
  border-color: rgba(88, 177, 231, 0.14);
}

.appearance-range-field {
  align-content: start;
}

.appearance-hsv-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.045);
}

.appearance-hsv-controls[hidden] {
  display: none;
}

.appearance-range-field > span,
.appearance-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.appearance-range-field output {
  color: var(--text);
  font-weight: 750;
}

.appearance-range-field input[type="range"] {
  width: 100%;
  padding: 0;
}

.appearance-actions {
  margin-top: 14px;
}

.appearance-actions .panel-note {
  margin: 0;
}

.appearance-status-group {
  display: grid;
  gap: 3px;
}

.appearance-status-group .error-text {
  color: var(--danger);
}

.appearance-transfer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.appearance-transfer-actions > div:first-child {
  display: grid;
  gap: 3px;
}

.appearance-transfer-actions .panel-note {
  margin: 0;
}

.appearance-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .appearance-actions,
  .appearance-transfer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .appearance-action-buttons {
    justify-content: flex-start;
  }
}

/* Shared glass surfaces controlled by the Appearance glass-blur slider. */
.metric-card,
.tabs,
.property-drawer,
.bills-grid-panel,
.chart-legend-list,
.work-filter-panel,
.task-context-menu,
.month-end-review {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
}

.compact-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.work-task-column-width-control {
  display: grid;
  align-content: start;
  gap: 8px;
  width: min(220px, 100%);
}

.work-task-column-width-control > span:first-child {
  color: var(--muted);
  font-weight: 700;
}

.work-task-column-width-stepper {
  width: min(190px, 100%);
}

.form-grid .integrated-stepper > input {
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  appearance: textfield;
}

.work-flow-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 210px)) minmax(180px, 230px);
  gap: 14px;
  align-items: start;
}

.work-flow-settings-grid > label,
.work-block-gap-control {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.work-flow-settings-grid input[type="time"] {
  width: 100%;
  min-height: 42px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  background: var(--field-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  color-scheme: dark;
  font-size: var(--type-body);
  font-weight: 800;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.work-flow-settings-grid input[type="time"]:hover {
  border-color: rgba(170, 224, 238, 0.26);
  background-color: rgba(255, 255, 255, 0.09);
}

.work-flow-settings-grid input[type="time"]:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(57, 168, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.work-flow-settings-grid input[type="time"]::-webkit-datetime-edit {
  display: flex;
  justify-content: center;
  padding: 0;
}

.work-flow-settings-grid input[type="time"]::-webkit-calendar-picker-indicator {
  margin-left: 6px;
  opacity: 0.54;
  cursor: pointer;
}

.work-block-gap-stepper {
  width: min(190px, 100%);
}

.work-block-gap-control small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 650;
}

@media (max-width: 760px) {
  .work-flow-settings-grid {
    grid-template-columns: 1fr;
  }
}

.wrike-import-controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wrike-import-file-field {
  grid-column: span 2;
}

.wrike-import-default-action {
  display: flex;
  align-items: end;
}

.wrike-import-default-action button {
  width: 100%;
}

.wrike-import-preview .table-wrap {
  max-height: 520px;
  overflow: auto;
}

.wrike-import-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.wrike-import-preview-table th:nth-child(1) { width: 28%; }
.wrike-import-preview-table th:nth-child(2) { width: 18%; }
.wrike-import-preview-table th:nth-child(3) { width: 13%; }
.wrike-import-preview-table th:nth-child(4) { width: 18%; }
.wrike-import-preview-table th:nth-child(5) { width: 23%; }

.wrike-import-preview-table td {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrike-import-preview-table select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px 26px 4px 7px;
  font-size: 11px;
}

.wrike-import-preview-table tr.wrike-unassigned-row td {
  background: rgba(103, 74, 37, 0.28);
}

.settings-split-grid {
  margin-bottom: 16px;
}

.settings-fieldset {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.settings-fieldset h4 {
  margin: 0 0 4px;
  font-size: 18px;
}

.settings-fieldset p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.settings-fieldset .form-grid {
  margin-top: 0;
}

.three-column-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wide-field {
  grid-column: span 2;
}

.developer-grid {
  display: grid;
  gap: 18px;
}

.developer-type-scale {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.developer-type-row {
  display: grid;
  grid-template-columns: 110px 82px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.developer-type-row > span:first-child {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
}

.developer-type-row code {
  width: fit-content;
  color: var(--muted);
  font-size: var(--type-caption);
  white-space: nowrap;
}

.developer-type-page {
  color: var(--text);
  font-size: var(--type-metric-value);
  font-weight: 700;
}

.developer-type-panel {
  color: var(--text);
  font-size: var(--type-panel-title);
  font-weight: 700;
}

.developer-type-body {
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 500;
}

.developer-type-label {
  color: var(--text);
  font-size: var(--type-label);
  font-weight: 700;
}

.developer-type-caption {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 650;
}

.developer-type-metric {
  color: var(--text);
  font-size: var(--type-metric-value);
  font-weight: 850;
}

#developerStyleGuide {
  color: rgba(245, 250, 252, 0.86);
  font-weight: 500;
}

#developerStyleGuide .section-header h2,
#developerStyleGuide h3 {
  color: rgba(248, 252, 255, 0.92);
  font-weight: 650;
  letter-spacing: 0;
}

#developerStyleGuide .section-header span,
#developerStyleGuide p,
#developerStyleGuide label,
#developerStyleGuide .readout span,
#developerStyleGuide .drawer-meta,
#developerStyleGuide .note-list p {
  color: rgba(216, 230, 237, 0.66);
  font-weight: 500;
}

#developerStyleGuide .table-panel,
#developerStyleGuide .chart-panel,
#developerStyleGuide .settings-card,
#developerStyleGuide .time-entry-detail,
#developerStyleGuide .developer-section.table-panel {
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(0, 12, 20, 0.18);
}

#developerStyleGuide .metric-card {
  border-color: rgba(255, 255, 255, 0.055);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 12, 20, 0.16);
}

#developerStyleGuide .net-worth-card {
  background:
    linear-gradient(135deg, rgba(103, 185, 255, 0.15), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
}

#developerStyleGuide .assets-card {
  background:
    linear-gradient(135deg, rgba(66, 216, 232, 0.13), rgba(72, 216, 139, 0.08)),
    rgba(255, 255, 255, 0.055);
}

#developerStyleGuide .debt-card {
  background:
    linear-gradient(135deg, rgba(255, 114, 133, 0.13), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
}

#developerStyleGuide .metric-card span,
#developerStyleGuide .metric-card small,
#developerStyleGuide .asset-breakdown span,
#developerStyleGuide .asset-breakdown em {
  color: rgba(226, 238, 243, 0.64);
  font-weight: 500;
}

#developerStyleGuide .metric-card strong {
  font-weight: 650;
}

#developerStyleGuide th,
#developerStyleGuide td {
  border-color: rgba(255, 255, 255, 0.055);
  font-weight: 500;
}

#developerStyleGuide th {
  background: rgba(255, 255, 255, 0.075);
  color: rgba(243, 249, 252, 0.78);
  font-weight: 600;
}

#developerStyleGuide td {
  background: rgba(255, 255, 255, 0.04);
}

.developer-section {
  display: grid;
  gap: 12px;
}

.developer-summary-grid {
  position: static;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.developer-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.developer-chart-placeholder {
  min-height: 210px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(170, 224, 238, 0.30);
  border-radius: var(--radius-small);
  background:
    linear-gradient(135deg, rgba(44, 163, 218, 0.14), rgba(63, 211, 133, 0.08)),
    rgba(8, 28, 40, 0.42);
  color: var(--muted);
  font-weight: 900;
}

.developer-compact-table th,
.developer-compact-table td {
  padding: 7px 9px;
}

#developerStyleGuide button,
#developerStyleGuide input,
#developerStyleGuide select,
#developerStyleGuide textarea {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.075);
  color: rgba(248, 252, 255, 0.88);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#developerStyleGuide button {
  padding-left: 12px;
  padding-right: 12px;
  color: rgba(248, 252, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
}

#developerStyleGuide button:hover,
#developerStyleGuide button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

#developerStyleGuide .developer-stepper {
  width: 178px;
  min-height: 36px;
  border-radius: 13px;
  background: var(--field-bg);
}

#developerStyleGuide .developer-stepper > button {
  width: 36px;
  min-width: 36px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 19px;
  font-weight: 500;
}

#developerStyleGuide .developer-stepper > button:hover,
#developerStyleGuide .developer-stepper > button:focus-visible {
  background: rgba(255, 255, 255, 0.10);
}

#developerStyleGuide .developer-stepper > input {
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 800;
  text-align: center;
}

#developerStyleGuide .primary-button {
  border-color: rgba(83, 217, 142, 0.28);
  background: rgba(72, 216, 139, 0.24);
  color: rgba(225, 255, 237, 0.92);
  font-weight: 600;
}

#developerStyleGuide .secondary-button {
  font-weight: 500;
}

#developerStyleGuide .danger-button {
  border-color: rgba(255, 126, 141, 0.20);
  background: rgba(255, 126, 141, 0.11);
  color: rgba(255, 223, 227, 0.88);
}

#developerStyleGuide select {
  padding-left: 14px;
  padding-right: 32px;
  background-position: right 10px center;
  background-size: 11px 7px;
}

#developerStyleGuide textarea {
  min-height: 72px;
  resize: vertical;
  text-align: left;
  border-radius: 16px;
}

#developerStyleGuide td input,
#developerStyleGuide td select {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.developer-button-row {
  justify-content: flex-start;
}

.developer-drawer-sample {
  position: static;
  width: auto;
  max-width: none;
  height: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.developer-review-sample {
  display: grid;
  gap: 10px;
}

.developer-review-sample .month-end-item {
  grid-template-columns: auto auto 1fr;
}

#developerStyleGuide code {
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 251, 255, 0.82);
}

#developerStyleGuide .source-badge,
#developerStyleGuide .month-end-status {
  border-color: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  font-weight: 600;
}

#developerStyleGuide .month-end-item {
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 550;
}

.full-label {
  margin-top: 18px;
}

.json-editor {
  min-height: 540px;
  border-radius: 12px;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .overview-beta-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-beta-net-worth-panel,
  .overview-beta-cash-flow-panel,
  .overview-beta-categories-panel,
  .overview-beta-assets-panel,
  .overview-beta-retirement-panel {
    grid-column: span 6;
  }

  .developer-type-row {
    grid-template-columns: 100px 76px minmax(0, 1fr);
    gap: 10px;
  }

  .task-readouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #timeTracking .compact-layout {
    grid-template-columns: 1fr;
  }

  .timer-column {
    justify-self: stretch;
    width: 100%;
  }

  .time-side-column {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .family-account-row {
    align-items: stretch;
    flex-direction: column;
  }

  .family-account-row .family-account-actions {
    justify-content: flex-start;
  }

  .overview-beta-page-header,
  .overview-beta-toolbar {
    align-items: stretch;
  }

  .overview-beta-toolbar {
    width: 100%;
    display: grid;
    justify-content: stretch;
  }

  .overview-beta-view-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-beta-history-controls {
    display: grid;
  }

  .overview-beta-range-control {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-beta-compare-control {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .overview-beta-compare-control select {
    width: 100%;
  }

  .overview-beta-net-worth-panel,
  .overview-beta-cash-flow-panel,
  .overview-beta-categories-panel,
  .overview-beta-assets-panel,
  .overview-beta-retirement-panel {
    grid-column: 1 / -1;
  }

  .overview-beta-scenario-grid {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-layout,
  .trend-layout,
  .compact-layout,
  .retirement-readiness-grid,
  .dashboard-trend-controls,
  .scenario-control-panel,
  .form-grid,
  .settings-layout,
  .timer-console,
  .time-entries-layout,
  .real-estate-layout,
  .planning-events-layout,
  .import-tools-grid,
  .developer-summary-grid,
  .developer-two-column {
    grid-template-columns: 1fr;
  }

  .import-data-panel {
    grid-column: auto;
  }

  .copy-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .month-end-summary,
  .month-end-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wide-field {
    grid-column: auto;
  }

  .import-panel {
    grid-template-columns: 1fr 1fr;
  }

  .filter-panel {
    grid-template-columns: 1fr 1fr;
  }

  .compact-readout-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-control {
    grid-template-columns: 44px minmax(0, 1fr) minmax(94px, 118px) 44px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  .app-shell {
    width: 100%;
    padding: 0 0 32px;
  }

  .topbar {
    top: 0;
    padding: 7px 0;
  }

  .topbar-inner {
    width: calc(100vw - 24px);
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .mode-switch {
    flex: 1 1 auto;
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    max-width: 250px;
    transform: none;
  }

  .mode-button {
    min-width: 0;
    padding-inline: 10px;
  }

  .mobile-menu-toggle {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(170, 224, 238, 0.18);
    border-radius: 50%;
    background: var(--glass-panel-bg);
    color: var(--text);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.06);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.06);
  }

  .mobile-menu-toggle span,
  .mobile-menu-toggle span::before,
  .mobile-menu-toggle span::after {
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 2px;
    background: currentColor;
  }

  .mobile-menu-toggle span {
    position: relative;
  }

  .mobile-menu-toggle span::before,
  .mobile-menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .mobile-menu-toggle span::before { top: -6px; }
  .mobile-menu-toggle span::after { top: 6px; }

  .brand-mark {
    margin-left: 0;
    min-width: 150px;
    gap: 8px;
    font-size: 13px;
  }

  .brand-mark img {
    width: 34px;
    height: 32px;
  }

  h1 {
    font-size: 29px;
  }

  .header-actions {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
  }

  .header-actions .history-actions,
  .header-actions #monthEndToggle,
  .header-actions #returnToParent {
    display: none;
  }

  .user-menu > summary {
    min-height: 42px;
    padding: 4px 7px 4px 4px;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
  }

  .primary-button.save-state-button {
    right: auto;
    width: auto;
  }

  .month-end-review {
    right: 0;
    width: calc(100vw - 24px);
  }

  .primary-button,
  .status-pill {
    width: 100%;
  }

  main {
    width: calc(100vw - 24px);
    margin-top: 0;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
  }

  main > .summary-grid .metric-card {
    min-width: 0;
    min-height: 84px;
    padding: 11px 12px;
    gap: 5px;
    align-content: center;
  }

  main > .summary-grid .metric-card > span,
  main > .summary-grid .asset-total > span {
    overflow: hidden;
    color: rgba(226, 238, 243, 0.68);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  main > .summary-grid .metric-card > strong,
  main > .summary-grid .asset-total > strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 21px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  main > .summary-grid .metric-card > small {
    display: none;
  }

  main {
    display: block;
  }

  .assets-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-column: auto;
  }

  main > .summary-grid .assets-card .asset-total {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  main > .summary-grid .assets-card .asset-breakdown {
    display: none;
  }

  .asset-breakdown div {
    grid-template-columns: minmax(82px, 0.8fr) minmax(130px, 1.2fr);
    gap: 8px;
  }

  .asset-breakdown strong {
    gap: 6px;
    font-size: 16px;
  }

  .asset-breakdown em {
    font-size: 11px;
  }

  .month-end-summary,
  .month-end-checklist {
    grid-template-columns: 1fr;
  }

  .scenario-control {
    grid-template-columns: 1fr;
  }

  .affordability-chart-header {
    align-items: stretch;
  }

  .affordability-calculation-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .affordability-calculation-flow span:nth-child(2)::after {
    display: none;
  }

  .affordability-cash-equation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .affordability-cash-equation > div {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .metric-card {
    min-height: 104px;
    padding: 14px;
  }

  .metric-card strong {
    font-size: 23px;
  }

  .tabs {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 220;
    display: flex;
    width: min(320px, calc(100vw - 48px));
    max-height: none;
    flex-direction: column;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: max(14px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
    border: 0;
    border-right: 1px solid rgba(170, 224, 238, 0.18);
    border-radius: 0 18px 18px 0;
    background: rgba(10, 34, 47, 0.97);
    box-shadow: 24px 0 52px rgba(0, 8, 14, 0.34);
    transform: translateX(-105%);
    visibility: hidden;
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    backdrop-filter: blur(24px) saturate(1.08);
    transition: transform 190ms ease, visibility 190ms step-end;
  }

  .tabs:hover,
  .tabs:focus-within {
    width: min(320px, calc(100vw - 48px));
    border-radius: 0 18px 18px 0;
    background: rgba(10, 34, 47, 0.97);
    box-shadow: 24px 0 52px rgba(0, 8, 14, 0.34);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.mobile-menu-open .tabs {
    transform: translateX(0);
    visibility: visible;
    transition: transform 190ms ease, visibility 0s;
  }

  .mobile-nav-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 10px 8px;
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-nav-header > div {
    display: grid;
    gap: 1px;
  }

  .mobile-nav-header span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-nav-header strong {
    color: var(--text);
    font-size: 20px;
  }

  .mobile-nav-header button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 25px;
    line-height: 1;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 10, 16, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .mobile-menu-backdrop[hidden] {
    display: none;
  }

  .tabs .tab-group {
    flex: 0 0 auto;
    gap: 3px;
  }

  .dropdown-menu {
    max-height: none;
    min-width: 100%;
    gap: 3px;
    overflow: visible;
    padding: 0 0 3px 11px;
    border-left: 1px solid rgba(170, 224, 238, 0.12);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .tab,
  .subtab {
    width: 100%;
    height: auto;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 10px;
    overflow: visible;
    padding: 7px 10px;
    font-size: 14px;
    text-indent: 0;
    min-height: 42px;
  }

  .nav-label {
    display: inline;
  }

  .tabs:not(:hover):not(:focus-within) .nav-label {
    display: inline !important;
  }

  .subtab {
    padding-left: 10px;
  }

  .mobile-nav-tools {
    display: grid;
    gap: 6px;
    margin-top: auto;
    padding: 12px 4px 0;
    border-top: 1px solid var(--line-soft);
  }

  .mobile-nav-tools button {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(170, 224, 238, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--muted);
    font-weight: 800;
    text-align: left;
  }

  .panel {
    padding: 8px;
  }

  .chart-panel,
  .table-panel {
    padding: 10px;
  }

  .section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .button-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .inline-input {
    width: 100%;
  }

  .import-panel {
    grid-template-columns: 1fr;
  }

  .import-tool-panel,
  .import-tool-panel.transaction-import-panel {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    grid-template-columns: 1fr;
  }

  .property-drawer {
    top: 76px;
    right: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 96px);
  }

  .compact-readout-list {
    grid-template-columns: 1fr;
  }

  .copy-options {
    grid-template-columns: 1fr;
  }

  canvas {
    height: auto;
  }

  .table-wrap {
    border: 0;
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100% !important;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 14px;
    border: 1px solid var(--line-soft);
  }

  td {
    border-right: 0;
    text-align: left;
  }

  td input,
  td select,
  td textarea {
    text-align: left;
  }

  .rendered-table:not(.mobile-compact-table):not(.mobile-scroll-table) tbody {
    display: block;
  }

  .rendered-table:not(.mobile-compact-table):not(.mobile-scroll-table) tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: var(--radius-small);
  }

  .rendered-table:not(.mobile-compact-table):not(.mobile-scroll-table) td {
    display: grid;
    width: auto !important;
    min-width: 0;
    min-height: 50px;
    align-content: center;
    gap: 3px;
    padding: 7px 9px;
    border-right: 1px solid rgba(255, 255, 255, 0.055);
    text-align: left;
  }

  .rendered-table:not(.mobile-compact-table):not(.mobile-scroll-table) td::before {
    display: block;
    overflow: hidden;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .rendered-table:not(.mobile-compact-table):not(.mobile-scroll-table) td[data-label=""]::before {
    display: none;
  }

  .rendered-table:not(.mobile-compact-table):not(.mobile-scroll-table) .row-drag-cell {
    display: none;
  }

  .mobile-compact-table,
  .mobile-scroll-table {
    display: table;
    width: 100% !important;
    table-layout: fixed;
  }

  .mobile-compact-table thead,
  .mobile-scroll-table thead {
    display: table-header-group;
  }

  .mobile-compact-table tbody,
  .mobile-scroll-table tbody {
    display: table-row-group;
  }

  .mobile-compact-table tr,
  .mobile-scroll-table tr {
    display: table-row;
    width: auto !important;
    margin: 0;
    border: 0;
  }

  .mobile-compact-table th,
  .mobile-compact-table td,
  .mobile-scroll-table th,
  .mobile-scroll-table td {
    display: table-cell;
    width: auto !important;
    padding: 7px 5px;
    vertical-align: middle;
  }

  .mobile-compact-table th {
    font-size: 10px;
    line-height: 1.15;
  }

  .mobile-scroll-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--line-soft);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-scroll-table {
    width: 920px !important;
    min-width: 920px;
  }

  .mobile-scroll-table th,
  .mobile-scroll-table td {
    padding: 6px 7px;
  }

  .mobile-table-meta,
  .time-entry-mobile-meta {
    display: block;
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #transactionAccountsTable th:nth-child(1),
  #transactionAccountsTable td:nth-child(1),
  #transactionAccountsTable th:nth-child(2),
  #transactionAccountsTable td:nth-child(2),
  #transactionAccountsTable th:nth-child(4),
  #transactionAccountsTable td:nth-child(4),
  #transactionAccountsTable th:nth-child(5),
  #transactionAccountsTable td:nth-child(5),
  #transactionAccountsTable th:nth-child(7),
  #transactionAccountsTable td:nth-child(7) {
    display: none;
  }

  #transactionAccountsTable th:nth-child(3),
  #transactionAccountsTable td:nth-child(3) {
    width: 46% !important;
    text-align: left;
  }

  #transactionAccountsTable th:nth-child(6),
  #transactionAccountsTable td:nth-child(6) {
    width: 23% !important;
  }

  #transactionAccountsTable th:nth-child(8),
  #transactionAccountsTable td:nth-child(8) {
    width: 31% !important;
  }

  #transactionAccountsTable .account-import-meta {
    gap: 3px;
  }

  #transactionAccountsTable .account-import-meta strong,
  #transactionAccountsTable .source-badge {
    font-size: 9px;
  }

  #allocationTable th:nth-child(5),
  #allocationTable td:nth-child(5),
  #allocationTable th:nth-child(6),
  #allocationTable td:nth-child(6) {
    display: none;
  }

  #allocationTable th:nth-child(1),
  #allocationTable td:nth-child(1) { width: 35% !important; text-align: left; }
  #allocationTable th:nth-child(2),
  #allocationTable td:nth-child(2) { width: 24% !important; }
  #allocationTable th:nth-child(3),
  #allocationTable td:nth-child(3) { width: 17% !important; }
  #allocationTable th:nth-child(4),
  #allocationTable td:nth-child(4) { width: 24% !important; }

  #allocationTable input {
    min-width: 0;
    padding-inline: 6px;
    text-align: center;
  }

  #planningEventsTable th:nth-child(3),
  #planningEventsTable td:nth-child(3),
  #planningEventsTable th:nth-child(4),
  #planningEventsTable td:nth-child(4),
  #planningEventsTable th:nth-child(6),
  #planningEventsTable td:nth-child(6),
  #planningEventsTable th:nth-child(7),
  #planningEventsTable td:nth-child(7) {
    display: none;
  }

  #planningEventsTable th:nth-child(1),
  #planningEventsTable td:nth-child(1) { width: 13% !important; }
  #planningEventsTable th:nth-child(2),
  #planningEventsTable td:nth-child(2) { width: 57% !important; text-align: left; }
  #planningEventsTable th:nth-child(5),
  #planningEventsTable td:nth-child(5) { width: 30% !important; }

  #planningEventsTable input[type="checkbox"] {
    margin-inline: auto;
  }

  #timeEntriesTable {
    display: table;
    width: 100% !important;
    table-layout: fixed;
  }

  #timeEntriesTable colgroup { display: table-column-group; }
  #timeEntriesTable col { display: table-column; }
  #timeEntriesTable thead { display: table-header-group; }
  #timeEntriesTable tbody { display: table-row-group; }
  #timeEntriesTable tr {
    display: table-row;
    width: auto !important;
    margin: 0;
    border: 0;
  }

  #timeEntriesTable th,
  #timeEntriesTable td {
    display: table-cell;
    width: auto !important;
    padding: 6px 4px;
    vertical-align: middle;
  }

  #timeEntriesTable th:nth-child(3),
  #timeEntriesTable td:nth-child(3),
  #timeEntriesTable th:nth-child(4),
  #timeEntriesTable td:nth-child(4),
  #timeEntriesTable th:nth-child(6),
  #timeEntriesTable td:nth-child(6),
  #timeEntriesTable th:nth-child(8),
  #timeEntriesTable td:nth-child(8),
  #timeEntriesTable col:nth-child(3),
  #timeEntriesTable col:nth-child(4),
  #timeEntriesTable col:nth-child(6),
  #timeEntriesTable col:nth-child(8) {
    display: none;
  }

  #timeEntriesTable col:nth-child(1) { width: 9% !important; }
  #timeEntriesTable col:nth-child(2) { width: 51% !important; }
  #timeEntriesTable col:nth-child(5) { width: 24% !important; }
  #timeEntriesTable col:nth-child(7) { width: 16% !important; }

  #timeEntriesTable th {
    position: static;
    padding-right: 4px;
    font-size: 9px;
    line-height: 1.1;
  }

  #timeEntriesTable .table-column-resize-handle {
    display: none;
  }

  #timeEntriesTable .time-entry-primary-cell,
  #timeEntriesTable .time-entry-session-label {
    padding-left: 7px;
    text-align: left;
  }

  #timeEntriesTable .time-entry-project-row .time-entry-primary-cell,
  #timeEntriesTable .time-entry-task-cell,
  #timeEntriesTable .time-entry-session-label {
    padding-left: 8px;
  }

  #timeEntriesTable .time-entry-hierarchy-title strong {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: clip;
    white-space: normal;
  }

  #timeEntriesTable .time-entry-level-label {
    font-size: 8px;
  }

  #timeEntriesTable .time-entry-mobile-meta {
    white-space: normal;
  }

  #timeEntriesTable td:nth-child(5) {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #timeEntriesTable td:nth-child(7) {
    font-size: 11px;
  }

  #timeEntriesTable .entry-group-toggle,
  #timeEntriesTable .entry-group-toggle-nested {
    width: 24px;
    height: 24px;
    min-height: 24px;
    margin-left: 0;
  }

  #timeEntriesTable .time-entry-leaf-marker {
    width: 13px;
    height: 17px;
    margin-left: 3px;
  }

  #transactions > .transactions-wrap {
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-small);
  }

  #spendingDetailsTable {
    display: table;
    width: 100% !important;
    table-layout: fixed;
  }

  #spendingDetailsTable colgroup { display: table-column-group; }
  #spendingDetailsTable col { display: table-column; }
  #spendingDetailsTable thead { display: table-header-group; }
  #spendingDetailsTable tbody { display: table-row-group; }
  #spendingDetailsTable tr {
    display: table-row;
    width: auto !important;
    margin: 0;
    border: 0;
  }

  #spendingDetailsTable th,
  #spendingDetailsTable td {
    display: table-cell;
    width: auto !important;
    padding: 7px 5px;
    text-align: center;
    vertical-align: middle;
  }

  #spendingDetailsTable th:nth-child(4),
  #spendingDetailsTable th:nth-child(5),
  #spendingDetailsTable th:nth-child(7),
  #spendingDetailsTable th:nth-child(8),
  #spendingDetailsTable td:nth-child(4),
  #spendingDetailsTable td:nth-child(5),
  #spendingDetailsTable td:nth-child(7),
  #spendingDetailsTable td:nth-child(8),
  #spendingDetailsTable col:nth-child(4),
  #spendingDetailsTable col:nth-child(5),
  #spendingDetailsTable col:nth-child(7),
  #spendingDetailsTable col:nth-child(8) {
    display: none;
  }

  #spendingDetailsTable col:nth-child(1) { width: 9% !important; }
  #spendingDetailsTable col:nth-child(2) { width: 49% !important; }
  #spendingDetailsTable col:nth-child(3) { width: 18% !important; }
  #spendingDetailsTable col:nth-child(6) { width: 24% !important; }

  #spendingDetailsTable th {
    position: static;
    padding-right: 5px;
    font-size: 11px;
    line-height: 1.15;
  }

  #spendingDetailsTable .table-column-resize-handle,
  #spendingDetailsTable .spending-desktop-text {
    display: none;
  }

  #spendingDetailsTable .spending-mobile-text,
  #spendingDetailsTable .spending-mobile-meta {
    display: block;
  }

  #spendingDetailsTable .spending-primary-cell {
    text-align: left;
  }

  #spendingDetailsTable .spending-stack-primary,
  #spendingDetailsTable .spending-mobile-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #spendingDetailsTable .spending-mobile-meta {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.15;
  }

  #spendingDetailsTable .spending-amount-stack {
    text-align: right;
  }

  #spendingDetailsTable .entry-group-toggle {
    width: 25px;
    height: 25px;
    min-height: 25px;
  }

  #spendingDetailsTable .entry-group-toggle-nested {
    margin-left: 0;
  }

  #spendingDetailsTable .spending-transaction-description {
    -webkit-mask-image: none;
    mask-image: none;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .overview-beta-kpis {
    grid-template-columns: 1fr;
  }

  .overview-beta-range-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-beta-panel {
    padding: 11px;
  }

  .overview-beta-guidance-card {
    min-height: 232px;
    padding: 13px;
  }

  .overview-beta-guidance-grid {
    grid-template-columns: 1fr;
  }

  .overview-beta .overview-beta-canvas,
  .overview-beta .overview-beta-wide-canvas {
    height: 280px;
  }

  .affordability-calculation-inputs > div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 5px 0;
  }

  .affordability-calculation-inputs .source-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .affordability-cash-equation {
    gap: 8px;
  }

  .task-readouts {
    grid-template-columns: 1fr;
  }

  .tabs {
    grid-template-columns: 1fr;
  }

  .dropdown-menu {
    position: static;
    margin-top: 8px;
  }

  main > .summary-grid .metric-card > strong,
  main > .summary-grid .asset-total > strong {
    font-size: 19px;
  }
}