:root{
    --bg: #150F0A;
    --panel: #241A11;
    --panel-2: #2E2115;
    --ember: #FF4B26;
    --gold: #FFB238;
    --ember-dim: #C43A1C;
    --gold-dim: #E0A039;
    --steel: #A8998A;
    --text: #FCF2E6;
    --text-dim: #B9A996;
    --line: #3D2C1D;
    --ink: #170F09;
    --shadow-card: 0 8px 20px -10px rgba(0,0,0,0.6);
    --shadow-lift: 0 14px 30px -10px rgba(0,0,0,0.6);
    --shadow-cta: 0 10px 26px -10px rgba(255,90,40,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
    --shadow-cta-hover: 0 16px 34px -10px rgba(255,90,40,0.65), inset 0 1px 0 rgba(255,255,255,0.28);
    --blue: #4F9DFF;
    --blue-dim: #2E6FCC;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; padding:0; height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:'Manrope', sans-serif;
  }
  #app{
    display:flex; flex-direction:column;
    height:100vh; max-width:640px; margin:0 auto;
    border-left:1px solid var(--line); border-right:1px solid var(--line);
    position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 700px 500px at 15% 0%, rgba(255,178,56,0.07) 0%, rgba(255,178,56,0) 55%),
      radial-gradient(ellipse 900px 700px at 100% 100%, rgba(255,75,38,0.10) 0%, rgba(255,75,38,0) 55%),
      var(--bg);
  }
  .grain{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    opacity:0.05; mix-blend-mode:overlay;
  }
  .glow{
    position:absolute; top:-120px; left:38%; transform:translateX(-50%);
    width:480px; height:280px; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,75,38,0.35) 0%, rgba(255,75,38,0) 70%);
    filter:blur(10px);
    animation:glowDrift 7s ease-in-out infinite;
    transform-origin:center;
  }
  .glow-gold{
    position:absolute; top:-100px; left:68%; transform:translateX(-50%);
    width:360px; height:240px; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,178,56,0.22) 0%, rgba(255,178,56,0) 70%);
    filter:blur(14px);
    animation:glowDrift 9s ease-in-out infinite reverse;
    transform-origin:center;
  }
  @keyframes glowDrift{
    0%,100%{ transform:translateX(-50%) scale(1); opacity:0.9; }
    50%{ transform:translateX(-50%) scale(1.18); opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .glow, .glow-gold{ animation:none; }
  }
  header{
    padding:22px 24px 18px;
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:12px;
    position:relative; z-index:1;
  }
  .emblem{ width:36px; height:36px; flex-shrink:0; animation:emblemPulse 3.5s ease-in-out infinite; }
  @keyframes emblemPulse{
    0%,100%{ filter:drop-shadow(0 0 0 rgba(255,130,60,0)); }
    50%{ filter:drop-shadow(0 0 7px rgba(255,140,60,0.6)); }
  }
  @media (prefers-reduced-motion: reduce){
    .emblem{ animation:none; }
  }
  .wordmark{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:27px;
    letter-spacing:0.07em;
    line-height:1;
    text-transform:uppercase;
    background:linear-gradient(120deg, var(--text) 0%, var(--text) 40%, var(--gold) 75%, var(--ember) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .tagline{ font-size:12px; color:var(--text-dim); margin-top:4px; letter-spacing:0.02em; }
  .ai-badge{
    display:inline-block; vertical-align:middle; margin-left:2px; margin-top:-4px;
    font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:10px;
    letter-spacing:0.06em; padding:2px 6px; border-radius:99px;
    border:1px solid var(--gold-dim); color:var(--gold);
    background:none; -webkit-background-clip:initial; background-clip:initial;
  }

  .streak-badge{
    margin-left:auto; display:flex; align-items:center; gap:6px;
    padding:6px 12px; background:var(--panel); color:var(--gold); flex-shrink:0;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow:inset 0 0 0 1px var(--gold-dim), 0 0 14px -4px rgba(255,178,56,0.4);
  }
  .streak-badge svg{ width:14px; height:14px; }
  .streak-badge span{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

  #setup{
    padding:28px 24px; overflow:hidden; flex:1; display:none;
    position:relative;
  }

  .q-progress{ height:3px; background:var(--line); border-radius:2px; margin-bottom:32px; overflow:hidden; }
  .q-progress-fill{
    height:100%; width:16.6%; border-radius:2px;
    background:linear-gradient(90deg, var(--gold), var(--ember));
    transition:width 0.4s ease;
  }

  .q-step{
    display:none;
    animation:qIn 0.35s ease;
  }
  .q-step.active{ display:block; }
  @keyframes qIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .q-step.leaving{
    animation:qOut 0.25s ease forwards;
  }
  @keyframes qOut{
    from{ opacity:1; transform:translateY(0); }
    to{ opacity:0; transform:translateY(-14px); }
  }

  .q-eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:12px;
    color:var(--gold); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px;
    display:flex; align-items:center; gap:7px;
  }
  .q-eyebrow::before{
    content:''; width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
    flex-shrink:0;
  }
  .q-step h2{
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:29px; margin:0 0 20px;
    letter-spacing:-0.005em; text-transform:uppercase; line-height:1.05;
  }
  .q-step .sub{ color:var(--text-dim); font-size:13.5px; margin:-12px 0 20px; line-height:1.5; }

  .q-options{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
  .q-opt{
    text-align:left; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:15px 16px; border-radius:5px; cursor:pointer;
    font-family:'Manrope',sans-serif; font-size:15px; font-weight:500;
    box-shadow:var(--shadow-card);
    transition:border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .q-opt:hover{ border-color:var(--gold-dim); transform:translateX(2px) translateY(-1px); box-shadow:0 10px 22px -10px rgba(255,178,56,0.3); }
  .q-opt.selected{
    border-color:var(--gold);
    background:linear-gradient(90deg, rgba(255,178,56,0.12), rgba(255,75,38,0.08));
    color:var(--text);
    box-shadow:0 0 0 1px var(--gold), 0 8px 20px -10px rgba(255,178,56,0.35);
  }

  .cta-blade, .q-continue, #qAccountContinue, #goalCustomContinue, #beginBtn, #authSubmit, .side-new, #saveSettings, .pdf-btn{
    position:relative; overflow:hidden; isolation:isolate;
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    background:linear-gradient(120deg, var(--gold) 0%, var(--ember) 58%, var(--ember-dim) 100%);
    box-shadow:var(--shadow-cta);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cta-blade::before, .q-continue::before, #qAccountContinue::before, #goalCustomContinue::before, #beginBtn::before, #authSubmit::before, .side-new::before, #saveSettings::before, .pdf-btn::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    background-size:220% 100%; background-position:220% 0;
    transition:background-position 0.55s ease; pointer-events:none;
  }
  .cta-blade:hover, .q-continue:hover, #qAccountContinue:hover, #goalCustomContinue:hover, #beginBtn:hover, #authSubmit:hover, .side-new:hover, #saveSettings:hover, .pdf-btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-cta-hover);
  }
  .cta-blade:hover::before, .q-continue:hover::before, #qAccountContinue:hover::before, #goalCustomContinue:hover::before, #beginBtn:hover::before, #authSubmit:hover::before, .side-new:hover::before, #saveSettings:hover::before, .pdf-btn:hover::before{
    background-position:-40% 0;
  }
  .cta-blade:active, .q-continue:active, #qAccountContinue:active, #goalCustomContinue:active, #beginBtn:active, #authSubmit:active, .side-new:active, #saveSettings:active, .pdf-btn:active{
    transform:translateY(0); filter:brightness(0.96);
  }
  @media (prefers-reduced-motion: reduce){
    .cta-blade, .q-continue, #qAccountContinue, #goalCustomContinue, #beginBtn, #authSubmit, .side-new, #saveSettings, .pdf-btn{ transition:none; }
    .cta-blade::before, .q-continue::before, #qAccountContinue::before, #goalCustomContinue::before, #beginBtn::before, #authSubmit::before, .side-new::before, #saveSettings::before, .pdf-btn::before{ transition:none; }
  }

  .q-continue, #qAccountContinue, #goalCustomContinue{
    width:100%; padding:14px; margin-top:8px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }

  .q-back{
    position:absolute; top:28px; right:24px; font-size:12px; color:var(--text-dim);
    cursor:pointer; text-decoration:underline; text-decoration-color:var(--line);
    display:none;
  }
  .q-back.show{ display:block; }
  .q-back:hover{ color:var(--text); }

  #injuries{
    width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px 12px; border-radius:3px;
    font-family:inherit; font-size:14px; min-height:70px; resize:vertical;
    margin-bottom:4px;
  }
  #injuries::placeholder{ color:var(--text-dim); }
  #injuries:focus{ outline:none; border-color:var(--gold-dim); }
  .unit-toggle{ display:flex; gap:6px; margin-bottom:18px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:4px; box-shadow:inset 0 2px 5px rgba(0,0,0,0.35); }
  .unit-opt{
    flex:1; background:transparent; border:none; color:var(--text-dim);
    padding:8px; font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700;
    letter-spacing:0.02em; border-radius:3px; cursor:pointer;
  }
  .unit-opt.selected{ background:var(--gold-dim); color:var(--text); }
  #setup h2{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800; font-size:29px; margin:0 0 6px;
    letter-spacing:-0.005em; text-transform:uppercase; line-height:1.05;
  }
  #setup p.sub{ color:var(--text-dim); font-size:13.5px; margin:0 0 24px; line-height:1.5; }
  .field{ margin-bottom:18px; }
  .field label{
    display:block; font-size:12px; color:var(--text-dim);
    margin-bottom:6px; letter-spacing:0.03em; text-transform:uppercase; font-weight:600;
  }
  .field input, .field select, .field textarea{
    width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px 12px; border-radius:3px;
    font-family:inherit; font-size:14px;
  }
  .field textarea{ min-height:60px; resize:vertical; }
  .hint{ font-size:11.5px; color:var(--text-dim); margin-top:6px; line-height:1.5; }
  .tone-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tone-opt{
    border:1px solid var(--line); background:var(--panel);
    padding:10px; border-radius:3px; font-size:13px; cursor:pointer;
    text-align:left; color:var(--text-dim); font-weight:500;
    transition:border-color 0.15s, background 0.15s;
  }
  .tone-opt:hover{ border-color:var(--ember-dim); }
  .tone-opt.selected{ border-color:var(--ember); color:var(--text); background:var(--panel-2); }

  #beginBtn{
    width:100%; padding:14px; margin-top:8px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }

  #authScreen{ overflow-y:auto; flex:1; display:flex; flex-direction:column; }

  .hero{
    position:relative; width:100%; height:300px; flex-shrink:0;
    background:linear-gradient(150deg, #3A1A0E 0%, #1A0F0A 75%);
    overflow:hidden; perspective:800px;
  }
  .hero img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:52% 34%;
    filter:grayscale(25%) contrast(1.1); opacity:0.92;
    transform:scale(1.06); transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
    will-change:transform;
  }
  @media (prefers-reduced-motion: reduce){
    .hero img{ transition:none; }
  }
  .hero-tint{
    position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(255,75,38,0.35) 0%, rgba(26,15,10,0.75) 78%);
    mix-blend-mode:multiply;
  }
  .hero-fade{
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(20,15,10,0) 35%, var(--bg) 100%);
  }
  .hero-text{ position:absolute; left:24px; right:24px; bottom:20px; z-index:2; }
  .hero-eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
  }
  .hero-eyebrow::before{
    content:''; width:7px; height:7px; background:var(--gold); transform:rotate(45deg);
    box-shadow:0 0 8px rgba(255,178,56,0.7); flex-shrink:0;
  }
  .hero-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:44px; line-height:0.95;
    text-transform:uppercase; color:var(--text); letter-spacing:-0.01em; margin:0;
  }
  .hero-accent{
    font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400;
    text-transform:none; letter-spacing:0; color:var(--gold);
    text-shadow:0 0 18px rgba(255,178,56,0.4);
  }
  .auth-body{ padding:20px 24px 28px; }
  .lang-toggle{ display:flex; gap:16px; justify-content:flex-end; margin-bottom:18px; }
  .lang-opt{
    flex:none; background:transparent; border:none; color:var(--text-dim);
    padding:2px 0; font-family:'Manrope',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:0.02em; cursor:pointer;
    text-decoration:underline; text-decoration-color:transparent; transition:color 0.15s, text-decoration-color 0.15s;
  }
  .lang-opt:hover{ color:var(--text); }
  .lang-opt.selected{ color:var(--text); text-decoration-color:var(--gold); }
  .auth-tabs{ display:flex; gap:6px; margin-bottom:20px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:4px; box-shadow:inset 0 2px 5px rgba(0,0,0,0.35); }
  .auth-tab{
    flex:1; background:transparent; border:none; color:var(--text-dim);
    padding:9px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase; border-radius:3px; cursor:pointer;
  }
  .auth-tab.selected{ background:linear-gradient(120deg, var(--gold) 0%, var(--ember) 58%, var(--ember-dim) 100%); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22); }
  .auth-error{ color:var(--ember); font-size:12.5px; min-height:0; margin-bottom:4px; }
  .auth-error:not(:empty){ margin-bottom:14px; }
  .consent-row{
    display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;
    cursor:pointer; font-size:12.5px; line-height:1.5; color:var(--text-dim);
  }
  .consent-row input[type="checkbox"]{
    flex-shrink:0; margin-top:2px; width:16px; height:16px; accent-color:var(--gold);
    cursor:pointer;
  }
  .consent-row a{ color:var(--gold-dim); text-decoration:underline; }
  .consent-row a:hover{ color:var(--gold); }
  .legal-links{
    margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
    text-align:center; font-size:12px; color:var(--text-dim);
  }
  .legal-links a{ color:var(--text-dim); text-decoration:underline; }
  .legal-links a:hover{ color:var(--gold); }
  .legal-links span{ margin:0 8px; }

  .danger-zone{
    margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,75,38,0.25);
  }
  .danger-zone-title{
    font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ember); margin-bottom:10px;
  }
  .danger-btn{
    width:100%; padding:12px; border:1px solid var(--ember-dim); border-radius:4px;
    background:transparent; color:var(--ember); font-family:'Manrope',sans-serif;
    font-weight:700; font-size:13.5px; cursor:pointer; transition:all 0.2s ease;
  }
  .danger-btn:hover{ background:rgba(255,75,38,0.1); border-color:var(--ember); }
  .danger-warning{ font-size:13px; line-height:1.6; color:var(--text-dim); margin:12px 0 10px; }
  .danger-actions{ display:flex; gap:10px; margin-top:10px; }
  .danger-actions .secondary-btn{ flex:1; }
  .danger-actions .danger-btn{ flex:1; }
  .forgot-link{
    text-align:right; margin-top:8px; font-size:12px; color:var(--text-dim);
    text-decoration:underline; text-decoration-color:var(--line); cursor:pointer;
  }
  .forgot-link:hover{ color:var(--text); }
  #authSubmit{
    width:100%; padding:14px; margin-top:8px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }
  .founder-link{
    text-align:center; margin-top:22px; font-size:12px; color:var(--text-dim);
    text-decoration:underline; text-decoration-color:var(--line); cursor:pointer;
  }
  .founder-link:hover{ color:var(--text); }
  .tutorial-link{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; margin-top:14px; padding:13px 18px;
    background:var(--panel); border:1px solid var(--gold-dim); border-radius:99px;
    color:var(--gold); font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:13.5px;
    letter-spacing:0.01em; cursor:pointer;
  }
  .tutorial-link svg{ width:17px; height:17px; flex-shrink:0; }
  .tutorial-link svg:last-child{ width:14px; height:14px; transition:transform 0.15s ease; }
  .tutorial-link:hover{ background:var(--ink); border-color:var(--gold); color:var(--gold); }
  .tutorial-link:hover svg:last-child{ transform:translateX(3px); }
  .secondary-btn{
    width:100%; padding:11px; margin-top:8px;
    background:transparent; border:1px solid var(--line); color:var(--text);
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:0.02em; border-radius:3px; cursor:pointer;
  }
  .secondary-btn:hover{ border-color:var(--ember-dim); }

  .ask-demo{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
  .ask-demo-eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
  }
  .ask-demo-eyebrow::before{
    content:''; width:7px; height:7px; background:var(--gold); transform:rotate(45deg);
    box-shadow:0 0 8px rgba(255,178,56,0.7); flex-shrink:0;
  }
  .ask-demo-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; line-height:1.15;
    text-transform:none; letter-spacing:-0.005em; margin:0 0 16px; color:var(--text);
  }
  .ask-demo-title .hero-accent{ text-shadow:0 0 14px rgba(255,178,56,0.35); }

  .ask-console{
    background:var(--panel); border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow:var(--shadow-card); padding:16px; margin-bottom:14px;
  }
  .ask-console-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .ask-console-dot{
    width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;
    box-shadow:0 0 8px rgba(255,178,56,0.7);
    animation:askDotPulse 2s ease-in-out infinite;
  }
  @keyframes askDotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
  @media (prefers-reduced-motion: reduce){ .ask-console-dot{ animation:none; } }
  .ask-console-label{
    font-family:'Instrument Sans',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);
  }
  .ask-console-badge{
    margin-left:auto; font-family:'Instrument Sans',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--gold);
    border:1px solid var(--gold-dim); padding:2px 8px; border-radius:20px;
  }
  .ask-disclaimer{ font-size:11.5px; color:var(--text-dim); margin:10px 0 14px; }

  .ask-chips{ display:flex; flex-direction:column; gap:8px; }
  .ask-chip{
    text-align:left; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    padding:11px 13px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;
    border-radius:3px; cursor:pointer;
    transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
  .ask-chip:hover:not(:disabled){
    border-color:var(--gold-dim); transform:translateX(2px);
    box-shadow:0 8px 18px -10px rgba(255,178,56,0.3);
  }
  .ask-chip:disabled{ opacity:0.4; cursor:default; }
  .ask-chip.selected{ border-color:var(--gold); color:var(--gold); }
  @media (prefers-reduced-motion: reduce){ .ask-chip{ transition:none; } }

  .ask-typing{ display:none; gap:9px; align-items:center; margin-top:14px; }
  .ask-typing.show{ display:flex; }
  .ask-reply{ display:none; gap:9px; align-items:flex-start; margin-top:14px; animation:riseIn 0.32s ease-out; }
  .ask-reply.show{ display:flex; }
  .ask-reply-bubble{
    flex:1; padding:13px 16px; border-radius:4px; font-size:14.5px; line-height:1.6;
    background:var(--panel-2); color:#DDD6CE;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .ask-reply-bubble .ask-cursor{
    display:inline-block; width:2px; height:1em; background:var(--gold);
    margin-left:2px; vertical-align:text-bottom; animation:askCaretBlink 0.9s steps(1) infinite;
  }
  @keyframes askCaretBlink{ 50%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .ask-reply{ animation:none; } .ask-reply-bubble .ask-cursor{ animation:none; } }

  .ask-demo-cta{
    width:100%; padding:13px; border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:14.5px;
    letter-spacing:0.03em; text-transform:uppercase; cursor:pointer;
  }

  .feature-showcase{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
  .streak-demo{
    display:flex; align-items:center; gap:16px;
    background:var(--panel); border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow:var(--shadow-card); padding:16px; margin-bottom:16px;
  }
  .streak-demo-days{ flex:1; }
  .streak-demo-days .cal-day{ font-size:11px; transition:background 0.3s ease, border-color 0.3s ease; cursor:default; }
  .streak-demo-days .cal-ring{ transition:opacity 0.3s ease; }
  .streak-demo-counter{
    flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding-left:16px; border-left:1px solid var(--line); min-width:84px;
  }
  .streak-demo-counter svg{
    width:22px; height:22px; color:var(--gold);
    filter:drop-shadow(0 0 6px rgba(255,178,56,0.5));
  }
  .streak-demo-counter span:nth-child(2){
    font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums; line-height:1.1; margin-top:2px;
  }
  .streak-demo-counter span:nth-child(3){
    font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; text-align:center;
  }
  .feature-flourish{ margin:14px 0 0; font-size:19px; text-align:center; }

  .calorie-demo-feed{ flex:1; min-width:0; }
  .calorie-demo-feed-label{
    font-family:'Instrument Sans',sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;
  }
  .calorie-demo-feed-text{
    font-size:14px; color:var(--text); line-height:1.4;
    transition:opacity 0.25s ease;
  }
  .feature-chips{ display:flex; flex-direction:column; gap:8px; }
  .feature-chip{
    display:flex; align-items:center; gap:11px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:3px;
    padding:11px 13px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600; color:var(--text);
  }
  .feature-chip svg{ width:19px; height:19px; color:var(--gold); flex-shrink:0; }

  #resetPanel{ padding:28px 24px; overflow-y:auto; flex:1; display:none; }
  #resetPanel h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:26px; text-transform:uppercase; margin:0 0 8px; }
  #resetPanel .cta-blade{ width:100%; padding:14px; border:none; color:var(--ink); font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; margin-top:6px; }

  #founderPanel{ padding:28px 24px; overflow-y:auto; flex:1; display:none; }
  .founder-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px; background:var(--panel); border:1px solid var(--line);
    border-radius:4px; margin-bottom:10px; cursor:pointer;
  }
  .founder-row:hover{ border-color:var(--ember-dim); }
  .founder-row .fu-name{ font-weight:700; font-size:14.5px; }
  .founder-row .fu-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; }
  .founder-empty{ color:var(--text-dim); font-size:13.5px; }

  #chat{
    flex:1; overflow-y:auto; padding:20px 24px; display:none; flex-direction:column; gap:14px;
    position:relative; z-index:1;
  }
  .msg-row{ display:flex; gap:9px; align-items:flex-end; animation:riseIn 0.32s ease-out; }
  .msg-row.user{ flex-direction:row-reverse; }
  @keyframes riseIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* Scroll-driven section reveals — native CSS, zero dependencies. Default
     state is fully visible so content never depends on this working: only
     browsers that understand animation-timeline (~84% global support as of
     2026) get the scroll-linked fade/rise; everyone else, and anyone with
     prefers-reduced-motion, just sees the section already in place. */
  .reveal-on-scroll{ opacity:1; transform:none; }
  @supports (animation-timeline: view()){
    .reveal-on-scroll{
      animation:revealOnScroll linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 35%;
    }
    @keyframes revealOnScroll{
      from{ opacity:0; transform:translateY(28px); }
      to{ opacity:1; transform:translateY(0); }
    }
  }
  @media (prefers-reduced-motion: reduce){
    .reveal-on-scroll{ animation:none !important; opacity:1; transform:none; }
  }
  .mini-avatar{
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:var(--panel-2); border:1px solid var(--ember-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .mini-avatar svg{ width:17px; height:17px; }
  .msg{ max-width:78%; padding:13px 16px; border-radius:4px; font-size:15.5px; line-height:1.65; }
  .msg.coach{
    background:var(--panel); font-weight:400; color:#DDD6CE;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow:inset 0 0 0 1px var(--line), var(--shadow-card);
  }
  .msg.user{
    background:linear-gradient(135deg, var(--ember-dim), var(--ember)); color:#fff; font-weight:500;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    box-shadow:var(--shadow-card);
  }

  .msg.coach > div{ margin-bottom:9px; }
  .msg.coach > div:last-child{ margin-bottom:0; }
  .msg.coach .msg-h{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:17px; color:var(--gold);
    margin:14px 0 7px; letter-spacing:0.01em; text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
  }
  .msg.coach .msg-h::before{
    content:''; width:7px; height:7px; background:var(--gold); flex-shrink:0;
    transform:rotate(45deg); box-shadow:0 0 6px rgba(255,178,56,0.6);
  }
  .msg.coach .msg-h:first-child{ margin-top:0; }
  .msg.coach ul{ list-style:none; margin:4px 0 10px; padding-left:0; }
  .msg.coach li{
    margin-bottom:7px; padding-left:18px; position:relative;
  }
  .msg.coach li::before{
    content:''; position:absolute; left:2px; top:7px;
    width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
  }
  .msg.coach .msg-gap{ height:2px; margin-bottom:0 !important; }
  .msg.coach strong{ color:var(--text); font-weight:700; }
  .line-in{ animation:lineIn 0.3s ease-out; }
  @keyframes lineIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .video-block{ margin:8px 0; max-width:100%; }
  .video-label{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:13px; color:var(--gold);
    letter-spacing:0.02em; text-transform:uppercase; margin-bottom:6px;
    display:flex; align-items:center; gap:7px;
  }
  .video-label::before{
    content:''; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
  }
  .video-cta{
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
    padding:12px 14px; text-decoration:none; cursor:pointer;
    transition:border-color 0.2s, transform 0.15s;
  }
  .video-cta:hover{ border-color:var(--gold-dim); transform:translateY(-1px); }
  .video-cta-icon{
    width:34px; height:34px; flex-shrink:0; border-radius:50%;
    background:#FF0000; display:flex; align-items:center; justify-content:center;
  }
  .video-cta-icon svg{ width:14px; height:14px; margin-left:2px; }
  .video-cta-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .video-cta-title{ font-size:14px; font-weight:700; color:var(--text); }
  .video-cta-sub{
    font-family:'Instrument Sans',sans-serif; font-size:11px; color:var(--text-dim);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .video-cta-arrow{ color:var(--text-dim); flex-shrink:0; }
  .video-cta:hover .video-cta-arrow{ color:var(--gold); }

  .meal-block{
    display:flex; align-items:center; gap:12px; margin:8px 0;
    padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:5px;
  }
  .meal-icon{ width:38px; height:38px; flex-shrink:0; }
  .meal-icon svg{ width:100%; height:100%; }
  .meal-eyebrow{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; }
  .meal-name{ font-size:14px; font-weight:500; color:var(--text); margin-top:2px; }

  .ex-card-wrap{ margin:8px 0; }
  .ex-card{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; background:var(--panel);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    box-shadow:inset 0 0 0 1px var(--line), var(--shadow-card);
    cursor:pointer; transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
  }
  .ex-card:hover{ box-shadow:inset 0 0 0 1px var(--gold-dim), var(--shadow-lift); transform:translateY(-1px); }
  .ex-card.done{ background:linear-gradient(90deg, rgba(255,178,56,0.08), rgba(255,75,38,0.05)); box-shadow:inset 0 0 0 1px var(--gold-dim), var(--shadow-card); }
  .ex-check{
    width:26px; height:26px; flex-shrink:0; border-radius:50%;
    border:2px solid var(--line); background:transparent; color:transparent;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:all 0.2s; padding:0;
  }
  .ex-check svg{ width:15px; height:15px; }
  .ex-check.checked{
    background:linear-gradient(135deg, var(--gold), var(--ember));
    border-color:transparent; color:#1A0F08;
    transform:scale(1.08);
  }
  .ex-info{ flex:1; min-width:0; }
  .ex-video-btn{
    width:24px; height:24px; flex-shrink:0; border-radius:50%;
    border:1.5px solid var(--line); background:transparent; color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:'Instrument Sans',sans-serif; font-size:12.5px; font-weight:700;
    transition:all 0.2s; padding:0;
  }
  .ex-video-btn:hover{ border-color:var(--gold-dim); color:var(--gold); }
  .ex-video-btn.active{ background:var(--gold-dim); border-color:var(--gold-dim); color:var(--bg); }
  .ex-video-slot:not(:empty){ margin-top:8px; }
  .ex-name{ font-size:14.5px; font-weight:700; color:var(--text); transition:color 0.2s; }
  .ex-detail{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); margin-top:3px; letter-spacing:0.01em; font-variant-numeric:tabular-nums; }
  .ex-card.done .ex-name{ color:var(--text-dim); text-decoration:line-through; text-decoration-color:var(--gold-dim); }
  .ex-card.done .ex-detail{ text-decoration:line-through; text-decoration-color:var(--line); }

  .ex-complete-banner{
    margin-top:10px; padding:12px 14px; border-radius:6px; text-align:center;
    background:linear-gradient(135deg, rgba(255,178,56,0.16), rgba(255,75,38,0.12));
    border:1px solid var(--gold-dim); color:var(--gold); font-weight:700; font-size:13.5px;
    animation:banIn 0.35s ease;
  }
  @keyframes banIn{
    from{ opacity:0; transform:translateY(-6px) scale(0.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  .pdf-block{ margin:10px 0; }
  .pdf-btn{
    display:flex; align-items:center; gap:9px;
    width:100%; padding:13px 16px;
    border:none; color:var(--ink);
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;
    cursor:pointer;
  }
  .pdf-btn svg{ width:18px; height:18px; flex-shrink:0; position:relative; z-index:1; }
  .pdf-btn span{ position:relative; z-index:1; }

  .typing-row{ display:none; gap:9px; align-items:center; padding:0 24px 12px; position:relative; z-index:1; }
  .typing-row.show{ display:flex; }
  .typing-dots{ display:flex; gap:3px; background:var(--panel); border:1px solid var(--line); padding:9px 12px; border-radius:4px; }
  .typing-dots span{
    width:5px; height:5px; border-radius:50%; background:var(--text-dim);
    animation:bounce 1.1s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2){ animation-delay:0.15s; }
  .typing-dots span:nth-child(3){ animation-delay:0.3s; }
  @keyframes bounce{
    0%,60%,100%{ transform:translateY(0); opacity:0.5; }
    30%{ transform:translateY(-4px); opacity:1; }
  }

  #inputRow{
    display:none; align-items:center; gap:4px;
    margin:0 24px 20px; padding:6px 6px 6px 18px;
    background:var(--panel); border:1px solid var(--line); border-radius:28px;
    position:relative; z-index:1;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  #inputRow.flex{ display:flex; }
  #inputRow:focus-within{
    border-color:var(--ember-dim);
    box-shadow:0 0 0 3px rgba(255,75,38,0.12);
  }
  #msgInput{
    flex:1; background:transparent; border:none;
    color:var(--text); padding:11px 6px; min-width:0;
    font-family:'Manrope', sans-serif; font-size:15.5px; font-weight:500;
    letter-spacing:0.005em;
    resize:none; overflow-y:auto; max-height:120px; line-height:1.4;
  }
  #msgInput::placeholder{ color:var(--text-dim); font-weight:400; }
  #msgInput:focus{ outline:none; }
  #micBtn, #sendBtn{
    width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background 0.15s, color 0.15s;
  }
  #micBtn{ background:transparent; color:var(--text-dim); }
  #micBtn svg{ width:19px; height:19px; }
  #micBtn:hover{ background:var(--panel-2); color:var(--text); }
  #micBtn.listening{
    background:var(--ember); color:#fff;
    animation:micPulse 1.2s infinite ease-in-out;
  }
  #micBtn.unsupported{ display:none; }
  @keyframes micPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,75,38,0.45); }
    50%{ box-shadow:0 0 0 7px rgba(255,75,38,0); }
  }
  #sendBtn{ background:linear-gradient(135deg, var(--ember), var(--gold)); color:#1A0F08; }
  #sendBtn svg{ width:17px; height:17px; }
  #sendBtn:hover{ filter:brightness(1.1); }
  #photoBtn{
    width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:transparent; color:var(--text-dim); transition:background 0.15s, color 0.15s, transform 0.15s;
  }
  #photoBtn svg{ width:19px; height:19px; }
  #photoBtn:hover{ background:var(--panel-2); color:var(--text); }
  #photoBtn.open{ color:var(--gold); transform:rotate(45deg); }

  .attach-menu{
    display:none; flex-direction:column; gap:2px;
    position:absolute; bottom:calc(100% + 10px); left:0;
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
    padding:6px; min-width:190px; z-index:5;
    box-shadow:0 16px 32px -8px rgba(0,0,0,0.5);
    animation:menuIn 0.15s ease;
  }
  .attach-menu.show{ display:flex; }
  @keyframes menuIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .attach-menu-item{
    display:flex; align-items:center; gap:11px;
    background:transparent; border:none; color:var(--text);
    text-align:left; padding:10px 11px; border-radius:6px; cursor:pointer;
    font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;
  }
  .attach-menu-item:hover{ background:var(--panel); }
  .attach-menu-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--text-dim); }

  #attachPreview{ display:none; margin:0 24px 10px; position:relative; z-index:1; }
  #attachPreview.show{ display:flex; align-items:center; gap:10px; }
  #attachPreview img{ width:52px; height:52px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
  #attachPreview .ap-file-icon{
    width:52px; height:52px; flex-shrink:0; border-radius:4px; border:1px solid var(--line);
    background:var(--panel); display:flex; align-items:center; justify-content:center; color:var(--gold);
  }
  #attachPreview .ap-file-icon svg{ width:24px; height:24px; }
  #attachPreview .ap-info{ font-size:12px; color:var(--text-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #attachPreview .ap-remove{
    background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
    width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  #attachPreview .ap-remove:hover{ color:var(--ember); border-color:var(--ember-dim); }

  .msg-img{ max-width:220px; border-radius:4px; border:1px solid var(--line); display:block; margin-bottom:6px; }
  .msg-file-chip{
    display:flex; align-items:center; gap:9px; padding:9px 12px;
    background:rgba(0,0,0,0.18); border-radius:5px; margin-bottom:6px;
    font-size:13px; font-weight:700;
  }
  .msg-file-chip svg{ width:18px; height:18px; flex-shrink:0; }
  .msg-file-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


  #menuBtn{
    width:34px; height:34px; flex-shrink:0; background:transparent; border:none;
    color:var(--text-dim); border-radius:4px; cursor:pointer; display:none;
    align-items:center; justify-content:center;
  }
  #menuBtn.show{ display:flex; }
  #menuBtn svg{ width:20px; height:20px; }
  #menuBtn:hover{ color:var(--text); background:var(--panel-2); }

  #sidePanel{
    position:absolute; inset:0; z-index:20; display:none;
    background:rgba(10,7,5,0.6);
  }
  #sidePanel.show{ display:block; }
  .side-sheet{
    position:absolute; top:0; left:0; bottom:0; width:82%; max-width:300px;
    background:var(--panel); border-right:1px solid var(--line);
    padding:20px 16px; display:flex; flex-direction:column;
    animation:sheetIn 0.2s ease;
  }
  @keyframes sheetIn{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
  .side-close{ align-self:flex-end; color:var(--text-dim); cursor:pointer; font-size:18px; margin-bottom:10px; }
  .side-new{
    width:100%; padding:12px; margin-bottom:16px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:15px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }
  .side-label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:8px; }
  .side-chats{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
  .side-chat-row{
    padding:10px 12px; border-radius:4px; cursor:pointer; font-size:13.5px;
    color:var(--text-dim); border:1px solid transparent;
  }
  .side-chat-row:hover{ background:var(--panel-2); }
  .side-chat-row.active{ background:var(--panel-2); border-color:var(--gold-dim); color:var(--text); }
  .side-footer{ border-top:1px solid var(--line); padding-top:12px; margin-top:12px; display:flex; flex-direction:column; gap:4px; }
  .side-footer-btn{
    background:transparent; border:none; color:var(--text-dim); text-align:left;
    padding:9px 4px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:11px;
  }
  .side-footer-btn:hover{ color:var(--gold); }
  .side-footer-btn .side-icon{ width:17px; height:17px; flex-shrink:0; }

  #settingsPanel{
    position:absolute; inset:0; z-index:15; display:none; flex-direction:column;
    background:var(--bg);
  }
  #settingsPanel.show{ display:flex; }
  #tosPanel, #privacyPanel{
    position:absolute; inset:0; z-index:20; display:none; flex-direction:column;
    background:var(--bg);
  }
  #tosPanel.show, #privacyPanel.show{ display:flex; }
  .legal-doc{ max-width:620px; }
  .legal-doc .legal-updated{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim); margin:0 0 20px; }
  .legal-doc h3{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:15px;
    text-transform:uppercase; letter-spacing:0.02em; color:var(--gold); margin:26px 0 8px;
  }
  .legal-doc h3:first-of-type{ margin-top:0; }
  .legal-doc p{ font-size:14px; line-height:1.65; color:var(--text); margin:0 0 10px; }
  .legal-doc ul{ margin:0 0 10px; padding-left:20px; }
  .legal-doc li{ font-size:14px; line-height:1.65; color:var(--text); margin-bottom:6px; }
  .legal-doc b{ color:var(--gold-dim); }
  .legal-doc a{ color:var(--gold-dim); }
  .legal-doc a:hover{ color:var(--gold); }
  .settings-head{
    padding:20px 24px 16px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .settings-head h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; margin:0; text-transform:uppercase; letter-spacing:-0.005em; }
  .settings-body{ flex:1; overflow-y:auto; padding:20px 24px; }
  .settings-close{ color:var(--text-dim); cursor:pointer; font-size:13px; text-decoration:underline; }
  .settings-close:hover{ color:var(--text); }
  .settings-select{
    width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px 12px; border-radius:3px; font-family:inherit; font-size:14px;
  }
  .q-options.compact{ gap:7px; }
  .q-options.compact .q-opt{ padding:10px 14px; font-size:13.5px; }
  #saveSettings{
    width:100%; padding:14px; margin-top:10px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }

  #calendarPanel{
    position:absolute; inset:0; z-index:15; display:none; flex-direction:column;
    background:var(--bg);
  }
  #calendarPanel.show{ display:flex; }

  #pricingPanel{
    position:absolute; inset:0; z-index:16; display:none; flex-direction:column;
    background:var(--bg);
  }
  #pricingPanel.show{ display:flex; }
  .pricing-sub{ font-size:14px; color:var(--text-dim); line-height:1.5; margin:0 0 20px; }
  .pricing-cards{ display:flex; flex-direction:column; gap:16px; }
  .pricing-card{
    position:relative; background:var(--panel); border:1px solid var(--line);
    border-radius:6px; padding:22px 20px 20px; box-shadow:var(--shadow-card);
  }
  .pricing-card.featured{
    border-color:transparent;
    background:
      linear-gradient(var(--panel), var(--panel)) padding-box,
      linear-gradient(120deg, var(--gold), var(--ember)) border-box;
    border:2px solid transparent;
    box-shadow:var(--shadow-card), 0 0 24px -8px rgba(255,120,40,0.45);
  }
  .pricing-card-badge{
    position:absolute; top:-11px; right:16px; padding:4px 10px;
    background:var(--ember); color:var(--text); font-family:'Big Shoulders Display',sans-serif;
    font-weight:800; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
    border-radius:3px; box-shadow:0 4px 10px -2px rgba(0,0,0,0.5);
  }
  .pricing-card-badge.gold{ background:linear-gradient(90deg, var(--gold), var(--ember)); color:var(--ink); }
  .pricing-card-eyebrow{
    font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:13px;
    color:var(--gold-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;
  }
  .pricing-card-price{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:44px;
    line-height:1; color:var(--text); letter-spacing:-0.01em;
  }
  .pricing-card-price span{ font-size:16px; font-weight:600; color:var(--text-dim); margin-left:3px; }
  .pricing-card-sub{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim);
    margin:4px 0 16px;
  }
  .pricing-features{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
  .pricing-features li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.4; color:var(--text); }
  .pricing-features svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--gold); }
  .pricing-cta{ width:100%; }
  .pricing-promo-hint{ font-size:12px; color:var(--text-dim); text-align:center; margin:18px 0 0; line-height:1.5; }

  #tutorialPanel{
    position:absolute; inset:0; z-index:17; display:none; flex-direction:column;
    background:var(--bg);
  }
  #tutorialPanel.show{ display:flex; }
  .tutorial-cards{ display:flex; flex-direction:column; gap:12px; }
  .tutorial-card{
    background:var(--panel); border:1px solid var(--line); border-radius:6px;
    padding:16px 18px; box-shadow:var(--shadow-card);
  }
  .tutorial-card-icon{
    width:32px; height:32px; border-radius:50%; background:var(--ink);
    display:flex; align-items:center; justify-content:center; color:var(--gold);
    margin-bottom:10px;
  }
  .tutorial-card-icon svg{ width:17px; height:17px; }
  .tutorial-card-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:17px;
    text-transform:uppercase; letter-spacing:0.01em; color:var(--text); margin-bottom:5px;
  }
  .tutorial-card-desc{ font-size:13.5px; line-height:1.5; color:var(--text-dim); }

  #caloriePanel{
    position:absolute; inset:0; z-index:15; display:none; flex-direction:column;
    background:var(--bg);
  }
  #caloriePanel.show{ display:flex; }
  .calorie-ring-wrap{ display:flex; justify-content:center; margin-bottom:18px; }
  .calorie-ring{
    width:168px; height:168px; border-radius:50%; position:relative;
    background:conic-gradient(var(--panel) 0% 100%);
    box-shadow:var(--shadow-card);
    transition:box-shadow 0.3s ease;
  }
  .calorie-ring.over-target{
    box-shadow:var(--shadow-card), 0 0 0 3px var(--ember), 0 0 18px -4px rgba(255,75,38,0.6);
  }
  .calorie-ring::before{
    content:''; position:absolute; inset:12px; border-radius:50%; background:var(--bg);
  }
  .calorie-ring-inner{
    position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
  }
  .calorie-ring-consumed{
    font-family:'Anton','Big Shoulders Display',sans-serif; font-weight:400; font-size:38px;
    color:var(--text); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:0.01em;
  }
  .calorie-ring-target-caption{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.03em;
  }
  .calorie-ring-over{
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:var(--ember);
    margin-top:2px;
  }

  .macro-legend{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
  .macro-chip{
    display:flex; align-items:center; gap:7px; background:var(--panel);
    border:1px solid var(--line); border-radius:99px; padding:7px 13px 7px 10px;
  }
  .macro-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .macro-chip[data-macro="protein"] .macro-dot{ background:var(--ember); }
  .macro-chip[data-macro="carbs"] .macro-dot{ background:var(--gold); }
  .macro-chip[data-macro="fat"] .macro-dot{ background:var(--blue); }
  .macro-label{
    font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:10.5px; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .macro-value{
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
  }
  .calorie-photo-count{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim);
    text-align:center; margin-top:8px; font-variant-numeric:tabular-nums;
  }
  .calorie-upload-btn{
    width:100%; padding:14px; border:none; color:var(--ink); margin-top:8px;
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:15px;
    letter-spacing:0.03em; text-transform:uppercase; cursor:pointer;
  }
  .calorie-today-label{
    font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-dim); margin:26px 0 12px;
  }
  .calorie-meal-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
    padding:12px 14px; margin-bottom:8px;
  }
  .calorie-meal-desc{ font-size:13.5px; color:var(--text); flex:1; }
  .calorie-meal-stats{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold);
    font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0;
  }
  .calorie-meal-delete{
    background:none; border:none; padding:4px; margin:0; cursor:pointer;
    color:var(--text-dim); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  .calorie-meal-delete:hover{ color:var(--ember); }
  .calorie-meal-delete svg{ width:15px; height:15px; }
  .cal-month-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .cal-nav-btn{
    width:34px; height:34px; border-radius:50%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .cal-nav-btn:hover{ border-color:var(--gold-dim); }
  .cal-month-label{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:19px; letter-spacing:0.01em; text-transform:uppercase;
  }
  .cal-weekdays{
    display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
    font-size:11px; color:var(--text-dim); font-weight:700; margin-bottom:6px;
  }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .cal-day{
    aspect-ratio:1; border-radius:6px; background:var(--panel); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500;
    font-variant-numeric:tabular-nums; color:var(--text); position:relative;
    transition:border-color 0.15s, background 0.15s;
  }
  .cal-day:hover{ border-color:var(--gold-dim); }
  .cal-day.pad{ background:transparent; border-color:transparent; cursor:default; }
  .cal-day.today{ border-color:var(--gold); font-weight:700; }
  .cal-day .cal-daynum{ position:relative; z-index:1; }
  .cal-day .cal-ring{
    position:absolute; inset:3px; border-radius:50%; pointer-events:none;
    background:conic-gradient(var(--gold) calc(var(--pct,0) * 1%), var(--ember-dim) 0);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  }
  .cal-day.complete .cal-ring{ background:var(--gold); }
  .cal-day.complete{ background:linear-gradient(135deg, rgba(255,178,56,0.1), rgba(255,75,38,0.06)); }

  .cal-day.recovery{ border-color:var(--blue-dim); background:linear-gradient(135deg, rgba(79,157,255,0.12), rgba(79,157,255,0.03)); }
  .cal-day.recovery .cal-ring{ background:conic-gradient(var(--blue) calc(var(--pct,0) * 1%), var(--blue-dim) 0); }
  .cal-day.recovery.complete{ background:linear-gradient(135deg, rgba(79,157,255,0.2), rgba(79,157,255,0.08)); }
  .cal-day.recovery.complete .cal-ring{ background:var(--blue); }
  .cal-day.recovery.today{ border-color:var(--blue); }

  .cal-day-badge{
    display:inline-block; font-family:'Instrument Sans',sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--blue);
    border:1px solid var(--blue-dim); padding:3px 9px; border-radius:20px; margin-bottom:10px;
  }

  .cal-day-back{
    font-size:12.5px; color:var(--text-dim); cursor:pointer; margin-bottom:16px;
    text-decoration:underline; text-decoration-color:var(--line);
  }
  .cal-day-back:hover{ color:var(--text); }
  .cal-day-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; text-transform:uppercase; letter-spacing:-0.005em;
    margin-bottom:6px;
  }
  .cal-day-notes{ font-size:13px; color:var(--text-dim); margin-bottom:16px; line-height:1.5; }
  .cal-day-empty{ color:var(--text-dim); font-size:13.5px; text-align:center; padding:30px 0; }