/* ============================================================
   HOOKAH MARKET — Premium UI v10.0 (Dark + Light Theme)
   v10: larger titles, desc preview, premium categories, big bonuses
   ============================================================ */
:root {
    --primary: #E5383B;
    --primary-dark: #BA181B;
    --primary-light: #FF6B6B;
    --primary-glow: rgba(229,56,59,0.35);
    --bg-deep: #0A0A0C;
    --bg-main: #0F0F12;
    --bg-card: #16161A;
    --bg-card-hover: #1E1E24;
    --bg-elevated: #1A1A20;
    --text-primary: #F2F2F7;
    --text-secondary: #8E8E93;
    --text-muted: #48484A;
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.1);
    --success: #30D158;
    --warning: #FF9F0A;
    --error: #FF453A;
    --text-tertiary: #636366;
    --sidebar-bg: #111114;
    --loader-bg: rgba(10,10,12,0.85);
    --badge-border: #111114;
    --header-bg: rgba(15,15,18,0.85);
    --bottom-nav-bg: rgba(22,22,26,0.88);
    --star-empty: rgba(255,255,255,0.15);
    --img-placeholder-bg: linear-gradient(135deg, var(--bg-card-hover), var(--bg-card));
    --radius-xl: 24px; --radius-lg: 18px; --radius-md: 14px; --radius-sm: 10px; --radius-xs: 6px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 30px var(--primary-glow);
    --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    --sidebar-w: 260px;
    --btn-h: 46px; --btn-h-mobile: 48px; --btn-radius: var(--radius-sm); --btn-font: 14px;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dark));
    --gradient-primary-hover: linear-gradient(135deg, #FF4B4E, var(--primary));
    --gradient-accent: linear-gradient(135deg, rgba(229,56,59,0.15), rgba(229,56,59,0.05));
    --sidebar-bg: linear-gradient(180deg, #111114, #0A0A0C);
    --header-bg: rgba(15,15,18,0.85);
    --modal-backdrop: rgba(0,0,0,0.7);
    --loader-bg: rgba(10,10,12,0.85);
    --bottomnav-bg: rgba(22,22,26,0.88);
    --bottomnav-border: rgba(255,255,255,0.08);
    --badge-border: #111114;
    --drag-handle: rgba(255,255,255,0.15);
    --scrollbar-thumb: rgba(229,56,59,0.3);
    --img-placeholder-bg: linear-gradient(135deg, var(--bg-card-hover), var(--bg-card));
    --star-empty: rgba(255,255,255,0.15);
    --card-shadow: none;
}

/* ======================== LIGHT THEME ======================== */
[data-theme="light"] {
    --bg-deep: #F2F2F7; --bg-main: #FFFFFF; --bg-card: #FFFFFF;
    --bg-card-hover: #F5F5FA; --bg-elevated: #F0F0F5;
    --text-primary: #1C1C1E; --text-secondary: #6C6C70; --text-muted: #AEAEB2;
    --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.12);
    --primary-glow: rgba(229,56,59,0.18);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --gradient-accent: linear-gradient(135deg, rgba(229,56,59,0.1), rgba(229,56,59,0.03));
    --sidebar-bg: linear-gradient(180deg, #FAFAFA, #F2F2F7);
    --header-bg: rgba(255,255,255,0.88);
    --modal-backdrop: rgba(0,0,0,0.35);
    --loader-bg: rgba(255,255,255,0.88);
    --bottomnav-bg: rgba(255,255,255,0.92);
    --bottomnav-border: rgba(0,0,0,0.08);
    --badge-border: #FFFFFF;
    --drag-handle: rgba(0,0,0,0.15);
    --scrollbar-thumb: rgba(229,56,59,0.25);
    --img-placeholder-bg: linear-gradient(135deg, #F0F0F5, #E8E8ED);
    --star-empty: rgba(0,0,0,0.12);
    --card-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .product-card { box-shadow: var(--card-shadow); }
[data-theme="light"] .product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(229,56,59,0.12); }
[data-theme="light"] .search-input { background: rgba(0,0,0,0.03); }
[data-theme="light"] .search-input:focus { background: rgba(229,56,59,0.03); }
[data-theme="light"] .clear-search { background: rgba(0,0,0,0.05); }
[data-theme="light"] .splash-screen { background: #F2F2F7; }
[data-theme="light"] .splash-loader-track { background: rgba(0,0,0,0.06); }
[data-theme="light"] .modal-card { box-shadow: 0 -8px 40px rgba(0,0,0,0.12); }
[data-theme="light"] .detail-description { background: rgba(0,0,0,0.02); }
[data-theme="light"] .detail-image { background: rgba(0,0,0,0.03); }
[data-theme="light"] .detail-fav { background: rgba(0,0,0,0.02)!important; }
[data-theme="light"] .bottom-nav { box-shadow: 0 2px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .tabs-indicator { box-shadow: 0 1px 6px rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .toast-container { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .category-card { box-shadow: var(--card-shadow); }
[data-theme="light"] .broadcast-image-label { background: rgba(0,0,0,0.02); }
[data-theme="light"] .broadcast-preview { background: rgba(0,0,0,0.02); }

/* ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:var(--font); background:var(--bg-deep); color:var(--text-primary); line-height:1.55; font-size:15px; overflow-x:hidden; min-height:100vh; transition:background 0.3s ease, color 0.3s ease; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }

/* ============ SIDEBAR ============ */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); background:var(--sidebar-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:1000; transform:translateX(-100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.sidebar.active { transform:translateX(0); }
.sidebar-header { padding:28px 24px; border-bottom:1px solid var(--border); }
.logo-wrapper { display:flex; align-items:center; gap:14px; }
.sidebar-logo { width:52px; height:52px; border-radius:14px; object-fit:cover; border:2px solid var(--primary); box-shadow:0 0 20px var(--primary-glow); transition:var(--transition); }
.logo-text { display:flex; flex-direction:column; gap:1px; }
.logo-title { font-size:20px; font-weight:800; letter-spacing:2px; background:linear-gradient(135deg, var(--primary), #FF8A80); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo-subtitle { font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:3px; text-transform:uppercase; }
.sidebar-nav { flex:1; padding:20px 12px; display:flex; flex-direction:column; gap:4px; }
.nav-item { display:flex; align-items:center; gap:14px; padding:13px 16px; color:var(--text-secondary); text-decoration:none; transition:var(--transition); border-radius:var(--radius-sm); position:relative; }
.nav-item:hover { color:var(--text-primary); background:rgba(229,56,59,0.06); }
.nav-item.active { color:var(--text-primary); background:rgba(229,56,59,0.1); }
.nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:24px; background:var(--primary); border-radius:0 3px 3px 0; }
.nav-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.nav-icon svg { stroke:currentColor; }
.nav-item.active .nav-icon svg { stroke:var(--primary-light); filter:drop-shadow(0 0 6px var(--primary-glow)); }
.nav-text { font-size:14px; font-weight:500; }
.nav-badge, .action-badge, .mobile-badge { background:var(--primary); color:#fff; font-size:10px; font-weight:700; height:18px; min-width:18px; padding:0 5px; border-radius:9px; display:flex; align-items:center; justify-content:center; position:absolute; top:-4px; right:-6px; box-shadow:0 2px 8px var(--primary-glow); border:2px solid var(--badge-border); line-height:1; }
.nav-badge:empty, .action-badge:empty, .mobile-badge:empty { display:none!important; }
.sidebar-footer { padding:20px 24px; border-top:1px solid var(--border); }
.user-card { display:flex; align-items:center; gap:12px; }
.user-avatar { width:38px; height:38px; border-radius:12px; overflow:hidden; border:2px solid var(--primary); box-shadow:0 0 12px var(--primary-glow); flex-shrink:0; }
.avatar-img { width:100%; height:100%; object-fit:cover; }
.user-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-status { font-size:11px; color:var(--success); display:flex; align-items:center; gap:5px; font-weight:500; }
.status-dot { width:6px; height:6px; background:var(--success); border-radius:50%; box-shadow:0 0 6px var(--success); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

/* ============ THEME TOGGLE ============ */
.theme-toggle-btn { display:flex; align-items:center; gap:10px; padding:13px 16px; color:var(--text-secondary); cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition); background:none; border:none; font-family:var(--font); font-size:14px; font-weight:500; width:100%; text-align:left; -webkit-tap-highlight-color:transparent; }
.theme-toggle-btn:hover { color:var(--text-primary); background:rgba(229,56,59,0.06); }
.theme-toggle-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.theme-toggle-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.header-theme-btn { background:transparent; border:1px solid var(--border); cursor:pointer; padding:8px; border-radius:var(--btn-radius); transition:var(--transition); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; width:38px; height:38px; }
.header-theme-btn:hover { color:var(--text-primary); border-color:var(--border-light); }
.header-theme-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ============ MAIN CONTENT ============ */
.main-content { margin-left:0; min-height:100vh; transition:margin-left 0.35s cubic-bezier(0.4,0,0.2,1), background 0.3s ease; background:var(--bg-main); }
.main-content.sidebar-open { margin-left:var(--sidebar-w); }
.main-header { position:sticky; top:0; height:64px; background:var(--header-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 20px; z-index:900; }
.menu-toggle { background:rgba(229,56,59,0.08); border:2px solid rgba(229,56,59,0.3); padding:3px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); flex-shrink:0; }
.menu-toggle:hover { border-color:var(--primary); box-shadow:0 0 16px var(--primary-glow); }
.menu-logo { width:36px; height:36px; border-radius:10px; object-fit:cover; }
.search-container { flex:1; max-width:560px; margin:0 8px; }
.search-wrapper { position:relative; width:100%; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:0.4; stroke:var(--text-secondary); }
.search-input { width:100%; height:40px; padding:0 40px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:20px; color:var(--text-primary); font-size:14px; font-family:var(--font); outline:none; transition:var(--transition); }
.search-input::placeholder { color:var(--text-muted); }
.search-input:focus { border-color:var(--primary); background:rgba(229,56,59,0.04); box-shadow:0 0 0 3px rgba(229,56,59,0.08); }
.clear-search { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.06); border:none; width:24px; height:24px; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:var(--transition); color:var(--text-secondary); }
.search-input:not(:placeholder-shown) + .clear-search { opacity:1; visibility:visible; }
.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.action-btn { background:transparent; border:1px solid var(--border); position:relative; cursor:pointer; padding:8px; border-radius:var(--btn-radius); transition:var(--transition); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; }
.action-btn:hover { color:var(--text-primary); border-color:var(--border-light); }
.action-btn svg { stroke:currentColor; }
.action-badge { top:-5px; right:-5px; border-color:var(--bg-main); }
.content-wrapper { padding:24px; min-height:calc(100vh - 64px); }

/* ============ PRODUCTS GRID ============ */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:12px; align-items:stretch; }
.product-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); position:relative; display:flex; flex-direction:column; animation:card-in 0.4s ease-out both; cursor:pointer; }
.product-card:active { transform:scale(0.98); }
@keyframes card-in { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.product-card:hover { border-color:rgba(229,56,59,0.2); transform:translateY(-4px); }
.product-badge { position:absolute; top:12px; left:12px; z-index:2; background:var(--gradient-primary); color:#fff; font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px; box-shadow:0 4px 12px var(--primary-glow); }
.product-image { width:100%; height:160px; background:var(--img-placeholder-bg); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.product-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, var(--bg-card)); pointer-events:none; }
.product-image-placeholder { width:56px; height:56px; opacity:0.15; stroke:var(--text-secondary); fill:none; stroke-width:1.5; }
.product-content { padding:16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.product-title { font-size:15px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; color:var(--text-primary); letter-spacing:-0.01em; }
.product-price { font-size:22px; font-weight:800; color:var(--primary); letter-spacing:-0.5px; }
.product-desc-preview { font-size:12px; color:var(--text-secondary); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:2px; opacity:0.8; }
.product-stock { display:flex; align-items:center; gap:6px; font-size:12px; padding-top:6px; border-top:1px solid var(--border); }
.stock-indicator { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.stock-indicator.in-stock { background:var(--success); box-shadow:0 0 8px var(--success); }
.stock-indicator.low-stock { background:var(--warning); box-shadow:0 0 8px var(--warning); }
.stock-indicator.out-of-stock { background:var(--error); }
.stock-text.in-stock { color:var(--success); font-weight:500; }
.stock-text.low-stock { color:var(--warning); font-weight:500; }
.stock-text.out-of-stock { color:var(--error); font-weight:500; }

/* ============ ACTIONS ============ */
.product-actions { display:flex; gap:8px; margin-top:auto; padding-top:10px; align-items:stretch; }
.fav-btn { background:transparent; border:1px solid var(--border); width:var(--btn-h); min-width:var(--btn-h); height:var(--btn-h); border-radius:var(--btn-radius); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); flex-shrink:0; color:var(--text-muted); }
.fav-btn svg { width:18px; height:18px; fill:currentColor; stroke:none; }
.fav-btn:hover { border-color:var(--primary); color:var(--primary-light); background:rgba(229,56,59,0.06); }
.fav-btn.active { border-color:var(--primary); color:var(--primary); background:rgba(229,56,59,0.1); }
.btn-cart, .btn-open, .btn-action { height:var(--btn-h); border:none; color:#fff; border-radius:var(--btn-radius); font-weight:700; font-size:var(--btn-font); font-family:var(--font); cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; position:relative; overflow:hidden; padding:0 20px; }
.btn-cart, .btn-action.primary { background:var(--gradient-primary); box-shadow:0 4px 16px var(--primary-glow); }
.btn-cart:hover, .btn-action.primary:hover { background:var(--gradient-primary-hover); transform:translateY(-1px); box-shadow:0 6px 24px var(--primary-glow); }
.btn-cart:active, .btn-action.primary:active { transform:translateY(0); }
.btn-cart:disabled, .btn-action:disabled { background:var(--text-muted)!important; box-shadow:none!important; cursor:not-allowed; transform:none!important; }
.btn-cart svg { width:16px; height:16px; stroke:currentColor; fill:none; flex-shrink:0; }
.btn-open, .btn-action.secondary { background:var(--gradient-accent); color:var(--primary-light); border:1px solid rgba(229,56,59,0.25); box-shadow:0 2px 8px rgba(229,56,59,0.08); }
.btn-open:hover, .btn-action.secondary:hover { background:rgba(229,56,59,0.2); border-color:rgba(229,56,59,0.4); }
.btn-cart, .btn-open { flex:1 1 0; padding:0 12px; min-width:0; }
.btn-action.full { width:100%; flex:1; }
.qty-row { flex:1 1 0; display:flex; align-items:center; gap:2px; background:var(--gradient-primary); border-radius:var(--btn-radius); padding:4px; box-shadow:0 4px 16px var(--primary-glow); justify-content:center; height:var(--btn-h); min-width:0; }
.qty-btn { background:rgba(255,255,255,0.9); border:none; color:var(--primary); width:34px; height:34px; border-radius:var(--radius-xs); font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); font-family:var(--font); }
.qty-btn:hover { background:#fff; }
.qty-btn:disabled { background:rgba(255,255,255,0.3); color:rgba(229,56,59,0.5); cursor:not-allowed; }
.qty-value { min-width:28px; height:34px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#fff; }

/* ============ CATEGORY ============ */
.section-label { font-size:12px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1.5px; margin-top:24px; margin-bottom:2px; padding-left:2px; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:16px; padding:12px 16px; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border); }
.breadcrumb-item { color:var(--text-secondary); cursor:pointer; padding:4px 8px; border-radius:var(--radius-xs); transition:var(--transition); font-size:13px; font-weight:500; }
.breadcrumb-item:hover { background:rgba(229,56,59,0.06); color:var(--text-primary); }
.breadcrumb-separator { color:var(--text-muted); font-size:11px; }
.back-btn { display:inline-flex; align-items:center; gap:8px; background:var(--gradient-accent); border:1px solid rgba(229,56,59,0.2); color:var(--primary-light); padding:12px 20px; border-radius:var(--btn-radius); font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition); font-family:var(--font); margin-bottom:16px; }
.back-btn:hover { border-color:var(--primary); color:var(--text-primary); background:rgba(229,56,59,0.15); }

/* ============ CART ============ */
.cart-header, .favorites-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.cart-title, .favorites-title { font-size:22px; font-weight:800; background:linear-gradient(135deg, var(--primary), #FF8A80); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.clear-cart-btn, .clear-favorites-btn { background:rgba(255,69,58,0.08); border:1px solid rgba(255,69,58,0.3); color:var(--error); padding:10px 18px; border-radius:var(--btn-radius); font-weight:600; font-size:13px; cursor:pointer; transition:var(--transition); font-family:var(--font); }
.clear-cart-btn:hover, .clear-favorites-btn:hover { background:rgba(255,69,58,0.15); }
.cart-remove-btn { background:rgba(255,69,58,0.08); border:1px solid rgba(255,69,58,0.3); color:var(--error); width:var(--btn-h); height:var(--btn-h); border-radius:var(--btn-radius); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); flex-shrink:0; padding:0; }
.cart-remove-btn:hover { background:rgba(255,69,58,0.15); }
.cart-remove-btn:active { transform:scale(0.92); }
.cart-remove-btn img { filter:brightness(0) saturate(100%) invert(41%) sepia(93%) saturate(1200%) hue-rotate(336deg) brightness(100%) contrast(101%); }
.cart-summary { border-radius:var(--radius-lg); padding:24px; margin-top:20px; border:1px solid var(--border); background:linear-gradient(180deg, var(--bg-card), rgba(229,56,59,0.03)); }
.summary-row { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); font-size:14px; }
.summary-label { color:var(--text-secondary); font-weight:500; }
.summary-value { font-weight:600; }
.summary-total { display:flex; justify-content:space-between; padding:18px 0 20px; font-size:22px; font-weight:800; color:var(--primary); }
.checkout-btn { background:var(--gradient-primary); border:none; color:#fff; width:100%; padding:16px; border-radius:var(--btn-radius); font-size:16px; font-weight:700; cursor:pointer; font-family:var(--font); transition:var(--transition); box-shadow:0 6px 24px var(--primary-glow); text-transform:uppercase; letter-spacing:1px; height:52px; display:flex; align-items:center; justify-content:center; }
.checkout-btn:hover { background:var(--gradient-primary-hover); transform:translateY(-2px); }

/* ============ EMPTY STATE ============ */
.empty-state { text-align:center; padding:48px 24px; max-width:400px; margin:32px auto; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border); }
.empty-state-icon { font-size:48px; margin-bottom:16px; opacity:0.6; }
.empty-state h3 { font-size:20px; margin-bottom:10px; font-weight:700; }
.empty-state p { margin-bottom:24px; color:var(--text-secondary); font-size:14px; }
.empty-state .btn-action { min-height:52px; font-size:16px; padding:14px 24px; width:100%; max-width:300px; margin:0 auto; }

/* ============ ORDERS ============ */
.orders-history { margin-top:0; padding:0; background:transparent; border-radius:0; border:none; }
.orders-header { margin-bottom:12px; padding:0 4px; }
.orders-title { font-size:16px; font-weight:600; color:var(--text-primary); }
.order-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; transition:var(--transition); }
.order-card:hover { border-color:rgba(229,56,59,0.15); }
.order-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.order-date { color:var(--text-secondary); font-size:13px; font-weight:500; }
.order-total { color:var(--primary); font-weight:800; font-size:18px; }
.order-items { font-size:13px; color:var(--text-secondary); line-height:1.7; }
.order-status { display:inline-block; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; margin:8px 0; text-transform:uppercase; letter-spacing:0.5px; }
.status-processing { background:rgba(255,159,10,0.1); color:var(--warning); border:1px solid rgba(255,159,10,0.3); }
.status-delivery { background:rgba(0,122,255,0.1); color:#0A84FF; border:1px solid rgba(0,122,255,0.3); }
.status-delivered { background:rgba(48,209,88,0.1); color:var(--success); border:1px solid rgba(48,209,88,0.3); }
.status-select { width:100%; padding:12px; background:var(--bg-main); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--btn-radius); font-size:14px; font-family:var(--font); }

/* ============ PROFILE ============ */
.profile-tabs { margin-bottom:20px; }
.tabs-container { display:flex; position:relative; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border); padding:4px; gap:0; overflow:visible; }
.tabs-container::-webkit-scrollbar { display:none; }
.profile-tab-btn { flex:1; position:relative; padding:11px 8px; background:transparent; border:none; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color 0.25s ease; font-family:var(--font); white-space:nowrap; -webkit-tap-highlight-color:transparent; z-index:2; border-radius:var(--radius-sm); letter-spacing:0.2px; }
.profile-tab-btn:active { opacity:0.7; }
.profile-tab-btn.active { color:var(--text-primary); }
.profile-tab-btn svg { width:0; height:0; overflow:hidden; position:absolute; }
.tabs-indicator { position:absolute; top:4px; bottom:4px; background:var(--bg-elevated); border-radius:var(--radius-sm); transition:left 0.3s cubic-bezier(0.35,0,0.25,1), width 0.3s cubic-bezier(0.35,0,0.25,1); z-index:1; box-shadow:0 1px 6px rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.05); }
.tabs-line { display:none; }
.tab-pane { display:none; animation:fade-in 0.2s ease; }
.tab-pane.active { display:block; }
.profile-info-card { text-align:center; padding:28px 16px 20px; max-width:420px; margin:0 auto; }
.profile-avatar { font-size:52px; margin-bottom:6px; line-height:1; width:80px; height:80px; display:flex; align-items:center; justify-content:center; margin-left:auto; margin-right:auto; background:var(--bg-card); border-radius:50%; border:1px solid var(--border); }
.profile-name { font-size:19px; font-weight:600; margin-bottom:20px; line-height:1.3; color:var(--text-primary); }
.profile-details { text-align:left; margin-bottom:16px; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border); overflow:hidden; }
.profile-detail-row { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-size:14px; border-bottom:0.5px solid var(--border); }
.profile-detail-row:last-child { border-bottom:none; }
.detail-label { color:var(--text-secondary); font-weight:500; }
.detail-value { color:var(--text-primary); font-weight:600; }
.text-muted { color:var(--text-muted); font-weight:400; }
.profile-actions { display:flex; gap:10px; flex-direction:column; }
.profile-actions .btn-action { min-height:48px; font-size:15px; border-radius:var(--radius-md); }

/* ============ BONUS ============ */
.bonus-card { display:flex; align-items:center; gap:16px; padding:18px 20px; margin:0 0 14px; background:linear-gradient(135deg, rgba(229,56,59,0.08), rgba(229,56,59,0.02)); border:1px solid rgba(229,56,59,0.2); border-radius:var(--radius-md); position:relative; overflow:hidden; }
.bonus-card::after { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; background:radial-gradient(circle, rgba(229,56,59,0.1), transparent 70%); pointer-events:none; }
.bonus-card-icon { font-size:32px; flex-shrink:0; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:rgba(229,56,59,0.1); border-radius:50%; }
.bonus-card-info { text-align:left; flex:1; min-width:0; }
.bonus-card-label { font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:2px; }
.bonus-card-value { font-size:32px; font-weight:900; color:var(--primary); line-height:1.15; letter-spacing:-0.5px; }
.bonus-card-pending { font-size:13px; color:var(--warning); font-weight:600; margin-top:4px; display:flex; align-items:center; gap:4px; }
.bonus-refresh-btn { background:transparent; border:none; color:var(--text-muted); width:36px; height:36px; min-width:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; flex-shrink:0; }
.bonus-refresh-btn:hover { color:var(--primary); background:rgba(229,56,59,0.08); }
.bonus-refresh-btn:active { transform:scale(0.85); }
.bonus-refresh-btn svg { width:18px; height:18px; transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.bonus-refresh-btn.spinning svg { animation:spin-refresh 0.7s cubic-bezier(0.4,0,0.2,1); }
@keyframes spin-refresh { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.loyalty-register-banner { display:flex; flex-direction:column; gap:14px; padding:16px; margin:0 0 12px; border-radius:var(--radius-md); background:var(--bg-card); border:1px solid var(--border); }
.loyalty-register-header { display:flex; align-items:center; gap:12px; }
.loyalty-register-icon { width:42px; height:42px; min-width:42px; border-radius:50%; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; }
.loyalty-register-icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; }
.loyalty-register-text { flex:1; min-width:0; }
.loyalty-register-text h4 { font-size:14px; font-weight:600; color:var(--text-primary); margin:0 0 2px; line-height:1.3; }
.loyalty-register-text p { font-size:13px; color:var(--text-muted); margin:0; line-height:1.4; }
.loyalty-register-btn { width:100%; padding:12px; border:none; border-radius:var(--radius-sm); background:var(--gradient-primary); color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s ease; font-family:var(--font); letter-spacing:0.2px; }
.loyalty-register-btn:hover { opacity:0.9; }
.loyalty-register-btn:active { transform:scale(0.98); }

/* ============ MODAL ============ */
.modal-overlay { position:fixed; inset:0; background:var(--modal-backdrop); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); z-index:1500; display:flex; align-items:flex-end; justify-content:center; padding:0; opacity:0; visibility:hidden; transition:all 0.3s ease; }
.modal-overlay.active { opacity:1; visibility:visible; }
.modal-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:28px 24px; padding-bottom:max(28px, env(safe-area-inset-bottom, 28px)); max-width:440px; width:100%; position:relative; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); box-shadow:0 -8px 40px rgba(0,0,0,0.4); max-height:90vh; overflow-y:auto; overscroll-behavior:contain; }
.modal-overlay.active .modal-card { transform:translateY(0); }
.modal-drag-handle { width:36px; height:4px; background:var(--drag-handle); border-radius:2px; margin:0 auto 20px; }
.modal-close { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:300; transition:var(--transition); z-index:2; line-height:1; }
.modal-close:hover { border-color:var(--primary); color:var(--primary-light); background:rgba(229,56,59,0.08); }
.modal-title { font-size:22px; font-weight:800; color:var(--text-primary); margin:0 0 6px; line-height:1.2; }
.modal-subtitle { font-size:13px; color:var(--text-secondary); margin:0 0 24px; line-height:1.5; }
.modal-field { margin-bottom:16px; }
.modal-field label { display:block; font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; }
.modal-field input, .modal-field select { width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-primary); font-size:16px; font-family:var(--font); transition:var(--transition); -webkit-appearance:none; }
.modal-field input::placeholder { color:var(--text-muted); }
.modal-field input:focus, .modal-field select:focus { border-color:var(--primary); background:rgba(229,56,59,0.04); box-shadow:0 0 0 3px rgba(229,56,59,0.08); outline:none; }
.modal-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.modal-submit { width:100%; padding:16px; border:none; border-radius:var(--btn-radius); background:var(--gradient-primary); color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:var(--transition); font-family:var(--font); box-shadow:0 4px 16px var(--primary-glow); margin-top:8px; }
.modal-submit:hover { background:var(--gradient-primary-hover); transform:translateY(-1px); }
.modal-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none!important; box-shadow:none; }

