/* My Mirror theme — mobile onboarding fix 2026-05-24 */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.mirror-dashboard-link {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.06));
  color: var(--accent, #6366f1);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mirror-dashboard-link:hover {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15);
}

html[data-theme="dark"] .mirror-dashboard-link {
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.35);
}

html[data-theme="dark"] .mirror-dashboard-link:hover {
  border-color: rgba(167, 139, 250, 0.5);
}

.card-help-link {
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft, #94a3b8);
  text-decoration: none;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  white-space: nowrap;
}

.card-help-link:hover {
  color: var(--accent, #6366f1);
  background: rgba(99, 102, 241, 0.08);
}

html[data-theme="dark"] .card-help-link:hover {
  color: #c7d2fe;
}

.mirror-dashboard-link[aria-current="page"] {
  opacity: 0.7;
  pointer-events: none;
}

.account-controls--floating .mirror-dashboard-link {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
}

.switch-personal-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(20, 184, 166, 0.35);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(99, 102, 241, 0.08));
  color: var(--teal, #14b8a6);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.switch-personal-btn:hover {
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.2);
}

html[data-theme="dark"] .switch-personal-btn {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.35);
}

.dash-topbar__right .switch-personal-btn {
  flex: 0 0 auto;
}

/* Grouped Personal | Open Loops | Work | Plans nav */
.mirror-nav-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 10px;
  background: var(--nav-strip-bg, rgba(248, 250, 252, 0.9));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  flex-shrink: 0;
}

.mirror-nav-strip__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.42rem 0.72rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text, #1e293b);
  background: var(--nav-strip-item-bg, #f8fafc);
  border: 1px solid var(--nav-strip-item-border, rgba(148, 163, 184, 0.28));
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.mirror-nav-strip__item:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}

.mirror-nav-strip__item--active {
  color: var(--nav-strip-active-text, #4f46e5);
  background: var(--nav-strip-active-bg, rgba(99, 102, 241, 0.12));
  border-color: var(--nav-strip-active-border, rgba(99, 102, 241, 0.45));
  pointer-events: none;
}

.mirror-nav-strip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.mirror-nav-strip__item--plans.mirror-nav-strip__item--active {
  color: var(--plan-accent, #fbbf24);
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
}

html[data-theme="dark"] .mirror-nav-strip__item--plans.mirror-nav-strip__item--active {
  color: #fbbf24;
}

.topbar-right .mirror-nav-strip {
  flex: 0 1 auto;
  min-width: 0;
}

html[data-theme="dark"] .mirror-nav-strip {
  --nav-strip-bg: rgba(20, 184, 166, 0.08);
  --nav-strip-item-bg: rgba(20, 184, 166, 0.08);
  --nav-strip-item-border: rgba(45, 212, 191, 0.28);
  --nav-strip-active-bg: rgba(129, 140, 248, 0.18);
  --nav-strip-active-border: rgba(129, 140, 248, 0.45);
  --nav-strip-active-text: #c7d2fe;
}

html[data-theme="dark"] a.mirror-nav-strip__item:hover {
  border-color: rgba(129, 140, 248, 0.4);
  background: rgba(129, 140, 248, 0.1);
}

/* Personal / Work mirror pages — only active tab + switch button use accent colors */
.mirror-page .mirror-nav-strip {
  background: rgba(248, 250, 252, 0.55);
  border-color: rgba(148, 163, 184, 0.16);
}

.mirror-page a.mirror-nav-strip__item {
  color: var(--text-muted, #64748b);
  background: transparent;
  border-color: transparent;
  font-weight: 500;
}

.mirror-page a.mirror-nav-strip__item:hover {
  color: var(--text, #334155);
  background: rgba(148, 163, 184, 0.08);
  border-color: transparent;
}

html[data-theme="dark"] .mirror-page .mirror-nav-strip {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .mirror-page a.mirror-nav-strip__item {
  color: #94a3b8;
}

html[data-theme="dark"] .mirror-page a.mirror-nav-strip__item:hover {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.1);
  border-color: transparent;
}

/* Personal: active tab = teal, switch = lavender */
.mirror-page--personal .mirror-nav-strip__item--active {
  color: #0d9488;
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.38);
  font-weight: 600;
}

html[data-theme="dark"] .mirror-page--personal .mirror-nav-strip__item--active {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(45, 212, 191, 0.38);
}

.mirror-page--personal .switch-personal-btn {
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.38);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.06));
}

.mirror-page--personal .switch-personal-btn:hover {
  border-color: rgba(99, 102, 241, 0.52);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.14);
}

html[data-theme="dark"] .mirror-page--personal .switch-personal-btn {
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.4);
}

html[data-theme="dark"] .mirror-page--personal .switch-personal-btn:hover {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
}

/* Work: active tab = lavender, switch = teal */
.mirror-page--work .mirror-nav-strip__item--active {
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.38);
  font-weight: 600;
}

html[data-theme="dark"] .mirror-page--work .mirror-nav-strip__item--active {
  color: #c7d2fe;
  background: rgba(129, 140, 248, 0.16);
  border-color: rgba(129, 140, 248, 0.42);
}

.mirror-page--work .switch-personal-btn {
  color: #0d9488;
  border-color: rgba(20, 184, 166, 0.38);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.05));
}

.mirror-page--work .switch-personal-btn:hover {
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.18);
}

html[data-theme="dark"] .mirror-page--work .switch-personal-btn {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.38);
}

html[data-theme="dark"] .mirror-page--work .switch-personal-btn:hover {
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.2);
}

/* Mirror page identity — page chrome */
.mirror-page--personal {
  --mirror-accent: #14b8a6;
  --mirror-accent-dark: #0d9488;
  --mirror-accent-soft: #99f6e4;
  --mirror-page-bg: #effaf7;
  --mirror-topbar-border: rgba(20, 184, 166, 0.28);
}

.mirror-page--work {
  --mirror-accent: #6366f1;
  --mirror-accent-dark: #4f46e5;
  --mirror-accent-soft: #a5b4fc;
  --mirror-page-bg: #f4f3fb;
  --mirror-topbar-border: rgba(99, 102, 241, 0.28);
}

html[data-theme="dark"] .mirror-page--personal {
  --mirror-page-bg: #0c1519;
  --mirror-topbar-border: rgba(45, 212, 191, 0.22);
}

html[data-theme="dark"] .mirror-page--work {
  --mirror-page-bg: #10121c;
  --mirror-topbar-border: rgba(129, 140, 248, 0.24);
}

.mirror-page.mirror-page--personal,
.mirror-page.mirror-page--work {
  background: var(--mirror-page-bg);
}

.mirror-page--personal .topbar,
.mirror-page--work .topbar {
  border-bottom-color: var(--mirror-topbar-border);
}

.mirror-page--personal .page-title {
  color: var(--mirror-accent-dark);
}

.mirror-page--work .page-title {
  color: #4f46e5;
}

html[data-theme="dark"] .mirror-page--work .page-title {
  color: #c7d2fe;
}

.mirror-page--open-loops .page-title {
  color: #4f46e5;
}

html[data-theme="dark"] .mirror-page--open-loops .page-title {
  color: #c7d2fe;
}

.mirror-page--personal .mirror-empty-banner {
  background: rgba(204, 251, 241, 0.55);
  border-color: rgba(20, 184, 166, 0.28);
  color: #0f766e;
}

.mirror-page--work .mirror-empty-banner {
  background: rgba(224, 231, 255, 0.65);
  border-color: rgba(99, 102, 241, 0.28);
  color: #4338ca;
}

