:root {
    --bg-page: #f5f7fa;
    --bg-white: #ffffff;
    --bg-light: #f0f2f5;
    --bg-hover: #f8f9fb;
    --border: #e5e7eb;
    --border-light: #f0f0f0;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --primary: #4f46e5;
    --primary-light: #eef2ff;
    --primary-dark: #4338ca;
    --success: #16a34a;
    --success-light: #f0fdf4;
    --warning: #d97706;
    --warning-light: #fffbeb;
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --info: #2563eb;
    --info-light: #eff6ff;
    --orange: #ea580c;
    --orange-light: #fff7ed;
    --purple: #7c3aed;
    --purple-light: #f5f3ff;
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);
    --transition: 0.2s ease;
    --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
    --accent-primary: #4f46e5;
    --accent-secondary: #8b5cf6;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --radius-md: 10px;
    --radius-lg: 14px;
    --success-bg: #f0fdf4;
    --danger-bg: #fef2f2;
    --warning-bg: #fffbeb;
    --info-bg: #eff6ff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ===== LOGIN ===== */
.login-screen {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.login-screen.active { opacity: 1; pointer-events: all; }
.login-screen.fade-out { opacity: 0; transition: all 0.8s ease; }

#particles-canvas { position: absolute; inset: 0; z-index: 0; }
.login-bg-glow { display: none; }

.login-container {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    animation: slideUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-brand { text-align: center; }
.logo-icon {
    width: 72px; height: 72px; margin: 0 auto 16px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    animation: none;
}
.login-brand h1 { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.login-brand h1 span { color: rgba(255,255,255,0.8); }
.login-tagline { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; }

.login-card {
    width: 380px; padding: 32px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    border: none;
    backdrop-filter: none;
}
.login-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 20px; text-align: center; color: var(--text-primary); }

.form-group { margin-bottom: 14px; }
.input-icon { position: relative; }
.input-icon i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 13px;
}
.input-icon input {
    width: 100%; padding: 12px 12px 12px 40px;
    background: var(--bg-light); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-size: 14px; font-family: inherit; outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input-icon input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
    background: #fff;
}
.input-icon:focus-within i { color: var(--primary); }

.btn-primary {
    width: 100%; padding: 12px 24px;
    background: var(--primary); border: none;
    border-radius: var(--radius-sm); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all var(--transition);
}
.btn-primary::before { display: none; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-login { margin-top: 4px; }

.login-role-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.login-role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.login-role-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; border: 1px solid var(--border); background: var(--bg-light);
    border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
    transition: all 0.2s ease; color: var(--text-secondary);
}
.login-role-btn i { font-size: 16px; }
.login-role-btn span { font-size: 10px; font-weight: 600; }
.login-role-btn:hover { border-color: var(--primary); color: var(--primary); }
.login-role-btn.active {
    background: var(--primary-light); border-color: var(--primary); color: var(--primary);
    box-shadow: 0 0 0 2px rgba(79,70,229,0.15);
}

.login-footer { margin-top: 20px; text-align: center; padding-top: 16px; border-top: 1px solid var(--border); }
.login-footer p { font-size: 12px; color: var(--text-muted); }
.login-partners { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--text-secondary); font-weight: 600; margin-bottom: 4px; }
.login-sep { color: var(--primary); font-weight: 700; }
.login-tubitak { font-size: 10px; color: var(--primary); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 2px; }
.login-version { margin-top: 2px; }

/* ===== APP ===== */
.app-container { display: flex; height: 100vh; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-width); height: 100vh;
    background: var(--bg-white);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; z-index: 100;
    transition: transform var(--transition-slow);
}
.sidebar.collapsed { transform: translateX(-100%); }

.sidebar-brand {
    padding: 16px 16px; display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border-light);
}
.brand-icon {
    width: 36px; height: 36px;
    background: var(--primary);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #fff;
}
.brand-text h2 { font-size: 20px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; }
.brand-text h2 span { color: var(--primary); }
.brand-text small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.sidebar-nav {
    flex: 1; padding: 8px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: all var(--transition);
    position: relative;
}
.nav-item i { width: 18px; text-align: center; font-size: 14px; }
.nav-item:hover { background: var(--bg-light); color: var(--text-primary); }
.nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; background: var(--primary); border-radius: 0 4px 4px 0;
}
.nav-item.nav-hidden { display: none; }
.nav-item.nav-hidden-plan { display: none; }

/* Plan Switcher */
.plan-switcher {
    display: flex; margin: 0 8px 4px; padding: 3px;
    background: var(--bg-light); border-radius: 8px; gap: 2px;
}
.plan-btn {
    flex: 1; padding: 6px 0; border: none; background: none;
    font-size: 11px; font-weight: 600; cursor: pointer;
    border-radius: 6px; font-family: inherit;
    color: var(--text-muted); transition: all 0.2s;
}
.plan-btn:hover { color: var(--text-secondary); }
.plan-btn.active {
    background: var(--bg-white); color: var(--primary);
    box-shadow: var(--shadow-xs);
}

