/* Organized by product feature for straightforward maintenance. */
/* Colour tokens, typography, basic controls and page foundation. */

/* Foundation, layout, forms and core components. */



@font-face{font-family:Michroma;src:url("../../assets/fonts/Michroma-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{
    --cf-heading-font:Michroma,system-ui,sans-serif;
    --cf-card-surface:#151a22;
    --bg:#0b0e13;
    --panel:#151a22;
    --panel2:#1d2430;
    --panel3:#263143;
    --text:#f4f7fb;
    --muted:#a8b3c3;
    --accent:#20c8ff;
    --accent2:#168cff;
    --accent3:#ff7a1a;
    --danger:#ff7d91;
    --border:#313c4e;
    --shadow:0 10px 30px rgba(0,0,0,.25);
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:linear-gradient(180deg,#0b0e13 0%, #10151e 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
  body.splash-open{overflow:hidden}
  .splash{
    position:fixed; inset:0; z-index:9999; overflow:hidden;
    background:
      radial-gradient(circle at 20% 20%, rgba(32,200,255,.20), transparent 30%),
      radial-gradient(circle at 80% 25%, rgba(22,140,255,.22), transparent 35%),
      radial-gradient(circle at 50% 85%, rgba(255,122,26,.16), transparent 35%),
      linear-gradient(145deg,#090c11 0%, #101622 45%, #0f141c 100%);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .7s ease, visibility .7s ease;
  }
  .splash.hidden{opacity:0; visibility:hidden}
  .orb{
    position:absolute; border-radius:50%; filter:blur(20px); opacity:.5; animation:floaty 8s ease-in-out infinite;
  }
  .orb.one{width:180px;height:180px;background:#20c8ff; left:8%; top:12%}
  .orb.two{width:220px;height:220px;background:#168cff; right:6%; top:14%; animation-delay:1s}
  .orb.three{width:260px;height:260px;background:#ff7a1a; left:35%; bottom:8%; animation-delay:2s}
  @keyframes floaty{
    0%,100%{transform:translateY(0) translateX(0)}
    50%{transform:translateY(-20px) translateX(12px)}
  }
  .splash-card{
    width:min(92vw,760px); padding:28px 24px 26px; border-radius:28px;
    background:rgba(18,23,31,.72); border:1px solid rgba(255,255,255,.12);
    box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.35);
    backdrop-filter:blur(10px); overflow:hidden;
    text-align:center; position:relative; z-index:2;
  }
  .splash-ring{
    width:108px;height:108px; margin:0 auto 18px; border-radius:50%;
    background:conic-gradient(from 180deg, #20c8ff, #168cff, #ff7a1a, #20c8ff);
    padding:4px; animation:spin 8s linear infinite;
    box-shadow:0 0 40px rgba(32,200,255,.22);
  }
  .splash-ring-inner{
    width:100%;height:100%;border-radius:50%;
    background:#111722; display:grid; place-items:center; font-size:34px;
    box-shadow:inset 0 0 40px rgba(22,140,255,.18);
  }
  @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  .splash-kicker{
    font-size:11px; letter-spacing:2.8px; text-transform:uppercase; color:var(--accent);
    margin-bottom:8px;
  }
  .splash h1{
    font-size:clamp(26px,6vw,42px); margin:0; line-height:1.05;
    background:linear-gradient(90deg,#fff,#dfe8ff,#20c8ff,#fff);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shine 5s linear infinite;
  }
  @keyframes shine{to{background-position:200% center}}
  .splash p{color:#c2ccda; font-size:15px; line-height:1.45; margin:12px auto 20px; max-width:560px}
  .enter-btn{
    border:0; border-radius:14px; padding:13px 18px; min-width:220px;
    background:linear-gradient(135deg,#20c8ff,#168cff); color:#081018;
    font-weight:800; font-size:15px; box-shadow:0 14px 30px rgba(32,200,255,.18);
  }
  .pulse-note{margin-top:10px; color:#96a5bb; font-size:12px; animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
  .splash-hero-frame{
    width:min(82vw,420px); margin:0 auto 10px; position:relative;
    animation:heroFloat 5.5s ease-in-out infinite;
  }
  .splash-hero-frame::before{
    content:""; position:absolute; inset:auto 10% 2% 10%; height:26px; border-radius:50%;
    background:radial-gradient(circle, rgba(32,200,255,.28), rgba(22,140,255,.14), transparent 72%);
    filter:blur(16px); z-index:0;
  }
  .splash-hero-img{
    position:relative; z-index:1; width:100%; max-height:360px; object-fit:contain; display:block; margin:0 auto;
    filter:drop-shadow(0 12px 40px rgba(0,0,0,.38));
    animation:heroGlow 4.8s ease-in-out infinite;
  }
  .splash-brand-title{margin-top:4px}
  .splash-brand-title .brand-word{display:inline-block; animation:brandRise .9s ease both}
  .splash-brand-title .brand-word + .brand-word{animation-delay:.16s}
  .brand-slogan{
    margin-top:14px; font-size:14px; letter-spacing:3px; text-transform:uppercase;
    color:var(--accent3); font-weight:900;
    animation:pulse 2.6s ease-in-out infinite, sloganRise 1s ease both .15s;
  }
  .splash-card::before{
    content:""; position:absolute; inset:12px; border-radius:22px;
    border:1px solid rgba(22,140,255,.12); pointer-events:none;
    box-shadow:inset 0 0 22px rgba(22,140,255,.06);
  }
  .splash-card::after{
    content:""; position:absolute; inset:auto -20% -35% -20%; height:180px;
    background:radial-gradient(circle, rgba(32,200,255,.14), transparent 62%);
    filter:blur(14px); pointer-events:none;
  }
  .splash-hero-frame::after{
    content:""; position:absolute; left:6%; right:6%; top:10%; height:2px;
    background:linear-gradient(90deg, transparent, rgba(32,200,255,.95), rgba(22,140,255,.95), transparent);
    box-shadow:0 0 18px rgba(32,200,255,.42);
    animation:scanSweep 3.8s ease-in-out infinite; z-index:2;
  }
  .enter-btn{position:relative; overflow:hidden; animation:ctaGlow 2.8s ease-in-out infinite}
  .enter-btn::after{
    content:""; position:absolute; inset:0; transform:translateX(-130%);
    background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.15) 35%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.15) 65%, transparent 100%);
    animation:ctaShine 3.2s ease-in-out infinite;
  }
  @keyframes scanSweep{0%{transform:translateY(10px);opacity:0}20%{opacity:1}50%{transform:translateY(250px);opacity:.95}100%{transform:translateY(320px);opacity:0}}
  @keyframes ctaShine{0%,18%{transform:translateX(-130%)}45%,100%{transform:translateX(140%)}}
  @keyframes ctaGlow{0%,100%{box-shadow:0 14px 30px rgba(32,200,255,.18)}50%{box-shadow:0 18px 36px rgba(22,140,255,.26)}}
  .brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}
  .brand-lockup-mark{width:52px;height:52px;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);background:#0f141c;flex:0 0 auto}
  .brand-lockup-copy{min-width:0}
  .brand-lockup-title{font-size:20px;font-weight:900;line-height:1.05;margin:0;background:linear-gradient(90deg,#fff,#168cff,#20c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand-lockup-tag{font-size:11px;letter-spacing:2.1px;text-transform:uppercase;color:var(--accent3);font-weight:800;margin-top:3px}
  .header-brandline{display:flex;align-items:flex-start;gap:12px;min-width:0}
  .header-brandline .brand-lockup-title{font-size:22px}
  .auth-brand .brand-lockup{justify-content:center;margin-bottom:12px;gap:14px}
  .auth-brand .brand-lockup-mark{width:74px;height:74px;border-radius:22px}
  .auth-brand .brand-lockup-title{font-size:clamp(27px,7vw,42px)}
  .auth-brand .brand-lockup-copy{text-align:left}
  @media(max-width:620px){
    .header-brandline{align-items:center}
    .header-brandline .brand-lockup-title{font-size:19px}
    .auth-brand .brand-lockup{flex-direction:column}
    .auth-brand .brand-lockup-copy{text-align:center}
  }
  @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes heroGlow{0%,100%{filter:drop-shadow(0 12px 36px rgba(0,0,0,.38))}50%{filter:drop-shadow(0 18px 44px rgba(32,200,255,.18))}}
  @keyframes brandRise{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
  @keyframes sloganRise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
  header{
    position:sticky; top:0; z-index:10; padding:14px 14px 10px;
    background:rgba(11,14,19,.92); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  h1{font-size:20px; margin:0 0 4px}
  .sub{font-size:12px; color:var(--muted)}

  .tabbar{
    display:flex; gap:10px; margin-top:12px;
  }
  .tab-btn{
    flex:1; padding:12px 14px; border-radius:14px; cursor:pointer;
    background:var(--panel3); color:var(--text); border:1px solid var(--border);
    font-weight:800; letter-spacing:.2px;
  }
  .tab-btn.active{
    background:linear-gradient(135deg,#20c8ff,#168cff);
    color:#081018; border-color:transparent;
    box-shadow:0 10px 24px rgba(32,200,255,.14);
  }
  .tab-section.hidden,.tab-section[hidden]{display:none!important}
  .quick-food-heading{
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; margin:16px 0 8px;
  }
  .quick-chip-wrap{
    display:inline-flex; align-items:stretch; border:1px solid var(--border);
    border-radius:12px; overflow:hidden; background:var(--panel3);
  }

/* Approved heading face; body copy, fields and numbers keep the app font. */
h1,h2,h3,h4{font-family:var(--cf-heading-font);font-weight:400;letter-spacing:.015em;font-synthesis:none}