.info-banner { display:flex; align-items:center; gap:12px; padding:16px 18px; margin:16px 0; border-radius:var(--radius-md); font-size:14px; font-weight:500; line-height:1.4; }
.info-banner.warning { background:rgba(255,159,10,0.08); border:1px solid rgba(255,159,10,0.25); color:var(--warning); }
.info-banner svg { flex-shrink:0; stroke:currentColor; }
.bonus-transaction .order-total.bonus-add { color:var(--success); font-size:22px; font-weight:900; }
.bonus-transaction .order-total.bonus-remove { color:var(--error); font-size:22px; font-weight:900; }
.bonus-amount-row { display:flex; align-items:center; gap:10px; padding:10px 0 8px; }
.bonus-amount-icon { font-size:20px; line-height:1; }
.bonus-amount-value { font-size:24px; font-weight:900; letter-spacing:-0.3px; }
.bonus-amount-value.bonus-add { color:var(--success); }
.bonus-amount-value.bonus-remove { color:var(--error); }
.bonus-type-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:12px; }
.bonus-type-label.bonus-add { color:var(--success); background:rgba(48,209,88,0.1); }
.bonus-type-label.bonus-remove { color:var(--error); background:rgba(255,69,58,0.1); }
.bonus-description { line-height:1.6; color:var(--text-secondary); font-size:13px; }

