:root { --navy:#0e2a47; --blue:#1496ac; --gold:#dcc187; --red:#c0392b; --muted:#7b8794; --line:#e6ebf1; --bg:#f1f6fb; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:#16242f; font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.v-top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:.5rem; background:var(--navy); color:#fff; padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top)); }
.v-brand { font-weight:700; letter-spacing:.3px; }
.v-spacer { flex:1; }
.v-net { font-size:14px; }
.v-net.on { color:#6fe0a6; } .v-net.off { color:#ff8f8f; }
.v-cola { background:#ffc857; color:#1a1a1a; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; }
.v-main { max-width:640px; margin:0 auto; padding:12px 12px 40px; }
.v-loading { color:var(--muted); text-align:center; padding:40px 0; }
.v-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 3px 12px rgba(14,42,71,.06); margin-bottom:12px; }
.v-card h2,.v-card h3 { margin:0 0 8px; color:var(--navy); }
.v-muted { color:var(--muted); font-size:13px; }
.v-row { display:flex; align-items:center; gap:.5rem; padding:6px 2px 12px; }
label { display:block; font-size:12px; color:var(--muted); margin:8px 0 3px; }
input { width:100%; padding:12px; border:1px solid #cdd8e6; border-radius:10px; font-size:16px; background:#fff; }
.v-search { margin-bottom:10px; }
.v-btn { width:100%; padding:13px; border:1px solid #cdd8e6; border-radius:10px; background:#fff; color:var(--navy); font-size:15px; font-weight:600; cursor:pointer; margin-top:10px; }
.v-btn:active { transform:translateY(1px); }
.v-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.v-sm { width:auto; padding:8px 12px; margin:0; font-size:13px; }
.v-cli { display:block; width:100%; text-align:left; margin:0 0 8px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:15px; cursor:pointer; }
.v-err { color:var(--red); font-size:13px; margin-top:8px; }
.v-prod { display:flex; align-items:center; gap:.6rem; padding:10px 0; border-bottom:1px solid #eef2f7; }
.v-pn { flex:1; } .v-pn b { display:block; } .v-pn .v-muted { font-size:12px; }
.v-qty { width:84px; text-align:right; padding:10px; }
.v-bar { position:sticky; bottom:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:0 -3px 14px rgba(14,42,71,.08); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:calc(8px + env(safe-area-inset-bottom)); }
.v-bar > div:first-child { flex:1; }
.v-bar .v-btn { width:auto; margin:0; padding:12px 20px; }
.v-ok { text-align:center; } .v-check { font-size:44px; } .v-ok .v-btn { max-width:320px; margin:12px auto 0; }