:root{
    --bg:#f2f1ea;
    --card:#ffffff;
    --primary:#2e9e5b;
    --primary-dark:#1d6b3f;
    --text:#14261a;
    --text-soft:#5c6b60;
    --text-mute:#8a998e;
    --fill-soft:#f2f8f3;
    --fill-chip:#e7f6ec;
    --border:#e7ede9;
    --radius-lg:26px;
    --radius-md:20px;
    --radius-sm:14px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  html{overflow-x:hidden}
  body{
    margin:0;
    background:var(--bg);
    font-family:'Nunito',sans-serif;
    color:var(--text);
    -webkit-tap-highlight-color:transparent;
  }
  .app{
    max-width:460px;
    margin:0 auto;
    height:100vh;
    height:100dvh;
    height:calc(var(--app-vh, 1vh) * 100);
    background:var(--bg);
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .eyebrow{
    font:600 11px/1 'IBM Plex Mono',monospace;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-mute);
  }
  /* ---------- header ---------- */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px 10px;
  }
  .brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .brand-logo{height:60px;display:flex;align-items:center}
  .brand-logo svg{height:100%;width:auto;display:block}
  .brand-sub{font:600 10px/1.2 'Nunito',sans-serif;color:var(--text-mute)}
  .help-btn{
    width:38px;height:38px;border-radius:13px;background:var(--fill-soft);
    display:flex;align-items:center;justify-content:center;color:var(--primary);
    font:700 15px/1 'Nunito',sans-serif;border:none;cursor:pointer;
  }
  .back-btn{
    width:40px;height:40px;border-radius:14px;background:var(--fill-soft);
    display:flex;align-items:center;justify-content:center;color:var(--primary);
    font:700 17px/1 'Nunito',sans-serif;border:none;cursor:pointer;flex:0 0 auto;
  }
  /* ---------- catalog ---------- */
  .catalog-scroll{padding:0 14px 20px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .promo{
    background:var(--fill-soft);border-radius:18px;padding:12px 14px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-bottom:16px;
  }
  .promo-text{font:700 13px/1.35 'Nunito',sans-serif;color:var(--text)}
  .promo-badge{
    font:800 12px/1 'Nunito',sans-serif;color:var(--primary);background:#fff;
    border-radius:20px;padding:8px 12px;white-space:nowrap;
  }
  .cat-row{display:flex;align-items:center;gap:8px;padding:14px 4px 10px}
  .cat-title{font:800 15px/1 'Nunito',sans-serif;color:var(--text)}
  .cat-count{
    font:700 11px/1 'Nunito',sans-serif;color:var(--primary);background:var(--fill-chip);
    border-radius:20px;padding:4px 8px;
  }
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .card-slot{perspective:1200px;height:206px}
  .card{
    position:relative;width:100%;height:100%;
    transition:transform .5s cubic-bezier(.3,.8,.4,1);
    transform-style:preserve-3d;
  }
  .card.flipped{transform:rotateY(180deg)}
  .face{
    position:absolute;inset:0;backface-visibility:hidden;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
    box-shadow:0 3px 10px rgba(20,60,35,.05);overflow:hidden;
    display:flex;flex-direction:column;cursor:pointer;
  }
  .face.back{transform:rotateY(180deg);cursor:default;padding:10px 11px;overflow-y:auto}
  .thumb{
    height:70px;flex:0 0 auto;
    background:repeating-linear-gradient(135deg,#f0f5f1 0 6px,#e6eee8 6px 12px);
    display:flex;align-items:flex-end;padding:6px 8px;
  }
  .thumb span{font:600 8px/1.2 'Nunito',sans-serif;color:var(--text-mute)}
  .card-body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:6px;flex:1}
  .p-name{font:700 12px/1.3 'Nunito',sans-serif;color:var(--text)}
  .p-bottom{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between}
  .p-unit{font:600 10px/1 'Nunito',sans-serif;color:var(--text-mute)}
  .p-from{font:800 14px/1 'Nunito',sans-serif;color:var(--text)}
  .back-name{font:700 12px/1.3 'Nunito',sans-serif;margin-bottom:4px}
  .back-desc{font:600 9.5px/1.4 'Nunito',sans-serif;color:var(--text-soft);margin-bottom:8px}
  .counter{display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .counter button{
    width:26px;height:26px;border-radius:9px;border:1px solid var(--border);
    background:var(--fill-soft);color:var(--primary);font:800 14px/1 'Nunito',sans-serif;
    cursor:pointer;
  }
  .counter input{
    width:100%;text-align:center;border:1.5px solid var(--border);border-radius:9px;
    padding:5px 2px;font:800 12px/1 'Nunito',sans-serif;color:var(--text);
  }
  .tiers{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
  .tier-row{
    display:flex;justify-content:space-between;font:600 9px/1.4 'Nunito',sans-serif;
    color:var(--text-soft);padding:3px 6px;border-radius:8px;
  }
  .tier-row.active{background:var(--fill-chip);color:var(--primary-dark);font-weight:800}
  .hint{font:700 8.5px/1.3 'Nunito',sans-serif;color:var(--primary);min-height:22px}
  /* ---------- sticky cart bar ---------- */
  .cart-bar-wrap{
    flex-shrink:0;padding:12px 14px 16px;
    background:var(--bg);
  }
  .cart-bar{
    background:var(--primary);color:#fff;border-radius:var(--radius-lg);
    padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 8px 20px rgba(46,158,91,.3);border:none;width:100%;cursor:pointer;
    font-family:'Nunito',sans-serif;
  }
  .cart-bar span:first-child{font:800 14px/1 'Nunito',sans-serif}
  .cart-bar span:last-child{font:800 15px/1 'Nunito',sans-serif}
  /* ---------- checkout screen ---------- */
  .screen{display:none;flex-direction:column;flex:1 0 auto;height:100%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .screen.active{display:flex}
  #screen-catalog.active,#screen-checkout.active{overflow:hidden}
  .topbar{flex-shrink:0}
  .checkout-head{display:flex;align-items:center;gap:12px;padding:12px 16px 6px;flex-shrink:0}
  .checkout-title{font:800 18px/1 'Nunito',sans-serif}
  .checkout-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 20px;display:flex;flex-direction:column;gap:18px}
  .welcome-banner{
    background:var(--fill-chip);border-radius:18px;padding:13px 15px;
    font:700 12px/1.45 'Nunito',sans-serif;color:var(--primary-dark);display:none;
  }
  .field-label{font:700 12px/1 'Nunito',sans-serif;color:var(--text-soft);margin-bottom:8px}
  .phone-input{
    width:100%;background:var(--fill-soft);border:1.5px solid var(--border);border-radius:16px;
    padding:15px;font:800 16px/1 'Nunito',sans-serif;color:var(--text);
  }
  .phone-input:focus{border-color:var(--primary);outline:none}
  .method-list{display:flex;flex-direction:column;gap:9px}
  .method-row{
    background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:15px;
    display:flex;align-items:center;gap:12px;cursor:pointer;
  }
  .method-row.selected{background:var(--fill-soft);border-color:var(--primary)}
  .radio-dot{
    width:20px;height:20px;border-radius:50%;border:1.5px solid #cdd8d0;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
  }
  .method-row.selected .radio-dot{background:var(--primary);border-color:var(--primary);color:#fff;font:700 11px/1 'Nunito',sans-serif}
  .method-main{flex:1;font:800 14px/1 'Nunito',sans-serif;color:var(--text)}
  .method-note{font:700 11px/1.3 'Nunito',sans-serif;color:var(--text-mute)}
  .method-extra{
    margin-top:-6px;background:var(--fill-soft);border-radius:16px;padding:14px;
    display:none;flex-direction:column;gap:10px;
  }
  .method-extra.show{display:flex}
  .method-extra input,.method-extra textarea{
    width:100%;border:1.5px solid var(--border);border-radius:12px;padding:10px 12px;
    font:700 12px/1.3 'Nunito',sans-serif;color:var(--text);background:#fff;resize:none;
  }
  .pick-btn{
    background:var(--primary);color:#fff;border:none;border-radius:16px;padding:12px;
    font:800 13px/1 'Nunito',sans-serif;cursor:pointer;
  }
  .picked-summary{
    display:none;align-items:center;justify-content:space-between;background:var(--fill-chip);
    border-radius:14px;padding:11px 13px;font:700 11.5px/1.3 'Nunito',sans-serif;color:var(--primary-dark);
    margin-top:-6px;
  }
  .picked-summary.show{display:flex}
  .payer-toggle{display:flex;gap:8px;background:var(--fill-soft);border-radius:20px;padding:5px}
  .payer-opt{
    flex:1;padding:12px;text-align:center;border-radius:16px;cursor:pointer;
    font:700 14px/1 'Nunito',sans-serif;color:var(--text-soft);
  }
  .payer-opt.selected{background:#fff;color:var(--text);font-weight:800;box-shadow:0 2px 6px rgba(20,60,35,.08)}
  .checkout-footer{
    flex-shrink:0;padding:14px 16px 18px;background:#fff;box-shadow:0 -8px 20px rgba(20,60,35,.06);
  }
  .footer-total{display:flex;justify-content:space-between;font:700 13px/1 'Nunito',sans-serif;color:var(--text-soft);margin-bottom:10px}
  .footer-total b{color:var(--text);font-size:15px}
  .submit-btn{
    background:var(--primary);color:#fff;border:none;border-radius:26px;padding:17px;
    width:100%;text-align:center;font:800 15px/1 'Nunito',sans-serif;cursor:pointer;
    box-shadow:0 8px 20px rgba(46,158,91,.3);
  }
  /* ---------- modal ---------- */
  .modal-backdrop{
    position:fixed;inset:0;background:rgba(20,38,26,.45);display:none;
    align-items:flex-end;justify-content:center;z-index:20;
  }
  .modal-backdrop.show{display:flex}
  .modal{
    background:#fff;width:100%;max-width:460px;border-radius:26px 26px 0 0;
    padding:20px 18px 24px;max-height:80vh;overflow-y:auto;
  }
  .modal-title{font:800 16px/1 'Nunito',sans-serif;margin-bottom:14px}
  .pvz-item{
    border:1.5px solid var(--border);border-radius:16px;padding:13px;margin-bottom:9px;
    cursor:pointer;font:700 12.5px/1.4 'Nunito',sans-serif;color:var(--text);
  }
  .pvz-item b{display:block;font-size:11px;color:var(--text-mute);font-weight:700;margin-top:3px}
  .modal-close{
    margin-top:6px;width:100%;border:none;background:var(--fill-soft);color:var(--primary-dark);
    border-radius:14px;padding:12px;font:800 13px/1 'Nunito',sans-serif;cursor:pointer;
  }
  /* ---------- pay screen ---------- */
  .pay-box{
    margin:20px 16px;background:#fff;border:1px solid var(--border);border-radius:22px;
    padding:26px 20px;text-align:center;
  }
  .qr-placeholder{
    width:180px;height:180px;margin:0 auto 16px;border-radius:18px;background:var(--fill-soft);
    display:flex;align-items:center;justify-content:center;color:var(--primary);
    font:700 12px/1.4 'Nunito',sans-serif;padding:10px;
  }
  .pay-sum{font:800 22px/1 'Nunito',sans-serif;margin-bottom:6px}
  .pay-note{font:600 11.5px/1.4 'Nunito',sans-serif;color:var(--text-mute);margin-bottom:16px}
  .demo-tag{
    display:inline-block;font:700 9px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;
    text-transform:uppercase;color:#fff;background:#c98a2e;border-radius:20px;padding:5px 10px;margin-bottom:10px;
  }
  .upload-row{
    border:1.5px dashed var(--border);border-radius:16px;padding:16px;text-align:center;
    font:700 12px/1.4 'Nunito',sans-serif;color:var(--text-soft);cursor:pointer;
  }