/* ==========================================
   TOFU ASIAN BUFFET — ADMIN PANEL CSS v4.0
   Dark Premium Theme (matching main app)
========================================== */

/* ── ROOT VARIABLES (matching tofu-style.css) ── */
:root {
    --primary: #C8282A;
    --primary-soft: rgba(200,40,42,.12);
    --accent: #D4AF37;
    --accent-soft: rgba(212,175,55,.12);
    --gradient-premium: linear-gradient(135deg, #C8282A 0%, #E04E95 50%, #D4AF37 100%);
    --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #F0D77C 50%, #D4AF37 100%);
    --gradient-dark: linear-gradient(135deg, #0D0D0D 0%, #1A1118 50%, #0D0D0D 100%);
    --bg-base: #0D0D0D;
    --bg-surface: #1A1118;
    --bg-elevated: #241A22;
    --bg-card: #1E1620;
    --border: rgba(212,175,55,.12);
    --border-strong: rgba(212,175,55,.25);
    --text-white: #FFFFFF;
    --text-light: #F5F0E8;
    --text-gray: #B8A8B0;
    --text-muted: #7A6A72;
    --success: #25D366;
    --danger: #E53935;
    --warning: #FF9800;
    --info: #2196F3;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 50px;
    --font-display: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
    --shadow-glow: 0 0 20px rgba(200,40,42,.15), 0 0 40px rgba(212,175,55,.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--text-light);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:rgba(212,175,55,.3); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(212,175,55,.5); }

/* ══════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════ */
.login-screen {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh;
    background: var(--gradient-dark);
    position:relative;
    overflow:hidden;
}
.login-screen::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(circle at 30% 20%, rgba(200,40,42,.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(212,175,55,.06) 0%, transparent 50%);
    pointer-events:none;
}
.login-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    width: 400px; max-width:90vw;
    text-align:center;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    position:relative; z-index:1;
}
.login-logo-wrap { margin-bottom:20px; }
.login-logo {
    width:100px; height:100px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(212,175,55,.3);
    box-shadow: 0 0 20px rgba(212,175,55,.15);
}
.login-logo-fallback {
    width:100px; height:100px;
    background: var(--bg-elevated);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:48px;
    margin:0 auto;
    border:3px solid rgba(212,175,55,.3);
}
.login-box h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.login-sub {
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 28px;
}
.login-field {
    display:flex; align-items:center; gap:12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    transition: border-color .3s;
}
.login-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,175,55,.1);
}
.login-field i { color: var(--accent); font-size:16px; }
.login-field input {
    flex:1; background:none; border:none; outline:none;
    color: var(--text-white);
    font-size:15px; font-family: var(--font-body);
}
.login-field input::placeholder { color: var(--text-muted); }
.login-btn {
    width:100%; padding:15px;
    background: var(--gradient-premium);
    border:none; border-radius: var(--radius-full);
    color:#fff; font-weight:700; font-size:15px;
    font-family: var(--font-body);
    cursor:pointer;
    letter-spacing:.5px;
    transition: transform .2s, box-shadow .3s;
    box-shadow: 0 4px 15px rgba(200,40,42,.3);
}
.login-btn:hover { transform:translateY(-2px); box-shadow: 0 6px 20px rgba(200,40,42,.4); }
.login-btn:active { transform:translateY(0); }
.login-err {
    font-size:13px; color: var(--danger);
    margin-top:14px;
    opacity:0; transform:translateY(-8px);
    transition: opacity .3s, transform .3s;
}
.login-err.show { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════
   ADMIN APP CONTAINER
══════════════════════════════════════ */
.admin-app { display:none; min-height:100vh; }

/* ── ADMIN HEADER ── */
.admin-hdr {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:100;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}
.admin-hdr-left {
    display:flex; align-items:center; gap:12px;
}
.admin-hdr-logo {
    width:42px; height:42px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(212,175,55,.25);
}
.admin-hdr-left h1 {
    font-family: var(--font-display);
    font-size:16px; font-weight:700;
    color: var(--text-white);
    letter-spacing:.5px;
}
.admin-hdr-left span {
    font-size:11px; color: var(--accent);
    font-weight:500; display:block;
    letter-spacing:.3px;
}
.admin-hdr-right {
    display:flex; align-items:center; gap:8px;
}
.admin-refresh {
    width:38px; height:38px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:50%;
    color: var(--accent);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    transition: all .3s;
}
.admin-refresh:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: rotate(180deg);
}
.admin-hdr-right .btn-secondary,
.admin-hdr-right .btn-link,
a.admin-hdr-link {
    padding:8px 14px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-gray);
    font-size:12px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    text-decoration:none;
    transition: all .3s;
    display:inline-flex; align-items:center; gap:6px;
}
.admin-hdr-right .btn-secondary:hover,
.admin-hdr-right .btn-link:hover,
a.admin-hdr-link:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text-white);
}
.btn-logout {
    padding:8px 14px;
    background: rgba(229,57,53,.1);
    border:1px solid rgba(229,57,53,.25);
    border-radius: var(--radius-full);
    color: var(--danger);
    font-size:12px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    transition: all .3s;
}
.btn-logout:hover {
    background: rgba(229,57,53,.2);
    border-color: var(--danger);
}

/* ── TABS ── */
.admin-tabs {
    display:flex;
    background: var(--bg-surface);
    border-bottom:1px solid var(--border);
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
}
.admin-tab {
    padding:12px 14px;
    font-size:12px; font-weight:600;
    color: var(--text-muted);
    cursor:pointer;
    border:none; background:none;
    font-family: var(--font-body);
    white-space:nowrap;
    position:relative;
    transition: color .3s;
    display:flex; align-items:center; gap:6px;
    flex-shrink:0;
}
.admin-tab::after {
    content:'';
    position:absolute; bottom:0; left:50%; width:0;
    height:3px; border-radius:3px 3px 0 0;
    background: var(--gradient-premium);
    transition: width .3s, left .3s;
}
.admin-tab.active {
    color: var(--text-white);
}
.admin-tab.active::after {
    width:calc(100% - 20px); left:10px;
}
.admin-tab:hover:not(.active) { color: var(--text-gray); }
.admin-tab i { font-size:14px; }
.admin-tab.active i { color: var(--accent); }

/* ── TAB CONTENT ── */
.tab-content {
    display:none;
    padding:20px;
    max-width:1200px;
    margin:0 auto;
}
.tab-content.active { display:block; }

/* ══════════════════════════════════════
   STATS CARDS
══════════════════════════════════════ */
.stats-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
    margin-bottom:24px;
}
.stat-card {
    background: var(--bg-card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding:20px;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background: var(--gradient-premium);
}
.stat-card .stat-icon {
    width:44px; height:44px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 12px;
    font-size:18px;
}
.stat-card:nth-child(1) .stat-icon { background: var(--primary-soft); color: var(--primary); }
.stat-card:nth-child(2) .stat-icon { background: var(--accent-soft); color: var(--accent); }
.stat-card:nth-child(3) .stat-icon { background: rgba(37,211,102,.1); color: var(--success); }
.stat-card:nth-child(4) .stat-icon { background: rgba(33,150,243,.1); color: var(--info); }
.stat-card .stat-num {
    font-size:28px; font-weight:800;
    color: var(--text-white);
    line-height:1.2;
}
.stat-card .stat-label {
    font-size:12px; color: var(--text-muted);
    font-weight:500; margin-top:4px;
    letter-spacing:.3px;
}

/* ══════════════════════════════════════
   CHART
══════════════════════════════════════ */
.chart-wrap {
    background: var(--bg-card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding:20px;
    margin-bottom:24px;
    position:relative;
}
.chart-wrap h3 {
    font-family: var(--font-display);
    font-size:15px; font-weight:600;
    color: var(--text-white);
    margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
}
.chart-wrap h3 i { color: var(--accent); }
.chart-container { position:relative; height:280px; }

/* ══════════════════════════════════════
   ORDERS LIST
══════════════════════════════════════ */
.orders-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px;
}
.orders-header h3 {
    font-family: var(--font-display);
    font-size:15px; font-weight:600;
    color: var(--text-white);
    display:flex; align-items:center; gap:8px;
}
.orders-header h3 i { color: var(--accent); }
.btn-clear-orders {
    padding:8px 14px;
    background: rgba(229,57,53,.08);
    border:1px solid rgba(229,57,53,.2);
    border-radius: var(--radius-full);
    color: var(--danger);
    font-size:11px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    transition: all .3s;
}
.btn-clear-orders:hover {
    background: rgba(229,57,53,.15);
    border-color: var(--danger);
}

.order-card {
    background: var(--bg-card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding:16px;
    margin-bottom:10px;
    transition: border-color .3s;
}
.order-card:hover { border-color: var(--border-strong); }
.order-top {
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap;
    margin-bottom:8px;
}
.order-num {
    font-weight:700; font-size:14px;
    color: var(--accent);
    font-family: var(--font-display);
}
.order-status {
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
    padding:3px 10px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.05);
}
.order-date {
    font-size:12px; color: var(--text-muted);
    margin-left:auto;
}
.order-customer {
    font-size:13px; color: var(--text-gray);
    margin-bottom:8px;
}
.order-customer i { color: var(--accent); margin-right:4px; }
.order-items-list {
    font-size:13px; color: var(--text-gray);
    line-height:1.7;
    padding:8px 0;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
    margin-bottom:8px;
}
.order-total {
    font-size:20px; font-weight:800;
    color: var(--accent);
    margin-bottom:10px;
}
.order-actions {
    display:flex; align-items:center; gap:8px;
}
.order-status-select {
    flex:1;
    padding:8px 12px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font-size:12px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    outline:none;
    transition: border-color .3s;
}
.order-status-select:focus { border-color: var(--accent); }
.order-status-select option {
    background: var(--bg-surface);
    color: var(--text-light);
}

/* ══════════════════════════════════════
   PRODUCTS
══════════════════════════════════════ */
.products-toolbar {
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.products-toolbar .search-wrap {
    flex:1; min-width:200px;
    display:flex; align-items:center; gap:8px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-full);
    padding:10px 16px;
    transition: border-color .3s;
}
.products-toolbar .search-wrap:focus-within {
    border-color: var(--accent);
}
.products-toolbar .search-wrap i { color: var(--text-muted); font-size:14px; }
.products-toolbar .search-wrap input {
    flex:1; background:none; border:none; outline:none;
    color: var(--text-white);
    font-size:14px; font-family: var(--font-body);
}
.products-toolbar .search-wrap input::placeholder { color: var(--text-muted); }

.btn-new-product,
.btn-new-event {
    padding:10px 18px;
    background: var(--gradient-premium);
    border:none; border-radius: var(--radius-full);
    color:#fff; font-weight:700; font-size:13px;
    font-family: var(--font-body);
    cursor:pointer;
    display:flex; align-items:center; gap:6px;
    letter-spacing:.3px;
    box-shadow: 0 3px 12px rgba(200,40,42,.3);
    transition: transform .2s, box-shadow .3s;
    white-space:nowrap;
}
.btn-new-product:hover,
.btn-new-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(200,40,42,.4);
}

.voice-btn {
    width:38px; height:38px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:50%;
    color: var(--text-muted);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    transition: all .3s;
}
.voice-btn:hover { color: var(--accent); border-color: var(--accent); }
.voice-btn.listening { color: var(--danger); border-color: var(--danger); animation: pulse 1s infinite; }

@keyframes pulse {
    0%,100% { box-shadow:none; }
    50% { box-shadow: 0 0 0 6px rgba(229,57,53,.15); }
}

/* Category filter buttons */
.cat-filter-wrap {
    display:flex; gap:6px;
    overflow-x:auto;
    padding:2px 0;
    margin-bottom:14px;
    -webkit-overflow-scrolling: touch;
}
.pcat-btn {
    padding:8px 14px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size:12px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    white-space:nowrap;
    transition: all .3s;
}
.pcat-btn.active,
.pcat-btn:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text-white);
}
.pcat-btn.active {
    background: var(--gradient-premium);
    border-color: transparent;
    color:#fff;
}

/* Product list */
.product-item {
    display:flex; align-items:center; gap:14px;
    background: var(--bg-card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding:12px 14px;
    margin-bottom:8px;
    transition: border-color .3s, transform .2s;
}
.product-item:hover {
    border-color: var(--border-strong);
    transform: translateX(2px);
}
.product-item.product-hidden {
    opacity:.5;
    border-style:dashed;
}
.product-img {
    width:56px; height:56px;
    border-radius: var(--radius-sm);
    object-fit:cover;
    flex-shrink:0;
    border:1px solid rgba(255,255,255,.05);
}
.product-info { flex:1; min-width:0; }
.product-name {
    font-size:14px; font-weight:700;
    color: var(--text-white);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.product-cat {
    font-size:11px; color: var(--text-muted);
    font-weight:500; margin-top:2px;
}
.product-price {
    font-size:16px; font-weight:800;
    color: var(--accent);
    white-space:nowrap;
    padding:0 8px;
}
.product-actions {
    display:flex; gap:6px;
}
.edit-btn, .del-btn, .btn-sm, .btn-danger-xs {
    padding:8px 12px;
    border-radius: var(--radius-sm);
    border:1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-gray);
    font-size:12px;
    cursor:pointer;
    transition: all .3s;
    font-family: var(--font-body);
    font-weight:600;
    display:inline-flex; align-items:center; gap:5px;
}
.edit-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.del-btn:hover, .btn-danger-xs:hover {
    background: rgba(229,57,53,.1);
    border-color: var(--danger);
    color: var(--danger);
}
.btn-sm:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text-white);
}
.btn-danger-sm {
    padding:8px 14px;
    background: rgba(229,57,53,.08);
    border:1px solid rgba(229,57,53,.2);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size:12px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    transition: all .3s;
    display:inline-flex; align-items:center; gap:5px;
}
.btn-danger-sm:hover {
    background: rgba(229,57,53,.15);
    border-color: var(--danger);
}
.btn-primary-sm {
    padding:8px 14px;
    background: var(--gradient-premium);
    border:none;
    border-radius: var(--radius-sm);
    color:#fff;
    font-size:12px; font-weight:700;
    font-family: var(--font-body);
    cursor:pointer;
    transition: transform .2s;
    display:inline-flex; align-items:center; gap:5px;
}
.btn-primary-sm:hover { transform: translateY(-1px); }

