/* ════════════════════════════════
   HEADER
════════════════════════════════ */
header{
  height:var(--header-h);
  background:var(--surface);
  padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--border);
}
.logo{
  display:flex; align-items:center; gap:8px;
  font-family:'Playfair Display',serif;
  font-size:22px; font-weight:800; color:var(--ink);
}
.logo-mark{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
}
.logo em{ color:var(--purple); font-style:normal; }
.header-right{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:36px; height:36px; border-radius:10px;
  background:transparent; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:background .15s, border-color .15s;
}
.icon-btn svg{ width:18px; height:18px; stroke:var(--ink2); fill:none; stroke-width:1.8; }
.cart-badge{
  position:absolute; top:-5px; right:-5px;
  background:var(--purple); color:#fff;
  font-size:9px; font-weight:500;
  width:17px; height:17px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  border:2px solid var(--surface);
}
.cart-badge.show{ display:flex; }
.avatar-btn{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  color:#fff; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  border:none; position:relative;
}
.sync-indicator{
  width:6px; height:6px; border-radius:50%; background:#10B981;
  position:absolute; bottom:2px; right:2px;
  border:1.5px solid var(--surface);
}
.sync-indicator.loading{ background:var(--gold); animation:pulse 1s infinite; }
.sync-indicator.error{ background:var(--red); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ════════════════════════════════
   BOTTOM NAV
════════════════════════════════ */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  background:var(--surface);
  border-top:1px solid var(--border);
  display:flex; z-index:200;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:10px 4px 8px; border:none; background:none;
  font-size:10px; font-weight:500; color:var(--muted2); gap:3px;
  transition:color .2s; position:relative;
}
.nav-item svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .2s; }
.nav-item.active{ color:var(--purple); }
.nav-item.active svg{ transform:scale(1.12); }
.nav-item.active::after{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:32px; height:2px; background:var(--purple); border-radius:0 0 3px 3px;
}
.nav-sell-btn{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:4px; border:none; background:none; cursor:pointer;
}
.nav-sell-circle{
  width:48px; height:48px; border-radius:15px;
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(107,33,232,0.45);
  margin-top:-16px; border:3px solid var(--surface);
  transition:transform .15s, box-shadow .15s;
}
.nav-sell-circle svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.2; }

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 20px; border-radius:var(--r);font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
  cursor:pointer; border:none;
  transition:transform .14s, box-shadow .14s, opacity .14s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-primary{ background:var(--purple); color:#fff; box-shadow:0 4px 14px rgba(107,33,232,0.3); }
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 4px 14px rgba(212,160,23,0.3); }
.btn-outline{ background:transparent; color:var(--purple); border:1.5px solid var(--border2); }
.btn-outline:hover{ background:var(--purple-pale); }
.btn-ghost{ background:transparent; color:var(--muted); border:1.5px solid var(--border); }
.btn-ghost:hover{ background:var(--bg2); }
.btn-green{ background:var(--green); color:#fff; }
.btn-danger{ background:var(--red-pale); color:var(--red); }
.btn-sm{ padding:7px 13px; font-size:12px; border-radius:var(--r-sm); }
.btn-xs{ padding:5px 10px; font-size:11px; border-radius:8px; }
.btn-full{ width:100%; }

/* ════════════════════════════════
   CHIPS
════════════════════════════════ */
.chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.chip-purple{ background:var(--purple-pale); color:var(--purple); }
.chip-gold{ background:var(--gold-pale); color:var(--gold); }
.chip-green{ background:var(--green-pale); color:var(--green); }
.chip-red{ background:var(--red-pale); color:var(--red); }
.chip-orange{ background:var(--orange-pale); color:var(--orange); }

/* ════════════════════════════════
   FORMS
════════════════════════════════ */
.field{ margin-bottom:14px; }
label{
  font-size:11px; font-weight:600; color:var(--muted);
  display:block; margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.5px;
}
input,select,textarea{
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--r);
  font-size:14px; color:var(--ink); background:var(--surface);
  outline:none; transition:border-color .18s, box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(107,33,232,0.1);
}
input::placeholder,textarea::placeholder{ color:var(--muted2); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.input-with-prefix{
  display:flex; align-items:center;
  border:1.5px solid var(--border); border-radius:var(--r);
  background:var(--surface); overflow:hidden;
  transition:border-color .18s, box-shadow .18s;
}
.input-with-prefix:focus-within{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(107,33,232,0.1);
}
.input-prefix-label{
  padding:11px 12px 11px 14px; font-size:13px; font-weight:600;
  color:var(--muted); white-space:nowrap;
  border-right:1px solid var(--border); background:var(--bg);
}
.input-with-prefix input{ border:none; border-radius:0; padding:11px 12px; box-shadow:none; }
.required-note{ font-size:11px; color:var(--muted2); margin-bottom:16px; }

/* ════════════════════════════════
   MODALS
════════════════════════════════ */
.modal-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(13,11,26,0.6); z-index:500;
  align-items:flex-end; justify-content:center;
  backdrop-filter:blur(6px);
}
.modal-overlay.open{ display:flex; animation:overlayIn .2s ease; }
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  width:100%; max-width:480px;
  padding:24px 20px calc(32px + env(safe-area-inset-bottom));
  animation:sheetUp .28s cubic-bezier(0.34,1.56,0.64,1);
  max-height:92vh; overflow-y:auto;
}
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.modal-handle{
  width:32px; height:3px; background:var(--border2);
  border-radius:2px; margin:0 auto 22px;
}
.modal-title{
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:700; margin-bottom:18px;
}
.auth-tabs{
  display:flex; gap:4px; margin-bottom:20px;
  padding:4px; background:var(--bg); border-radius:var(--r);
}
.auth-tab{
  flex:1; padding:9px; text-align:center;
  font-weight:600; font-size:13px; cursor:pointer;
  color:var(--muted); border:none; background:transparent;
  border-radius:var(--r-sm); transition:all .18s;
}
.auth-tab.active{ background:var(--surface); color:var(--purple); box-shadow:var(--shadow); }