.btn-flow-demo {
    width: 100%; padding: 10px 12px; border: 1px dashed var(--primary);
    background: var(--primary-light); color: var(--primary);
    border-radius: var(--radius-sm); cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: inherit;
    display: flex; align-items: center; gap: 8px; justify-content: center;
    transition: all var(--transition);
}
.btn-flow-demo:hover { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-flow-demo i { font-size: 14px; }

.sidebar-footer {
    padding: 12px; border-top: 1px solid var(--border-light);
    display: flex; align-items: center; gap: 10px;
}
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-info strong { font-size: 12px; display: block; font-weight: 600; }
.user-info small { font-size: 11px; color: var(--text-muted); }
.btn-logout {
    width: 32px; height: 32px; border: none;
    background: var(--danger-light); color: var(--danger);
    border-radius: var(--radius-xs); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.btn-logout:hover { background: var(--danger); color: #fff; }

/* ===== MAIN ===== */
.main-content {
    flex: 1; margin-left: var(--sidebar-width);
    display: flex; flex-direction: column; height: 100vh;
    transition: margin-left var(--transition-slow);
}
.sidebar.collapsed ~ .main-content { margin-left: 0; }

/* ===== TOPBAR ===== */
.topbar {
    height: var(--topbar-height); padding: 0 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.sidebar-toggle {
    width: 32px; height: 32px; border: 1px solid var(--border);
    background: var(--bg-white); color: var(--text-secondary);
    border-radius: var(--radius-xs); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.sidebar-toggle:hover { background: var(--bg-light); }
.topbar-title h1 { font-size: 16px; font-weight: 700; }
.topbar-subtitle { font-size: 11px; color: var(--text-muted); }

/* Mode Switcher */
.mode-switcher {
    display: flex; background: var(--bg-light); border-radius: 10px; padding: 3px; gap: 2px;
}
.mode-btn {
    padding: 7px 16px; border: none; background: none;
    border-radius: 8px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer;
    transition: all var(--transition); font-family: inherit;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.mode-btn i { font-size: 12px; }
.mode-btn:hover { color: var(--text-primary); }
.mode-btn.active {
    background: var(--bg-white); color: var(--primary);
    box-shadow: var(--shadow-xs);
}

.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-clock, .topbar-date {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
}
.topbar-clock i, .topbar-date i { font-size: 11px; color: var(--primary); }
.topbar-notifications {
    position: relative; cursor: pointer;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xs); transition: background var(--transition);
}
.topbar-notifications:hover { background: var(--bg-light); }
.topbar-notifications i { font-size: 15px; color: var(--text-secondary); }
.notification-badge {
    position: absolute; top: 2px; right: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--danger); color: #fff;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    animation: none;
}
.topbar-status {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--success);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; animation: none; }
.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--danger); animation: offlinePulse 1.5s ease infinite; }
@keyframes offlinePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ===== VIEW ===== */
.view-container { flex: 1; overflow-y: auto; padding: 20px; background: var(--bg-page); }
.view-enter { animation: viewIn 0.3s ease forwards; }
@keyframes viewIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== CARDS ===== */
.glass-card {
    background: var(--bg-white); border: none;
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card {
    background: var(--bg-white); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow-xs);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.card-header h3 { font-size: 14px; font-weight: 600; }

/* ===== KPI ===== */
.kpi-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
    margin-bottom: 20px;
}
.kpi-card {
    background: var(--bg-white); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow-xs); transition: all var(--transition);
}
.kpi-card::before { display: none; }
.kpi-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpi-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin-bottom: 14px;
}
.kpi-icon.blue { background: var(--info-light); color: var(--info); }
.kpi-icon.green { background: var(--success-light); color: var(--success); }
.kpi-icon.orange { background: var(--orange-light); color: var(--orange); }
.kpi-icon.purple { background: var(--purple-light); color: var(--purple); }
.kpi-icon.red { background: var(--danger-light); color: var(--danger); }
.kpi-value { font-size: 24px; font-weight: 800; line-height: 1; margin-bottom: 4px; letter-spacing: -0.5px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.kpi-trend { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

.dashboard-grid { display: grid; grid-template-columns: 2fr minmax(0,1fr); gap: 14px; margin-bottom: 14px; }
.dashboard-grid.dash-triple { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Dashboard Finance Cards */
.dash-finance-grid { display: flex; flex-direction: column; gap: 10px; }
.dash-fin-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.dash-fin-item:last-child { border-bottom: none; }
.dash-fin-label { font-size: 12px; color: var(--text-secondary); }
.dash-fin-value { font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.dash-fin-highlight { background: var(--bg-light); margin: 0 -20px; padding: 10px 20px !important; border-bottom: none !important; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--text-muted); }
.fw-700 { font-weight: 700; }

/* Dashboard Terminal Grid */
.dash-terminal-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dash-terminal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; }
.dash-terminal-item i { font-size: 14px; width: 18px; text-align: center; }
.dash-terminal-item span { flex: 1; font-weight: 500; }
.dash-terminal-item small { font-size: 10px; font-weight: 600; }
.dash-terminal-item.online { background: var(--success-light); color: var(--success); }
.dash-terminal-item.online small { color: var(--success); }
.dash-terminal-item.offline { background: var(--danger-light); color: var(--text-muted); }
.dash-terminal-item.offline small { color: var(--danger); }
.dash-sync-status { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-secondary); padding-top: 8px; border-top: 1px solid var(--border-light); }

/* Dashboard Integration Flow */
.dash-flow { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 0; flex-wrap: wrap; }
.dash-flow-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-light); border: 1px solid var(--border-light); min-width: 80px; transition: all 0.3s ease; }
.dash-flow-step.active { background: var(--primary-light); border-color: rgba(79,70,229,0.2); color: var(--primary); }
.dash-flow-step i { font-size: 18px; }
.dash-flow-step span { font-size: 10px; font-weight: 600; }
.dash-flow-arrow { color: var(--text-muted); font-size: 12px; }
.dash-flow-arrow i { animation: flowPulse 2s ease infinite; }
@keyframes flowPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* Dashboard Stock Alerts */
.dash-stock-alerts { display: flex; flex-direction: column; gap: 8px; }
.dash-stock-alert { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--warning-light); border-radius: var(--radius-sm); border: 1px solid rgba(217,119,6,0.1); }
.dash-stock-name { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dash-stock-info { display: flex; align-items: center; gap: 6px; font-size: 12px; }

/* Badge variants */
.badge-success { background: var(--success-light); color: var(--success); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-purple { background: var(--purple-light); color: var(--purple); }
.dashboard-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.chart-container { position: relative; height: 260px; }

/* ===== TABLES ===== */
.floor-plan {
    display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; padding: 20px;
}
.table-item {
    aspect-ratio: 1; border-radius: var(--radius);
    border: 2px solid var(--border);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; cursor: pointer;
    transition: all 0.25s ease;
    background: var(--bg-white);
    position: relative;
}
.table-item::before { display: none; }
.table-item:hover { transform: scale(1.04); box-shadow: var(--shadow-md); }
.table-item.empty { border-color: #bbf7d0; background: #f0fdf4; }
.table-item.occupied { border-color: #fed7aa; background: #fff7ed; }
.table-item.reserved { border-color: #bfdbfe; background: #eff6ff; }
.table-item.bill { border-color: #fecaca; background: #fef2f2; }
.table-number { font-size: 22px; font-weight: 800; }
.table-status {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 3px 8px; border-radius: 12px;
}
.table-item.empty .table-status { background: #dcfce7; color: var(--success); }
.table-item.occupied .table-status { background: #ffedd5; color: var(--orange); }
.table-item.reserved .table-status { background: #dbeafe; color: var(--info); }
.table-item.bill .table-status { background: #fee2e2; color: var(--danger); }
.table-amount { font-size: 13px; font-weight: 700; }
.table-time { font-size: 10px; color: var(--text-muted); }

.floor-legend {
    display: flex; gap: 20px; padding: 14px 20px;
    border-top: 1px solid var(--border-light);
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.green { background: var(--success); }
.legend-dot.orange { background: var(--orange); }
.legend-dot.blue { background: var(--info); }
.legend-dot.red { background: var(--danger); }

/* ===== ORDERS ===== */
.order-layout {
    display: grid; grid-template-columns: 180px minmax(0,1fr) 320px; gap: 14px;
    height: calc(100vh - var(--topbar-height) - 40px);
}
.category-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.category-btn {
    padding: 11px 12px; border: none;
    background: transparent; color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: 8px;
    transition: all var(--transition); border: 1px solid transparent;
    font-family: inherit;
}
.category-btn i { font-size: 14px; width: 18px; text-align: center; }
.category-btn:hover { background: var(--bg-light); color: var(--text-primary); }
.category-btn.active { background: var(--primary-light); color: var(--primary); border-color: rgba(79,70,229,0.15); }

.menu-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(145px,1fr));
    gap: 10px; overflow-y: auto; padding: 2px; align-content: start;
}
.menu-item {
    background: var(--bg-white); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); padding: 14px;
    cursor: pointer; transition: all var(--transition);
    text-align: center; position: relative;
}
.menu-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.menu-item.out-of-stock { opacity: 0.35; pointer-events: none; }
.menu-item-icon { font-size: 28px; margin-bottom: 6px; }
.menu-item-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.menu-item-price { font-size: 14px; font-weight: 700; color: var(--primary); }
.menu-item .stock-badge {
    position: absolute; top: 6px; right: 6px;
    font-size: 9px; padding: 2px 5px; border-radius: 6px; font-weight: 600;
}
.stock-low { background: var(--warning-light); color: var(--warning); }
.stock-out { background: var(--danger-light); color: var(--danger); }

.order-panel {
    background: var(--bg-white); border: 1px solid var(--border-light);
    border-radius: var(--radius); display: flex; flex-direction: column;
    box-shadow: var(--shadow-xs);
}
.order-panel-header {
    padding: 14px 16px; border-bottom: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: space-between;
}
.order-panel-header h3 { font-size: 14px; font-weight: 700; }
.order-items { flex: 1; overflow-y: auto; padding: 6px; }
.order-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: var(--radius-xs);
    transition: background var(--transition);
    animation: itemSlideIn 0.25s ease forwards;
}
.order-item:hover { background: var(--bg-light); }
@keyframes itemSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}
.order-item-qty { display: flex; align-items: center; gap: 3px; }
.order-item-qty button {
    width: 24px; height: 24px; border: 1px solid var(--border);
    background: var(--bg-white); color: var(--text-primary);
    border-radius: 6px; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.order-item-qty button:hover { border-color: var(--primary); background: var(--primary-light); }
.order-item-qty span { width: 20px; text-align: center; font-weight: 700; font-size: 13px; }
.order-item-info { flex: 1; }
.order-item-info .name { font-size: 12px; font-weight: 600; }
.order-item-info .unit-price { font-size: 11px; color: var(--text-muted); }
.order-item-total { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.order-item-remove {
    width: 22px; height: 22px; border: none;
    background: transparent; color: var(--danger);
    cursor: pointer; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all var(--transition); font-size: 11px;
}
.order-item:hover .order-item-remove { opacity: 1; }
.order-item-remove:hover { background: var(--danger-light); }

.order-summary { padding: 14px 16px; border-top: 1px solid var(--border-light); }
.order-summary-row {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--text-secondary); padding: 3px 0;
}
.order-summary-row.total {
    font-size: 16px; font-weight: 800; color: var(--text-primary);
    padding: 10px 0 0; margin-top: 6px; border-top: 1px solid var(--border-light);
}
.order-summary-row.total span:last-child { color: var(--primary); }
.order-actions {
    padding: 14px 16px; display: flex; gap: 8px;
    border-top: 1px solid var(--border-light);
}

/* ===== BUTTONS ===== */
.btn {
    padding: 9px 16px; border: none; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all var(--transition); font-family: inherit;
}
.btn-accent { background: var(--primary); color: #fff; }
.btn-accent:hover { background: var(--primary-dark); box-shadow: var(--shadow-sm); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); }
.btn-warning { background: var(--warning); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { background: var(--bg-white); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--text-primary); color: var(--text-primary); background: var(--bg-light); }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn-lg { padding: 12px 24px; font-size: 14px; }
.btn-full { width: 100%; }

/* ===== KITCHEN ===== */
.k-view { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-height) - 40px); gap: 16px; }

.k-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.k-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.k-stat {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: var(--bg-white); border: 1px solid var(--border-light);
    border-radius: 10px; box-shadow: var(--shadow-xs); min-width: 120px;
}
.k-stat-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.k-stat-icon.blue { background: var(--info-light); color: var(--info); }
.k-stat-icon.orange { background: var(--orange-light); color: var(--orange); }
.k-stat-icon.green { background: var(--success-light); color: var(--success); }
.k-stat-icon.red { background: var(--danger-light); color: var(--danger); }
.k-stat-num { font-size: 20px; font-weight: 800; line-height: 1; }
.k-stat-label { font-size: 10px; color: var(--text-muted); font-weight: 500; }

.k-filters { display: flex; gap: 4px; background: var(--bg-light); padding: 3px; border-radius: 10px; }
.k-filter-btn {
    padding: 7px 14px; border: none; background: none; border-radius: 8px;
    font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-muted);
    transition: all 0.2s ease; font-family: inherit; display: flex; align-items: center; gap: 5px;
}
.k-filter-btn:hover { color: var(--text-primary); }
.k-filter-btn.active { background: var(--bg-white); color: var(--primary); box-shadow: var(--shadow-xs); }
.k-filter-btn .k-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700;
    background: rgba(0,0,0,0.06); padding: 0 5px;
}
.k-filter-btn.active .k-count { background: var(--primary-light); color: var(--primary); }

.k-board { flex: 1; overflow-y: auto; padding: 2px; }
.k-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
    align-content: start;
}

.k-card {
    background: var(--bg-white); border-radius: 14px; overflow: hidden;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
    animation: kCardIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex; flex-direction: column;
}
.k-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
@keyframes kCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.k-card-top {
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    position: relative; overflow: hidden;
}
.k-card-top::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.k-card.s-new .k-card-top::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.k-card.s-preparing .k-card-top::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.k-card.s-ready .k-card-top::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.k-card.s-overdue .k-card-top::before { background: linear-gradient(90deg, #ef4444, #f87171); }

.k-card.s-new { border-color: rgba(59,130,246,0.2); }
.k-card.s-preparing { border-color: rgba(245,158,11,0.2); }
.k-card.s-ready { border-color: rgba(34,197,94,0.2); }
.k-card.s-overdue { border-color: rgba(239,68,68,0.25); animation: kCardIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards, kOverduePulse 2s ease infinite; }
@keyframes kOverduePulse { 0%,100% { box-shadow: var(--shadow-sm); } 50% { box-shadow: 0 0 0 3px rgba(239,68,68,0.12), var(--shadow-sm); } }

.k-table-badge {
    display: flex; align-items: center; gap: 8px;
}
.k-table-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.k-card.s-new .k-table-icon { background: var(--info-light); color: var(--info); }
.k-card.s-preparing .k-table-icon { background: var(--orange-light); color: var(--orange); }
.k-card.s-ready .k-table-icon { background: var(--success-light); color: var(--success); }
.k-card.s-overdue .k-table-icon { background: var(--danger-light); color: var(--danger); }
.k-table-name { font-size: 15px; font-weight: 700; }
.k-order-id { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.k-timer { text-align: right; }
.k-timer-val {
    font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1;
}
.k-card.s-new .k-timer-val { color: var(--info); }
.k-card.s-preparing .k-timer-val { color: var(--orange); }
.k-card.s-ready .k-timer-val { color: var(--success); }
.k-card.s-overdue .k-timer-val { color: var(--danger); }
.k-status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.k-card.s-new .k-status-pill { background: var(--info-light); color: var(--info); }
.k-card.s-preparing .k-status-pill { background: var(--orange-light); color: var(--orange); }
.k-card.s-ready .k-status-pill { background: var(--success-light); color: var(--success); }
.k-card.s-overdue .k-status-pill { background: var(--danger-light); color: var(--danger); }

.k-note {
    padding: 6px 16px; font-size: 11px; font-weight: 500;
    background: var(--warning-light); color: var(--warning);
    border-top: 1px solid rgba(217,119,6,0.1); border-bottom: 1px solid rgba(217,119,6,0.1);
    display: flex; align-items: center; gap: 6px;
}

.k-progress-bar {
    height: 3px; background: var(--bg-light); margin: 0;
}
.k-progress-fill {
    height: 100%; border-radius: 0 2px 2px 0; transition: width 0.4s ease;
}
.k-card.s-new .k-progress-fill { background: var(--info); }
.k-card.s-preparing .k-progress-fill { background: var(--orange); }
.k-card.s-ready .k-progress-fill { background: var(--success); }
.k-card.s-overdue .k-progress-fill { background: var(--danger); }

.k-items { padding: 10px 16px; flex: 1; }
.k-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--border-light);
    cursor: pointer; transition: all 0.15s ease;
}
.k-item:last-child { border-bottom: none; }
.k-item:hover { padding-left: 4px; }
.k-item.done .k-item-name { text-decoration: line-through; color: var(--text-muted); }
.k-item-check {
    width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: transparent; transition: all 0.2s ease; flex-shrink: 0;
}
.k-item.done .k-item-check { background: var(--success); border-color: var(--success); color: #fff; }
.k-item-qty {
    min-width: 28px; height: 24px; border-radius: 6px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.k-card.s-new .k-item-qty { background: var(--info-light); color: var(--info); }
.k-card.s-preparing .k-item-qty { background: var(--orange-light); color: var(--orange); }
.k-card.s-ready .k-item-qty { background: var(--success-light); color: var(--success); }
.k-card.s-overdue .k-item-qty { background: var(--danger-light); color: var(--danger); }
.k-item-name { flex: 1; font-size: 13px; font-weight: 500; }

.k-actions {
    padding: 10px 16px; border-top: 1px solid var(--border-light);
    display: flex; gap: 6px; background: var(--bg-light); border-radius: 0 0 14px 14px;
}
.k-btn {
    flex: 1; padding: 9px 12px; border: none; border-radius: 9px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s ease; font-family: inherit;
}
.k-btn-primary { background: var(--primary); color: #fff; }
.k-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.k-btn-warning { background: var(--warning); color: #fff; }
.k-btn-warning:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(217,119,6,0.3); }
.k-btn-success { background: var(--success); color: #fff; }
.k-btn-success:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(22,163,74,0.3); }
.k-btn-danger-outline {
    background: transparent; color: var(--danger); border: 1px solid rgba(239,68,68,0.25);
}
.k-btn-danger-outline:hover { background: var(--danger-light); border-color: var(--danger); }
.k-btn-danger { background: var(--danger); color: #fff; }
.k-btn-danger:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(220,38,38,0.3); }

.k-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 60px 20px; text-align: center;
}
.k-empty-icon {
    width: 80px; height: 80px; border-radius: 20px;
    background: var(--success-light); color: var(--success);
    display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.k-empty-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.k-empty-desc { font-size: 13px; color: var(--text-muted); max-width: 300px; }

/* ===== PAYMENT ===== */
.payment-layout {
    display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 14px;
    height: calc(100vh - var(--topbar-height) - 40px);
}
.receipt-preview {
    background: #fff; color: #333; border-radius: var(--radius);
    padding: 28px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
    max-height: 100%; overflow-y: auto;
}
.receipt-preview .receipt-header { text-align: center; margin-bottom: 14px; }
.receipt-preview .receipt-header h2 { font-size: 16px; margin-bottom: 3px; }
.receipt-preview .receipt-divider { border: none; border-top: 1px dashed #d1d5db; margin: 10px 0; }
.receipt-preview .receipt-item { display: flex; justify-content: space-between; padding: 3px 0; }
.receipt-preview .receipt-total {
    display: flex; justify-content: space-between;
    font-size: 15px; font-weight: 700; padding: 6px 0;
    border-top: 2px solid #333; margin-top: 6px;
}
.payment-methods { display: flex; flex-direction: column; gap: 10px; }
.payment-method-btn {
    padding: 16px; border: 1px solid var(--border);
    background: var(--bg-white); border-radius: var(--radius);
    cursor: pointer; transition: all var(--transition);
    display: flex; align-items: center; gap: 14px; color: var(--text-primary);
}
.payment-method-btn:hover { border-color: var(--primary); }
.payment-method-btn.selected { border-color: var(--primary); background: var(--primary-light); }
.payment-method-btn i { font-size: 20px; color: var(--primary); }
.payment-method-btn .method-name { font-size: 14px; font-weight: 600; }
.payment-method-btn .method-desc { font-size: 11px; color: var(--text-muted); }

.numpad { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.numpad-btn {
    padding: 14px; border: 1px solid var(--border);
    background: var(--bg-white); color: var(--text-primary);
    border-radius: var(--radius-sm); font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all var(--transition);
}
.numpad-btn:hover { background: var(--bg-light); border-color: var(--primary); }
.numpad-btn.accent { background: var(--primary); color: #fff; border-color: var(--primary); }
.numpad-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* e-Adisyon receipt extras */
.receipt-badge {
    display: inline-block; background: var(--primary); color: #fff;
    padding: 3px 12px; border-radius: 4px; font-size: 10px;
    font-weight: 800; letter-spacing: 1.5px; margin: 8px auto;
    text-align: center;
}
.receipt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 10px; }
.receipt-meta span { color: #888; }
.receipt-meta strong { color: #333; }
.receipt-items-header { display: flex; justify-content: space-between; font-weight: 700; font-size: 10px; text-transform: uppercase; padding: 4px 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; color: #666; }
.receipt-footer { text-align: center; margin-top: 8px; }
.receipt-legal { font-weight: 700; font-size: 10px; margin-bottom: 4px; }
.receipt-thanks { margin-top: 8px; font-style: italic; color: #666; }
.receipt-barcode { font-family: monospace; letter-spacing: 2px; font-size: 14px; margin-top: 8px; color: #333; }

/* Payment integration info */
.payment-integration-info { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--success-light); border-radius: var(--radius-sm); border: 1px solid rgba(22,163,74,0.15); }
.pi-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.pi-row i { font-size: 13px; flex-shrink: 0; }

/* Payment success steps */
.payment-success-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; text-align: left; }
.pss-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); animation: pssSlide 0.4s ease forwards; opacity: 0; }
.pss-item:nth-child(1) { animation-delay: 0.5s; }
.pss-item:nth-child(2) { animation-delay: 1.0s; }
.pss-item:nth-child(3) { animation-delay: 1.5s; }
.pss-item:nth-child(4) { animation-delay: 2.0s; }
.pss-item i { color: var(--success); font-size: 15px; }
@keyframes pssSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* ===== DATA TABLE ===== */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead th {
    padding: 10px 14px; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-light); position: sticky; top: 0;
}
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--border-light); }

.badge { display: inline-flex; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-info { background: var(--info-light); color: var(--info); }

.progress-bar { height: 5px; background: var(--bg-light); border-radius: 3px; overflow: hidden; width: 100%; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.progress-fill.green { background: var(--success); }
.progress-fill.orange { background: var(--orange); }
.progress-fill.red { background: var(--danger); }

/* ===== ACCOUNTING ===== */
.accounting-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.account-card {
    background: var(--bg-white); border: 1px solid var(--border-light);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-xs);
}
.account-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.account-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.account-card-title { font-size: 12px; color: var(--text-secondary); }
.account-card-value { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.transaction-list { display: flex; flex-direction: column; }
.transaction-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border-light);
}
.transaction-item:last-child { border-bottom: none; }
.transaction-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.transaction-info { flex: 1; }
.transaction-info .tx-title { font-size: 12px; font-weight: 600; }
.transaction-info .tx-time { font-size: 11px; color: var(--text-muted); }
.transaction-amount { font-weight: 700; }
.transaction-amount.income { color: var(--success); }
.transaction-amount.expense { color: var(--danger); }

/* ===== REPORTS ===== */
.report-filters { display: flex; gap: 6px; margin-bottom: 14px; }
.filter-btn {
    padding: 7px 14px; border: 1px solid var(--border);
    background: var(--bg-white); color: var(--text-secondary);
    border-radius: 20px; cursor: pointer; font-size: 12px;
    font-weight: 600; transition: all var(--transition); font-family: inherit;
}
.filter-btn:hover { background: var(--bg-light); color: var(--text-primary); }
.filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.top-items-list { display: flex; flex-direction: column; gap: 10px; }
.top-item { display: flex; align-items: center; gap: 10px; }
.top-item-rank {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.top-item-info { flex: 1; }
.top-item-name { font-size: 12px; font-weight: 600; }
.top-item-count { font-size: 11px; color: var(--text-muted); }
.top-item-revenue { font-weight: 700; font-size: 13px; color: var(--primary); }

/* ===== TOAST ===== */
.toast-container {
    position: fixed; top: 16px; right: 16px; z-index: 10000;
    display: flex; flex-direction: column; gap: 6px;
}
.toast {
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 10px;
    min-width: 280px; max-width: 400px;
    animation: toastIn 0.3s ease forwards;
}
.toast.removing { animation: toastOut 0.25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(60px); } }
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--info); }
.toast-icon { font-size: 16px; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--info); }
.toast-message { flex: 1; font-size: 13px; font-weight: 500; }

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.modal-overlay.hidden { display: none; }
.modal-content {
    width: 100%; max-width: 540px; max-height: 85vh;
    padding: 0; overflow: hidden;
    background: var(--bg-white);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 16px 48px -8px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.06);
    animation: modalIn 0.2s ease-out forwards;
    display: flex; flex-direction: column;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes modalOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(6px); }
}
.modal-inner { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; flex: 1; }
.modal-inner::-webkit-scrollbar { width: 4px; }
.modal-inner::-webkit-scrollbar-track { background: transparent; }
.modal-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
    background: var(--bg-white); position: sticky; top: 0; z-index: 2;
}
.modal-header h2 { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.modal-close {
    width: 28px; height: 28px; border: none;
    background: transparent; color: var(--text-muted);
    border-radius: 6px; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--bg-light); color: var(--text-primary); }
