/* ═══ OWO PLANNER — SHARED STYLES ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ═══ THEME TOKENS ═══ */
:root {
  /* Palette-neutral shared tokens (identical in dark + light) */
  --yellow: #FDE047;                         /* button bg, logo glyph (bg-only use) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --error: #f87171; --success: #4ade80; --warn: #fbbf24;
  color-scheme: dark;
}

/* DARK (default) — applies when no data-theme or data-theme="dark" */
:root, :root[data-theme="dark"] {
  /* Opacity-based overlays — invert automatically in light mode */
  --ov-02: rgba(255,255,255,0.02);
  --ov-03: rgba(255,255,255,0.03);
  --ov-04: rgba(255,255,255,0.04);
  --ov-05: rgba(255,255,255,0.05);
  --ov-06: rgba(255,255,255,0.06);
  --ov-07: rgba(255,255,255,0.07);
  --ov-08: rgba(255,255,255,0.08);
  --ov-10: rgba(255,255,255,0.10);
  --ov-12: rgba(255,255,255,0.12);
  --ov-15: rgba(255,255,255,0.15);
  --ov-18: rgba(255,255,255,0.18);
  --ov-20: rgba(255,255,255,0.20);
  --ov-25: rgba(255,255,255,0.25);
  --ov-30: rgba(255,255,255,0.30);
  --ov-35: rgba(255,255,255,0.35);
  --ov-40: rgba(255,255,255,0.40);
  --ov-45: rgba(255,255,255,0.45);
  --ov-50: rgba(255,255,255,0.50);
  --ov-55: rgba(255,255,255,0.55);
  --ov-60: rgba(255,255,255,0.60);
  --ov-65: rgba(255,255,255,0.65);
  --ov-70: rgba(255,255,255,0.70);
  --ov-80: rgba(255,255,255,0.80);
  --ov-92: rgba(255,255,255,0.92);
  --bg: #0A0A0A;
  --surface: #171717;
  --surface-2: #262626;
  --fg: #FFFFFF;
  --onyx: #0A0A0A;         /* legacy alias = page bg */
  --charcoal: #171717;     /* legacy alias = card/panel bg */
  --deep: #262626;         /* legacy alias = elevated surface */
  --white: #FFFFFF;        /* legacy alias = primary text (semantic, not literal) */
  --accent-ink: #FDE047;   /* yellow used as TEXT/link color */
  --accent-soft: rgba(253,224,71,0.08);
  --accent-ring: rgba(253,224,71,0.25);
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.15);
  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted: rgba(255,255,255,0.55);
  --text-subtle: rgba(255,255,255,0.4);
  --text-faint: rgba(255,255,255,0.3);
  --hairline: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.18);
  --hover-bg: rgba(255,255,255,0.04);
  --nav-bg: rgba(10,10,10,0.88);
  --footer-bg: #171717;
  --card-bg: rgba(255,255,255,0.04);
  --shadow-card: 0 8px 40px rgba(0,0,0,0.4);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.5);
  --gg-overlay: rgba(253,224,71,0.08);  /* yellow glow overlay */
  color-scheme: dark;
}

/* LIGHT */
:root[data-theme="light"] {
  /* Opacity-based overlays — inverted to dark-on-light */
  --ov-02: rgba(10,10,10,0.02);
  --ov-03: rgba(10,10,10,0.03);
  --ov-04: rgba(10,10,10,0.04);
  --ov-05: rgba(10,10,10,0.05);
  --ov-06: rgba(10,10,10,0.06);
  --ov-07: rgba(10,10,10,0.07);
  --ov-08: rgba(10,10,10,0.08);
  --ov-10: rgba(10,10,10,0.10);
  --ov-12: rgba(10,10,10,0.12);
  --ov-15: rgba(10,10,10,0.15);
  --ov-18: rgba(10,10,10,0.18);
  --ov-20: rgba(10,10,10,0.20);
  --ov-25: rgba(10,10,10,0.25);
  --ov-30: rgba(10,10,10,0.35);
  --ov-35: rgba(10,10,10,0.40);
  --ov-40: rgba(10,10,10,0.45);
  --ov-45: rgba(10,10,10,0.50);
  --ov-50: rgba(10,10,10,0.55);
  --ov-55: rgba(10,10,10,0.62);
  --ov-60: rgba(10,10,10,0.68);
  --ov-65: rgba(10,10,10,0.72);
  --ov-70: rgba(10,10,10,0.78);
  --ov-80: rgba(10,10,10,0.85);
  --ov-92: rgba(10,10,10,0.92);
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F4F4F5;
  --fg: #0A0A0A;
  --onyx: #FAFAFA;
  --charcoal: #FFFFFF;
  --deep: #F4F4F5;
  --white: #0A0A0A;        /* inverted — means "primary text" */
  --accent-ink: #6B4F0A;   /* AA-pass gold on white (>= 4.5:1) */
  --accent-soft: rgba(107,79,10,0.08);
  --accent-ring: rgba(107,79,10,0.28);
  --glass-bg: rgba(10,10,10,0.04);
  --glass-border: rgba(10,10,10,0.1);
  --text-primary: rgba(10,10,10,0.92);
  --text-secondary: rgba(10,10,10,0.72);
  --text-muted: rgba(10,10,10,0.58);
  --text-subtle: rgba(10,10,10,0.45);
  --text-faint: rgba(10,10,10,0.35);
  --hairline: rgba(10,10,10,0.08);
  --border: rgba(10,10,10,0.1);
  --border-strong: rgba(10,10,10,0.22);
  --hover-bg: rgba(10,10,10,0.04);
  --nav-bg: rgba(255,255,255,0.9);
  --footer-bg: #F4F4F5;
  --card-bg: rgba(10,10,10,0.03);
  --shadow-card: 0 8px 30px rgba(10,10,10,0.08);
  --shadow-modal: 0 16px 48px rgba(10,10,10,0.12);
  --gg-overlay: rgba(139,105,20,0.06);
  color-scheme: light;
}

