@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --primary: #68558c; --on-primary: #fff; --primary-container: #ebddff;
  --secondary: #625b71; --on-secondary: #fff; --secondary-container: #e8def8;
  --tertiary: #7d5260; --on-tertiary: #fff; --tertiary-container: #ffd8e4;
  --surface: #fef9f3; --on-surface: #1d1b20; --surface-container: #f3edf7;
  --surface-container-low: #f7f2fa; --surface-container-lowest: #fff;
  --outline: #79747e; --outline-variant: #cac4d0;
  --error: #b3261e; --error-container: #f9dedc;
  --bg: #fef9f3;
}
html[data-theme="dark"] {
  --primary: #cfbdfa; --on-primary: #371e73; --primary-container: #4f378a;
  --secondary: #ccc2dc; --on-secondary: #332d41; --secondary-container: #4a4458;
  --tertiary: #efb8c8; --on-tertiary: #492532; --tertiary-container: #633b48;
  --surface: #141218; --on-surface: #e6e0e9; --surface-container: #211f26;
  --surface-container-low: #1d1b20; --surface-container-lowest: #0f0d13;
  --outline: #938f99; --outline-variant: #48464c;
  --error: #f2b8b5; --error-container: #8c1d18;
  --bg: #141218;
}

body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--on-surface); }
a { color:var(--primary); text-decoration:none; }

/* Tonal background */
.tonal-bg {
  background:
    radial-gradient(ellipse at 30% 0%,rgba(208,185,247,.1) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 100%,rgba(255,219,205,.12) 0%,transparent 50%),
    var(--bg);
}
html[data-theme="dark"] .tonal-bg {
  background:
    radial-gradient(ellipse at 30% 0%,rgba(208,185,247,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 100%,rgba(198,123,60,.05) 0%,transparent 50%),
    var(--bg);
}
/* Dark mode overrides for hardcoded colors */
html[data-theme="dark"] body { background: var(--bg); color: var(--on-surface); }
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"] { background: var(--surface-container-lowest) !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] p, html[data-theme="dark"] div, html[data-theme="dark"] span { color: inherit; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--surface-container-low); color: var(--on-surface); }
html[data-theme="dark"] .input-m3 { background: var(--surface-container-low); color: var(--on-surface); }
html[data-theme="dark"] .card-m3 { background: var(--surface-container-lowest); color: var(--on-surface); }
html[data-theme="dark"] .bottom-nav { background: var(--surface-container); }
html[data-theme="dark"] a { color: var(--primary); }
html[data-theme="dark"] [style*="color:#1a1a2e"],
html[data-theme="dark"] [style*="color: #1a1a2e"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"] { color: var(--on-surface) !important; }
html[data-theme="dark"] [style*="background:#faf8ff"],
html[data-theme="dark"] [style*="background:#fef9f3"],
html[data-theme="dark"] [style*="background:#f3f0ff"],
html[data-theme="dark"] [style*="background:#f7f2fa"] { background: var(--surface-container-low) !important; }
/* Bottom nav SVG icon stroke color */
html[data-theme="dark"] .bottom-nav a:not(.active) svg { stroke: var(--outline); }

/* Animations */
.page-enter { animation:fadeUp .3s ease-out; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
.animate-spin { animation:spin 1s linear infinite; }
.bounce { animation:bounce 3s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Layout */
.container { max-width:480px; margin:0 auto; }
.pb-nav { padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px)); }

/* --- Desktop/tablet: nicer background + wider content --- */
@media (min-width:768px) {
  .tonal-bg {
    background:
      radial-gradient(ellipse 800px 600px at top left, rgba(235,221,255,.5) 0%, transparent 60%),
      radial-gradient(ellipse 800px 600px at bottom right, rgba(255,216,228,.4) 0%, transparent 60%),
      var(--surface, #fdf6ee);
  }
}

/* Buttons */
.btn-primary { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;font-weight:700;border:none;border-radius:999px;cursor:pointer;transition:all .2s;box-shadow:0 8px 24px rgba(104,85,140,.2); }
.btn-primary:active { transform:scale(.98); }
.btn-secondary { background:var(--secondary);color:#fff;font-weight:700;border:none;border-radius:999px;cursor:pointer;box-shadow:0 8px 24px rgba(98,91,113,.2); }
.btn-outline { background:transparent;border:2px solid var(--primary);color:var(--primary);border-radius:999px;cursor:pointer; }

/* Inputs */
.input-m3 { width:100%;padding:14px 16px;border-radius:1.2rem;background:var(--surface-container-low);color:var(--on-surface);border:none;font-size:15px;outline:none;transition:box-shadow .2s;font-family:inherit; }
.input-m3:focus { box-shadow:0 0 0 2px rgba(104,85,140,.3); }
.input-m3::placeholder { color:var(--outline-variant); }

/* Labels */
.label-m3 { display:block;font-size:10px;font-weight:700;color:var(--outline);text-transform:uppercase;letter-spacing:.2em;margin-bottom:8px; }

/* Cards */
.card-m3 { background:var(--surface-container-lowest);border-radius:2rem;padding:20px;position:relative;overflow:hidden; }
.decor-circle { position:absolute;border-radius:50%;opacity:.15; }

/* Bottom Nav */
.bottom-nav { position:fixed;bottom:0;left:0;right:0;background:var(--surface-container);border-top:none;display:flex;justify-content:space-around;padding:8px 0 env(safe-area-inset-bottom);z-index:100; }
.bottom-nav a { display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--outline);padding:8px;font-weight:600;text-decoration:none; }
.bottom-nav a.active { color:var(--primary); }
.bottom-nav svg { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.bottom-nav a.active svg { stroke:var(--primary); }
.bottom-nav img { width:24px;height:24px; }

/* Toast */
.toast { position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:1rem;font-weight:600;z-index:1000;animation:fadeInOut 3s ease; }
@keyframes fadeInOut { 0%{opacity:0;transform:translateX(-50%) translateY(-20px)} 10%{opacity:1;transform:translateX(-50%) translateY(0)} 80%{opacity:1} 100%{opacity:0} }

/* Spinner */
.spinner { width:40px;height:40px;border:3px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite; }
.spinner-sm { width:20px;height:20px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto; }

/* Senior */
.senior-page { background:#1a1a1a;color:#fff;min-height:100vh;position:relative;overflow:hidden; }
.senior-media { width:100vw;height:100vh;object-fit:contain; }
.senior-controls { position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:24px;background:linear-gradient(transparent,rgba(0,0,0,.7)); }
.senior-btn { width:72px;height:72px;border-radius:50%;border:none;font-size:32px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.senior-clock { position:fixed;top:16px;right:16px;font-size:48px;font-weight:300;color:#fff;opacity:.8; }
.senior-sender { position:fixed;top:16px;left:16px;font-size:18px;color:#fff;opacity:.8;background:rgba(0,0,0,.4);padding:8px 16px;border-radius:20px; }
.senior-nav { position:fixed;top:50%;width:60px;height:100px;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:32px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.senior-nav.prev { left:0;border-radius:0 12px 12px 0; }
.senior-nav.next { right:0;border-radius:12px 0 0 12px; }

/* Utility */
.text-center { text-align:center; }
.flex { display:flex; }
.items-center { align-items:center; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.gap-4 { gap:16px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:16px; }
.mb-5 { margin-bottom:20px; }
.mb-6 { margin-bottom:24px; }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.mt-6 { margin-top:24px; }
.w-full { width:100%; }
.flex-1 { flex:1; }
.truncate { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

@media (min-width:768px) { .container { max-width:600px; } }
@media (min-width:1024px) { .container { max-width:700px; } }