@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

:root { --ink:#0b1918; --paper:#f5f1e8; --lime:#d8ff66; --mint:#b8e0d2; --muted:#66706c; --line:rgba(11,25,24,.12); --danger:#a13e35; }
* { box-sizing:border-box; }
html { background:#d8d7d0; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; -webkit-font-smoothing:antialiased; }
button,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.app-shell { min-height:100dvh; max-width:520px; margin:0 auto; background:var(--paper); position:relative; overflow:hidden; box-shadow:0 0 70px rgba(0,0,0,.12); }
.onboarding { min-height:100dvh; padding:clamp(28px,7vh,68px) 28px 26px; display:flex; flex-direction:column; background:radial-gradient(circle at 85% 18%,rgba(216,255,102,.28),transparent 26%),var(--ink); color:white; }
.brand-mark { width:54px; height:66px; border:2px solid var(--lime); border-radius:50% 50% 52% 52%; position:relative; margin-bottom:auto; transform:rotate(45deg); }
.brand-mark:before,.brand-mark:after,.brand-mark span:before { content:""; position:absolute; background:var(--lime); }
.brand-mark:before { width:2px; height:34px; left:25px; top:14px; }
.brand-mark:after { height:2px; width:34px; left:9px; top:30px; }
.brand-mark span:before { width:12px; height:12px; border-radius:50%; left:20px; top:25px; background:var(--ink); border:2px solid var(--lime); z-index:1; }
.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:700; margin:0 0 10px; opacity:.68; }
.onboarding h1 { font-size:clamp(48px,14vw,72px); line-height:.92; letter-spacing:-.055em; margin:0 0 22px; font-weight:600; }
.onboarding h1 em { color:var(--lime); font-family:"Playfair Display",serif; font-weight:600; }
.lead { color:#c5ceca; line-height:1.55; font-size:17px; max-width:390px; margin:0 0 28px; }
.privacy-note { display:flex; gap:14px; align-items:center; padding:15px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; margin-bottom:18px; }
.privacy-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgba(216,255,102,.12); color:var(--lime); font-size:22px; }
.privacy-note strong,.privacy-note small { display:block; }
.privacy-note strong { font-size:13px; margin-bottom:3px; }.privacy-note small { color:#95a29d; font-size:11px; line-height:1.35; }
.primary-button,.secondary-button,.danger-button { width:100%; border:0; border-radius:14px; min-height:56px; font-weight:700; }
.primary-button { background:var(--lime); color:var(--ink); display:flex; justify-content:space-between; align-items:center; padding:0 20px; }
.primary-button span { font-size:22px; }
.text-button { border:0; background:transparent; color:#cbd3d0; padding:14px; }
.legal { font-size:9px; line-height:1.45; color:#72807a; text-align:center; margin:4px 15px 0; }
.dashboard { min-height:100dvh; padding:env(safe-area-inset-top) 0 calc(92px + env(safe-area-inset-bottom)); }
.topbar { padding:28px 22px 16px; display:flex; justify-content:space-between; align-items:center; }
.topbar h2,.section-heading h3,.tab-panel>h3 { margin:0; font-size:29px; letter-spacing:-.045em; }
.avatar { border:0; background:var(--ink); color:var(--lime); width:45px; height:45px; border-radius:50%; font-size:12px; font-weight:700; }
.status-banner { margin:0 22px 28px; background:#e8e3d8; border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:9px; font-size:11px; color:var(--muted); }
.status-banner strong { margin-left:auto; color:var(--ink); }
.pulse { width:8px; height:8px; background:#44a875; border-radius:50%; box-shadow:0 0 0 0 rgba(68,168,117,.45); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px rgba(68,168,117,0); } }
.tab-panel { display:none; padding:0 22px; }.tab-panel.active { display:block; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.round-button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; font-size:19px; }
.recommendation-list { display:flex; gap:13px; overflow-x:auto; margin:0 -22px; padding:0 22px 12px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.place-card { min-width:82%; height:330px; position:relative; border-radius:22px; overflow:hidden; padding:20px; color:white; display:flex; flex-direction:column; justify-content:flex-end; scroll-snap-align:start; background:linear-gradient(150deg,#34534b,#101d1b); isolation:isolate; }
.place-card:before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 70% 25%,var(--card-color,#b8e0d2),transparent 35%),linear-gradient(25deg,rgba(0,0,0,.65),transparent 60%); opacity:.8; }
.place-card:after { content:""; position:absolute; width:145px; height:145px; right:-25px; top:45px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.03),0 0 0 54px rgba(255,255,255,.02); }
.score { position:absolute; top:18px; left:18px; background:var(--lime); color:var(--ink); border-radius:20px; padding:7px 11px; font-size:11px; font-weight:700; }
.category { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.place-card h4 { font-size:29px; letter-spacing:-.04em; line-height:1.05; margin:8px 0; max-width:85%; }
.place-card p { font-size:12px; line-height:1.45; opacity:.8; margin:0 0 13px; }
.tags { display:flex; gap:6px; flex-wrap:wrap; }.tag { font-size:9px; padding:5px 8px; border-radius:12px; border:1px solid rgba(255,255,255,.25); }
.empty-state { min-width:100%; height:260px; display:grid; place-items:center; align-content:center; gap:16px; color:var(--muted); }.loader { width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite;}@keyframes spin{to{transform:rotate(360deg)}}
.insight-card { margin:18px 0 8px; background:var(--ink); color:white; border-radius:18px; padding:19px; display:flex; gap:14px; align-items:flex-start; }.insight-symbol { color:var(--lime); font-size:23px; }.insight-card h4 { margin:0; font-size:15px; line-height:1.45; font-weight:500; }
.subtle { color:var(--muted); font-size:13px; line-height:1.5; margin:9px 0 24px; }
.affinity-list { margin-bottom:28px; }.affinity-row { margin-bottom:17px; }.affinity-label { display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px; }.affinity-track { height:7px; background:#e2ded4; border-radius:8px; overflow:hidden; }.affinity-fill { height:100%; background:var(--ink); border-radius:8px; transition:width .6s ease; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }.stat { border:1px solid var(--line); border-radius:16px; padding:16px; }.stat strong,.stat small { display:block; }.stat strong { font-size:24px; }.stat small { color:var(--muted); margin-top:4px; font-size:10px; }
.secondary-button { background:var(--ink); color:white; margin:9px 0; }.danger-button { background:transparent; color:var(--danger); border:1px solid rgba(161,62,53,.25); margin:9px 0; }
.settings-card { border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:24px 0 15px; }.switch-row,.select-row { padding:17px; display:flex; justify-content:space-between; align-items:center; gap:14px; }.switch-row { border-bottom:1px solid var(--line); }.switch-row strong,.switch-row small,.select-row strong,.select-row small { display:block; }.switch-row small,.select-row small { color:var(--muted); margin-top:3px; font-size:10px; }.switch-row input { display:none; }.switch-row i { width:44px;height:25px;border-radius:20px;background:#ccc;position:relative;flex:none;transition:.2s;}.switch-row i:after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:white;top:3px;left:3px;transition:.2s}.switch-row input:checked+i{background:var(--ink)}.switch-row input:checked+i:after{transform:translateX(19px);background:var(--lime)}
.premium-card { margin:22px 0 10px; padding:20px; border-radius:20px; background:var(--ink); color:white; position:relative; overflow:hidden; }.premium-card:after { content:""; position:absolute; width:130px; height:130px; right:-45px; top:-40px; border-radius:50%; background:rgba(216,255,102,.12); }.premium-badge { color:var(--lime); font-size:9px; letter-spacing:.17em; font-weight:700; }.premium-card h4 { font-size:22px; margin:8px 0; letter-spacing:-.03em; }.premium-card p { color:#bdc8c3; font-size:12px; line-height:1.45; max-width:85%; }.premium-card small { display:block; color:#83918b; font-size:9px; text-align:center; margin-top:8px; }.premium-button { width:100%; min-height:47px; border:0; border-radius:12px; background:var(--lime); color:var(--ink); font-weight:700; margin-top:8px; position:relative; z-index:1; }.premium-card.active .premium-button { background:rgba(255,255,255,.1); color:var(--lime); }.settings-links { display:flex; justify-content:center; gap:20px; font-size:11px; }.settings-links a { color:var(--muted); }
.select-row select { border:0; background:#e8e3d8; border-radius:9px; padding:8px; color:var(--ink); }.settings-copy { font-size:11px; line-height:1.5; color:var(--muted); padding:8px 4px; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(520px,100%); min-height:78px; padding:9px 35px calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 70px 1fr; align-items:center; background:rgba(245,241,232,.94); backdrop-filter:blur(18px); border-top:1px solid var(--line); z-index:10; }.nav-button { border:0;background:transparent;color:#858d89;font-size:9px;font-weight:600;display:grid;gap:4px;place-items:center}.nav-button span{font-size:22px}.nav-button.active{color:var(--ink)}.nav-button.capture{width:58px;height:58px;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 7px 20px rgba(11,25,24,.15);justify-self:center}.nav-button.capture span{font-size:28px}
.toast { position:fixed; z-index:20; left:50%; bottom:105px; transform:translate(-50%,20px); width:min(88%,420px); background:var(--ink); color:white; border-radius:12px; padding:13px 16px; font-size:12px; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 12px 35px rgba(0,0,0,.2); }.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (min-width:700px) { body { padding:22px 0; }.app-shell { min-height:calc(100dvh - 44px); border-radius:28px; }.onboarding { min-height:calc(100dvh - 44px); }.dashboard { min-height:calc(100dvh - 44px); }.bottom-nav { bottom:22px; border-radius:0 0 28px 28px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }