:root{
  --navy:#122048; --navy-2:#1c3266; --gold:#f2a71b; --gold-dark:#d4900f;
  --bg:#f3f5fa; --surface:#ffffff; --border:#e3e7f0; --text:#14213d;
  --text-soft:#6b7385; --success:#1f9d6b; --success-bg:#e7f6ef;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1220; --surface:#161d30; --border:#2a3350; --text:#eef1f8;
    --text-soft:#9aa3ba; --success-bg:#123a2b;
  }
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:#e7e9f2;color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand{font-family:'Sora',sans-serif;}
.phone-stage{min-height:100%;display:flex;align-items:center;justify-content:center;}
#app{width:100%;max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;background:var(--bg);}
@media (min-width:640px){
  .phone-stage{padding:44px 20px;}
  #app{width:390px;height:844px;max-width:390px;border-radius:46px;box-shadow:0 0 0 10px #0b0f1a,0 0 0 12px #30364a,0 40px 70px rgba(10,14,30,.45);overflow-y:auto;}
}
.hidden{display:none !important;}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:36px;}
.brand-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--navy-2));display:flex;align-items:center;justify-content:center;font-size:20px;}
.brand{font-size:20px;font-weight:800;}
.brand span{color:var(--gold-dark);}
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 24px;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 24px;text-align:center;}
.login-card h1{font-size:22px;margin:0 0 10px;}
.login-card p{color:var(--text-soft);font-size:14.5px;line-height:1.5;margin:0 0 22px;}
.btn-primary{width:100%;padding:14px;border:none;border-radius:11px;background:var(--navy);color:#fff;font-size:15.5px;font-weight:700;font-family:'Sora',sans-serif;cursor:pointer;}
header.top{background:var(--navy);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;}
header.top .co{font-size:15px;font-weight:700;font-family:'Sora',sans-serif;}
header.top .sub{font-size:12px;color:#b8c2dd;margin-top:2px;}
.logout{background:rgba(255,255,255,.12);border:none;color:#fff;font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer;}
.tabs{display:flex;gap:6px;padding:12px 16px 0;background:var(--bg);}
.tab{flex:1;text-align:center;padding:10px 8px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--text-soft);cursor:pointer;border:1px solid transparent;}
.tab.active{background:var(--surface);color:var(--gold-dark);border-color:var(--border);}
.search-row{padding:12px 16px 4px;}
.search-row input{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:14.5px;}
.list{padding:6px 16px 120px;flex:1;overflow-y:auto;}
.empty-state{padding:60px 20px;text-align:center;color:var(--text-soft);}
.item{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--border);}
.thumb{width:38px;height:38px;border-radius:9px;flex-shrink:0;object-fit:cover;background:var(--border);}
.item-info{flex:1;min-width:0;}
.item-name{font-size:14px;font-weight:600;line-height:1.35;margin:0 0 3px;}
.item-meta{font-size:11.5px;color:var(--text-soft);display:flex;gap:6px;flex-wrap:wrap;}
.badge{background:var(--success-bg);color:var(--success);font-weight:600;padding:2px 6px;border-radius:5px;font-size:10.5px;}
.price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.price{font-size:13px;color:var(--text-soft);}
.stock{font-size:11px;font-weight:600;}
.stock-ok{color:var(--success);} .stock-low{color:var(--gold-dark);} .stock-out{color:#d64545;}
.qty-ctrl{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:9px;overflow:hidden;}
.qty-btn{width:30px;height:30px;border:none;background:var(--surface);color:var(--navy);font-size:16px;font-weight:700;cursor:pointer;}
.qty-val{width:30px;text-align:center;font-size:14px;font-weight:700;background:var(--bg);height:30px;line-height:30px;}
.cart-bar{position:sticky;bottom:0;background:var(--navy);color:#fff;padding:14px 18px;display:none;align-items:center;justify-content:space-between;border-radius:16px 16px 0 0;}
.cart-bar .s{font-size:16px;font-weight:700;font-family:'Sora',sans-serif;}
.cart-bar button{background:var(--gold);color:#3a2a00;border:none;padding:11px 20px;border-radius:10px;font-weight:700;cursor:pointer;}
.error-banner{background:#fdeaea;color:#a02c2c;padding:10px 16px;font-size:13px;}