/* Smooth theme transitions */
html { scroll-behavior: smooth; }
body, nav, .void-footer, .auth-card, .panel, .stat-card, .alloc-row, .alloc-total-bar,
.nav-links-mobile, .btn-ghost, .btn-black, .owo-toast {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
body { font-family:'Inter',sans-serif; background:var(--onyx); color:var(--white); overflow-x:hidden; min-height:100vh; }

/* ═══ AUTH-AWARE CTA SWAP (driven by data-signed-in on <html>) ═══ */
.nav-cta-user, .mobile-cta-user { display:none !important; }
:root[data-signed-in="1"] .nav-cta-guest,
:root[data-signed-in="1"] .mobile-cta-guest { display:none !important; }
:root[data-signed-in="1"] .nav-cta-user { display:inline-block !important; }
:root[data-signed-in="1"] .mobile-cta-user { display:block !important; }

/* ═══ THEME TOGGLE BUTTON (in nav) ═══ */
.theme-toggle {
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:var(--hover-bg); cursor:pointer; flex-shrink:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all 0.25s var(--ease); color:var(--text-secondary);
  position:relative; /* enables hit-area expansion via ::before */
}
/* Invisible 44×44 hit area for WCAG 2.5.5 — preserves the visual 32×32
   button but ensures touch + screen-reader hit zones meet the minimum
   target size. Same pattern applied to all nav controls below. */
.theme-toggle::before {
  content:""; position:absolute; inset:-6px; border-radius:50%;
}
.theme-toggle:hover { color:var(--accent-ink); border-color:var(--accent-ring); background:var(--accent-soft); transform:rotate(12deg); }
.theme-toggle:active { transform:rotate(12deg) scale(0.92); }
.theme-toggle svg { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .t-sun { display:none; }
.theme-toggle .t-moon { display:block; }
:root[data-theme="light"] .theme-toggle .t-sun { display:block; }
:root[data-theme="light"] .theme-toggle .t-moon { display:none; }

/* ═══ SKIP NAV ═══ */
.skip-link {
  position:absolute; top:-100px; left:16px; z-index:9999;
  background:var(--yellow); color:#0A0A0A;
  /* Bumped from 10px 20px so the focused-state hit area is ≥44px tall
     (12 + ~20 line-height + 12 = 44+). WCAG 2.5.5 conformance. */
  padding:14px 22px; min-height:44px; box-sizing:border-box;
  display:inline-flex; align-items:center;
  border-radius:0 0 12px 12px;
  font-size:13px; font-weight:700; text-decoration:none;
  transition:top 0.2s ease;
}
.skip-link:focus { top:0; }

/* ═══ FOCUS ═══ */
:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none;
  border-color:rgba(253,224,71,0.6) !important;
  box-shadow:0 0 0 3px rgba(253,224,71,0.15);
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ═══ NAV ═══ */
nav {
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:1000;
  background:var(--nav-bg); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:100px;
  padding:10px 14px 10px 24px; display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-card); white-space:nowrap;
  max-width:calc(100vw - 32px);
}
.nav-logo {
  cursor:pointer; display:flex; align-items:center; line-height:0; flex-shrink:0;
  text-decoration:none; position:relative;
  /* Hit-area expansion (visual stays at logo's intrinsic ~46×22) */
  padding:11px 4px; margin:-11px -4px;
}
.nav-logo img { height:22px; width:auto; display:block; transition:filter 0.35s var(--ease); }
:root[data-theme="light"] .nav-logo img { filter:invert(1) hue-rotate(180deg) brightness(0.9); }
.nav-spacer { flex:1; min-width:8px; }
.nav-link {
  font-size:11px; font-weight:600; color:var(--text-muted); letter-spacing:0.05em;
  text-transform:uppercase; cursor:pointer; background:none; border:none;
  /* Padding bumped from 8 14 → 12 16 so 11px text + 24 padding ≥ 44px tall.
     WCAG 2.5.5: minimum touch target on mobile + adequate for keyboard
     focus rings on desktop. */
  padding:12px 16px; min-height:44px;
  border-radius:100px; transition:all 0.3s var(--ease); text-decoration:none;
  display:inline-flex; align-items:center;
}
.nav-link:hover { color:var(--white); }
.nav-link.active { color:var(--accent-ink); }
.nav-link[aria-current="page"] { color:var(--accent-ink); }
.nav-signin {
  background:var(--yellow); color:#0A0A0A; border:none; border-radius:100px;
  /* Padding bumped from 8 18 → 12 20 for ≥44px tall touch target. */
  padding:12px 20px; min-height:44px; font-size:11px; font-weight:700;
  letter-spacing:0.03em; cursor:pointer; transition:all 0.3s var(--ease);
  text-decoration:none; display:inline-flex; align-items:center;
}
.nav-signin:hover { transform:scale(1.05); }
.nav-signout {
  background:transparent; color:var(--accent-ink); border:1.5px solid var(--accent-ink); border-radius:100px;
  padding:12px 20px; min-height:44px; font-size:11px; font-weight:700;
  letter-spacing:0.03em; cursor:pointer; transition:all 0.3s var(--ease);
  display:inline-flex; align-items:center;
}
.nav-signout:hover { background:var(--yellow); color:#0A0A0A; border-color:var(--accent-ink); }
.nav-username { font-size:11px; font-weight:600; color:var(--text-muted); }

/* Hamburger toggle */
.nav-hamburger {
  display:none; background:none; border:none; cursor:pointer; padding:6px;
  width:36px; height:36px; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-hamburger svg { width:20px; height:20px; stroke:var(--white); stroke-width:2; stroke-linecap:round; fill:none; }
.nav-links-mobile {
  display:none; position:fixed; top:72px; left:16px; right:16px; z-index:999;
  background:var(--nav-bg); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:24px;
  padding:20px 24px; flex-direction:column; gap:4px;
  box-shadow:var(--shadow-modal);
}
.nav-links-mobile.open { display:flex; }
.nav-links-mobile a {
  font-size:14px; font-weight:600; color:var(--text-secondary); text-decoration:none;
  padding:12px 16px; border-radius:14px; transition:all 0.2s;
}
.nav-links-mobile a:hover, .nav-links-mobile a.active { color:var(--accent-ink); background:var(--accent-soft); }
.nav-links-mobile a[aria-current="page"] { color:var(--accent-ink); background:var(--accent-soft); }

/* ═══ AUTH SCREEN ═══ */
.auth-screen {
  position:fixed; inset:0; z-index:2000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.auth-screen.hidden { display:none; }
.auth-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:32px; padding:48px 40px; max-width:420px; width:90%; text-align:center;
  position:relative; box-shadow:var(--shadow-card);
}
.auth-logo { margin-bottom:28px; display:flex; align-items:center; justify-content:center; }
.auth-logo img { height:36px; width:auto; display:block; }
:root[data-theme="light"] .auth-logo img { filter:invert(1) hue-rotate(180deg) brightness(0.9); }
.auth-headline { font-size:24px; font-weight:800; letter-spacing:-0.03em; margin-bottom:8px; color:var(--white); }
.auth-sub { font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:36px; }
.auth-google {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:14px 24px; border-radius:100px; border:1px solid var(--border-strong);
  background:#FFFFFF; color:#0A0A0A;
  font-size:14px; font-weight:700; cursor:pointer; transition:all 0.3s var(--ease);
  margin-bottom:16px;
}
.auth-google:hover { transform:scale(1.02); box-shadow:0 8px 24px rgba(253,224,71,0.15); }
.auth-google svg { width:20px; height:20px; }
.auth-divider { display:flex; align-items:center; gap:14px; margin:20px 0; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--hairline); }
.auth-divider span { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); }
.auth-form { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.auth-input {
  width:100%; padding:14px 20px; border-radius:16px; border:1px solid var(--border);
  background:var(--hover-bg); font-size:14px;
  font-weight:500; color:var(--white); outline:none; transition:all 0.3s var(--ease);
}
.auth-input::placeholder { color:var(--text-subtle); }
.auth-input:focus { border-color:rgba(253,224,71,0.5); background:rgba(253,224,71,0.03); }
.auth-submit {
  width:100%; padding:14px 24px; border-radius:100px; border:none;
  background:var(--yellow); color:#0A0A0A;
  font-size:14px; font-weight:800; cursor:pointer; transition:all 0.3s var(--ease);
  letter-spacing:-0.01em;
}
.auth-submit:hover { transform:scale(1.02); box-shadow:0 8px 24px rgba(253,224,71,0.2); }
.auth-submit:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.auth-error {
  font-size:12px; color:var(--error); background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.15); border-radius:12px; padding:10px 16px;
  display:none; text-align:left; line-height:1.5; margin-bottom:12px;
}
.auth-error.show { display:block; }
.auth-error.success { color:var(--success); background:rgba(74,222,128,0.08); border-color:rgba(74,222,128,0.2); }
.auth-toggle { font-size:13px; color:var(--text-subtle); margin-top:4px; }
.auth-toggle button { background:none; border:none; color:var(--accent-ink); font-size:13px; font-weight:700; cursor:pointer; padding:0; transition:opacity 0.2s; }
.auth-toggle button:hover { opacity:0.7; }
.auth-skip { background:none; border:none; color:var(--text-faint); font-size:12px; font-weight:500; cursor:pointer; padding:10px; transition:color 0.2s; margin-top:8px; }
.auth-skip:hover { color:var(--accent-ink); }
.auth-close { position:absolute; top:16px; right:16px; background:var(--surface-2); border:1px solid var(--border); color:var(--white); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:0; display:flex; align-items:center; justify-content:center; z-index:10; transition:all 0.2s var(--ease); line-height:1; padding:0; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.auth-close::before, .auth-close::after { content:''; position:absolute; width:14px; height:2px; background:currentColor; border-radius:2px; }
.auth-close::before { transform:rotate(45deg); }
.auth-close::after { transform:rotate(-45deg); }
.auth-close:hover { background:var(--yellow); color:#0A0A0A; border-color:var(--yellow); transform:rotate(90deg) scale(1.05); }
.auth-close:focus-visible { outline:2px solid var(--accent-ink); outline-offset:2px; }

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

/* ═══ SELECT (iOS FIX) ═══ */
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/* ═══ TOUCH TARGETS ═══ */
button, a, input, select, textarea, [role="button"] { touch-action:manipulation; }

/* ═══ BUTTONS ═══ */
.btn-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.btn-yellow { display:inline-flex; align-items:center; gap:10px; background:var(--yellow); color:#0A0A0A; border:none; border-radius:100px; padding:15px 30px; font-size:14px; font-weight:800; letter-spacing:-0.01em; cursor:pointer; transition:transform 0.3s var(--ease); }
.btn-yellow:hover { transform:scale(1.05); }
.btn-yellow:active { transform:scale(0.95); }
.btn-yellow:disabled { opacity:0.35; cursor:not-allowed; transform:none; }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border-strong); color:var(--text-muted); border-radius:100px; padding:14px 26px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.3s var(--ease); }
.btn-ghost:hover { border-color:var(--border-strong); color:var(--white); }
.btn-black {
  display:inline-flex; align-items:center; gap:10px; background:var(--fg); color:var(--bg);
  border:none; border-radius:100px; padding:14px 20px 14px 24px;
  font-size:15px; font-weight:800; letter-spacing:-0.02em; cursor:pointer;
  transition:all 0.4s var(--ease); position:relative; overflow:hidden; width:fit-content;
  box-shadow:0 4px 20px rgba(0,0,0,0.2); text-decoration:none;
}
.btn-black::before { content:''; position:absolute; inset:0; border-radius:100px; background:linear-gradient(135deg, rgba(253,224,71,0.15) 0%, transparent 50%); opacity:0; transition:opacity 0.4s var(--ease); }
.btn-black:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 12px 36px rgba(0,0,0,0.35), 0 0 0 2px rgba(253,224,71,0.2); }
.btn-black:hover::before { opacity:1; }
.btn-black:active { transform:translateY(0) scale(0.97); }
.btn-black .btn-arrow { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--yellow); color:#0A0A0A; font-size:13px; font-weight:900; transition:transform 0.4s var(--ease); flex-shrink:0; }
.btn-black:hover .btn-arrow { transform:translateY(3px); }
.hr { height:1px; background:var(--hairline); margin:28px 0; border:none; }
.section-gap { height:28px; }

/* ═══ TOAST NOTIFICATIONS ═══ */
#toastContainer { position:fixed; bottom:32px; left:50%; transform:translateX(-50%); z-index:99999; display:flex; flex-direction:column-reverse; gap:8px; align-items:center; pointer-events:none; }
.owo-toast { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 18px; font-size:13px; font-weight:600; color:var(--white); box-shadow:var(--shadow-modal); pointer-events:auto; display:flex; align-items:center; gap:10px; min-width:240px; max-width:min(400px,calc(100vw - 40px)); animation:toastIn 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.owo-toast.error { border-color:rgba(248,113,113,0.45); background:rgba(248,113,113,0.1); }
.owo-toast.success { border-color:rgba(74,222,128,0.35); background:rgba(74,222,128,0.1); }
.owo-toast.confirm { border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.1); flex-wrap:wrap; gap:8px; }
.toast-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--yellow); }
.owo-toast.error .toast-dot { background:var(--error); }
.owo-toast.success .toast-dot { background:var(--success); }
.owo-toast.confirm .toast-dot { background:var(--error); }
.toast-msg { flex:1; line-height:1.4; }
.toast-actions { display:flex; gap:6px; flex-shrink:0; }
.toast-btn-confirm { background:var(--error); color:#fff; border:none; border-radius:8px; padding:5px 12px; font-size:11px; font-weight:800; cursor:pointer; transition:opacity 0.2s; }
.toast-btn-confirm:hover { opacity:0.85; }
.toast-btn-cancel { background:transparent; color:var(--text-subtle); border:1px solid var(--border); border-radius:8px; padding:5px 10px; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.toast-btn-cancel:hover { border-color:var(--border-strong); color:var(--white); }
@keyframes toastIn { from{opacity:0;transform:translateY(14px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes toastOut { from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(8px) scale(0.97);} }

/* ═══ FOOTER ═══ */
.void-footer { background:var(--footer-bg); border-radius:40px 40px 0 0; padding:64px 48px 48px; margin-top:48px; position:relative; overflow:hidden; }
.vf-glow {
  position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  /* Cap width to viewport on small screens so the radial glow can't push
     past the footer's bounds. (Visual was already clipped by overflow:hidden
     on .void-footer, but eliminating the overflow prevents scrollWidth >
     clientWidth which trips a11y/QA scrollbar detectors.) */
  width:min(500px, 100%); height:200px;
  background:radial-gradient(circle,var(--gg-overlay) 0%,transparent 70%);
  pointer-events:none;
}
.vf-headline { font-size:clamp(28px,4vw,44px); font-weight:900; letter-spacing:-0.03em; color:var(--white); margin-bottom:8px; }
.vf-headline em { font-style:normal; color:var(--accent-ink); }
.vf-sub { font-size:14px; color:var(--text-muted); margin-bottom:48px; }
.vf-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.vf-col-label { font-size:10px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.vf-col-text { font-size:13px; color:var(--text-muted); line-height:1.8; }
.vf-links { display:flex; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.vf-link { font-size:12px; font-weight:600; color:var(--text-subtle); cursor:pointer; background:none; border:none; transition:color 0.2s; text-decoration:none; }
.vf-link:hover { color:var(--accent-ink); }
.vf-disclaimer { font-size:10px; color:var(--text-faint); text-align:center; margin-bottom:16px; line-height:1.6; max-width:480px; margin-left:auto; margin-right:auto; }
.vf-copy { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); padding-top:28px; border-top:1px solid var(--hairline); text-align:center; }

/* ═══ PAGE WRAPPER ═══ */
.page-wrap { max-width:880px; margin:0 auto; padding:120px 32px 80px; }
.page-wrap-narrow { max-width:720px; margin:0 auto; padding:120px 32px 80px; }

/* ═══ SHARED MOBILE ═══ */
@media(max-width:720px){
  .nav-link { display:none; }
  .nav-hamburger { display:flex; }
}
@media(max-width:640px){
  nav { padding:8px 10px 8px 18px; gap:6px; top:12px; max-width:calc(100vw - 20px); }
  .nav-logo img { height:18px; }
  .nav-signin { padding:7px 14px; font-size:10px; }
  .auth-card { padding:32px 22px; border-radius:24px; width:calc(100% - 24px); }
  .auth-headline { font-size:22px; }
  .auth-sub { font-size:13px; margin-bottom:28px; }
  .auth-google, .auth-submit { padding:13px 20px; font-size:13px; }
  .vf-grid { grid-template-columns:1fr; gap:28px; }
  .void-footer { padding:44px 20px 32px; border-radius:28px 28px 0 0; margin-top:32px; }
  .vf-sub { margin-bottom:32px; }
  .vf-links { gap:16px; margin-bottom:24px; }
  .vf-disclaimer { font-size:10px; padding:0 4px; }
  .page-wrap, .page-wrap-narrow { padding:90px 18px 56px; }
  .btn-yellow, .btn-black { padding:14px 22px; font-size:14px; }
  .btn-ghost { padding:12px 20px; font-size:13px; }
  #toastContainer { bottom:20px; left:12px; right:12px; transform:none; }
  .owo-toast { min-width:0; max-width:100%; font-size:12px; padding:11px 14px; }
}
@media(max-width:400px){
  nav { padding:7px 8px 7px 14px; gap:4px; }
  .nav-logo img { height:16px; }
  .nav-signin { padding:6px 12px; font-size:10px; }
  .theme-toggle { width:28px; height:28px; }
  .theme-toggle svg { width:14px; height:14px; }
  .auth-card { padding:28px 18px; }
  .page-wrap, .page-wrap-narrow { padding:84px 14px 48px; }
}

/* ═══ PRINT ═══ */
@media print {
  body { background:#fff; color:#000; }
  nav, .nav-hamburger, .nav-links-mobile, .skip-link, #toastContainer,
  .auth-screen, .onboard-screen, .account-modal, #appLoader,
  .void-footer, .btn-black, .btn-yellow, .btn-ghost, .nav-signin, .nav-signout,
  .theme-toggle, .qlog-form, .chat-wrap, .dash-actions { display:none !important; }
  .dash-wrap { padding-top:20px !important; }
  .stat-card, .panel { border:1px solid #ddd; background:#fafafa; }
  .stat-val, .stat-label, .cat-name, .panel-title,
  .health-score-val strong, .hf-label { color:#000 !important; }
  .cat-amounts, .hf-val, .stat-sub { color:#333 !important; }
  a { color:#000; text-decoration:underline; }
  .vf-glow, .about-hero-glow, .blog-glow, .hero-noise { display:none !important; }
}

/* ═══ A11Y UTILITIES ═══ */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.health-score-label {
  font-size:12px; font-weight:700; letter-spacing:0.05em; text-align:center;
  color:var(--text-faint); margin:-4px 0 10px; text-transform:uppercase;
}
.owo-toast.warn { background:rgba(251,191,36,0.1); border-color:rgba(251,191,36,0.35); }
.owo-toast.warn .toast-dot { background:#fbbf24; }

/* ═══ DASHBOARD HISTORY BUTTON ═══ */
.dash-history-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  background:var(--ov-04); border:1px solid var(--ov-08);
  color:var(--white); font:600 13px/1 'Inter',sans-serif;
  cursor:pointer; transition:all 0.18s var(--ease,ease);
  margin-right:10px;
}
.dash-history-btn:hover { background:var(--ov-07); border-color:var(--ov-12); transform:translateY(-1px); }
.dash-history-btn svg { opacity:0.85; }
@media(max-width:640px){
  .dash-history-btn span { display:none; }
  .dash-history-btn { padding:10px 12px; margin-right:6px; }
}

/* ═══ MONTH HISTORY + ARCHIVE + WRAPPED MODAL SCAFFOLD ═══ */
.history-modal, .archive-modal, .wrapped-modal {
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,10,0.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
  animation:histFadeIn 0.22s ease;
}
.history-modal.hidden, .archive-modal.hidden, .wrapped-modal.hidden { display:none; }
@keyframes histFadeIn { from { opacity:0; } to { opacity:1; } }
.history-card, .archive-card, .wrapped-card {
  position:relative;
  width:100%; max-width:560px; max-height:90vh;
  background:var(--panel,#151515); border:1px solid var(--ov-08);
  border-radius:22px; padding:28px 26px; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  animation:histPop 0.28s var(--ease,cubic-bezier(0.22,0.61,0.36,1));
}
@keyframes histPop { from { transform:translateY(12px) scale(0.98); opacity:0; } to { transform:none; opacity:1; } }
.wrapped-card { max-width:640px; padding:36px 30px; }

.history-head { margin-bottom:20px; padding-right:32px; }
.history-eyebrow, .archive-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.18em;
  color:var(--accent-ink,#fde047); text-transform:uppercase; margin-bottom:8px;
}
.history-title, .archive-title {
  font-size:24px; font-weight:900; letter-spacing:-0.02em;
  color:var(--white); margin:0 0 6px;
}
.history-sub, .archive-sub {
  font-size:13px; color:var(--ov-50); margin:0;
}

.history-row {
  display:block; width:100%; text-align:left;
  padding:14px 16px; margin-bottom:10px;
  background:var(--ov-04); border:1px solid var(--ov-07);
  border-radius:14px; cursor:pointer; transition:all 0.18s ease;
  font:inherit; color:inherit;
}
.history-row:hover { background:var(--ov-07); border-color:var(--ov-12); transform:translateY(-1px); }
.history-row-current { border-color:rgba(253,224,71,0.35); background:rgba(253,224,71,0.05); }
.history-row-month { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.history-row-month strong { font-size:15px; font-weight:800; color:var(--white); letter-spacing:-0.01em; }
.history-row-tag {
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  background:var(--ov-08); color:var(--ov-60);
}
.history-row-tag-under { background:rgba(74,222,128,0.1); color:#4ade80; }
.history-row-tag-over  { background:rgba(248,113,113,0.1); color:#f87171; }
.history-row-stats {
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:12px; color:var(--ov-55);
}
.history-row-stats em { font-style:normal; color:var(--ov-30); margin-right:5px; font-weight:600; }

.history-empty { padding:32px 10px; text-align:center; }
.history-empty-icon { font-size:34px; margin-bottom:10px; }
.history-empty-title { font-size:15px; font-weight:800; color:var(--white); margin-bottom:6px; }
.history-empty-sub { font-size:13px; color:var(--ov-50); line-height:1.6; max-width:380px; margin:0 auto; }

.history-foot, .archive-foot {
  margin-top:18px; padding-top:18px; border-top:1px solid var(--ov-05);
  display:flex; gap:10px; justify-content:flex-end;
}
.history-wrapped-btn {
  background:linear-gradient(135deg, rgba(253,224,71,0.12), rgba(253,224,71,0.04));
  border:1px solid rgba(253,224,71,0.3);
  color:var(--accent-ink,#fde047);
  padding:10px 16px; border-radius:12px;
  font:700 13px/1 'Inter',sans-serif; cursor:pointer;
  transition:all 0.18s ease;
}
.history-wrapped-btn:hover { background:rgba(253,224,71,0.15); transform:translateY(-1px); }

/* Archive viewer */
.archive-readonly-banner {
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:var(--ov-07); color:var(--ov-60);
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:18px;
}
.archive-head { margin-bottom:22px; }
.archive-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:22px;
}
.archive-stat {
  padding:12px 14px; background:var(--ov-04); border:1px solid var(--ov-07);
  border-radius:12px; display:flex; flex-direction:column; gap:4px;
}
.archive-stat-label { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ov-30); }
.archive-stat-val { font-size:18px; font-weight:900; letter-spacing:-0.02em; color:var(--white); }
.archive-stat-val em { font-style:normal; font-size:12px; font-weight:600; color:var(--ov-50); margin-left:4px; }
.archive-stat.good .archive-stat-val { color:#4ade80; }
.archive-stat.bad  .archive-stat-val { color:#f87171; }
.archive-section-title {
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ov-40); margin:4px 0 12px;
}
.arch-cat-row { margin-bottom:12px; }
.arch-cat-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:13px; }
.arch-cat-icon { font-size:16px; }
.arch-cat-label { flex:1; color:var(--ov-70); font-weight:600; }
.arch-cat-vals { text-align:right; }
.arch-cat-vals strong { color:var(--white); font-weight:800; }
.arch-cat-vals em { font-style:normal; color:var(--ov-40); font-size:11px; margin-left:6px; }
.arch-cat-bar { height:6px; background:var(--ov-05); border-radius:999px; overflow:hidden; }
.arch-cat-bar-fill { height:100%; border-radius:999px; transition:width 0.4s ease; }
.arch-bar-ok    { background:linear-gradient(90deg, #4ade80, #86efac); }
.arch-bar-near  { background:linear-gradient(90deg, #fbbf24, #fde047); }
.arch-bar-over  { background:linear-gradient(90deg, #f87171, #fca5a5); }
.archive-empty { text-align:center; color:var(--ov-50); font-size:13px; padding:16px; }

/* Wrapped page */
.wrapped-hero { text-align:center; margin-bottom:28px; }
.wrapped-year {
  font-size:13px; font-weight:800; letter-spacing:0.3em;
  color:var(--accent-ink,#fde047); margin-bottom:10px;
}
.wrapped-headline {
  font-size:34px; font-weight:900; letter-spacing:-0.03em;
  color:var(--white); margin:0 0 8px; line-height:1.05;
}
.wrapped-sub { font-size:14px; color:var(--ov-55); margin:0; }
.wrapped-bigstats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:26px;
}
.wrapped-bigstat {
  padding:16px 14px; border-radius:14px;
  background:var(--ov-04); border:1px solid var(--ov-07);
  text-align:center;
}
.wrapped-bigstat-label {
  display:block; font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ov-30); margin-bottom:6px;
}
.wrapped-bigstat strong { font-size:20px; font-weight:900; letter-spacing:-0.02em; color:var(--white); }
.wrapped-bigstat.good strong { color:#4ade80; }
.wrapped-bigstat.bad  strong { color:#f87171; }
.wrapped-section { margin-bottom:28px; }
.wrapped-section-title {
  font-size:12px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ov-40); margin:0 0 14px;
}
.wrapped-bars {
  display:flex; align-items:flex-end; gap:6px;
  height:120px; padding:6px 0; border-bottom:1px solid var(--ov-05);
}
.wrapped-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.wrapped-bar {
  width:100%; max-width:28px; min-height:6px;
  background:linear-gradient(180deg, var(--accent-ink,#fde047), rgba(253,224,71,0.3));
  border-radius:6px 6px 2px 2px;
  transition:height 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.wrapped-bar-label {
  font-size:10px; font-weight:700; color:var(--ov-40); letter-spacing:0.05em; text-transform:uppercase;
}
.wrapped-cats { display:flex; flex-direction:column; gap:8px; }
.wrapped-cat-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--ov-04); border:1px solid var(--ov-07); border-radius:12px;
}
.wrapped-cat-rank {
  font-size:13px; font-weight:900; color:var(--accent-ink,#fde047); width:22px;
}
.wrapped-cat-icon { font-size:18px; }
.wrapped-cat-label { flex:1; font-size:14px; font-weight:600; color:var(--white); }
.wrapped-cat-val { font-size:14px; font-weight:800; color:var(--white); }
.wrapped-moments {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px;
  margin-bottom:28px;
}
.wrapped-moment {
  padding:14px 16px; border-radius:14px;
  background:var(--ov-04); border:1px solid var(--ov-07);
}
.wrapped-moment.good { background:rgba(74,222,128,0.06); border-color:rgba(74,222,128,0.2); }
.wrapped-moment.bad  { background:rgba(248,113,113,0.06); border-color:rgba(248,113,113,0.2); }
.wrapped-moment-label { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ov-35); margin-bottom:6px; }
.wrapped-moment-val   { font-size:18px; font-weight:900; color:var(--white); letter-spacing:-0.02em; }
.wrapped-moment-val em { font-style:normal; font-size:13px; font-weight:700; color:var(--ov-40); margin-left:4px; }
.wrapped-moment-sub   { font-size:12px; color:var(--ov-55); margin-top:4px; }
.wrapped-footer-note {
  text-align:center; font-size:11px; font-weight:600; letter-spacing:0.12em;
  color:var(--ov-30); text-transform:uppercase; padding-top:16px; border-top:1px solid var(--ov-05);
}
.wrapped-foot { margin-top:20px; display:flex; gap:10px; justify-content:flex-end; }
.wrapped-share-btn {
  background:var(--accent-ink,#fde047); color:#1a1300;
  border:0; padding:11px 18px; border-radius:12px;
  font:800 13px/1 'Inter',sans-serif; cursor:pointer; letter-spacing:0.02em;
  transition:all 0.18s ease;
}
.wrapped-share-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(253,224,71,0.2); }
.wrapped-back-btn {
  background:var(--ov-05); border:1px solid var(--ov-08); color:var(--white);
  padding:11px 18px; border-radius:12px;
  font:700 13px/1 'Inter',sans-serif; cursor:pointer;
}
.wrapped-back-btn:hover { background:var(--ov-08); }

/* Account modal: new action buttons (match existing patterns) */
.account-action-btn {
  display:block; width:100%; margin-top:6px;
  padding:11px 14px; border-radius:12px;
  background:var(--ov-04); border:1px solid var(--ov-07);
  color:var(--white); font:600 13px/1 'Inter',sans-serif;
  cursor:pointer; text-align:left; letter-spacing:-0.01em;
  transition:all 0.18s ease;
}
.account-action-btn:hover { background:var(--ov-07); border-color:var(--ov-12); transform:translateX(2px); }

@media(max-width:640px){
  .history-card, .archive-card, .wrapped-card { padding:22px 18px; border-radius:18px; }
  .wrapped-headline { font-size:26px; }
  .wrapped-bigstats { grid-template-columns:1fr 1fr; }
  .archive-stats { grid-template-columns:1fr 1fr; }
}
@media(max-width:400px){
  .wrapped-bigstats { grid-template-columns:1fr; }
}
[data-theme="light"] .dash-history-btn { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); color:#1a1a1a; }
[data-theme="light"] .history-card,
[data-theme="light"] .archive-card,
[data-theme="light"] .wrapped-card { background:#fff; border-color:rgba(0,0,0,0.08); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}