/* ============ MANAGER ============ */
.manager-card { background:var(--bg-card); padding:24px; border-radius:var(--radius-lg); border:1px solid var(--border); margin-bottom:24px; }
.manager-card-title { font-size:16px; font-weight:700; margin-bottom:16px; }
.broadcast-textarea { width:100%; height:120px; padding:14px; background:var(--bg-main); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--btn-radius); font-size:14px; resize:vertical; font-family:var(--font); margin-bottom:16px; }
.broadcast-textarea:focus { border-color:var(--primary); outline:none; }
.broadcast-image-section { margin-bottom:16px; }
.broadcast-image-label { display:flex; align-items:center; gap:10px; padding:14px 18px; background:rgba(255,255,255,0.03); border:1px dashed var(--border-light); border-radius:var(--btn-radius); cursor:pointer; transition:var(--transition); color:var(--text-secondary); font-size:14px; font-weight:500; }
.broadcast-image-label:hover { border-color:var(--primary); background:rgba(229,56,59,0.04); color:var(--text-primary); }
.broadcast-image-label.has-image { border-color:var(--success); color:var(--success); border-style:solid; }
.broadcast-image-label svg { stroke:currentColor; flex-shrink:0; }
.broadcast-preview { display:flex; align-items:center; gap:12px; margin-top:12px; padding:8px; border-radius:var(--btn-radius); border:1px solid var(--border); }
.broadcast-preview img { width:80px; height:80px; border-radius:var(--radius-xs); object-fit:cover; }
.broadcast-remove-img { background:rgba(255,69,58,0.1); border:1px solid rgba(255,69,58,0.3); color:var(--error); width:32px; height:32px; border-radius:50%; font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; margin-left:auto; }
.section-heading { font-size:22px; font-weight:800; margin-bottom:20px; background:linear-gradient(135deg, var(--primary), #FF8A80); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-subheading { font-size:16px; font-weight:700; margin:24px 0 12px; }

/* ============ MOBILE SIDEBAR ============ */
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); z-index:999; opacity:0; visibility:hidden; transition:var(--transition); }
.mobile-overlay.active { opacity:1; visibility:visible; }
.mobile-sidebar { position:fixed; top:0; left:0; width:280px; max-width:85vw; height:100vh; background:var(--sidebar-bg); border-right:1px solid var(--border); z-index:1001; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.mobile-sidebar.active { transform:translateX(0); }
.mobile-sidebar-header { padding:20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.mobile-logo { display:flex; align-items:center; gap:10px; }
.mobile-logo img { width:34px; height:34px; border-radius:10px; border:2px solid var(--primary); box-shadow:0 0 10px var(--primary-glow); }
.mobile-logo span { font-size:16px; font-weight:700; color:var(--text-primary); }
.mobile-close { background:transparent; border:1px solid var(--border); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); }
.mobile-nav { padding:16px; flex:1; display:flex; flex-direction:column; gap:4px; }
.mobile-nav-item { display:flex; align-items:center; gap:14px; padding:14px 16px; color:var(--text-secondary); text-decoration:none; border-radius:var(--btn-radius); transition:var(--transition); position:relative; }
.mobile-nav-item:hover { background:rgba(229,56,59,0.06); color:var(--text-primary); }
.mobile-nav-item svg { flex-shrink:0; stroke:currentColor; }
.mobile-nav-item span:first-of-type { font-size:15px; font-weight:500; flex:1; }
.mobile-badge { position:static; border-color:var(--badge-border); }

/* ============ SPLASH ============ */
.splash-screen { position:fixed; inset:0; z-index:9999; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; transition:opacity 0.5s ease, visibility 0.5s ease; }
.splash-screen.fade-out { opacity:0; visibility:hidden; pointer-events:none; }
.splash-content { display:flex; flex-direction:column; align-items:center; gap:28px; animation:splash-in 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes splash-in { from{opacity:0;transform:scale(0.9) translateY(12px);} to{opacity:1;transform:scale(1) translateY(0);} }
.splash-logo-wrapper { position:relative; width:96px; height:96px; }
.splash-logo-glow { position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); animation:splash-glow 2s ease-in-out infinite alternate; }
@keyframes splash-glow { from{opacity:0.4;transform:scale(0.95);} to{opacity:0.8;transform:scale(1.1);} }
.splash-logo { width:96px; height:96px; border-radius:24px; object-fit:cover; border:2px solid var(--primary); box-shadow:0 0 40px var(--primary-glow), 0 8px 32px rgba(0,0,0,0.5); position:relative; z-index:1; }
.splash-brand { text-align:center; }
.splash-title { font-family:var(--font); font-size:26px; font-weight:900; letter-spacing:4px; background:linear-gradient(135deg, var(--primary), #FF8A80); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.2; }
.splash-subtitle { font-family:var(--font); font-size:13px; color:var(--text-muted); font-weight:500; letter-spacing:3px; text-transform:uppercase; margin-top:6px; }
.splash-loader { width:140px; }
.splash-loader-track { width:100%; height:3px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.splash-loader-bar { width:30%; height:100%; background:var(--gradient-primary); border-radius:2px; animation:splash-bar 1.2s ease-in-out infinite; box-shadow:0 0 8px var(--primary-glow); }
@keyframes splash-bar { 0%{transform:translateX(-100%);} 100%{transform:translateX(460%);} }

/* ============ LOADER ============ */
.loader-overlay { position:fixed; inset:0; background:var(--loader-bg); backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:center; z-index:2000; opacity:0; visibility:hidden; transition:var(--transition); }
.loader-overlay.active { opacity:1; visibility:visible; }
.loader-content { text-align:center; }
.loader-ring { display:inline-block; position:relative; width:48px; height:48px; margin-bottom:16px; }
.loader-ring div { box-sizing:border-box; display:block; position:absolute; width:40px; height:40px; margin:4px; border:3px solid transparent; border-top-color:var(--primary); border-radius:50%; animation:ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite; }
.loader-ring div:nth-child(1) { animation-delay:-0.45s; }
.loader-ring div:nth-child(2) { animation-delay:-0.3s; }
.loader-ring div:nth-child(3) { animation-delay:-0.15s; }
@keyframes ring { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.loader-content p { font-size:14px; color:var(--text-secondary); font-weight:500; }

/* ============ TOAST ============ */
.toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--bg-elevated); color:var(--text-primary); padding:14px 24px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:2001; transition:transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55), visibility 0s linear 0.4s; max-width:calc(100vw - 32px); text-align:center; border:1px solid var(--border); font-weight:500; font-size:14px; border-left:3px solid var(--primary); backdrop-filter:blur(20px); visibility:hidden; pointer-events:none; }
.toast-container.show { transform:translateX(-50%) translateY(0); visibility:visible; pointer-events:auto; transition:transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55), visibility 0s linear 0s; }
@media(max-width:768px) { .toast-container { bottom:calc(80px + env(safe-area-inset-bottom,0px)); } }
.toast-container.success { border-left-color:var(--success); }
.toast-container.error { border-left-color:var(--error); }
.toast-container.warning { border-left-color:var(--warning); }

@keyframes fade-in { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.fade-in { animation:fade-in 0.3s ease; }

/* ============ FULL WIDTH BUTTONS ============ */
.cart-actions-row { display:flex; flex-direction:row; gap:8px; margin-top:auto; padding-top:10px; width:100%; align-items:stretch; }
.cart-actions-row .qty-row { flex:1 1 0; min-width:0; height:var(--btn-h); }
.cart-actions-row .cart-remove-btn { width:var(--btn-h); height:var(--btn-h); border-radius:var(--btn-radius); flex-shrink:0; }
.fav-actions-row { display:flex; flex-direction:row; gap:8px; margin-top:auto; padding-top:10px; width:100%; align-items:stretch; }
.fav-actions-row .btn-cart { flex:1 1 0; min-width:0; height:var(--btn-h); }
.fav-actions-row .btn-remove-fav { width:var(--btn-h); min-width:var(--btn-h); height:var(--btn-h); background:rgba(255,69,58,0.08); border:1px solid rgba(255,69,58,0.3); color:var(--error); border-radius:var(--btn-radius); cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0; }
.fav-actions-row .btn-remove-fav img { filter:brightness(0) saturate(100%) invert(41%) sepia(93%) saturate(1200%) hue-rotate(336deg) brightness(100%) contrast(101%); }
.fav-actions-row .btn-remove-fav:hover { background:rgba(255,69,58,0.15); }
.fav-actions-row .btn-remove-fav:active { transform:scale(0.92); }
.fav-actions-row .qty-row { flex:1 1 0; min-width:0; height:var(--btn-h); }

/* ============ BOTTOM NAV ============ */
.bottom-nav { display:none; }
@media(max-width:768px) {
    .bottom-nav { display:flex; position:fixed; bottom:10px; left:12px; right:12px; height:56px; background:var(--bottomnav-bg); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid var(--bottomnav-border); border-radius:20px; z-index:950; align-items:stretch; justify-content:stretch; box-shadow:0 4px 24px rgba(0,0,0,0.45); padding:0 4px; margin-bottom:env(safe-area-inset-bottom,0px); }
    .bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; background:none; border:none; color:var(--text-muted); cursor:pointer; transition:color 0.2s ease; position:relative; font-family:var(--font); border-radius:16px; }
    .bottom-nav-item svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .bottom-nav-item span:not(.bottom-nav-badge) { font-size:10px; font-weight:500; line-height:1; opacity:0.8; }
    .bottom-nav-item.active { color:var(--primary); }
    .bottom-nav-item.active svg { stroke:var(--primary); stroke-width:2.2; }
    .bottom-nav-item.active span:not(.bottom-nav-badge) { font-weight:700; opacity:1; }
    .bottom-nav-item:active { transform:scale(0.9); }
    .bottom-nav-badge { position:absolute; top:5px; left:50%; margin-left:8px; background:var(--primary); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px var(--primary-glow); }
    .bottom-nav-badge:empty { display:none; }
    .content-wrapper { padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important; }
}

/* ============ RESPONSIVE ============ */
@media(max-width:768px) {
    :root { --btn-h:48px; --btn-font:14px; }
    .sidebar { display:none; }
    .main-content { margin-left:0!important; }
    .main-header { height:56px; padding:0 12px; gap:8px; }
    .content-wrapper { padding:16px 12px; }
    .products-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .product-card { border-radius:var(--radius-md); }
    .product-image { height:110px; }
    .product-content { padding:12px; gap:6px; }
    .product-title { font-size:14px; font-weight:700; min-height:40px; -webkit-line-clamp:3; }
    .product-price { font-size:18px; }
    .product-stock { font-size:11px; }
    .product-actions { gap:6px; padding-top:8px; }
    .fav-btn { width:var(--btn-h); min-width:var(--btn-h); height:var(--btn-h); }
    .btn-cart,.btn-open,.btn-action { height:var(--btn-h); font-size:var(--btn-font); }
    .btn-cart,.btn-open { flex:1 1 0; order:1; }
    .qty-row { height:var(--btn-h); flex:1 1 0; order:1; }
    .qty-btn { width:34px; height:36px; font-size:18px; }
    .qty-value { min-width:24px; height:36px; font-size:15px; }
    .cart-remove-btn { width:var(--btn-h); height:var(--btn-h); }
    .empty-state { padding:32px 16px; margin:16px auto; }
    .cart-summary { padding:18px; }
    .summary-total { font-size:20px; }
    .checkout-btn { height:52px; font-size:15px; }
    .search-input { height:38px; font-size:14px; }
    .menu-toggle { width:38px; height:38px; border-radius:10px; }
    .menu-logo { width:30px; height:30px; border-radius:8px; }
    .tabs-container { padding:3px; }
    .profile-tab-btn { padding:10px 6px; font-size:13px; }
    .modal-card { max-width:100%; border-radius:var(--radius-xl) var(--radius-xl) 0 0; max-height:92vh; }
    .bonus-card-value { font-size:28px; }
    .bonus-card { gap:14px; padding:16px; }
    .bonus-card-icon { width:46px; height:46px; font-size:28px; }
    .header-theme-btn { width:34px; height:34px; padding:6px; }
}
@media(min-width:769px) {
    .sidebar { transform:translateX(0); }
    .main-content { margin-left:var(--sidebar-w); }
    .menu-toggle { display:none; }
    .products-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
    .modal-overlay { align-items:center; padding:24px; }
    .modal-card { border-radius:var(--radius-xl); max-width:400px; transform:translateY(20px) scale(0.95); }
    .modal-overlay.active .modal-card { transform:translateY(0) scale(1); }
    .modal-drag-handle { display:none; }
}
@media(min-width:1200px) { .products-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; } }
@media(hover:none) and (pointer:coarse) { .product-card:hover { transform:none; box-shadow:var(--card-shadow); } input,select,textarea { font-size:16px!important; } }
@media(max-width:374px) {
    .content-wrapper { padding:12px 8px; }
    .products-grid { gap:8px; }
    .product-content { padding:10px; }
    .product-title { font-size:13px; font-weight:700; min-height:36px; -webkit-line-clamp:3; }
    .product-price { font-size:16px; }
    .fav-btn { width:40px; min-width:40px; height:40px; }
    .btn-cart,.btn-open { height:40px; font-size:12px; padding:0 8px; }
    .qty-row { height:40px; }
    .qty-btn { width:30px; height:32px; font-size:16px; }
    .qty-value { min-width:20px; height:32px; font-size:14px; }
    .modal-card { padding:22px 16px; }
}