/* ════════════════════════════════
   TOAST
════════════════════════════════ */
.toast{
  position:fixed; top:calc(var(--header-h) + 10px);
  left:50%; transform:translateX(-50%) translateY(-8px);
  background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:100px;
  font-size:13px; font-weight:500;
  opacity:0; pointer-events:none; z-index:999;
  transition:all .24s cubic-bezier(0.34,1.2,0.64,1);
  white-space:nowrap; max-width:90vw;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success{ background:var(--green); }
.toast.error{ background:var(--red); }

/* ════════════════════════════════
   CATEGORIES
════════════════════════════════ */
.cats-scroll{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  margin-bottom:22px; scrollbar-width:none;
}
.cats-scroll::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex-shrink:0; padding:7px 14px; border-radius:100px;
  font-size:12px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--muted); transition:all .18s; white-space:nowrap;
}
.cat-pill.active,.cat-pill:hover{ background:var(--purple); color:#fff; border-color:var(--purple); }

/* ════════════════════════════════
   PAYMENT
════════════════════════════════ */
.pay-amount-box{
  background:var(--purple-pale); border-radius:var(--r-lg);
  padding:16px; text-align:center; margin:14px 0;
}
.pay-amount-lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.pay-amount-val{ font-family:'DM Mono',monospace; font-size:26px; font-weight:500; color:var(--purple); }
.pay-methods{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.pay-method{
  display:flex; align-items:center; gap:14px; padding:14px;
  border-radius:var(--r-lg); border:2px solid var(--border); cursor:pointer;
  transition:border-color .18s, background .18s;
}
.pay-method.selected{ border-color:var(--purple); background:var(--purple-pale); }
.pay-logo{
  width:48px; height:48px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:14px; font-weight:500; flex-shrink:0;
}
.pm-mc{ background:#E8501A; color:#fff; }
.pm-nc{ background:#003F91; color:#fff; }
.pay-method-name{ font-weight:700; font-size:14px; }
.pay-method-desc{ font-size:11px; color:var(--muted2); margin-top:2px; }
.pay-phone-box{
  background:var(--bg); border-radius:var(--r-lg);
  padding:18px; text-align:center; margin:14px 0;
  border:1px solid var(--border);
}
.pay-phone-num{ font-family:'DM Mono',monospace; font-size:24px; font-weight:500; color:var(--purple); letter-spacing:2px; }
.pay-phone-lbl{ font-size:12px; color:var(--muted); margin-top:4px; }
.pay-steps{
  background:var(--bg); border-radius:var(--r-lg);
  padding:14px; margin:12px 0; font-size:13px;
  color:var(--ink2); line-height:1.9; border:1px solid var(--border);
}
.pay-warning{
  background:var(--orange-pale); border-radius:var(--r);
  padding:10px 12px; font-size:12px; color:var(--orange);
  line-height:1.5; margin-bottom:14px;
}
/* ════════════════════════════════
   ORDERS
════════════════════════════════ */
.order-card{
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--border); padding:14px; margin-bottom:10px;
}
.order-card-top{ display:flex; justify-content:space-between; align-items:start; margin-bottom:6px; }
.order-card-name{ font-weight:700; font-size:14px; flex:1; margin-right:8px; line-height:1.3; }
.order-card-meta{ font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.5; }
.order-card-footer{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.order-card-price{ font-family:'DM Mono',monospace; font-size:15px; font-weight:500; color:var(--purple); }
.order-actions{ display:flex; gap:6px; }