/* ═══════════════════════════════════════════════════
   PICKY EATER — style.css
═══════════════════════════════════════════════════ */

:root {
  --bg:          #0d0d14;
  --surface:     #15151f;
  --card:        #1c1c2a;
  --card-hover:  #22223a;
  --border:      rgba(255,255,255,0.08);
  --text:        #eeeef5;
  --muted:       rgba(238,238,245,0.45);
  --accent:      #7c6fff;
  --accent2:     #b06fff;
  --accent3:     #4fc8ff;
  --btn-text:    #fff;
  --orb1:        rgba(124,111,255,0.25);
  --orb2:        rgba(176,111,255,0.18);
  --orb3:        rgba(79,200,255,0.12);
  --glow:        0 0 40px rgba(124,111,255,0.3);
  --badge-bg:    rgba(124,111,255,0.15);
  --badge-text:  #c4baff;
  --radius:      18px;
  --radius-sm:   10px;
  --shadow:      0 12px 48px rgba(0,0,0,0.55);
  --max-w:       440px;
  --font-d:      'Syne', sans-serif;
  --font-b:      'DM Sans', sans-serif;
}

body.theme-morning {
  --bg: #fdf6e3; --surface: #fff8ed; --card: #fff3d8; --card-hover: #ffe9b8;
  --border: rgba(180,120,40,0.15); --text: #2a1f08; --muted: rgba(42,31,8,0.5);
  --accent: #e8860a; --accent2: #f5a623; --accent3: #ff6b35; --btn-text: #fff;
  --orb1: rgba(248,197,80,0.35); --orb2: rgba(232,134,10,0.25); --orb3: rgba(255,107,53,0.2);
  --glow: 0 0 40px rgba(248,197,80,0.4); --badge-bg: rgba(248,197,80,0.2); --badge-text: #7a4800;
}
body.theme-afternoon {
  --bg: #f0f4ff; --surface: #e8eeff; --card: #ffffff; --card-hover: #f0f4ff;
  --border: rgba(80,100,200,0.12); --text: #1a1f3c; --muted: rgba(26,31,60,0.5);
  --accent: #3d5afe; --accent2: #00b4d8; --accent3: #48cae4; --btn-text: #fff;
  --orb1: rgba(61,90,254,0.15); --orb2: rgba(0,180,216,0.15); --orb3: rgba(72,202,228,0.1);
  --glow: 0 0 40px rgba(61,90,254,0.2); --badge-bg: rgba(61,90,254,0.1); --badge-text: #1a3acc;
}
body.theme-evening {
  --bg: #1a0f1e; --surface: #241428; --card: #2e1a35; --card-hover: #3a2244;
  --border: rgba(255,150,100,0.1); --text: #f5e8f0; --muted: rgba(245,232,240,0.45);
  --accent: #ff6b6b; --accent2: #ffa07a; --accent3: #ffcc70; --btn-text: #fff;
  --orb1: rgba(255,107,107,0.3); --orb2: rgba(255,160,122,0.2); --orb3: rgba(255,204,112,0.18);
  --glow: 0 0 40px rgba(255,107,107,0.35); --badge-bg: rgba(255,107,107,0.15); --badge-text: #ffb8b8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  -webkit-font-smoothing: antialiased;
  transition: background 0.8s ease;
  overflow: hidden;
}

/* ── AMBIENT BG ── */
.ambient-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.ambient-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
}
.orb-1 { width:60vw; height:60vw; top:-15%; left:-10%; background:var(--orb1); animation:drift1 18s ease-in-out infinite alternate; }
.orb-2 { width:50vw; height:50vw; bottom:-10%; right:-10%; background:var(--orb2); animation:drift2 22s ease-in-out infinite alternate; }
.orb-3 { width:40vw; height:40vw; top:40%; left:40%; background:var(--orb3); animation:drift3 14s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(8%,12%); } }
@keyframes drift2 { to { transform: translate(-10%,-8%); } }
@keyframes drift3 { to { transform: translate(-6%,10%); } }

/* ── NAV ── */
.top-nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  pointer-events: none; opacity: 0; transition: opacity 0.4s;
}
.top-nav.visible { opacity:1; pointer-events:all; }
.nav-logo { font-family:var(--font-d); font-size:15px; font-weight:700; color:var(--text); }
.nav-actions { display:flex; gap:8px; }
.nav-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--border);
  font-size:16px; cursor:pointer; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.nav-btn:hover { background:var(--card-hover); transform:scale(1.05); }