/* ====================== CATEGORY CARDS ====================== */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-bottom:20px; }
.category-card { display:flex; align-items:center; gap:16px; background:var(--bg-card); border-radius:var(--radius-md); padding:18px 20px; cursor:pointer; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); border:1px solid var(--border); position:relative; overflow:hidden; }
.category-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(229,56,59,0.04), transparent 60%); opacity:0; transition:opacity 0.25s; pointer-events:none; }
.category-card:hover { border-color:rgba(229,56,59,0.25); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.category-card:hover::before { opacity:1; }
.category-card:active { transform:scale(0.98); background:rgba(229,56,59,0.06); }
.category-icon { width:56px; height:56px; min-width:56px; border-radius:16px; overflow:hidden; background:rgba(229,56,59,0.06); display:flex; align-items:center; justify-content:center; }
.category-icon svg { width:100%; height:100%; display:block; }
.category-info { flex:1; min-width:0; }
.category-name { font-size:16px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 6px; letter-spacing:-0.01em; }
.category-count { font-size:13px; color:var(--text-secondary); font-weight:500; }
.category-arrow { color:var(--text-muted); flex-shrink:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(229,56,59,0.06); transition:all 0.2s; }
.category-card:hover .category-arrow { background:rgba(229,56,59,0.12); color:var(--primary); }

/* ====================== PRODUCT TAP HINT ====================== */
.clickable-image { position:relative; cursor:pointer; }
.product-tap-hint { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.6); color:#fff; font-size:10px; font-weight:600; padding:3px 10px; border-radius:10px; opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:1; }
.product-card:hover .product-tap-hint { opacity:1; }
@media(max-width:768px) { .product-tap-hint { opacity:0.7; } }

/* ====================== PRODUCT DETAIL MODAL ====================== */
.product-detail-overlay .modal-card { max-width:480px; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.product-detail-card { padding-top:12px!important; }
.detail-image { width:100%; aspect-ratio:1/1; max-height:240px; background:var(--img-placeholder-bg); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; overflow:hidden; }
.detail-image-placeholder { width:80px; height:80px; opacity:0.2; }
.detail-image img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm); }
.detail-body { padding:0 4px; }
.detail-title { font-size:20px; font-weight:800; color:var(--text-primary); margin:0 0 6px; line-height:1.3; }
.detail-article { font-size:12px; color:var(--text-secondary); margin-bottom:10px; font-weight:500; }
.detail-price-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; }
.detail-price { font-size:26px; font-weight:900; color:var(--primary); }
.detail-description { background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); padding:14px; margin-bottom:16px; border:1px solid var(--border); }
.detail-desc-label { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; letter-spacing:0.08em; }
.detail-description p { font-size:14px; color:var(--text-primary); line-height:1.6; margin:0; }
.detail-actions { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.detail-fav { width:100%!important; height:48px!important; border-radius:var(--radius-sm)!important; display:flex!important; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border)!important; background:rgba(255,255,255,0.03)!important; font-size:14px; font-weight:600; color:var(--text-secondary); }
.detail-fav.active { color:var(--primary)!important; border-color:var(--primary)!important; background:rgba(229,56,59,0.06)!important; }
.detail-fav svg { width:18px; height:18px; }
.detail-add-btn { width:100%!important; height:52px!important; font-size:16px!important; border-radius:var(--radius-sm)!important; font-weight:700!important; }
.detail-qty { width:100%; height:52px!important; justify-content:center; }
.detail-qty .qty-btn { width:52px; height:44px; font-size:22px; }
.detail-qty .qty-value { min-width:50px; font-size:20px; font-weight:800; }

