:root {
  --bg: #F4F1EC;
  --tx: #161412;
  --mu: #6F6A63;
  --ln: #E4DFD7;
  --seg: #E9E4DC;
  --seg-on: #FFFFFF;
  --chip: #EFEBE4;
  --track: #ECE7DF;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
  --glass-bd: #FFFFFF;
  --glass-sh: 0 10px 28px -14px rgba(22, 20, 18, 0.22), inset 0 1px 0 #FFFFFF;
  --dark: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, #2F2B27 0%, #161412 70%, #0F0E0C 100%);
  --dark-bd: rgba(255, 255, 255, 0.10);
  --dark-sh: 0 28px 50px -22px rgba(22, 20, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --on: #F4F1EC;
  --dmu: #A39B90;
  --accent: #D9BE8C;
  --accent-ink: #8C6A3C;
  --champagne: linear-gradient(180deg, #EAD6AE, #D9BE8C);
  --primary-bg: #161412;
  --primary-tx: #F4F1EC;
  --good: #4E7A5A;
  --good-bg: linear-gradient(180deg, rgba(232, 240, 226, 0.95), rgba(214, 228, 206, 0.85));
  --good-tx: #23331F;
  --water: #4F6E9E; --water-bg: #DCE6F2;
  --sweet: #B5495B; --sweet-bg: #F3DEDB;
  --steps: #5F7D68; --steps-bg: #DDE7DC;
  --food: #8C6A3C; --food-bg: rgba(217, 190, 140, 0.28);
  --silk-orb: #FFFFFF; --silk-orb2: #ECE7DF; --silk-orb3: #CFC7BB;
  --silk-a1: #FFFFFF; --silk-a2: #E3DCD1; --silk-a3: #8E8578;
  --silk-b1: #C9C0B3; --silk-b2: #5E574F; --silk-b3: #14120F;
  --silk-hl: #FFFFFF;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0D0B;
    --tx: #F4F1EC;
    --mu: #9A9289;
    --ln: rgba(255, 255, 255, 0.10);
    --seg: rgba(255, 255, 255, 0.07);
    --seg-on: #2A2724;
    --chip: rgba(255, 255, 255, 0.07);
    --track: rgba(255, 255, 255, 0.08);
    --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
    --glass-bd: rgba(255, 255, 255, 0.08);
    --glass-sh: 0 14px 30px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --dark: radial-gradient(120% 90% at 0% 0%, rgba(217, 190, 140, 0.16), rgba(217, 190, 140, 0) 55%), linear-gradient(160deg, #2A2622 0%, #181613 70%, #121110 100%);
    --dark-bd: rgba(217, 190, 140, 0.22);
    --accent-ink: #D9BE8C;
    --primary-bg: linear-gradient(180deg, #EAD6AE, #D9BE8C);
    --primary-tx: #161412;
    --good: #9DC4A5;
    --good-bg: linear-gradient(180deg, rgba(157, 196, 165, 0.24), rgba(157, 196, 165, 0.10));
    --good-tx: #CFE5D3;
    --water: #8FB0DE; --water-bg: rgba(110, 150, 210, 0.18);
    --sweet: #E58A99; --sweet-bg: rgba(229, 138, 153, 0.18);
    --steps: #9DC4A5; --steps-bg: rgba(157, 196, 165, 0.18);
    --food: #D9BE8C; --food-bg: rgba(217, 190, 140, 0.2);
    --silk-orb: #3D3731; --silk-orb2: #1F1C19; --silk-orb3: #0E0D0B;
    --silk-a1: #5A4F42; --silk-a2: #2A2520; --silk-a3: #0E0D0B;
    --silk-b1: #8A7552; --silk-b2: #3A3024; --silk-b3: #0B0A08;
    --silk-hl: #F3E2C0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app { max-width: 480px; min-height: 100dvh; margin: 0 auto; position: relative; overflow-x: hidden; }

.screen {
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column; position: relative;
}
.screen.with-nav { padding-bottom: calc(env(safe-area-inset-bottom) + 120px); }
.screen > * { position: relative; }
.silk { position: absolute !important; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }

.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt28 { margin-top: 28px; }
.mtauto { margin-top: auto; }
.hidden { display: none !important; }

.logo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; letter-spacing: 4.5px; text-transform: uppercase; }
.label { font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--mu); }
.muted { color: var(--mu); }
.small { font-size: 13px; }
.h1 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; }
.h1.xl { font-size: 44px; }
.title { font-size: 28px; font-weight: 400; letter-spacing: -0.4px; }
.score { font-size: 96px; font-weight: 300; line-height: 0.92; letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.score small { font-size: 32px; letter-spacing: -0.5px; color: var(--mu); }
.num { font-variant-numeric: tabular-nums; }
.good { color: var(--good); font-weight: 600; }

.glass { background: var(--glass); border: 1px solid var(--glass-bd); box-shadow: var(--glass-sh); border-radius: 24px; }
.darkc { background: var(--dark); border: 1px solid var(--dark-bd); box-shadow: var(--dark-sh); color: var(--on); border-radius: 26px; }
.darkc .muted, .darkc .label { color: var(--dmu); }
.pad { padding: 16px 18px; }

.btn {
  height: 56px; border-radius: 28px; border: 0; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; font-weight: 600; background: var(--primary-bg); color: var(--primary-tx); width: 100%;
}
.btn.line { height: 52px; background: transparent; color: var(--tx); border: 1px solid var(--ln); font-weight: 500; font-size: 15px; }
.btn.champ { background: var(--champagne); color: #161412; }
.btn.sm { height: 40px; width: auto; padding: 0 16px; font-size: 13px; border-radius: 20px; }
.btn:disabled { opacity: 0.5; }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--ln); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 14px; font-weight: 600; }
.pill.good { background: var(--good-bg); color: var(--good-tx); border: 1px solid var(--glass-bd); }
.pill.champ { background: rgba(217, 190, 140, 0.24); color: var(--tx); font-weight: 500; font-size: 13px; }

.seg { display: grid; gap: 4px; padding: 4px; border-radius: 22px; background: var(--seg); }
.seg button { height: 38px; border-radius: 19px; border: 0; background: transparent; color: var(--mu); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--tx); font-weight: 600; box-shadow: 0 1px 3px rgba(22, 20, 18, 0.14); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field input, .field textarea {
  height: 52px; border-radius: 18px; border: 1px solid var(--glass-bd); background: var(--glass); box-shadow: var(--glass-sh);
  padding: 0 16px; font-size: 16px; outline: none;
}
.field textarea { height: 96px; padding: 12px 16px; resize: none; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }

.progress { display: flex; gap: 6px; flex: 1; }
.progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--ln); }
.progress span.on { background: var(--tx); }

.option { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 18px; border-radius: 24px; text-align: left; border: 1px solid var(--glass-bd); background: var(--glass); box-shadow: var(--glass-sh); width: 100%; }
.option[aria-pressed="true"] { background: var(--dark); border-color: var(--dark-bd); color: var(--on); box-shadow: var(--dark-sh); }
.option[aria-pressed="true"] .muted { color: var(--dmu); }
.option .ic { width: 44px; height: 44px; border-radius: 22px; background: var(--chip); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.option[aria-pressed="true"] .ic { background: rgba(217, 190, 140, 0.16); color: var(--accent); }

.avatar { border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #FFFFFF; object-fit: cover; }

.habit { padding: 10px 12px; border-radius: 22px; display: flex; flex-direction: column; gap: 7px; text-align: left; border: 1px solid var(--glass-bd); background: var(--glass); box-shadow: var(--glass-sh); width: 100%; }
.habit .chip { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bar { height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 2px; }

.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; height: calc(96px + env(safe-area-inset-bottom)); z-index: 20; }
.nav svg.shape { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 -10px 24px rgba(22, 20, 18, 0.18)); }
.nav .items { position: absolute; left: 8px; right: 8px; top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav .items a { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--dmu); }
.nav .items a.on { color: var(--on); }
.mic {
  position: absolute; left: 50%; top: -30px; margin-left: -36px; width: 72px; height: 72px; border-radius: 36px; padding: 2px; border: 0;
  background: conic-gradient(from 200deg, #F3E6CC, #D9BE8C, #9DC4A5, #F3E6CC, #D9BE8C);
  box-shadow: 0 0 24px 2px rgba(217, 190, 140, 0.45), 0 14px 28px -10px rgba(22, 20, 18, 0.6);
}
.mic span { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #3B3631, #0F0E0C 70%); color: #F4F1EC; display: flex; align-items: center; justify-content: center; }

.orb { position: relative; width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(217, 190, 140, 0.28), rgba(217, 190, 140, 0) 70%); }
.orb .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(217, 190, 140, 0.45); }
.orb button { position: relative; width: 84px; height: 84px; border-radius: 42px; border: 1.5px solid var(--accent); background: radial-gradient(circle at 50% 30%, #3B3631, #0F0E0C 70%); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px 4px rgba(217, 190, 140, 0.4); }
.orb.live .ring { animation: pulse 1.6s ease-out infinite; }
.orb.live .ring:nth-child(2) { animation-delay: 0.5s; }
@keyframes pulse { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .orb.live .ring { animation: none; } }

.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.ingredient { display: flex; justify-content: space-between; align-items: center; min-height: 40px; width: 100%; border: 0; background: transparent; padding: 0 4px; border-radius: 12px; text-align: left; }
.ingredient[aria-pressed="true"] { background: rgba(217, 190, 140, 0.18); }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; }
.podium .col1 { display: flex; flex-direction: column; align-items: center; }
.podium .block { width: 100%; border-radius: 22px 22px 14px 14px; display: flex; flex-direction: column; align-items: center; padding-top: 34px; gap: 2px; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 12px); z-index: 50; padding: 10px 16px; border-radius: 18px; background: var(--dark); color: var(--on); border: 1px solid var(--dark-bd); font-size: 14px; box-shadow: var(--dark-sh); max-width: 90%; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ln); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
[data-underline] a, u { text-decoration: underline; }