.badge-hidden {
    font-size:10px; font-weight:600;
    color: var(--warning);
    background: rgba(255,152,0,.1);
    padding:2px 8px;
    border-radius: var(--radius-full);
    margin-left:6px;
}

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.admin-modal {
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    z-index:999;
    align-items:center; justify-content:center;
    padding:20px;
}
.admin-modal.active,
.admin-modal[style*="flex"] {
    display:flex;
}
.modal-content {
    background: var(--bg-surface);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    width:560px; max-width:95vw;
    max-height:90vh;
    overflow-y:auto;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.modal-hdr {
    padding:20px 24px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.modal-hdr h3 {
    font-family: var(--font-display);
    font-size:18px; font-weight:700;
    color: var(--text-white);
    display:flex; align-items:center; gap:8px;
}
.modal-hdr h3 i { color: var(--accent); }
.modal-close {
    width:36px; height:36px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:50%;
    color: var(--text-muted);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    transition: all .3s;
}
.modal-close:hover { color: var(--danger); border-color: var(--danger); }
.modal-body { padding:24px; }

/* Form fields */
.form-group {
    margin-bottom:16px;
}
.form-group label {
    display:block;
    font-size:12px; font-weight:600;
    color: var(--text-gray);
    margin-bottom:6px;
    letter-spacing:.3px;
}
.form-group label i { color: var(--accent); margin-right:4px; }
.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    padding:12px 14px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    font-size:14px;
    font-family: var(--font-body);
    outline:none;
    transition: border-color .3s, box-shadow .3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,175,55,.08);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group select option {
    background: var(--bg-surface);
    color: var(--text-light);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-row {
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.form-actions {
    display:flex; gap:10px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--border);
}
.btn-save {
    flex:1; padding:14px;
    background: var(--gradient-premium);
    border:none; border-radius: var(--radius-full);
    color:#fff; font-weight:700; font-size:14px;
    font-family: var(--font-body);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: transform .2s, box-shadow .3s;
    box-shadow: 0 3px 12px rgba(200,40,42,.3);
}
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(200,40,42,.4); }
.btn-cancel {
    padding:14px 24px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-gray);
    font-weight:600; font-size:14px;
    font-family: var(--font-body);
    cursor:pointer;
    transition: all .3s;
}
.btn-cancel:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text-white);
}

/* Image upload */
.img-upload-area {
    width:100%;
    padding:24px;
    border:2px dashed var(--border);
    border-radius: var(--radius-md);
    text-align:center;
    cursor:pointer;
    transition: all .3s;
    position:relative;
    overflow:hidden;
}
.img-upload-area:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.img-upload-area img {
    max-width:100%; max-height:180px;
    border-radius: var(--radius-sm);
    object-fit:contain;
}
.img-upload-area .placeholder {
    color: var(--text-muted);
    font-size:13px;
}
.img-upload-area .placeholder i {
    font-size:32px;
    margin-bottom:8px;
    display:block;
    color: var(--accent);
    opacity:.5;
}
.upload-btns {
    display:flex; gap:8px;
    margin-top:8px;
}
.upload-btns button {
    padding:8px 12px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-gray);
    font-size:12px; font-weight:600;
    font-family: var(--font-body);
    cursor:pointer;
    display:flex; align-items:center; gap:5px;
    transition: all .3s;
}
.upload-btns button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ══════════════════════════════════════
   PAGE EDITOR