/* ====================== STAR RATING ====================== */
.star-rating { display:flex; align-items:center; gap:2px; margin:6px 0; }
.star-rating .star { font-size:18px; color:var(--star-empty); line-height:1; }
.star-rating .star.filled { color:#FFD60A; }
.star-rating .star.half { color:#FFD60A; opacity:0.6; }
.rating-text { font-size:13px; color:var(--text-secondary); margin-left:8px; font-weight:600; }
.no-rating { font-size:12px; color:var(--text-muted); margin:6px 0; }
.detail-rating { min-height:28px; }
.rating-loading { font-size:12px; color:var(--text-muted); }
.detail-rate-section { margin-top:8px; padding:14px; border-radius:var(--radius-sm); background:rgba(255,215,10,0.04); border:1px solid rgba(255,215,10,0.15); }
.detail-rate-label { font-size:12px; font-weight:700; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.06em; }
.interactive-stars { display:flex; gap:6px; }
.star-btn { font-size:32px; cursor:pointer; color:var(--star-empty); transition:all 0.15s ease; line-height:1; user-select:none; }
.star-btn.filled { color:#FFD60A; }
.star-btn:active { transform:scale(1.3); }
@media(hover:hover) { .star-btn:hover { color:#FFD60A; transform:scale(1.15); } }

/* ====================== ORDER RATE ====================== */
.order-item-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; }
.order-item-row span { flex:1; font-size:13px; color:var(--text-secondary); line-height:1.4; }
.order-rate-btn { width:28px; height:28px; min-width:28px; display:flex; align-items:center; justify-content:center; background:rgba(255,215,10,0.1); border:none; border-radius:8px; cursor:pointer; color:#FFD60A; transition:all 0.2s; }
.order-rate-btn:active { transform:scale(0.9); background:rgba(255,215,10,0.2); }

@media(max-width:480px) {
    .categories-grid { grid-template-columns:1fr; gap:10px; }
    .category-card { padding:14px 16px; }
    .category-icon { width:48px; height:48px; min-width:48px; border-radius:14px; }
    .category-name { font-size:15px; }
    .category-count { font-size:12px; }
    .detail-title { font-size:18px; }
    .detail-price { font-size:22px; }
    .detail-image { max-height:200px; }
    .star-btn { font-size:28px; }
}

/* Theme toggle row in profile */
.theme-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; transition:var(--transition); }
.theme-toggle-row:hover { background:rgba(229,56,59,0.04); }
.theme-toggle-left { display:flex; align-items:center; gap:12px; }
.theme-toggle-icon { width:22px; height:22px; color:var(--warning); display:flex; align-items:center; justify-content:center; }
.theme-toggle-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle-text { font-size:14px; font-weight:500; color:var(--text-primary); }
.theme-switch { position:relative; width:44px; height:26px; background:var(--text-muted); border-radius:13px; transition:background 0.25s; flex-shrink:0; }
.theme-switch::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform 0.25s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.theme-switch.active { background:var(--primary); }
.theme-switch.active::after { transform:translateX(18px); }

/* Header theme toggle */
.header-theme-btn { background:transparent; border:1px solid var(--border); width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); transition:var(--transition); padding:0; }
.header-theme-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.header-theme-btn:hover { color:var(--warning); border-color:var(--warning); background:rgba(255,159,10,0.06); }
@media (max-width:768px) {
    .header-theme-btn { width:32px; height:32px; border-radius:8px; }
    .header-theme-btn svg { width:16px; height:16px; }
}