:root { color-scheme: dark; }
.workflow-notice { position:fixed; bottom:16px; right:16px; z-index:100; display:flex; align-items:center; flex-wrap:wrap; gap:8px; max-width:calc(100vw - 32px); padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-main); font-size:12px; box-shadow:0 4px 20px #0004; }
.workflow-notice[data-status="error_local"] { border-color:#ef4444; }
body.app-is-locked .workflow-notice { display:none; }
@media (max-width:767px) { .workflow-notice { bottom:calc(4.5rem + env(safe-area-inset-bottom)); } }
.dashboard-today-mode { height:auto !important; }
.dashboard-today-mode .dashboard-kpis, .dashboard-today-mode .dashboard-calendar-card { display:none !important; }
.dashboard-today-mode .dashboard-main-grid { display:block !important; }
html { min-height: 100%; background:var(--app-bg, #0b0d12); }
body { min-height: 100vh; height: auto; }
body { -webkit-font-smoothing: antialiased; }

/* Light theme overrides */
html:not(.dark) body { background: #ffffff; color: #0f172a; }
html:not(.dark) .bg-bg { background:#ffffff !important; }
html:not(.dark) .bg-bg-soft { background:#f8fafc !important; }
html:not(.dark) .bg-bg-card { background:#ffffff !important; }
html:not(.dark) .border-bg-border { border-color:#e5e7eb !important; }
html:not(.dark) .text-slate-200 { color:#0f172a !important; }
html:not(.dark) .text-slate-300 { color:#1e293b !important; }
html:not(.dark) .text-slate-400 { color:#475569 !important; }
html:not(.dark) .text-slate-500 { color:#64748b !important; }
html:not(.dark) .hover\:bg-bg-soft:hover { background:#f8fafc !important; }

/* Sidebar — clean white with subtle right border */
html:not(.dark) aside { background:#fbfbfd !important; border-color:#e5e7eb !important; }

/* Cards — pure white, no gray, subtle shadow */
html:not(.dark) .card {
  background:#ffffff !important;
  border-color:#eaecef !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03) !important;
}

/* Inputs — clean */
html:not(.dark) .input,
html:not(.dark) .select,
html:not(.dark) .textarea {
  background:#ffffff !important;
  border-color:#d1d5db !important;
  color:#0f172a !important;
}
html:not(.dark) .input::placeholder,
html:not(.dark) .textarea::placeholder { color:#94a3b8; }

/* Tabs — white pills */
html:not(.dark) .tabs { background:#f3f4f6 !important; border-color:#e5e7eb !important; }
html:not(.dark) .tabs button.active { background:#ffffff !important; color:#0f172a !important; box-shadow:0 1px 2px rgba(15,23,42,.08); }

/* Accent text in light mode — make readable */
html:not(.dark) .text-accent { color:#6d28d9 !important; }
html:not(.dark) .text-accent-soft { color:#7c3aed !important; }
html:not(.dark) .text-info { color:#0284c7 !important; }
html:not(.dark) .text-warn { color:#b45309 !important; }
html:not(.dark) .text-ok { color:#15803d !important; }
html:not(.dark) .text-bad { color:#dc2626 !important; }

/* Chip */
html:not(.dark) .chip { background:#ede9fe; color:#6d28d9; }

/* Empty state */
html:not(.dark) .empty { color:#64748b; }

/* Kanban / Calendar cells */
html:not(.dark) .kanban-card { background:#ffffff !important; border-color:#e5e7eb !important; }
html:not(.dark) .cal-day { background:#ffffff !important; border-color:#e5e7eb !important; }
html:not(.dark) .cal-day.today { background:#f5f3ff !important; border-color:#7c3aed !important; }

/* Modal */
html:not(.dark) .modal { background:#ffffff !important; border-color:#e5e7eb !important; box-shadow: 0 10px 40px rgba(15,23,42,.15); }

/* Progress bar bg */
html:not(.dark) .progress { background:#e5e7eb !important; }

.nav-link {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem; border-radius:.6rem;
  color: rgb(148 163 184); cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-link i { width:1rem; height:1rem; }
.nav-link:hover { background: rgba(255,255,255,.04); color:#e2e8f0; }
.nav-link.active { background: rgba(124,92,255,.15); color:#c4b5fd; }
html .nav-link { transition:background .15s, border-color .15s, box-shadow .15s; }
html:not(.dark) .nav-link:hover { background:#f1f5f9; color:#0f172a; }
html:not(.dark) .nav-link.active { background:#ede9fe; color:#6d28d9; }
.nav-link.global-search-trigger {
  width:100%;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  color:var(--text-main);
  font:inherit;
  margin-bottom:.35rem;
}
.nav-link.global-search-trigger kbd {
  margin-left:auto;
  border:1px solid var(--border);
  border-radius:.35rem;
  padding:.05rem .35rem;
  font-size:.62rem;
  line-height:1.2;
  color:var(--text-faint);
  background:var(--surface-muted);
}

.sidebar-tools {
  border-color:var(--border) !important;
}
.sidebar-tools-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:.45rem .65rem;
  border-radius:.6rem;
  color:var(--text-muted);
  transition:background .15s,color .15s;
}
.sidebar-tools-toggle:hover {
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  color:var(--text-strong);
}
.sidebar-tools-title {
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.sidebar-tools-list {
  overflow:hidden;
  max-height:600px;
  opacity:1;
  padding-top:.35rem;
  transform:translateY(0);
  transition:max-height .18s ease,opacity .16s ease,padding-top .18s ease,transform .18s ease;
}
.sidebar-tools.is-collapsed .sidebar-tools-list {
  max-height:0;
  opacity:0;
  padding-top:0;
  pointer-events:none;
  transform:translateY(4px);
}

.card {
  background: #161a23; border:1px solid #222836; border-radius:1rem;
  padding:1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.4);
}
html:not(.dark) .card { background:#fff; border-color:#e5e7eb; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08); }
.card.active-card {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  border-width: 2px !important;
}

.bank-cat-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.5rem;
  padding: 0.625rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bank-cat-card:hover {
  border-color: var(--accent);
}
.bank-cat-card.active {
  border-color: var(--accent) !important;
  background: var(--surface-muted) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

.bank-group-card {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem;
  overflow: hidden;
  font-family: inherit;
  margin-bottom: 0.75rem;
}
.bank-group-header {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.15s ease;
  user-select: none;
}
.bank-group-header:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-muted)) !important;
}
.bank-group-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main) !important;
}
.bank-group-header-meta {
  font-size: 0.625rem;
  color: var(--text-muted) !important;
  font-weight: 400;
}
.bank-cat-card .cat-name {
  color: var(--text-main);
  font-weight: 500;
}
.bank-cat-card .cat-amount {
  color: var(--danger, #ef4444);
  font-weight: 600;
}
.bank-cat-card .progress-bg {
  background: var(--progress-bg, #222836);
}
.bank-cat-card .progress-fill {
  background: var(--accent, #7c5cff);
}


.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem; border-radius:.6rem; font-size:.875rem; font-weight:500;
  border:1px solid transparent; transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, #7c5cff, #a594ff); color:white; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color:#cbd5e1; border-color:#222836; }
.btn-ghost:hover { background: rgba(255,255,255,.04); }
.btn-danger { background:var(--danger); color:var(--danger-contrast); border-color:var(--danger); }
.btn-danger:hover { filter: brightness(1.06); }
html:not(.dark) .btn-ghost { color:#334155; border-color:#e5e7eb; }
html:not(.dark) .btn-ghost:hover { background:#f8fafc; }

.input, .select, .textarea {
  width:100%; background:#11141b; border:1px solid #222836; color:#e2e8f0;
  padding:.55rem .7rem; border-radius:.55rem; font-size:.875rem; outline:none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color:#7c5cff; box-shadow:0 0 0 3px rgba(124,92,255,.15); }
html:not(.dark) .input, html:not(.dark) .select, html:not(.dark) .textarea { background:#fff; border-color:#e5e7eb; color:#0f172a; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; appearance:textfield; }

.tx-category-picker {
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.tx-category-label {
  color:var(--text-muted,#94a3b8);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.tx-category-chips {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-content:flex-start;
}
.tx-category-chip {
  display:inline-flex;
  align-items:center;
  gap:.05rem;
  max-width:100%;
  padding:.2rem .22rem .2rem .12rem;
  border-radius:999px;
  border:1px solid var(--border,#222836);
  background:var(--surface,#11141b);
  color:var(--text-main,#e2e8f0);
  font-size:.78rem;
  line-height:1.1;
  transition:background .13s,border-color .13s,color .13s;
}
.tx-category-chip:hover {
  border-color:color-mix(in srgb,var(--accent,#7c5cff) 45%,var(--border,#222836));
  background:color-mix(in srgb,var(--accent,#7c5cff) 10%,var(--surface,#11141b));
}
.tx-category-chip.is-selected {
  border-color:color-mix(in srgb,var(--accent,#7c5cff) 65%,var(--border,#222836));
  background:color-mix(in srgb,var(--accent,#7c5cff) 22%,var(--surface,#11141b));
  color:var(--text-strong,#f8fafc);
}
.tx-category-choice {
  min-width:0;
  max-width:100%;
  display:block;
  padding:.18rem .45rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:inherit;
  font:inherit;
  text-align:left;
}
.tx-category-delete {
  flex:0 0 auto;
  width:1.4rem;
  height:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--text-faint,#64748b);
  opacity:.42;
  transition:background .13s,color .13s,opacity .13s;
}
.tx-category-chip:hover .tx-category-delete,
.tx-category-delete:focus-visible {
  opacity:1;
}
.tx-category-delete:hover {
  opacity:1;
  color:var(--danger,#ef4444);
  background:var(--danger-soft,rgba(239,68,68,.14));
}
.tx-category-delete svg {
  width:.82rem;
  height:.82rem;
}
.tx-category-empty {
  width:100%;
  padding:.35rem 0;
  color:var(--text-muted,#94a3b8);
  font-size:.78rem;
}
.tx-category-new {
  display:flex;
  align-items:stretch;
  gap:.4rem;
}
.tx-category-new .tx-category-input { flex:1 1 auto; min-width:0; }
.tx-category-new-btn {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  padding:.5rem .75rem;
  border-radius:.55rem;
  border:1px solid color-mix(in srgb,var(--accent,#7c5cff) 35%,var(--border,#222836));
  background:color-mix(in srgb,var(--accent,#7c5cff) 10%,var(--surface,#11141b));
  color:var(--accent,#7c5cff);
  font-size:.78rem;
  font-weight:650;
  white-space:nowrap;
  transition:background .13s,opacity .13s;
}
.tx-category-new-btn:hover:not(:disabled) {
  background:color-mix(in srgb,var(--accent,#7c5cff) 17%,var(--surface,#11141b));
}
.tx-category-new-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.tx-category-hint {
  color:var(--text-faint,#64748b);
  font-size:.68rem;
  min-height:0;
  line-height:1.2;
}
.tx-category-hint:empty { display:none; }

/* Work modal: saved quick-pick values */
.tms-stepper {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.tms-presets {
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.tms-presets-label {
  color:var(--text-muted,#94a3b8);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.tms-presets-row {
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
}
.tms-preset {
  display:inline-flex;
  align-items:center;
  gap:.05rem;
  padding:.12rem .18rem .12rem .08rem;
  border-radius:999px;
  border:1px solid var(--border,#222836);
  background:var(--surface-muted,#1a1f2b);
  color:var(--text-main,#e2e8f0);
  font-size:.75rem;
  line-height:1.1;
  transition:background .13s,border-color .13s,color .13s;
}
.tms-preset:hover {
  border-color:color-mix(in srgb,var(--accent,#7c5cff) 45%,var(--border,#222836));
}
.tms-preset.is-selected {
  border-color:color-mix(in srgb,var(--accent,#7c5cff) 65%,var(--border,#222836));
  background:color-mix(in srgb,var(--accent,#7c5cff) 22%,var(--surface-muted,#1a1f2b));
  color:var(--text-strong,#f8fafc);
}
.tms-preset-choice {
  padding:.16rem .45rem;
  border-radius:999px;
  color:inherit;
  font:inherit;
  white-space:nowrap;
}
.tms-preset-del {
  flex:0 0 auto;
  width:1.25rem;
  height:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--text-faint,#64748b);
  opacity:.45;
  transition:background .13s,color .13s,opacity .13s;
}
.tms-preset:hover .tms-preset-del,
.tms-preset-del:focus-visible { opacity:1; }
.tms-preset-del:hover {
  opacity:1;
  color:var(--danger,#ef4444);
  background:var(--danger-soft,rgba(239,68,68,.14));
}
.tms-preset-del svg { width:.75rem; height:.75rem; }
.tms-preset-add {
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  padding:.28rem .6rem;
  border-radius:999px;
  border:1px dashed color-mix(in srgb,var(--accent,#7c5cff) 40%,var(--border,#222836));
  background:transparent;
  color:var(--accent,#7c5cff);
  font-size:.75rem;
  line-height:1.1;
  white-space:nowrap;
  transition:background .13s,opacity .13s;
}
.tms-preset-add:hover:not(:disabled) {
  background:color-mix(in srgb,var(--accent,#7c5cff) 10%,transparent);
}
.tms-preset-add:disabled {
  opacity:.4;
  cursor:not-allowed;
  color:var(--text-faint,#64748b);
  border-color:var(--border,#222836);
}

.chip {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .5rem; border-radius:999px; font-size:.7rem; font-weight:500;
  background: rgba(124,92,255,.15); color:#c4b5fd;
}

.progress { height:8px; background:#222836; border-radius:999px; overflow:hidden; }
.progress > div { height:100%; background: linear-gradient(90deg,#7c5cff,#a594ff); }
html:not(.dark) .progress { background:#e5e7eb; }

.kanban-col { min-height: 200px; }
.kanban-card { background:#11141b; border:1px solid #222836; border-radius:.6rem; padding:.6rem .75rem; cursor:grab; }
html:not(.dark) .kanban-card { background:#f8fafc; border-color:#e5e7eb; }
.kanban-card:active { cursor:grabbing; }
.sortable-ghost { opacity:.4; }
.sortable-chosen { transform: scale(1.01); }

.habit-cell { width:22px; height:22px; border-radius:5px; background:#1c2230; cursor:pointer; transition: background .15s, transform .12s; }
.habit-cell:hover { transform: scale(1.18); }
.habit-cell.done { background: linear-gradient(135deg,#7c5cff,#22c55e); }
.habit-cell.future { cursor:not-allowed; opacity:.35; background:transparent; border:1px dashed #2a3142; }
html:not(.dark) .habit-cell { background:#e5e7eb; }
html:not(.dark) .habit-cell.future { border-color:#cbd5e1; background:transparent; }

/* ===== Habits cards (Today section) ===== */
.h-card {
  position:relative; display:flex; flex-direction:column; gap:.65rem;
  padding:1rem 1.1rem 1rem 1.25rem;
  background:#161a23; border:1px solid #222836; border-radius:1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.4);
  overflow:hidden; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.h-card:hover { transform: translateY(-1px); border-color:#2f3647; }
.h-card.is-done { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(124,92,255,.06)), #161a23; border-color:rgba(34,197,94,.35); }
.h-card.is-inactive { opacity:.55; }
.h-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--hc, #7c5cff);
}
html:not(.dark) .h-card { background:#fff; border-color:#eaecef; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03); }
html:not(.dark) .h-card.is-done { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(124,92,255,.06)), #fff; }

.h-card-top { display:flex; align-items:center; gap:.75rem; position:relative; }
.h-card-archive-btn { flex:0 0 auto; padding:4px !important; opacity:.55; transition: opacity .15s, color .15s, background .15s; }
.h-card-archive-btn:hover { opacity:1; color:var(--hc, #7c5cff); }
.h-card-archive-btn.is-open { opacity:1; color:var(--hc, #7c5cff); background: rgba(124,92,255,.12); }
.h-archive-strip { margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(124,92,255,.05); border:1px solid rgba(124,92,255,.12); }
html:not(.dark) .h-archive-strip { background:#f6f7fb; border-color:#e5e7eb; }
.h-archive-stats { display:flex; align-items:center; gap:.5rem; font-size:11px; color:#94a3b8; margin-bottom:6px; }
.h-archive-cells { display:flex; flex-wrap:wrap; gap:3px; align-items:flex-start; }
.h-archive-cell { display:flex; flex-direction:column; align-items:center; gap:2px; }
.h-archive-num { font-size:9px; color:#64748b; line-height:1; }
.h-archive-wd { font-size:8px; color:#475569; line-height:1; text-transform:lowercase; }
.h-emoji {
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; border-radius:.7rem;
  background: color-mix(in srgb, var(--hc, #7c5cff) 16%, transparent);
}
.h-title { font-weight:600; font-size:.95rem; line-height:1.2; color:#e2e8f0; }
html:not(.dark) .h-title { color:#0f172a; }
.h-sub { font-size:.7rem; color:#94a3b8; margin-top:.15rem; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

.streak-pill {
  display:inline-flex; align-items:center; gap:.2rem;
  padding:.1rem .45rem; border-radius:999px; font-size:.7rem; font-weight:600;
  background: rgba(245,158,11,.14); color:#f59e0b;
}
.streak-pill.cold { background: rgba(148,163,184,.12); color:#94a3b8; }

.h-ring { position:relative; width:48px; height:48px; flex:0 0 48px; }
.h-ring svg { transform: rotate(-90deg); }
.h-ring .ring-bg { stroke:#222836; }
html:not(.dark) .h-ring .ring-bg { stroke:#e5e7eb; }
.h-ring .ring-fg { stroke: var(--hc, #7c5cff); transition: stroke-dashoffset .35s; }
.h-ring.is-complete .ring-fg { stroke: #22c55e !important; }
.h-ring.is-complete .ring-text { color: #22c55e !important; font-weight: 800 !important; }
.h-ring .ring-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#e2e8f0;
}
html:not(.dark) .h-ring .ring-text { color:#0f172a; }

.h-btn-do {
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  padding:.5rem .9rem; border-radius:.7rem; font-size:.8rem; font-weight:600;
  background: var(--hc, #7c5cff); color:#fff; border:1px solid transparent;
  cursor:pointer; transition: filter .12s, transform .05s;
  white-space:nowrap;
}
.h-btn-do:hover { filter: brightness(1.1); }
.h-btn-do:active { transform: translateY(1px); }
.h-btn-do.done { background:transparent; color:#22c55e; border-color: rgba(34,197,94,.45); }

.h-tpl-list {
  display:flex; flex-wrap:wrap; gap:.25rem .5rem;
  margin-bottom:.15rem;
  font-size:.72rem; color:#94a3b8;
}
.h-tpl-item {
  display:inline-flex; align-items:center; gap:.15rem;
  padding:.1rem .2rem .1rem .45rem; border-radius:6px;
  background: color-mix(in srgb, var(--hc, #7c5cff) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--hc, #7c5cff) 25%, transparent);
  color:#cbd5e1; line-height:1.2;
}
html:not(.dark) .h-tpl-item { color:#334155; }
.step-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .55rem; border-radius:999px; font-size:.72rem;
  background:#11141b; border:1px solid #222836; color:#cbd5e1;
  cursor:pointer; transition: background .12s, border-color .12s, color .12s;
  user-select:none;
}
.step-pill:hover { border-color: var(--hc, #7c5cff); color:#e2e8f0; }
.step-pill.checked {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color:#f0fdf4 !important;
}
.step-pill .dot {
  width:.62rem; height:.62rem; border-radius:50%;
  border:1.5px solid #64748b; background:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .15s ease;
  box-sizing:border-box; position:relative;
}
.step-pill:hover .dot { border-color: var(--hc, #7c5cff); }
.step-pill.checked .dot {
  background: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
}
.step-pill.checked .dot::after {
  content: '';
  position: absolute;
  top: 1px; left: 2.5px;
  width: 2.5px; height: 5px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  display: block;
}
html:not(.dark) .step-pill { background:#f8fafc; border-color:#e5e7eb; color:#334155; }
html:not(.dark) .step-pill.checked {
  background: #e8f7ee !important;
  border-color: #86efac !important;
  color: #14532d !important;
}
.step-time {
  display:inline-block; font-variant-numeric: tabular-nums; font-weight:600;
  font-size:.68rem; padding: 1px 5px; border-radius:4px;
  background: color-mix(in srgb, var(--hc, #7c5cff) 22%, transparent);
  color: color-mix(in srgb, var(--hc, #7c5cff) 85%, #fff);
  letter-spacing: .02em;
}
.step-pill.checked .step-time {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #bbf7d0 !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
html:not(.dark) .step-time { color: color-mix(in srgb, var(--hc, #7c5cff) 65%, #000); }
html:not(.dark) .step-pill.checked .step-time {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}
.step-sep { color:#64748b; font-weight:400; opacity:.7; margin: 0 1px; }
.step-name { font-weight:500; }

.h-stats-row {
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  font-size:.7rem; color:#94a3b8;
  border-top:1px dashed #222836; padding-top:.55rem; margin-top:.15rem;
}
html:not(.dark) .h-stats-row { border-top-color:#e5e7eb; }
.h-stat-num { color:#e2e8f0; font-weight:600; }
html:not(.dark) .h-stat-num { color:#0f172a; }

.h-summary {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:.6rem; margin-bottom:1rem;
}
.h-summary-tile {
  padding:.85rem 1rem; border-radius:.9rem;
  background:#161a23; border:1px solid #222836;
  display:flex; flex-direction:column; gap:.15rem;
}
html:not(.dark) .h-summary-tile { background:#fff; border-color:#eaecef; }
.h-summary-tile .label { font-size:.7rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; }
.h-summary-tile .value { font-size:1.4rem; font-weight:700; color:#e2e8f0; display:flex; align-items:baseline; gap:.3rem; }
html:not(.dark) .h-summary-tile .value { color:#0f172a; }
.h-summary-tile .value .small { font-size:.85rem; color:#94a3b8; font-weight:500; }

#view-habits, #view-food, #view-body { max-width: 1500px; margin: 0 auto; }
.food-page-head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.55rem;
}
.food-page-head h1 { font-size:1.15rem; line-height:1.2; font-weight:700; letter-spacing:0; }
.food-compact-page {
  display:grid; grid-template-rows:auto auto minmax(0, 1fr);
  gap:.6rem; min-height:calc(100vh - 150px);
}
.food-summary-card {
  display:block;
  border:1px solid #222836; border-radius:.85rem; background:#161a23;
  padding:.65rem; min-width:0;
}
html:not(.dark) .food-summary-card { background:#fff; border-color:#e5e7eb; }
.food-summary-head {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.75rem; align-items:center;
}
.food-summary-quick {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0;
}
.food-summary-quick .kcal {
  font-size:1.1rem; line-height:1.1; font-weight:850; color:#e2e8f0;
}
html:not(.dark) .food-summary-quick .kcal { color:#0f172a; }
.food-summary-quick .muted { color:var(--text-muted); font-size:.78rem; }
.food-summary-toggle {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid #222836; border-radius:999px; padding:.36rem .55rem;
  color:var(--text-main); background:rgba(255,255,255,.03);
  font-size:.76rem; font-weight:750;
}
html:not(.dark) .food-summary-toggle { background:#f8fafc; border-color:#e5e7eb; }
.food-summary-toggle i { transition:transform .16s ease; }
.food-summary-details {
  display:none; grid-template-columns:minmax(190px, .9fr) minmax(0, 1.35fr) minmax(210px, .75fr);
  gap:.65rem; align-items:stretch; margin-top:.65rem;
}
.food-summary-card.is-expanded .food-summary-details { display:grid; }
.food-summary-main {
  display:flex; flex-direction:column; justify-content:center; min-width:0;
  border-radius:.7rem; background:rgba(124,92,255,.10); padding:.65rem .75rem;
}
.food-summary-main .kcal { font-size:1.75rem; line-height:1; font-weight:850; color:#e2e8f0; }
html:not(.dark) .food-summary-main .kcal { color:#0f172a; }
.food-mini-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.45rem; min-width:0; }
.food-mini-stat {
  border-radius:.7rem; border:1px solid #222836; padding:.55rem .6rem; min-width:0;
  background:rgba(255,255,255,.025);
}
html:not(.dark) .food-mini-stat { background:#f8fafc; border-color:#e5e7eb; }
.food-mini-stat .label {
  font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.food-mini-stat .value { margin-top:.1rem; font-size:.95rem; line-height:1.1; font-weight:800; color:#e2e8f0; }
html:not(.dark) .food-mini-stat .value { color:#0f172a; }
.food-water-mini {
  border-radius:.7rem; border:1px solid #222836; padding:.55rem .6rem; min-width:0;
  background:rgba(56,189,248,.08);
}
html:not(.dark) .food-water-mini { background:#f0f9ff; border-color:#bae6fd; }
.food-recipe-quick-grid {
  display:grid; grid-template-columns:minmax(0, 1fr) 90px auto;
  gap:.5rem; align-items:end;
}
.food-library-quick-grid {
  display:grid; grid-template-columns:minmax(0, 1fr) auto;
  gap:.5rem; align-items:end;
}
.food-plans-strip {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  border:1px solid #222836; border-radius:.85rem; background:#161a23;
  padding:.52rem .6rem; min-width:0;
}
html:not(.dark) .food-plans-strip { background:#fff; border-color:#e5e7eb; }
.food-plans-strip .meta {
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; min-width:0;
  font-size:.78rem; color:var(--text-muted);
}
.food-plan-list { display:grid; gap:.55rem; }
.food-plan-card {
  border:1px solid #222836; border-radius:.8rem; background:#161a23;
  padding:.65rem; min-width:0;
}
html:not(.dark) .food-plan-card { background:#fff; border-color:#e5e7eb; }
.food-plan-card-title {
  font-size:.95rem; line-height:1.2; font-weight:800; color:var(--text-main);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.food-plan-meta {
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  color:var(--text-muted); font-size:.72rem; margin-top:.18rem;
}
.food-plan-source-grid {
  display:grid; grid-template-columns:minmax(0, 1fr) 124px 92px auto;
  gap:.45rem; align-items:end;
}
.food-plan-item-list {
  display:grid; gap:.4rem; max-height:190px; overflow:auto; padding-right:.1rem;
}
.food-plan-item-row {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.5rem; align-items:center;
  border:1px solid #283042; border-radius:.72rem; background:rgba(255,255,255,.025);
  padding:.46rem .55rem; min-width:0;
}
html:not(.dark) .food-plan-item-row { background:#f8fafc; border-color:#e5e7eb; }
.food-plan-item-title {
  display:flex; align-items:center; gap:.4rem; min-width:0;
  font-size:.82rem; font-weight:750; color:var(--text-main);
}
.food-weekday-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.food-weekday-pill {
  display:inline-flex; align-items:center; gap:.3rem;
  border:1px solid #283042; border-radius:999px; padding:.28rem .48rem;
  font-size:.72rem; font-weight:750; color:var(--text-main); background:rgba(255,255,255,.025);
}
html:not(.dark) .food-weekday-pill { background:#f8fafc; border-color:#e5e7eb; }
.food-weekday-pill input { accent-color:var(--accent); }
.food-ingredients-details {
  border:1px dashed #2b3446; border-radius:.75rem;
  padding:.55rem .65rem;
}
html:not(.dark) .food-ingredients-details { border-color:#d8dee9; }
.food-ingredients-details summary {
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:.78rem; font-weight:750; color:var(--text-main);
}
.food-ingredients-details summary::-webkit-details-marker { display:none; }
.food-ingredients-details summary .hint {
  color:var(--text-muted); font-size:.68rem; font-weight:650;
}
.food-ingredients-details summary i { transition:transform .16s ease; color:var(--text-muted); }
.food-ingredients-details[open] summary i { transform:rotate(180deg); }
.food-ingredient-grid {
  display:grid; grid-template-columns:minmax(0, 1fr) 82px;
  gap:.45rem; margin-top:.55rem;
}
.food-ingredient-line {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.4rem; align-items:center;
}
.food-ingredient-line + .food-ingredient-line { margin-top:.35rem; }
.food-meals-board {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.55rem; min-height:0;
}
.food-grid {
  display:grid; grid-template-columns:minmax(0, 1.18fr) minmax(320px, .82fr);
  gap:.75rem; align-items:start;
}
.food-stat-grid {
  display:grid; grid-template-columns:repeat(5, minmax(130px, 1fr));
  gap:.55rem; margin-bottom:.75rem;
}
.food-tile {
  border:1px solid #222836; border-radius:.8rem; background:#161a23;
  padding:.7rem .75rem; min-width:0;
}
html:not(.dark) .food-tile { background:#fff; border-color:#e5e7eb; }
.food-tile .label {
  font-size:.68rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.045em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.food-tile .value { margin-top:.18rem; font-size:1.05rem; line-height:1.15; font-weight:800; color:#e2e8f0; }
html:not(.dark) .food-tile .value { color:#0f172a; }
.food-track {
  height:6px; border-radius:999px; background:rgba(148,163,184,.18);
  overflow:hidden; margin-top:.55rem;
}
.food-fill { height:100%; border-radius:999px; background:var(--accent); }
.food-meal-card {
  border:1px solid #222836; border-radius:.85rem; background:#161a23;
  padding:.55rem .6rem; min-width:0; min-height:0;
  display:flex; flex-direction:column;
}
html:not(.dark) .food-meal-card { background:#fff; border-color:#e5e7eb; }
.food-meal-items {
  min-height:0; max-height:clamp(110px, 22vh, 230px);
  overflow:auto; padding-right:.12rem;
}
.food-entry-row {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.5rem; align-items:center;
  padding:.34rem 0; border-top:1px dashed #283042;
  font-size:.82rem;
}
html:not(.dark) .food-entry-row { border-top-color:#e5e7eb; }
.food-entry-row:first-of-type { border-top:0; }
.food-pill {
  display:inline-flex; align-items:center; gap:.25rem; border-radius:999px;
  padding:.18rem .48rem; background:rgba(124,92,255,.12); color:#c4b5fd;
  font-size:.68rem; font-weight:650; white-space:nowrap;
}
html:not(.dark) .food-pill { color:#6d28d9; background:#ede9fe; }
.food-empty {
  border:1px dashed #2b3446; border-radius:.65rem; padding:.5rem;
  color:#94a3b8; text-align:center; font-size:.76rem;
}
html:not(.dark) .food-empty { border-color:#d8dee9; color:#64748b; }
.body-page-head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.7rem;
}
.body-page-head h1 { font-size:1.15rem; line-height:1.2; font-weight:700; letter-spacing:0; }
.body-layout {
  display:grid; grid-template-columns:minmax(0, 1.42fr) minmax(330px, .58fr);
  gap:.75rem; align-items:start;
}
.body-main,
.body-side {
  display:grid; gap:.75rem; min-width:0; align-content:start;
}
.body-side { position:sticky; top:1rem; }
.body-summary {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0; margin-bottom:0; overflow:hidden;
  border:1px solid #222836; border-radius:.85rem; background:#161a23;
}
html:not(.dark) .body-summary { background:#fff; border-color:#e5e7eb; }
.body-summary .food-tile {
  border:0; border-radius:0; background:transparent; padding:.62rem .7rem;
  min-height:72px;
}
html:not(.dark) .body-summary .food-tile { background:transparent; border-color:transparent; }
.body-summary .food-tile + .food-tile { border-left:1px solid #222836; }
html:not(.dark) .body-summary .food-tile + .food-tile { border-left-color:#e5e7eb; }
.body-summary .food-tile .value { font-size:.98rem; }
.body-grid {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, .52fr);
  gap:.75rem; align-items:start;
}
.body-chart-card,
.body-form-card,
.body-recommend-card,
.body-food-card,
.body-history-card {
  border:1px solid #222836; border-radius:.85rem; background:#161a23;
  padding:.85rem; min-width:0;
}
html:not(.dark) .body-chart-card,
html:not(.dark) .body-form-card,
html:not(.dark) .body-recommend-card,
html:not(.dark) .body-food-card,
html:not(.dark) .body-history-card { background:#fff; border-color:#e5e7eb; }
.body-chart {
  min-height:218px; overflow:hidden; border-radius:.75rem;
  background:linear-gradient(180deg, rgba(124,92,255,.10), rgba(124,92,255,.02));
  border:1px solid rgba(124,92,255,.18);
}
html.theme-caramel .body-chart {
  background:linear-gradient(180deg, rgba(194,112,41,.12), rgba(194,112,41,.03));
  border-color:rgba(194,112,41,.24);
}
.body-chart svg { display:block; width:100%; height:218px; min-height:0; }
.body-form-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.5rem;
}
.body-form-grid .full { grid-column:1 / -1; }
.body-measures-details {
  grid-column:1 / -1;
  border:1px dashed #2b3446; border-radius:.75rem;
  padding:.55rem .65rem;
}
html:not(.dark) .body-measures-details { border-color:#d8dee9; }
.body-measures-details summary {
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:.78rem; font-weight:750; color:var(--text-main);
}
.body-measures-details summary::-webkit-details-marker { display:none; }
.body-measures-details summary .hint {
  color:var(--text-muted); font-size:.68rem; font-weight:650;
}
.body-measures-details summary i { transition:transform .16s ease; color:var(--text-muted); }
.body-measures-details[open] summary i { transform:rotate(180deg); }
.body-measures-grid { margin-top:.65rem; }
.body-history-list {
  max-height:190px; overflow:auto; padding-right:.15rem;
}
.body-history-row {
  display:grid; grid-template-columns:94px minmax(0, 1fr) auto; gap:.65rem; align-items:center;
  padding:.55rem 0; border-top:1px dashed #283042; font-size:.82rem;
}
html:not(.dark) .body-history-row { border-top-color:#e5e7eb; }
.body-history-row:first-child { border-top:0; }
.body-measure-chip {
  display:inline-flex; align-items:center; gap:.25rem; border-radius:999px;
  padding:.16rem .45rem; margin:.12rem .18rem .12rem 0;
  background:rgba(124,92,255,.12); color:#c4b5fd; font-size:.68rem; font-weight:650;
}
html:not(.dark) .body-measure-chip { background:#ede9fe; color:#6d28d9; }
.body-note {
  color:var(--text-muted); font-size:.76rem; margin-top:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.body-food-stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(86px, 1fr));
  gap:.4rem; margin:.65rem 0;
}
.body-food-stat {
  border:1px solid #283042; border-radius:.72rem; padding:.45rem .5rem;
  background:rgba(255,255,255,.025); min-width:0;
}
html:not(.dark) .body-food-stat { background:#f8fafc; border-color:#e5e7eb; }
.body-food-stat .label {
  font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.body-food-stat .value { margin-top:.08rem; font-size:.92rem; line-height:1.1; font-weight:850; color:var(--text-main); }
.body-food-list { display:grid; gap:.32rem; margin-top:.55rem; }
.body-food-row {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.5rem; align-items:center;
  padding:.38rem 0; border-top:1px dashed #283042; font-size:.8rem;
}
html:not(.dark) .body-food-row { border-top-color:#e5e7eb; }
.body-food-row:first-child { border-top:0; }
@media (max-width: 1180px) {
  .body-food-card > .flex:first-child { align-items:flex-start; flex-direction:column; }
  .body-food-card > .flex:first-child > .flex { width:100%; justify-content:space-between; }
}
.body-bmi-score {
  width:3.6rem; height:3.6rem; border-radius:.85rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.08rem; font-weight:850; color:#fff;
  background:var(--accent);
  box-shadow:0 10px 24px rgba(124,92,255,.22);
}
.body-range-track {
  position:relative; height:8px; border-radius:999px;
  background:linear-gradient(90deg, #38bdf8 0 28%, #22c55e 28% 62%, #f59e0b 62% 82%, #ef4444 82% 100%);
  overflow:hidden;
}
.body-range-marker {
  position:absolute; top:-4px; width:16px; height:16px; border-radius:999px;
  background:#fff; border:3px solid var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.25);
  transform:translateX(-50%);
}
.body-rec-note {
  border-radius:.65rem; border:1px dashed #2b3446;
  padding:.55rem .65rem; color:var(--text-muted); font-size:.75rem;
}
html:not(.dark) .body-rec-note { border-color:#d8dee9; }
@media (max-width: 1180px) {
  .food-grid { grid-template-columns:1fr; }
  .food-stat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .food-summary-details { grid-template-columns:1fr; }
  .body-layout { grid-template-columns:1fr; }
  .body-side { position:static; }
  .body-grid { grid-template-columns:1fr; }
  .body-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .body-summary .food-tile:nth-child(3) { border-left:0; border-top:1px solid #222836; }
  .body-summary .food-tile:nth-child(4) { border-top:1px solid #222836; }
  html:not(.dark) .body-summary .food-tile:nth-child(3),
  html:not(.dark) .body-summary .food-tile:nth-child(4) { border-top-color:#e5e7eb; }
}
@media (max-width: 640px) {
  .food-page-head { align-items:flex-start; flex-direction:column; }
  .food-stat-grid { grid-template-columns:1fr; }
  .food-meals-board { grid-template-columns:1fr; }
  .food-mini-stats { grid-template-columns:1fr; }
  .food-summary-head { grid-template-columns:1fr; }
  .food-summary-toggle { justify-content:center; }
  .food-plan-source-grid { grid-template-columns:1fr 1fr; }
  .food-plan-source-grid > label:first-child { grid-column:1 / -1; }
  .food-plan-source-grid button { grid-column:1 / -1; }
  .food-recipe-quick-grid { grid-template-columns:1fr 90px; }
  .food-library-quick-grid,
  .food-ingredient-grid { grid-template-columns:1fr; }
  .food-recipe-quick-grid button { grid-column:1 / -1; }
  .body-page-head { align-items:flex-start; flex-direction:column; }
  .body-summary { grid-template-columns:1fr; }
  .body-summary .food-tile + .food-tile { border-left:0; border-top:1px solid #222836; }
  html:not(.dark) .body-summary .food-tile + .food-tile { border-top-color:#e5e7eb; }
  .body-form-grid { grid-template-columns:1fr; }
  .body-history-row { grid-template-columns:1fr auto; }
  .body-history-row > :first-child { grid-column:1 / -1; }
}
.habits-page-head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.55rem;
}
.habits-page-head h1 { font-size:1.15rem; line-height:1.2; font-weight:700; letter-spacing:0; }
.habits-page-head .btn { padding:.42rem .7rem; border-radius:.55rem; font-size:.8rem; }
.habits-compact-panel {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 420px);
  gap:.55rem; align-items:stretch; margin-bottom:.65rem;
}
.habits-compact-main,
.habits-summary-wrap {
  background:#161a23; border:1px solid #222836; border-radius:.75rem;
  padding:.5rem; min-width:0;
}
html:not(.dark) .habits-compact-main,
html:not(.dark) .habits-summary-wrap { background:#fff; border-color:#e5e7eb; }
.habits-date-row {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.35rem; min-width:0;
}
.habits-date-row h3 { min-width:0; font-size:.86rem; line-height:1.15; }
.habits-date-row .btn { font-size:.68rem; padding:.22rem .48rem !important; border-radius:.45rem; }
.habits-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface-muted, #11141b);
  border: 1px solid var(--border, #222836);
  border-radius: 0.55rem;
}
.habit-view-btn {
  padding: 0.22rem 0.55rem;
  border-radius: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.14s ease;
}
.habit-view-btn:hover {
  color: var(--text-strong, #ffffff);
}
.habit-view-btn.is-active {
  background: var(--surface, #161a23);
  color: var(--text-strong, #ffffff);
  border-color: var(--border, #222836);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.habit-day-strip {
  margin:0; padding:.25rem .35rem; border-radius:.6rem;
  background:#11141b; border:1px solid #222836;
}
html:not(.dark) .habit-day-strip { background:#f8fafc; border-color:#e5e7eb; }
.habit-day-strip .icon-btn { width:26px; height:26px; border-radius:.4rem; }

/* Habits Month Calendar */
.habit-month-calendar-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.85rem;
  box-shadow: var(--shadow-soft) !important;
}
.habit-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.habit-cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px;
  min-height: 60px;
  border-radius: 0.6rem;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--text-main);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.habit-cal-cell:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-strong));
}
.habit-cal-cell.is-selected {
  outline: 2px solid var(--accent);
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-strong)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.habit-cal-cell.is-today:not(.is-selected) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-strong));
}
.habit-cal-cell.is-other {
  opacity: 0.35;
}
.habit-cal-cell.is-other:hover {
  opacity: 0.7;
}
.habit-cal-cell.is-future {
  opacity: 0.45;
  cursor: default;
}
.habit-cal-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1;
}
.habit-cal-day-num {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-strong);
}
.habit-cal-today-tag {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.habit-cal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 1.5px 5px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.habit-cal-status-badge.is-done {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.habit-cal-status-badge.is-partial {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}
.habit-cal-status-badge.is-missed {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.habit-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
#habitsBody .h-summary {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.35rem; margin:0; height:100%;
}
#habitsBody .h-summary-tile {
  padding:.45rem .5rem; border-radius:.55rem; gap:.05rem; min-width:0;
}
#habitsBody .h-summary-tile .label {
  font-size:.56rem; line-height:1.05; letter-spacing:.035em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#habitsBody .h-summary-tile .value { font-size:1rem; line-height:1.1; gap:.2rem; }
#habitsBody .h-summary-tile .value .small { font-size:.62rem; }
#habitsBody .card { padding:.65rem .75rem; border-radius:.7rem; }
#habitsBody .h-card {
  gap:.36rem; padding:.58rem .62rem .58rem .72rem; border-radius:.68rem;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
#habitsBody .h-card::before { width:3px; }
#habitsBody .h-card-top { gap:.48rem; }
#habitsBody .h-emoji {
  width:30px; height:30px; flex-basis:30px; font-size:17px; border-radius:.5rem;
}
#habitsBody .h-title { font-size:.82rem; line-height:1.1; }
#habitsBody .h-sub { margin-top:0; gap:.25rem; font-size:.62rem; }
#habitsBody .streak-pill { padding:0 .32rem; font-size:.62rem; }
#habitsBody .h-ring { width:34px; height:34px; flex-basis:34px; }
#habitsBody .h-ring svg { width:34px; height:34px; }
#habitsBody .h-ring .ring-text { font-size:.56rem; }
#habitsBody .h-btn-do {
  padding:.3rem .55rem; border-radius:.5rem; font-size:.68rem; gap:.22rem;
}
#habitsBody .step-pill {
  padding:.13rem .38rem; font-size:.64rem; gap:.18rem;
}
#habitsBody .step-time { font-size:.58rem; padding:0 4px; }
#habitsBody .h-tpl-list { gap:.2rem; margin-bottom:0; font-size:.64rem; }
#habitsBody .h-tpl-item { padding:.05rem .15rem .05rem .32rem; }
#habitsBody .h-stats-row {
  gap:.5rem; font-size:.62rem; padding-top:.32rem; margin-top:0;
}
#habitsBody .h-archive-strip {
  margin:2px 0 3px; padding:5px 6px; border-radius:8px;
}
#habitsBody .h-archive-stats { margin-bottom:4px; font-size:10px; }
#habitsBody .h-archive-cells { gap:2px; }
#habitsBody .icon-btn { width:26px; height:26px; border-radius:.4rem; }
.habits-stats-details {
  margin-top:.25rem; border:1px solid #222836; border-radius:.7rem;
  background:#161a23; overflow:hidden;
}
html:not(.dark) .habits-stats-details { background:#fff; border-color:#e5e7eb; }
.habits-stats-details > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.48rem .65rem; font-size:.78rem; color:#cbd5e1;
}
.habits-stats-details > summary::-webkit-details-marker { display:none; }
.habits-stats-details > summary::after {
  content:'+'; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:.4rem; color:#94a3b8; background:rgba(255,255,255,.04);
}
.habits-stats-details[open] > summary::after { content:'-'; }
html:not(.dark) .habits-stats-details > summary { color:#334155; }
.habits-stats-details .card { margin:0 !important; border-width:1px 0 0 0; border-radius:0; }

/* Habit Month Calendar & View Navigation */
.habits-month-container { width: 100%; }
.habits-month-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.habits-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-muted, #1a1e29);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a3142);
}
.habit-view-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.habit-view-btn:hover {
  color: var(--text-main, #f1f5f9);
}
.habit-view-btn.is-active {
  background: var(--accent, #7c5cff);
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.habit-month-calendar-card {
  background: var(--surface, #11141b);
  border: 1px solid var(--border, #222836);
  border-radius: 0.75rem;
  padding: 0.75rem;
}
.habit-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.habit-cal-cell {
  position: relative;
  min-height: 64px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid var(--border, #222836);
  background: var(--surface-strong, #161b26);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
  user-select: none;
}
.habit-cal-cell:hover {
  border-color: var(--accent, #7c5cff);
  transform: translateY(-1px);
}
.habit-cal-cell.is-selected {
  border-color: var(--accent, #7c5cff) !important;
  outline: 2px solid var(--accent, #7c5cff) !important;
  outline-offset: -1px;
  z-index: 2;
}
.habit-cal-cell.is-today {
  border-color: var(--accent, #7c5cff);
}
.habit-cal-cell.is-other {
  opacity: 0.35;
}
.habit-cal-cell.is-future {
  opacity: 0.55;
}
.habit-cal-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.habit-cal-day-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
  line-height: 1;
}
.habit-cal-cell.is-today .habit-cal-day-num {
  color: var(--accent, #7c5cff);
}
.habit-cal-today-tag {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 3.5px;
  border-radius: 3px;
  background: var(--accent, #7c5cff);
  color: #ffffff;
  line-height: 1.1;
}
.habit-cal-rate {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.habit-cal-cell-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  width: 100%;
  margin-top: 2px;
}
.habit-cal-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1.5px 4.5px;
  border-radius: 4px;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
}
.habit-cal-status-badge.is-done {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.habit-cal-status-badge.is-partial {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.habit-cal-status-badge.is-missed {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.habit-cal-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.habit-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .habits-compact-panel { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .habits-page-head { align-items:flex-start; }
  .habits-date-row { align-items:flex-start; flex-direction:column; }
  #habitsBody .h-summary-tile .label { white-space:normal; }
  .habit-day-strip { padding:.25rem; }
  .habit-month-grid { gap: 3px !important; }
  .habit-cal-cell { min-height: 50px !important; padding: 3px 4px !important; }
  .habit-cal-day-num { font-size: 0.72rem !important; }
  .habit-cal-status-badge { padding: 1px 3px !important; font-size: 0.58rem !important; }
  .habit-cal-dot { width: 4px !important; height: 4px !important; }
}

.matrix-cell { min-height: 160px; }

.divider { height:1px; background:#222836; }
html:not(.dark) .divider { background:#e5e7eb; }

.tabs { display:flex; gap:.25rem; padding:.25rem; background:#11141b; border:1px solid #222836; border-radius:.7rem; width:fit-content; margin-bottom:1.25rem; flex-wrap:wrap; }
.tabs button { padding:.45rem .9rem; border-radius:.5rem; font-size:.875rem; color:#94a3b8; transition: background .15s, color .15s; display:inline-flex; align-items:center; gap:.4rem; }
.tabs button:hover { color:#e2e8f0; }
.tabs button.active { background:#161a23; color:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
html:not(.dark) .tabs { background:#f1f5f9; border-color:#e5e7eb; }
html:not(.dark) .tabs button { color:#475569; }
html:not(.dark) .tabs button:hover { color:#0f172a; }
html:not(.dark) .tabs button.active { background:#fff; color:#0f172a; }

.empty { text-align:center; padding:2rem 1rem; color:#94a3b8; }
.empty i { width:2rem; height:2rem; margin:0 auto .5rem; opacity:.5; display:block; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:.5rem;
  color:#94a3b8; transition: background .15s, color .15s;
  flex-shrink:0;
}
.icon-btn:hover { background: rgba(255,255,255,.06); color:#e2e8f0; }
.icon-btn.danger:hover { background: rgba(239,68,68,.12); color:#ef4444; }
html:not(.dark) .icon-btn { color:#64748b; }
html:not(.dark) .icon-btn:hover { background:#f1f5f9; color:#0f172a; }
html:not(.dark) .icon-btn.danger:hover { background:#fee2e2; color:#dc2626; }

.dash-bell {
  position:relative;
  border:1px solid #222836;
  background:#161a23;
}
.dash-bell.has-missed {
  color:#fff;
  border-color:rgba(245,158,11,.55);
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(124,92,255,.14));
}
.dash-bell-badge {
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  color:#0f172a;
  background:#fbbf24;
  border:2px solid #0b0d12;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
html:not(.dark) .dash-bell { background:#fff; border-color:#e5e7eb; }
html:not(.dark) .dash-bell-badge { border-color:#fff; }

.reminder-dashboard {
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(260px, .75fr);
  gap:.8rem;
  align-items:stretch;
  margin-bottom:.8rem;
}
.reminder-hero {
  border:1px solid #222836;
  border-radius:.85rem;
  background:#161a23;
  padding:1rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.9rem;
  min-width:0;
}
.reminder-hero-icon {
  width:42px;
  height:42px;
  border-radius:.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(124,92,255,.14);
  color:#a594ff;
  flex-shrink:0;
}
.reminder-stat-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.55rem;
}
.reminder-stat {
  border:1px solid #222836;
  border-radius:.75rem;
  background:#11141b;
  padding:.75rem;
  min-width:0;
}
.reminder-stat .label {
  font-size:.68rem;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.reminder-stat .value {
  margin-top:.15rem;
  font-size:1.25rem;
  line-height:1.1;
  font-weight:800;
  color:#e2e8f0;
}
.notice-card,
.reminder-row {
  border:1px solid #222836;
  border-radius:.85rem;
  background:#161a23;
  padding:.75rem;
  transition:border-color .15s, background .15s;
}
.notice-card.is-missed,
.reminder-row.is-due {
  border-color:rgba(245,158,11,.65);
  background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(22,26,35,1) 48%);
}
.reminder-row.is-off { opacity:.72; }
.notice-icon,
.reminder-row-icon {
  width:34px;
  height:34px;
  border-radius:.65rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#11141b;
  color:#94a3b8;
  flex-shrink:0;
}
.notice-card.is-missed .notice-icon,
.reminder-row.is-due .reminder-row-icon {
  color:#fbbf24;
  background:rgba(245,158,11,.14);
}
html:not(.dark) .reminder-hero,
html:not(.dark) .notice-card,
html:not(.dark) .reminder-row {
  background:#fff;
  border-color:#e5e7eb;
}
html:not(.dark) .reminder-stat,
html:not(.dark) .notice-icon,
html:not(.dark) .reminder-row-icon {
  background:#f8fafc;
  border-color:#e5e7eb;
}
html:not(.dark) .reminder-stat .value { color:#0f172a; }
@media (max-width: 900px) {
  .reminder-dashboard { grid-template-columns:1fr; }
}

.dashboard-month-body {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.dashboard-month-grid {
  flex: 1 0 auto;
  min-width: 0;
  grid-auto-rows: minmax(84px, 1fr);
}
.cal-indicators {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cal-day {
  position:relative; min-height:84px; padding:.4rem;
  border:1px solid #222836; border-radius:.5rem;
  background:#11141b; cursor:pointer; transition: border-color .15s, background .15s;
  display:flex; flex-direction:column; gap:.2rem;
}
.cal-day > * {
  flex-shrink: 0;
  min-width: 0;
}
.cal-day:hover { border-color:#7c5cff; }
.cal-day.today { border-color:#7c5cff; background: rgba(124,92,255,.07); }
.cal-day.other { opacity:.35; }
.cal-day .num { font-size:.8rem; color:#94a3b8; }
.cal-day.today .num { color:#c4b5fd; font-weight:600; }
html:not(.dark) .cal-day.today .num { color:#6d28d9; }
.cal-dot { width:6px; height:6px; flex-shrink:0; border-radius:999px; display:inline-block; }
html:not(.dark) .cal-day { background:#fff; border-color:#e5e7eb; }
html:not(.dark) .cal-day.today { background:#ede9fe; }

/* Markdown */
.md h1 { font-size:1.5rem; font-weight:700; margin:.75em 0 .5em; }
.md h2 { font-size:1.25rem; font-weight:700; margin:.7em 0 .4em; }
.md h3 { font-size:1.1rem; font-weight:600; margin:.6em 0 .3em; }
.md p { margin:.4em 0; }
.md ul { list-style: disc; padding-left:1.25rem; margin:.4em 0; }
.md ol { list-style: decimal; padding-left:1.25rem; margin:.4em 0; }
.md code { background:#11141b; padding:.1em .3em; border-radius:.3em; font-size:.85em; }
.md pre { background:#11141b; padding:.75rem; border-radius:.5rem; overflow:auto; }
.md a { color:#a594ff; text-decoration: underline; }
.md blockquote { border-left:3px solid #7c5cff; padding-left:.75rem; color:#94a3b8; margin:.5em 0; }
html:not(.dark) .md code, html:not(.dark) .md pre { background:#f1f5f9; }

/* Modal */
.modal-backdrop {
  position: fixed; inset:0; background: var(--modal-backdrop);
  display:flex; align-items:center; justify-content:center; z-index:9999999;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
@media (max-width: 767px) { .modal-backdrop { padding: .5rem; padding-top: max(.5rem, env(safe-area-inset-top)); padding-bottom: max(.5rem, env(safe-area-inset-bottom)); } }
.modal {
  background:var(--surface); border:1px solid var(--border); border-radius:1rem;
  width:100%; max-width: 480px; padding:1.25rem; box-shadow:var(--shadow-soft), 0 28px 70px -34px rgba(0,0,0,.65);
  max-height: calc(100vh - 2rem); display:flex; flex-direction:column;
  color:var(--text-main);
}
.modal.modal-wide { max-width: 660px; }

/* Quick-action mode: a home-screen shortcut lands straight on the form, so the app
   chrome stays hidden until that form is closed. */
body.app-quick-mode #sidebar,
body.app-quick-mode #sidebarOverlay,
body.app-quick-mode #mobileTopBar,
body.app-quick-mode #bottomNav,
body.app-quick-mode main {
  display: none !important;
}
body.app-quick-mode .modal-backdrop { background: var(--modal-backdrop); }
.modal > [data-body] { overflow-y:auto; flex:1 1 auto; min-height:0; padding-right:.25rem; margin-right:-.25rem; }
.modal h3 { color:var(--text-strong); }
.modal-dialog-icon {
  width:2.4rem; height:2.4rem; border-radius:.8rem;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-muted));
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
}
.modal-dialog-icon.danger {
  background:var(--danger-soft);
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 40%,var(--border));
}
.modal.global-search-modal {
  max-width:min(720px, calc(100vw - 1.5rem));
  padding:1rem;
}
.modal.global-search-modal [data-actions]:empty { display:none; }
.global-search-shell {
  display:grid;
  gap:.75rem;
}
.global-search-input-wrap {
  display:flex;
  align-items:center;
  gap:.55rem;
  border:1px solid var(--border);
  background:var(--surface-strong);
  border-radius:.85rem;
  padding:.58rem .72rem;
}
.global-search-input-wrap:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.global-search-input-wrap i {
  width:1rem;
  height:1rem;
  color:var(--text-muted);
  flex:0 0 auto;
}
.global-search-input {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-strong);
  font-size:.95rem;
}
.global-search-input::placeholder { color:var(--text-faint); }
.global-search-results {
  display:grid;
  gap:.35rem;
  max-height:min(54vh, 460px);
  overflow:auto;
  padding-right:.15rem;
}
.global-search-item {
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:.65rem;
  align-items:center;
  text-align:left;
  border:1px solid transparent;
  border-radius:.8rem;
  padding:.62rem .68rem;
  color:var(--text-main);
  background:transparent;
  transition:background .15s,border-color .15s,transform .05s;
}
.global-search-item:hover,
.global-search-item:focus-visible {
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-muted));
  border-color:color-mix(in srgb,var(--accent) 34%,var(--border));
  outline:0;
}
.global-search-item:active { transform:translateY(1px); }
.global-search-icon {
  width:2.1rem;
  height:2.1rem;
  border-radius:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb,var(--accent) 13%,var(--surface-muted));
  color:var(--accent);
}
.global-search-icon i { width:1rem; height:1rem; }
.global-search-title {
  color:var(--text-strong);
  font-weight:700;
  font-size:.9rem;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.global-search-detail {
  margin-top:.15rem;
  color:var(--text-muted);
  font-size:.75rem;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.global-search-meta {
  color:var(--text-faint);
  font-size:.68rem;
  white-space:nowrap;
}
.global-search-empty {
  border:1px dashed var(--border);
  border-radius:.85rem;
  padding:1.25rem;
  color:var(--text-muted);
  text-align:center;
  font-size:.86rem;
}
body.app-is-locked {
  overflow:hidden;
  background:var(--app-bg) !important;
}
body.app-is-locked #sidebar,
body.app-is-locked main,
body.app-is-locked #sidebarOverlay {
  visibility:hidden;
  pointer-events:none;
}
.password-lock-screen {
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 34%),
    var(--app-bg);
  color:var(--text-main);
}
.password-lock-card {
  width:min(420px, calc(100vw - 2rem));
  border:1px solid var(--border);
  border-radius:1rem;
  background:var(--surface);
  box-shadow:var(--shadow-soft), 0 28px 70px -34px rgba(0,0,0,.65);
  padding:1.15rem;
}
.password-lock-logo {
  width:2.6rem;
  height:2.6rem;
  border-radius:.75rem;
}
.password-lock-error {
  display:none;
  border:1px solid color-mix(in srgb,var(--danger) 42%,var(--border));
  background:var(--danger-soft);
  color:var(--danger);
  border-radius:.7rem;
  padding:.55rem .7rem;
  font-size:.82rem;
}
.password-lock-error.is-visible { display:block; }
.password-settings-note {
  border:1px solid var(--border);
  background:var(--surface-muted);
  border-radius:.75rem;
  padding:.65rem .75rem;
  color:var(--text-muted);
  font-size:.82rem;
  line-height:1.45;
}
.app-dialog-message {
  color:var(--text-main);
  line-height:1.55;
  white-space:pre-wrap;
}
html:not(.dark) .modal { background:#fff; border-color:#e5e7eb; }

/* Drag handles for dashboard widgets */
.widget { position: relative; }
.widget-drag { position:absolute; top:.6rem; right:.6rem; opacity:.4; cursor:grab; }
.widget-drag:hover { opacity:.9; }

/* ===== Scrollbar: fully hidden everywhere ===== */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer,
::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Legacy classes — keep as no-ops so existing code doesn't break */
.custom-scrollbar-native-hidden,
.custom-scrollbar-gutter-y,
.custom-scrollbar-gutter-x { /* no-op */ }
.custom-scrollbar-native-hidden::-webkit-scrollbar { display:none !important; }
.custom-scrollbar-layer,
.custom-scrollbar-rail,
.custom-scrollbar-thumb { display:none !important; }
.hide-scrollbar::-webkit-scrollbar { display:none !important; }
.hide-scrollbar { scrollbar-width:none !important; }

/* ===== Fade-edge scroll indicators ===== */
/* Vertical fade — add .scroll-fade-y to any overflow-y container */
.scroll-fade-y {
  position: relative;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 18px,
    black calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 18px,
    black calc(100% - 18px),
    transparent 100%
  );
}

/* Sidebar special: only fade bottom (top stays sharp) */
#sidebar {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(100% - 28px),
    transparent 100%
  );
}

/* Modal body: fade edges only while there is actually content to scroll */
.modal > [data-body].is-scrollable.has-scroll-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 12px);
  mask-image: linear-gradient(to bottom, transparent 0, black 12px);
}
.modal > [data-body].is-scrollable.has-scroll-bottom {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent 100%);
}
.modal > [data-body].is-scrollable.has-scroll-top.has-scroll-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 12px,
    black calc(100% - 12px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 12px,
    black calc(100% - 12px),
    transparent 100%
  );
}

/* ============== MOBILE OPTIMIZATIONS ============== */
/* iOS safe-area + dynamic viewport for the whole app */
:root { --mobile-bar-h: 0px; }
body { padding-bottom: env(safe-area-inset-bottom); }

/* Tablet & phone */
@media (max-width: 1023px) {
  .modal { max-width: 92vw; }

  #view-dashboard .dashboard-shell {
    height: auto !important;
    min-height: 0 !important;
  }
  #view-dashboard .dashboard-main-grid {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    align-items: start;
  }
  #view-dashboard .dashboard-calendar-card,
  #view-dashboard .dashboard-month-body,
  #view-dashboard .dashboard-side {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #view-dashboard .dashboard-month-body {
    flex: 0 0 auto !important;
  }
  #view-dashboard .dashboard-month-grid {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    grid-auto-rows: minmax(76px, auto) !important;
  }
  #view-dashboard .dashboard-month-grid .cal-day {
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  :root { --mobile-bar-h: 56px; }

  /* Compact cards */
  .card { padding: 0.85rem; border-radius: 0.75rem; }
  .card.\!p-4 { padding: 0.85rem !important; }
  .card.\!p-3 { padding: 0.7rem !important; }

  /* Smaller calendar cells */
  .cal-day { min-height: 52px; padding: 0.2rem; gap: 0.1rem; }
  .cal-day .num { font-size: 0.7rem; }

  /* Tabs scroll horizontally */
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; padding: .4rem .7rem; font-size: 0.8rem; }

  /* Modal: nearly full-width, scroll fits viewport */
  .modal {
    max-width: 100%;
    padding: 1rem;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: .85rem;
  }

  /* Tables shrink + horizontal scroll wrapper */
  table { font-size: 0.78rem; }
  .card .overflow-auto, .card .overflow-x-auto { -webkit-overflow-scrolling: touch; }

  /* Buttons compact */
  .btn { padding: .45rem .7rem; font-size: 0.85rem; }

  /* Headings smaller */
  h1.text-2xl, h1.text-xl { font-size: 1.15rem; }
  h2, h3 { font-size: 0.95rem; }

  /* Inputs touch-friendly (prevents iOS zoom on focus) */
  .input, .select, .textarea { font-size: 16px; padding: .55rem .7rem; }

  /* Touch targets */
  .icon-btn { width: 38px; height: 38px; }
  .nav-link { padding: 0.7rem 0.85rem; }

  /* Drag handles useless on touch */
  .widget-drag { display: none; }

  /* Dashboard: relax fixed 100vh so content scrolls naturally */
  #view-dashboard > div[style*="100vh"] { height: auto !important; min-height: calc(100dvh - var(--mobile-bar-h) - 1rem); }

  #view-dashboard .dashboard-month-grid {
    grid-auto-rows: minmax(64px, auto) !important;
  }
  #view-dashboard .dashboard-month-grid .cal-day {
    min-height: 64px !important;
  }
  #view-dashboard .dashboard-month-grid .cal-day > div {
    min-width: 0;
  }

  /* Greeting line: the quick-action buttons stay to the right of the greeting instead of
     wrapping underneath it. The greeting gives way (with an ellipsis) when space is tight. */
  #view-dashboard .dashboard-top h1 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #view-dashboard .dashboard-top .icon-btn {
    width: 34px !important;
    height: 34px !important;
  }

  /* Dashboard KPI chips: blocks under the greeting, two per row, instead of a
     sideways-scrolling strip where the last chips were cut off. */
  #view-dashboard .dashboard-kpis > * {
    flex: 1 1 calc(50% - .25rem);
    min-width: 0;
  }

  /* The four quick actions moved into the pinned bar on phones; the bell stays beside the
     greeting, and on desktop the bar is hidden so the dashboard row keeps everything. */
  #view-dashboard .dashboard-quick-actions .dash-quick-btn { display: none !important; }
  #mobileTopActions .icon-btn {
    width: 34px !important;
    height: 34px !important;
  }

  /* Pin the mobile bar. `position: sticky` did not hold because the
     `overflow-x: hidden` on html/body turns them into scroll containers and defeats it,
     so the bar scrolled away with the content. */
  #mobileTopBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: max(.75rem, env(safe-area-inset-top));
  }
  body { padding-top: calc(var(--mobile-bar-h) + env(safe-area-inset-top)); }

  /* Sidebar drawer width */
  #sidebar { width: 80vw !important; max-width: 320px; }

  /* Main content padding tighter */
  main { padding: 0.75rem !important; }
}

/* Standalone-only responsive fixes for dense app screens */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { min-width: 0; }
  button, input, textarea, select { touch-action: manipulation; }

  main,
  .view,
  #financeBody,
  #goalsBody,
  #habitsBody,
  #journalBody,
  #view-reminders {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .view > *,
  .card,
  .modal,
  .modal > [data-body],
  .modal [data-body] > * {
    min-width: 0;
  }

  .card { overflow-wrap: anywhere; }
  .card .flex,
  .modal .flex { min-width: 0; }

  .btn,
  .chip { max-width: 100%; }
  .btn { justify-content: center; }
  .btn,
  .icon-btn,
  .nav-link { -webkit-tap-highlight-color: transparent; }
  .chip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabs {
    gap: .25rem;
    padding: .2rem;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    scroll-snap-align: start;
  }
  .tabs button i,
  .btn i,
  .icon-btn i,
  .nav-link i { flex: 0 0 auto; }

  .modal [data-actions] { flex-wrap: wrap; }
  .modal [data-actions] .btn {
    flex: 1 1 auto;
    min-width: 8rem;
  }
  .modal [class~="grid-cols-2"],
  .modal [class~="grid-cols-3"],
  .modal [data-f="mode-interval"] {
    grid-template-columns: 1fr !important;
  }
  .modal [class*="grid-cols-[80px_1fr]"] {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
  .modal [data-icons] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .modal [data-icons] .icon-btn { width: 100%; }

  #financeBody [class*="h-[420px]"],
  #financeBody [class*="h-[720px]"] {
    height: auto !important;
    max-height: none !important;
  }
  #financeBody [class~="h-full"],
  #financeBody [class~="h-1/2"] { height: auto !important; }
  #financeBody [class~="flex"][class~="gap-4"][class~="h-full"],
  #financeBody [class~="flex"][class~="gap-4"][class~="h-1/2"] {
    flex-direction: column !important;
  }
  #financeBody [class~="w-1/3"],
  #financeBody [class~="w-2/3"],
  #financeBody [class~="w-1/2"] {
    width: 100% !important;
  }
  #financeBody [class~="border-r"] { border-right-width: 0 !important; }
  #financeBody [class~="pr-4"] { padding-right: 0 !important; }
  #financeBody [class~="pl-4"] { padding-left: 0 !important; }
  #financeBody [style*="width:160px"][style*="height:160px"] {
    width: 128px !important;
    height: 128px !important;
    margin: 0 auto;
  }
  #financeBody .card > .flex.items-center.gap-3 { align-items: flex-start; }
  #legend-pie,
  #legend-pie-income {
    width: 100%;
    max-height: none !important;
  }
  #financeBody [class*="min-h-[60px]"] {
    min-height: 48px !important;
    padding: .15rem;
  }

  #goalsBody [class~="grid-cols-2"][class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
  #goalsBody .kanban-col { min-height: auto; }
  #goalsBody .kanban-card { cursor: default; }

  #notesList { max-height: 40dvh !important; }
  #noteEditor textarea,
  #journalBodyInput,
  #journalEditBody,
  #ruleBody {
    min-height: 38dvh;
  }
  #noteEditor .md,
  #journalBody .md { overflow-wrap: anywhere; }

  #view-reminders .card > .flex.items-start { gap: .65rem; }

  @supports selector(:has(*)) {
    .card:has(table) { overflow-x: auto; }
  }
  .card table { min-width: max-content; }
}

@media (max-width: 480px) {
  .tabs button { padding: .38rem .6rem; }
  .mobile-topbar-title { max-width: 44vw; }

  #financeBody [class~="grid-cols-2"],
  #financeBody [class~="grid-cols-3"],
  #goalsBody [class~="grid-cols-2"],
  #habitsBody [class~="grid-cols-2"],
  #journalBody [class~="grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }
  #financeBody .card > .flex.items-center.gap-3 {
    flex-direction: column;
    align-items: stretch;
  }
  #financeBody [style*="width:160px"][style*="height:160px"] {
    width: 112px !important;
    height: 112px !important;
  }
  #financeBody [class*="min-h-[60px]"] { min-height: 42px !important; }

  #view-dashboard .dashboard-month-grid {
    grid-auto-rows: minmax(58px, auto) !important;
  }
  #view-dashboard .dashboard-month-grid .cal-day {
    min-height: 58px !important;
  }
  #view-dashboard .dashboard-month-grid .cal-day .text-\[10px\] {
    font-size: 9px !important;
    line-height: 1.15;
  }

  .h-card { padding: .85rem; }
  .h-card-top { align-items: flex-start; }
  .h-archive-strip { margin-left: -.2rem; margin-right: -.2rem; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .card { padding: 0.7rem; }
  .btn { padding: .4rem .6rem; font-size: 0.8rem; }
  h1.text-2xl, h1.text-xl { font-size: 1.05rem; }
  .modal [data-actions] .btn { flex-basis: 100%; }
  .modal [data-icons] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .modal [class*="grid-cols-[80px_1fr]"] { grid-template-columns: 1fr !important; }
  .icon-btn { width: 36px; height: 36px; }
}

/* ===== Theme system: white / caramel / dark ===== */
:root {
  --app-bg:#050608;
  --app-soft:#0b0d12;
  --surface:#11141b;
  --surface-strong:#161a23;
  --surface-muted:#1a1f2b;
  --border:#222836;
  --border-strong:#2f3647;
  --text-main:#e2e8f0;
  --text-strong:#f8fafc;
  --text-muted:#94a3b8;
  --text-faint:#a0aec0;
  --accent:#a594ff;
  --accent-soft:#a594ff;
  --accent-contrast:#ffffff;
  --progress-bg:#1a1f2b;
  --scrollbar-track:rgba(255,255,255,.03);
  --scrollbar-thumb:#2f3647;
  --scrollbar-thumb-hover:#4a5368;
  --modal-backdrop:rgba(0,0,0,.78);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.14);
  --danger-contrast:#ffffff;
  --shadow-soft:0 1px 2px rgba(0,0,0,.22), 0 12px 28px -18px rgba(0,0,0,.55);
  --chip-bg:rgba(124,92,255,.15);
  --chip-text:#c4b5fd;
}
html.theme-white {
  color-scheme: light;
  --app-bg:#ffffff;
  --app-soft:#f7f9fc;
  --surface:#ffffff;
  --surface-strong:#ffffff;
  --surface-muted:#f1f5f9;
  --border:#e4e8ef;
  --border-strong:#d8dee8;
  --text-main:#172033;
  --text-strong:#0f172a;
  --text-muted:#52637a;
  --text-faint:#52637a;
  --accent:#6020bf;
  --accent-soft:#8b5cf6;
  --accent-contrast:#ffffff;
  --progress-bg:#e7ebf2;
  --scrollbar-track:#eef2f7;
  --scrollbar-thumb:#c6d0df;
  --scrollbar-thumb-hover:#98a8bd;
  --modal-backdrop:rgba(15,23,42,.45);
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --danger-contrast:#ffffff;
  --shadow-soft:0 1px 2px rgba(15,23,42,.04), 0 12px 30px -22px rgba(15,23,42,.22);
  --chip-bg:#ede9fe;
  --chip-text:#6d28d9;
}
html.theme-caramel {
  color-scheme: light;
  --app-bg:#f3eadb;
  --app-soft:#eadbc5;
  --surface:#fff7ea;
  --surface-strong:#fffaf2;
  --surface-muted:#efdfc9;
  --border:#dbc2a1;
  --border-strong:#c9a87c;
  --text-main:#3a2618;
  --text-strong:#24150c;
  --text-muted:#654b33;
  --text-faint:#654b33;
  --accent:#71370f;
  --accent-soft:#d18a45;
  --accent-contrast:#fff8ed;
  --progress-bg:#dfc8aa;
  --scrollbar-track:#eadbc5;
  --scrollbar-thumb:#c9a87c;
  --scrollbar-thumb-hover:#a97845;
  --modal-backdrop:rgba(68,42,18,.48);
  --danger:#b93e2f;
  --danger-soft:rgba(185,62,47,.14);
  --danger-contrast:#fff8ed;
  --shadow-soft:0 1px 2px rgba(92,57,23,.08), 0 16px 36px -26px rgba(92,57,23,.38);
  --chip-bg:#f3dcc0;
  --chip-text:#8a4f1f;
}
html.theme-dark { color-scheme: dark; }

html.theme-white body,
html.theme-caramel body,
html.theme-dark body {
  background:var(--app-bg) !important;
  color:var(--text-main) !important;
}
html.theme-white .bg-bg,
html.theme-caramel .bg-bg,
html.theme-dark .bg-bg { background:var(--app-bg) !important; }
html.theme-white .bg-bg-soft,
html.theme-caramel .bg-bg-soft,
html.theme-dark .bg-bg-soft { background:var(--app-soft) !important; }
html.theme-white .bg-bg-card,
html.theme-caramel .bg-bg-card,
html.theme-dark .bg-bg-card { background:var(--surface-strong) !important; }
html.theme-white .border-bg-border,
html.theme-caramel .border-bg-border,
html.theme-dark .border-bg-border { border-color:var(--border) !important; }

html.theme-white .bg-slate-950,
html.theme-white .bg-slate-900,
html.theme-white .bg-slate-800,
html.theme-caramel .bg-slate-950,
html.theme-caramel .bg-slate-900,
html.theme-caramel .bg-slate-800,
html.theme-dark .bg-slate-950,
html.theme-dark .bg-slate-900,
html.theme-dark .bg-slate-800 {
  background:var(--surface) !important;
}
html.theme-white .border-slate-900,
html.theme-white .border-slate-800,
html.theme-white .border-slate-700,
html.theme-caramel .border-slate-900,
html.theme-caramel .border-slate-800,
html.theme-caramel .border-slate-700,
html.theme-dark .border-slate-900,
html.theme-dark .border-slate-800,
html.theme-dark .border-slate-700 {
  border-color:var(--border) !important;
}

html.theme-white .text-slate-100,
html.theme-white .text-slate-200,
html.theme-white .text-slate-300,
html.theme-caramel .text-slate-100,
html.theme-caramel .text-slate-200,
html.theme-caramel .text-slate-300,
html.theme-dark .text-slate-100,
html.theme-dark .text-slate-200,
html.theme-dark .text-slate-300 {
  color:var(--text-main) !important;
}
html.theme-white .text-slate-400,
html.theme-caramel .text-slate-400,
html.theme-dark .text-slate-400 { color:var(--text-muted) !important; }
html.theme-white .text-slate-500,
html.theme-white .text-slate-600,
html.theme-caramel .text-slate-500,
html.theme-caramel .text-slate-600,
html.theme-dark .text-slate-500,
html.theme-dark .text-slate-600 { color:var(--text-faint) !important; }

html.theme-white aside,
html.theme-caramel aside,
html.theme-dark aside {
  background:var(--app-soft) !important;
  border-color:var(--border) !important;
}
html.theme-white .card,
html.theme-white .h-card,
html.theme-white .h-summary-tile,
html.theme-white .habits-compact-main,
html.theme-white .habits-summary-wrap,
html.theme-white .habits-stats-details,
html.theme-white .reminder-hero,
html.theme-white .notice-card,
html.theme-white .reminder-row,
html.theme-caramel .card,
html.theme-caramel .h-card,
html.theme-caramel .h-summary-tile,
html.theme-caramel .habits-compact-main,
html.theme-caramel .habits-summary-wrap,
html.theme-caramel .habits-stats-details,
html.theme-caramel .reminder-hero,
html.theme-caramel .notice-card,
html.theme-caramel .reminder-row,
html.theme-dark .card,
html.theme-dark .h-card,
html.theme-dark .h-summary-tile,
html.theme-dark .habits-compact-main,
html.theme-dark .habits-summary-wrap,
html.theme-dark .habits-stats-details,
html.theme-dark .reminder-hero,
html.theme-dark .notice-card,
html.theme-dark .reminder-row {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text-main) !important;
  box-shadow:var(--shadow-soft) !important;
}
html.theme-white .dashboard-calendar-card,
html.theme-caramel .dashboard-calendar-card,
html.theme-dark .dashboard-calendar-card { background:var(--surface) !important; }
html.theme-white .h-card.is-done,
html.theme-caramel .h-card.is-done,
html.theme-dark .h-card.is-done {
  background:linear-gradient(135deg, rgba(34,197,94,.10), color-mix(in srgb,var(--accent) 7%,var(--surface))) !important;
  border-color:rgba(34,197,94,.35) !important;
}

html.theme-white .input,
html.theme-white .select,
html.theme-white .textarea,
html.theme-caramel .input,
html.theme-caramel .select,
html.theme-caramel .textarea,
html.theme-dark .input,
html.theme-dark .select,
html.theme-dark .textarea {
  background:var(--surface-strong) !important;
  border-color:var(--border) !important;
  color:var(--text-strong) !important;
}
html.theme-white .input::placeholder,
html.theme-white .textarea::placeholder,
html.theme-caramel .input::placeholder,
html.theme-caramel .textarea::placeholder,
html.theme-dark .input::placeholder,
html.theme-dark .textarea::placeholder { color:var(--text-faint) !important; }

html.theme-white .btn-primary,
html.theme-caramel .btn-primary,
html.theme-dark .btn-primary {
  background:var(--accent-fill, #6431c4) !important;
  color:var(--accent-contrast) !important;
}
html.theme-white .btn-danger,
html.theme-caramel .btn-danger,
html.theme-dark .btn-danger {
  background:var(--danger) !important;
  border-color:var(--danger) !important;
  color:var(--danger-contrast) !important;
}
html.theme-white .btn-ghost,
html.theme-caramel .btn-ghost,
html.theme-dark .btn-ghost {
  color:var(--text-main) !important;
  border-color:var(--border) !important;
}
html.theme-white .btn-ghost:hover,
html.theme-caramel .btn-ghost:hover,
html.theme-dark .btn-ghost:hover,
html.theme-white .hover\:bg-bg-soft:hover,
html.theme-caramel .hover\:bg-bg-soft:hover,
html.theme-dark .hover\:bg-bg-soft:hover {
  background:var(--surface-muted) !important;
}

html.theme-white .nav-link,
html.theme-caramel .nav-link,
html.theme-dark .nav-link { color:var(--text-muted) !important; }
html.theme-white .nav-link:hover,
html.theme-caramel .nav-link:hover,
html.theme-dark .nav-link:hover {
  background:color-mix(in srgb,var(--accent) 8%,transparent) !important;
  color:var(--text-strong) !important;
}
html.theme-white .nav-link.active,
html.theme-caramel .nav-link.active,
html.theme-dark .nav-link.active {
  background:color-mix(in srgb,var(--accent) 16%,transparent) !important;
  color:var(--accent) !important;
}

html.theme-white .chip,
html.theme-caramel .chip,
html.theme-dark .chip {
  background:var(--chip-bg) !important;
  color:var(--chip-text) !important;
}
html.theme-white .tabs,
html.theme-white .habit-day-strip,
html.theme-white .kanban-card,
html.theme-white .step-pill,
html.theme-white .reminder-stat,
html.theme-caramel .tabs,
html.theme-caramel .habit-day-strip,
html.theme-caramel .kanban-card,
html.theme-caramel .step-pill,
html.theme-caramel .reminder-stat,
html.theme-dark .tabs,
html.theme-dark .habit-day-strip,
html.theme-dark .kanban-card,
html.theme-dark .step-pill,
html.theme-dark .reminder-stat {
  background:var(--surface-muted) !important;
  border-color:var(--border) !important;
  color:var(--text-main) !important;
}
html.theme-white .tabs button.active,
html.theme-caramel .tabs button.active,
html.theme-dark .tabs button.active {
  background:var(--surface) !important;
  color:var(--text-strong) !important;
}

html.theme-white .cal-day,
html.theme-caramel .cal-day,
html.theme-dark .cal-day {
  background:var(--surface-strong) !important;
  border-color:var(--border) !important;
  color:var(--text-main) !important;
}
html.theme-white .cal-day.today,
html.theme-caramel .cal-day.today,
html.theme-dark .cal-day.today {
  background:color-mix(in srgb,var(--accent) 12%,var(--surface)) !important;
  border-color:var(--accent) !important;
}
html.theme-white .habit-cell,
html.theme-caramel .habit-cell,
html.theme-dark .habit-cell {
  background:var(--surface-muted) !important;
}
html.theme-white .progress,
html.theme-caramel .progress,
html.theme-dark .progress {
  background:var(--progress-bg) !important;
}
html.theme-white .md code,
html.theme-white .md pre,
html.theme-caramel .md code,
html.theme-caramel .md pre,
html.theme-dark .md code,
html.theme-dark .md pre {
  background:var(--surface-muted) !important;
}

html.theme-white .h-title,
html.theme-white .h-stat-num,
html.theme-white .h-summary-tile .value,
html.theme-white .h-ring .ring-text,
html.theme-caramel .h-title,
html.theme-caramel .h-stat-num,
html.theme-caramel .h-summary-tile .value,
html.theme-caramel .h-ring .ring-text,
html.theme-dark .h-title,
html.theme-dark .h-stat-num,
html.theme-dark .h-summary-tile .value,
html.theme-dark .h-ring .ring-text {
  color:var(--text-strong) !important;
}
html.theme-white .h-ring .ring-bg,
html.theme-caramel .h-ring .ring-bg,
html.theme-dark .h-ring .ring-bg {
  stroke:var(--progress-bg) !important;
}
html.theme-white .h-stats-row,
html.theme-white .habit-stat-row,
html.theme-caramel .h-stats-row,
html.theme-caramel .habit-stat-row,
html.theme-dark .h-stats-row {
  border-top-color:var(--border) !important;
}
html.theme-dark .habit-stat-row {
  border-bottom-color:var(--border) !important;
}
html.theme-white .habit-stat-row,
html.theme-caramel .habit-stat-row {
  border-bottom-color:var(--border) !important;
}

html.theme-white .divider,
html.theme-caramel .divider,
html.theme-dark .divider { background:var(--border) !important; }
html.theme-white .icon-btn,
html.theme-caramel .icon-btn,
html.theme-dark .icon-btn { color:var(--text-muted) !important; }
html.theme-white .icon-btn:hover,
html.theme-caramel .icon-btn:hover,
html.theme-dark .icon-btn:hover {
  background:color-mix(in srgb,var(--accent) 10%,transparent) !important;
  color:var(--text-strong) !important;
}
html.theme-white .dash-bell,
html.theme-caramel .dash-bell,
html.theme-dark .dash-bell {
  background:var(--surface) !important;
  border-color:var(--border) !important;
}
html.theme-white .modal,
html.theme-caramel .modal,
html.theme-dark .modal {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text-main) !important;
}
html.theme-white .modal-backdrop,
html.theme-caramel .modal-backdrop,
html.theme-dark .modal-backdrop { background:var(--modal-backdrop) !important; }

html.theme-caramel .text-accent,
html.theme-caramel .text-accent-soft { color:var(--accent) !important; }
html.theme-caramel .text-info { color:#207c9b !important; }
html.theme-caramel .text-ok { color:#3f7b28 !important; }
html.theme-caramel .text-warn { color:#b86816 !important; }
html.theme-caramel .text-bad,
html.theme-caramel .text-rose-400 { color:#b93e2f !important; }

html.theme-white #view-habits .step-pill {
  background:#eef3f8 !important;
  border-color:#cbd5e1 !important;
  color:#172033 !important;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
html.theme-white #view-habits .step-pill:hover {
  background:#e5ebf3 !important;
  border-color:color-mix(in srgb,var(--hc,#7c3aed) 62%,#9aa7b8) !important;
  color:#0f172a !important;
}
html.theme-white #view-habits .step-pill.checked {
  background:#e8f7ee !important;
  border-color:#86efac !important;
  color:#14532d !important;
}
html.theme-white #view-habits .step-pill .dot {
  background:transparent !important;
  border:1.5px solid #94a3b8 !important;
  box-shadow:none !important;
}
html.theme-white #view-habits .step-pill.checked .dot {
  background:#16a34a !important;
  border-color:#16a34a !important;
}
html.theme-white #view-habits .step-time {
  background:#ffffff !important;
  border:1px solid #ccd6e3;
  color:#0f172a !important;
  font-weight:800;
}
html.theme-white #view-habits .step-pill.checked .step-time {
  background:#dcfce7 !important;
  border-color:#86efac !important;
  color:#15803d !important;
}
html.theme-white #view-habits .icon-btn {
  background:#ffffff !important;
  border:1px solid #d6deea !important;
  color:#334155 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
html.theme-white #view-habits .icon-btn:hover {
  background:#eef3f8 !important;
  border-color:#b8c4d4 !important;
  color:#0f172a !important;
}
html.theme-white #view-habits .icon-btn.danger:hover {
  background:#fee2e2 !important;
  border-color:#fecaca !important;
  color:#dc2626 !important;
}
html.theme-white #view-habits .h-tpl-item {
  background:color-mix(in srgb,var(--hc,#7c3aed) 12%,#ffffff) !important;
  border-color:color-mix(in srgb,var(--hc,#7c3aed) 36%,#d8dee8) !important;
  color:#172033 !important;
}
html.theme-white #view-habits .h-btn-do.done {
  background:#ffffff !important;
  border-color:#86efac !important;
  color:#15803d !important;
}
html.theme-white #view-habits .habit-day-strip {
  background:#f8fafc !important;
  border-color:#d8e0eb !important;
}
html.theme-white #view-habits .habit-view-btn {
  color:#334155;
}
html.theme-white #view-habits .habit-view-btn:not(.is-active) {
  background:#ffffff;
  border-color:#d6deea;
}
html.theme-white #view-habits .habit-month-calendar-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
html.theme-white #view-habits .habit-cal-cell {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #0f172a !important;
}
html.theme-white #view-habits .habit-cal-cell:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.theme-white #view-habits .habit-cal-cell.is-selected {
  outline: 2px solid var(--accent) !important;
  background: #f5f3ff !important;
  border-color: var(--accent) !important;
}
html.theme-white #view-habits .habit-cal-status-badge.is-done {
  background: #e8f7ee !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
html.theme-white #view-habits .habit-cal-status-badge.is-partial {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
html.theme-white #view-habits .habit-cal-status-badge.is-missed {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

html.theme-caramel #view-habits .step-pill {
  background:#ead7bd !important;
  border-color:#b99261 !important;
  color:#24150c !important;
  box-shadow:0 1px 0 rgba(92,57,23,.08);
}
html.theme-caramel #view-habits .step-pill:hover {
  background:#e1c6a3 !important;
  border-color:color-mix(in srgb,var(--hc,#b96b2c) 58%,#8b5b2b) !important;
  color:#1d1209 !important;
}
html.theme-caramel #view-habits .step-pill.checked {
  background:#eaf4de !important;
  border-color:#9fce83 !important;
  color:#1e3c10 !important;
}
html.theme-caramel #view-habits .step-pill .dot {
  background:transparent !important;
  border:1.5px solid #8b7355 !important;
  box-shadow:none !important;
}
html.theme-caramel #view-habits .step-pill.checked .dot {
  background:#3f7b28 !important;
  border-color:#3f7b28 !important;
}
html.theme-caramel #view-habits .step-time {
  background:#fff7ea !important;
  border:1px solid #c9a87c;
  color:#24150c !important;
  font-weight:800;
}
html.theme-caramel #view-habits .step-pill.checked .step-time {
  background:#dbeed0 !important;
  border-color:#9fce83 !important;
  color:#1e3c10 !important;
}
html.theme-caramel #view-habits .icon-btn {
  background:#fff7ea !important;
  border:1px solid #c9a87c !important;
  color:#4a301d !important;
  box-shadow:0 1px 2px rgba(92,57,23,.10);
}
html.theme-caramel #view-habits .icon-btn:hover {
  background:#ead7bd !important;
  border-color:#a77843 !important;
  color:#24150c !important;
}
html.theme-caramel #view-habits .icon-btn.danger:hover {
  background:#f6d2c6 !important;
  border-color:#d6907c !important;
  color:#a53124 !important;
}
html.theme-caramel #view-habits .h-tpl-item {
  background:color-mix(in srgb,var(--hc,#b96b2c) 13%,#fff7ea) !important;
  border-color:color-mix(in srgb,var(--hc,#b96b2c) 40%,#c9a87c) !important;
  color:#24150c !important;
}
html.theme-caramel #view-habits .h-btn-do.done {
  background:#fff7ea !important;
  border-color:#79b85f !important;
  color:#2f6f20 !important;
}
html.theme-caramel #view-habits .habit-day-strip {
  background:#f5e4cb !important;
  border-color:#c9a87c !important;
}
html.theme-caramel #view-habits .habit-view-btn {
  color:#4a301d;
}
html.theme-caramel #view-habits .habit-view-btn:not(.is-active) {
  background:#fff7ea;
  border-color:#c9a87c;
}
html.theme-caramel #view-habits .habit-month-calendar-card {
  background: #fff7ea !important;
  border-color: #c9a87c !important;
}
html.theme-caramel #view-habits .habit-cal-cell {
  background: #fffaf2 !important;
  border-color: #dbc2a1 !important;
  color: #24150c !important;
}
html.theme-caramel #view-habits .habit-cal-cell:hover {
  background: #ead7bd !important;
  border-color: #a77843 !important;
}
html.theme-caramel #view-habits .habit-cal-cell.is-selected {
  outline: 2px solid var(--accent) !important;
  background: #fcefdc !important;
  border-color: var(--accent) !important;
}
html.theme-caramel #view-habits .habit-cal-status-badge.is-done {
  background: #eaf4de !important;
  border-color: #9fce83 !important;
  color: #1e3c10 !important;
}
html.theme-caramel #view-habits .habit-cal-status-badge.is-partial {
  background: #faeedb !important;
  border-color: #e6cb9d !important;
  color: #8a4f1f !important;
}
html.theme-caramel #view-habits .habit-cal-status-badge.is-missed {
  background: #f8dbd5 !important;
  border-color: #e49f93 !important;
  color: #9c2e22 !important;
}
html.theme-caramel #view-habits .h-summary-tile,
html.theme-caramel #view-habits .card,
html.theme-caramel #view-habits .h-card {
  border-color:#c9a87c !important;
}

.finance-analytics-card {
  position:relative;
  overflow:hidden;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.finance-analytics-card::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,transparent), transparent 55%);
  transition:opacity .14s ease;
}
.finance-analytics-card:hover,
.finance-analytics-card:focus-visible {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 72%,var(--border)) !important;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface)) !important;
  box-shadow:0 10px 24px -18px color-mix(in srgb,var(--accent) 50%,#000), 0 1px 2px rgba(15,23,42,.08) !important;
}
.finance-analytics-card:hover::after,
.finance-analytics-card:focus-visible::after {
  opacity:1;
}
.finance-analytics-card:focus-visible {
  outline:2px solid color-mix(in srgb,var(--accent) 70%,#ffffff);
  outline-offset:2px;
}
.finance-analytics-card.is-active {
  border-color:var(--accent) !important;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface)) !important;
}

.habits-view-switch {
  display:inline-flex;
  align-items:center;
  gap:.18rem;
  padding:.18rem;
  border-radius:.72rem;
  border:1px solid var(--border);
  background:var(--surface-muted);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text-strong) 10%,transparent);
}
.habit-view-btn {
  height:28px;
  padding:0 .7rem;
  border:1px solid transparent;
  border-radius:.54rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:var(--text-muted);
  background:transparent;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .05s;
}
.habit-view-btn:hover {
  color:var(--text-strong);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.habit-view-btn:active { transform:translateY(1px); }
.habit-view-btn.is-active {
  color:var(--accent-contrast);
  border-color:color-mix(in srgb,var(--accent) 72%,var(--border));
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}


/* Debts Tab / Switch Buttons */
.debts-tab-btn {
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}
.debts-tab-btn:hover {
  color: var(--text-strong) !important;
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
}
.debts-tab-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)) !important;
  color: var(--accent-contrast) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Debts Filter Tags */
.debts-filter-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 550;
  border: 1px solid var(--border) !important;
  background: var(--surface-muted) !important;
  color: var(--text-muted) !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
}
.debts-filter-tag:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-strong) !important;
  background: var(--surface) !important;
}
.debts-filter-tag.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)) !important;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border)) !important;
  color: var(--accent-contrast) !important;
  box-shadow: var(--shadow-soft) !important;
}
/* ===== Security panel status (Замок / 2FA) ===== */
.panel-status-dot {
  width: 8px; height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: #64748b;
  opacity: .45;
  flex-shrink: 0;
  transition: background .35s, opacity .35s, box-shadow .35s;
}
.panel-status-dot.is-on {
  background: #22c55e;
  opacity: 1;
  animation: panelDotGlow 2.4s ease-in-out infinite;
}
.nav-link.security-on svg { color: #22c55e; }
html:not(.dark) .nav-link.security-on svg { color: #15803d; }
html.theme-caramel .nav-link.security-on svg { color: #3f7b28; }
html:not(.dark) .panel-status-dot.is-on { background: #15803d; animation-name: panelDotGlowLight; }
html.theme-caramel .panel-status-dot.is-on { background: #3f7b28; animation-name: panelDotGlowCaramel; }
.panel-status-dot.dot-pop.is-on { animation: panelDotPop .45s ease, panelDotGlow 2.4s ease-in-out .45s infinite; }
html:not(.dark) .panel-status-dot.dot-pop.is-on { animation: panelDotPop .45s ease, panelDotGlowLight 2.4s ease-in-out .45s infinite; }
html.theme-caramel .panel-status-dot.dot-pop.is-on { animation: panelDotPop .45s ease, panelDotGlowCaramel 2.4s ease-in-out .45s infinite; }
.nav-link.security-on:active { transform: scale(.97); }
@keyframes panelDotGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,.45); }
  50% { box-shadow: 0 0 10px rgba(34,197,94,.9); }
}
@keyframes panelDotGlowLight {
  0%, 100% { box-shadow: 0 0 3px rgba(21,128,61,.4); }
  50% { box-shadow: 0 0 8px rgba(21,128,61,.75); }
}
@keyframes panelDotGlowCaramel {
  0%, 100% { box-shadow: 0 0 3px rgba(63,123,40,.4); }
  50% { box-shadow: 0 0 8px rgba(63,123,40,.7); }
}
@keyframes panelDotPop {
  0% { transform: scale(.5); }
  55% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* -------------------------------------------------------------------------- */
/* View Transitions API (Fluid Native Tab Navigation 2026)                    */
/* -------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------- */
/* Mobile Bottom Navigation Dock (< 768px) & Bottom Sheets                    */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(3.85rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    z-index: 45;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.35rem 0.5rem;
    border-radius: 0.6rem;
    transition: color 0.15s, transform 0.1s;
    cursor: pointer;
    flex: 1;
    max-width: 4.5rem;
  }
  .bottom-nav-item i, .bottom-nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.15s;
  }
  .bottom-nav-item:active {
    transform: scale(0.92);
  }
  .bottom-nav-item.hidden, [data-module].hidden {
    display: none !important;
  }
  .bottom-nav-item.active {
    color: var(--accent);
    font-weight: 700;
  }
  .bottom-nav-item.active i, .bottom-nav-item.active svg {
    transform: translateY(-1px);
  }
  .bottom-nav-fab {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 55%, transparent);
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: -0.85rem;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-fab i, .bottom-nav-fab svg {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2.5;
    pointer-events: none;
  }
  .bottom-nav-fab:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
  }

  /* Bottom Sheet modal styling for mobile */
  #modalRoot .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #modalRoot .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    margin: 0 !important;
    max-height: 85vh !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    animation: bottomSheetSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  @keyframes bottomSheetSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* ==========================================================================
   Performance: Hardware-accelerated offscreen element skipping
   content-visibility: auto skips layout & paint for offscreen list rows.
   contain-intrinsic-size provides placeholder height to keep scrollbar smooth.
   ========================================================================== */
@media (min-width: 768px) {
  .project-status-list {
    padding: 2px 6px 8px 2px;
  }
  .project-status-list > .card { flex-shrink: 0; }
}

.content-visibility-auto,
.transaction-row,
#txBody tr,
.body-food-row,
.task-item,
.task-card,
.journal-entry-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
}

/* Shared text and controls must keep contrast in every theme. */
html .nav-link { color:var(--text-muted); text-align:left; }
html .nav-link.active { color:var(--accent); }
html .nav-link.global-search-trigger { color:var(--text-main); background:var(--surface); }
html #sidebar .font-bold { color:var(--text-strong); }
html .food-tile .label, html .reminder-stat .label, html .h-summary-tile .label,
html .empty { color:var(--text-muted); }
html:not(.dark) .empty { color:var(--text-muted); }
html .cal-day.other { opacity:1; background:var(--surface-muted) !important; }
html .cal-day .num { color:var(--text-muted); }
html .cal-day.today .num { color:var(--accent); }
html .food-tile { background:var(--surface); }
html .text-accent { color:var(--accent) !important; }
html .btn-primary, html .bg-accent, html .bottom-nav-fab {
  background:#6431c4 !important;
  color:#fff !important;
}
html.theme-caramel .btn-primary, html.theme-caramel .bg-accent, html.theme-caramel .bottom-nav-fab {
  background:#874512 !important;
}
html.theme-caramel { --accent-fill:#874512; }
html [data-rating] { color:var(--text-main) !important; opacity:1; }
html [data-rating][aria-pressed="true"] { outline:2px solid var(--accent); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

#authLoadingError { color: var(--text-main); margin-bottom: 16px; font-size: 14px; }