.modal-body-wrap { padding: 20px; }
.modal-content:has(.dm-wrapper) .modal-header { display: none; }
.modal-content:has(.dm-wrapper) .modal-body-wrap { padding: 0; }

/* ===== CINEMATIC FLOW ===== */
.flow-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
}
.flow-overlay.active { opacity: 1; }

.flow-title {
    font-size: 13px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px;
}
.flow-subtitle {
    font-size: 28px; font-weight: 800; color: var(--text-primary);
    margin-bottom: 48px; text-align: center; letter-spacing: -0.5px;
}

.flow-steps {
    display: flex; align-items: flex-start; gap: 0;
    max-width: 1100px; width: 90%;
}

.flow-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative;
    opacity: 0; transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.16,1,0.3,1);
}
.flow-step.visible { opacity: 1; transform: translateY(0); }
.flow-step.active .flow-step-icon { background: var(--primary); color: #fff; transform: scale(1.15); }
.flow-step.done .flow-step-icon { background: var(--success); color: #fff; }
.flow-step.done .flow-step-check { display: flex; }

.flow-step-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--bg-light); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    position: relative;
}
.flow-step-check {
    display: none; position: absolute; bottom: -4px; right: -4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--success); color: #fff;
    align-items: center; justify-content: center;
    font-size: 10px; border: 2px solid #fff;
}
.flow-step-label { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.flow-step-desc { font-size: 11px; color: var(--text-muted); max-width: 120px; line-height: 1.4; }

.flow-connector {
    width: 40px; height: 2px; background: var(--border);
    margin-top: 28px; flex-shrink: 0;
    position: relative; overflow: hidden;
}
.flow-connector::after {
    content: ''; position: absolute; inset: 0;
    background: var(--primary);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.flow-connector.filled::after { transform: translateX(0); }

.flow-detail-card {
    margin-top: 40px; padding: 28px;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-md);
    max-width: 600px; width: 90%;
    opacity: 0; transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.flow-detail-card.visible { opacity: 1; transform: translateY(0); }

.flow-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.flow-detail-row:last-child { border-bottom: none; }
.flow-detail-row .label { color: var(--text-secondary); }
.flow-detail-row .value { font-weight: 700; }

.flow-close {
    position: absolute; top: 24px; right: 24px;
    width: 36px; height: 36px; border: 1px solid var(--border);
    background: var(--bg-white); color: var(--text-secondary);
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all var(--transition);
}
.flow-close:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }

.flow-progress {
    position: absolute; bottom: 40px;
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text-muted);
}
.flow-progress-bar { width: 200px; height: 3px; background: var(--bg-light); border-radius: 2px; overflow: hidden; }
.flow-progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.5s ease; }

/* ===== CINEMATIC 3D DEMO ===== */
.cine { position:fixed;inset:0;z-index:10002;background:#0a0a1a;opacity:0;transition:opacity 0.6s ease;overflow:hidden;font-family:'Inter',sans-serif; }
.cine.active { opacity:1; }
.cine-lb { position:absolute;left:0;right:0;height:48px;background:#000;z-index:10; }
.cine-lb-t { top:0; } .cine-lb-b { bottom:0; }
.cine-x { position:absolute;top:58px;right:20px;z-index:20;width:40px;height:40px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.6);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.3s;backdrop-filter:blur(8px); }
.cine-x:hover { background:rgba(239,68,68,0.2);color:#ef4444;border-color:rgba(239,68,68,0.4); }
.cine-vp { position:absolute;inset:48px 0;display:flex;align-items:center;justify-content:center;perspective:1200px; }

/* Intro */
.cine-intro { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a1a3e 0%,#0a0a1a 70%);z-index:5;transition:all 0.9s cubic-bezier(0.4,0,0.2,1); }
.cine-intro.out { opacity:0;transform:scale(1.1) rotateX(10deg);filter:blur(10px); }
.cine-stars { position:absolute;inset:0;overflow:hidden; }
.cine-star { position:absolute;width:var(--s);height:var(--s);background:#fff;border-radius:50%;animation:starFloat var(--d) ease-in-out infinite; }
@keyframes starFloat { 0%,100%{opacity:0;transform:translateY(0)} 50%{opacity:0.7;transform:translateY(-30px)} }
.cine-ic { text-align:center;position:relative;z-index:2; }
.cine-3d-logo { margin-bottom:32px;perspective:600px; }
.cine-logo-cube { width:160px;height:70px;position:relative;transform-style:preserve-3d;animation:cubeRotate 4s ease-in-out infinite;margin:0 auto; }
.cube-face { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:900;color:#fff;letter-spacing:2px;backface-visibility:hidden; }
.cube-face span { color:#818cf8; }
.cube-face.front { transform:translateZ(20px); }
.cube-face.back { transform:rotateY(180deg) translateZ(20px);opacity:0.3; }
.cube-face.top { height:20px;top:-10px;background:linear-gradient(180deg,rgba(129,140,248,0.3),transparent);transform:rotateX(90deg) translateZ(35px); }
.cube-face.bottom { height:20px;bottom:-10px;background:linear-gradient(0deg,rgba(129,140,248,0.1),transparent);transform:rotateX(-90deg) translateZ(35px); }
@keyframes cubeRotate { 0%,100%{transform:rotateY(-5deg) rotateX(5deg)} 50%{transform:rotateY(5deg) rotateX(-3deg)} }
.cine-type { font-size:28px;font-weight:300;color:rgba(255,255,255,0.9);min-height:40px;letter-spacing:1px; }
.cine-type.typing::after { content:'|';animation:blink 0.6s step-end infinite;color:#818cf8; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cine-isub { font-size:13px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:3px;margin-top:12px; }
.cine-ibar { width:60px;height:2px;background:linear-gradient(90deg,transparent,#818cf8,transparent);margin:24px auto; }
.cine-imeta { display:flex;gap:24px;justify-content:center;font-size:11px;color:rgba(255,255,255,0.4); }
.cine-imeta i { color:#818cf8;margin-right:6px; }

/* Stage & Scenes */
.cine-stage { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1000px; }
.cine-sc { position:absolute;inset:20px 40px;display:flex;flex-direction:column;opacity:0;transform:translateZ(-100px) rotateY(8deg);transition:all 0.7s cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity; }
.cine-sc.in { opacity:1;transform:translateZ(0) rotateY(0); }
.cine-sc.out { opacity:0;transform:translateZ(-80px) rotateY(-8deg) scale(0.95);filter:blur(4px); }
.cine-sc-head { display:flex;align-items:center;gap:16px;margin-bottom:20px; }
.cine-sc-num { font-size:36px;font-weight:900;color:var(--ac);opacity:0.25;font-family:'JetBrains Mono',monospace;line-height:1; }
.cine-sc-txt h2 { font-size:22px;font-weight:800;color:#fff;margin:0; }
.cine-sc-txt p { font-size:13px;color:rgba(255,255,255,0.45);margin:4px 0 0; }
.cine-sc-body { flex:1;display:grid;grid-template-columns:1.2fr 0.8fr;gap:24px;min-height:0; }
.cine-sc-vis { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;perspective:800px; }
.cine-sc-info { display:flex;align-items:center; }

/* Info Cards */
.ci { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px;overflow-y:auto;max-height:100%; }
.ci-head { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.ci-ico { width:40px;height:40px;border-radius:10px;background:var(--cibg);color:var(--cic);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0; }
.ci h4 { font-size:15px;font-weight:800;color:#fff;margin:0;line-height:1.2; }
.ci-sub { font-size:11px;color:rgba(255,255,255,0.45);margin:2px 0 0; }
.ci-section-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,0.35);margin:12px 0 8px;display:flex;align-items:center;gap:6px; }
.ci-section-title i { font-size:10px; }
.ci-sep { height:1px;background:rgba(255,255,255,0.06);margin:10px 0; }
.ci-note { font-size:11px;color:rgba(255,255,255,0.5);padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:8px;display:flex;align-items:center;gap:6px;margin-top:10px; }
.ci-note i { font-size:11px; }

/* CI Dashboard */
.ci-dash { display:flex;gap:6px;margin:10px 0; }
.ci-dash-item { flex:1;text-align:center;padding:10px 6px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid rgba(255,255,255,0.06); }
.ci-di-val { display:block;font-size:16px;font-weight:800;color:#fff;font-family:'JetBrains Mono',monospace;line-height:1.2; }
.ci-di-lbl { display:block;font-size:9px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px;margin-top:3px; }

/* CI Order List */
.ci-order-list { display:flex;flex-direction:column;gap:4px; }
.ci-ol-row { display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:6px;font-size:12px; }
.ci-ol-q { color:#a78bfa;font-weight:800;font-family:'JetBrains Mono',monospace;min-width:24px; }
.ci-ol-n { flex:1;color:rgba(255,255,255,0.7);font-weight:600; }
.ci-ol-p { color:#fff;font-weight:700;font-family:'JetBrains Mono',monospace; }

/* CI Totals */
.ci-totals { display:flex;flex-direction:column;gap:4px; }
.ci-tot-row { display:flex;justify-content:space-between;padding:6px 10px;font-size:12px;color:rgba(255,255,255,0.5);border-radius:6px; }
.ci-tot-row span:last-child { font-weight:700;color:rgba(255,255,255,0.8);font-family:'JetBrains Mono',monospace; }
.ci-tot-big { background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);margin-top:2px; }
.ci-tot-big span:first-child { font-weight:800;color:#fff; }
.ci-tot-big span:last-child { font-size:15px;color:#fff; }

/* CI Stock Bars */
.ci-stock-list { display:flex;flex-direction:column;gap:4px; }
.ci-sr { display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px; }
.ci-sr-n { width:70px;color:rgba(255,255,255,0.6);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0; }
.ci-sr-bar { flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden; }
.ci-sr-fill { height:100%;border-radius:3px;transition:width 0.5s ease; }
.ci-sr-v { width:30px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;flex-shrink:0; }

/* CI Cost Grid */
.ci-cost-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px; }
.ci-cost-item { padding:8px 10px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.05); }
.ci-cost-lbl { display:block;font-size:9px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px; }
.ci-cost-val { display:block;font-size:14px;font-weight:800;font-family:'JetBrains Mono',monospace;margin-top:2px; }

/* CI Cook Progress */
.ci-cook-row { display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px;color:rgba(255,255,255,0.6); }
.ci-cook-row span { min-width:80px;font-weight:600; }
.ci-cook-prog { flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,0.08);overflow:hidden; }
.ci-cook-fill { width:0;height:100%;border-radius:2px;background:linear-gradient(90deg,#f97316,#22c55e);animation:ci-cook-anim 3s ease forwards; }
@keyframes ci-cook-anim { to { width:100%; } }

/* CI Checks */
.ci-checks { display:flex;flex-direction:column;gap:4px;margin-top:8px; }
.ci-ck { font-size:11px;color:rgba(255,255,255,0.6);display:flex;align-items:center;gap:6px;padding:4px 0; }
.ci-ck i { color:#22c55e;font-size:12px; }

/* CI Journal */
.ci-journal { margin-bottom:10px; }
.ci-j-head { display:flex;justify-content:space-between;padding:4px 8px;font-size:9px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1px; }
.ci-j-head span { flex:1;text-align:center; }
.ci-j-head span:first-child { text-align:left; }
.ci-j-row { display:flex;justify-content:space-between;padding:6px 8px;font-size:11px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.02);border-radius:4px;margin-bottom:2px;font-family:'JetBrains Mono',monospace; }
.ci-j-row span { flex:1;text-align:center; }
.ci-j-row span:first-child { text-align:left;font-family:inherit;font-weight:600; }
.ci-j-green { color:#4ade80!important;font-weight:700; }
.ci-j-blue { color:#60a5fa!important;font-weight:700; }
.ci-j-purple { color:#c084fc!important;font-weight:700; }

/* CI Receipt Info */
.ci-receipt-info { display:flex;flex-direction:column;gap:3px;margin-bottom:10px; }
.ci-ri-row { display:flex;justify-content:space-between;padding:5px 10px;font-size:11px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.02);border-radius:4px; }
.ci-ri-val { font-weight:700;color:rgba(255,255,255,0.8);font-family:'JetBrains Mono',monospace; }

/* Live Bar (Cine) */
.cine-live-bar { display:flex;gap:6px;padding:8px 14px;background:rgba(0,0,0,0.5);border-top:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(10px); }
.clb-item { display:flex;align-items:center;gap:6px;flex:1;padding:4px 8px;background:rgba(255,255,255,0.04);border-radius:8px;border:1px solid rgba(255,255,255,0.06);min-width:0; }
.clb-item i { font-size:12px;flex-shrink:0; }
.clb-data { display:flex;flex-direction:column;min-width:0; }
.clb-val { font-size:12px;font-weight:800;color:#fff;font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.3s; }
.clb-lbl { font-size:8px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px; }
.clb-flash { color:#22c55e!important;text-shadow:0 0 8px rgba(34,197,94,0.5); }

/* ---- DEVICE FRAMES & PANELS ---- */
/* iPad Frame */
.cv-ipad { perspective:900px;transform:rotateY(-4deg) rotateX(2deg);transition:transform 1s; }
.cv-ipf { width:460px;background:linear-gradient(145deg,#2a2a3e,#1a1a2e);border-radius:18px;padding:6px;box-shadow:0 30px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);transform-style:preserve-3d; }
.cv-ip-notch { display:flex;justify-content:center;padding:3px 0 2px; }
.cv-ip-cam { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12); }
.cv-ip-scr { background:#0d0d1a;border-radius:12px;overflow:hidden;min-height:260px;display:flex;flex-direction:column; }
.cv-app-bar { display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(99,102,241,0.05));border-bottom:1px solid rgba(99,102,241,0.1); }
.cv-ab-l { font-size:11px;font-weight:700;color:#818cf8;display:flex;align-items:center;gap:6px; }
.cv-ab-l i { font-size:12px; }
.cv-ab-r { font-size:10px;color:rgba(255,255,255,0.4);display:flex;align-items:center;gap:4px; }
.cv-app-body { flex:1;padding:10px;position:relative;overflow:hidden; }

/* Widescreen Monitor */
.cv-wmon { perspective:800px;transform:rotateY(3deg) rotateX(-2deg);display:flex;flex-direction:column;align-items:center; }
.cv-wm-bezel { width:480px;background:#111;border-radius:12px;padding:4px;box-shadow:0 25px 70px rgba(0,0,0,0.6); }
.cv-wm-scr { background:#0a0a16;border-radius:9px;overflow:hidden;min-height:240px;display:flex;flex-direction:column; }
.cv-wm-bar { display:flex;align-items:center;gap:8px;padding:8px 14px;background:#111;font-size:10px;font-weight:700;color:rgba(255,255,255,0.5);letter-spacing:1px; }
.cv-wm-led { width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;display:inline-block;animation:ledPulse 1.5s ease infinite; }
@keyframes ledPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.cv-wm-tm { margin-left:auto;color:rgba(255,255,255,0.3);font-weight:400; }
.cv-wm-body { flex:1;padding:12px; }
.cv-wm-neck { width:40px;height:16px;background:#222;border-radius:0 0 2px 2px; }
.cv-wm-base { width:80px;height:6px;background:#222;border-radius:3px;margin-top:-1px; }

/* Tables Grid */
.cv-tgrid { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.cv-tc { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:8px 6px;text-align:center;transition:all 0.5s; }
.cv-tc-ico { font-size:14px;color:rgba(255,255,255,0.2);margin-bottom:4px; }
.cv-tc-name { font-size:10px;font-weight:700;color:rgba(255,255,255,0.6); }
.cv-tc-st { font-size:8px;color:rgba(255,255,255,0.3);margin-top:2px; }
.cv-tc-amt { font-size:8px;color:#818cf8;font-weight:600;margin-top:2px;font-family:'JetBrains Mono',monospace; }
.cv-tc-empty .cv-tc-ico { color:rgba(255,255,255,0.1); }
.cv-tc-occupied { background:rgba(99,102,241,0.08);border-color:rgba(99,102,241,0.2); }
.cv-tc-occupied .cv-tc-ico { color:#818cf8; }
.cv-tc-bill { background:rgba(234,179,8,0.08);border-color:rgba(234,179,8,0.2); }
.cv-tc-bill .cv-tc-ico { color:#eab308; }
.cv-tc-reserved { background:rgba(168,85,247,0.08);border-color:rgba(168,85,247,0.2); }
.cv-tc-tgt { border-color:rgba(99,102,241,0.4);animation:tgtPulse 1.5s ease infinite; }
@keyframes tgtPulse { 0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0)} 50%{box-shadow:0 0 12px 2px rgba(99,102,241,0.3)} }
.cv-tc-tapped { background:rgba(99,102,241,0.2)!important;border-color:#818cf8!important;transform:scale(1.08); }
.cv-tc-tapped .cv-tc-ico { color:#a5b4fc!important; }
.cv-tc-flash { animation:tcFlash 1s ease infinite; }
@keyframes tcFlash { 0%,100%{opacity:1} 50%{opacity:0.5} }
.cv-touch { position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid rgba(99,102,241,0.5);pointer-events:none;transform:translate(-50%,-50%) scale(0);opacity:0;transition:none; }
.cv-touch.tap { animation:touchTap 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes touchTap { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 40%{transform:translate(-50%,-50%) scale(1);opacity:1} 100%{transform:translate(-50%,-50%) scale(2);opacity:0} }

/* Order Layout */
.cv-olayout { display:grid;grid-template-columns:1fr 160px;gap:8px;height:100%; }
.cv-omenu { overflow:hidden; }
.cv-ocats { display:flex;gap:4px;margin-bottom:8px; }
.cv-ocat { font-size:9px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.4);display:flex;align-items:center;gap:3px;white-space:nowrap; }
.cv-ocat.active { background:rgba(99,102,241,0.15);color:#818cf8; }
.cv-ocat i { font-size:8px; }
.cv-omgrid { display:grid;grid-template-columns:repeat(2,1fr);gap:5px; }
.cv-omc { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:8px;position:relative;opacity:0;animation:omcIn 0.35s ease forwards;animation-delay:calc(var(--di)*0.3s + 0.4s); }
@keyframes omcIn { to{opacity:1} }
.cv-omc-n { font-size:10px;color:rgba(255,255,255,0.7);font-weight:600;margin-bottom:3px; }
.cv-omc-p { font-size:9px;color:#818cf8;font-family:'JetBrains Mono',monospace; }
.cv-omc-a { position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;background:rgba(99,102,241,0.15);display:flex;align-items:center;justify-content:center;font-size:7px;color:#818cf8; }
.cv-ocart { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:8px;display:flex;flex-direction:column; }
.cv-ocart-h { font-size:10px;font-weight:700;color:rgba(255,255,255,0.6);margin-bottom:6px;display:flex;align-items:center;gap:5px; }
.cv-ocart-h i { color:#818cf8;font-size:9px; }
.cv-ocart-h span { color:#818cf8;font-weight:400; }
.cv-ocart-list { flex:1;display:flex;flex-direction:column;gap:3px; }
.cv-ocart-row { display:flex;align-items:center;gap:4px;padding:4px 6px;background:rgba(255,255,255,0.03);border-radius:5px;font-size:9px;color:rgba(255,255,255,0.6);opacity:0;transform:translateX(10px);animation:cartIn 0.3s ease forwards;animation-delay:calc(var(--di)*0.35s + 0.6s); }
@keyframes cartIn { to{opacity:1;transform:translateX(0)} }
.cv-oq { color:#818cf8;font-weight:700;min-width:18px; }
.cv-on { flex:1; }
.cv-op { font-family:'JetBrains Mono',monospace;font-weight:600;font-size:8px; }
.cv-ocart-tot { display:flex;justify-content:space-between;padding:6px;border-top:1px solid rgba(255,255,255,0.08);margin-top:4px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.8); }
.cv-ocart-tot span:last-child { color:#818cf8;font-family:'JetBrains Mono',monospace; }
.cv-ocart-btn { text-align:center;padding:7px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border-radius:8px;font-size:10px;font-weight:700;margin-top:5px;opacity:0;animation:cartIn 0.3s ease forwards;animation-delay:calc(var(--di)*0.35s + 0.6s); }
.cv-btn-pulse { animation:btnPulse 1s ease infinite!important;opacity:1!important; }
@keyframes btnPulse { 0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0.4)} 50%{box-shadow:0 0 16px 4px rgba(99,102,241,0.3)} }

/* Kitchen Cards */
.cv-kgrid { display:flex;gap:10px; }
.cv-kcard { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px;min-width:200px;flex:1; }
.cv-kcard-new { opacity:0;transform:translateX(30px); }
.cv-kcard-new.cv-kcard-enter { opacity:1;transform:translateX(0);transition:all 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.cv-kcard-old { opacity:0.5; }
.cv-kcard-top { display:flex;align-items:center;gap:6px;margin-bottom:8px; }
.cv-kt { font-size:12px;font-weight:700;color:#818cf8; }
.cv-kb { font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px; }
.cv-kb.new { background:#ef4444;color:#fff;animation:newFlash 0.8s ease infinite; }
@keyframes newFlash { 0%,100%{opacity:1} 50%{opacity:0.5} }
.cv-kb.prep { background:rgba(245,158,11,0.2);color:#f59e0b; }
.cv-ktm { margin-left:auto;font-size:9px;color:rgba(255,255,255,0.3); }
.cv-kcard-items { display:flex;flex-direction:column;gap:3px; }
.cv-ki { display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(255,255,255,0.03);border-radius:6px;font-size:11px;color:rgba(255,255,255,0.6);transition:all 0.5s; }
.cv-ki i { margin-left:auto;font-size:10px;color:rgba(255,255,255,0.3); }
.cv-ki.done { background:rgba(34,197,94,0.08); }
.cv-ki.done i { color:#22c55e; }
.cv-kiq { color:#f59e0b;font-weight:700;font-size:10px; }
.cv-kcard-ft { font-size:9px;color:rgba(255,255,255,0.3);border-top:1px solid rgba(255,255,255,0.06);margin-top:8px;padding-top:6px; }
.cv-ci .cv-cif { display:inline; }
.cv-ci .cv-cic { display:none; }
.cv-ci.cv-ci-done { background:rgba(34,197,94,0.1)!important; }
.cv-ci.cv-ci-done .cv-cif { display:none; }
.cv-ci.cv-ci-done .cv-cic { display:inline;color:#22c55e; }
.cv-kbar { width:100%;height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden; }
.cv-kfill { height:100%;width:0;background:linear-gradient(90deg,#f59e0b,#22c55e);border-radius:3px;transition:width 4s ease; }

/* Service Notification */
.cv-notif { position:absolute;top:8px;left:50%;transform:translateX(-50%) translateY(-30px);background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);color:#22c55e;padding:8px 16px;border-radius:10px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px;opacity:0;transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap; }
.cv-notif.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* Payment Terminal */
.cv-pay-wrap { perspective:800px;position:relative;display:flex;flex-direction:column;align-items:center; }
.cv-pay-terminal { width:220px;background:linear-gradient(180deg,#2a2a3e,#1a1a2e);border-radius:16px;padding:4px;box-shadow:0 25px 70px rgba(0,0,0,0.6);transform:rotateY(-4deg) rotateX(2deg);transform-style:preserve-3d; }
.cv-pt-scr { background:#0a0a18;border-radius:13px 13px 8px 8px;padding:14px; }
.cv-pt-hdr { font-size:10px;color:rgba(255,255,255,0.4);text-align:center;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:5px; }
.cv-pt-tbl { font-size:13px;font-weight:700;color:#818cf8;text-align:center;margin-bottom:8px; }
.cv-pt-items { display:flex;flex-direction:column;gap:2px;margin-bottom:6px; }
.cv-pt-row { display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,0.5);padding:3px 0; }
.cv-pt-sep { border-top:1px dashed rgba(255,255,255,0.08);margin:4px 0; }
.cv-pt-total { font-weight:900;font-size:13px!important;color:#fff!important; }
.cv-pt-total span:last-child { color:#22c55e!important;font-family:'JetBrains Mono',monospace; }
.cv-pt-methods { display:flex;gap:4px;margin:8px 0; }
.cv-ptm { flex:1;text-align:center;padding:6px 4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:6px;font-size:8px;color:rgba(255,255,255,0.4);display:flex;flex-direction:column;align-items:center;gap:3px; }
.cv-ptm i { font-size:12px; }
.cv-ptm-sel { background:rgba(99,102,241,0.15);border-color:rgba(99,102,241,0.4);color:#818cf8; }
.cv-pt-status { text-align:center;font-size:10px;color:rgba(255,255,255,0.4);padding:6px;background:rgba(255,255,255,0.03);border-radius:6px;transition:all 0.5s; }
.cv-pt-status.ok { color:#22c55e;background:rgba(34,197,94,0.1); }
.cv-pt-body { padding:8px 12px; }
.cv-pt-reader { width:100%;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;margin-bottom:8px; }
.cv-pt-keys { display:grid;grid-template-columns:repeat(3,1fr);gap:3px; }
.cv-pt-keys span { height:12px;background:rgba(255,255,255,0.05);border-radius:2px; }
.cv-pay-card { position:absolute;bottom:-30px;left:50%;width:150px;height:94px;background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:10px;padding:12px;box-shadow:0 8px 30px rgba(37,99,235,0.3);transform:translate(-50%,0) rotate(-5deg);transition:all 1.2s cubic-bezier(0.34,1.56,0.64,1);z-index:2; }
.cv-pay-card.tap { transform:translate(-50%,-160px) rotate(0deg); }
.cv-pc-inner { position:relative;height:100%; }
.cv-pc-chip { width:24px;height:18px;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:3px;margin-bottom:12px; }
.cv-pc-num { font-size:9px;color:rgba(255,255,255,0.7);font-family:'JetBrains Mono',monospace;letter-spacing:1px; }
.cv-pc-brand { position:absolute;bottom:0;right:0;font-size:13px;font-weight:900;color:rgba(255,255,255,0.6);font-style:italic; }
.cv-pay-ripple { position:absolute;top:40%;left:50%;width:100px;height:100px;border-radius:50%;border:2px solid rgba(34,197,94,0.4);transform:translate(-50%,-50%) scale(0);opacity:0; }
.cv-pay-ripple.pulse { animation:payRipple 1s ease-out forwards; }
@keyframes payRipple { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 100%{transform:translate(-50%,-50%) scale(3);opacity:0} }

/* Receipt Printer */
.cv-rcpt-wrap { perspective:600px;display:flex;justify-content:center; }
.cv-rcpt-printer { width:230px;position:relative;transform:rotateX(3deg); }
.cv-rcpt-slot { width:210px;height:10px;background:linear-gradient(180deg,#444,#333);border-radius:5px;margin:0 auto;position:relative;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.cv-rcpt-paper { width:200px;margin:0 auto;background:#fafaf9;border-radius:0 0 4px 4px;padding:14px;max-height:0;overflow:hidden;transition:max-height 2.5s ease;box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.cv-rcpt-paper.print { max-height:500px; }
.cv-rp-logo { text-align:center;font-size:15px;font-weight:900;color:#1a1a2e;margin-bottom:2px; }
.cv-rp-logo span { color:#4f46e5; }
.cv-rp-sub { text-align:center;font-size:8px;color:#999;margin-bottom:4px; }
.cv-rp-ln { border-top:1px dashed #ccc;margin:5px 0; }
.cv-rp-lbl { text-align:center;font-size:9px;font-weight:700;color:#555;margin-bottom:2px; }
.cv-rp-meta { font-size:8px;color:#888;text-align:center;margin-bottom:1px; }
.cv-rp-row { display:flex;justify-content:space-between;font-size:10px;color:#333;padding:2px 0; }
.cv-rp-total { font-size:12px;font-weight:900;color:#1a1a2e;padding:4px 0; }
.cv-rp-stamp { text-align:center;font-size:11px;font-weight:900;color:#4f46e5;border:2px solid #4f46e5;border-radius:4px;padding:3px 10px;margin:8px auto 4px;width:fit-content;transform:rotate(-3deg); }
.cv-rp-bc { text-align:center;font-size:14px;color:#333;letter-spacing:2px;margin-top:4px;font-family:monospace; }

/* Accounting Dashboard */
.cv-acc { display:flex;flex-direction:column;gap:10px; }
.cv-acc-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.cv-akpi { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:10px 8px;text-align:center; }
.cv-akpi-v { font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace;margin-bottom:3px; }
.cv-akpi-v.green { color:#22c55e; }
.cv-akpi-v.red { color:#ef4444; }
.cv-akpi-v.blue { color:#3b82f6; }
.cv-akpi-l { font-size:9px;color:rgba(255,255,255,0.4); }
.cv-acc-tbl { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px;overflow:hidden; }
.cv-at-h { display:grid;grid-template-columns:1.4fr 0.8fr 0.8fr;padding:6px 10px;font-size:9px;font-weight:700;color:rgba(255,255,255,0.4);text-transform:uppercase;background:rgba(255,255,255,0.03); }
.cv-at-r { display:grid;grid-template-columns:1.4fr 0.8fr 0.8fr;padding:6px 10px;font-size:10px;color:rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.04);opacity:0;animation:atIn 0.5s ease forwards;animation-delay:calc(var(--di)*0.4s + 0.5s); }
@keyframes atIn { to{opacity:1} }
.cv-gr { color:#22c55e;font-weight:700; }
.cv-bl { color:#3b82f6;font-weight:700; }
.cv-acc-cks { display:flex;flex-direction:column;gap:4px; }
.cv-ack { display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,0.4);opacity:0;animation:ackIn 0.4s ease forwards;animation-delay:calc(var(--di)*0.5s + 2s); }
@keyframes ackIn { to{opacity:1} }
.cv-ack i { color:#22c55e; }

/* Footer Timeline */
.cine-footer { position:absolute;bottom:54px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:12; }
.cine-cnt { font-size:11px;font-weight:600;color:rgba(255,255,255,0.5);display:flex;align-items:center;gap:8px; }
.cine-cnt-ph { font-family:'JetBrains Mono',monospace;color:#818cf8;font-size:13px; }
.cine-cnt-tt { letter-spacing:1px;text-transform:uppercase; }
.cine-tl { display:flex;flex-direction:column;align-items:center;gap:8px; }
.cine-tl-track { width:320px;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden; }
.cine-tl-fill { height:100%;background:linear-gradient(90deg,#4f46e5,#818cf8);border-radius:2px;width:0;transition:width 0.8s ease; }
.cine-tl-dots { display:flex;gap:6px; }
.cine-tl-dot { width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:8px;color:rgba(255,255,255,0.3);font-weight:700;transition:all 0.4s;font-family:'JetBrains Mono',monospace; }
.cine-tl-dot.now { background:#4f46e5;border-color:#818cf8;color:#fff;transform:scale(1.2);box-shadow:0 0 12px rgba(99,102,241,0.5); }
.cine-tl-dot.done { background:rgba(34,197,94,0.2);border-color:rgba(34,197,94,0.4);color:#22c55e; }

/* Finale */
.cine-finale { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transform:scale(0.9);transition:all 0.8s cubic-bezier(0.16,1,0.3,1); }
.cine-finale.in { opacity:1;transform:scale(1); }
.cine-fin-glow { position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(34,197,94,0.15),transparent 70%);border-radius:50%;animation:finGlow 3s ease infinite; }
@keyframes finGlow { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.3);opacity:1} }
.cine-fin-ring { width:110px;height:110px;border:3px solid rgba(34,197,94,0.2);border-radius:50%;position:absolute;animation:finRing 2s ease infinite; }
@keyframes finRing { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(2);opacity:0} }
.cine-fin-icon { width:80px;height:80px;background:linear-gradient(135deg,#16a34a,#22c55e);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;margin-bottom:20px;z-index:2;animation:popIn 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.cine-finale h2 { font-size:24px;font-weight:800;color:#fff;margin:0 0 10px;z-index:2; }
.cine-finale p { font-size:13px;color:rgba(255,255,255,0.5);line-height:1.7;margin:0 0 24px;z-index:2; }
.cine-fin-stats { display:flex;gap:24px;margin-bottom:28px;z-index:2; }
.cine-fin-stats>div { text-align:center;padding:12px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;min-width:70px; }
.cine-fin-stats strong { display:block;font-size:18px;color:#fff;margin-bottom:4px;font-family:'JetBrains Mono',monospace; }
.cine-fin-stats span { font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase; }
.cine-fin-btns { display:flex;gap:10px;z-index:2; }
.cine-btn { padding:10px 24px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all 0.3s;font-family:inherit; }
.cine-btn-p { background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff; }
.cine-btn-p:hover { box-shadow:0 8px 24px rgba(34,197,94,0.3);transform:translateY(-2px); }
.cine-btn-o { background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.1); }
.cine-btn-o:hover { background:rgba(255,255,255,0.1);color:#fff; }

/* ===== PAYMENT SUCCESS ===== */
.payment-success-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.payment-success-icon {
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--success); display: flex;
    align-items: center; justify-content: center;
    font-size: 40px; color: #fff;
    animation: popIn 0.5s cubic-bezier(0.16,1,0.3,1);
    margin-bottom: 20px;
}
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.payment-success-text { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.payment-success-amount { font-size: 32px; font-weight: 800; color: var(--success); }

/* ===== UTILITIES ===== */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px; gap: 12px; color: var(--text-muted);
}
.empty-state i { font-size: 40px; opacity: 0.25; }
.empty-state p { font-size: 13px; }

.search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-light); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0 10px;
}
.search-box i { color: var(--text-muted); font-size: 13px; }
.search-box input {
    flex: 1; padding: 8px 0; background: none; border: none;
    color: var(--text-primary); font-size: 12px; outline: none; font-family: inherit;
}

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-header h2 { font-size: 15px; font-weight: 700; }

select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;
}
select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); outline: none; }
select option { background: #fff; }

.stagger-in > * { opacity: 0; animation: staggerFade 0.4s ease forwards; }
.stagger-in > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.12s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.16s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.24s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.28s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.32s; }
@keyframes staggerFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.text-center { text-align: center; }
.fw-700 { font-weight: 700; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

/* ===== INFRA INDICATORS ===== */
.topbar-infra { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(79,70,229,0.08); border: 1px solid rgba(79,70,229,0.15); border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.topbar-infra:hover { background: rgba(79,70,229,0.15); border-color: rgba(79,70,229,0.3); }
.infra-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); animation: infraPulse 2s ease infinite; }
@keyframes infraPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.infra-label { font-size: 11px; font-weight: 600; color: var(--primary); }
.infra-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; }

.infra-panel { position: fixed; top: 56px; right: 16px; width: 520px; background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.3); z-index: 9999; animation: ipSlide 0.25s ease; overflow: hidden; }
@keyframes ipSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.ip-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.ip-head i { color: var(--primary); margin-right: 8px; }
.ip-head button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; }
.ip-head button:hover { color: var(--text-primary); }
.ip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.ip-card { background: var(--glass-bg); padding: 12px; text-align: center; }
.ip-ic { font-size: 16px; margin-bottom: 6px; }
.ip-val { font-size: 18px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.ip-lbl { font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.ip-sub { font-size: 9px; color: var(--text-muted); margin-top: 4px; opacity: 0.7; }
.ip-row { display: flex; justify-content: space-around; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.ip-row i { margin-right: 4px; }

.infra-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(129,140,248,0.04)); border: 1px solid rgba(79,70,229,0.12); border-radius: var(--radius); }
.ib-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.ib-item i { font-size: 11px; }
.ib-item strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

.infra-dash-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
@media(max-width:1400px){ .infra-dash-grid { grid-template-columns: repeat(3, 1fr); } }
.id-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; }
.id-card:hover { border-color: rgba(79,70,229,0.3); background: rgba(79,70,229,0.03); }
.id-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(99,102,241,0.1); color: var(--c); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.id-body { flex: 1; min-width: 0; }
.id-title { font-size: 11px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.id-badge { padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.id-badge.ok { background: rgba(34,197,94,0.12); color: #16a34a; }
.id-badge.err { background: rgba(239,68,68,0.12); color: #ef4444; }
.id-badge.warn { background: rgba(234,179,8,0.12); color: #ca8a04; }
.id-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.id-stats span { font-size: 10px; color: var(--text-muted); }
.id-stats strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }

.pss-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; color: var(--text-secondary); }
.pss-item i { width: 18px; text-align: center; font-size: 13px; }

/* ===== ROADMAP / SYSTEM CHECKLIST ===== */
.rm-page { padding: 20px; max-width: 1200px; margin: 0 auto; }
.rm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 24px; background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rm-header h1 { font-size: 20px; font-weight: 800; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.rm-header h1 i { color: var(--primary); }
.rm-header p { font-size: 13px; color: var(--text-muted); margin: 0; }
.rm-score { display: flex; align-items: center; gap: 14px; }
.rm-score-ring { position: relative; width: 64px; height: 64px; }
.rm-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rm-score-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #22c55e; font-family: 'JetBrains Mono', monospace; }
.rm-score-text { text-align: right; }
.rm-score-text strong { display: block; font-size: 18px; }
.rm-score-text small { font-size: 11px; color: var(--text-muted); }

.rm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.rm-kpi { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.rm-kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.rm-kpi-body strong { display: block; font-size: 20px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.rm-kpi-body span { font-size: 11px; color: var(--text-muted); }

.rm-section-title { font-size: 15px; font-weight: 700; margin: 28px 0 14px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.rm-section-title i { color: var(--primary); font-size: 14px; }

.rm-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.rm-cat { background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rm-cat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; transition: background 0.2s; }
.rm-cat-header:hover { background: var(--bg-light); }
.rm-cat-left { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; }
.rm-cat-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.rm-cat-right { display: flex; align-items: center; gap: 10px; }
.rm-cat-count { font-size: 12px; font-weight: 700; color: var(--primary); font-family: 'JetBrains Mono', monospace; }
.rm-cat-bar { width: 80px; height: 5px; background: var(--bg-light); border-radius: 3px; overflow: hidden; }
.rm-cat-bar > div { height: 100%; border-radius: 3px; transition: width 0.5s; }
.rm-cat-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.3s; }
.rm-cat.open .rm-cat-arrow { transform: rotate(180deg); }
.rm-cat-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.rm-cat.open .rm-cat-body { max-height: 800px; }

.rm-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); }
.rm-item-status { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.rm-item-status.done { background: rgba(34,197,94,0.15); color: #22c55e; }
.rm-item-status.progress { background: rgba(234,179,8,0.15); color: #eab308; }
.rm-item-status.planned { background: rgba(156,163,175,0.15); color: #9ca3af; }
.rm-item-body { flex: 1; }
.rm-item-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.rm-item-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.rm-item-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.rm-stat-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: var(--bg-light); border-radius: 4px; font-size: 10px; color: var(--text-muted); }
.rm-stat-pill strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.rm-item-badge { padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; flex-shrink: 0; margin-top: 2px; }
.rm-item-badge.done { background: rgba(34,197,94,0.12); color: #16a34a; }
.rm-item-badge.progress { background: rgba(234,179,8,0.12); color: #ca8a04; }
.rm-item-badge.planned { background: rgba(156,163,175,0.12); color: #6b7280; }

.rm-roadmap { position: relative; padding-left: 30px; margin-bottom: 10px; }
.rm-timeline-line { position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.rm-phase { position: relative; margin-bottom: 16px; }
.rm-phase-dot { position: absolute; left: -24px; top: 14px; width: 12px; height: 12px; border-radius: 50%; z-index: 1; }
.rm-phase-card { background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.rm-phase-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rm-phase-label { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.rm-phase-title { font-size: 14px; font-weight: 700; }
.rm-phase-dur { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.rm-phase-badge { margin-left: auto; padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.rm-phase-badge.done { background: rgba(34,197,94,0.12); color: #16a34a; }
.rm-phase-badge.pending { background: rgba(234,179,8,0.12); color: #ca8a04; }
.rm-phase-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rm-phase-item { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.rm-phase-item i { color: #22c55e; font-size: 11px; }

.rm-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.rm-metric { background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.rm-m-hdr { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.rm-m-hdr i { color: var(--primary); }
.rm-m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-m-grid > div { text-align: center; }
.rm-m-grid strong { display: block; font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.rm-m-grid small { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }

.rm-console { background: #0d1117; border: 1px solid #30363d; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.rm-console-btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-bottom: 1px solid #30363d; }
.rm-btn { padding: 7px 14px; border: 1px solid #30363d; border-radius: 6px; background: #161b22; color: #c9d1d9; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; font-family: inherit; }
.rm-btn:hover { background: #21262d; border-color: #484f58; color: #fff; }
.rm-btn i { font-size: 12px; }
.rm-btn-load { border-color: rgba(234,179,8,0.3); color: #eab308; }
.rm-btn-load:hover { background: rgba(234,179,8,0.1); border-color: #eab308; }
.rm-console-log { padding: 12px; max-height: 280px; overflow-y: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.rm-log-line { padding: 3px 0; display: flex; gap: 10px; line-height: 1.5; }
.rm-log-ts { color: #484f58; flex-shrink: 0; }
.rm-log-msg { color: #8b949e; }
.rm-log-line.success .rm-log-msg { color: #3fb950; }
.rm-log-line.error .rm-log-msg { color: #f85149; }
.rm-log-line.info .rm-log-msg { color: #8b949e; }

/* =========================================================
   GARSON TABLET MODE - Professional Waiter Tablet Interface
   ========================================================= */

/* Hide sidebar, expand main content full screen */
.garson-tablet-mode .sidebar.garson-hidden { transform: translateX(-100%); pointer-events: none; }
.garson-tablet-mode .main-content { margin-left: 0 !important; }

/* Garson topbar - sleek, minimal */
.garson-tablet-mode .topbar.garson-topbar {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(79,70,229,0.2);
}
.garson-tablet-mode .garson-topbar .sidebar-toggle { display: none; }
.garson-tablet-mode .garson-topbar .mode-btn { color: rgba(255,255,255,0.6); }
.garson-tablet-mode .garson-topbar .mode-btn:hover { color: rgba(255,255,255,0.9); }
.garson-tablet-mode .garson-topbar .mode-btn.active {
    background: rgba(255,255,255,0.18); color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.garson-tablet-mode .garson-topbar .mode-switcher {
    background: rgba(255,255,255,0.1); border-radius: 10px;
}
.garson-tablet-mode .garson-topbar .topbar-clock,
.garson-tablet-mode .garson-topbar .topbar-date { color: rgba(255,255,255,0.8); }
.garson-tablet-mode .garson-topbar .topbar-clock i,
.garson-tablet-mode .garson-topbar .topbar-date i { color: rgba(255,255,255,0.6); }
.garson-tablet-mode .garson-topbar .topbar-notifications i { color: rgba(255,255,255,0.8); }
.garson-tablet-mode .garson-topbar .topbar-notifications:hover { background: rgba(255,255,255,0.1); }
.garson-tablet-mode .garson-topbar .notification-badge { background: #ef4444; }
.garson-tablet-mode .garson-topbar .topbar-status { color: #86efac; }
.garson-tablet-mode .garson-topbar .status-dot.online { background: #86efac; }

.garson-tablet-mode .view-container { background: #f8fafc; }

/* ===== GARSON SALON / TABLES ===== */
.gt-salon { animation: gtFadeIn 0.4s ease; }
@keyframes gtFadeIn { from { opacity: 0; } to { opacity: 1; } }

.gt-salon-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding: 18px 22px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}
.gt-salon-title { display: flex; align-items: center; gap: 14px; }
.gt-salon-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.gt-salon-title h2 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.gt-salon-subtitle { font-size: 12px; color: var(--text-muted); }

.gt-salon-stats { display: flex; gap: 6px; }
.gt-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 16px; border-radius: 10px; min-width: 56px;
}
.gt-stat-num { font-size: 20px; font-weight: 800; line-height: 1.1; }
.gt-stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.gt-stat-empty { background: #f0fdf4; } .gt-stat-empty .gt-stat-num { color: var(--success); } .gt-stat-empty .gt-stat-label { color: #15803d; }
.gt-stat-occupied { background: #fff7ed; } .gt-stat-occupied .gt-stat-num { color: var(--orange); } .gt-stat-occupied .gt-stat-label { color: #c2410c; }
.gt-stat-reserved { background: #eff6ff; } .gt-stat-reserved .gt-stat-num { color: var(--info); } .gt-stat-reserved .gt-stat-label { color: #1d4ed8; }
.gt-stat-bill { background: #fef2f2; } .gt-stat-bill .gt-stat-num { color: var(--danger); } .gt-stat-bill .gt-stat-label { color: #b91c1c; }

/* Table grid */
.gt-floor-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.gt-table-card {
    background: #fff; border-radius: 16px; padding: 20px 16px 14px;
    border: 2px solid #e5e7eb;
    cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative; overflow: hidden;
    animation: gtCardIn 0.4s ease forwards; opacity: 0;
}
@keyframes gtCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.gt-table-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.gt-table-card:active { transform: scale(0.98); transition-duration: 0.1s; }

.gt-table-empty { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%); }
.gt-table-occupied { border-color: #fdba74; background: linear-gradient(180deg, #fff7ed 0%, #fff 100%); }
.gt-table-reserved { border-color: #93c5fd; background: linear-gradient(180deg, #eff6ff 0%, #fff 100%); }
.gt-table-bill { border-color: #fca5a5; background: linear-gradient(180deg, #fef2f2 0%, #fff 100%); }

.gt-table-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 8px; }
.gt-table-num { font-size: 28px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.gt-table-status-icon { font-size: 16px; }
.gt-table-empty .gt-table-status-icon { color: var(--success); }
.gt-table-occupied .gt-table-status-icon { color: var(--orange); }
.gt-table-reserved .gt-table-status-icon { color: var(--info); }
.gt-table-bill .gt-table-status-icon { color: var(--danger); }

.gt-table-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; padding: 3px 10px; border-radius: 20px;
    margin-bottom: 10px;
}
.gt-table-empty .gt-table-badge { background: #dcfce7; color: #15803d; }
.gt-table-occupied .gt-table-badge { background: #ffedd5; color: #c2410c; }
.gt-table-reserved .gt-table-badge { background: #dbeafe; color: #1d4ed8; }
.gt-table-bill .gt-table-badge { background: #fee2e2; color: #b91c1c; }

.gt-table-info { margin-bottom: 8px; min-height: 32px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gt-table-amount { font-size: 16px; font-weight: 800; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }
.gt-table-time { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.gt-table-time i { font-size: 10px; }
.gt-table-reserved-time { font-size: 12px; color: var(--info); display: flex; align-items: center; gap: 4px; font-weight: 600; }
.gt-table-seats { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.gt-table-seats i { font-size: 11px; }

.gt-table-action {
    width: 100%; padding-top: 10px; margin-top: 4px;
    border-top: 1px solid #f0f0f0;
    font-size: 11px; font-weight: 600; color: var(--primary);
}
.gt-table-action i { margin-right: 4px; }
.gt-table-bill .gt-table-action { color: var(--danger); }

/* ===== GARSON MODAL ===== */
.gt-modal-inner { display: flex; flex-direction: column; gap: 16px; }
.gt-modal-table-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; background: var(--primary-light); border-radius: 12px;
}
.gt-modal-table-num {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 900;
}
.gt-modal-table-name { font-size: 18px; font-weight: 700; }
.gt-modal-table-detail { font-size: 12px; color: var(--text-muted); }

.gt-modal-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--bg-light); border-radius: 10px;
}
.gt-modal-row-label { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.gt-modal-row-label i { color: var(--primary); }
.gt-modal-row-value { font-size: 18px; font-weight: 800; color: var(--primary); font-family: 'JetBrains Mono', monospace; }

.gt-modal-actions { display: flex; gap: 10px; }
.gt-modal-btn {
    flex: 1; padding: 14px 16px; border: none; border-radius: 12px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s ease; font-family: inherit;
}
.gt-modal-btn-primary { background: var(--primary); color: #fff; }
.gt-modal-btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(79,70,229,0.3); }
.gt-modal-btn-success { background: var(--success); color: #fff; }
.gt-modal-btn-success:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(22,163,74,0.3); }
.gt-modal-btn-outline {
    background: #fff; color: var(--text-secondary);
    border: 1px solid var(--border); width: 100%;
}
.gt-modal-btn-outline:hover { background: var(--bg-light); color: var(--text-primary); }

/* ===== GARSON ORDER LAYOUT ===== */
.gt-order-layout {
    display: grid; grid-template-columns: 1fr 380px;
    gap: 0; height: calc(100vh - var(--topbar-height) - 40px);
    animation: gtFadeIn 0.3s ease;
}
.gt-order-left {
    display: flex; flex-direction: column;
    overflow: hidden; padding-right: 14px;
}

/* Search bar */
.gt-order-search-bar { margin-bottom: 12px; }
.gt-search-input {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 0 16px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.gt-search-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.gt-search-input i { color: var(--text-muted); font-size: 14px; }
.gt-search-input input {
    flex: 1; padding: 12px 0; background: none; border: none;
    color: var(--text-primary); font-size: 14px; outline: none; font-family: inherit;
}

/* Category scroll */
.gt-cat-scroll {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 4px 0 12px; flex-shrink: 0;
    scrollbar-width: none;
}
.gt-cat-scroll::-webkit-scrollbar { display: none; }
.gt-cat-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 16px; border: 1px solid #e5e7eb;
    background: #fff; border-radius: 10px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; white-space: nowrap;
    transition: all 0.2s ease; font-family: inherit;
}
.gt-cat-btn i { font-size: 14px; }
.gt-cat-btn:hover { border-color: var(--primary); color: var(--text-primary); }
.gt-cat-btn.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 2px 8px rgba(79,70,229,0.25);
}

/* Menu grid */
.gt-menu-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px; overflow-y: auto; padding: 2px 2px 20px;
    align-content: start; flex: 1;
}
.gt-menu-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 14px; padding: 16px 10px 12px;
    cursor: pointer; text-align: center; position: relative;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.gt-menu-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); }
.gt-menu-card:active { transform: scale(0.96); transition-duration: 0.08s; }
.gt-menu-card.gt-out { opacity: 0.3; pointer-events: none; }
.gt-menu-card.gt-in-order { border-color: var(--primary); background: var(--primary-light); }

.gt-menu-emoji { font-size: 32px; margin-bottom: 6px; line-height: 1.2; }
.gt-menu-name { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.gt-menu-desc { font-size: 9px; color: var(--text-muted); line-height: 1.3; margin-bottom: 3px; max-height: 24px; overflow: hidden; }
.gt-menu-meta { display: flex; gap: 6px; justify-content: center; margin-bottom: 3px; }
.gt-meta-cal { font-size: 8px; color: var(--text-muted); background: rgba(255,255,255,0.04); padding: 1px 5px; border-radius: 3px; }
.gt-meta-prep { font-size: 8px; color: var(--text-muted); display: flex; align-items: center; gap: 2px; }
.gt-menu-price { font-size: 14px; font-weight: 800; color: var(--primary); }
.gt-menu-allergens { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-top: 3px; }
.gt-allergen { font-size: 7px; padding: 1px 4px; border-radius: 3px; background: rgba(239,68,68,0.12); color: #f87171; font-weight: 600; text-transform: uppercase; }

.gt-menu-badge {
    position: absolute; top: 6px; right: 6px;
    font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
}
.gt-badge-low { background: var(--warning-light); color: var(--warning); }
.gt-badge-out { background: var(--danger-light); color: var(--danger); }
.gt-menu-qty-badge {
    position: absolute; top: -4px; left: -4px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(79,70,229,0.4);
    animation: gtPop 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes gtPop { from { transform: scale(0); } to { transform: scale(1); } }

/* Order panel (right side) */
.gt-order-right { display: flex; flex-direction: column; }
.gt-order-panel {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}

.gt-order-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #fafafe 0%, #f5f3ff 100%);
}
.gt-order-table-info { display: flex; align-items: center; gap: 10px; }
.gt-order-table-badge {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900;
}
.gt-order-table-name { font-size: 14px; font-weight: 700; }
.gt-order-table-detail { font-size: 11px; color: var(--text-muted); }
.gt-order-count {
    font-size: 20px; font-weight: 800; color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
}
.gt-order-count small { font-size: 11px; font-weight: 500; color: var(--text-muted); }

/* Order items list */
.gt-order-items { flex: 1; overflow-y: auto; padding: 8px 10px; }
.gt-order-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; gap: 10px;
    color: var(--text-muted); padding: 30px;
}
.gt-order-empty i { font-size: 36px; opacity: 0.2; }
.gt-order-empty p { font-size: 13px; text-align: center; line-height: 1.5; }

.gt-order-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 8px; border-radius: 10px;
    transition: background 0.15s ease;
    animation: gtSlideIn 0.2s ease forwards;
}
@keyframes gtSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}
.gt-order-item:hover { background: #f8fafc; }
.gt-order-item-left { display: flex; align-items: center; gap: 10px; }
.gt-order-item-controls { display: flex; align-items: center; gap: 2px; }
.gt-qty-btn {
    width: 28px; height: 28px; border: 1px solid #e5e7eb;
    background: #fff; color: var(--text-primary);
    border-radius: 8px; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.gt-qty-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.gt-qty-btn:active { transform: scale(0.9); }
.gt-qty-plus { background: var(--primary-light); border-color: rgba(79,70,229,0.2); color: var(--primary); }
.gt-qty-num { width: 24px; text-align: center; font-weight: 800; font-size: 14px; }
.gt-order-item-name { font-size: 13px; font-weight: 600; }
.gt-order-item-unit { font-size: 11px; color: var(--text-muted); }
.gt-order-item-right { display: flex; align-items: center; gap: 8px; }
.gt-order-item-total { font-size: 13px; font-weight: 700; color: var(--primary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.gt-order-item-del {
    width: 24px; height: 24px; border: none;
    background: transparent; color: var(--danger);
    cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; opacity: 0; transition: all 0.15s ease;
}
.gt-order-item:hover .gt-order-item-del { opacity: 1; }
.gt-order-item-del:hover { background: var(--danger-light); }

/* Order note */
.gt-order-note {
    padding: 0 14px; margin-bottom: 2px;
}
.gt-order-note input {
    width: 100%; padding: 10px 14px;
    background: #f8fafc; border: 1px dashed #d1d5db;
    border-radius: 8px; font-size: 12px; color: var(--text-primary);
    font-family: inherit; outline: none;
    transition: all 0.2s ease;
}
.gt-order-note input:focus { border-color: var(--primary); border-style: solid; background: #fff; }
.gt-order-note input::placeholder { color: var(--text-muted); font-style: italic; }

/* Order summary */
.gt-order-summary { padding: 12px 18px; border-top: 1px solid #f0f0f0; }
.gt-summary-row {
    display: flex; justify-content: space-between; padding: 3px 0;
    font-size: 12px; color: var(--text-secondary);
}
.gt-summary-row span:last-child { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.gt-summary-total {
    font-size: 16px; font-weight: 800; color: var(--text-primary);
    padding: 10px 0 4px; margin-top: 6px;
    border-top: 2px solid #e5e7eb;
}
.gt-summary-total span:last-child { color: var(--primary); font-size: 18px; }

/* Order actions */
.gt-order-actions {
    display: flex; gap: 8px; padding: 14px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.gt-action-btn {
    padding: 12px 14px; border: none; border-radius: 10px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s ease; font-family: inherit;
}
.gt-action-btn:active { transform: scale(0.96); }
.gt-action-clear { background: #fef2f2; color: var(--danger); flex: 0 0 auto; }
.gt-action-clear:hover { background: #fee2e2; }
.gt-action-back { background: #f1f5f9; color: var(--text-secondary); flex: 0 0 auto; }
.gt-action-back:hover { background: #e2e8f0; color: var(--text-primary); }
.gt-action-send {
    background: var(--primary); color: #fff; flex: 1;
    box-shadow: 0 2px 8px rgba(79,70,229,0.25);
}
.gt-action-send:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(79,70,229,0.35); }
.gt-action-send.gt-disabled { opacity: 0.4; pointer-events: none; box-shadow: none; }

/* ===== GARSON WAITER INDICATOR (topbar) ===== */
.gt-waiter-indicator {
    display: none; align-items: center; gap: 10px;
}
.garson-tablet-mode .gt-waiter-indicator { display: flex; }

.gt-waiter-avatar {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff;
}
.gt-waiter-name { font-size: 12px; font-weight: 700; color: #fff; }
.gt-waiter-status { font-size: 10px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 4px; }
.gt-waiter-status i { font-size: 9px; color: #86efac; }

/* ===== GARSON MODE RESPONSIVE ===== */
@media (max-width: 900px) {
    .gt-order-layout { grid-template-columns: 1fr; }
    .gt-order-right { position: fixed; bottom: 0; left: 0; right: 0; height: 50vh; z-index: 200; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
    .gt-floor-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .gt-salon-header { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ===== PROFESSIONAL ACCOUNTING PAGE ===== */
.acc-page { display:flex; flex-direction:column; gap:16px; }

/* Accounting Header */
.acc-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--bg-white); border-radius:var(--radius); border:1px solid var(--border-light); box-shadow:var(--shadow-xs); }
.acc-header-left { display:flex; align-items:center; gap:14px; }
.acc-header-icon { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; }
.acc-header-title { font-size:20px; font-weight:800; color:var(--text-primary); letter-spacing:-0.5px; }
.acc-header-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.acc-header-actions { display:flex; gap:8px; }
.acc-btn { padding:8px 16px; border:1px solid var(--border); background:var(--bg-white); color:var(--text-secondary); border-radius:var(--radius-sm); font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s; font-family:inherit; }
.acc-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.acc-btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.acc-btn-primary:hover { background:var(--primary-dark); color:#fff; }

/* Tab Navigation */
.acc-tabs { display:flex; gap:2px; padding:4px; background:var(--bg-light); border-radius:var(--radius-sm); overflow-x:auto; scrollbar-width:none; }
.acc-tabs::-webkit-scrollbar { display:none; }
.acc-tab { padding:10px 18px; border:none; background:transparent; color:var(--text-secondary); border-radius:var(--radius-xs); font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; transition:all 0.2s; font-family:inherit; white-space:nowrap; }
.acc-tab i { font-size:13px; }
.acc-tab:hover { color:var(--text-primary); background:rgba(255,255,255,0.6); }
.acc-tab.active { background:var(--bg-white); color:var(--primary); box-shadow:var(--shadow-xs); }

/* Tab Content */
.acc-tab-content { display:none; animation:accFadeIn 0.35s ease; }
.acc-tab-content.active { display:block; }
@keyframes accFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Summary Cards Row */
.acc-summary-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.acc-summary-card { background:var(--bg-white); border:1px solid var(--border-light); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-xs); transition:all 0.2s; position:relative; overflow:hidden; }
.acc-summary-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.acc-summary-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; }
.acc-summary-card.green::after { background:var(--success); }
.acc-summary-card.red::after { background:var(--danger); }
.acc-summary-card.blue::after { background:var(--primary); }
.acc-summary-card.orange::after { background:var(--orange); }
.acc-summary-card.purple::after { background:var(--purple); }
.acc-sc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.acc-sc-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.acc-sc-trend { display:flex; align-items:center; gap:3px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; }
.acc-sc-trend.up { color:var(--success); background:var(--success-light); }
.acc-sc-trend.down { color:var(--danger); background:var(--danger-light); }
.acc-sc-value { font-size:26px; font-weight:800; color:var(--text-primary); letter-spacing:-0.5px; font-family:'JetBrains Mono',monospace; margin-bottom:4px; }
.acc-sc-label { font-size:12px; color:var(--text-muted); }

/* Section Titles */
.acc-section-title { font-size:14px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; margin:4px 0 12px; }
.acc-section-title i { color:var(--primary); font-size:14px; }
.acc-section-title .acc-count-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; background:var(--primary-light); color:var(--primary); font-family:'JetBrains Mono',monospace; }

/* Two-Column Grid */
.acc-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acc-grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.acc-grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:14px; }
.acc-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

/* Professional Card */
.acc-card { background:var(--bg-white); border:1px solid var(--border-light); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-xs); }
.acc-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.acc-card-header h3 { font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
.acc-card-header h3 i { font-size:14px; }
.acc-card-header .acc-card-action { font-size:11px; font-weight:600; color:var(--primary); cursor:pointer; display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; transition:all 0.2s; }
.acc-card-header .acc-card-action:hover { background:var(--primary-light); }

/* Accounting Table */
.acc-table { width:100%; border-collapse:separate; border-spacing:0; }
.acc-table thead th { text-align:left; padding:10px 14px; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border-light); background:var(--bg-light); }
.acc-table thead th:first-child { border-radius:var(--radius-xs) 0 0 0; }
.acc-table thead th:last-child { border-radius:0 var(--radius-xs) 0 0; }
.acc-table tbody td { padding:10px 14px; font-size:12px; color:var(--text-secondary); border-bottom:1px solid var(--border-light); vertical-align:middle; }
.acc-table tbody tr:last-child td { border-bottom:none; }
.acc-table tbody tr:hover td { background:var(--bg-hover); }
.acc-table .acc-mono { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px; }
.acc-table .acc-bold { font-weight:600; color:var(--text-primary); }

/* Status Pills */
.acc-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:600; }
.acc-pill-success { background:var(--success-light); color:var(--success); }
.acc-pill-warning { background:var(--warning-light); color:var(--warning); }
.acc-pill-danger { background:var(--danger-light); color:var(--danger); }
.acc-pill-info { background:var(--info-light); color:var(--info); }
.acc-pill-purple { background:var(--purple-light); color:var(--purple); }
.acc-pill-muted { background:var(--bg-light); color:var(--text-muted); }

/* Bank Account Cards */
.acc-bank-list { display:flex; flex-direction:column; gap:8px; }
.acc-bank-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg-light); border-radius:var(--radius-sm); border:1px solid var(--border-light); transition:all 0.2s; }
.acc-bank-item:hover { border-color:rgba(79,70,229,0.2); background:rgba(79,70,229,0.02); }
.acc-bank-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; flex-shrink:0; }
.acc-bank-info { flex:1; min-width:0; }
.acc-bank-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.acc-bank-iban { font-size:10px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
.acc-bank-balance { font-size:16px; font-weight:800; color:var(--text-primary); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.acc-bank-type { font-size:10px; color:var(--text-muted); text-align:right; }

/* Tax Calendar */
.acc-tax-list { display:flex; flex-direction:column; gap:6px; }
.acc-tax-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-white); border:1px solid var(--border-light); border-radius:var(--radius-sm); transition:all 0.2s; }
.acc-tax-item:hover { box-shadow:var(--shadow-sm); }
.acc-tax-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.acc-tax-info { flex:1; }
.acc-tax-name { font-size:12px; font-weight:600; color:var(--text-primary); }
.acc-tax-date { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.acc-tax-date i { font-size:10px; }
.acc-tax-right { text-align:right; }
.acc-tax-amount { font-size:14px; font-weight:700; color:var(--text-primary); font-family:'JetBrains Mono',monospace; }

/* Expense Breakdown */
.acc-expense-list { display:flex; flex-direction:column; gap:8px; }
.acc-expense-item { display:flex; align-items:center; gap:10px; }
.acc-expense-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.acc-expense-info { flex:1; }
.acc-expense-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.acc-expense-name { font-size:12px; font-weight:600; color:var(--text-primary); }
.acc-expense-val { font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--text-primary); }
.acc-expense-bar { height:4px; background:var(--bg-light); border-radius:2px; overflow:hidden; }
.acc-expense-fill { height:100%; border-radius:2px; transition:width 0.8s ease; }

/* KDV Boxes */
.acc-kdv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.acc-kdv-box { padding:16px; background:var(--bg-light); border-radius:var(--radius-sm); text-align:center; border:1px solid var(--border-light); }
.acc-kdv-label { font-size:11px; color:var(--text-muted); margin-bottom:6px; }
.acc-kdv-value { font-size:22px; font-weight:800; font-family:'JetBrains Mono',monospace; }

/* Payment Method Distribution */
.acc-pay-list { display:flex; flex-direction:column; gap:6px; }
.acc-pay-item { display:flex; align-items:center; gap:10px; padding:8px 0; }
.acc-pay-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.acc-pay-info { flex:1; }
.acc-pay-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.acc-pay-name { font-size:12px; font-weight:500; color:var(--text-primary); }
.acc-pay-val { font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--text-primary); }
.acc-pay-bar { height:3px; background:var(--bg-light); border-radius:2px; overflow:hidden; }
.acc-pay-fill { height:100%; border-radius:2px; }

/* Cost Analysis Table */
.acc-cost-bar { display:flex; align-items:center; gap:6px; }
.acc-cost-fill { height:6px; border-radius:3px; background:var(--success); min-width:4px; }
.acc-cost-pct { font-size:10px; font-weight:700; color:var(--success); font-family:'JetBrains Mono',monospace; white-space:nowrap; }

/* Installment Items */
.acc-inst-list { display:flex; flex-direction:column; gap:8px; }
.acc-inst-item { display:flex; align-items:center; gap:12px; padding:14px; background:var(--bg-light); border-radius:var(--radius-sm); border:1px solid var(--border-light); }
.acc-inst-icon { width:36px; height:36px; border-radius:10px; background:var(--warning-light); color:var(--warning); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.acc-inst-info { flex:1; }
.acc-inst-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.acc-inst-detail { font-size:11px; color:var(--text-muted); }
.acc-inst-right { text-align:right; }
.acc-inst-amount { font-size:14px; font-weight:700; color:var(--text-primary); font-family:'JetBrains Mono',monospace; }
.acc-inst-remaining { font-size:10px; color:var(--text-muted); }

/* Mini Stat Boxes */
.acc-mini-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.acc-mini-stat { padding:12px; background:var(--bg-light); border-radius:var(--radius-sm); text-align:center; border:1px solid var(--border-light); }
.acc-mini-val { font-size:18px; font-weight:800; font-family:'JetBrains Mono',monospace; color:var(--text-primary); }
.acc-mini-label { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* Chart Container */
.acc-chart { position:relative; height:260px; }

/* KPI Row */
.acc-kpi-row { display:flex; gap:12px; flex-wrap:wrap; }
.acc-kpi-item { flex:1; min-width:100px; text-align:center; padding:12px 8px; background:var(--bg-light); border-radius:10px; }
.acc-kpi-val { font-size:20px; font-weight:800; font-family:'JetBrains Mono',monospace; line-height:1.2; }
.acc-kpi-lbl { font-size:10px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }

/* Badge Variants */
.acc-badge { display:inline-block; font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; }
.acc-badge-success { background:rgba(34,197,94,0.12); color:#16a34a; }
.acc-badge-danger { background:rgba(239,68,68,0.12); color:#ef4444; }
.acc-badge-warning { background:rgba(249,115,22,0.12); color:#f97316; }
.acc-badge-info { background:rgba(99,102,241,0.12); color:#6366f1; }
.acc-badge-muted { background:var(--bg-light); color:var(--text-muted); }

/* Small Button */
.acc-btn-sm { font-size:10px; padding:4px 10px; border-radius:6px; }

/* Responsive */
@media (max-width:1200px) { .acc-summary-row { grid-template-columns:repeat(2,1fr); } .acc-grid-2, .acc-grid-2-1, .acc-grid-1-2 { grid-template-columns:1fr; } .acc-grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) { .acc-summary-row { grid-template-columns:1fr; } .acc-tabs { gap:0; } .acc-tab { padding:8px 12px; font-size:11px; } .acc-header { flex-direction:column; gap:12px; align-items:flex-start; } .acc-kdv-grid { grid-template-columns:1fr; } }

/* ===== DETAIL MODAL (dm-*) ===== */
.dm-wrapper { margin:0; }
.dm-hero {
    padding:20px 20px 16px;
    background:var(--bg-white);
    border-bottom:1px solid var(--border-light);
}
.dm-hero-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dm-hero-icon {
    width:36px; height:36px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:#fff;
    background:var(--dm-color);
}
.dm-hero-close {
    width:28px; height:28px; border-radius:6px; border:none;
    background:transparent; color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
}
.dm-hero-close:hover { background:var(--bg-light); color:var(--text-primary); }
.dm-hero-title { font-size:15px; font-weight:600; color:var(--text-primary); line-height:1.4; }
.dm-hero-subtitle { font-size:11px; color:var(--text-muted); font-weight:400; margin-top:2px; }
.dm-body { padding:16px 20px 20px; display:flex; flex-direction:column; gap:16px; }

/* KPI Row */
.dm-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px; }
.dm-kpi {
    text-align:center; padding:12px 8px;
    background:var(--bg-light); border-radius:8px;
}
.dm-kpi-val { font-size:18px; font-weight:700; font-family:'JetBrains Mono',monospace; line-height:1; }
.dm-kpi-label { font-size:10px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.3px; font-weight:500; }

/* Sections */
.dm-section { display:flex; flex-direction:column; gap:8px; }
.dm-sec-title {
    font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:0.4px; display:flex; align-items:center; gap:6px;
    padding-bottom:6px; border-bottom:1px solid var(--border-light);
}
.dm-sec-title i { font-size:10px; opacity:0.5; }

/* Tables */
.dm-table-wrap { border-radius:8px; border:1px solid var(--border-light); overflow:hidden; }
.dm-table { width:100%; border-collapse:collapse; font-size:12px; }
.dm-table thead th {
    padding:8px 10px; text-align:left; font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.3px; color:var(--text-muted);
    background:var(--bg-light); border-bottom:1px solid var(--border-light);
}
.dm-table tbody td { padding:8px 10px; border-bottom:1px solid var(--border-light); }
.dm-table tbody tr:last-child td { border-bottom:none; }
.dm-table tbody tr:hover { background:var(--bg-light); }
.dm-table .mono { font-family:'JetBrains Mono',monospace; font-size:11px; }
.dm-table .bold { font-weight:700; }

/* Lists */
.dm-list { display:flex; flex-direction:column; gap:1px; }
.dm-list-item {
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    border-radius:6px;
}
.dm-list-item:hover { background:var(--bg-light); }
.dm-list-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dm-list-content { flex:1; min-width:0; }
.dm-list-main { font-size:13px; font-weight:500; color:var(--text-primary); }
.dm-list-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.dm-list-val { font-size:13px; font-weight:600; font-family:'JetBrains Mono',monospace; white-space:nowrap; }

/* Progress Bars */
.dm-progress-list { display:flex; flex-direction:column; gap:10px; }
.dm-progress-item { display:flex; flex-direction:column; gap:4px; }
.dm-progress-label { display:flex; justify-content:space-between; font-size:12px; font-weight:500; }
.dm-progress-label span:first-child { color:var(--text-secondary); }
.dm-progress-track { height:5px; background:var(--bg-light); border-radius:3px; overflow:hidden; }
.dm-progress-fill { height:100%; border-radius:3px; transition:width 0.4s ease; }

/* Info Box */
.dm-info {
    padding:10px 14px; border-radius:8px; font-size:12px; font-weight:400; line-height:1.5;
    background:var(--bg-light); color:var(--text-secondary);
    display:flex; align-items:flex-start; gap:8px;
}
.dm-info::before {
    content:'\f05a'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:12px;
    color:var(--text-muted); flex-shrink:0; margin-top:2px;
}

/* clickable cards */
.kpi-card[onclick], .acc-summary-card[onclick], .dash-fin-item[onclick], .dash-stock-alert[onclick], .top-item[onclick], .id-card[onclick], .transaction-item[onclick], .acc-expense-item[onclick], .acc-pay-item[onclick], .acc-bank-item[onclick], .acc-tax-item[onclick], .acc-inst-item[onclick] { cursor:pointer; transition:background 0.15s ease; }
.kpi-card[onclick]:hover, .acc-summary-card[onclick]:hover, .id-card[onclick]:hover { box-shadow:var(--shadow-sm); }
.dash-fin-item[onclick]:hover, .dash-stock-alert[onclick]:hover, .top-item[onclick]:hover, .transaction-item[onclick]:hover, .acc-expense-item[onclick]:hover, .acc-pay-item[onclick]:hover, .acc-bank-item[onclick]:hover, .acc-tax-item[onclick]:hover, .acc-inst-item[onclick]:hover { background:var(--bg-light); }
tr[onclick] { cursor:pointer; }
tr[onclick]:hover td { background:var(--bg-light); }

/* ================================================================
   RESPONSIVE — MOBILE & TABLET
   ================================================================ */

/* Sidebar overlay */
.sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,0.4);
}
.sidebar-overlay.active { display: block; }

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-grid.dash-triple { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dashboard-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .order-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .order-layout .category-list { display: none; }
    .payment-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .floor-plan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .k-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .infra-dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .accounting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mode-btn span { display: none; }
    .mode-btn i { margin: 0; }
    .mode-btn { padding: 7px 10px; }
    .topbar-date { display: none; }
}

/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 260px;
        --topbar-height: 50px;
    }

    /* --- Prevent ALL horizontal overflow --- */
    html { overflow-x: hidden; }
    body { overflow-x: hidden; width: 100%; max-width: 100%; }
    .app-container { overflow: hidden; width: 100%; max-width: 100%; }
    .main-content { overflow: hidden; width: 100% !important; max-width: 100% !important; }
    .view-container { overflow-x: hidden; overflow-y: auto; width: 100% !important; max-width: 100% !important; }
    .topbar { overflow: hidden; max-width: 100%; }
    .topbar-right { flex-shrink: 1; min-width: 0; overflow: hidden; }
    .topbar-left { flex-shrink: 1; min-width: 0; overflow: hidden; }

    /* --- Sidebar off-canvas --- */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        z-index: 200;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }
    .sidebar.collapsed { transform: translateX(-100%); }
    .main-content { margin-left: 0 !important; }

    /* --- Topbar compact --- */
    .topbar { padding: 0 12px; height: var(--topbar-height); }
    .topbar-left { gap: 8px; }
    .topbar-right { gap: 8px; }
    .topbar-clock span, .topbar-date { display: none; }
    .topbar-clock i { margin: 0; }
    .topbar-status span { display: none; }
    .topbar-infra .infra-label { display: none; }
    .mode-switcher { display: none; }
    .gt-waiter-indicator { display: none; }

    /* --- View container --- */
    .view-container { padding: 12px; }

    /* --- Login --- */
    .login-card { width: calc(100vw - 32px); max-width: 380px; padding: 24px; }
    .login-brand h1 { font-size: 32px; }
    .logo-icon { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; }
    .login-role-grid { grid-template-columns: repeat(2, 1fr); }

    /* --- KPI Grid --- */
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 100%; overflow: hidden; }
    .kpi-card { padding: 14px; min-width: 0; overflow: hidden; max-width: 100%; box-sizing: border-box; }
    .kpi-value { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
    .kpi-label { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .kpi-trend { font-size: 10px; overflow: hidden; max-width: 100%; }
    .kpi-trend i { flex-shrink: 0; }
    .kpi-icon { width: 34px; height: 34px; font-size: 14px; margin-bottom: 10px; }

    /* --- Dashboard --- */
    .dashboard-grid, .dashboard-grid.dash-triple, .dashboard-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
    .card { padding: 14px; }
    .card-header { margin-bottom: 12px; }
    .card-header h3 { font-size: 13px; }
    .dash-flow { gap: 4px; padding: 10px 0; }
    .dash-flow-step { min-width: 60px; padding: 8px 6px; }
    .dash-flow-step i { font-size: 14px; }
    .dash-flow-step span { font-size: 9px; }
    .chart-container { height: 200px; max-width: 100%; overflow: hidden; }
    .chart-container canvas { max-width: 100% !important; width: 100% !important; }
    .card { min-width: 0; overflow: hidden; max-width: 100%; box-sizing: border-box; }
    .dashboard-grid, .dashboard-grid.dash-triple, .dashboard-grid-3 { width: 100%; max-width: 100%; overflow: hidden; }
    .dash-fin-highlight { margin: 0 -14px; padding: 10px 14px !important; }
    .dash-flow { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .dash-flow-step { flex-shrink: 0; }

    /* --- Floor Plan / Tables --- */
    .floor-plan { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
    .table-number { font-size: 18px; }
    .table-status { font-size: 9px; }
    .floor-legend { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }

    /* --- Orders --- */
    .order-layout {
        grid-template-columns: 1fr;
        height: auto; min-height: calc(100vh - var(--topbar-height) - 24px);
    }
    .order-layout .category-list {
        flex-direction: row; overflow-x: auto; overflow-y: hidden;
        gap: 4px; padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .category-btn { white-space: nowrap; padding: 8px 12px; flex-shrink: 0; }
    .menu-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .menu-item { padding: 10px; }
    .menu-item-icon { font-size: 22px; }
    .menu-item-name { font-size: 11px; }
    .menu-item-price { font-size: 12px; }
    .order-panel { max-height: 50vh; }

    /* --- Kitchen --- */
    .k-view { height: auto; min-height: calc(100vh - var(--topbar-height) - 24px); }
    .k-header { gap: 10px; }
    .k-stats { gap: 6px; }
    .k-stat { padding: 8px 10px; min-width: 0; flex: 1; }
    .k-stat-num { font-size: 16px; }
    .k-stat-icon { width: 30px; height: 30px; font-size: 12px; }
    .k-filters { flex-wrap: wrap; }
    .k-filter-btn { padding: 6px 10px; font-size: 10px; }
    .k-grid { grid-template-columns: 1fr; }
    .k-timer-val { font-size: 18px; }

    /* --- Payment --- */
    .payment-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .receipt-preview { padding: 16px; font-size: 10px; max-height: 40vh; }
    .numpad-btn { padding: 10px; font-size: 14px; }
    .payment-method-btn { padding: 12px; gap: 10px; }
    .payment-method-btn i { font-size: 16px; }
    .payment-method-btn .method-name { font-size: 12px; }

    /* --- Accounting --- */
    .acc-header { padding: 14px 16px; flex-direction: column; gap: 12px; align-items: flex-start; }
    .acc-header-icon { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
    .acc-header-title { font-size: 16px; }
    .acc-header-actions { width: 100%; }
    .acc-header-actions .acc-btn { flex: 1; justify-content: center; font-size: 11px; padding: 7px 8px; }
    .acc-tabs { gap: 0; padding: 3px; }
    .acc-tab { padding: 8px 10px; font-size: 11px; }
    .acc-tab span { display: none; }
    .acc-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .acc-summary-card { padding: 14px; }
    .acc-summary-val { font-size: 18px; }
    .acc-grid-2, .acc-grid-2-1, .acc-grid-1-2, .acc-grid-3 { grid-template-columns: 1fr; }
    .acc-kdv-grid { grid-template-columns: 1fr; }
    .acc-card { padding: 14px; }
    .acc-card-title { font-size: 13px; }
    .acc-table-wrap, .acc-card > table.acc-table, .acc-card > div > table.acc-table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .acc-table { font-size: 11px; min-width: 500px; }
    .acc-table thead th { padding: 8px 8px; font-size: 9px; }
    .acc-table tbody td { padding: 8px 8px; font-size: 11px; }

    /* --- Reports --- */
    .report-filters { flex-wrap: wrap; }
    .filter-btn { padding: 6px 10px; font-size: 11px; }

    /* --- Data Tables scroll wrapper --- */
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table thead, .data-table tbody { min-width: 500px; }

    /* --- Infra Dashboard --- */
    .infra-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    /* --- Modal full width --- */
    .modal-overlay { padding: 10px; }
    .modal-content { max-width: 100%; max-height: 90vh; border-radius: 10px; }

    /* --- Toast --- */
    .toast-container { left: 10px; right: 10px; top: 10px; }
    .toast { min-width: 0; width: 100%; }

    /* --- Accounting transactions, lists --- */
    .transaction-item { gap: 8px; padding: 10px 0; }
    .transaction-icon { width: 30px; height: 30px; font-size: 11px; }
    .transaction-info .tx-title { font-size: 11px; }
    .transaction-amount { font-size: 12px; }
    .accounting-grid { grid-template-columns: 1fr; }

    /* --- Flow Overlay --- */
    .flow-subtitle { font-size: 20px; margin-bottom: 24px; }
    .flow-steps { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .flow-connector { display: none; }
    .flow-step { flex: 0 0 auto; min-width: 80px; }
    .flow-step-icon { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
    .flow-step-desc { max-width: 90px; font-size: 10px; }
    .flow-detail-card { padding: 18px; margin-top: 24px; }
    .flow-close { top: 12px; right: 12px; }
    .flow-progress { bottom: 20px; }
    .flow-progress-bar { width: 140px; }

    /* --- Cinematic Flow Overlay --- */
    .cine { overflow-y: auto; overflow-x: hidden; }
    .cine-lb { height: 28px; }
    .cine-vp { inset: 28px 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
    .cine-x { top: 34px; right: 10px; width: 34px; height: 34px; font-size: 12px; }

    /* Intro */
    .cine-intro { min-height: 100%; }
    .cine-ic { padding: 0 16px; }
    .cine-type { font-size: 20px; }
    .cine-isub { font-size: 11px; }
    .cine-imeta { flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 11px; }

    /* Scenes */
    .cine-sc { position: relative; inset: auto; padding: 12px; display: flex; flex-direction: column; min-height: 100%; }
    .cine-sc-head { margin-bottom: 10px; gap: 10px; }
    .cine-sc-num { font-size: 22px; }
    .cine-sc-txt h2 { font-size: 15px; }
    .cine-sc-txt p { font-size: 11px; }
    .cine-sc-body { grid-template-columns: minmax(0, 1fr); gap: 12px; flex: 1; }
    .cine-sc-vis { min-height: 200px; border-radius: 14px; }
    .cine-sc-info { min-height: 0; }

    /* Info Cards */
    .ci { padding: 14px; border-radius: 12px; max-height: none; overflow-y: visible; }
    .ci-head { gap: 10px; }
    .ci-head h4 { font-size: 13px; }
    .ci-sub { font-size: 10px; }
    .ci-ico { width: 32px; height: 32px; font-size: 14px; }
    .ci-dash { flex-wrap: wrap; gap: 6px; }
    .ci-dash-item { min-width: calc(33% - 6px); padding: 8px; }
    .ci-di-val { font-size: 16px; }
    .ci-di-lbl { font-size: 8px; }
    .ci-section-title { font-size: 10px; }
    .ci-note { font-size: 10px; padding: 8px 10px; }
    .ci-order-list, .ci-stock-list { gap: 4px; }
    .ci-ol-row { font-size: 10px; }
    .ci-totals { gap: 4px; }
    .ci-tot-row { font-size: 11px; padding: 4px 0; }
    .ci-tot-big { font-size: 13px; }
    .ci-cost-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
    .ci-cost-item { padding: 6px 8px; }
    .ci-cost-lbl { font-size: 8px; }
    .ci-cost-val { font-size: 12px; }
    .ci-journal { gap: 2px; }
    .ci-j-head, .ci-j-row { font-size: 10px; }
    .ci-receipt-info { gap: 3px; }
    .ci-ri-row { font-size: 10px; }
    .ci-checks { gap: 4px; }
    .ci-ck { font-size: 10px; padding: 6px 8px; }
    .ci-cook-row { font-size: 10px; }

    /* iPad / Monitor visuals */
    .cv-ipf, .cv-wm-bezel { width: 100%; max-width: 100%; }
    .cv-ipad, .cv-wmon { transform: none; width: 100%; }
    .cv-ip-scr { padding: 6px; }
    .cv-app-bar { font-size: 10px; padding: 6px 8px; }
    .cv-tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .cv-tc { padding: 6px 4px; }
    .cv-tc-ico { font-size: 12px; }
    .cv-tc-name { font-size: 8px; }
    .cv-tc-st { font-size: 7px; }
    .cv-olayout { grid-template-columns: minmax(0, 1fr) 120px; gap: 6px; }
    .cv-ocats { gap: 3px; margin-bottom: 6px; }
    .cv-ocat { font-size: 8px; padding: 3px 6px; }
    .cv-omgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .cv-omc { padding: 6px; }
    .cv-omc-n { font-size: 9px; }
    .cv-omc-p { font-size: 9px; }
    .cv-ocart-h { font-size: 10px; padding: 6px; }
    .cv-ocart-row { font-size: 9px; padding: 3px 6px; }
    .cv-ocart-tot { font-size: 11px; padding: 6px; }
    .cv-ocart-btn { font-size: 10px; padding: 6px; }
    .cv-kgrid { gap: 8px; padding: 8px; }
    .cv-kcard { border-radius: 10px; }
    .cv-kcard-top { font-size: 10px; padding: 8px; }
    .cv-ki { font-size: 10px; padding: 5px 8px; }
    .cv-kcard-ft { font-size: 9px; padding: 6px 8px; }
    .cv-wm-bar { font-size: 9px; padding: 5px 8px; }

    /* Payment terminal */
    .cv-pay-wrap { transform: scale(0.85); transform-origin: center center; }
    .cv-pay-terminal { width: 160px; }
    .cv-pt-scr { padding: 10px; }
    .cv-pt-hdr { font-size: 10px; }
    .cv-pt-tbl { font-size: 12px; }
    .cv-pt-row { font-size: 9px; }
    .cv-pt-total { font-size: 11px; }
    .cv-ptm { font-size: 9px; padding: 4px 8px; }
    .cv-pay-card { width: 120px; height: 75px; padding: 8px; }
    .cv-pc-num { font-size: 9px; }

    /* Receipt */
    .cv-rcpt-wrap { transform: scale(0.85); transform-origin: center center; }
    .cv-rcpt-paper { font-size: 9px; }
    .cv-rp-lbl { font-size: 10px; }
    .cv-rp-row { font-size: 9px; }
    .cv-rp-total { font-size: 11px; }
    .cv-rp-stamp { font-size: 10px; }

    /* Accounting KPIs */
    .cv-acc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-akpi { padding: 8px 6px; }
    .cv-akpi-v { font-size: 11px; }
    .cv-akpi-l { font-size: 8px; }
    .cv-at-h, .cv-at-r { font-size: 9px; padding: 5px 8px; }

    /* Live Bar */
    .cine-live-bar { flex-wrap: wrap; padding: 6px 8px; gap: 4px; }
    .clb-item { min-width: calc(50% - 4px); padding: 3px 6px; }
    .clb-val { font-size: 11px; }
    .clb-lbl { font-size: 8px; }

    /* Footer / Timeline */
    .cine-footer { position: relative; bottom: auto; left: auto; transform: none; margin: 8px auto; padding: 0 12px; width: 100%; box-sizing: border-box; }
    .cine-cnt { font-size: 10px; gap: 6px; }
    .cine-cnt-ph { font-size: 11px; }
    .cine-tl-track { width: 200px; }
    .cine-tl-dot { width: 18px; height: 18px; font-size: 7px; }

    /* Finale */
    .cine-finale h2 { font-size: 16px; }
    .cine-fin-icon { width: 50px; height: 50px; font-size: 22px; }
    .cine-fin-stats { flex-wrap: wrap; gap: 10px; }
    .cine-fin-stats strong { font-size: 16px; }
    .cine-fin-stats span { font-size: 9px; }
    .cine-fin-btns { flex-direction: column; width: 100%; max-width: 200px; }
    .cine-btn { justify-content: center; font-size: 12px; }

    /* --- Infra Panel --- */
    .infra-panel { right: 8px; left: 8px; width: auto; top: var(--topbar-height); }
    .ip-grid { grid-template-columns: repeat(2, 1fr); }

    /* --- Utility grids --- */
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }

    /* --- Payment Success --- */
    .payment-success-icon { width: 70px; height: 70px; font-size: 28px; }
    .payment-success-text { font-size: 18px; }
    .payment-success-amount { font-size: 24px; }

    /* --- Garson tablet mode on mobile --- */
    .gt-floor-grid { grid-template-columns: repeat(3, 1fr); }
    .gt-salon-header { flex-direction: column; gap: 8px; align-items: flex-start; }
    .gt-order-layout { grid-template-columns: 1fr; }
    .gt-order-right {
        position: fixed; bottom: 0; left: 0; right: 0;
        height: 45vh; z-index: 200;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }
}

/* ---------- SMALL MOBILE (≤480px) ---------- */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
    .kpi-card { padding: 12px; }
    .kpi-value { font-size: 18px; }
    .kpi-label { font-size: 11px; }
    .acc-summary-row { grid-template-columns: minmax(0,1fr); }
    .floor-plan { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    .menu-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .k-stats { flex-direction: column; }
    .k-stat { flex: auto; }
    .order-panel { max-height: 40vh; }
    .topbar-notifications { display: none; }
    .login-role-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}