══════════════════════════════════════ */
.editor-toolbar {
    display:flex; align-items:center; gap:10px;
    margin-bottom:16px;
    flex-wrap:wrap;
}
.editor-alert {
    padding:12px 16px;
    background: var(--accent-soft);
    border:1px solid rgba(212,175,55,.2);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size:12px; font-weight:500;
    margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
    line-height:1.5;
}
.editor-section {
    background: var(--bg-card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom:8px;
    overflow:hidden;
    transition: border-color .3s;
}
.editor-section.dirty { border-color: var(--warning); }
.editor-section-hdr {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px;
    cursor:pointer;
    transition: background .3s;
}
.editor-section-hdr:hover { background: rgba(255,255,255,.02); }
.es-arrows { display:flex; flex-direction:column; gap:2px; }
.es-arrow {
    width:24px; height:18px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:4px;
    color: var(--text-muted);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:10px;
    transition: all .3s;
}
.es-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.es-arrow:disabled { opacity:.3; cursor:default; }
.es-title {
    flex:1; font-weight:700; font-size:14px;
    color: var(--text-white);
}
.dirty-badge {
    font-size:10px; font-weight:600;
    color: var(--warning);
    background: rgba(255,152,0,.1);
    padding:3px 8px;
    border-radius: var(--radius-full);
}
.es-vis-badge {
    font-size:10px; font-weight:600;
    padding:3px 10px;
    border-radius: var(--radius-full);
}
.es-vis-badge.visible {
    color: var(--success);
    background: rgba(37,211,102,.1);
}
.es-vis-badge.hidden {
    color: var(--danger);
    background: rgba(229,57,53,.1);
}
.es-toggle {
    color: var(--text-muted);
    font-size:14px;
    transition: transform .3s, color .3s;
}
.editor-section.open .es-toggle { transform: rotate(90deg); color: var(--accent); }

.es-body {
    display:none;
    padding:0 16px 16px;
}
.editor-section.open .es-body { display:block; }

.es-field {
    margin-bottom:12px;
}
.es-field label {
    display:block;
    font-size:11px; font-weight:600;
    color: var(--text-muted);
    margin-bottom:5px;
    letter-spacing:.3px;
}
.es-field input,
.es-field select {
    width:100%;
    padding:10px 12px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    font-size:13px;
    font-family: var(--font-body);
    outline:none;
    transition: border-color .3s;
}
.es-field input:focus,
.es-field select:focus { border-color: var(--accent); }
.es-field select option { background: var(--bg-surface); color: var(--text-light); }

.es-img-upload {
    width:100%; min-height:80px;
    border:2px dashed var(--border);
    border-radius: var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    overflow:hidden;
    transition: border-color .3s;
}
.es-img-upload:hover { border-color: var(--accent); }
.es-img-upload img {
    max-width:100%; max-height:120px;
    border-radius:6px;
}
.es-img-upload .placeholder {
    text-align:center; color: var(--text-muted);
    font-size:12px; padding:12px;
}
.es-img-upload .placeholder i { font-size:24px; display:block; margin-bottom:4px; opacity:.5; }
.es-img-url-field {
    margin-top:8px;
}
.es-img-url-field label {
    font-size:10px; color: var(--text-muted);
    display:block; margin-bottom:3px;
}
.es-img-url-field input {
    width:100%;
    padding:8px 10px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-gray);
    font-size:12px;
    font-family: var(--font-body);
    outline:none;
}
.es-img-url-field input:focus { border-color: var(--accent); }
.es-actions {
    display:flex; gap:8px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.05);
}

/* ══════════════════════════════════════
   CUSTOMERS
══════════════════════════════════════ */
.customers-toolbar {
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.customers-toolbar .search-wrap {
    flex:1; min-width:200px;
    display:flex; align-items:center; gap:8px;
    background: var(--bg-elevated);
    border:1px solid var(--border);
    border-radius: var(--radius-full);
    padding:10px 16px;
    transition: border-color .3s;
}
.customers-toolbar .search-wrap:focus-within { border-color: var(--accent); }
.customers-toolbar .search-wrap i { color: var(--text-muted); font-size:14px; }
.customers-toolbar .search-wrap input {
    flex:1; background:none; border:none; outline:none;
    color: var(--text-white);
    font-size:14px; font-family: var(--font-body);
}
.customers-toolbar .search-wrap input::placeholder { color: var(--text-muted); }

.customer-card {
    display:flex; align-items:center; gap:14px;
    flex-wrap:wrap;
    background: var(--bg-card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding:14px 16px;
    margin-bottom:8px;
    transition: border-color .3s;
}
.customer-card:hover { border-color: var(--border-strong); }
.customer-info { flex:1; min-width:150px; }
.customer-name {
    font-size:14px; font-weight:700;
    color: var(--text-white);
}
.customer-name i { color: var(--accent); margin-right:5px; }
.customer-phone {
    font-size:12px; color: var(--text-gray);
    margin-top:2px;
}
.customer-phone i { color: var(--text-muted); margin-right:3px; }
.customer-date {
    font-size:11px; color: var(--text-muted);
    margin-top:2px;
}
.customer-stats {
    display:flex; align-items:center; gap:12px;
}
.cust-stat {
    text-align:center;
}
.cust-stat-num {
    display:block;
    font-size:18px; font-weight:800;
    color: var(--accent);
}
.cust-stat span:last-child {
    font-size:10px; color: var(--text-muted);
    font-weight:500;
}
.cust-progress {
    display:flex; align-items:center; gap:6px;
}
.mini-progress {
    width:60px; height:6px;
    background: var(--bg-elevated);
    border-radius:10px;
    overflow:hidden;
}
.mini-progress-bar {
    height:100%;
    background: var(--gradient-premium);
    border-radius:10px;
    transition: width .5s;
}
.cust-progress span {
    font-size:11px; color: var(--text-muted);
    font-weight:600;
}
.free-drink-badge {
    font-size:11px; font-weight:700;
    color: var(--success);
    background: rgba(37,211,102,.1);
    padding:4px 10px;
    border-radius: var(--radius-full);
}
.customer-actions {
    display:flex; gap:6px;
}

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.admin-toast {
    position:fixed;
    bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
    padding:14px 24px;
    background: var(--bg-surface);
    border:1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-light);
    font-size:14px; font-weight:600;
    font-family: var(--font-body);
    box-shadow: var(--shadow-lg);
    z-index:9999;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    white-space:nowrap;
    max-width:90vw;
    overflow:hidden;
    text-overflow:ellipsis;
}
.admin-toast.show { transform:translateX(-50%) translateY(0); }
.admin-toast.success { border-color: rgba(37,211,102,.3); }
.admin-toast.error { border-color: rgba(229,57,53,.3); }

/* ══════════════════════════════════════
   NO DATA STATE
══════════════════════════════════════ */
.no-data {
    text-align:center;
    padding:48px 20px;
    color: var(--text-muted);
}
.no-data i {
    font-size:40px;
    margin-bottom:12px;
    display:block;
    opacity:.5;
}
.no-data p { font-size:14px; font-weight:500; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px) {
    .admin-hdr { padding:10px 14px; }
    .admin-hdr-left h1 { font-size:14px; }
    .tab-content { padding:14px; }
    .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .form-row { grid-template-columns:1fr; }
    .product-item { flex-wrap:wrap; }
    .product-price { order:3; width:100%; text-align:right; padding:4px 0 0; }
    .customer-card { flex-direction:column; align-items:flex-start; }
    .customer-stats { width:100%; justify-content:flex-start; }
    .customer-actions { width:100%; }
    .modal-content { width:100%; margin:0; border-radius: var(--radius-md); }
    .order-card { padding:12px; }
    .order-actions { flex-wrap:wrap; }
    .admin-tabs { padding:0 6px; }
    .admin-tab { padding:12px 12px; font-size:12px; }
}

@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .login-box { padding:32px 24px; }
    .products-toolbar { flex-direction:column; }
    .products-toolbar .search-wrap { min-width:unset; width:100%; }
    .admin-hdr-right .btn-secondary,
    .admin-hdr-right .btn-link,
    a.admin-hdr-link { display:none; }
}