*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--blue-900: #0d1f3c;--blue-800: #112a52;--blue-700: #1a3a6e;--blue-600: #1e4d9a;--blue-500: #2563c8;--blue-400: #4080e0;--blue-50: #eff6ff;--bg-0: #f4f6fb;--bg-1: #ffffff;--bg-2: #e8eef8;--bg-card: #ffffff;--border: rgba(26,58,110,.1);--border-hi: rgba(26,58,110,.22);--accent: #1e4d9a;--accent-dim: #112a52;--text-1: #0d1f3c;--text-2: #3a5480;--text-3: #7a96c0;--red: #dc2626;--green: #16a34a;--font-head: "DM Sans", sans-serif;--font-body: "DM Sans", sans-serif;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 24px;--nav-h: 68px;--topbar-h: 62px;--safe-top: env(safe-area-inset-top, 0px);--safe-bot: env(safe-area-inset-bottom, 0px)}html{font-size:16px}body{font-family:var(--font-body);background:var(--bg-0);color:var(--text-1);min-height:100dvh;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#root{max-width:1200px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-0)}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 14px 14px}@media (min-width: 600px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 900px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 24px 24px}}@media (min-width: 1100px){.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.text-xs{font-size:11px}.text-sm{font-size:13px}.text-md{font-size:15px}.text-lg{font-size:18px}.text-xl{font-size:22px}.text-2xl{font-size:28px}.fw-500{font-weight:500}.fw-700{font-weight:700}.fw-800{font-weight:800}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}.brand-chip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap}.brand-chip.erl-normal{background:#eff6ff;color:#1e40af;border:.5px solid #93c5fd}.brand-chip.erl-dec{background:#fdf4ff;color:#7e22ce;border:.5px solid #d8b4fe}.brand-chip.sl{background:#f0fdf4;color:#15803d;border:.5px solid #86efac}.brand-chip.dt{background:#fffbeb;color:#b45309;border:.5px solid #fcd34d}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;padding:11px 22px;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent;letter-spacing:.01em}.btn-primary{background:var(--accent);color:#fff}.btn-primary:active{transform:scale(.97);background:var(--accent-dim)}.btn-ghost{background:var(--bg-2);color:var(--text-1);border:.5px solid var(--border-hi)}.btn-ghost:active{transform:scale(.97)}.btn-danger{background:var(--red);color:#fff}.btn-icon{background:none;border:none;cursor:pointer;color:var(--text-2);padding:8px;border-radius:var(--radius-sm);transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}.btn-icon:hover{color:var(--accent);background:var(--blue-50)}.card{background:var(--bg-card);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 4px #1a3a6e0f}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:fadeUp .2s ease-out}.igv-toggle{display:flex;background:var(--bg-2);border-radius:var(--radius-md);overflow:hidden;border:.5px solid var(--border-hi)}.igv-toggle button{flex:1;padding:7px 12px;border:none;background:none;font-size:12px;font-weight:700;color:var(--text-3);cursor:pointer;transition:all .15s}.igv-toggle button.active{background:var(--accent);color:#fff}.qty-input{width:52px;height:42px;text-align:center;background:var(--bg-0);border:none;outline:none;font-size:16px;font-weight:700;color:var(--text-1);font-family:var(--font-body)}.qty-input:focus{background:var(--blue-50)}.barcode-wrap{background:#fff;border:.5px solid var(--border);border-radius:var(--radius-md);padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px}.barcode-wrap img{max-width:100%;height:auto;image-rendering:crisp-edges}.offline-banner{background:#fef3c7;border-bottom:1px solid #fcd34d;padding:8px 16px;text-align:center;font-size:13px;font-weight:600;color:#92400e;display:flex;align-items:center;justify-content:center;gap:6px}@media (min-width: 900px){.page-pad{padding-left:24px;padding-right:24px}#root{box-shadow:0 0 60px #1a3a6e14}}