:root {
    --fire: #E8400C;
    --gold: #F5A623;
    --cream: #FDF6EC;
    --dark: #1A0A00;
    --charcoal: #2D1810;
    --muted: #8B6F5E;
    --white: #FFFFFF;
    --success: #2ECC71;
    --danger: #E74C3C;
    --info: #3498DB;
    --warning: #F39C12;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--dark); }

  /* ===== NAVBAR ===== */
  nav {
    background:var(--dark);
    padding:0 40px;
    display:flex; align-items:center; justify-content:space-between;
    height:70px; position:sticky; top:0; z-index:100;
    box-shadow:0 2px 20px rgba(0,0,0,0.4);
  }
  .logo { font-family:'Playfair Display',serif; color:var(--gold); font-size:1.6rem; font-weight:900; }
  .logo span { color:var(--fire); }
  .nav-links a {
    color:#ccc; text-decoration:none; margin-left:28px; font-size:0.9rem;
    font-weight:500; transition:color 0.2s; cursor:pointer;
  }
  .nav-links a:hover, .nav-links a.active { color:var(--gold); }
  .nav-btn {
    background:var(--fire); color:#fff; border:none; padding:9px 22px;
    border-radius:6px; cursor:pointer; font-weight:600; font-size:0.85rem;
    margin-left:20px; transition:background 0.2s;
  }
  .nav-btn:hover { background:#c73509; }
  .order-nav-wrap { position:relative; display:inline-block; margin-left:20px; }
  .order-nav-wrap .nav-btn { margin-left:0; }
  .cart-badge {
    display:none; position:absolute; top:-8px; right:-8px;
    background:var(--gold); color:var(--dark); font-size:0.7rem; font-weight:800;
    width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.3); animation:pop 0.2s ease;
  }
  .cart-badge.visible { display:flex; }
  @keyframes pop { 0%{transform:scale(0.5)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }

  /* ===== DINE-IN BOOKING ===== */
  .dine-in-section {
    display:none;
    background:#fff8e1;
    border:2px solid #ffe082;
    border-radius:14px;
    padding:20px;
    margin:16px 0;
    animation:fadeIn 0.3s ease;
  }
  .dine-in-section.show { display:block; }
  .dine-in-title {
    font-size:1rem;font-weight:700;color:var(--dark);
    margin-bottom:14px;display:flex;align-items:center;gap:8px;
  }
  .table-picker-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:10px;margin:14px 0;
  }
  .table-pick-card {
    border-radius:12px;padding:12px 8px;text-align:center;
    cursor:pointer;transition:all 0.2s;border:2px solid transparent;
  }
  .table-pick-card.available {
    background:#e8f5e9;border-color:#a5d6a7;
  }
  .table-pick-card.available:hover {
    background:#c8e6c9;border-color:#4caf50;transform:translateY(-2px);
  }
  .table-pick-card.reserved {
    background:#fce4ec;border-color:#ef9a9a;
    cursor:not-allowed;opacity:0.7;
  }
  .table-pick-card.occupied {
    background:#ffebee;border-color:#ef9a9a;
    cursor:not-allowed;opacity:0.7;
  }
  .table-pick-card.selected {
    background:var(--fire) !important;border-color:var(--fire) !important;
    transform:translateY(-2px);box-shadow:0 4px 12px rgba(232,68,26,0.3);
  }
  .table-pick-card.selected .tpick-num { color:#fff !important; }
  .table-pick-card.selected .tpick-cap { color:rgba(255,255,255,0.8) !important; }
  .table-pick-card.selected .tpick-status { color:#fff !important; }
  .tpick-num { font-size:1.2rem;font-weight:900;color:var(--dark); }
  .tpick-cap { font-size:0.68rem;color:var(--muted);margin:2px 0; }
  .tpick-status { font-size:0.65rem;font-weight:700;text-transform:uppercase; }
  .tpick-section { font-size:0.65rem;color:var(--muted); }
  .dine-in-legend {
    display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:0.78rem;
  }
  .dine-in-leg { display:flex;align-items:center;gap:5px; }
  .dine-in-leg-dot {
    width:10px;height:10px;border-radius:50%;
  }
  /* ===== TABLE MANAGEMENT ===== */
  .tbl-wrap { padding:4px; }
  .tbl-topbar { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px; }
  .tbl-sub-tabs { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px; }
  .tbl-sub-tab { background:#fff;border:2px solid #e8d5c8;color:var(--muted);padding:8px 18px;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.83rem;font-family:inherit;transition:all 0.2s; }
  .tbl-sub-tab.active { background:var(--fire);color:#fff;border-color:var(--fire); }
  .tbl-section { display:none; }
  .tbl-section.active { display:block;animation:fadeIn 0.3s ease; }

  /* Floor Plan */
  .floor-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px; }
  .table-card-vis {
    border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;
    border:3px solid transparent;position:relative;text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
  }
  .table-card-vis:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.15); }
  .table-card-vis.available { background:#e8f5e9;border-color:#a5d6a7; }
  .table-card-vis.occupied  { background:#fce4ec;border-color:#ef9a9a; }
  .table-card-vis.reserved  { background:#fff8e1;border-color:#ffe082; }
  .table-card-vis.cleaning  { background:#e3f2fd;border-color:#90caf9; }
  .tbl-num { font-size:1.6rem;font-weight:900;color:var(--dark); }
  .tbl-cap { font-size:0.75rem;color:var(--muted);margin-bottom:6px; }
  .tbl-status-dot { display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px; }
  .dot-available { background:#4caf50; }
  .dot-occupied  { background:#f44336; }
  .dot-reserved  { background:#ff9800; }
  .dot-cleaning  { background:#2196f3; }
  .tbl-status-label { font-size:0.72rem;font-weight:700;text-transform:uppercase; }
  .tbl-timer-vis { font-size:0.78rem;font-weight:700;color:#666;margin-top:4px;font-family:monospace; }
  .tbl-guest { font-size:0.75rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .tbl-order-amt { font-size:0.82rem;font-weight:800;color:var(--fire);margin-top:4px; }
  .tbl-shape-round { border-radius:50% !important; }

  /* Legend */
  .tbl-legend { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px; }
  .tbl-leg-item { display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--muted); }

  /* Stats bar */
  .tbl-stats { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px; }
  .tbl-stat { background:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.07);text-align:center; }
  .tbl-stat-num { font-size:1.4rem;font-weight:800; }
  .tbl-stat-lbl { font-size:0.72rem;color:var(--muted); }

  /* ===== KDS ===== */
  .kds-wrap { background:#111; min-height:calc(100vh - 120px); border-radius:14px; padding:16px; }
  .kds-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
  .kds-clock { font-size:1.4rem; font-weight:800; color:#fff; font-family:monospace; }
  .kds-stats { display:flex; gap:10px; }
  .kds-stat { background:#222; padding:6px 14px; border-radius:8px; font-size:0.8rem; font-weight:700; }
  .kds-stat.red { color:#ff4444; }
  .kds-stat.yellow { color:#ffcc00; }
  .kds-stat.green { color:#44ff88; }
  .kds-controls { display:flex; gap:8px; flex-wrap:wrap; }
  .kds-btn { background:#333; color:#fff; border:none; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:0.8rem; font-weight:700; transition:background 0.2s; }
  .kds-btn:hover { background:#444; }
  .kds-btn.active { background:var(--fire); }
  .kds-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
  .kds-card { border-radius:12px; padding:14px; position:relative; border:2px solid transparent; transition:all 0.3s; }
  .kds-card.status-new { background:#1a0000; border-color:#ff4444; }
  .kds-card.status-preparing { background:#1a1400; border-color:#ffcc00; }
  .kds-card.status-ready { background:#001a08; border-color:#44ff88; }
  .kds-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
  .kds-order-id { font-size:1rem; font-weight:900; color:#fff; }
  .kds-table { font-size:0.75rem; color:#aaa; margin-top:2px; }
  .kds-type-badge { font-size:0.7rem; font-weight:700; padding:3px 8px; border-radius:10px; }
  .kds-type-dine { background:#1a3a6b; color:#64b5f6; }
  .kds-type-takeaway { background:#3a1a00; color:#ffb74d; }
  .kds-type-delivery { background:#0a2a0a; color:#81c784; }
  .kds-timer { font-size:1.1rem; font-weight:900; font-family:monospace; padding:4px 10px; border-radius:8px; }
  .kds-timer.ok { color:#44ff88; background:rgba(68,255,136,0.1); }
  .kds-timer.warn { color:#ffcc00; background:rgba(255,204,0,0.1); }
  .kds-timer.late { color:#ff4444; background:rgba(255,68,68,0.15); animation:pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
  .kds-items { margin-bottom:12px; }
  .kds-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
  .kds-item-name { font-size:0.95rem; font-weight:600; color:#fff; }
  .kds-item-qty { font-size:1rem; font-weight:900; color:#ffcc00; background:rgba(255,204,0,0.12); padding:2px 10px; border-radius:6px; }
  .kds-note { background:rgba(255,165,0,0.1); border:1px solid rgba(255,165,0,0.3); border-radius:6px; padding:6px 10px; font-size:0.78rem; color:#ffb74d; margin-bottom:10px; }
  .kds-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .kds-action-btn { padding:10px; border:none; border-radius:8px; font-weight:800; cursor:pointer; font-size:0.82rem; transition:all 0.2s; }
  .kds-action-btn.preparing { background:#ffcc00; color:#000; }
  .kds-action-btn.ready { background:#44ff88; color:#000; }
  .kds-action-btn.done { background:#333; color:#888; cursor:default; }
  .kds-action-btn.edit { background:#333; color:#aaa; }
  .kds-action-btn.edit:hover { background:#555; color:#fff; }
  .kds-empty { text-align:center; padding:60px 20px; color:#444; }
  .kds-empty-icon { font-size:4rem; margin-bottom:12px; }
  .kds-filter-bar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .kds-filter-btn { background:#222; color:#888; border:1px solid #333; padding:6px 14px; border-radius:20px; cursor:pointer; font-size:0.78rem; font-weight:700; transition:all 0.2s; }
  .kds-filter-btn.active { background:var(--fire); color:#fff; border-color:var(--fire); }
  .kds-search { background:#222; color:#fff; border:1px solid #333; padding:7px 12px; border-radius:8px; font-size:0.82rem; flex:1; min-width:160px; }
  .kds-search::placeholder { color:#555; }

  /* ===== INVENTORY ===== */
  .inv-tab {
    background:#fff; border:2px solid #e8d5c8; color:var(--muted);
    padding:8px 16px; border-radius:8px; cursor:pointer; font-weight:600;
    font-size:0.83rem; font-family:inherit; transition:all 0.2s;
  }
  .inv-tab:hover { border-color:var(--fire); color:var(--fire); }
  .inv-tab.active { background:var(--fire); color:#fff; border-color:var(--fire); }
  .inv-section { display:none; }
  .inv-section.active { display:block; animation:fadeIn 0.3s ease; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .inv-add-btn {
    background:var(--fire); color:#fff; border:none; padding:9px 18px;
    border-radius:8px; cursor:pointer; font-weight:700; font-size:0.83rem;
    font-family:inherit; transition:background 0.2s;
  }
  .inv-add-btn:hover { background:#c73509; }
  .inv-csv-btn {
    background:#fff; color:#2e7d32; border:2px solid #a5d6a7;
    padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:700;
    font-size:0.82rem; font-family:inherit; transition:all 0.2s;
    display:inline-flex; align-items:center; gap:5px;
  }
  .inv-csv-btn:hover { background:#e8f5e9; border-color:#4caf50; }
  .inv-csv-btn.inv-csv-import { color:#1565c0; border-color:#90caf9; }
  .inv-csv-btn.inv-csv-import:hover { background:#e3f2fd; border-color:#1565c0; }
  .stock-ok { background:#e8f5e9; color:#2e7d32; }
  .stock-low { background:#fff8e1; color:#f57c00; }
  .stock-critical { background:#fce4ec; color:#c62828; }
  .stock-overstock { background:#e3f2fd; color:#1565c0; }
  .stock-expired { background:#f3e5f5; color:#7b1fa2; }
  .inv-readonly { background:#f9f9f9; cursor:not-allowed; opacity:0.7; }
  .alert-card {
    background:#fff; border-radius:10px; padding:14px 16px;
    border-left:4px solid var(--fire); box-shadow:0 2px 8px rgba(0,0,0,0.07);
    min-width:160px;
  }
  .alert-card.warn { border-left-color:var(--warning); }
  .alert-card.danger { border-left-color:var(--danger); }
  .alert-card.purple { border-left-color:#9b59b6; }

  /* ===== CUSTOMER AUTH ===== */
  .auth-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.6);
    z-index:5000; display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .auth-box {
    background:#fff; border-radius:20px; padding:36px 32px;
    width:100%; max-width:460px; box-shadow:0 20px 60px rgba(0,0,0,0.3);
    position:relative; max-height:90vh; overflow-y:auto;
  }
  .auth-box::before {
    content:''; position:absolute; top:0; left:0; right:0; height:5px;
    background:linear-gradient(90deg,var(--fire),var(--gold));
    border-radius:20px 20px 0 0;
  }
  .auth-tabs { display:flex; gap:0; margin-bottom:24px; background:#f5f0eb; border-radius:10px; padding:4px; }
  .auth-tab {
    flex:1; padding:10px; border:none; border-radius:8px; cursor:pointer;
    font-weight:700; font-size:0.9rem; font-family:inherit; background:transparent;
    color:var(--muted); transition:all 0.2s;
  }
  .auth-tab.active { background:#fff; color:var(--fire); box-shadow:0 2px 8px rgba(0,0,0,0.1); }
  .auth-form { display:none; }
  .auth-form.active { display:block; }
  .auth-logo { font-family:"Playfair Display",serif; font-size:1.5rem; font-weight:900; color:var(--dark); margin-bottom:4px; }
  .auth-logo span { color:var(--fire); }
  .auth-sub { color:var(--muted); font-size:0.85rem; margin-bottom:20px; }
  .auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .auth-grid .form-group { margin-bottom:0; }
  .auth-grid .form-group.full { grid-column:1/-1; }
  .auth-btn {
    width:100%; padding:13px; background:var(--fire); color:#fff; border:none;
    border-radius:10px; font-size:0.95rem; font-weight:700; cursor:pointer;
    font-family:inherit; margin-top:16px; transition:background 0.2s;
  }
  .auth-btn:hover { background:#c73509; }
  .auth-link { text-align:center; margin-top:12px; font-size:0.82rem; color:var(--muted); }
  .auth-link span { color:var(--fire); cursor:pointer; font-weight:600; }
  .auth-link span:hover { text-decoration:underline; }

  /* Customer profile chip in nav */
  .cust-chip {
    background:rgba(245,166,35,0.15); border:1px solid var(--gold);
    color:var(--gold); padding:6px 14px; border-radius:20px;
    font-size:0.82rem; font-weight:600; cursor:pointer; margin-left:8px;
    display:flex; align-items:center; gap:6px;
  }
  .cust-chip:hover { background:rgba(245,166,35,0.25); }

  /* Order tracking */
  .track-wrap { max-width:700px; margin:0 auto; padding:30px 20px; }
  .track-card {
    background:#fff; border-radius:14px; padding:20px;
    box-shadow:0 2px 15px rgba(0,0,0,0.08); margin-bottom:16px;
  }
  .track-steps { display:flex; justify-content:space-between; margin:20px 0; position:relative; }
  .track-steps::before {
    content:''; position:absolute; top:16px; left:10%; right:10%;
    height:3px; background:#e8d5c8; z-index:0;
  }
  .track-step { display:flex; flex-direction:column; align-items:center; gap:6px; z-index:1; flex:1; }
  .track-dot {
    width:32px; height:32px; border-radius:50%; background:#e8d5c8;
    display:flex; align-items:center; justify-content:center; font-size:0.9rem;
    border:3px solid #fff; box-shadow:0 0 0 2px #e8d5c8;
    transition:all 0.3s;
  }
  .track-dot.done { background:var(--success); box-shadow:0 0 0 2px var(--success); }
  .track-dot.active { background:var(--fire); box-shadow:0 0 0 2px var(--fire); animation:pulse2 1.5s infinite; }
  @keyframes pulse2 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
  .track-label { font-size:0.7rem; font-weight:600; color:var(--muted); text-align:center; }
  .track-label.active { color:var(--fire); }
  .track-label.done { color:var(--success); }

  /* ===== PAGES ===== */
  .page { display:none; }
  .page.active { display:block; }

  /* ===== HERO ===== */
  .hero {
    min-height:85vh; display:flex; align-items:center;
    background: linear-gradient(135deg, var(--dark) 0%, var(--charcoal) 50%, #3D1F10 100%);
    position:relative; overflow:hidden; padding:60px 40px;
  }
  .hero::before {
    content:''; position:absolute; top:-50%; right:-20%;
    width:700px; height:700px; border-radius:50%;
    background:radial-gradient(circle, rgba(232,64,12,0.15) 0%, transparent 70%);
  }
  .hero::after {
    content:'🔥'; position:absolute; right:15%; top:50%;
    transform:translateY(-50%); font-size:220px; opacity:0.06;
  }
  .hero-content { max-width:600px; position:relative; z-index:1; }
  .hero-badge {
    display:inline-block; background:rgba(245,166,35,0.15); border:1px solid var(--gold);
    color:var(--gold); padding:6px 16px; border-radius:20px; font-size:0.8rem;
    font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:24px;
  }
  .hero h1 {
    font-family:'Playfair Display',serif; font-size:3.8rem; font-weight:900;
    color:var(--white); line-height:1.1; margin-bottom:20px;
  }
  .hero h1 span { color:var(--fire); }
  .hero p { color:#bbb; font-size:1.1rem; line-height:1.7; margin-bottom:36px; }
  .hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
  .btn-primary {
    background:var(--fire); color:#fff; border:none; padding:14px 32px;
    border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer;
    transition:all 0.2s; letter-spacing:0.3px;
  }
  .btn-primary:hover { background:#c73509; transform:translateY(-2px); box-shadow:0 8px 25px rgba(232,64,12,0.4); }
  .btn-outline {
    background:transparent; color:var(--gold); border:2px solid var(--gold);
    padding:13px 32px; border-radius:8px; font-size:1rem; font-weight:600;
    cursor:pointer; transition:all 0.2s;
  }
  .btn-outline:hover { background:var(--gold); color:var(--dark); }

  /* ===== MENU PAGE ===== */
  .page-header {
    background:var(--dark); color:var(--white); padding:50px 40px 30px;
    text-align:center;
  }
  .page-header h2 { font-family:'Playfair Display',serif; font-size:2.5rem; color:var(--gold); }
  .page-header p { color:#aaa; margin-top:8px; }

  .menu-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px; padding:40px;
  }
  .menu-card {
    background:var(--white); border-radius:16px; overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.08); transition:transform 0.2s, box-shadow 0.2s;
  }
  .menu-card:hover { transform:translateY(-4px); box-shadow:0 12px 35px rgba(0,0,0,0.15); }
  .menu-card-img {
    height:160px; display:flex; align-items:center; justify-content:center;
    font-size:5rem; background:linear-gradient(135deg,#fff5ee,#ffe8d6);
  }
  .menu-card-body { padding:20px; }
  .menu-card-body h3 { font-size:1.1rem; font-weight:700; margin-bottom:6px; }
  .menu-card-body p { color:var(--muted); font-size:0.85rem; margin-bottom:14px; line-height:1.5; }
  .menu-card-footer { display:flex; justify-content:space-between; align-items:center; }
  .price { font-size:1.3rem; font-weight:700; color:var(--fire); }
  .add-btn {
    background:var(--fire); color:#fff; border:none; padding:8px 18px;
    border-radius:6px; cursor:pointer; font-weight:600; font-size:0.85rem;
    transition:background 0.2s;
  }
  .add-btn:hover { background:#c73509; }
  .badge-veg { color:#2ECC71; font-size:0.75rem; font-weight:700; }
  .badge-nonveg { color:var(--fire); font-size:0.75rem; font-weight:700; }

  /* ===== ORDER FORM ===== */
  .order-section { max-width:700px; margin:0 auto; padding:40px 20px; }
  .order-section h2 { font-family:'Playfair Display',serif; font-size:2rem; margin-bottom:8px; }
  .order-section p { color:var(--muted); margin-bottom:30px; }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .form-group { display:flex; flex-direction:column; gap:6px; }
  .form-group.full { grid-column:1/-1; }
  .form-group label { font-size:0.85rem; font-weight:600; color:var(--charcoal); }
  .form-group input, .form-group select, .form-group textarea {
    padding:11px 14px; border:2px solid #e8d5c8; border-radius:8px;
    font-size:0.95rem; font-family:inherit; transition:border-color 0.2s;
    background:#fff;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline:none; border-color:var(--fire);
  }
  .form-group textarea { resize:vertical; min-height:80px; }
  .cart-summary {
    background:#fff; border-radius:12px; padding:20px;
    box-shadow:0 2px 15px rgba(0,0,0,0.08); margin-bottom:24px;
  }
  .cart-summary h3 { font-size:1rem; font-weight:700; margin-bottom:14px; color:var(--dark); }
  .cart-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f0e8e0; font-size:0.9rem; }
  .cart-item:last-child { border-bottom:none; font-weight:700; color:var(--fire); }
  .qty-ctrl { display:flex; align-items:center; gap:10px; }
  .qty-btn {
    background:var(--cream); border:1px solid #ddd; width:28px; height:28px;
    border-radius:50%; cursor:pointer; font-size:1rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .qty-btn:hover { background:var(--fire); color:#fff; border-color:var(--fire); }
  .submit-order {
    width:100%; background:var(--fire); color:#fff; border:none;
    padding:15px; border-radius:10px; font-size:1rem; font-weight:700;
    cursor:pointer; transition:background 0.2s; margin-top:10px;
  }
  .submit-order:hover { background:#c73509; }

  /* ===== TOAST ===== */
  .toast {
    position:fixed; bottom:30px; right:30px; background:var(--dark);
    color:#fff; padding:14px 24px; border-radius:10px; font-weight:600;
    font-size:0.9rem; z-index:9999; transform:translateY(100px);
    transition:transform 0.4s; box-shadow:0 8px 30px rgba(0,0,0,0.3);
    border-left:4px solid var(--success);
  }
  .toast.show { transform:translateY(0); }
  .toast.error { border-left-color:var(--danger); }

  /* ===== ADMIN LOGIN ===== */
  .admin-login {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--dark),var(--charcoal));
  }
  .login-box {
    background:#fff; border-radius:20px; padding:48px 40px;
    width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.3);
  }
  .login-box h2 { font-family:'Playfair Display',serif; font-size:2rem; margin-bottom:6px; }
  .login-box p { color:var(--muted); margin-bottom:30px; font-size:0.9rem; }
  .login-box .form-group { margin-bottom:18px; }
  .login-btn {
    width:100%; background:var(--fire); color:#fff; border:none;
    padding:14px; border-radius:10px; font-size:1rem; font-weight:700;
    cursor:pointer; margin-top:8px; transition:background 0.2s;
  }
  .login-btn:hover { background:#c73509; }
  .login-roles { margin-top:20px; padding:14px; background:var(--cream); border-radius:8px; font-size:0.8rem; color:var(--muted); }
  .login-roles strong { color:var(--dark); display:block; margin-bottom:6px; }

  /* ===== DASHBOARD ===== */
  .dashboard { display:flex; min-height:100vh; background:#f4f1ee; }
  .sidebar {
    width:250px; background:var(--dark); flex-shrink:0;
    padding:30px 0; display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .sidebar-logo {
    padding:0 24px 24px; font-family:'Playfair Display',serif;
    color:var(--gold); font-size:1.3rem; font-weight:900;
    border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:20px;
  }
  .sidebar-logo small { display:block; color:var(--muted); font-size:0.7rem; font-family:'DM Sans',sans-serif; font-weight:400; margin-top:2px; }
  .sidebar-menu { flex:1; }
  .sidebar-item {
    display:flex; align-items:center; gap:12px; padding:12px 24px;
    color:#aaa; cursor:pointer; transition:all 0.2s; font-size:0.9rem;
    border-left:3px solid transparent;
  }
  .sidebar-item:hover { color:#fff; background:rgba(255,255,255,0.05); }
  .sidebar-item.active { color:var(--gold); background:rgba(245,166,35,0.1); border-left-color:var(--gold); }
  .sidebar-item .icon { font-size:1.1rem; width:20px; text-align:center; }
  .sidebar-logout {
    padding:20px 24px; border-top:1px solid rgba(255,255,255,0.08);
    color:#e74c3c; cursor:pointer; font-size:0.85rem; font-weight:600;
    display:flex; align-items:center; gap:10px;
  }
  .sidebar-logout:hover { color:#ff6b6b; }

  .main-content { flex:1; padding:30px; overflow-y:auto; height:100vh; }
  .main-content.support-mode { padding:30px 30px 0 30px; }
  .support-mode .dash-header { display:flex; margin-bottom:12px; }
  .support-mode .dash-header h1 { font-size:1.4rem; }
  #sec-support { height:100%; display:none; flex-direction:column; }
  #sec-support.active { display:flex; }
  .support-tab-bar { display:flex; gap:6px; flex-wrap:wrap; padding:16px 24px 12px; background:#f4f1ee; border-bottom:2px solid #e8d5c8; flex-shrink:0; }
  .support-body { flex:1; overflow-y:auto; padding:20px 24px; }
  .dash-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
  .dash-header h1 { font-family:'Playfair Display',serif; font-size:1.8rem; }
  .dash-header p { color:var(--muted); font-size:0.85rem; }
  .user-chip {
    background:#fff; padding:8px 16px; border-radius:30px;
    font-size:0.85rem; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,0.1);
    display:flex; align-items:center; gap:8px;
  }
  .user-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--success); }

  /* Stats */
  .stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; margin-bottom:30px; }
  .stat-card {
    background:#fff; border-radius:14px; padding:22px;
    box-shadow:0 2px 12px rgba(0,0,0,0.07); position:relative; overflow:hidden;
  }
  .stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
  }
  .stat-card.orange::before { background:var(--fire); }
  .stat-card.gold::before { background:var(--gold); }
  .stat-card.green::before { background:var(--success); }
  .stat-card.blue::before { background:var(--info); }
  .stat-icon { font-size:2rem; margin-bottom:10px; }
  .stat-num { font-size:2rem; font-weight:800; color:var(--dark); }
  .stat-label { font-size:0.8rem; color:var(--muted); font-weight:500; margin-top:2px; }

  /* Dash sections */
  .dash-section { display:none; }
  .dash-section.active { display:block; }

  /* Table */
  .table-card {
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,0.07); margin-bottom:24px;
  }
  .table-head {
    padding:18px 24px; display:flex; justify-content:space-between;
    align-items:center; border-bottom:1px solid #f0ebe5;
  }
  .table-head h3 { font-size:1rem; font-weight:700; }
  .table-wrap { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; }
  th {
    background:#faf7f4; padding:12px 16px; text-align:left;
    font-size:0.8rem; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.5px;
  }
  td { padding:14px 16px; font-size:0.88rem; border-bottom:1px solid #f5f0eb; }
  tr:last-child td { border-bottom:none; }
  tr:hover td { background:#faf8f6; }

  /* Status badges */
  .status {
    display:inline-block; padding:4px 12px; border-radius:20px;
    font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  }
  .status.pending { background:#fff3e0; color:#f57c00; }
  .status.confirmed { background:#e8f5e9; color:#2e7d32; }
  .status.preparing { background:#e3f2fd; color:#1565c0; }
  .status.delivered { background:#f3e5f5; color:#7b1fa2; }
  .status.cancelled { background:#fce4ec; color:#c62828; }
  .status.ready { background:#e8f5e9; color:#1b5e20; border:1px solid #a5d6a7; }
  .status.inquiry { background:#fff8e1; color:#f57c00; }
  .status.advancepaid { background:#e3f2fd; color:#1565c0; }
  .status.inprogress { background:#f3e5f5; color:#7b1fa2; }
  .status.completed { background:#e8f5e9; color:#2e7d32; }
  .status.fullysettled { background:#e8f5e9; color:#1b5e20; border:1px solid #a5d6a7; }

  /* Action buttons */
  .action-btns { display:flex; gap:6px; flex-wrap:wrap; }
  .act-btn {
    padding:5px 12px; border:none; border-radius:5px; cursor:pointer;
    font-size:0.75rem; font-weight:600; transition:all 0.15s;
  }
  .act-approve { background:#e8f5e9; color:#2e7d32; }
  .act-approve:hover { background:#2e7d32; color:#fff; }
  .act-delete { background:#fce4ec; color:#c62828; }
  .act-delete:hover { background:#c62828; color:#fff; }
  .act-view { background:#e3f2fd; color:#1565c0; }
  .act-view:hover { background:#1565c0; color:#fff; }
  .act-edit { background:#fff8e1; color:#f57c00; }
  .act-edit:hover { background:#f57c00; color:#fff; }

  /* Staff section */
  .staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
  .staff-card {
    background:#fff; border-radius:14px; padding:22px;
    box-shadow:0 2px 12px rgba(0,0,0,0.07);
  }
  .staff-avatar {
    width:50px; height:50px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-size:1.3rem;
    margin-bottom:12px; font-weight:700; color:#fff;
  }
  .staff-name { font-weight:700; font-size:1rem; margin-bottom:2px; }
  .staff-role { font-size:0.8rem; color:var(--muted); margin-bottom:14px; }
  .perms-list { display:flex; flex-direction:column; gap:4px; }
  .perm-item { display:flex; align-items:center; justify-content:space-between; font-size:0.82rem; }
  .perm-item span { color:var(--dark); }
  /* Accordion */
  .acc-group { border:1px solid #f0ebe5; border-radius:8px; overflow:hidden; margin-bottom:6px; }
  .acc-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; background:#faf7f4; cursor:pointer;
    user-select:none; transition:background 0.15s;
  }
  .acc-header:hover { background:#f0ebe5; }
  .acc-header-left { display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; color:var(--dark); }
  .acc-header-right { display:flex; align-items:center; gap:8px; }
  .acc-count { font-size:0.72rem; background:var(--fire); color:#fff; padding:2px 7px; border-radius:10px; font-weight:700; }
  .acc-count.zero { background:#e0e0e0; color:#999; }
  .acc-arrow { font-size:0.7rem; color:var(--muted); transition:transform 0.2s; }
  .acc-arrow.open { transform:rotate(180deg); }
  .acc-body { display:none; padding:8px 12px; background:#fff; border-top:1px solid #f0ebe5; }
  .acc-body.open { display:block; }
  /* Compact staff card */
  .staff-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 2px 12px rgba(0,0,0,0.07); }
  .staff-card-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .staff-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:#fff; flex-shrink:0; }
  .toggle {
    width:36px; height:20px; border-radius:10px; border:none; cursor:pointer;
    position:relative; transition:background 0.2s; flex-shrink:0;
  }
  .toggle.on { background:var(--success); }
  .toggle.off { background:#ddd; }
  .toggle::after {
    content:''; position:absolute; top:3px; width:14px; height:14px;
    border-radius:50%; background:#fff; transition:left 0.2s;
  }
  .toggle.on::after { left:19px; }
  .toggle.off::after { left:3px; }
  .add-staff-btn {
    background:var(--fire); color:#fff; border:none; padding:10px 20px;
    border-radius:8px; cursor:pointer; font-weight:600; font-size:0.85rem;
  }

  /* Modal */
  .modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:9000; align-items:center; justify-content:center;
  }
  .modal-overlay.open { display:flex; }
  #addTemplateModal { z-index:9600; }
  #addStaffModal { z-index:9500; }
  #invPurchaseModal { z-index:9200; }
  #quickAddItemModal { z-index:10500 !important; }
  #locationManagerModal { z-index:10600 !important; }
  #manageTemplatesModal { z-index:9400; }
  #guestListModal { z-index:9700; }
  #blockClientModal { z-index:9700; }
  .modal {
    background:#fff; border-radius:16px; padding:32px; width:90%; max-width:500px;
    box-shadow:0 20px 60px rgba(0,0,0,0.2); max-height:90vh; overflow-y:auto;
  }
  .modal h3 { font-family:'Playfair Display',serif; font-size:1.5rem; margin-bottom:20px; }
  .modal-btns { display:flex; gap:12px; margin-top:24px; }
  .modal-btns button { flex:1; padding:12px; border-radius:8px; border:none; cursor:pointer; font-weight:700; font-size:0.9rem; }
  .modal-btns .btn-cancel { background:#f5f5f5; color:#666; }
  .modal-btns .btn-save { background:var(--fire); color:#fff; }

  /* Customer detail modal */
  .detail-row { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f0ebe5; font-size:0.9rem; }
  .detail-row:last-child { border-bottom:none; }
  .detail-key { font-weight:600; color:var(--muted); width:130px; flex-shrink:0; }
  .detail-val { color:var(--dark); }

  /* Search / filter bar */
  .filter-bar { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  .filter-bar input, .filter-bar select {
    padding:9px 14px; border:2px solid #e8d5c8; border-radius:8px;
    font-size:0.88rem; font-family:inherit; background:#fff;
  }
  .filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--fire); }
  .filter-bar input { flex:1; min-width:180px; }

  /* Empty state */
  .empty { text-align:center; padding:50px 20px; color:var(--muted); }
  .empty .empty-icon { font-size:3rem; margin-bottom:12px; }

  /* Notification dot */
  .notif { background:var(--fire); color:#fff; border-radius:50%; width:18px; height:18px; font-size:0.65rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; margin-left:auto; }

  @media(max-width:600px) {
    nav { padding:0 16px; }
    .hero { padding:40px 20px; }
    .hero h1 { font-size:2.4rem; }
    .menu-grid { padding:20px; }
    .form-grid { grid-template-columns:1fr; }
    .sidebar { width:200px; }
    .stats-grid { grid-template-columns:1fr 1fr; }

    /* Website navbar mobile */
    nav {
      position: relative !important;
      flex-wrap: wrap !important;
      padding: 10px 16px !important;
    }
    #siteNavToggle { display:block !important; }
    #siteNavLinks {
      display: none !important;
      width: 100% !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
      padding: 12px 0 8px !important;
      border-top: 1px solid rgba(245,166,35,0.3) !important;
      margin-top: 8px !important;
    }
    #siteNavLinks.site-nav-open {
      display: flex !important;
    }
    #navGuestBtns {
      flex-direction: column !important;
      align-items: flex-start !important;
      width: 100% !important;
    }
    #navGuestBtns button,
    #navCustBtns button,
    #navCustBtns a {
      width: 100% !important;
      text-align: left !important;
    }
    #navCustBtns {
      flex-direction: column !important;
      align-items: flex-start !important;
      width: 100% !important;
    }
  }

  /* ===== MOBILE RESPONSIVE — Admin Panel ===== */
  @media (max-width: 768px) {

    /* Sidebar — slide in/out */
    .admin-sidebar {
      position: fixed !important;
      left: -260px !important;
      top: 0 !important;
      height: 100vh !important;
      z-index: 9999 !important;
      transition: left 0.3s ease !important;
      width: 240px !important;
      overflow-y: auto !important;
    }
    .admin-sidebar.mobile-open {
      left: 0 !important;
    }
    .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.5);
      z-index: 9998;
    }
    .sidebar-overlay.active { display: block; }

    /* Main content full width */
    .admin-main {
      margin-left: 0 !important;
      width: 100% !important;
      padding: 12px !important;
    }

    /* Top bar */
    .admin-topbar {
      padding: 10px 12px !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
    }

    /* Mobile menu toggle button */
    .mobile-menu-btn {
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 38px; height: 38px;
      background: var(--fire);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 1.2rem;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* Dashboard stats */
    .stats-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }
    .stat-card { padding: 12px !important; }
    .stat-card .stat-val { font-size: 1.6rem !important; }

    /* Tables — horizontal scroll */
    .table-card { overflow-x: auto !important; }
    table { min-width: 600px; }

    /* Order cards */
    .order-row { flex-direction: column !important; }

    /* Inventory tabs */
    .inv-tabs {
      flex-wrap: wrap !important;
      gap: 6px !important;
    }
    .inv-tab {
      padding: 6px 10px !important;
      font-size: 0.75rem !important;
    }

    /* Forms */
    .form-grid {
      grid-template-columns: 1fr !important;
    }
    .form-group.full { grid-column: 1 !important; }

    /* Modals */
    .modal-content, .inv-modal {
      width: 95vw !important;
      max-width: 95vw !important;
      margin: 10px auto !important;
      padding: 16px !important;
      max-height: 90vh !important;
      overflow-y: auto !important;
    }

    /* Page headers */
    .page-header {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
    }
    .page-title { font-size: 1.4rem !important; }

    /* Buttons row */
    .btn-row, .action-row {
      flex-wrap: wrap !important;
      gap: 6px !important;
    }
    .btn-row button, .action-row button {
      font-size: 0.78rem !important;
      padding: 6px 10px !important;
    }

    /* KDS cards */
    .kds-grid {
      grid-template-columns: 1fr !important;
    }

    /* Overview cards */
    .overview-grid {
      grid-template-columns: 1fr 1fr !important;
    }

    /* Hide less important columns on mobile */
    .hide-mobile { display: none !important; }

    /* Font sizes */
    body { font-size: 14px !important; }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.2rem !important; }

    /* Bottom nav for mobile */
    .mobile-bottom-nav {
      display: flex !important;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #fff;
      border-top: 1px solid #e8d5c8;
      z-index: 1000;
      padding: 6px 0 8px;
      justify-content: space-around;
    }
    .mobile-bottom-nav a {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.65rem;
      color: var(--muted);
      text-decoration: none;
      gap: 2px;
    }
    .mobile-bottom-nav a.active { color: var(--fire); }
    .mobile-bottom-nav a span { font-size: 1.3rem; }

    /* Add padding for bottom nav */
    .admin-main { padding-bottom: 70px !important; }
  }

  /* Extra small screens */
  @media (max-width: 380px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .overview-grid { grid-template-columns: 1fr !important; }
    .inv-tab { padding: 5px 8px !important; font-size: 0.7rem !important; }
  }

  /* Mobile menu button — hidden on desktop */
  .mobile-menu-btn { display: none; }
  .mobile-bottom-nav { display: none; }
  .sidebar-overlay { display: none; }

  /* ===== EXTRA MOBILE IMPROVEMENTS ===== */
  @media (max-width: 768px) {

    /* Better touch targets */
    button, .inv-tab, .btn {
      min-height: 38px !important;
    }

    /* Inventory tabs — scrollable */
    .inv-tabs {
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      -webkit-overflow-scrolling: touch !important;
      padding-bottom: 4px !important;
      scrollbar-width: none !important;
    }
    .inv-tabs::-webkit-scrollbar { display: none; }
    .inv-tab { white-space: nowrap !important; flex-shrink: 0 !important; }

    /* Tables — better mobile scroll */
    .table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    table { min-width: 500px !important; font-size: 0.82rem !important; }
    th, td { padding: 8px 10px !important; }

    /* Cards full width */
    .stat-card, .kpi-card, .overview-card {
      min-width: 0 !important;
    }

    /* Better modal on mobile */
    .modal-overlay, .inv-modal-overlay {
      padding: 8px !important;
      align-items: flex-start !important;
      padding-top: 20px !important;
    }

    /* Filters wrap */
    .filter-row, .table-head {
      flex-wrap: wrap !important;
      gap: 8px !important;
    }

    /* Input fields full width on mobile */
    .filter-row input, .filter-row select {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Bottom nav styling */
    .mobile-bottom-nav {
      display: flex !important;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #fff;
      border-top: 2px solid #e8d5c8;
      z-index: 1000;
      padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
      justify-content: space-around;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    .mobile-bottom-nav a {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.62rem;
      color: var(--muted);
      text-decoration: none;
      gap: 2px;
      padding: 4px 8px;
      border-radius: 8px;
      min-width: 50px;
    }
    .mobile-bottom-nav a.mob-nav-active {
      color: var(--fire);
      background: #fff5f3;
    }
    .mobile-bottom-nav a span { font-size: 1.4rem; line-height: 1; }
    .mobile-bottom-nav a label { cursor: pointer; font-weight: 600; }

    /* Space for bottom nav */
    .admin-main { padding-bottom: 80px !important; }

    /* Topbar on mobile */
    .admin-topbar h2, .admin-topbar .page-title {
      font-size: 1.1rem !important;
    }

    /* Hide sidebar on mobile by default */
    .admin-sidebar {
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease !important;
    }
    .admin-sidebar.mobile-open {
      transform: translateX(0) !important;
    }
  }

  /* iPhone SE and very small screens */
  @media (max-width: 375px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .stat-card .stat-val { font-size: 1.4rem !important; }
    .mobile-bottom-nav a { min-width: 40px !important; font-size: 0.58rem !important; }
    .mobile-bottom-nav a span { font-size: 1.2rem !important; }
    table { font-size: 0.75rem !important; }
    th, td { padding: 6px 8px !important; }
  }

  /* ===== PHASE 5 — COMPLAINTS, INQUIRY & INBOX ===== */
  .p5-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
  .p5-tab {
    padding:8px 16px; border-radius:20px; border:2px solid #e8d5c8;
    background:#fff; color:var(--muted); cursor:pointer; font-weight:600;
    font-size:0.82rem; font-family:inherit; transition:all 0.2s;
  }
  .p5-tab.active { background:var(--fire); color:#fff; border-color:var(--fire); }
  .p5-sub { display:none; }
  .p5-sub.active { display:block; animation:fadeIn 0.3s ease; }

  /* Ticket Cards */
  .ticket-card {
    background:#fff; border-radius:14px; padding:16px 18px;
    border:2px solid #f0e6dc; margin-bottom:12px;
    transition:box-shadow 0.2s; cursor:pointer;
  }
  .ticket-card:hover { box-shadow:0 4px 16px rgba(232,64,12,0.1); border-color:#ffd0b8; }
  .ticket-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
  .ticket-id { font-size:0.75rem; font-weight:800; color:var(--fire); font-family:monospace; }
  .ticket-title { font-weight:700; font-size:0.95rem; margin:4px 0; }
  .ticket-meta { font-size:0.78rem; color:var(--muted); }

  /* Priority badges */
  .pri-critical { background:#fde8e8; color:#c0392b; padding:2px 9px; border-radius:10px; font-size:0.72rem; font-weight:800; }
  .pri-high     { background:#fef3cd; color:#d97706; padding:2px 9px; border-radius:10px; font-size:0.72rem; font-weight:800; }
  .pri-medium   { background:#e8f4fd; color:#1a6fa8; padding:2px 9px; border-radius:10px; font-size:0.72rem; font-weight:800; }
  .pri-low      { background:#e8f8f0; color:#1a7a4a; padding:2px 9px; border-radius:10px; font-size:0.72rem; font-weight:800; }

  /* Status badges */
  .tkt-open        { background:#fde8e8; color:#c0392b; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:700; }
  .tkt-inprogress  { background:#fff3cd; color:#856404; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:700; }
  .tkt-resolved    { background:#d4edda; color:#155724; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:700; }
  .tkt-closed      { background:#e8e8e8; color:#555; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:700; }

  /* Channel chips */
  .ch-whatsapp { background:#dcfce7; color:#15803d; padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:700; }
  .ch-facebook { background:#dbeafe; color:#1d4ed8; padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:700; }
  .ch-twitter  { background:#e0f2fe; color:#0369a1; padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:700; }
  .ch-email    { background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:700; }
  .ch-phone    { background:#f3e8ff; color:#6b21a8; padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:700; }
  .ch-web      { background:#ffe4e6; color:#9f1239; padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:700; }

  /* Message thread */
  .msg-thread { max-height:280px; overflow-y:auto; padding:10px; background:#f9f5f0; border-radius:10px; margin:12px 0; display:flex; flex-direction:column; gap:8px; }
  .msg-bubble { max-width:82%; padding:9px 13px; border-radius:14px; font-size:0.85rem; line-height:1.5; }
  .msg-staff  { background:var(--fire); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
  .msg-cust   { background:#fff; color:var(--dark); align-self:flex-start; border:1px solid #e8d5c8; border-bottom-left-radius:4px; }
  .msg-meta   { font-size:0.68rem; opacity:0.7; margin-top:3px; }

  /* Inbox channel cards */
  .inbox-channel-card {
    background:#fff; border-radius:14px; padding:20px; border:2px solid #f0e6dc;
    display:flex; align-items:center; gap:16px; cursor:pointer;
    transition:all 0.2s; text-decoration:none;
  }
  .inbox-channel-card:hover { border-color:var(--fire); box-shadow:0 4px 16px rgba(232,64,12,0.1); transform:translateY(-2px); }
  .inbox-channel-icon { font-size:2rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:14px; flex-shrink:0; }

  /* P5 Customer Form */
  .p5-cust-section { display:none; padding:20px; }
  .p5-cust-section.active { display:block; }
  .p5-form-card { background:#fff; border-radius:16px; padding:24px; border:2px solid #f0e6dc; max-width:600px; margin:0 auto; }

  /* Reports grid */
  .p5-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
  .p5-stat { background:#fff; border-radius:12px; padding:16px; border:2px solid #f0e6dc; text-align:center; }
  .p5-stat-num { font-size:1.8rem; font-weight:800; color:var(--fire); }
  .p5-stat-lbl { font-size:0.78rem; color:var(--muted); margin-top:2px; }
  .p5-chart-bar { height:10px; background:#f0e6dc; border-radius:5px; overflow:hidden; margin:4px 0; }
  .p5-chart-fill { height:100%; background:var(--fire); border-radius:5px; transition:width 0.6s ease; }

  /* ===== WEB CHAT WIDGET ===== */
  .webchat-btn {
    position:fixed; bottom:24px; right:24px; z-index:8000;
    width:58px; height:58px; border-radius:50%;
    background:var(--fire); color:#fff; border:none; cursor:pointer;
    font-size:1.5rem; box-shadow:0 4px 20px rgba(232,64,12,0.45);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s; animation:chatPulse 2.5s infinite;
  }
  .webchat-btn:hover { transform:scale(1.1); }
  @keyframes chatPulse {
    0%,100% { box-shadow:0 4px 20px rgba(232,64,12,0.45); }
    50% { box-shadow:0 4px 30px rgba(232,64,12,0.75); }
  }
  .webchat-badge {
    position:absolute; top:-4px; right:-4px;
    background:var(--gold); color:var(--dark);
    font-size:0.65rem; font-weight:800;
    width:18px; height:18px; border-radius:50%;
    display:none; align-items:center; justify-content:center;
  }
  .webchat-badge.show { display:flex; }
  .webchat-window {
    position:fixed; bottom:94px; right:24px; z-index:8000;
    width:340px; max-height:500px;
    background:#fff; border-radius:18px;
    box-shadow:0 8px 40px rgba(0,0,0,0.18);
    display:none; flex-direction:column; overflow:hidden;
    animation:slideUpChat 0.25s ease;
  }
  .webchat-window.open { display:flex; }
  @keyframes slideUpChat {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .webchat-header {
    background:var(--fire); color:#fff; padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .webchat-header-info { display:flex; align-items:center; gap:10px; }
  .webchat-avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
  .webchat-title { font-weight:700; font-size:0.92rem; }
  .webchat-sub { font-size:0.72rem; opacity:0.85; }
  .webchat-close { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; opacity:0.8; padding:0 4px; }
  .webchat-close:hover { opacity:1; }
  .webchat-messages {
    flex:1; overflow-y:auto; padding:14px;
    display:flex; flex-direction:column; gap:8px;
    background:#f9f5f0; min-height:200px; max-height:300px;
  }
  .wchat-bubble { max-width:80%; padding:9px 13px; border-radius:14px; font-size:0.85rem; line-height:1.5; }
  .wchat-staff { background:var(--fire); color:#fff; align-self:flex-start; border-bottom-left-radius:4px; }
  .wchat-cust  { background:#fff; color:var(--dark); align-self:flex-end; border:1px solid #e8d5c8; border-bottom-right-radius:4px; }
  .wchat-time  { font-size:0.66rem; opacity:0.65; margin-top:2px; }
  .webchat-input-row {
    display:flex; gap:8px; padding:12px;
    border-top:1px solid #f0e6dc; flex-shrink:0; background:#fff;
  }
  .webchat-input {
    flex:1; padding:9px 12px; border:2px solid #e8d5c8;
    border-radius:20px; font-size:0.85rem; font-family:inherit; outline:none;
  }
  .webchat-input:focus { border-color:var(--fire); }
  .webchat-send {
    background:var(--fire); color:#fff; border:none;
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    font-size:1rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  .webchat-send:hover { background:#c73509; }
  .webchat-session-card {
    background:#fff; border-radius:12px; padding:14px 16px;
    border:2px solid #f0e6dc; margin-bottom:10px; cursor:pointer; transition:all 0.2s;
  }
  .webchat-session-card:hover { border-color:var(--fire); }
  .webchat-session-card.unread { border-color:var(--gold); background:#fffdf5; }