:root {
      --bg-deep: #0a1018;
      --bg-surface: #131c29;
      --bg-card: #1a2533;
      --bg-elevated: #1e2a3a;
      --accent: #4884ff;
      --accent-hover: #5a90ff;
      --green: #3acf6b;
      --orange: #ff7b4a;
      --red: #ff4757;
      --yellow: #ffb347;
      --text-primary: #eef2f6;
      --text-muted: #8aa2c0;
      --text-dim: #7f8fa0;
      --border-subtle: #ffffff0c;
      --border-default: #ffffff10;
      --border-strong: #ffffff20;
      --border-accent: #4884ff40;
      --radius-sm: 14px;
      --radius-md: 18px;
      --radius-lg: 22px;
      --radius-pill: 60px;
      --shadow-card: 0 8px 24px rgba(0,0,0,0.4);
      --bottom-nav-height: 64px;
      font-family: 'Inter', sans-serif;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      background: var(--bg-deep);
      color: var(--text-primary);
      line-height: 1.5;
      min-height: 100vh;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
    }
    .app-layout { display:flex; min-height:100vh; }
    .sidebar-left {
      width: 260px; min-width: 260px;
      background: var(--bg-surface); border-right:1px solid var(--border-default);
      position: sticky; top:0; height:100vh; z-index:100;
      display:flex; flex-direction:column; overflow-y:auto; padding:16px 12px; gap:6px;
    }
    .logo { font-size:1.6rem; font-weight:700; padding:0 10px 16px; border-bottom:1px solid var(--border-subtle); margin-bottom:12px; }
    .logo .go { color:var(--green); } .logo .script { color:var(--accent); font-weight:300; }
    .nav-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); padding:12px 10px 4px; font-weight:500; }
    .nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text-primary); font-size:0.9rem; transition:0.15s; border:1px solid transparent; }
    .nav-item i { width:22px; text-align:center; color:var(--accent); }
    .nav-item:hover { background:#4884ff12; border-color:var(--border-accent); }
    .nav-item.active { background:#4884ff1a; border-color:var(--accent); font-weight:400; }
    .sidebar-stats { margin-top:auto; padding:12px; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border-default); }
    .sidebar-stats__row { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted); padding:4px 0; }
    .main-content { flex:1; display:flex; flex-direction:column; overflow-y:auto; }
    .main-content__inner { padding:20px 24px 40px; max-width:1300px; width:100%; margin:0 auto; }

    /* mobile header */
    .top-header-mobile {
      display:none; position:sticky; top:0; z-index:110;
      background: var(--bg-surface); border-bottom:1px solid var(--border-default);
      padding:10px 14px; gap:10px; align-items:center; backdrop-filter:blur(12px);
    }
    .hamburger { background:transparent; border:1px solid var(--border-strong); color:#fff; padding:8px 14px; border-radius:40px; font-size:0.9rem; display:flex; align-items:center; gap:6px; cursor:pointer; }
    .mobile-search { background:var(--bg-elevated); border-radius:60px; padding:7px 14px; display:flex; align-items:center; gap:8px; border:1px solid var(--border-default); flex:1; }
    .mobile-search i { color:var(--text-dim); }
    .mobile-search input { background:none; border:none; color:#fff; outline:none; width:100%; }

    .menu-backdrop { display:none; position:fixed; inset:0; z-index:280; background:rgba(5,10,18,0.75); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:0.25s; }
    .menu-backdrop.show { opacity:1; visibility:visible; }
    .mobile-menu-panel { display:none; position:fixed; left:0; top:0; bottom:0; width:300px; max-width:85vw; background:var(--bg-surface); z-index:290; transform:translateX(-105%); transition:0.3s cubic-bezier(0.32,0.72,0,1); flex-direction:column; overflow-y:auto; padding:16px 12px; gap:4px; border-right:1px solid var(--border-default); }
    .mobile-menu-panel.show { transform:translateX(0); }
    .menu-close-btn { align-self:flex-end; background:#ffffff12; border:none; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }

    .mobile-bottom-nav {
      display:none; position:fixed; bottom:0; left:0; right:0;
      background: #0f1722f0; backdrop-filter:blur(20px);
      border-top:1px solid var(--border-default); padding:6px 8px max(10px, env(safe-area-inset-bottom));
      justify-content:space-around; z-index:300;
    }
    .mobile-nav-item { display:flex; flex-direction:column; align-items:center; color:#9aabbf; text-decoration:none; font-size:0.6rem; gap:3px; }
    .mobile-nav-item i { font-size:1.25rem; }
    .mobile-nav-item.active { color:var(--accent); }

    .btn { padding:10px 20px; border-radius:30px; font-size:0.9rem; cursor:pointer; border:1px solid transparent; transition:0.2s; display:inline-flex; align-items:center; gap:8px; font-weight:400; background:transparent; color:#fff; }
    .btn-primary { background:var(--accent); border-color:var(--accent); }
    .btn-primary:hover { background:var(--accent-hover); }
    .btn-outline { border:1px solid var(--border-strong); }
    .btn-outline:hover { border-color:var(--accent); background:#4884ff10; }
    .btn-sm { padding:6px 12px; font-size:0.75rem; }
    .badge { padding:3px 10px; border-radius:20px; font-size:0.7rem; font-weight:500; }
    .badge-info { background:#4884ff20; color:var(--accent); }

    .cart-container { display:flex; gap:24px; flex-wrap:wrap; }
    .cart-items-section { flex:2; min-width:300px; }
    .cart-summary-section { flex:1; min-width:260px; position:sticky; top:20px; align-self:flex-start; }

    .cart-item { display:flex; align-items:center; gap:14px; background:var(--bg-card); border-radius:var(--radius-md); padding:16px; border:1px solid var(--border-default); margin-bottom:10px; }
    .cart-item-img { width:80px; height:80px; border-radius:var(--radius-sm); background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--accent); flex-shrink:0; overflow:hidden; }
    .cart-item-img img, .saved-item__thumb img { width:100%; height:100%; object-fit:cover; }
    .saved-item__thumb { width:44px; height:44px; border-radius:10px; background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--accent); flex-shrink:0; overflow:hidden; }
    .cart-item-info { flex:1; }
    .cart-item-name { font-weight:400; }
    .cart-item-meta { font-size:0.75rem; opacity:0.7; display:flex; gap:12px; margin-top:4px; }
    .qty-control { display:flex; align-items:center; gap:8px; }
    .qty-btn { width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:#fff; cursor:pointer; }
    .item-price { font-weight:400; white-space:nowrap; }
    .item-actions { display:flex; gap:6px; }

    .saved-items { margin-top:20px; }
    .saved-item { display:flex; align-items:center; gap:12px; background:var(--bg-card); padding:12px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); margin-bottom:8px; }

    .summary-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:20px; border:1px solid var(--border-default); }
    .summary-row { display:flex; justify-content:space-between; margin-bottom:12px; font-size:0.9rem; }
    .summary-total { font-size:1.3rem; font-weight:400; border-top:1px solid var(--border-default); padding-top:12px; margin-top:12px; }
    .promo-row { display:flex; gap:8px; margin-bottom:16px; }
    .promo-input { flex:1; background:var(--bg-elevated); border:1px solid var(--border-default); color:#fff; padding:8px 14px; border-radius:var(--radius-pill); }
    .progress-bar { height:6px; background:var(--border-subtle); border-radius:10px; margin:12px 0; overflow:hidden; }
    .progress-fill { height:100%; background:var(--accent); border-radius:10px; transition:0.3s; }
    .installment-options { display:flex; gap:8px; margin-bottom:12px; }
    .installment-chip { padding:6px 12px; border-radius:20px; border:1px solid var(--border-strong); cursor:pointer; font-size:0.75rem; }
    .installment-chip.active { border-color:var(--accent); background:#4884ff15; }

    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:0.2s; }
    .modal-overlay.active { opacity:1; visibility:visible; }
    .modal { background:var(--bg-surface); border-radius:var(--radius-xl); padding:24px; max-width:420px; width:90%; border:1px solid var(--border-default); animation:fadeInUp 0.2s; }
    .modal input, .modal select { width:100%; background:var(--bg-elevated); border:1px solid var(--border-default); color:#fff; padding:10px; border-radius:var(--radius-sm); margin-bottom:12px; }

    .toast { position:fixed; bottom:30px; left:20px; right:20px; background:#1e2a3af0; backdrop-filter:blur(12px); border-radius:60px; padding:12px 24px; display:flex; align-items:center; gap:10px; z-index:2000; border:1px solid var(--border-accent); transform:translateY(20px); opacity:0; transition:0.3s; pointer-events:none; }
    .toast.show { transform:translateY(0); opacity:1; }

    @keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    @media (max-width:1024px) {
      .sidebar-left { display:none; }
      .top-header-mobile { display:flex; }
      .mobile-bottom-nav { display:flex; }
      body { padding-bottom: var(--bottom-nav-height); }
      .main-content__inner { padding:12px; }
      .cart-container { flex-direction:column; }
      .cart-summary-section { position:static; }
    }