html[data-theme="dark"] .mirror-page--personal .mirror-empty-banner {
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.28);
}

html[data-theme="dark"] .mirror-page--work .mirror-empty-banner {
  background: rgba(99, 102, 241, 0.14);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.3);
}

/* Personal momentum — teal/cyan */
.mirror-page--personal .momentum-card {
  border-color: rgba(20, 184, 166, 0.26);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98) 0%, rgba(240, 253, 250, 0.98) 52%, rgba(204, 251, 241, 0.45) 100%);
  box-shadow: 0 8px 28px rgba(20, 184, 166, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.mirror-page--personal .momentum-card__glow {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.34) 0%, transparent 68%);
}

html[data-theme="dark"] .mirror-page--personal .momentum-card {
  border-color: rgba(94, 234, 212, 0.24);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.14) 0%, rgba(35, 45, 61, 0.98) 55%, rgba(13, 148, 136, 0.1) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* Work momentum — lavender/purple */
.mirror-page--work .momentum-card {
  border-color: rgba(99, 102, 241, 0.26);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.98) 0%, rgba(237, 233, 254, 0.98) 52%, rgba(224, 231, 255, 0.55) 100%);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.mirror-page--work .momentum-card__glow {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.34) 0%, transparent 68%);
}

.mirror-page--work .momentum-card__stat {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.1);
}

.mirror-page--work .momentum-card__percent {
  color: #4338ca;
}

.mirror-page--work .momentum-card__wins {
  color: #6366f1;
}

.mirror-page--work .momentum-card__cheer {
  color: #4f46e5;
}

.mirror-page--work .momentum-card__track {
  background: rgba(99, 102, 241, 0.14);
}

.mirror-page--work .momentum-card__fill {
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 45%, #818cf8 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.35);
}

.mirror-page--work .momentum-card[data-tier="building"] {
  border-color: rgba(99, 102, 241, 0.34);
}

.mirror-page--work .momentum-card[data-tier="rolling"] {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 10px 32px rgba(99, 102, 241, 0.14), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.mirror-page--work .momentum-card[data-tier="strong"] {
  border-color: rgba(99, 102, 241, 0.48);
  box-shadow: 0 12px 36px rgba(99, 102, 241, 0.18), 0 0 0 1px rgba(129, 140, 248, 0.14) inset;
}

.mirror-page--work .momentum-card[data-tier="strong"] .momentum-card__fill {
  box-shadow: 0 0 16px rgba(129, 140, 248, 0.45);
}

html[data-theme="dark"] .mirror-page--work .momentum-card {
  border-color: rgba(129, 140, 248, 0.26);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(35, 45, 61, 0.98) 55%, rgba(79, 70, 229, 0.12) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-theme="dark"] .mirror-page--work .momentum-card__glow {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.24) 0%, transparent 68%);
}

html[data-theme="dark"] .mirror-page--work .momentum-card__stat {
  border-color: rgba(129, 140, 248, 0.18);
}

html[data-theme="dark"] .mirror-page--work .momentum-card__percent {
  color: #c7d2fe;
}

html[data-theme="dark"] .mirror-page--work .momentum-card__wins {
  color: #a5b4fc;
}

html[data-theme="dark"] .mirror-page--work .momentum-card__cheer {
  color: #c7d2fe;
}

html[data-theme="dark"] .mirror-page--work .momentum-card__track {
  background: rgba(129, 140, 248, 0.14);
}

html[data-theme="dark"] .mirror-page--work .momentum-card__fill {
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 45%, #a5b4fc 100%);
  background-size: 200% 100%;
}

.dash-refresh-btn--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-refresh-btn__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.dash-refresh-btn--icon.is-spinning .dash-refresh-btn__icon {
  animation: dash-refresh-spin 0.85s linear infinite;
}

@keyframes dash-refresh-spin {
  to { transform: rotate(360deg); }
}

.topbar-logout {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  background: transparent;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 8px;
  padding: 0.38rem 0.7rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.topbar-logout:hover {
  color: var(--text, #1e293b);
  border-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .topbar-logout {
  color: var(--text-muted, #94a3b8);
  border-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] .topbar-logout:hover {
  color: var(--text, #e8edf4);
}

/* Profile / account menu (avatar dropdown + Sign out) */
.profile-menu {
  position: relative;
  flex-shrink: 0;
}

.profile-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: linear-gradient(145deg, #14b8a6 0%, #6366f1 100%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-menu__trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

.profile-menu__trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22);
}

.profile-menu__avatar {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff !important;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.profile-menu__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 11.5rem;
  padding: 0.35rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.14);
  z-index: 400;
}

.profile-menu__panel[hidden] {
  display: none;
}

.profile-menu__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.5rem 0.75rem 0.4rem;
  color: var(--text, #1e293b);
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  margin-bottom: 0.2rem;
  word-break: break-word;
}

.profile-menu__signout {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: #b91c1c;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.profile-menu__signout:hover {
  background: rgba(239, 68, 68, 0.08);
}

.profile-menu__help {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: var(--text-muted, #64748b);
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.profile-menu__help:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent, #6366f1);
}

.profile-menu__signout:disabled {
  opacity: 0.55;
  cursor: wait;
}

html[data-theme="dark"] .profile-menu__panel {
  background: var(--surface, #232d3d);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .profile-menu__name {
  color: var(--text, #e8edf4);
}

html[data-theme="dark"] .profile-menu__signout {
  color: #fca5a5;
}

html[data-theme="dark"] .profile-menu__signout:hover {
  background: rgba(239, 68, 68, 0.14);
}

.account-controls--floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.account-controls--floating .theme-toggle--floating {
  position: static;
  top: auto;
  right: auto;
}

.theme-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--theme-toggle-bg, #f1f5f9);
  border: 1px solid var(--theme-toggle-border, rgba(148, 163, 184, 0.25));
  border-radius: 10px;
  gap: 2px;
}

.theme-toggle--floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
}

.theme-toggle-btn {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.4rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-toggle-text, #64748b);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
  color: var(--theme-toggle-text-hover, #1e293b);
}

.theme-toggle-btn.active {
  background: var(--theme-toggle-active-bg, #ffffff);
  color: var(--theme-toggle-active-text, #1e293b);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* —— Dark mode: shared (Personal, Work, Day, Dashboard, Mirror landing) —— */
html[data-theme="dark"] {
  --bg: #161d28;
  --bg-hero: linear-gradient(135deg, #1a2a32 0%, #1e2540 42%, #1f2830 100%);
  --hero: linear-gradient(135deg, #1a2830 0%, #1e2540 50%, #1a2e28 100%);
  --surface: #232d3d;
  --text: #e8edf4;
  --text-muted: #94a3b8;
  --text-soft: #64748b;
  --border: rgba(148, 163, 184, 0.16);
  --input-bg: #1a2432;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.3);
  --bg-1: #141a24;
  --bg-2: #1a2130;
  --bg-3: #1f1a28;
  --accent: #818cf8;
  --accent-soft: #a5b4fc;
  --surface-glass: rgba(36, 45, 61, 0.82);
  --border-glass: rgba(255, 255, 255, 0.08);
  --theme-toggle-bg: #1a2432;
  --theme-toggle-border: rgba(148, 163, 184, 0.2);
  --theme-toggle-text: #94a3b8;
  --theme-toggle-text-hover: #e2e8f0;
  --theme-toggle-active-bg: #2d3a4f;
  --theme-toggle-active-text: #f1f5f9;
}

html[data-theme="dark"] .hero::after {
  opacity: 0.25;
}

html[data-theme="dark"] .orb {
  opacity: 0.3;
}

html[data-theme="dark"] .dash-card--personal-link {
  background: linear-gradient(135deg, #1a2e32 0%, #1a2830 100%);
  border-color: rgba(20, 184, 166, 0.2);
}

html[data-theme="dark"] .item-list li {
  background: var(--input-bg);
}

html[data-theme="dark"] .item-list li.item-done {
  background: rgba(20, 184, 166, 0.08);
}

html[data-theme="dark"] .item-list--done li {
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .checkbox-label {
  background: var(--input-bg);
}

html[data-theme="dark"] .reflection-output {
  background: linear-gradient(135deg, #252040 0%, #1a2e32 100%);
  border-color: rgba(139, 92, 246, 0.2);
}

html[data-theme="dark"] .organize-feedback {
  color: #5eead4;
}

html[data-theme="dark"] .greeting {
  background: linear-gradient(135deg, #f1f5f9 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="dark"] .hero-title {
  background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 50%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="dark"] .start-btn {
  color: #fff;
}

html[data-theme="dark"] .card {
  background: var(--surface-glass, var(--surface));
  border-color: var(--border-glass, var(--border));
}

html[data-theme="dark"] .choice-card,
html[data-theme="dark"] .option-card {
  background: var(--surface);
}

html[data-theme="dark"] .overlay {
  background: rgba(8, 12, 20, 0.65);
}

html[data-theme="dark"] .btn--secondary:hover {
  background: #2d3a4f;
}

html[data-theme="dark"] .sidebar {
  background: #121820;
}

/* Journey: light mode (page defaults are dark) */
html[data-theme="light"] {
  --bg-1: #eef4f8;
  --bg-2: #e8edf5;
  --bg-3: #f5f0ec;
  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --border: rgba(148, 163, 184, 0.22);
  --border-hover: rgba(99, 102, 241, 0.25);
  --text: #1e293b;
  --text-muted: #64748b;
  --input-bg: #f8fafc;
}

html[data-theme="light"] body {
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
}

html[data-theme="light"] .option-card {
  background: var(--surface);
  color: var(--text);
}

/* Index / mirror landing: light mode */
html[data-theme="light"] {
  --bg-1: #eef4f8;
  --bg-2: #e8edf5;
  --bg-3: #f0ebe8;
  --text: #1e293b;
  --accent: #6366f1;
}

html[data-theme="light"] body {
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
}

html[data-theme="light"] .greeting {
  background: linear-gradient(135deg, #1e293b 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .start-btn {
  color: #fff;
}

/* Day picker page */
html[data-theme="dark"] {
  --bg: linear-gradient(160deg, #141a24 0%, #1a2130 50%, #1f1a28 100%);
}

html[data-theme="dark"] .back {
  color: var(--text-muted);
}

html[data-theme="dark"] .back:hover {
  color: var(--text);
}

/* Site footer */
.site-footer {
  padding: 1.25rem 1.5rem 1.5rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--footer-text, #94a3b8);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.site-footer--sticky {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.site-footer__links {
  margin-bottom: 0.4rem;
}

.site-footer__links a {
  color: var(--footer-text, #94a3b8);
  text-decoration: none;
  margin: 0 0.45rem;
}

.site-footer__links a:hover {
  color: var(--accent, #6366f1);
  text-decoration: underline;
}

html[data-theme="dark"] .site-footer {
  color: #64748b;
}

/* My Mirror — Phase 1 mobile (375px, 390px, 430px; ≤640px) */
@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .theme-toggle--floating {
    top: 0.65rem;
    right: 0.65rem;
  }

  .theme-toggle-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-footer {
    padding: 1rem 1rem 1.25rem;
    font-size: 0.68rem;
    line-height: 1.6;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .topbar-left {
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-start;
  }

  .topbar-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: center;
  }

  .topbar-right .theme-toggle {
    flex-shrink: 0;
  }

  .topbar-right .date-badge-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-right .date-badge {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .topbar-right .profile-menu {
    margin-left: auto;
  }

  .topbar-right .mirror-nav-strip {
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .profile-menu__trigger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .account-controls--floating {
    top: 0.65rem;
    right: 0.65rem;
  }

  .date-picker-input--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .back-link,
  .back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0;
  }

  .switch-personal-btn {
    flex: 1 1 100%;
    min-height: 44px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }

  .hero {
    padding: 1.75rem 1rem 1.5rem;
  }

  .dashboard {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
  }

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

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

  .dash-card {
    padding: 1.1rem;
    width: 100%;
    max-width: 100%;
  }

  .dash-card:hover {
    transform: none;
  }

  .form-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-row input[type="text"],
  .form-row input[type="time"],
  input[type="text"],
  input[type="time"],
  textarea.note-area,
  textarea,
  .talk-input {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  textarea.note-area,
  textarea {
    min-height: 120px;
  }

  .btn,
  .start-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-icon,
  .btn-remove {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dashboard-section-header {
    padding: 1rem 1rem;
    gap: 0.65rem;
    align-items: flex-start;
  }

  .section-banner-subtitle {
    font-size: 0.75rem;
  }

  .dashboard-section-chevron {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .progress-bar-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
  }

  .item-list li,
  .simple-list li {
    padding: 0.65rem 0.5rem;
    gap: 0.4rem;
  }

  .item-complete-cb,
  .item-list li .item-complete-cb {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* —— Onboarding (landing, auth, setup) —— */
.onboarding-body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: linear-gradient(145deg, var(--bg-1, #eef4f8) 0%, var(--bg-2, #e8edf5) 45%, var(--bg-3, #f0ebe8) 100%);
  color: var(--text, #1e293b);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.onboarding-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.onboarding-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  pointer-events: none;
  animation: onboardingDrift 14s ease-in-out infinite;
}

.onboarding-orb--1 { width: 360px; height: 360px; background: #a5b4fc; top: -8%; left: -6%; }
.onboarding-orb--2 { width: 300px; height: 300px; background: #99f6e4; bottom: -6%; right: -4%; animation-delay: -5s; }

@keyframes onboardingDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -12px); }
}

.onboarding-card {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 3rem 3.25rem;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  max-width: 540px;
  margin: 1rem;
  width: calc(100% - 2rem);
  box-sizing: border-box;
}

html[data-theme="dark"] .onboarding-card {
  background: rgba(30, 41, 59, 0.72);
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.onboarding-brand-label {
  margin-top: 1.25rem;
  margin-bottom: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5eead4;
}

html[data-theme="dark"] .onboarding-brand-label {
  color: #5eead4;
  opacity: 0.85;
}

.onboarding-headline {
  font-family: Inter, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

html[data-theme="dark"] .onboarding-headline {
  color: #e8edf4;
}

.onboarding-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted, #64748b);
  margin-bottom: 1.5rem;
}

.onboarding-features {
  list-style: none;
  text-align: left;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.onboarding-features li {
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 500;
  color: #78859a;
  padding-left: 1.35rem;
  position: relative;
}

html[data-theme="dark"] .onboarding-features li {
  color: #8b9bb8;
}

.onboarding-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.45);
}

html[data-theme="dark"] .onboarding-features li::before {
  background: rgba(94, 234, 212, 0.35);
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onboarding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.25s ease;
}

.onboarding-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow: 0 10px 30px rgba(20, 184, 166, 0.3);
}

.onboarding-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(20, 184, 166, 0.38);
}

.onboarding-btn--secondary {
  color: var(--text, #1e293b);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .onboarding-btn--secondary {
  background: rgba(35, 45, 61, 0.85);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.25);
}

.onboarding-btn--ghost {
  color: var(--text-muted, #64748b);
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  font-size: 0.9rem;
}

.onboarding-continue {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.auth-tabs {
  display: inline-flex;
  padding: 3px;
  background: var(--theme-toggle-bg, #f1f5f9);
  border: 1px solid var(--theme-toggle-border, rgba(148, 163, 184, 0.25));
  border-radius: 12px;
  gap: 2px;
  margin-bottom: 1.5rem;
}

.auth-tab {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
}

.auth-tab.active {
  background: var(--theme-toggle-active-bg, #fff);
  color: var(--text, #1e293b);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.auth-form {
  text-align: left;
  display: grid;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.auth-field {
  width: 100%;
  min-width: 0;
}

.auth-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.4rem;
}

.auth-field input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text, #1e293b);
  -webkit-appearance: none;
  appearance: none;
}

.auth-field input.pin-input {
  --pin-tracking: 0.35em;
  text-align: center;
  letter-spacing: var(--pin-tracking);
  font-size: 1.15rem;
  font-weight: 600;
  padding-right: calc(0.9rem + var(--pin-tracking));
  overflow: hidden;
}

html[data-theme="dark"] .auth-field input {
  background: #1a2432;
  border-color: rgba(148, 163, 184, 0.25);
  color: #e8edf4;
}

.auth-field input:focus {
  outline: none;
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.auth-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
  margin-top: 0.75rem;
}

.auth-feedback {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0d9488;
  min-height: 1.25rem;
  margin-top: 0.5rem;
}

.auth-back {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  text-decoration: none;
}

.auth-back:hover { color: var(--text, #1e293b); }

.setup-choices {
  display: grid;
  gap: 0.85rem;
  text-align: left;
}

.setup-choice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

html[data-theme="dark"] .setup-choice {
  background: rgba(26, 36, 50, 0.65);
}

.setup-choice:hover {
  border-color: rgba(20, 184, 166, 0.45);
  transform: translateY(-2px);
}

.setup-choice-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.setup-choice-icon--personal { background: #ccfbf1; }
.setup-choice-icon--work { background: #e0e7ff; }
.setup-choice-icon--both { background: #fef3c7; }

.setup-choice-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.setup-choice-desc {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
}

/* —— First-visit empty state —— */
.momentum-card {
  position: relative;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.35rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95) 0%, rgba(255, 255, 255, 0.98) 48%, rgba(237, 233, 254, 0.35) 100%);
  box-shadow: 0 8px 28px rgba(20, 184, 166, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.momentum-card__glow {
  position: absolute;
  top: -40%;
  right: -8%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.28) 0%, transparent 68%);
  pointer-events: none;
}

.momentum-card__layout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.momentum-card__stat {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 184, 166, 0.18);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.08);
}

.momentum-card__percent {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
}

.momentum-card__wins {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #14b8a6;
  letter-spacing: 0.01em;
}

.momentum-card__body {
  flex: 1;
  min-width: 0;
}

.momentum-card__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.momentum-card__cheer {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #0d9488;
  line-height: 1.35;
}

.momentum-card__track {
  height: 10px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.momentum-card__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d9488 0%, #14b8a6 45%, #2dd4bf 100%);
  background-size: 200% 100%;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.35);
  animation: momentumShimmer 2.8s ease-in-out infinite;
}

.momentum-card__open,
.momentum-card__meta {
  font-size: 0.74rem;
  color: var(--text-soft);
  margin: 0.55rem 0 0;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.momentum-card[data-tier="building"] {
  border-color: rgba(20, 184, 166, 0.32);
}

.momentum-card[data-tier="rolling"] {
  border-color: rgba(20, 184, 166, 0.38);
  box-shadow: 0 10px 32px rgba(20, 184, 166, 0.14), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.momentum-card[data-tier="strong"] {
  border-color: rgba(20, 184, 166, 0.45);
  box-shadow: 0 12px 36px rgba(20, 184, 166, 0.18), 0 0 0 1px rgba(45, 212, 191, 0.12) inset;
}

.momentum-card[data-tier="strong"] .momentum-card__fill {
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.45);
}

@keyframes momentumShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

html[data-theme="dark"] .momentum-card {
  border-color: rgba(94, 234, 212, 0.22);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(35, 45, 61, 0.98) 52%, rgba(99, 102, 241, 0.08) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-theme="dark"] .momentum-card__glow {
  background: radial-gradient(circle, rgba(94, 234, 212, 0.2) 0%, transparent 68%);
}

html[data-theme="dark"] .momentum-card__stat {
  background: rgba(26, 36, 50, 0.75);
  border-color: rgba(94, 234, 212, 0.16);
}

html[data-theme="dark"] .momentum-card__percent {
  color: #5eead4;
}

html[data-theme="dark"] .momentum-card__wins {
  color: #2dd4bf;
}

html[data-theme="dark"] .momentum-card__cheer {
  color: #5eead4;
}

html[data-theme="dark"] .momentum-card__track {
  background: rgba(94, 234, 212, 0.12);
}

html[data-theme="dark"] .momentum-card__fill {
  background: linear-gradient(90deg, #0d9488 0%, #14b8a6 45%, #5eead4 100%);
  background-size: 200% 100%;
}

@media (max-width: 480px) {
  .momentum-card__layout {
    gap: 0.85rem;
  }

  .momentum-card__stat {
    min-width: 4.85rem;
    padding: 0.55rem 0.6rem;
  }

  .momentum-card__percent {
    font-size: 2rem;
  }
}

.mirror-empty-banner {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(204, 251, 241, 0.55);
  border: 1px solid rgba(20, 184, 166, 0.25);
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f766e;
  text-align: center;
}

html[data-theme="dark"] .mirror-empty-banner {
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.28);
}

body.mirror-cloud-readonly .dashboard input,
body.mirror-cloud-readonly .dashboard textarea,
body.mirror-cloud-readonly .dashboard button:not(.dashboard-section-header):not(.topbar-logout):not(.profile-menu__signout):not(.profile-menu__trigger):not(.date-badge):not(.theme-toggle-btn):not(.switch-personal-btn) {
  pointer-events: none;
  opacity: 0.65;
}

@media (max-width: 640px) {
  .onboarding-body {
    overflow-x: hidden;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .onboarding-page {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3.75rem 1rem 1.5rem;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .onboarding-card {
    padding: 2rem 1.5rem 2.25rem;
    border-radius: 22px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .onboarding-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .onboarding-btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .onboarding-btn--primary {
    box-shadow: 0 8px 22px rgba(20, 184, 166, 0.28);
  }

  .onboarding-continue {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .auth-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .auth-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .auth-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .auth-field {
    max-width: 100%;
    min-width: 0;
  }

  .auth-field input {
    font-size: 16px;
    min-width: 0;
  }

  .auth-form .onboarding-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .setup-choices {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .auth-back {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.5rem;
  }

  .onboarding-orb--1 { width: 260px; height: 260px; }
  .onboarding-orb--2 { width: 220px; height: 220px; }
}

/* —— Shared mirror item cards (Work + Personal dashboards) —— */
.item-list li.mirror-item,
.simple-list li.mirror-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.35rem;
  min-height: 2.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.item-list li.mirror-item--must-do,
.simple-list li.mirror-item--must-do {
  min-height: 2.75rem;
}

.mirror-item--stacked {
  align-items: center;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  min-height: 3.25rem;
}

.mirror-item--must-do.mirror-item--stacked {
  min-height: 3.25rem;
}

.mirror-item--stacked .item-complete-cb,
.mirror-item--stacked .mirror-item__number,
.mirror-item--stacked .mirror-item__handle,
.mirror-item--stacked .btn-icon {
  margin-top: 0;
  align-self: center;
  flex-shrink: 0;
}

.mirror-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
}

.mirror-item__meta {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-soft, #94a3b8);
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.mirror-item--must-do .mirror-item__meta {
  line-height: 1.45;
}

.simple-list-item--scheduled .mirror-item__text,
.simple-list-item--scheduled .item-text,
.mirror-item--muted .mirror-item__text,
.mirror-item--muted .item-text {
  color: var(--text-muted, #64748b);
}

.mirror-item__handle {
  cursor: grab;
  color: var(--text-soft, #94a3b8);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.15rem;
  user-select: none;
  flex-shrink: 0;
}

.mirror-item__handle:active {
  cursor: grabbing;
}

.mirror-item__text,
.mirror-item .item-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.45;
}

.mirror-item--stacked .mirror-item__text,
.mirror-item--stacked .item-text {
  flex: none;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.45;
}

.mirror-item--must-do:not(.mirror-item--stacked) .mirror-item__text,
.mirror-item--must-do:not(.mirror-item--stacked) .item-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mirror-item__number,
.item-number {
  flex-shrink: 0;
  color: var(--text-soft, #94a3b8);
  font-variant-numeric: tabular-nums;
  min-width: 1.25rem;
}

.mirror-item-edit-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mirror-item-edit-dialog[hidden] {
  display: none;
}

.mirror-item-edit-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.mirror-item-edit-dialog__panel {
  position: relative;
  width: min(100%, 420px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 16px;
  padding: 1.35rem 1.5rem 1.25rem;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
}

.mirror-item-edit-dialog__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mirror-item-edit-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
}

.mirror-item-edit-dialog__field input {
  font: inherit;
  font-size: 0.92rem;
  color: var(--text, #1e293b);
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  background: var(--input-bg, #f8fafc);
}

.mirror-item-edit-dialog__field--schedule {
  margin-bottom: 0.55rem;
}

.mirror-item-edit-dialog__field--compact {
  margin-bottom: 0.55rem;
}

.mirror-item-edit-dialog__schedule-block {
  margin-bottom: 0.15rem;
}

.mirror-item-edit-dialog__schedule-block[hidden],
.mirror-item-edit-dialog__field[hidden] {
  display: none !important;
}

.mirror-item-edit-dialog__date-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text, #1e293b);
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  background: var(--input-bg, #f8fafc);
  margin-bottom: 0.55rem;
}

.mirror-item-edit-dialog__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.15rem;
}

.mirror-item-edit-dialog__segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 10px;
  background: var(--input-bg, #f1f5f9);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}

.mirror-item-edit-dialog__segment {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
}

.mirror-item-edit-dialog__segment.is-active {
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.mirror-item-edit-dialog__segment:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 1px;
}

.mirror-item-edit-dialog__range-summary {
  margin: 0.15rem 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent, #6366f1);
}

.mirror-item-edit-dialog__range-summary[hidden] {
  display: none;
}

.mirror-item-edit-dialog__range-explain {
  margin: 0 0 0.35rem;
  font-size: 0.76rem;
  color: var(--text-soft, #94a3b8);
  line-height: 1.45;
}

.mirror-item-edit-dialog__range-explain[hidden] {
  display: none;
}

.mirror-item-edit-dialog__single-confirm {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent, #6366f1);
  line-height: 1.45;
}

.mirror-item-edit-dialog__single-confirm[hidden] {
  display: none;
}

.mirror-item-edit-dialog__schedule-footnote {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  color: var(--text-soft, #94a3b8);
  line-height: 1.45;
}

.mirror-item-edit-dialog__schedule-footnote[hidden] {
  display: none;
}

.mirror-item-edit-dialog__schedule-error {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #e11d48;
}

.mirror-item-edit-dialog__schedule-error[hidden] {
  display: none;
}

html[data-theme="dark"] .mirror-item-edit-dialog__segments {
  background: rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .mirror-item-edit-dialog__segment.is-active {
  background: rgba(30, 41, 59, 0.95);
  color: #e2e8f0;
}

.mirror-item-edit-dialog__hint {
  font-size: 0.78rem;
  color: var(--text-soft, #94a3b8);
  line-height: 1.45;
  margin: 0 0 1rem;
}

.mirror-item-edit-dialog__hint[hidden] {
  display: none;
}

.mirror-item-edit-dialog__help {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.mirror-item-edit-dialog__help[hidden] {
  display: none;
}

.mirror-item-edit-dialog__help a {
  color: var(--accent, #6366f1);
  text-decoration: none;
  font-weight: 500;
}

.mirror-item-edit-dialog__help a:hover {
  text-decoration: underline;
}

.mirror-item-edit-dialog__help--cross-move {
  margin: 0.5rem 0 0;
  text-align: center;
}

.mirror-item-edit-dialog__cross-move-block {
  margin-bottom: 1.25rem;
}

.mirror-item-edit-dialog__cross-move-block[hidden] {
  display: none;
}

.mirror-item-edit-dialog__cross-move {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.28));
  background: var(--input-bg, #f8fafc);
  color: var(--text, #1e293b);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mirror-item-edit-dialog__cross-move:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.38);
}

.mirror-item-edit-dialog__cross-move:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.45);
  outline-offset: 2px;
}

.mirror-item-edit-dialog__cross-move-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  opacity: 0.88;
}

.mirror-item-edit-dialog__cross-move-icon svg {
  width: 100%;
  height: 100%;
}

.mirror-item-edit-dialog__cross-move-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--text-soft, #94a3b8);
  text-align: center;
  line-height: 1.45;
}

html[data-theme="dark"] .mirror-item-edit-dialog__cross-move {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--text, #e2e8f0);
}

html[data-theme="dark"] .mirror-item-edit-dialog__cross-move:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mirror-item-edit-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mirror-move-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1250;
  transform: translateX(-50%) translateY(12px);
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mirror-move-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

html[data-theme="dark"] .mirror-move-toast {
  background: rgba(30, 41, 59, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* —— Focus completion celebration —— */
.mirror-celebration {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mirror-celebration[hidden] {
  display: none !important;
}

.mirror-celebration__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.14) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mirror-celebration--visible .mirror-celebration__backdrop {
  opacity: 1;
}

.mirror-celebration__burst {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, rgba(99, 102, 241, 0.12) 45%, transparent 70%);
  transform: scale(0.4);
  opacity: 0;
}

.mirror-celebration--visible .mirror-celebration__burst {
  animation: mirrorCelebrationBurst 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mirror-celebration__panel {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 2rem 1.65rem;
  border-radius: 20px;
  background: var(--surface, #fff);
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transform: scale(0.82) translateY(12px);
  opacity: 0;
}

.mirror-celebration--visible .mirror-celebration__panel {
  animation: mirrorCelebrationPop 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) 0.05s forwards;
}

.mirror-celebration__hands {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 0.35rem;
  transform-origin: center bottom;
}

.mirror-celebration--visible .mirror-celebration__hands {
  animation: mirrorCelebrationHands 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.12s both;
}

.mirror-celebration__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text, #1e293b);
}

.mirror-celebration__subtitle {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
  max-width: 18rem;
}

.mirror-celebration__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mirror-celebration__sparkles span {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  opacity: 0;
}

.mirror-celebration__sparkles span:nth-child(1) { top: 38%; left: 28%; background: #a5b4fc; }
.mirror-celebration__sparkles span:nth-child(2) { top: 32%; right: 26%; background: #5eead4; }
.mirror-celebration__sparkles span:nth-child(3) { bottom: 36%; left: 22%; background: #fcd34d; }
.mirror-celebration__sparkles span:nth-child(4) { bottom: 34%; right: 24%; background: #f9a8d4; }
.mirror-celebration__sparkles span:nth-child(5) { top: 48%; left: 18%; background: #86efac; }
.mirror-celebration__sparkles span:nth-child(6) { top: 46%; right: 18%; background: #93c5fd; }

.mirror-celebration--visible .mirror-celebration__sparkles span {
  animation: mirrorCelebrationSparkle 0.9s ease-out forwards;
}

.mirror-celebration__sparkles span:nth-child(1) { animation-delay: 0.1s; }
.mirror-celebration__sparkles span:nth-child(2) { animation-delay: 0.18s; }
.mirror-celebration__sparkles span:nth-child(3) { animation-delay: 0.14s; }
.mirror-celebration__sparkles span:nth-child(4) { animation-delay: 0.22s; }
.mirror-celebration__sparkles span:nth-child(5) { animation-delay: 0.16s; }
.mirror-celebration__sparkles span:nth-child(6) { animation-delay: 0.24s; }

@keyframes mirrorCelebrationPop {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes mirrorCelebrationHands {
  0% { transform: scale(0.3) rotate(-8deg); }
  55% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes mirrorCelebrationBurst {
  0% { opacity: 0.85; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes mirrorCelebrationSparkle {
  0% { opacity: 0; transform: scale(0) translateY(8px); }
  40% { opacity: 1; transform: scale(1.2) translateY(0); }
  100% { opacity: 0; transform: scale(0.6) translateY(-18px); }
}

html[data-theme="dark"] .mirror-celebration__panel {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.96) 0%, rgba(49, 46, 129, 0.55) 100%);
  border-color: rgba(129, 140, 248, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .mirror-celebration__backdrop {
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.22) 0%, transparent 62%);
}

/* —— Idea Bank — floating FAB + slide-over panel —— */
.idea-bank-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  width: 3.25rem;
  height: 3.25rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
  color: #fff;
  box-shadow:
    0 8px 24px rgba(124, 58, 237, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.idea-bank-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 12px 28px rgba(124, 58, 237, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

.idea-bank-fab:active {
  transform: scale(0.96);
}

.idea-bank-fab__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.idea-bank-fab__badge {
  position: absolute;
  top: -0.2rem;
  right: -0.15rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #fbbf24;
  color: #422006;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.idea-bank-fab--pulse {
  animation: ideaBankFabPulse 0.7s ease;
}

@keyframes ideaBankFabPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(124, 58, 237, 0.18); }
  100% { transform: scale(1); }
}

/* —— Bills & renewals — FAB stacked above Idea Bank —— */
.reminder-rules-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + 3.25rem + 0.65rem + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  width: 3.25rem;
  height: 3.25rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #14b8a6 0%, #0d9488 55%, #0f766e 100%);
  color: #fff;
  box-shadow:
    0 8px 24px rgba(13, 148, 136, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reminder-rules-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 12px 28px rgba(13, 148, 136, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

.reminder-rules-fab:active {
  transform: scale(0.96);
}

.reminder-rules-fab__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.reminder-rules-fab__badge {
  position: absolute;
  top: -0.2rem;
  right: -0.15rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #fbbf24;
  color: #422006;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.reminder-rules-sheet-open {
  overflow: hidden;
}

.reminder-rules-form {
  flex-wrap: wrap;
}

.reminder-rules-form #reminderRulesDueDayInput {
  width: 4.5rem;
  flex: 0 0 auto;
}

.item-list li.mirror-item--reminder-rule,
.simple-list li.mirror-item--reminder-rule {
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.35);
}

.mirror-item--reminder-rule .mirror-item__text,
.mirror-item--reminder-rule .item-text {
  color: #fef9c3;
}

.mirror-item--reminder-rule .mirror-item__meta {
  color: #fde047;
}

html[data-theme="light"] .item-list li.mirror-item--reminder-rule,
html[data-theme="light"] .simple-list li.mirror-item--reminder-rule {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(202, 138, 4, 0.45);
}

html[data-theme="light"] .mirror-item--reminder-rule .mirror-item__text,
html[data-theme="light"] .mirror-item--reminder-rule .item-text {
  color: #713f12;
}

html[data-theme="light"] .mirror-item--reminder-rule .mirror-item__meta {
  color: #a16207;
}

body.idea-bank-sheet-open {
  overflow: hidden;
}

.idea-bank-sheet {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.idea-bank-sheet[hidden] {
  display: none !important;
}

.idea-bank-sheet:not([hidden]) {
  pointer-events: auto;
}

.idea-bank-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  animation: ideaBankFadeIn 0.25s ease;
}

.idea-bank-sheet__panel {
  position: relative;
  width: min(100%, 32rem);
  max-height: min(88vh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.18);
  animation: ideaBankSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.idea-bank-sheet__handle {
  width: 2.5rem;
  height: 0.28rem;
  margin: 0.55rem auto 0;
  border-radius: 999px;
  background: var(--border, #cbd5e1);
  flex-shrink: 0;
}

.idea-bank-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.idea-bank-sheet__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #0f172a);
}

.idea-bank-sheet__subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}

.idea-bank-sheet__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: var(--input-bg, #f1f5f9);
  color: var(--text-muted, #64748b);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.idea-bank-sheet__body {
  overflow-y: auto;
  padding: 0.85rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.idea-bank-sheet__section {
  margin-top: 0.85rem;
}

.idea-bank-sheet__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.idea-bank-sheet__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  font-size: 0.68rem;
  vertical-align: middle;
}

.idea-bank-sheet__empty {
  list-style: none;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
  font-style: italic;
  padding: 0.35rem 0;
}

.idea-bank-sheet__hint {
  margin: 0.35rem 0 0;
  min-height: 0;
}

.idea-bank-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.idea-bank-form input {
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
}

.idea-bank-form input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.idea-bank-form .idea-bank-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.idea-bank-form .idea-bank-tag {
  flex: 0 1 8rem;
  min-width: 5rem;
}

.idea-bank-form--sheet {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: stretch;
}

.idea-bank-form--sheet .idea-bank-input {
  grid-column: 1 / -1;
  flex: none;
  width: 100%;
  min-width: 0;
}

.idea-bank-form--sheet .idea-bank-tag {
  flex: none;
  min-width: 0;
  width: 100%;
}

.idea-bank-form__add {
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: stretch;
  box-sizing: border-box;
  min-width: 2.75rem;
  width: auto;
  min-height: 2.75rem;
  height: auto;
  padding: 0 0.85rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.idea-bank-form__add:hover {
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

.idea-bank-form__add:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.55);
  outline-offset: 2px;
}

.idea-bank-form__add:active {
  transform: scale(0.97);
}

.idea-bank-list:empty::after {
  content: none;
}

.mirror-item--idea {
  align-items: flex-start;
}

.idea-bank-edit-dialog {
  z-index: 1300;
}

.icon-ideas {
  background: #ede9fe;
  color: #7c3aed;
}

html[data-theme="dark"] .icon-ideas {
  background: rgba(124, 58, 237, 0.22);
  color: #c4b5fd;
}

html[data-theme="dark"] .idea-bank-sheet__panel {
  background: var(--card-bg, #1e293b);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .idea-bank-sheet__backdrop {
  background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .idea-bank-sheet__close {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

@keyframes ideaBankSlideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes ideaBankFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 768px) {
  .idea-bank-sheet {
    align-items: stretch;
    justify-content: flex-end;
  }

  .idea-bank-sheet__panel {
    width: min(26rem, 92vw);
    max-height: 100vh;
    border-radius: 1rem 0 0 1rem;
    animation: ideaBankSlideInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .idea-bank-sheet__handle {
    display: none;
  }

  .idea-bank-fab {
    right: 1.25rem;
    bottom: 1.25rem;
  }

  .reminder-rules-fab {
    right: 1.25rem;
    bottom: calc(1.25rem + 3.25rem + 0.65rem);
  }
}

@keyframes ideaBankSlideInRight {
  from { transform: translateX(100%); opacity: 0.7; }
  to { transform: translateX(0); opacity: 1; }
}

/* ——— Plan ahead (standalone checklists) ——— */
.plan-ahead-page {
  --plan-accent: #fbbf24;
  --plan-accent-dark: #d97706;
  --plan-accent-soft: #fde68a;
  --plan-page-bg: #1a1610;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--plan-page-bg);
  color: var(--text, #e8edf4);
  position: relative;
}

.plan-ahead-page::before {
  content: '';
  position: fixed;
  top: 9rem;
  right: 3%;
  width: 16rem;
  height: 16rem;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d97706'%3E%3Cpath d='M6 4h9a2 2 0 0 1 2 2v15l-4-2.5-4 2.5-4-2.5-4 2.5V6a2 2 0 0 1 2-2zm1 2v11.2l2-1.2 2 1.2V6H7zm5 10.5l2-1.2 2 1.2V6h-4v10.5z'/%3E%3Cpath d='M17.5 3.5a4.5 4.5 0 0 1 0 8.5 4.5 4.5 0 0 1 0-8.5zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z' opacity='0.85'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .plan-ahead-page::before {
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M6 4h9a2 2 0 0 1 2 2v15l-4-2.5-4 2.5-4-2.5-4 2.5V6a2 2 0 0 1 2-2zm1 2v11.2l2-1.2 2 1.2V6H7zm5 10.5l2-1.2 2 1.2V6h-4v10.5z'/%3E%3Cpath d='M17.5 3.5a4.5 4.5 0 0 1 0 8.5 4.5 4.5 0 0 1 0-8.5zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z' opacity='0.85'/%3E%3C/svg%3E");
}

#planListChrome,
#planEditorView {
  position: relative;
  z-index: 1;
}

/* Plans nav — only Plans tab uses gold; other links stay neutral */
.plan-ahead-page .mirror-nav-strip {
  background: rgba(30, 41, 59, 0.35);
  border-color: rgba(148, 163, 184, 0.14);
}

.plan-ahead-page a.mirror-nav-strip__item {
  color: var(--text-muted, #94a3b8);
  background: transparent;
  border-color: transparent;
  font-weight: 500;
}

.plan-ahead-page a.mirror-nav-strip__item:hover {
  color: var(--text, #e8edf4);
  background: rgba(148, 163, 184, 0.1);
  border-color: transparent;
}

html[data-theme="dark"] .plan-ahead-page a.mirror-nav-strip__item:hover {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.1);
  border-color: transparent;
}

.plan-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  padding-right: max(1.25rem, 11rem);
  border-bottom: 1px solid rgba(245, 158, 11, 0.22);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.28) 0%, rgba(35, 45, 61, 0.98) 52%, rgba(180, 83, 9, 0.12) 100%);
  position: sticky;
  top: 0;
  z-index: 15;
}

.plan-topbar__left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.plan-topbar__back {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-decoration: none;
  white-space: nowrap;
}

.plan-topbar__back:hover { color: var(--text, #e8edf4); }

.plan-topbar__brand {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plan-accent, #fbbf24);
}

.plan-topbar__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--plan-accent-soft, #fde68a);
}

.plan-topbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.plan-editor-topbar__right {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.plan-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.14);
  color: var(--plan-accent, #fbbf24);
  cursor: pointer;
}

.plan-btn:hover {
  background: rgba(245, 158, 11, 0.22);
}

.plan-btn--ghost {
  border-color: var(--border, rgba(148, 163, 184, 0.16));
  background: transparent;
  color: var(--text-muted, #94a3b8);
}

.plan-btn--ghost:hover {
  color: var(--text, #e8edf4);
  background: var(--input-bg, #1a2432);
}

.plan-sync-banner {
  padding: 0.55rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  color: var(--plan-accent, #fbbf24);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.plan-sync-banner--error {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-bottom-color: rgba(239, 68, 68, 0.2);
}

.plan-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 5rem;
  width: 100%;
}

.plan-list-view__hint {
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.plan-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

#planListChrome[hidden],
#planEditorView[hidden] {
  display: none !important;
}

.plan-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0;
}

.plan-tabs__btn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.plan-tabs__btn:hover:not(.is-active) {
  border-color: rgba(245, 158, 11, 0.28);
  color: var(--plan-accent, #fbbf24);
  background: rgba(245, 158, 11, 0.06);
}

.plan-tabs__btn.is-active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.42);
  color: var(--plan-accent, #fbbf24);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plan-list__row {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  background: var(--surface, #232d3d);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.plan-list__row:hover {
  border-color: rgba(245, 158, 11, 0.42);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.1);
  background: linear-gradient(135deg, var(--surface, #232d3d) 0%, rgba(245, 158, 11, 0.06) 100%);
}

.plan-list__open {
  flex: 1;
  min-width: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0.85rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
}

.plan-list__delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  border: none;
  border-left: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
}

.plan-list__delete svg {
  width: 18px;
  height: 18px;
}

.plan-list__delete:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
}

.plan-list__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  transition: color 0.15s ease;
}

.plan-list__row:hover .plan-list__title {
  color: var(--plan-accent, #fbbf24);
}

.plan-list__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

.plan-empty {
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  padding: 0.5rem 0 1rem;
}

.plan-list__preview {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.4;
}

/* ——— Plan notebook editor (Claude prototype layout) ——— */
.plan-editor-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.plan-editor-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 24px;
  padding-right: max(24px, 11rem);
  border-bottom: 1px solid rgba(245, 158, 11, 0.22);
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.28) 0%, rgba(22, 29, 40, 0.98) 52%, rgba(180, 83, 9, 0.12) 100%);
  z-index: 15;
}

.plan-editor-back {
  background: none;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  color: var(--text-muted, #94a3b8);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.plan-editor-back:hover {
  color: var(--text, #e8edf4);
  border-color: rgba(148, 163, 184, 0.35);
}

.plan-editor-back svg {
  width: 18px;
  height: 18px;
}

.plan-editor-title-wrap {
  flex: 1;
  min-width: 0;
}

.plan-editor-title {
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  background: none;
  border: none;
  color: var(--text, #e8edf4);
  width: 100%;
  outline: none;
}

.plan-editor-meta {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

#planSaveIndicator.is-saving { color: var(--plan-accent, #fbbf24); }
#planSaveIndicator.is-saved { color: #5eead4; }
#planSaveIndicator.is-error { color: #f87171; }

.plan-editor-body {
  flex: 1;
  padding: 20px 24px 80px;
  width: 100%;
}

.plan-editor-workspace {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.plan-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 0 2px;
}

.plan-tb-btn {
  background: var(--surface, #232d3d);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  color: var(--text-muted, #94a3b8);
  border-radius: 8px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.plan-tb-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.plan-tb-btn:hover {
  background: var(--input-bg, #1a2432);
  color: var(--text, #e8edf4);
  border-color: rgba(148, 163, 184, 0.35);
}

.plan-tb-btn--ghost {
  color: var(--text-muted, #94a3b8);
}

.plan-tb-sep {
  width: 1px;
  height: 22px;
  background: var(--border, rgba(148, 163, 184, 0.16));
  margin: 0 4px;
  flex-shrink: 0;
}

.plan-notebook-page {
  background: var(--surface, #232d3d);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  border-radius: 16px;
  padding: 8px 8px 28px;
}

.plan-sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  padding: 20px 24px;
  align-items: start;
}

@media (max-width: 720px) {
  .plan-sections-grid {
    grid-template-columns: 1fr;
  }

  .plan-editor-topbar {
    padding: 12px 16px;
    padding-right: max(16px, 9rem);
  }

  .plan-editor-topbar__right {
    width: 100%;
    margin-left: 0;
    order: 3;
  }

  .plan-editor-topbar__right .mirror-nav-strip {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plan-topbar {
    padding-right: max(16px, 9rem);
  }

  .plan-topbar__right {
    width: 100%;
    margin-left: 0;
  }

  .plan-topbar__right .mirror-nav-strip {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plan-editor-body {
    padding: 16px 16px 64px;
  }

  .plan-editor-toolbar {
    gap: 8px;
    margin-bottom: 12px;
  }

  .plan-tb-btn {
    flex: 0 1 auto;
  }

  .plan-tb-btn span {
    display: none;
  }

  .plan-tb-sep {
    display: none;
  }
}

.plan-section-block {
  min-height: 40px;
  padding: 6px 4px;
  border-radius: 8px;
}

.plan-section-block:focus-within {
  background: rgba(129, 140, 248, 0.06);
}

.plan-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 4px;
  border-radius: 6px;
  line-height: 1.55;
  font-size: 15px;
}

.plan-line:hover {
  background: rgba(255, 255, 255, 0.025);
}

.plan-line-content {
  flex: 1;
  outline: none;
  min-height: 22px;
  white-space: pre-wrap;
  word-break: break-word;
}

.plan-line-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted, #94a3b8);
  opacity: 0.7;
}

.plan-line.is-heading .plan-line-content {
  font-weight: 700;
  font-size: 15.5px;
}

.plan-line-ordinal {
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
  padding-top: 1px;
  user-select: none;
}

.plan-checkbox {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted, #94a3b8);
  margin-top: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.plan-checkbox:hover {
  border-color: #5eead4;
}

.plan-checkbox.is-checked {
  background: #5eead4;
  border-color: #5eead4;
}

.plan-checkbox svg {
  width: 10px;
  height: 10px;
  display: none;
  stroke: #0f1320;
}

.plan-checkbox.is-checked svg {
  display: block;
}

.plan-line.is-checked .plan-line-content {
  color: var(--text-muted, #94a3b8);
  text-decoration: line-through;
}

.plan-line-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.plan-line--checklist:hover .plan-line-remove,
.plan-line--checklist:focus-within .plan-line-remove {
  opacity: 0.55;
}

.plan-line-remove:hover {
  opacity: 1;
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
}

@media (hover: none) {
  .plan-line-remove {
    opacity: 0.5;
  }
}

.plan-undo-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.55rem 0.85rem 0.55rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  background: var(--surface, #232d3d);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
}

.plan-undo-toast__btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--plan-accent, #fbbf24);
  cursor: pointer;
}

.plan-undo-toast__btn:hover {
  background: rgba(245, 158, 11, 0.12);
}

.plan-editor-hint {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  margin-top: 18px;
  padding: 0 24px;
  line-height: 1.5;
}

.plan-editor-hint kbd {
  background: var(--input-bg, #1a2432);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: inherit;
}

.plan-dialog {
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  border-radius: 14px;
  padding: 0;
  background: var(--surface, #232d3d);
  color: var(--text, #e8edf4);
  max-width: min(24rem, 92vw);
}

.plan-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.plan-dialog__form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.plan-dialog__title {
  font-size: 1.05rem;
  font-weight: 800;
}

.plan-dialog__label {
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
}

.plan-dialog__input {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  background: var(--input-bg, #1a2432);
  color: var(--text, #e8edf4);
}

.plan-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

html[data-theme="light"] .plan-ahead-page {
  --plan-accent: #d97706;
  --plan-accent-dark: #b45309;
  --plan-accent-soft: #92400e;
  --plan-page-bg: #fffbeb;
}

html[data-theme="light"] .plan-ahead-page .mirror-nav-strip {
  background: rgba(255, 251, 235, 0.85);
  border-color: rgba(245, 158, 11, 0.16);
}

html[data-theme="light"] .plan-ahead-page a.mirror-nav-strip__item {
  color: #64748b;
}

html[data-theme="light"] .plan-ahead-page a.mirror-nav-strip__item:hover {
  color: #334155;
  background: rgba(245, 158, 11, 0.08);
}

html[data-theme="light"] .plan-topbar,
html[data-theme="light"] .plan-editor-topbar {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 46%, #ffffff 100%);
  border-bottom-color: rgba(245, 158, 11, 0.28);
}

html[data-theme="light"] .plan-topbar__title {
  color: #b45309;
}

html[data-theme="light"] .plan-btn {
  color: #b45309;
}

html[data-theme="light"] .plan-tabs__btn.is-active {
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(217, 119, 6, 0.38);
}

html[data-theme="light"] .plan-tabs__btn:hover:not(.is-active) {
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
}

html[data-theme="light"] .plan-list__row:hover {
  border-color: rgba(217, 119, 6, 0.38);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.12);
  background: linear-gradient(135deg, #ffffff 0%, rgba(254, 243, 199, 0.45) 100%);
}

html[data-theme="light"] .plan-list__row:hover .plan-list__title {
  color: #b45309;
}

html[data-theme="light"] .plan-topbar__brand,
html[data-theme="light"] .plan-link-btn {
  color: #d97706;
}

html[data-theme="light"] .plan-section-block:focus-within {
  background: rgba(245, 158, 11, 0.05);
}

html[data-theme="light"] .plan-line:hover {
  background: rgba(15, 23, 42, 0.03);
}

/* Mirror identity — decorative card-header watermarks (headers only, no layout impact) */
.dashboard-full .card-head--mirror-mark {
  position: relative;
}

.dashboard-full .card-head--mirror-mark::after {
  content: '';
  position: absolute;
  top: 1.3125rem;
  right: 0;
  width: 3.25rem;
  height: 3.25rem;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.17;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

html[data-theme="dark"] .dashboard-full .card-head--mirror-mark::after {
  opacity: 0.21;
}

.dashboard-full .card-head--mirror-mark > * {
  position: relative;
  z-index: 1;
}

/* House with door — matches Personal home motif (Material home silhouette) */
.dashboard-full .card-head--mirror-mark-personal::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d9488'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .dashboard-full .card-head--mirror-mark-personal::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232dd4bf'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

.dashboard-full .card-head--mirror-mark-work::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4zm2-2h4v2H10V5z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .dashboard-full .card-head--mirror-mark-work::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a5b4fc'%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4zm2-2h4v2H10V5z'/%3E%3C/svg%3E");
}