@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;
}

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%),
    #fef9f3;
}

/* 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)); }

/* 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,.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; } }