@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Manrope:wght@400;500;600;700;800&display=swap');

  :root{
    --bg:#08090B; --panel:#1B2029; --panel-2:#232A36; --line:#333B4A;
    --text:#EDEFF2; --muted:#9098A3;
    --signal:#21E6A1; --signal-dim:#12352C;
    --alert:#FF5D5D; --alert-dim:#3A1E20;
    --accent:#6E7BFF; --accent-dim:#1B1E33;
    --gold:#FFB020; --gold-dim:#332510;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html,body{ background:#050607; height:100%; overflow:hidden; }
  body{ font-family:'Manrope',sans-serif; color:var(--text); display:flex; justify-content:center; }
  .num{ font-family:'Space Grotesk',sans-serif; }

  /* Phone shell (only visually framed on wide screens) */
  .phone{
    width:100%; max-width:430px;
    height:100vh; height:100dvh; /* dvh = real usable mobile viewport, avoids browser-chrome jump */
    background:var(--bg); position:relative; overflow:hidden;
    display:flex; flex-direction:column;
  }
  @media(min-width:600px){
    body{ padding:32px 0; }
    .phone{ height:860px; border-radius:36px; border:1px solid #22262d;
      box-shadow:0 40px 80px rgba(0,0,0,0.55); }
  }

  .statusbar{ height:0; flex-shrink:0; }

  /* HEADER - a normal flex child, not absolutely positioned, so it can never be pushed off by scrolling */
  .app-header{
    padding:16px 18px 12px; display:flex; align-items:center; justify-content:space-between;
    background:var(--panel); border-bottom:1px solid var(--line); flex-shrink:0;
  }
  .app-header h1{ font-size:16px; font-weight:800; letter-spacing:0.2px; }
  .app-header .sub{ font-size:11px; color:var(--muted); margin-top:2px; }
  .avatar{
    width:34px; height:34px; border-radius:50%; background:var(--panel-2);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px;
  }

  .wallet-chip{
    display:flex; align-items:center; gap:8px; background:var(--signal-dim);
    border:1px solid rgba(33,230,161,0.35); padding:6px 12px 6px 8px; border-radius:999px; cursor:pointer;
  }
  .wallet-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(33,230,161,.5);} 70%{box-shadow:0 0 0 6px rgba(33,230,161,0);} 100%{box-shadow:0 0 0 0 rgba(33,230,161,0);} }
  .wallet-chip .amount{ font-size:13.5px; font-weight:700; color:var(--signal); }

  .mds-header-add-btn{
    width:32px; height:32px; border-radius:50%; background:var(--signal); color:#08140F;
    display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
    box-shadow:0 4px 12px rgba(33,230,161,0.3); flex-shrink:0;
  }

  /* SCROLL AREA - bottom padding must clear the floating chat button
     (.mds-chat-fab below: 52px tall, sitting 16px above the bottom-nav),
     since its right edge lines up with this same 16px inset. 90px worked
     fine for the old fixed 2-column grid where no card ever needed the
     full page width right at the very bottom, but the Promote Products
     card's full-width Buy Now button can end up as the last thing on the
     page - not enough clearance there let the FAB visually sit on top of
     it and swallow the tap. */
  .screen{ flex:1; overflow-y:auto; padding:16px 16px 130px; }
  .screen::-webkit-scrollbar{ display:none; }
  [hidden]{ display:none !important; }

  .section-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted); font-weight:800; margin:22px 0 10px; }
  .section-title:first-child{ margin-top:0; }
  .row-between{ display:flex; align-items:center; justify-content:space-between; }
  .link-small{ font-size:11.5px; color:var(--accent); font-weight:700; cursor:pointer; }

  /* HOME: balance hero */
  .balance-hero{
    background:linear-gradient(135deg,#12211C,#0F1720);
    border:1px solid rgba(33,230,161,0.22); border-radius:20px; padding:22px 20px;
  }
  .balance-hero .label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
  .balance-hero .big{ font-size:34px; font-weight:800; margin:6px 0 18px; }
  .hero-actions{ display:flex; gap:10px; }
  .hero-actions a{ text-decoration:none; }
  .hero-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 0; border-radius:14px; font-weight:800; font-size:13px; border:none; cursor:pointer;
    transition:transform .12s ease;
  }
  .hero-btn:active{ transform:scale(0.97); }
  .hero-btn .hero-btn-ic{
    width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; flex-shrink:0;
  }
  .btn-fill{ background:var(--signal); color:#08140F; box-shadow:0 6px 18px rgba(33,230,161,0.25); }
  .btn-fill .hero-btn-ic{ background:rgba(8,20,15,0.15); color:#08140F; }
  .btn-ghost{ background:var(--panel); border:1px solid var(--line) !important; color:var(--text); }
  .btn-ghost .hero-btn-ic{ background:var(--signal-dim); color:var(--signal); }

  /* BANNERS - auto-advancing, swipeable carousel (shopping-app style),
     admin-controlled. Each card takes the full container width and
     snaps into place - scroll-snap gives native, buttery swipe gestures
     on mobile with zero JS needed for the touch interaction itself. */
  .mds-banner-strip{
    display:flex; flex-direction:row; overflow-x:auto; margin:0 0 4px;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
  }
  .mds-banner-strip::-webkit-scrollbar{ display:none; }
  .mds-banner-strip > a, .mds-banner-strip > .mds-banner-card{
    flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always;
  }
  .mds-banner-card{
    width:100%; border-radius:20px; overflow:hidden;
    border:1px solid rgba(33,230,161,0.22);
    background-color:var(--panel);
  }
  .mds-banner-dots{ display:flex; justify-content:center; gap:6px; margin:8px 0 12px; }
  .mds-banner-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .2s, width .2s; }
  .mds-banner-dot.active{ background:var(--signal); width:16px; border-radius:3px; }
  .mds-banner-media{ position:relative; }
  .mds-banner-media img{ width:100%; height:auto; display:block; }
  .mds-banner-caption{ padding:2px 12px; font-weight:800; font-size:16px; color:var(--text); line-height:1.2; }
  .mds-banner-caption.align-left{ text-align:left; }
  .mds-banner-caption.align-center{ text-align:center; }
  .mds-banner-caption.align-right{ text-align:right; }
  /* Middle-* positions only: an overlay badge on top of the image itself. Top/Bottom never overlay - they're separate caption blocks above/below. */
  .mds-banner-title{
    position:absolute; color:#fff; font-weight:800; font-size:16px;
    padding:6px 12px; border-radius:8px; text-shadow:0 1px 3px rgba(0,0,0,.4); max-width:calc(100% - 24px);
  }
  .mds-banner-title.pos-middle-left{ top:50%; left:10px; transform:translateY(-50%); }
  .mds-banner-title.pos-middle-center{ top:50%; left:50%; transform:translate(-50%,-50%); }
  .mds-banner-title.pos-middle-right{ top:50%; right:10px; transform:translateY(-50%); }

  /* ANNOUNCEMENT BAR - continuously scrolling strip pinned above the header */
  .mds-marquee{
    flex-shrink:0; overflow:hidden; white-space:nowrap;
    padding:4px 0; font-size:11px; font-weight:700; color:#fff;
  }
  .mds-marquee-track{
    display:inline-block; padding-left:100%;
    animation-name:mds-marquee-scroll; animation-timing-function:linear; animation-iteration-count:infinite;
  }
  .mds-marquee-track.speed-slow{ animation-duration:26s; }
  .mds-marquee-track.speed-normal{ animation-duration:16s; }
  .mds-marquee-track.speed-fast{ animation-duration:9s; }
  @keyframes mds-sademoji-wobble{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(-5px) rotate(-8deg); }
    40% { transform: translateY(1px) rotate(6deg); }
    60% { transform: translateY(-3px) rotate(-4deg); }
    80% { transform: translateY(0) rotate(3deg); }
  }
  @keyframes mds-check-pop{
    0% { transform: scale(0); opacity:0; }
    60% { transform: scale(1.25); opacity:1; }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); opacity:1; }
  }
  @keyframes mds-marquee-scroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-100%); }
  }

  .quick-cats{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
  .qc{
    flex:0 0 auto; width:76px; display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:10.5px; color:var(--muted); text-align:center; cursor:pointer; font-weight:600;
  }
  .qc .ic{ width:52px; height:52px; border-radius:16px; background:var(--panel); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:20px; }

  .order-mini{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
    display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
  }
  .order-mini .t{ font-size:12.5px; font-weight:700; }
  .order-mini .id{ font-size:10.5px; color:var(--muted); margin-top:2px; }
  .status-dot{ font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; }
  .st-processing{ background:var(--gold-dim); color:var(--gold); }
  .st-partial{ background:rgba(168,85,247,0.15); color:#a855f7; }
  .st-pending{ background:var(--accent-dim); color:var(--accent); }
  .st-completed{ background:var(--signal-dim); color:var(--signal); }
  .st-cancelled{ background:var(--alert-dim); color:var(--alert); }
  .st-refunded{ background:var(--signal-dim); color:var(--signal); }

  /* SHOP */
  .cat-tabs{ display:flex; gap:8px; overflow-x:auto; margin-bottom:16px; }
  .cat-tab{ flex:0 0 auto; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700;
    background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer; }
  .cat-tab.active{ background:var(--signal-dim); border-color:rgba(33,230,161,.4); color:var(--signal); }

  .prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .prod-card{
    background:var(--panel-2); border:1px solid #333a47; border-radius:14px; padding:14px;
    box-shadow:0 4px 14px rgba(0,0,0,0.35); position:relative;
  }
  .prod-card .discount-badge{ position:absolute; top:-8px; right:-6px; background:linear-gradient(135deg,#ffb020,#ff7a1a); color:#2b1400;
    font-size:10.5px; font-weight:900; padding:4px 8px; border-radius:8px; box-shadow:0 3px 8px rgba(255,122,26,.45); letter-spacing:.2px; }
  .prod-card .extraqty-badge{ position:absolute; top:-8px; left:-6px; background:linear-gradient(135deg,#7c5cff,#5b8bff); color:#fff;
    font-size:10.5px; font-weight:900; padding:4px 8px; border-radius:8px; box-shadow:0 3px 8px rgba(91,139,255,.45); letter-spacing:.2px; }
  .prod-card .freelikes-ribbon{ margin-top:8px; text-align:center; background:linear-gradient(135deg,#a855f7,#6366f1); color:#fff;
    font-size:10px; font-weight:900; padding:5px 8px; border-radius:8px; letter-spacing:.3px; box-shadow:0 3px 8px rgba(99,102,241,.35); }
  .prod-card .title{ font-size:14px; font-weight:800; line-height:1.35; margin-bottom:8px; }
  .prod-card .price{ font-size:15px; font-weight:800; color:var(--signal); }
  .prod-card .old{ font-size:10.5px; color:var(--muted); text-decoration:line-through; margin-left:4px; }
  .prod-card .desc{ font-size:10px; color:var(--muted); line-height:1.4; margin:4px 0 6px; font-style:italic; }
  .prod-card button{ width:100%; margin-top:10px; background:var(--signal); color:#08140F; border:none;
    border-radius:9px; padding:9px 0; font-weight:800; font-size:11.5px; cursor:pointer; }

  /* PROMOTE PRODUCTS - single full-width spotlight card, shown at the
     BOTTOM of the category's product list (after the normal grid, not
     above it). Split EXACTLY 50/50 like the reference product cards:
     product details on the LEFT (same title/price/badge styling as
     .prod-card), urgency + countdown on the RIGHT, then one shared green
     Buy Now button below. The countdown pill always glows/pulses at full
     intensity - no separate "extra urgent" tier. */
  .mds-promo-card{
    grid-column:1/-1; margin-top:22px; margin-bottom:36px;
    border:1.5px solid #3b82f6; box-shadow:0 4px 16px rgba(59,130,246,.25);
  }
  /* Centered ribbon straddling the top edge - the highest-priority badge on
     the card (deliberately placed first in the markup, before the % OFF
     corner badge) since this is being promoted specifically as the lowest
     price, not just a discount. Gold/amber so it reads as a distinct
     "best value" signal rather than competing with the orange % OFF badge. */
  .mds-promo-card .mds-promo-lowest{
    position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:2;
    background:linear-gradient(135deg,#ffd23f,#ffb020); color:#3b1f00;
    font-size:10.5px; font-weight:900; letter-spacing:.3px; white-space:nowrap;
    padding:5px 14px; border-radius:999px; box-shadow:0 3px 12px rgba(255,178,32,.6);
  }
  .mds-promo-card .mds-promo-tag{
    display:inline-block; background:linear-gradient(135deg,#a855f7,#6366f1); color:#fff;
    font-size:9.5px; font-weight:900; letter-spacing:.4px; padding:3px 9px; border-radius:999px; margin-bottom:10px;
  }
  .mds-promo-card .mds-promo-cols{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
  .mds-promo-card .mds-promo-left{ flex:1 1 50%; max-width:50%; min-width:0; }
  .mds-promo-card .mds-promo-right{
    flex:1 1 50%; max-width:50%; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding-left:10px; border-left:1px solid var(--line); text-align:center;
  }
  .mds-promo-card .mds-promo-cta{ font-size:11.5px; font-weight:800; color:#fff; line-height:1.3; }
  .mds-promo-card .mds-promo-cd-tag{ font-size:10px; font-weight:800; color:#ff8a8c; text-transform:uppercase; letter-spacing:.3px; }
  .mds-promo-card .mds-promo-pill{
    display:inline-block; background:linear-gradient(135deg,#e0292b,#ff4d4f); border-radius:999px;
    padding:7px 18px; margin:2px 0; box-shadow:0 0 14px rgba(255,77,79,.85); animation:mds-promo-glow 1s ease-in-out infinite;
  }
  .mds-promo-card .mds-promo-cd-time{ font-size:16px; font-weight:900; color:#fff; letter-spacing:.5px; white-space:nowrap; }
  .mds-promo-card .mds-promo-hurry{ font-size:10.5px; font-weight:800; color:#ff9e70; line-height:1.3; }

  .mds-promo-card .mds-promo-hot-price{
    font-size:19px; text-shadow:0 0 10px rgba(33,230,161,.6); animation:mds-promo-price-pulse 1.8s ease-in-out infinite;
  }

  @keyframes mds-promo-glow{
    0%, 100%{ box-shadow:0 0 12px rgba(255,77,79,.6); transform:scale(1); }
    50%{ box-shadow:0 0 22px rgba(255,77,79,1); transform:scale(1.05); }
  }
  @keyframes mds-promo-price-pulse{
    0%, 100%{ text-shadow:0 0 8px rgba(33,230,161,.5); }
    50%{ text-shadow:0 0 16px rgba(33,230,161,.95); }
  }

  /* ORDERS */
  .filter-row{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; justify-content:space-between; }
  .filter-chip{ flex:0 0 auto; padding:7px 10px; border-radius:999px; font-size:11.5px; font-weight:700;
    background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer; white-space:nowrap; }
  .filter-chip.active{ background:var(--signal-dim); color:var(--signal); border-color:var(--signal); }

  .order-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; box-shadow:0 4px 14px rgba(0,0,0,0.3); }
  .order-card.freelikes-order-card{ position:relative; background:linear-gradient(160deg, rgba(168,85,247,.14), rgba(99,102,241,.08)), var(--panel); border:1px solid rgba(168,85,247,.4); box-shadow:0 4px 18px rgba(147,51,234,.25); }
  .freelikes-order-ribbon{ position:absolute; top:-9px; left:14px; background:linear-gradient(135deg,#a855f7,#6366f1); color:#fff; font-size:9.5px; font-weight:900; padding:3px 10px; border-radius:8px; letter-spacing:.3px; box-shadow:0 3px 8px rgba(99,102,241,.4); }
  .order-top{ display:flex; justify-content:space-between; align-items:flex-start; }
  .order-title{ font-weight:700; font-size:13px; }
  .order-id{ color:var(--text); font-size:12.5px; font-weight:700; margin-top:3px; opacity:.92; }
  .order-amt{ font-weight:800; font-size:13px; }
  .rail{ display:flex; margin-top:11px; }
  .rail .seg{ flex:1; height:3px; background:var(--line); border-radius:2px; margin:0 3px; }
  .rail .seg.done{ background:var(--accent); }
  .rail .seg.done.complete{ background:var(--signal); }

  /* WALLET */
  .wallet-hero{ background:linear-gradient(135deg,#12211C,#0F1720); border:1px solid rgba(33,230,161,.22);
    border-radius:20px; padding:22px; text-align:center; }
  .wallet-hero .label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
  .wallet-hero .big{ font-size:38px; font-weight:800; margin:8px 0 18px; }
  .amt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
  .amt-opt{ padding:12px 0; border-radius:11px; background:var(--panel); border:1px solid var(--line);
    text-align:center; font-weight:700; font-size:13px; cursor:pointer; }
  .amt-opt.active{ border-color:var(--signal); color:var(--signal); background:var(--signal-dim); }
  .pay-btn{ width:100%; background:var(--signal); color:#08140F; border:none; border-radius:12px;
    padding:13px 0; font-weight:800; font-size:13.5px; cursor:pointer; }

  .txn{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
  .txn:last-child{ border-bottom:none; }
  .txn .t{ font-size:12.5px; font-weight:700; }
  .txn .d{ font-size:10.5px; color:var(--muted); margin-top:2px; }
  .txn .v.credit{ color:var(--signal); font-weight:800; }
  .txn .v.debit{ color:var(--alert); font-weight:800; }
  .txn .v.pending{ color:var(--gold); font-weight:800; }
  .txn .v.rejected{ color:var(--alert); font-weight:800; }

  /* ACCOUNT */
  .profile-row{ display:flex; align-items:center; gap:12px; padding:6px 2px 20px; }
  .profile-row .av{ width:54px; height:54px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
  .profile-row .name{ font-weight:800; font-size:15px; }
  .profile-row .email{ font-size:11.5px; color:var(--muted); margin-top:2px; }

  .menu-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 4px;
    border-bottom:1px solid var(--line); cursor:pointer; }
  .menu-item .left{ display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; }
  .menu-item .ic{ width:32px; height:32px; border-radius:9px; background:var(--panel); display:flex;
    align-items:center; justify-content:center; font-size:14px; }
  .menu-item .chev{ color:var(--muted); }
  .menu-item.danger .left{ color:var(--alert); }

  /* TOGGLES */
  .toggle-row{ display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
  .toggle-row:last-child{ border-bottom:none; }
  .toggle-row .t{ font-size:13px; font-weight:700; }
  .toggle-row .d{ font-size:11px; color:var(--muted); margin-top:2px; }
  .switch{ width:42px; height:24px; border-radius:999px; background:var(--line); position:relative; cursor:pointer; flex-shrink:0; transition:.2s; }
  .switch .knob{ width:18px; height:18px; border-radius:50%; background:var(--text); position:absolute; top:3px; left:3px; transition:.2s; }
  .switch.on{ background:var(--signal); }
  .switch.on .knob{ left:21px; background:#08140F; }

  /* FORM INPUTS */
  .field{ margin-bottom:14px; text-align:left; }
  .field label{ font-size:11px; color:var(--muted); font-weight:700; display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
  .field input{ width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:11px 12px; color:var(--text); font-size:13.5px; font-family:'Manrope',sans-serif; }
  .field input:focus{ outline:none; border-color:var(--signal); }

  .pm-card{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); text-align:left; }
  .pm-card:last-child{ border-bottom:none; }
  .pm-card .left{ display:flex; align-items:center; gap:12px; }
  .pm-card .ic{ width:38px; height:38px; border-radius:10px; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:16px; }
  .pm-card .t{ font-size:13px; font-weight:700; }
  .pm-card .d{ font-size:11px; color:var(--muted); margin-top:2px; }
  .pm-card .tag{ font-size:9.5px; font-weight:800; color:var(--signal); background:var(--signal-dim); padding:3px 8px; border-radius:999px; }

  .support-opt{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); text-align:left; cursor:pointer; }
  .support-opt:last-child{ border-bottom:none; }
  .support-opt .ic{ width:38px; height:38px; border-radius:10px; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:16px; }
  .support-opt .t{ font-size:13px; font-weight:700; }
  .support-opt .d{ font-size:11px; color:var(--muted); margin-top:1px; }

  .policy-text{ text-align:left; font-size:12.5px; color:var(--muted); line-height:1.6; max-height:280px; overflow-y:auto; margin-bottom:16px; }
  .policy-text b{ color:var(--text); }

  /* BOTTOM NAV - a normal flex child at the end of .phone, pinned by the
     flex layout itself rather than position:absolute, so it can never
     detach from the bottom regardless of mobile browser quirks. */
  .bottom-nav{
    flex-shrink:0; height:66px;
    background:var(--panel); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); display:flex; z-index:40;
  }
  .mds-chat-fab{
    position:absolute; right:16px; bottom:82px; z-index:50;
    width:52px; height:52px; border-radius:50%;
    background:var(--signal); color:#08140F;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; box-shadow:0 8px 20px rgba(0,0,0,0.35);
  }
  .mds-chat-fab-badge{
    position:absolute; top:-4px; right:-4px; min-width:20px; height:20px;
    background:var(--alert); color:#fff; border-radius:10px;
    font-size:11px; font-weight:800; align-items:center; justify-content:center;
    padding:0 5px; border:2px solid var(--bg);
  }
  .nav-btn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    cursor:pointer; color:var(--muted); font-size:9.5px; font-weight:700; }
  .nav-btn .ic{ font-size:18px; }
  .nav-btn.active{ color:var(--signal); }

  /* SHEET */
  .sheet-overlay{ position:absolute; inset:0; background:rgba(6,7,9,0.65); display:none;
    align-items:flex-end; z-index:80; }
  .sheet-overlay.show{ display:flex; }
  .sheet{ width:100%; background:var(--panel-2); border-top:1px solid var(--line);
    border-radius:22px 22px 0 0; padding:20px 18px 26px; }
  .sheet .handle{ width:36px; height:4px; background:var(--line); border-radius:3px; margin:0 auto 16px; }
  .sheet h3{ font-size:15px; margin-bottom:4px; }
  .sheet .row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .sheet .row span:first-child{ color:var(--muted); }
  .sheet .row.total span{ font-weight:800; color:var(--text); }
  .sheet-actions{ display:flex; gap:10px; margin-top:16px; }
  .sheet-actions button{ flex:1; padding:12px 0; border-radius:11px; font-weight:800; font-size:13px; border:none; cursor:pointer; }

  .toast{ position:absolute; bottom:82px; left:50%; transform:translateX(-50%) translateY(14px);
    background:var(--signal); color:#08140F; font-weight:800; font-size:12.5px; padding:10px 16px;
    border-radius:10px; opacity:0; transition:.25s ease; z-index:200; pointer-events:none; white-space:nowrap; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* AUTH (now a normal screen you navigate to from Landing, not an overlay) */
  .auth-overlay{ min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:32px 26px; position:relative; }
  .auth-back{ position:absolute; top:16px; left:16px; background:var(--panel); border:1px solid var(--line); color:var(--text);
    width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; z-index:10; }
  .auth-logo{ text-align:center; margin-bottom:30px; }
  .auth-logo .rocket{ font-size:36px; }
  .auth-logo h2{ font-size:18px; font-weight:800; margin-top:10px; }
  .auth-logo p{ font-size:12px; color:var(--muted); margin-top:4px; }
  .auth-field{ margin-bottom:14px; }
  .auth-field label{ font-size:11px; color:var(--muted); font-weight:700; display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
  .auth-field input{ width:100%; background:var(--bg); border:1px solid #454f60; border-radius:10px;
    padding:12px; color:var(--text); font-size:13.5px; font-family:'Manrope',sans-serif; }
  .auth-field input:focus{ outline:none; border-color:var(--signal); }
  .auth-btn{ width:100%; background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)), var(--signal); color:#fff; border:none; border-radius:12px;
    padding:13px 0; font-weight:800; font-size:13.5px; cursor:pointer; margin-top:6px; }
  .auth-switch{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:20px; }
  .auth-switch b{ color:var(--signal); cursor:pointer; font-weight:800; }

  /* LANDING PAGE */
  .land-header{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; background:rgba(14,16,19,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  .land-header .brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; }
  .land-header .actions{ display:flex; gap:8px; }
  .btn-outline{ padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:700; background:transparent; border:1px solid var(--line); color:var(--text); cursor:pointer; }
  .btn-solid{ padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:700; background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)), var(--signal); color:#fff; border:none; cursor:pointer; }

  .hero{ padding:36px 22px 30px; text-align:center; background:radial-gradient(circle at 50% 0%, #12211C 0%, var(--bg) 70%); }
  .hero .badge{ display:inline-flex; align-items:center; gap:6px; background:var(--signal-dim); color:var(--signal);
    font-size:11px; font-weight:800; padding:6px 12px; border-radius:999px; margin-bottom:16px; }
  .hero h1{ font-size:25px; font-weight:800; line-height:1.25; margin-bottom:10px; }
  .hero p{ font-size:13.5px; color:var(--muted); max-width:320px; margin:0 auto 22px; line-height:1.6; }
  .hero-cta{ display:flex; gap:10px; justify-content:center; }
  .btn-hero-primary{ padding:13px 22px; border-radius:12px; font-size:13.5px; font-weight:800; background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)), var(--signal); color:#fff; border:none; cursor:pointer; }
  .btn-hero-secondary{ padding:13px 22px; border-radius:12px; font-size:13.5px; font-weight:800; background:transparent; color:var(--text); border:1px solid var(--line); cursor:pointer; }

  .stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:0 0 8px; }
  .stat-cell{ background:var(--bg); padding:18px 8px; text-align:center; }
  .stat-cell .v{ font-size:18px; font-weight:800; color:var(--signal); }
  .stat-cell .l{ font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-top:4px; }

  .land-section{ padding:28px 20px; }
  .section-head{ text-align:center; margin-bottom:20px; }
  .section-head h2{ font-size:18px; font-weight:800; }
  .section-head p{ font-size:12.5px; color:var(--muted); margin-top:6px; }

  .step{ display:flex; gap:14px; margin-bottom:20px; }
  .step .num-badge{ width:36px; height:36px; border-radius:10px; background:var(--signal-dim); color:var(--signal);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }
  .step .t{ font-weight:700; font-size:13.5px; margin-bottom:3px; }
  .step .d{ font-size:12px; color:var(--muted); line-height:1.5; }

  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .service-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 8px; text-align:center; }
  .service-card .ic{ font-size:24px; margin-bottom:8px; }
  .service-card .t{ font-size:12px; font-weight:700; }
  .service-card .d{ font-size:9.5px; color:var(--muted); margin-top:3px; }

  .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .why-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; }
  .why-card .ic{ font-size:20px; margin-bottom:8px; }
  .why-card .t{ font-size:12.5px; font-weight:700; margin-bottom:4px; }
  .why-card .d{ font-size:11px; color:var(--muted); line-height:1.5; }

  .footer-cta{ background:linear-gradient(135deg,#12211C,#0F1720); border-top:1px solid var(--line); padding:30px 22px; text-align:center; }
  .footer-cta h3{ font-size:16px; font-weight:800; margin-bottom:8px; }
  .footer-cta p{ font-size:12px; color:var(--muted); margin-bottom:18px; }

  .land-footer{ padding:20px 22px 30px; text-align:center; border-top:1px solid var(--line); }
  .land-footer .links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
  .land-footer .links a{ font-size:11px; color:var(--muted); text-decoration:none; cursor:pointer; }
  .land-footer .copy{ font-size:10.5px; color:#565b64; }

  .mds-lowbalance-backdrop{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .mds-sademoji{ display:inline-block; font-size:40px; animation:mds-sademoji-wobble 1.6s ease-in-out infinite; }
  .mds-lb-balance-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--alert-dim); color:var(--alert); border:1px solid rgba(255,93,93,.35); border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:800; margin:10px 0 16px; }
  .mds-checkmark-circle{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--signal); color:#08140F; font-size:32px; font-weight:900; animation:mds-check-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
  .mds-success-balance-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--signal-dim); color:var(--signal); border:1px solid rgba(33,230,161,.35); border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:800; margin:10px 0 16px; }