/* Header */
  .header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; border-bottom:1px solid var(--border);
    background:var(--surface); position:sticky; top:0; z-index:2000;
    overflow:visible; }
  .header-left { display:flex; align-items:center; gap:12px; }
  .logo { width:32px; height:32px; background:var(--accent); border-radius:8px;
    display:flex; align-items:center; justify-content:center; font-size:16px; }
  .header h1 { font-size:16px; font-weight:600; letter-spacing:-0.02em; }
  .header-sub { font-size:12px; color:var(--muted); }
  .status-dot { width:8px; height:8px; border-radius:50%; background:var(--green);
    box-shadow:0 0 6px var(--green); animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .status-text { font-size:12px; color:var(--green); font-family:var(--font); }
  .refresh-info { font-size:11px; color:var(--label); }
  .header-right { display:flex; align-items:center; gap:16px; }

  /* EN/ES language toggle — compact two-option pill in the header. Buttons,
     not a <select>, so a switch is one click with no popup. */
  .lang-toggle { display:inline-flex; border:1px solid var(--border);
    border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.04);
    flex-shrink:0; }
  .lang-opt { border:0; background:transparent; color:var(--muted);
    cursor:pointer; font:600 11px/1 var(--font); padding:5px 11px;
    letter-spacing:0.05em; transition:background 0.12s,color 0.12s; }
  .lang-opt:hover { color:var(--text); }
  .lang-opt.active { background:var(--accent); color:var(--text-inverted); }
  .lang-opt:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

  /* Theme toggle — three-state pill (Dark / Cream / Light), mirrors
     `.lang-toggle` visual treatment. Sits between the language toggle and
     the user menu in the header. */
  .theme-toggle { display:inline-flex; border:1px solid var(--border);
    border-radius:999px; overflow:hidden; background:var(--border-subtle);
    flex-shrink:0; }
  .theme-opt { border:0; background:transparent; color:var(--muted);
    cursor:pointer; font:600 11px/1 var(--font); padding:5px 11px;
    letter-spacing:0.05em; transition:background 0.12s,color 0.12s; }
  .theme-opt:hover { color:var(--text); }
  .theme-opt.active { background:var(--accent); color:var(--text-inverted); }
  .theme-opt:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }