/* Windows 7 Aero: glass surrounds an opaque, neutral application surface. */
.dashboard-page {
  --dashboard-fg: #202b35;
  --dashboard-muted: #586876;
  --dashboard-accent: #287bb5;
  min-height: 100svh;
  color: var(--dashboard-fg);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(ellipse 65% 85% at 90% 95%, #61bbd5 0%, transparent 64%),
    radial-gradient(ellipse 50% 55% at 4% 12%, #6bb7d0 0%, transparent 70%),
    linear-gradient(123deg, transparent 38%, #d8faff26 38.2%, #9ddeec0a 48%, transparent 48.2%),
    linear-gradient(155deg, #174b77, #167da6 52%, #113b69);
  background-attachment: fixed;
}
.dashboard-nav {
  inset: 16px 24px auto;
  min-height: 38px;
  padding: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dashboard-brand {
  border: 1px solid #244c698c;
  border-radius: 6px;
  background: linear-gradient(#f7fcff9e, #b2d6e45c 48%, #6597b449 49%, #afd6e581);
  box-shadow: inset 0 0 0 1px #ffffff9c, 0 2px 6px #08253752;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.dashboard-brand { padding: 10px 14px; color: #142e44; font: 600 20px/1 "Segoe UI", Tahoma, sans-serif; letter-spacing: -.02em; text-shadow: 0 0 6px white, 0 1px 2px white; }
.account-bubble { display: flex; align-items: center; gap: 6px; padding: 0; }
.dashboard-page .account-name { max-width: 220px; }
.account-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page .account-name svg { width: 16px; height: 16px; }
.dashboard-main { padding: 82px 24px 24px; }
.greeting-header { margin-bottom: 20px; gap: 18px; }
.dashboard-page .greeting-title { color: #f4fbff; font-size: 23px; font-weight: 400; text-shadow: 0 1px 3px #123c5a; }
.greeting-eyebrow, .greeting-summary { color: #e0f2fd; text-shadow: 0 1px 2px #173e5c; }
.dashboard-page .weather-island { min-height: 36px; padding: 6px 12px; border: 1px solid #d7efff70; border-radius: 5px; color: #f6fcff; background: #0b355745; box-shadow: inset 0 1px #ffffff21; }
.weather-island-city { color: #e1eff7; }
.weather-island-temp { font-size: 22px; }
.window-manager-shell { position: relative; width: 100%; margin: 0 auto; max-height: calc(100svh - 165px); overflow: auto; border: 0; background: transparent; }
.window-manager { position: relative; min-width: 100%; min-height: 540px; isolation: isolate; background: transparent; }
.window-manager-status { position: sticky; z-index: 20; top: 8px; width: max-content; max-width: calc(100% - 24px); margin: 8px auto -44px; padding: 8px 12px; border: 1px solid #7697ae; border-radius: 4px; color: #24394b; background: #f4faff; box-shadow: 0 3px 12px #07294155; }
.window-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  min-height: 220px;
  padding: 0 6px 6px;
  overflow: hidden;
  border: 1px solid #1c3b589e;
  border-radius: 7px;
  color: var(--dashboard-fg);
  background:
    linear-gradient(124deg, #ffffff6b 0%, #ffffff0d 20%, #ffffff59 25%, #ffffff08 45%, #ffffff42 70%, #ffffff0a 74%),
    linear-gradient(#c6dfe78c, #8bbace66);
  box-shadow: inset 0 0 0 1px #ffffff91, 0 5px 15px #031b3859;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  transition: box-shadow 140ms ease;
}
.window-card.is-active { border-color: #173c5ead; background-color: #b3def52e; box-shadow: inset 0 0 0 1px #ffffffc2, 0 8px 24px #031a3b80; }
.window-titlebar { display: flex; flex: 0 0 31px; align-items: center; gap: 7px; min-width: 0; padding: 0 0 0 3px; color: #1b2b36; background: transparent; cursor: grab; touch-action: none; user-select: none; }
.window-titlebar:active { cursor: grabbing; }
.window-title-icon { display: grid; flex: 0 0 17px; place-items: center; width: 17px; height: 18px; color: #1f5b86; font-size: 15px; font-weight: 700; text-shadow: 0 1px white; }
.window-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; text-shadow: 0 0 5px white, 0 0 8px white, 0 1px 1px white; }
.window-controls { display: flex; align-self: flex-start; margin-top: -1px; margin-left: auto; gap: 0; }
.dashboard-page .window-control {
  display: grid; place-items: center;
  width: 28px; min-width: 28px; height: 21px; min-height: 21px; padding: 0;
  border: 1px solid #405b73; border-top: 0; border-right-width: 0; border-radius: 0;
  color: white;
  background: linear-gradient(#e5f2fa80 0%, #daeaf480 46%, #84aac459 47%, #abc7dca3);
  box-shadow: inset 0 0 0 1px #ffffff57;
  text-shadow: 0 1px 2px #172535;
}
.dashboard-page .window-control:first-child { border-bottom-left-radius: 4px; }
.dashboard-page .window-control:last-child { width: 46px; min-width: 46px; border-right-width: 1px; border-bottom-right-radius: 4px; }
.dashboard-page .window-control-close { background: linear-gradient(#e4ada3 0%, #cf7967 46%, #ae412b 47%, #c46b56); }
.dashboard-page .window-control:hover:not(:disabled) { color: white; background: linear-gradient(#bdefff 0%, #64c9f4 46%, #167eb4 47%, #69cef2); box-shadow: inset 0 0 0 1px #e6f7ffb3, 0 0 9px #53e2ff; }
.dashboard-page .window-control-close:hover:not(:disabled) { background: linear-gradient(#ffc3ad, #e89369 46%, #c82d11 47%, #e95e2e); box-shadow: inset 0 0 0 1px #ffe3cfb3, 0 0 9px #ff7435; }
.dashboard-page .window-control svg { width: 13px; height: 13px; stroke-width: 2.5; filter: drop-shadow(0 1px 1px #1b2a3c); }
.window-maximize-glyph { width: 10px; height: 9px; border: 1px solid white; border-top-width: 2px; box-shadow: 0 1px 1px #263d52; }
.window-content { min-height: 0; flex: 1; overflow: auto; padding: 16px; border: 1px solid #55728b; background: #fbfcfd; box-shadow: 0 0 0 1px #ffffff7d; }
.window-content > * { min-height: 100%; }
.window-resize-handle { position: absolute; z-index: 3; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.window-resize-handle.north, .window-resize-handle.south { left: 12px; right: 12px; height: 6px; }
.window-resize-handle.north { top: 0; cursor: ns-resize; }
.window-resize-handle.south { bottom: 0; cursor: ns-resize; }
.window-resize-handle.east, .window-resize-handle.west { top: 12px; bottom: 12px; width: 6px; }
.window-resize-handle.east { right: 0; cursor: ew-resize; }
.window-resize-handle.west { left: 0; cursor: ew-resize; }
.window-resize-handle.north-east, .window-resize-handle.north-west, .window-resize-handle.south-east, .window-resize-handle.south-west { width: 10px; height: 10px; }
.window-resize-handle.north-east { top: 0; right: 0; cursor: nesw-resize; }
.window-resize-handle.north-west { top: 0; left: 0; cursor: nwse-resize; }
.window-resize-handle.south-east { right: 0; bottom: 0; cursor: nwse-resize; }
.window-resize-handle.south-west { bottom: 0; left: 0; cursor: nesw-resize; }

/* Opaque application controls use the lighter Windows 7 palette. */
.dashboard-page button { color: #334958; }
.dashboard-page button:hover:not(:disabled) { color: #133b59; background: #e4f2fc; }
.dashboard-page button:focus-visible, .dashboard-page a:focus-visible, .window-titlebar:focus-visible { outline: 2px solid #3c8dca; outline-offset: 2px; }
.dashboard-page .personal-title, .window-content .integration-title { display: none; }
.window-content .integration-heading h2 { display: none; }
.dashboard-page .personal-meta, .personal-empty, .personal-pinned-label, .personal-streak,
.personal-days-header .personal-days span, .crypto-coin-name, .integration-loading, .integration-stale { color: #586876; }
.dashboard-page .personal-input, .dashboard-page .field-input, .profile-dialog .field-input { border: 1px solid #a7b5c1; border-radius: 3px; color: #202b35; background: white; box-shadow: inset 0 1px 2px #20334415; }
.personal-input::placeholder, .dashboard-page .field-input::placeholder { color: #687986; }
.dashboard-page .personal-task-toggle { color: #202b35; }
.is-done .personal-task-text { color: #76838e; }
.personal-checkbox { border-color: #8c9da9; border-radius: 2px; background: linear-gradient(#fafafa, #e4ebf0); }
.is-done .personal-checkbox { color: white; border-color: #397daa; background: #4b95c5; }
.personal-task-divider { background: #dce4ea; }
.personal-task:hover { background: #e8f3fb; }
.dashboard-page .personal-tabs button[aria-pressed=true] { color: #1b5380; border-bottom-color: #4597d0; }
.dashboard-page .personal-day { border: 1px solid #c7d3dc; border-radius: 3px; background: linear-gradient(#fff, #e8eff4); }
.dashboard-page .personal-day.is-today { border-color: #3996d0; background: #e9f5fe; }
.dashboard-page .personal-day.is-marked { border-color: #4d8bb6; background: linear-gradient(#99d2f2, #58a5d0); }
.personal-days-header .personal-days span:last-child { color: #205b85; }
.dashboard-page .personal-primary, .dashboard-page .pomodoro-start, .dashboard-page .button-primary,
.dashboard-page .button-secondary, .profile-dialog .button-primary, .profile-dialog .button-secondary {
  border: 1px solid #8c9eab; border-radius: 3px; color: #253849;
  background: linear-gradient(#fff 0%, #edf2f5 46%, #e0e8ed 47%, #f3f6f8);
  box-shadow: inset 0 0 0 1px white;
}
.dashboard-page .personal-primary:hover:not(:disabled), .dashboard-page .pomodoro-start:hover:not(:disabled),
.dashboard-page .button-primary:hover:not(:disabled), .profile-dialog .button-primary:hover:not(:disabled) { color: #133b59; border-color: #3b91c9; background: linear-gradient(#f4fbff, #d5edfc 46%, #bce2f8 47%, #e8f6ff); }
.dashboard-page .personal-tabs button { padding-inline: 8px; }
.dashboard-page .note-tab button[aria-selected=true], .dashboard-page .crypto-segments button[aria-pressed=true] { color: #174e79; border-radius: 3px; background: #deeffb; }
.dashboard-page .note-tab input, .dashboard-page .pomodoro-settings-panel input[type=number] { color: #202b35; border: 1px solid #a8b8c5; border-radius: 3px; background: white; }
.dashboard-page .notes-quick-editor, .dashboard-page .notes-detail-editor textarea { caret-color: #245575; }
.dashboard-page .pomodoro-cycle span { background: #d9e2ea; }
.dashboard-page .pomodoro-cycle .filled { background: #4d94c2; }
.dashboard-page .pomodoro-settings-panel label, .dashboard-page .pomodoro-settings-button { color: #586876; }
.dashboard-page .widget-icon-button:hover, .dashboard-page .widget-text-button:hover { color: #164d74; background: #e0eff9; }
.dashboard-page .pomodoro-start[aria-pressed=true] { color: #204a6b; background: #d8eaf7; }
.currency-row { border-bottom-color: #dce5ec; }
.dashboard-page .is-positive { --integration-delta: #337b4b; }
.dashboard-page .is-negative { --integration-delta: #a34c42; }
.crypto-tooltip { color: #203c52; background: #eff8ff; border: 1px solid #9bb8cd; }
.status-error, .profile-error, .personal-error, .integration-error, .dashboard-page .widget-error { color: #a5352d; }
.personal-scroll { scrollbar-color: #b4c8d6 transparent; }
.name-banner { color: #243a4b; border-color: #8fb2cb; border-radius: 4px; background: #eff8ff; }
.name-banner .greeting-eyebrow { color: #567082; text-shadow: none; }

/* Profile and widget dialogs keep the same application surface. */
.profile-dialog, .dashboard-page .notes-dialog, .weather-dialog { border: 1px solid #61819b; border-radius: 6px; color: #243746; background: linear-gradient(#f4faff, #f6f8fa); box-shadow: inset 0 0 0 1px white, 0 12px 45px #061e3d73; font-family: "Segoe UI", Tahoma, sans-serif; }
.profile-dialog::backdrop, .dashboard-page .notes-dialog::backdrop, .weather-dialog::backdrop { background: #092d4d59; backdrop-filter: blur(3px); }
.dialog-header h2 { color: #243746; font-weight: 400; }
.field-label, .profile-email { color: #586876; }
.profile-window-settings { border-top: 1px solid #cad7e0; }
.profile-section-heading { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 10px; }
.profile-section-heading h3 { margin: 0; font-size: 15px; color: #264961; }
.profile-section-heading p { margin: 3px 0 0; color: #586876; font-size: 12px; }
.profile-section-badge { color: #4b718c; font-size: 11px; }
.profile-window-list { display: flex; flex-direction: column; gap: 6px; }
.profile-window-row { padding: 8px; border: 1px solid #cad8e2; border-radius: 3px; background: #fff; }
.profile-window-name { display: flex; align-items: center; gap: 7px; color: #263a48; }
.profile-window-name strong { font-size: 13px; font-weight: 400; }
.profile-window-icon { color: #286188; font-size: 14px; }
.profile-window-state { margin-left: auto; color: #586876; font-size: 11px; }
.profile-window-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.profile-dialog .profile-window-action { min-height: 26px; padding: 3px 7px; border: 1px solid #a2b4c1; border-radius: 3px; color: #294d65; background: linear-gradient(white, #e7eff5); font-size: 11px; }
.profile-dialog .profile-window-action:hover:not(:disabled) { color: #183e5b; background: #e2f2fd; }
.profile-dialog .profile-window-jump { margin-left: auto; }
.dashboard-page .notes-detail-header, .dashboard-page .notes-detail-title, .dashboard-page .notes-detail-list { border-color: #cbd8e1; }
.dashboard-page .notes-detail-header input { background: white; border: 1px solid #a8bac7; }
.dashboard-page .notes-list-item span, .dashboard-page .notes-list-item small { color: #617583; }
.dashboard-page .notes-list-item[aria-pressed=true] { background: #e0effa; }
.weather-city-results { background: #f5fbff; }
.dashboard-page .weather-city-results button { color: #253c4d; }
.weather-city-results small, .weather-search-status, .weather-current p, .weather-section-label, .weather-current .weather-section-label, .weather-details dt, .weather-hour-card span:first-child, .weather-hour-card span:last-child, .weather-hour-card small, .weather-day-card span:first-child, .weather-day-card span:last-child { color: #586876; }
.weather-hour-card, .weather-day-card, .weather-metrics div { border: 1px solid #d0dce5; border-radius: 3px; background: #edf4f9; }
.weather-rail-fade-left { background: linear-gradient(90deg, #f6f8fa, transparent); }
.weather-rail-fade-right { background: linear-gradient(270deg, #f6f8fa, transparent); }

.widget-onboarding-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 24px; background: #082d4dcc; backdrop-filter: blur(5px); }
.widget-onboarding-panel { width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100svh - 40px)); overflow: auto; padding: 22px; border: 1px solid #61819b; border-radius: 7px; color: #243746; background: linear-gradient(#f4faff, #eef5f8); box-shadow: inset 0 0 0 1px white, 0 18px 55px #061e3d8c; }
.widget-onboarding-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.widget-onboarding-heading h2 { margin: 2px 0 5px; color: #1e435d; font-size: 23px; font-weight: 400; }
.widget-onboarding-heading p { margin: 0; color: #586876; font-size: 13px; }
.widget-onboarding-eyebrow { color: #3378a4 !important; font-size: 11px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.widget-onboarding-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #a7bfce; border-radius: 3px; color: #4b718c; font-size: 11px; background: #e7f2f8; }
.widget-onboarding-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.widget-choice { display: flex; align-items: flex-start; gap: 10px; min-height: 74px; padding: 11px; border: 1px solid #c5d5df; border-radius: 4px; cursor: pointer; background: #fff; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.widget-choice:hover { border-color: #75a8c7; background: #f3faff; }
.widget-choice.is-selected { border-color: #4d99c7; background: #e8f5fe; box-shadow: inset 0 0 0 1px #b6e0f7; }
.widget-choice input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #277eaf; }
.widget-choice-icon { flex: 0 0 22px; color: #286188; font-size: 18px; line-height: 20px; text-align: center; }
.widget-choice-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.widget-choice-copy strong { color: #264961; font-size: 14px; font-weight: 600; }
.widget-choice-copy small { color: #647987; font-size: 12px; line-height: 1.35; }
.widget-onboarding-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.widget-onboarding-actions button { min-height: 32px; padding: 5px 12px; }

.window-manager.is-mobile { display: flex; flex-direction: column; gap: 16px; width: 100% !important; min-width: 0; min-height: 0; height: auto !important; }
.window-manager-shell.is-mobile { max-height: none; overflow: visible; }
.window-manager-status { display: grid; place-items: center; min-width: 120px; min-height: 28px; padding: 5px 8px; border-color: #b2c7d3; background: #edf6fa; box-shadow: inset 0 0 0 1px #fff, 0 3px 12px #07294128; }
.window-loading-sheen, .integration-loading-sheen, .widget-loading-placeholder span, .personal-loading-list span { display: block; border-radius: 3px; background: linear-gradient(90deg, #dceaf1 20%, #f7fcff 50%, #dceaf1 80%); background-size: 200% 100%; animation: aero-loading-shimmer 1.4s ease-in-out infinite; }
.window-loading-sheen { width: 92px; height: 8px; }
.integration-loading-sheen { width: 70%; height: 10px; margin: 10px 0; }
.widget-loading-placeholder { display: flex; flex-direction: column; gap: 9px; padding: 12px 0; }
.widget-loading-placeholder span:first-child { width: 72%; height: 12px; }
.widget-loading-placeholder span:last-child { width: 48%; height: 12px; }
.personal-loading-list { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.personal-loading-list span { width: 100%; height: 30px; }
@keyframes aero-loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (max-width: 899px) {
  .window-manager-shell { max-height: none; }
  .window-card { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0; height: auto !important; min-height: 250px; }
  .window-card[data-widget="tasks"], .window-card[data-widget="notes"], .window-card[data-widget="habits"] { min-height: 320px; }
  .window-resize-handle, .dashboard-page .window-control:nth-child(2) { display: none !important; }
}
@media (max-width: 639px) {
  .dashboard-nav { inset: 12px 12px auto; min-height: 38px; padding: 0; }
  .dashboard-main { padding: 76px 16px 20px; }
  .dashboard-brand { font-size: 18px; padding: 10px 12px; }
  .dashboard-page .account-name { max-width: 140px; }
  .dashboard-page .account-name svg { display: none; }
  .greeting-header { gap: 10px; margin-bottom: 18px; }
  .window-content { padding: 12px; }
  .profile-dialog .profile-window-jump { margin-left: 0; }
  .widget-onboarding-backdrop { align-items: end; padding: 10px; }
  .widget-onboarding-panel { width: 100%; max-height: calc(100svh - 20px); padding: 16px; }
  .widget-onboarding-heading h2 { font-size: 20px; }
  .widget-onboarding-list { grid-template-columns: 1fr; }
  .widget-onboarding-actions { flex-direction: column-reverse; }
  .widget-onboarding-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .window-card { transition: none; } }
@media (prefers-reduced-motion: reduce) { .window-loading-sheen, .integration-loading-sheen, .widget-loading-placeholder span, .personal-loading-list span { animation: none; } }

/* The public and auth routes use the same light Aero language as the desktop. */
.landing-page, .account-page { color: #213746; font-family: "Segoe UI", Tahoma, Arial, sans-serif; background:
  radial-gradient(ellipse 62% 70% at 94% 92%, #70c5d9 0%, transparent 62%),
  radial-gradient(ellipse 48% 58% at 5% 8%, #91d4e6 0%, transparent 68%),
  linear-gradient(125deg, #d3f2fb 0%, #71b3d1 45%, #1f6597 100%); }
.landing-page::before, .account-page::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(132deg, transparent 0 37%, #ffffff38 43%, transparent 53%); }
.landing-nav { z-index: 2; border: 1px solid #244c698c; border-radius: 6px; background: linear-gradient(#f7fcff9e, #b2d6e45c 48%, #6597b449 49%, #afd6e581); box-shadow: inset 0 0 0 1px #ffffff9c, 0 2px 6px #08253752; backdrop-filter: blur(14px) saturate(1.3); }
.landing-brand { color: #173f5f; font: 600 25px/1 "Segoe UI", Tahoma, sans-serif; text-shadow: 0 1px #fff; }
.landing-login, .landing-secondary-cta { color: #174c70; }
.landing-login:hover, .landing-secondary-cta:hover { color: #0d3550; background: #eefaff59; }
.landing-nav-cta, .landing-primary-cta { border: 1px solid #315f7d; border-radius: 4px; color: #fff; text-shadow: 0 1px 1px #17466b; background: linear-gradient(#70b4df, #21699e); box-shadow: inset 0 0 0 1px #ffffff91; }
.landing-nav-cta:hover, .landing-primary-cta:hover { color: #fff; background: linear-gradient(#8bc8ed, #2b79b1); }
.landing-copy, .landing-workspace { position: relative; z-index: 1; }
.landing-copy h1 { color: #173f5f; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-weight: 300; text-shadow: 0 1px 0 #fff; }
.landing-lead { color: #173f5f; text-shadow: 0 1px #ffffffa8; }
.landing-description { color: #31566e; }
.landing-workspace { border: 1px solid #ffffffa8; border-radius: 7px; background: #cfe9f3a8; box-shadow: inset 0 0 0 1px #ffffffad, 0 8px 24px #0b42645c; backdrop-filter: blur(16px) saturate(1.2); }
.landing-card { border: 1px solid #89adc1; border-radius: 5px; background: linear-gradient(#f7fcff, #e5f1f6); box-shadow: inset 0 0 0 1px #ffffffc7, 0 3px 9px #21516e31; }
.landing-card-header h2, .landing-task, .landing-habit-preview { color: #1e4059; }
.landing-card-header span, .landing-habit-streak, .landing-rates span { color: #587486; }
.landing-task:hover { background: #e4f3fb; }
.landing-checkbox { border-color: #86a8bb; background: #fff; }
.landing-checkbox-done, .landing-day-done { border-color: #4d8fb8; background: #65acd1; }
.landing-task-done { color: #71838d; }
.landing-day { border: 1px solid #b1c6d1; background: #f8fcfe; }
.landing-day-today { box-shadow: inset 0 0 0 1px #3b8bbb; }
.landing-rates div { border-bottom-color: #cedde5; }
.landing-rates b, .landing-rates strong { color: #1d557b; }
.landing-page a:focus-visible, .landing-page button:focus-visible { outline-color: #3c8dca; }
.landing-auth-backdrop { background: #092d4d73; backdrop-filter: blur(4px); }
.landing-auth-panel .account-panel { border: 1px solid #61819b; border-radius: 6px; background: linear-gradient(#f4faff, #f6f8fa); box-shadow: inset 0 0 0 1px #ffffff, 0 12px 45px #061e3d73; }
.account-page { position: relative; display: flow-root; padding-top: 90px; }
.account-brand { position: relative; z-index: 1; color: #173f5f; font: 600 25px "Segoe UI", Tahoma, sans-serif; text-shadow: 0 1px #fff; }
.account-panel { position: relative; z-index: 1; border: 1px solid #61819b; border-radius: 6px; color: #243746; background: linear-gradient(#f4faff, #f6f8fa); box-shadow: inset 0 0 0 1px #ffffff, 0 12px 45px #061e3d73; }
.account-panel h1 { color: #1e435d; font: 400 29px/1.25 "Segoe UI", Tahoma, sans-serif; text-shadow: 0 1px #fff; }
.auth-field label, .account-meta, .account-overline, .auth-switch { color: #586876; }
.auth-field input { border: 1px solid #a7b5c1; border-radius: 3px; color: #202b35; background: #fff; box-shadow: inset 0 1px 2px #20334415; }
.auth-field input::placeholder { color: #687986; }
.account-page .password-toggle { color: #586876; }
.account-page .password-toggle:hover:not(:disabled) { color: #174c70; background: #e4f2fc; }
.account-page .account-submit { border: 1px solid #315f7d; border-radius: 4px; color: #fff; text-shadow: 0 1px 1px #17466b; background: linear-gradient(#70b4df, #21699e); box-shadow: inset 0 0 0 1px #ffffff91; }
.account-page .account-submit:hover:not(:disabled) { color: #fff; background: linear-gradient(#8bc8ed, #2b79b1); }
.account-page .auth-switch a, .account-page .auth-switch-button { color: #174c70; }
.auth-error { border-color: #d49b91; color: #8f332a; background: #fff0ed; }
.landing-auth-panel .auth-panel-header h1 { color: #1e435d; }
.landing-auth-panel .password-toggle { color: #586876; }
.landing-auth-panel .password-toggle:hover:not(:disabled) { color: #174c70; background: #e4f2fc; }
.landing-auth-panel .account-submit { border: 1px solid #315f7d; border-radius: 4px; color: #fff; text-shadow: 0 1px 1px #17466b; background: linear-gradient(#70b4df, #21699e); }
.landing-auth-panel .account-submit:hover:not(:disabled) { color: #fff; background: linear-gradient(#8bc8ed, #2b79b1); }
.landing-auth-panel .auth-switch-button { color: #174c70; }
.landing-auth-panel .dialog-close, .profile-dialog .dialog-close, .dashboard-guide .icon-button {
  border: 1px solid #a8bdca;
  border-radius: 4px;
  color: #4d6879;
  background: linear-gradient(#ffffff, #e5f0f5);
  box-shadow: inset 0 0 0 1px #ffffff, 0 1px 2px #163d5424;
}
.landing-auth-panel .dialog-close:hover:not(:disabled), .profile-dialog .dialog-close:hover:not(:disabled), .dashboard-guide .icon-button:hover:not(:disabled) {
  border-color: #4b8db7;
  color: #173f5c;
  background: linear-gradient(#f8fdff, #cfe8f6);
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 2px #5da5ce4d;
}
.landing-auth-panel .dialog-close:focus-visible, .profile-dialog .dialog-close:focus-visible, .dashboard-guide .icon-button:focus-visible {
  outline: 2px solid #3c8dca;
  outline-offset: 2px;
}

/* The dashboard is one surface. Keep the widget canvas in normal flow so it
   never creates a second scrollbar inside the page. */
.dashboard-page {
  overflow-x: hidden;
}
.dashboard-page .window-manager-shell {
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}
.dashboard-page .window-manager-shell::-webkit-scrollbar {
  display: none;
}
.dashboard-page .window-manager {
  overflow: visible;
}
.dashboard-page .window-manager-status {
  position: absolute;
  z-index: 20;
  top: 16px;
  left: 50%;
  width: auto;
  min-width: 190px;
  max-width: calc(100% - 32px);
  min-height: 44px;
  margin: 0;
  transform: translateX(-50%);
  border: 1px solid #8eb8cc;
  border-radius: 8px;
  background: rgb(247 253 255 / .72);
  box-shadow: inset 0 0 0 1px #ffffffb8, 0 6px 16px #17496532;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.dashboard-page .window-manager-status.status-error {
  color: #7d342c;
  background: rgb(255 242 238 / .88);
  border-color: #d49b91;
}

/* Loading uses the same light Aero surface as the loaded dashboard. */
.dashboard-session-loading .session-loading-panel {
  width: 100%;
  min-height: 180px;
  border: 1px solid #8eb8cc;
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(247 253 255 / .78), rgb(208 233 243 / .58));
  box-shadow: inset 0 0 0 1px #ffffffb8, 0 8px 24px #1749652b;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.dashboard-session-loading .session-loading-spinner {
  width: 18px;
  height: 18px;
  border-color: #ffffffa8;
  border-top-color: #2a79a6;
}

/* One large dashboard bar with two small Aero bubbles inside it. */
.dashboard-page .dashboard-nav {
  inset: 14px 24px auto;
  min-height: 56px;
  padding: 7px 10px;
  border: 1px solid #8fb8ca;
  border-radius: 10px;
  background: linear-gradient(180deg, rgb(247 253 255 / .82), rgb(190 222 235 / .58) 48%, rgb(124 181 211 / .64));
  box-shadow: inset 0 0 0 1px #ffffffb8, 0 4px 14px #0b3f5b42;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
.dashboard-page .dashboard-brand {
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: #174362;
  font-size: 24px;
  text-shadow: 0 1px #ffffffcc;
}
.dashboard-page .account-bubble {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 639px) {
  .dashboard-page .dashboard-nav {
    inset: 10px 12px auto;
    min-height: 48px;
    padding: 5px 7px;
    border-radius: 8px;
  }
  .dashboard-page .dashboard-brand {
    padding: 7px 9px;
    font-size: 20px;
  }
  .dashboard-page .window-manager-status {
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
    transform: none;
  }
}

/* Session checks stay quiet: do not paint a fake dashboard made of empty
   bars while authentication is being resolved. */
.dashboard-session-loading {
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
}
.dashboard-session-loading .session-loading-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(232px, calc(100vw - 32px));
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #9fc6d9;
  border-radius: 8px;
  color: #285a76;
  background: linear-gradient(180deg, rgb(250 254 255 / .82), rgb(211 235 245 / .7));
  box-shadow: inset 0 0 0 1px #ffffffc7, 0 6px 18px #17496532;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.dashboard-session-loading .session-loading-label {
  font-size: 13px;
  text-shadow: 0 1px #ffffffb8;
}
.dashboard-session-loading .session-loading-spinner {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid #ffffffc4;
  border-top-color: #2a79a6;
  border-radius: 50%;
  animation: session-loading-spin .8s linear infinite;
}

/* Desktop is a fixed workspace: the browser itself must not scroll the
   dashboard canvas while the user works with windows. */
@media (min-width: 900px) {
  html:has(.dashboard-page),
  body:has(.dashboard-page) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .dashboard-page {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }
  .dashboard-page .dashboard-main {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
  }
  .dashboard-page .window-manager-shell {
    overflow: hidden;
  }
  .dashboard-page .dashboard-nav {
    inset: 14px 24px auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .dashboard-page .dashboard-brand {
    padding: 8px 12px;
    border: 1px solid #8fb8ca;
    border-radius: 8px;
    background: linear-gradient(180deg, rgb(247 253 255 / .84), rgb(190 222 235 / .62));
    box-shadow: inset 0 0 0 1px #ffffffb8, 0 3px 10px #17496532;
  }
  .dashboard-page .window-manager {
    width: 100% !important;
  }
}

/* Landing hero: a focused, GitHub-inspired entry point with the dashboard
   preview intentionally peeking into the first viewport. */
html:has(.landing-page), body:has(.landing-page) {
  overflow: hidden;
  overscroll-behavior: none;
  background: #070914;
}
.landing-page {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: #f5f7ff;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, #4e48a666 0%, transparent 70%),
    radial-gradient(ellipse 42% 45% at 9% 46%, #25236673 0%, transparent 72%),
    linear-gradient(180deg, #0a0c2c 0%, #11123c 54%, #1a174a 100%);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
.landing-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent 5%, #000 46%, #000 100%);
}
.landing-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, #8278ff44, transparent 68%);
  filter: blur(18px);
}
.landing-public-nav,
.landing-app > .landing-nav {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: none;
  min-height: 74px;
  margin: 0;
  padding: 13px clamp(20px, 4vw, 54px);
  border: 0;
  border-bottom: 1px solid #ffffff1f;
  border-radius: 0;
  color: #f5f7ff;
  background: #05060bd9;
  box-shadow: 0 1px 0 #000, 0 10px 30px #0000001f;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.landing-brand {
  flex: 0 0 auto;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.035em;
  text-shadow: none;
}
.landing-nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 34px);
  min-width: 0;
  margin-inline: auto;
}
.landing-nav-menu a {
  color: #c9cce4;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease;
}
.landing-nav-menu a:hover { color: #fff; }
.landing-nav-actions { flex: 0 0 auto; gap: 6px; }
.landing-login {
  padding: 9px 12px;
  border-radius: 7px;
  color: #d2d6ed;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
}
.landing-login:hover { color: #fff; background: #ffffff12; }
.landing-nav-cta {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid #ffffff47;
  border-radius: 7px;
  color: #fff;
  background: #ffffff0d;
  box-shadow: inset 0 1px #ffffff17;
}
.landing-nav-cta:hover { color: #fff; background: #ffffff1b; }
.landing-session-error { z-index: 11; top: 86px; color: #ffb9b4; background: #281a2ee8; }
.landing-hero {
  display: block;
  height: 100dvh;
  min-height: 100dvh;
  padding: clamp(112px, 13vh, 142px) 24px 0;
  overflow: hidden;
}
.landing-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.2vh, 34px);
  width: 100%;
  max-width: 1220px;
  height: 100%;
  margin-inline: auto;
}
.landing-copy {
  z-index: 1;
  max-width: 900px;
  text-align: center;
}
.landing-copy h1 {
  margin: 0;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(3.2rem, 6.4vw, 6rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.06em;
  text-shadow: 0 3px 28px #0000004a;
}
.landing-lead {
  max-width: 760px;
  margin: 20px auto 0;
  color: #d7d8eb;
  font-size: clamp(1.3rem, 2.35vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-shadow: none;
}
.landing-description {
  max-width: 650px;
  margin: 13px auto 0;
  color: #aeb2cf;
  font-size: 16px;
  line-height: 1.55;
}
.landing-actions {
  justify-content: center;
  margin-top: 22px;
  gap: 12px 20px;
}
.landing-primary-cta {
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid #ffffff30;
  border-radius: 7px;
  color: #0d112d;
  background: linear-gradient(180deg, #f5f5ff, #c7c8e5);
  box-shadow: 0 8px 22px #00000026, inset 0 1px #fff;
  font-size: 15px;
  text-shadow: none;
}
.landing-primary-cta:hover { color: #0b0f28; background: linear-gradient(180deg, #fff, #dfe0f4); }
.landing-secondary-cta { color: #d7d8eb; font-size: 14px; }
.landing-secondary-cta:hover { color: #fff; }
.landing-workspace {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(1120px, 100%);
  height: 430px;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #8d88ff99;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(145deg, #28265eaa, #11142be8 62%, #171738eb);
  box-shadow: 0 0 0 1px #ffffff12, 0 -10px 45px #7469ff1c, 0 20px 65px #00000066, inset 0 1px #ffffff34;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.landing-workspace::before {
  content: "";
  display: block;
  width: 100%;
  height: 9px;
  margin-bottom: 12px;
  border-radius: 99px;
  background: radial-gradient(circle at 7px 4px, #ffffff66 0 4px, transparent 4.5px), radial-gradient(circle at 23px 4px, #ffffff40 0 4px, transparent 4.5px), radial-gradient(circle at 39px 4px, #ffffff25 0 4px, transparent 4.5px);
}
.landing-cards { height: calc(100% - 21px); gap: 14px; }
.landing-card {
  height: 220px;
  padding: 18px;
  border: 1px solid #a5a2db42;
  border-radius: 14px;
  color: #e9eafa;
  background: linear-gradient(155deg, #22253bee, #15182aeF);
  box-shadow: inset 0 1px #ffffff12, 0 8px 22px #0000002b;
}
.landing-card-tasks { height: 155px; }
.landing-card-header h2 { color: #f6f7ff; font-size: 15px; }
.landing-card-header span, .landing-habit-streak, .landing-rates span { color: #aeb2cf; }
.landing-task { color: #e9eafa; }
.landing-task:hover { background: #ffffff0d; }
.landing-checkbox { border-color: #8d91b5; background: #1b1e35; }
.landing-checkbox-done, .landing-day-done { border-color: #8c86ff; background: #6e68d2; }
.landing-task-done { color: #9196b8; }
.landing-day { background: #ffffff0d; }
.landing-day-today { box-shadow: inset 0 0 0 1px #aaa5ff; }
.landing-rates div { border-bottom-color: #ffffff18; }
.landing-rates b, .landing-rates strong { color: #dfe1ff; }
.landing-page a:focus-visible, .landing-page button:focus-visible { outline-color: #aaa5ff; }

@media (max-width: 900px) {
  .landing-nav-menu { gap: 16px; }
  .landing-nav-menu a:nth-child(n+3) { display: none; }
  .landing-hero { padding-inline: 18px; }
  .landing-workspace { width: min(760px, 100%); }
}
@media (max-width: 639px) {
  html:has(.landing-page), body:has(.landing-page) { height: 100%; overflow: hidden; }
  .landing-public-nav, .landing-app > .landing-nav {
    min-height: 62px;
    padding: 10px 14px;
  }
  .landing-brand { font-size: 21px; }
  .landing-nav-menu { display: none; }
  .landing-login { padding-inline: 8px; font-size: 13px; }
  .landing-nav-cta { min-height: 34px; padding: 7px 10px; font-size: 13px; }
  .landing-hero {
    height: 100dvh;
    min-height: 100dvh;
    padding: 92px 14px 0;
    touch-action: pan-x;
  }
  .landing-hero-grid { gap: 17px; }
  .landing-copy h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .landing-lead { margin-top: 12px; font-size: 1.27rem; }
  .landing-description { max-width: 360px; margin-top: 8px; font-size: 14px; line-height: 1.4; }
  .landing-actions { margin-top: 15px; gap: 8px 15px; }
  .landing-primary-cta { min-height: 40px; padding: 10px 15px; font-size: 14px; }
  .landing-secondary-cta { font-size: 13px; }
  .landing-workspace {
    width: 100%;
    height: 292px;
    padding: 11px;
    border-radius: 18px 18px 0 0;
  }
  .landing-workspace::before { margin-bottom: 8px; }
  .landing-cards { height: calc(100% - 17px); }
  .landing-card { padding: 14px 12px 12px; border-radius: 13px; }
}
@media (max-width: 639px) and (max-height: 720px) {
  .landing-hero { padding-top: 80px; }
  .landing-description { display: none; }
  .landing-actions { margin-top: 11px; }
  .landing-workspace { height: 250px; }
}

/* Keep the GitHub-like composition, but use Cadence's blue/steel palette. */
.landing-page {
  color: #eef7ff;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, #4e9ac044 0%, transparent 70%),
    radial-gradient(ellipse 42% 45% at 9% 46%, #1e5d8466 0%, transparent 72%),
    linear-gradient(180deg, #07121f 0%, #0b2438 55%, #0e3c5c 100%);
}
.landing-page::after { background: radial-gradient(ellipse at 50% 100%, #55b4df32, transparent 68%); }
.landing-copy h1 { color: #f4faff; }
.landing-lead { color: #d9eaf5; }
.landing-description { color: #a8c0d0; }
.landing-primary-cta {
  color: #0d3048;
  background: linear-gradient(180deg, #e5f5ff, #9ccce6);
  box-shadow: 0 8px 22px #00000026, inset 0 1px #fff;
}
.landing-primary-cta:hover { color: #08263b; background: linear-gradient(180deg, #f4fbff, #b9def0); }
.landing-secondary-cta { color: #c5dbea; }
.landing-secondary-cta:hover { color: #fff; }
.landing-workspace {
  border-color: #75b8dc80;
  background: linear-gradient(145deg, #183b55d9, #0d2235ed 62%, #102e45eb);
  box-shadow: 0 0 0 1px #ffffff12, 0 -10px 45px #4cafd21c, 0 20px 65px #00000066, inset 0 1px #ffffff34;
}
.landing-card {
  border-color: #75a7c044;
  color: #e9f4fb;
  background: linear-gradient(155deg, #1b3448ee, #122536ef);
}
.landing-card-header h2, .landing-task { color: #edf7fd; }
.landing-card-header span, .landing-habit-streak, .landing-rates span { color: #9fb8c9; }
.landing-task:hover { background: #ffffff0d; }
.landing-checkbox { border-color: #769bb3; background: #142b3d; }
.landing-checkbox-done, .landing-day-done { border-color: #6bb5dc; background: #347fa8; }
.landing-task-done { color: #8ca8ba; }
.landing-day { background: #ffffff0d; }
.landing-day-today { box-shadow: inset 0 0 0 1px #a8d7ef; }
.landing-rates div { border-bottom-color: #ffffff18; }
.landing-rates b, .landing-rates strong { color: #dceef8; }
.landing-page a:focus-visible, .landing-page button:focus-visible { outline-color: #8ed0ef; }

/* Windows 7 Aero + Y2K finish: bright glass, bevels and cool chrome accents. */
html:has(.landing-page), body:has(.landing-page) { background: #79b8d8; }
.landing-page {
  color: #173f5f;
  background:
    radial-gradient(ellipse 42% 48% at 8% 14%, #ffffffa6 0%, transparent 70%),
    radial-gradient(ellipse 46% 55% at 96% 88%, #7ee4f5b8 0%, transparent 68%),
    radial-gradient(ellipse 35% 38% at 54% 100%, #d49bff52 0%, transparent 72%),
    linear-gradient(135deg, #d1f2ff 0%, #8bcae5 38%, #4b91be 72%, #176295 100%);
}
.landing-page::before {
  opacity: .72;
  background-image:
    radial-gradient(circle at 13% 30%, #ffffff85 0 1px, transparent 2px),
    radial-gradient(circle at 87% 20%, #ffffff73 0 1px, transparent 2px),
    radial-gradient(circle at 72% 78%, #c6f8ff8c 0 1px, transparent 2px),
    linear-gradient(145deg, transparent 0 38%, #ffffff42 48%, transparent 58%);
  background-size: auto, auto, auto, 100% 100%;
  mask-image: none;
}
.landing-page::after {
  height: 45%;
  background: radial-gradient(ellipse at 52% 100%, #d6faff99, transparent 68%);
  filter: blur(20px);
}
.landing-public-nav,
.landing-app > .landing-nav {
  inset: 12px 22px auto;
  width: auto;
  min-height: 60px;
  padding: 9px 16px;
  border: 1px solid #ffffffc9;
  border-bottom-color: #3e789a;
  border-radius: 10px;
  color: #173f5f;
  background: linear-gradient(180deg, #fafdffed 0%, #d6edf8dc 45%, #83b9d7d1 49%, #d2ecf7e8 100%);
  box-shadow: inset 0 0 0 1px #ffffff8c, 0 3px 12px #154d6b52, 0 0 22px #caf6ff52;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.landing-brand { color: #174a6c; text-shadow: 0 1px #ffffff; }
.landing-nav-menu a { color: #205778; text-shadow: 0 1px #ffffffb3; }
.landing-nav-menu a:hover { color: #0f3c5b; }
.landing-login { color: #174f72; text-shadow: 0 1px #ffffff; }
.landing-login:hover { color: #0e3c5b; background: #ffffff69; }
.landing-nav-cta {
  min-height: 36px;
  border-color: #497e9d;
  color: #fff;
  text-shadow: 0 1px #17466b;
  background: linear-gradient(#75b9df 0%, #3588b8 47%, #2672a0 48%, #58a9d2 100%);
  box-shadow: inset 0 0 0 1px #ffffff99, 0 1px 2px #1b52704d;
}
.landing-nav-cta:hover { color: #fff; background: linear-gradient(#94d2ef, #3f94c2 47%, #2c7aab 48%, #75c3e5); }
.landing-hero { padding-top: clamp(112px, 13vh, 142px); }
.landing-copy h1 {
  color: #174766;
  font-weight: 600;
  letter-spacing: -.045em;
  text-shadow: 0 2px #ffffff, 0 5px 24px #0c4c6b38;
}
.landing-lead { color: #1b4f6e; text-shadow: 0 1px #ffffffa6; }
.landing-description { color: #2f6078; text-shadow: 0 1px #ffffff7d; }
.landing-primary-cta {
  border-color: #286487;
  color: #fff;
  text-shadow: 0 1px #17466b;
  background: linear-gradient(#79c4eb 0%, #358abd 47%, #2674a4 48%, #63afd8 100%);
  box-shadow: inset 0 0 0 1px #ffffffb8, 0 3px 8px #1c567344;
}
.landing-primary-cta:hover { color: #fff; background: linear-gradient(#a2dcf5, #4a9dca 47%, #3284b4 48%, #7dc8e8); }
.landing-secondary-cta { color: #174f72; text-shadow: 0 1px #ffffff; }
.landing-secondary-cta:hover { color: #0f3e5e; }
.landing-workspace {
  border-color: #ffffffcf;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(145deg, #c4e9f4bd, #8bbfd9c9 62%, #d3eef5d9);
  box-shadow: inset 0 0 0 1px #ffffffaa, 0 -8px 34px #e6fdff69, 0 18px 42px #154c6b55;
}
.landing-workspace::before { background: radial-gradient(circle at 7px 4px, #ffffff 0 4px, transparent 4.5px), radial-gradient(circle at 23px 4px, #83a8bb 0 4px, transparent 4.5px), radial-gradient(circle at 39px 4px, #d0e1e8 0 4px, transparent 4.5px); }
.landing-card {
  border-color: #a4c7d6;
  color: #1d4058;
  background: linear-gradient(155deg, #fafdffef, #dcecf3f0);
  box-shadow: inset 0 0 0 1px #ffffffd9, 0 5px 14px #29607a36;
}
.landing-card-header h2, .landing-task { color: #1b405a; }
.landing-card-header span, .landing-habit-streak, .landing-rates span { color: #597688; }
.landing-task:hover { background: #bce5f363; }
.landing-checkbox { border-color: #82a4b5; background: linear-gradient(#fff, #e4eff4); }
.landing-checkbox-done, .landing-day-done { border-color: #4c91b8; background: linear-gradient(#79c2e4, #3f8db7); }
.landing-task-done { color: #7a8e99; }
.landing-day { border: 1px solid #acc4cf; background: #f4fbfe; }
.landing-day-today { box-shadow: inset 0 0 0 1px #3285b2; }
.landing-rates div { border-bottom-color: #c8dce5; }
.landing-rates b, .landing-rates strong { color: #1d5b82; }
.landing-page a:focus-visible, .landing-page button:focus-visible { outline-color: #237eaf; }

/* Landing preview scenes: each slide contains two useful desktop windows. */
.landing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.landing-scene {
  display: flex;
  min-width: 0;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.landing-mini-window {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #7aa8be;
  border-radius: 8px;
  background: linear-gradient(180deg, #fafdff, #dcecf3);
  box-shadow: inset 0 0 0 1px #ffffffc7, 0 4px 10px #174b6738;
}
.landing-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 31px;
  padding: 6px 9px;
  border-bottom: 1px solid #2b6c96;
  background: linear-gradient(180deg, #78bce1 0%, #3f8db9 47%, #286c98 48%, #5ca7d0 100%);
  box-shadow: inset 0 1px #ffffffa8;
}
.landing-mini-header h2 { margin: 0; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px #1c5275; }
.landing-mini-header span { color: #e6f6fd; font-size: 10px; text-shadow: 0 1px #1c5275; white-space: nowrap; }
.landing-mini-header::after { content: "−  □  ×"; flex: 0 0 auto; order: 3; color: #eaf7fd; font-size: 10px; letter-spacing: .04em; text-shadow: 0 1px #185178; }
.landing-mini-header span { margin-left: auto; }
.landing-inbox-list { display: flex; min-height: 0; flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 8px 0; }
.landing-inbox-row { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 24px; padding: 2px 3px; border: 0; border-radius: 3px; color: #204861; background: transparent; font: inherit; font-size: 11px; text-align: left; }
.landing-inbox-row:hover { background: #b9e2f46b; }
.landing-inbox-row > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-inbox-row small { margin-left: auto; color: #668493; font-size: 9px; white-space: nowrap; }
.landing-inbox-row .landing-checkbox { flex: 0 0 14px; width: 14px; height: 14px; }
.landing-mini-inbox .landing-task-progress { margin: 5px 10px 9px; }
.landing-draft-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 12px; color: #28536b; font-size: 11px; }
.landing-draft-body strong { color: #1b4b67; font-size: 13px; }
.landing-draft-body p { margin: 0; line-height: 1.35; }
.landing-draft-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.landing-draft-tags span { padding: 2px 5px; border: 1px solid #a9c7d4; border-radius: 3px; color: #4b7182; background: #eaf6fa; font-size: 9px; }
.landing-focus-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px; text-align: center; }
.landing-focus-timer { color: #1f6289; font-size: 31px; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 1px #fff; }
.landing-focus-meta { display: flex; align-items: baseline; gap: 5px; color: #6a8793; font-size: 9px; }
.landing-focus-meta strong { color: #2e6b87; font-size: 11px; }
.landing-mini-button { min-height: 24px; padding: 3px 12px; border: 1px solid #7ba4b8; border-radius: 3px; color: #24526c; background: linear-gradient(#fff, #d9ebf2); box-shadow: inset 0 0 0 1px #fff; font-size: 10px; }
.landing-mini-button:hover { border-color: #397fa4; background: #d5edf7; }
.landing-streak-list { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 10px 10px; }
.landing-streak-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px; color: #28536b; font-size: 10px; }
.landing-streak-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-streak-row strong { color: #4c7587; font-size: 9px; font-weight: 500; }
.landing-streak-days { display: flex; gap: 2px; }
.landing-streak-days i { display: block; width: 7px; height: 7px; border: 1px solid #a2bfcb; border-radius: 2px; background: #f1f9fb; }
.landing-streak-days i.landing-streak-done { border-color: #4c91b8; background: #68afd0; }
.landing-mini-market .landing-rates { padding: 5px 10px 0; }
.landing-mini-market .landing-rate-footer { padding: 0 10px 7px; }
.landing-portfolio-body { display: flex; flex-direction: column; gap: 7px; padding: 12px; color: #28536b; font-size: 11px; }
.landing-portfolio-body > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.landing-portfolio-body strong { color: #1e6089; font-size: 20px; font-weight: 600; }
.landing-portfolio-change { color: #347b51; font-size: 12px; font-weight: 600; }
.landing-portfolio-change span { color: #6a8793; font-size: 9px; font-weight: 400; }
.landing-portfolio-chart { display: flex; align-items: end; gap: 4px; height: 34px; padding-top: 5px; border-top: 1px solid #c5dce5; }
.landing-portfolio-chart i { display: block; flex: 1; min-width: 6px; height: 35%; border-radius: 2px 2px 0 0; background: linear-gradient(#76c4df, #3c8fb8); }
.landing-portfolio-chart i:nth-child(2) { height: 48%; }
.landing-portfolio-chart i:nth-child(3) { height: 42%; }
.landing-portfolio-chart i:nth-child(4) { height: 68%; }
.landing-portfolio-chart i:nth-child(5) { height: 58%; }
.landing-portfolio-chart i:nth-child(6) { height: 88%; }
@media (max-width: 639px) {
  .landing-cards { display: block; height: 264px; }
  .landing-carousel-track { display: flex; flex-direction: column; gap: 8px; height: 100%; }
  .landing-scene { flex: 0 0 calc(100% - 22px); width: 100%; height: auto; min-height: 0; gap: 8px; padding: 0; }
  .landing-scene:last-child { flex-basis: 100%; }
  .landing-mini-window { min-height: 0; }
  .landing-mini-header { min-height: 29px; padding: 5px 8px; }
  .landing-focus-timer { font-size: 27px; }
}

/* The preview is a small Aero desktop, rather than a row of marketing cards. */
.landing-workspace {
  padding: 14px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(145deg, #b9e1efdd, #72aacae8 55%, #d5eff7e8);
}
.landing-workspace::before {
  height: 10px;
  margin-bottom: 12px;
}
.landing-cards { height: calc(100% - 22px); gap: 12px; }
.landing-card {
  position: relative;
  height: 220px;
  padding: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #7aa8be;
  border-radius: 9px;
  background: linear-gradient(180deg, #f7fcfe, #dcecf3);
  box-shadow: inset 0 0 0 1px #ffffffc7, 0 4px 10px #174b6738;
}
.landing-card::after {
  content: "−  □  ×";
  position: absolute;
  top: 7px;
  right: 10px;
  color: #eaf7fd;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  text-shadow: 0 1px #185178;
  pointer-events: none;
}
.landing-card-header {
  min-height: 34px;
  margin: 0 -14px 12px;
  padding: 7px 12px;
  border-bottom: 1px solid #2b6c96;
  background: linear-gradient(180deg, #78bce1 0%, #3f8db9 47%, #286c98 48%, #5ca7d0 100%);
  box-shadow: inset 0 1px #ffffffa8, 0 1px 2px #174c683d;
}
.landing-card-header h2 { color: #fff; font-size: 13px; text-shadow: 0 1px #1c5275; }
.landing-card-header span { margin-right: 52px; color: #e6f6fd; font-size: 11px; text-shadow: 0 1px #1c5275; }
.landing-card-tasks { height: 160px; }
.landing-task { color: #204861; }
.landing-task:hover { background: #b9e2f46b; }
.landing-checkbox { width: 16px; height: 16px; border-radius: 3px; }
.landing-rates strong { font-size: 18px; }
.landing-task { min-height: 24px; padding: 2px 6px; font-size: 13px; line-height: 18px; }
.landing-task-time { margin-left: auto; color: #668493; font-size: 10px; font-variant-numeric: tabular-nums; }
.landing-task-progress { height: 5px; margin: 5px 4px 0; overflow: hidden; border: 1px solid #91b7c8; border-radius: 99px; background: #edf7fa; box-shadow: inset 0 1px 2px #285d7624; }
.landing-task-progress span { display: block; width: var(--progress, 25%); height: 100%; border-radius: inherit; background: linear-gradient(180deg, #83caea, #3b8db8); box-shadow: inset 0 1px #ffffffa6; transition: width 180ms ease; }
.landing-habit-preview { gap: 4px; font-size: 12px; }
.landing-days { gap: 4px; }
.landing-day { flex-basis: 20px; width: 20px; height: 20px; min-height: 20px; border-radius: 4px; }
.landing-rate-up { color: #347b51 !important; }
.landing-rate-down { color: #a04d4d !important; }
.landing-rate-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 5px; color: #668493; font-size: 10px; }
.landing-rate-footer svg { width: 56%; height: 24px; color: #4b9bc2; }
@media (max-width: 639px) {
  .landing-card { padding: 0 12px 12px; border-radius: 9px; }
  .landing-card-header { margin: 0 -12px 10px; padding: 7px 10px; }
  .landing-card-tasks { height: auto; }
}

/* Scene sizing follows the preview viewport; legacy card sizing must not
   collapse the new two-window compositions back to 220px. */
.landing-scene {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.landing-scene::after { content: none !important; }
.landing-scene .landing-mini-window { min-height: 0; height: auto; }
.landing-scene-inbox .landing-mini-inbox,
.landing-scene-focus .landing-mini-streaks,
.landing-scene-market .landing-mini-market { flex: 1.2; }
.landing-scene-inbox .landing-mini-draft,
.landing-scene-focus .landing-mini-focus,
.landing-scene-market .landing-mini-portfolio { flex: .8; }
.landing-scene .landing-mini-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.landing-scene .landing-mini-header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-scene .landing-mini-header span { margin: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
  .landing-scene { height: auto !important; }
}

/* Keep preview chrome quiet: the frame identifies the desktop by itself. */
.landing-workspace::before { display: none; content: none; }
.landing-cards { height: 100%; }
.landing-scene .landing-mini-header { grid-template-columns: minmax(0, 1fr) auto; }

/* Give the focus timer the larger pane; its action must remain fully visible. */
.landing-scene-focus .landing-mini-focus { flex: 1.2; }
.landing-scene-focus .landing-mini-streaks { flex: .8; }

/* Landing windows are a preview of the dashboard, not stretched panels. Keep
   a compact, shared top/bottom rhythm and leave any remaining area as the
   desktop surface around the windows. */
.landing-scene { justify-content: flex-start; }
.landing-scene > .landing-mini-window { flex: 0 0 auto !important; }
.landing-scene > .landing-mini-window:first-child { flex-basis: 200px !important; }
.landing-scene > .landing-mini-window:last-child { flex-basis: 160px !important; }
.landing-inbox-list { flex: 0 0 auto; justify-content: flex-start; padding-top: 10px; }
.landing-rates { justify-content: flex-start; }
.landing-rates div { flex: 0 0 auto; min-height: 48px; }
.landing-streak-list { justify-content: flex-start; }

/* Segoe UI keeps the wordmark aligned with the Windows 7 system language. */
.landing-copy h1 {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -.045em;
}
.landing-hero { padding-top: clamp(80px, 10vh, 104px); }
@media (max-width: 639px) {
  .landing-hero { padding-top: 52px; }
  .landing-cards { height: calc(100% - 17px); }
}



/* Windows 7 logon artwork: keep the Aero shell readable over the blue field. */
.landing-page,
.dashboard-page {
  background-image:
    linear-gradient(180deg, rgb(3 30 68 / .16), rgb(5 63 105 / .24)),
    url("windows7-logon-4k.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.landing-page::before {
  opacity: 1;
  background: linear-gradient(180deg, rgb(8 43 92 / .12), rgb(20 122 177 / .08) 58%, rgb(8 45 76 / .24));
}
.landing-page::after { background: radial-gradient(ellipse at 50% 100%, rgb(202 245 255 / .22), transparent 68%); }
.landing-copy h1,
.landing-lead,
.landing-description,
.landing-brand,
.account-brand { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }

/* The logon artwork is darker than the previous gradient; use the bright Aero
   text treatment so the hero remains readable without a solid panel. */
.landing-copy h1 { color: #f4fbff; text-shadow: 0 2px 0 #164263, 0 4px 14px #001d3dcc; }
.landing-lead { color: #f4fbff; text-shadow: 0 2px 5px #07365acc; }
.landing-description { color: #e4f3fb; text-shadow: 0 1px 4px #07365acc; }


/* Subtle liquid-glass depth stays on the dashboard preview only. */
.landing-workspace {
  backdrop-filter: blur(16px) saturate(1.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.22);
}


/* The secondary auth action stays legible over the bright logon artwork. */
.landing-secondary-cta {
  padding: 8px 12px;
  border: 1px solid rgb(22 75 108 / .52);
  border-radius: 5px;
  color: #0d3d5c !important;
  background: rgb(234 249 255 / .72);
  box-shadow: inset 0 1px rgb(255 255 255 / .9), 0 2px 6px rgb(4 44 74 / .18);
  text-shadow: 0 1px rgb(255 255 255 / .9);
}
.landing-secondary-cta:hover {
  color: #092f4a !important;
  background: rgb(250 254 255 / .9);
}

/* Separate the two actions: filled primary, outlined secondary. */
.landing-secondary-cta {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgb(238 250 255 / .82);
  border-radius: 5px;
  color: #f7fcff !important;
  background: rgb(7 48 80 / .28);
  box-shadow: inset 0 1px rgb(255 255 255 / .5), 0 2px 6px rgb(0 34 62 / .2);
  text-shadow: 0 1px 3px rgb(0 30 58 / .9);
}
.landing-secondary-cta:hover {
  color: #fff !important;
  background: rgb(255 255 255 / .2);
}

/* Keep the complete Aero preview inside the fixed first viewport. */
@media (min-width: 640px) {
  .landing-hero { padding-bottom: 0; }
  .landing-hero-grid { gap: clamp(16px, 2.5vh, 28px); }
  .landing-workspace {
    flex: 0 0 auto;
    height: 420px;
    min-height: 0;
    margin-top: auto;
    margin-bottom: 2px;
  }
}

/* On a narrow viewport the preview is a real carousel: keep exactly one
   scene inside the window so the next scene never peeks through or gets
   mistaken for broken, stacked content. */
@media (max-width: 639px) {
  .landing-workspace {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    margin-top: auto;
    margin-bottom: 2px;
    --mobile-scene-height: 368px;
  }
  .landing-cards {
    display: block;
    height: var(--mobile-scene-height);
    overflow: hidden;
  }
  .landing-carousel-controls { display: none; }
  .landing-carousel-track {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
    overflow: visible;
  }
  .landing-scene,
  .landing-scene:last-child {
    flex: 0 0 var(--mobile-scene-height) !important;
    width: 100%;
    height: var(--mobile-scene-height) !important;
    min-height: 0;
    gap: 8px;
    overflow: hidden;
  }
  .landing-scene .landing-mini-window {
    min-height: 0;
  }
}

@media (max-width: 639px) and (max-height: 720px) {
  .landing-workspace {
    --mobile-scene-height: 328px;
  }
  .landing-scene > .landing-mini-window:first-child { flex-basis: 180px !important; }
  .landing-scene > .landing-mini-window:last-child { flex-basis: 140px !important; }
}

/* Auth uses the same Aero window language as the dashboard. */
.landing-auth-backdrop {
  background: rgb(5 42 70 / .34);
  backdrop-filter: blur(2px) saturate(1.02);
  -webkit-backdrop-filter: blur(2px) saturate(1.02);
}
.landing-auth-panel { width: min(420px, 100%); }
.landing-auth-panel .account-panel,
.account-page .account-panel {
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  border-color: #9fc6d9;
  background: linear-gradient(180deg, rgb(250 254 255 / .78) 0%, rgb(224 243 250 / .62) 100%);
  box-shadow: inset 0 0 0 1px #ffffffd4, 0 14px 32px #21608035;
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}
.landing-auth-panel .auth-panel-header,
.account-page .auth-panel-header {
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid #4d91b6;
  background: linear-gradient(180deg, rgb(173 221 240 / .92) 0%, rgb(130 189 219 / .88) 52%, rgb(103 169 206 / .9) 100%);
  box-shadow: inset 0 1px #ffffffc7;
  backdrop-filter: blur(8px) saturate(1.12);
  -webkit-backdrop-filter: blur(8px) saturate(1.12);
}
.landing-auth-panel .auth-panel-header h1,
.account-page .auth-panel-header h1 {
  margin: 0;
  color: #fff;
  font: 600 22px/1.2 "Segoe UI", Tahoma, sans-serif;
  text-shadow: 0 1px 2px #3c7695;
}
.landing-auth-panel .dialog-close,
.account-page .dialog-close {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 6px;
  border: 1px solid #d5edf6;
  border-radius: 4px;
  color: #285b78;
  background: #ffffff66;
  box-shadow: inset 0 1px #ffffffd4, 0 1px 2px #2160802e;
}
.landing-auth-panel .dialog-close:hover:not(:disabled),
.account-page .dialog-close:hover:not(:disabled) {
  color: #fff;
  color: #174c70;
  background: #ffffffb5;
}
.landing-auth-panel .auth-form,
.account-page .auth-form {
  gap: 14px;
  padding: 20px 24px 0;
}
.landing-auth-panel .auth-field label,
.account-page .auth-field label {
  margin-bottom: 5px;
  color: #526a7a;
  font-size: 13px;
  font-weight: 600;
}
.landing-auth-panel .auth-field input,
.account-page .auth-field input {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 15px;
  background: rgb(255 255 255 / .82);
}
.landing-auth-panel .account-submit,
.account-page .account-submit {
  min-height: 42px;
  margin-top: 3px;
  border-radius: 4px;
  font-size: 14px;
}
.landing-auth-panel .account-submit,
.account-page .account-submit {
  color: #f6fbfe;
  text-shadow: 0 1px 1px #2b6688;
  border-color: #3c7da5;
  background: linear-gradient(180deg, #83c8e7 0%, #559fc7 52%, #3e83ad 100%);
  box-shadow: inset 0 1px #ffffffb8;
}
.landing-auth-panel .account-submit:hover:not(:disabled),
.account-page .account-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #9bd9f2 0%, #68b2d7 52%, #4a92bb 100%);
}
.landing-auth-panel .auth-switch,
.account-page .auth-switch {
  margin: 16px 24px 22px;
  font-size: 13px;
}

.account-error-panel {
  width: min(420px, 100%);
}
.account-error-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 22px;
}
.account-error-body .auth-error {
  margin: 0;
  font-size: 13px;
}
.account-error-body .account-submit {
  margin-top: 0;
}

/* The auth close control is a small, quiet Aero affordance rather than a
   heavy button inside the titlebar. */
.landing-auth-panel .auth-close,
.account-page .auth-close {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 5px;
  border: 1px solid #9fc6d9;
  border-radius: 50%;
  color: #2c6280;
  background: rgb(245 252 255 / .32);
  box-shadow: inset 0 1px #ffffffb8, 0 1px 2px #21608024;
}
.landing-auth-panel .auth-close svg,
.account-page .auth-close svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.35;
}
.landing-auth-panel .auth-close:hover:not(:disabled),
.account-page .auth-close:hover:not(:disabled) {
  border-color: #4b8db7;
  color: #174c70;
  background: rgb(255 255 255 / .68);
  box-shadow: inset 0 1px #ffffffdc, 0 0 0 2px #5da5ce33;
}

/* An authenticated landing page only needs two compact actions. */
.landing-app > .landing-nav {
  inset: 16px 24px auto auto;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.landing-app > .landing-nav .landing-brand {
  display: none;
}
.landing-app > .landing-nav .landing-nav-actions {
  display: flex;
  gap: 6px;
}
/* Share one bubble style across the landing and dashboard navigation. */
.landing-app > .landing-nav .aero-nav-bubble,
.dashboard-page .aero-nav-bubble {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #d9eff9;
  border-radius: 8px;
  color: #123b59;
  background: linear-gradient(180deg, rgb(250 254 255 / .9), rgb(208 233 245 / .78));
  box-shadow: inset 0 1px #ffffffed, 0 2px 8px #17496538;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  font: 600 14px/20px "Segoe UI", Tahoma, Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px #ffffffd9;
}
.landing-app > .landing-nav .aero-nav-bubble:hover:not(:disabled),
.dashboard-page .aero-nav-bubble:hover:not(:disabled) {
  color: #0c3451;
  background: linear-gradient(180deg, rgb(255 255 255 / .96), rgb(224 243 251 / .88));
}
.landing-app > .landing-nav .aero-nav-bubble:focus-visible,
.dashboard-page .aero-nav-bubble:focus-visible {
  outline: 2px solid #3c8dca;
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .landing-app > .landing-nav {
    inset: 12px 12px auto auto;
  }
  .landing-app > .landing-nav .aero-nav-bubble,
  .dashboard-page .aero-nav-bubble {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 12px;
  }
}