/* ══════════════════════════════════════
   SCREENS
   Default: hidden (display:none)
   Active:  display:flex, fades in
══════════════════════════════════════ */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
}
.screen.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* screens with nav need top padding */
#locationScreen, #questionScreen, #resultScreen, #historyScreen, #profileScreen {
  justify-content: flex-start;
  padding-top: 68px;
  padding-bottom: 40px;
}

/* ── SHARED ── */
.hidden { display: none !important; }

.btn-primary {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--muted);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-b);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.btn-back {
  background: none; border: none; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 8px 0; margin-bottom: 8px;
  align-self: flex-start; font-family: var(--font-b); transition: color 0.2s;
}
.btn-back:hover { color: var(--text); }

.btn-danger {
  width:100%; padding:16px;
  background:rgba(255,80,80,0.1); border:1.5px solid rgba(255,80,80,0.3);
  color:#ff6060; border-radius:var(--radius-sm);
  font-family:var(--font-b); font-size:14px; cursor:pointer; transition:all 0.2s;
}
.btn-danger:hover { background:rgba(255,80,80,0.2); }

.progress-wrap { width:100%; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.progress-bar { flex:1; height:4px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-fill {
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:99px; width:0%;
  transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 8px var(--accent);
}
.progress-label { font-size:11px; color:var(--muted); font-family:var(--font-d); font-weight:600; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }

.q-emoji {
  font-size:60px; line-height:1; margin-bottom:16px;
  filter:drop-shadow(0 0 20px var(--accent));
  animation:floatEmoji 3s ease-in-out infinite;
}
@keyframes floatEmoji { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.q-emoji.pop { animation:emojiPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes emojiPop { from{transform:scale(0.4) rotate(-15deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }

.q-title {
  font-family:var(--font-d);
  font-size:clamp(22px, 6vw, 28px);
  font-weight:700; text-align:center;
  line-height:1.25; letter-spacing:-0.5px;
  margin-bottom:28px;
}

.section-label { width:100%; font-family:var(--font-d); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:10px; }

.page-inner { width:100%; max-width:var(--max-w); display:flex; flex-direction:column; gap:14px; padding-bottom:40px; }
.page-title { font-family:var(--font-d); font-size:28px; font-weight:800; letter-spacing:-1px; margin-bottom:4px; }

/* ── SPLASH ── */
.splash-inner {
  width:100%; max-width:var(--max-w);
  display:flex; flex-direction:column;
  align-items:center; gap:16px; text-align:center;
}

.time-badge {
  background:var(--badge-bg); color:var(--badge-text);
  padding:6px 16px; border-radius:99px; font-size:13px;
  font-weight:600; font-family:var(--font-d);
  border:1px solid var(--border); transition:all 0.5s;
}

.splash-emoji {
  font-size:72px;
  animation:floatEmoji 3s ease-in-out infinite;
  filter:drop-shadow(0 0 28px var(--accent));
  margin:8px 0;
}

.splash-title {
  font-family:var(--font-d);
  font-size:clamp(56px,16vw,80px);
  font-weight:800; line-height:0.9; letter-spacing:-3px;
}
.splash-title em {
  font-style:normal;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.splash-sub { font-size:16px; color:var(--muted); line-height:1.5; }

.auth-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.auth-sep { color:var(--border); }
.auth-row .btn-ghost { padding:8px 16px; font-size:13px; }

/* ── AUTH ── */
.auth-inner { width:100%; max-width:var(--max-w); display:flex; flex-direction:column; gap:18px; }
.auth-toggle { display:flex; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:4px; gap:4px; }
.auth-tab { flex:1; padding:12px; border:none; background:none; border-radius:calc(var(--radius) - 4px); font-family:var(--font-d); font-size:15px; font-weight:700; color:var(--muted); cursor:pointer; transition:all 0.2s; }
.auth-tab.active { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.field-group { display:flex; flex-direction:column; gap:6px; }
.field-group label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); font-family:var(--font-d); }
.field-group input {
  width:100%; padding:15px 18px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--font-b); font-size:16px; outline:none;
  transition:border-color 0.2s, background 0.2s; -webkit-appearance:none;
}
.field-group input:focus { border-color:var(--accent); background:var(--card-hover); }
.field-group input::placeholder { color:var(--muted); }
.auth-error { color:#ff6060; font-size:13px; min-height:18px; }
.auth-note { font-size:12px; color:var(--muted); text-align:center; line-height:1.5; }

/* ── LOCATION ── */
.loc-inner { width:100%; max-width:var(--max-w); display:flex; flex-direction:column; align-items:center; gap:16px; padding-bottom:40px; }
.loc-method { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.loc-method-btn {
  padding:16px 12px; background:var(--card);
  border:2px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:var(--font-b); font-size:14px; font-weight:500;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; transition:all 0.2s;
}
.loc-method-btn.active { border-color:var(--accent); background:var(--card-hover); box-shadow:0 0 0 3px rgba(124,111,255,0.2); }
.loc-method-btn:hover:not(.active) { border-color:var(--accent); }
.lmb-icon { font-size:28px; }
.lmb-text { font-size:13px; }

.zip-input { width:100%; display:flex; flex-direction:column; gap:8px; }
.zip-input input {
  width:100%; padding:15px 18px; background:var(--card);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-b); font-size:18px;
  text-align:center; letter-spacing:4px; outline:none; -webkit-appearance:none;
  transition:border-color 0.2s;
}
.zip-input input:focus { border-color:var(--accent); }
.zip-status { font-size:13px; color:var(--muted); text-align:center; min-height:18px; }

.distance-section { width:100%; }
.distance-label { font-size:14px; color:var(--muted); text-align:center; margin-bottom:12px; }
.distance-label strong { color:var(--accent); font-size:16px; }
.distance-slider {
  width:100%; -webkit-appearance:none; appearance:none;
  height:6px; background:var(--border); border-radius:99px; outline:none; cursor:pointer;
}
.distance-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px var(--accent); cursor:pointer;
}
.slider-ticks { display:flex; justify-content:space-between; margin-top:8px; }
.slider-ticks span { font-size:11px; color:var(--muted); font-family:var(--font-d); }

.map-preview { width:100%; height:180px; border-radius:var(--radius); overflow:hidden; border:1.5px solid var(--border); position:relative; background:var(--card); }
.map-fake { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.map-grid { position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:30px 30px; opacity:0.6; }
.map-radius-ring { position:absolute; border-radius:50%; border:2px solid var(--accent); background:rgba(124,111,255,0.08); transition:all 0.4s ease; width:100px; height:100px; }
.map-pin { position:absolute; font-size:28px; z-index:2; animation:pinBounce 2s ease-in-out infinite; }
@keyframes pinBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.map-label { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); padding:4px 12px; border-radius:99px; font-size:12px; color:var(--muted); white-space:nowrap; font-family:var(--font-d); font-weight:600; }

/* ── QUESTIONS ── */
.q-header { width:100%; max-width:var(--max-w); display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-shrink:0; }
.q-header .progress-wrap { margin-bottom:0; flex:1; }
.btn-restart-sm { background:var(--card); border:1.5px solid var(--border); color:var(--muted); width:36px; height:36px; border-radius:50%; font-size:14px; cursor:pointer; flex-shrink:0; transition:all 0.2s; }
.btn-restart-sm:hover { color:var(--text); }

.q-body { width:100%; max-width:var(--max-w); flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 0 40px; }
.q-body.slide-in  { animation:slideIn 0.35s cubic-bezier(0.4,0,0.2,1); }
.q-body.slide-out { animation:slideOut 0.25s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes slideIn  { from{transform:translateX(40px);opacity:0} to{transform:none;opacity:1} }
@keyframes slideOut { from{transform:none;opacity:1} to{transform:translateX(-40px);opacity:0} }

.q-options { width:100%; display:flex; flex-direction:column; gap:11px; }
.q-option {
  width:100%; padding:18px 20px;
  background:var(--card); border:2px solid var(--border);
  border-radius:var(--radius); color:var(--text);
  font-family:var(--font-b); font-size:16px; font-weight:500;
  cursor:pointer; display:flex; align-items:center; gap:14px;
  transition:all 0.18s ease; position:relative; overflow:hidden; text-align:left;
}
.q-option .opt-icon { font-size:24px; flex-shrink:0; position:relative; z-index:1; }
.q-option .opt-label { position:relative; z-index:1; }
.q-option::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--accent),var(--accent2)); opacity:0; transition:opacity 0.2s; }
.q-option:hover { border-color:var(--accent); transform:translateX(4px); }
.q-option.selected { border-color:var(--accent); color:#fff; }
.q-option.selected::before { opacity:1; }

/* ── THINKING ── */
.thinking-inner { display:flex; flex-direction:column; align-items:center; gap:24px; }
.think-ring { width:100px; height:100px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; animation:spinRing 3s linear infinite; }
@keyframes spinRing { to{transform:rotate(360deg)} }
.think-orb { width:80px; height:80px; border-radius:50%; background:conic-gradient(var(--accent),var(--accent2),var(--accent3),var(--accent)); animation:counterSpin 2s linear infinite; box-shadow:var(--glow); }
@keyframes counterSpin { to{transform:rotate(-360deg)} }
.thinking-label { font-family:var(--font-d); font-size:18px; font-weight:700; color:var(--text); text-align:center; transition:opacity 0.3s; }
.think-dots { display:flex; gap:8px; }
.think-dots span { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:dotBounce 1.2s ease-in-out infinite; }
.think-dots span:nth-child(2) { animation-delay:0.2s; background:var(--accent2); }
.think-dots span:nth-child(3) { animation-delay:0.4s; background:var(--accent3); }
@keyframes dotBounce { 0%,80%,100%{transform:scale(0.6);opacity:0.4} 40%{transform:scale(1.2);opacity:1} }

/* ── RESULT ── */
.result-inner { width:100%; max-width:var(--max-w); display:flex; flex-direction:column; align-items:center; gap:16px; padding-bottom:60px; }
.result-eyebrow { font-family:var(--font-d); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; color:var(--muted); animation:fadeUp 0.5s 0.1s ease both; }
.result-hero { width:100%; background:var(--card); border:1.5px solid var(--border); border-radius:24px; padding:32px 24px 28px; text-align:center; position:relative; overflow:hidden; animation:revealHero 0.6s 0.3s cubic-bezier(0.34,1.56,0.64,1) both; box-shadow:var(--glow); }
.result-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--orb1),transparent 70%); pointer-events:none; }
@keyframes revealHero { from{opacity:0;transform:scale(0.9) translateY(20px)} to{opacity:1;transform:none} }
.result-emoji { font-size:72px; line-height:1; filter:drop-shadow(0 0 28px var(--accent)); animation:emojiBounce 0.8s 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes emojiBounce { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:none;opacity:1} }
.result-food { font-family:var(--font-d); font-size:clamp(34px,9vw,48px); font-weight:800; letter-spacing:-1.5px; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-top:12px; }
.result-tag { margin-top:8px; font-size:14px; color:var(--muted); font-style:italic; }
.fallback-notice { width:100%; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent2); border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; color:var(--muted); line-height:1.5; animation:fadeUp 0.4s 0.5s ease both; }
.restaurants { width:100%; display:flex; flex-direction:column; gap:12px; }
.rest-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; align-items:stretch; transition:transform 0.2s, border-color 0.2s; animation:fadeUp 0.4s ease both; }
.rest-card:nth-child(1){animation-delay:0.7s} .rest-card:nth-child(2){animation-delay:0.85s} .rest-card:nth-child(3){animation-delay:1s}
.rest-card:hover { transform:translateY(-3px); border-color:rgba(124,111,255,0.4); }
.rest-img { width:86px; flex-shrink:0; background:var(--surface); font-size:36px; display:flex; align-items:center; justify-content:center; }
.rest-info { flex:1; padding:13px 14px; display:flex; flex-direction:column; justify-content:space-between; gap:4px; }
.rest-name { font-family:var(--font-d); font-size:15px; font-weight:700; line-height:1.2; }
.rest-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rest-rating { font-size:13px; color:var(--accent2); font-weight:600; }
.rest-distance, .rest-price, .rest-cuisine { font-size:12px; color:var(--muted); }
.rest-sep { color:var(--border); }
.rest-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.rest-dir { display:inline-flex; align-items:center; gap:4px; padding:7px 12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-radius:8px; font-size:12px; font-weight:700; font-family:var(--font-d); cursor:pointer; border:none; text-decoration:none; transition:opacity 0.15s; }
.rest-dir:hover { opacity:0.88; }
.rest-badge { font-size:11px; padding:3px 8px; border-radius:99px; font-weight:600; font-family:var(--font-d); }
.rest-badge.in-range  { background:rgba(80,220,120,0.15); color:#50dc78; }
.rest-badge.out-range { background:rgba(255,120,80,0.15); color:#ff7850; }
.result-actions { width:100%; display:flex; flex-direction:column; gap:10px; animation:fadeUp 0.4s 1.1s ease both; }
.result-actions .btn-ghost { text-align:center; }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ── HISTORY ── */
.history-list { display:flex; flex-direction:column; gap:12px; }
.history-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; align-items:flex-start; gap:14px; transition:all 0.2s; }
.history-card:hover { border-color:rgba(124,111,255,0.4); transform:translateX(4px); }
.history-emoji { font-size:36px; flex-shrink:0; }
.history-info { flex:1; }
.history-food { font-family:var(--font-d); font-size:17px; font-weight:700; }
.history-meta { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.history-rating-btns { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.rate-btn { padding:6px 14px; background:var(--surface); border:1.5px solid var(--border); border-radius:99px; font-size:12px; cursor:pointer; color:var(--text); font-family:var(--font-b); transition:all 0.2s; }
.rate-btn:hover { border-color:var(--accent); }
.rate-btn.rated-bad     { background:rgba(255,80,80,0.15);  border-color:rgba(255,80,80,0.4);  color:#ff8080; }
.rate-btn.rated-good    { background:rgba(80,200,120,0.15); border-color:rgba(80,200,120,0.4); color:#50c878; }
.rate-btn.rated-amazing { background:rgba(255,200,60,0.15); border-color:rgba(255,200,60,0.4); color:#ffc83c; }
.empty-state { text-align:center; color:var(--muted); font-size:15px; padding:40px 20px; }

/* ── PROFILE ── */
.profile-header { display:flex; align-items:center; gap:16px; background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:20px; }
.profile-avatar { width:60px; height:60px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; font-family:var(--font-d); font-weight:700; color:#fff; }
.profile-name { font-family:var(--font-d); font-size:20px; font-weight:700; }
.profile-email { font-size:13px; color:var(--muted); margin-top:2px; }
.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:16px; text-align:center; }
.stat-num { font-family:var(--font-d); font-size:28px; font-weight:800; color:var(--accent); }
.stat-label { font-size:12px; color:var(--muted); margin-top:2px; font-weight:600; }
.profile-prefs { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px; }
.pref-title { font-family:var(--font-d); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:4px; }
.pref-row { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
.pref-food { font-weight:600; }
.pref-score { font-size:12px; color:var(--muted); }

/* ── RATING TOAST ── */
.rating-toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(120px);
  z-index:200; background:var(--card); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:18px 20px;
  width:calc(100% - 40px); max-width:var(--max-w);
  box-shadow:var(--shadow); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.rating-toast.visible { transform:translateX(-50%) translateY(0); }
.rating-q { font-family:var(--font-d); font-size:15px; font-weight:700; margin-bottom:12px; text-align:center; }
.rating-btns { display:flex; gap:10px; }
.rating-btn { flex:1; padding:13px 8px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-b); transition:all 0.2s; }
.rating-btn:hover { border-color:var(--accent); background:var(--card-hover); }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── AI LOADING STATE (between questions) ── */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
}
.ai-thinking-dots {
  display: flex;
  gap: 10px;
}
.ai-thinking-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  animation: aiDot 1.2s ease-in-out infinite;
}
.ai-thinking-dots span:nth-child(2) { animation-delay: 0.2s; background: var(--accent2); }
.ai-thinking-dots span:nth-child(3) { animation-delay: 0.4s; background: var(--accent3); }
@keyframes aiDot {
  0%,80%,100% { transform: scale(0.5); opacity: 0.3; }
  40%          { transform: scale(1.3); opacity: 1; }
}
.ai-thinking-text {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ── RESULT DISTANCE SLIDER ── */
.result-distance-wrap {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 10px;
}
.result-distance-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.result-distance-val {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* ── LOAD MORE BUTTON ── */
.btn-load-more {
  width: 100%;
  padding: 14px;
  background: var(--card);
  border: 1.5px dashed var(--border);
  color: var(--muted);
  border-radius: var(--radius);
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}
.btn-load-more:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--card-hover);
}
.btn-load-more:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}