@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  
  * { font-family: 'Inter', sans-serif; }

  /* ------------------------------------------------------------------
     Brand theme — black + gold, sampled from the microphone logo
     (assets/logo-mic.png). Used for the login screen, the sidebar, and
     primary brand accents. Everything else (status colors like
     paid/error/warning badges, category tags, charts) intentionally
     keeps its original semantic colors rather than being reskinned —
     only the app's "chrome" carries the new theme.
     ------------------------------------------------------------------ */
  :root {
    --brand-black: #0a0a0a;
    --brand-black-soft: #161616;
    --brand-gold: #d9b877;       /* primary gold — buttons, active states, headings */
    --brand-gold-light: #e7cd9a; /* softer gold — glows, borders, subtle highlights */
    --brand-gold-dark: #b9924f;  /* hover/pressed state for gold buttons */
  }

  .brand-gradient {
    background: radial-gradient(ellipse at top, #1a1a1a 0%, #000000 70%);
  }

  .brand-glow {
    box-shadow: 0 0 50px 8px rgba(217, 184, 119, 0.25);
  }

  .brand-gold-text { color: var(--brand-gold); }
  .brand-gold-bg { background-color: var(--brand-gold); }
  .brand-gold-border { border-color: var(--brand-gold); }

  .brand-btn-gold {
    background: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold));
    color: #1a1408;
    transition: filter 0.15s ease;
  }
  .brand-btn-gold:hover { filter: brightness(1.08); }
  .brand-btn-gold:active { filter: brightness(0.95); }

  .brand-input:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 3px rgba(217, 184, 119, 0.2);
  }

  /* The desktop sidebar (js/render-nav.js) is `position: fixed`, so it's
     taken out of normal document flow — without this, page content starts
     at the very left edge of the screen and the sidebar just sits on top
     of it (covering it, not "hiding" itself). #app.has-sidebar is toggled
     in js/app.js's render() whenever a sidebar is actually being shown
     (i.e. not on the login screen or the kitchen-only view, which render
     no sidebar at all), and #app.sidebar-collapsed mirrors the icon-only
     w-20 state from render-nav.js so the content shift matches exactly. */
  @media (min-width: 1024px) {
    #app.has-sidebar {
      padding-left: 16rem; /* matches the sidebar's lg:w-64 */
      transition: padding-left 0.2s ease-in-out;
    }
    #app.has-sidebar.sidebar-collapsed {
      padding-left: 5rem; /* matches the sidebar's collapsed w-20 */
    }
  }

  .brand-sidebar-link.active {
    background: rgba(217, 184, 119, 0.14);
    color: var(--brand-gold-light);
  }
  .brand-sidebar-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
  }
  
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .num-pad-btn:active { transform: scale(0.95); }
  
  @keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  .slide-in { animation: slideIn 0.3s ease-out; }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .fade-in { animation: fadeIn 0.3s ease-out; }
  
  .btn-press:active { transform: scale(0.97); }
  
  @keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(251, 146, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
  }
  
  .pulse-ring { animation: pulse-ring 2s infinite; }
  
  @media print {
    body * { visibility: hidden; }
    .print-area, .print-area * { visibility: visible; }
    .print-area { position: absolute; left: 0; top: 0; width: 100%; }
    .no-print { display: none !important; }
  }