:root{--bg:#0d0d0d;--card:#181818;--line:#2a2a2a;--text:#f2efe8;--mute:#9a958a;--gold:#c9a24a;--gold2:#e6c374;--ok:#4caf7d;--bad:#e5645a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom));padding-top:env(safe-area-inset-top)}
a{color:var(--gold2)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(13,13,13,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.18em;font-size:15px}.brand span{color:var(--gold)}
.pill{background:var(--gold);color:#111;border:0;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px}
.banner{margin:12px 16px 0;padding:12px 40px 12px 14px;background:var(--card);border:1px solid var(--gold);border-radius:12px;position:relative;font-size:14px}
.banner button{position:absolute;right:6px;top:4px;background:none;border:0;color:var(--mute);font-size:24px}
main{padding:16px;max-width:760px;margin:0 auto}
h1{font-size:22px;margin:4px 0 14px}h2{font-size:17px;margin:20px 0 8px}
.search{display:flex;gap:8px;margin-bottom:12px}
input,select,textarea{width:100%;background:#111;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit}
input:focus{outline:2px solid var(--gold);border-color:transparent}
label{display:block;font-size:13px;color:var(--mute);margin:12px 0 4px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:7px 14px;font-size:14px}
.chip.on{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}}
.prod{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.prod .img{aspect-ratio:1/1;background:#222 center/cover no-repeat}
.prod .body{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .name{font-size:14px;font-weight:600;line-height:1.25}
.price{font-weight:700}.price s{color:var(--mute);font-weight:400;margin-right:6px}.sale{color:var(--gold2)}
.btn{background:var(--gold);color:#111;border:0;border-radius:10px;padding:11px 14px;font-weight:700;font-size:15px;width:100%;text-align:center;display:block;text-decoration:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn[disabled]{opacity:.5}
.prod .btn{margin-top:auto;padding:9px;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center}
.mute{color:var(--mute);font-size:14px}
.status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#2a2a2a}
.status.processing{background:#2c3a52;color:#9cc2ff}.status.out-for-delivery{background:#4b3a14;color:var(--gold2)}.status.completed{background:#17382a;color:#7fd9a8}.status.on-hold{background:#3b2f1a;color:#e8b86a}
.steps{display:flex;margin:12px 0 4px}.steps div{flex:1;height:5px;background:var(--line);margin-right:4px;border-radius:3px}.steps div.on{background:var(--gold)}
.qty{display:flex;align-items:center;gap:10px}.qty button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#111;color:var(--text);font-size:18px}
.points{font-size:44px;font-weight:800;color:var(--gold2);line-height:1}
.vip{border-color:var(--gold);background:linear-gradient(135deg,#1c1709,#181818)}
.err{color:var(--bad);font-size:14px;margin:8px 0}
.empty{text-align:center;color:var(--mute);padding:36px 12px}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(13,13,13,.97);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabs a{flex:1;text-align:center;padding:9px 0 8px;color:var(--mute);text-decoration:none;font-size:11px;position:relative}
.tabs a i{display:block;font-style:normal;font-size:20px;line-height:1.2}
.tabs a.on{color:var(--gold2)}
.tabs b{position:absolute;top:4px;left:56%;background:var(--gold);color:#111;border-radius:999px;font-size:11px;min-width:18px;padding:1px 5px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));background:#fff;color:#111;border-radius:12px;padding:12px 14px;z-index:10;font-weight:600;text-align:center}
.spin{text-align:center;color:var(--mute);padding:40px}
.more{margin:16px 0}