:root{
    --bg:#f6f7f5;
    --surface:#ffffff;
    --surface-2:#eef1ed;
    --surface-3:#e4ebe6;
    --border:#b6c2ba;
    --border-strong:#71847a;
    --text:#18211d;
    --text-muted:#3f5047;
    --accent:#116466;
    --accent-dark:#0b4547;
    --accent-bg:#dceced;
    --green:#1f7a4d;
    --green-bg:#e2f2e9;
    --red:#b33a32;
    --red-bg:#f8e6e4;
    --red-dark:#842820;
    --amber:#a06012;
    --amber-bg:#fff1d9;
    --amber-dark:#713d06;
    --orange:#d97706;
    --info:#214f73;
    --info-bg:#e3eff9;
    --info-border:#2f6690;
    --track-bg:#d4ddd7;
    --focus:#116466;
    --icon-scan:#3b6fd6;
    --icon-export:#8457d9;
    --icon-boxes:#b8631a;
    --icon-pick:#1c9c8e;
    --icon-books:#d1477a;
    --icon-trends:#5b5bd6;
    --icon-accounts:#8f7220;
    --icon-users:#a24fb0;
    --shadow-sm:0 1px 2px rgba(24,33,29,.08);
    --shadow-md:0 8px 24px rgba(24,33,29,.10);
    --radius-sm:6px;
    --radius:8px;
    --radius-md:10px;
    --radius-lg:12px;
    --space-1:6px;
    --space-2:12px;
    --space-3:16px;
    --space-4:18px;
    --space-5:24px;
    --control-height:48px;
    --control-height-lg:56px;
    --text-2xs:12px;
    --text-13:13px;
    --text-xs:14px;
    --text-15:15px;
    --text-sm:16px;
    --text-17:17px;
    --text-18:18px;
    --text-md:20px;
    --text-lg:22px;
    --text-24:24px;
    --text-xl:26px;
    --text-28:28px;
    --font-body:'Atkinson Hyperlegible', Arial, sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }

  *{ box-sizing:border-box; }
  html{ font-size:20px; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.55;
  }

  h1,h2,h3{ font-family:var(--font-body); }

  /* ---------- Icons ----------
     Referenziert die Symbole aus dem <svg>-Sprite am Anfang von <body>
     (templates/index.html). Erbt die Textfarbe (currentColor) statt fester
     Emoji-Glyphen, damit aktive/inaktive Zustände (z.B. Tabs) automatisch
     mitfärben. */
  .icon{
    width:1em;
    height:1em;
    display:inline-block;
    flex-shrink:0;
    vertical-align:-0.15em;
    fill:currentColor;
  }

  /* Bereichsfarbe fürs jeweilige Icon-Symbol, unabhängig davon, an
     welcher Stelle im Markup es benutzt wird (Kisten-Pill, Lager-
     Überschrift, Cover-Platzhalter, Kennzahlen-Kopf, …). Zielt über
     :has() auf das <use> im Symbol selbst - eine neue Verwendungsstelle
     desselben Icons färbt automatisch mit, statt dass jede Komponente
     einzeln nachgezogen werden muss (das war der Grund für "überall
     verteilte alte Icons"). :not(.tab-icon) ausgenommen: Tabs haben ihre
     eigene, aktiv/inaktiv-bewusste Regel weiter unten - ein direkt
     passender Selektor hier würde sonst den geerbten weißen Farbwert des
     aktiven Mobil-Tabs überschreiben (Vererbung hat keine Spezifität und
     verliert immer gegen einen Treffer, egal wie niedrig dessen eigene
     Spezifität ist). */
  .icon:not(.tab-icon):has(use[href="#icon-box"]),
  .icon:not(.tab-icon):has(use[href="#icon-box-outline"]),
  .icon:not(.tab-icon):has(use[href="#icon-building"]){
    color:var(--icon-boxes); --icon-tint:var(--icon-boxes);
  }
  .icon:not(.tab-icon):has(use[href="#icon-receipt"]),
  .icon:not(.tab-icon):has(use[href="#icon-cart"]){
    color:var(--icon-export); --icon-tint:var(--icon-export);
  }
  .icon:not(.tab-icon):has(use[href="#icon-checklist"]){
    color:var(--icon-pick); --icon-tint:var(--icon-pick);
  }
  .icon:not(.tab-icon):has(use[href="#icon-book"]){
    color:var(--icon-books); --icon-tint:var(--icon-books);
  }
  .icon:not(.tab-icon):has(use[href="#icon-chart"]){
    color:var(--icon-trends); --icon-tint:var(--icon-trends);
  }
  .icon:not(.tab-icon):has(use[href="#icon-key"]){
    color:var(--icon-accounts); --icon-tint:var(--icon-accounts);
  }
  .icon:not(.tab-icon):has(use[href="#icon-person"]){
    color:var(--icon-users); --icon-tint:var(--icon-users);
  }

  button, input{ font-family:inherit; font-size:inherit; }

  a{ color:var(--accent-dark); }

  :focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px;
  }

  /* ---------- Topbar ---------- */
  .topbar{
    background:var(--surface);
    border-bottom:2px solid var(--border);
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .brand .mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px; height:52px;
    flex-shrink:0;
  }
  .brand h1{
    font-size:var(--text-28);
    font-weight:700;
    margin:0;
  }
  .brand .sub{
    color:var(--text-muted);
    font-size:var(--text-18);
    margin-top:2px;
  }

  .header-stats,
  .provider-stats{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
  }
  .header-stats{
    flex:1;
    justify-content:flex-end;
    min-width:0;
    margin-left:auto;
  }
  /* Der Einklapp-Button ist eine reine Mobil-Ergonomie (siehe mobile.css) -
     auf Desktop ist genug Platz, die Kennzahlen bleiben dort immer offen. */
  .header-stats-toggle{
    display:none;
  }
  .provider-stats-group{
    display:flex;
    align-items:center;
    gap:10px;
    width:min(100%, 940px);
    padding:7px 8px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
  }
  .stats-group-label{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    color:var(--text-muted);
    font-size:var(--text-15);
    line-height:1.2;
    font-weight:700;
    white-space:nowrap;
  }
  .stats-group-icon{
    font-size:var(--text-18);
    line-height:1;
  }
  .provider-stats{
    display:grid;
    grid-template-columns:repeat(6, minmax(112px, 1fr));
    gap:7px;
    width:100%;
  }
  .provider-stat{
    min-width:0;
    padding:6px 8px;
    text-align:center;
    transition:opacity .2s ease, background-color .2s ease, transform .2s ease;
  }
  .provider-stat b{
    display:block;
    color:var(--accent-dark);
    font-family:var(--font-mono);
    font-size:var(--text-lg);
    font-weight:700;
    line-height:1.2;
  }
  .provider-stat b.is-below-limit{ color:var(--red); }
  .provider-stat b.is-above-limit{ color:var(--green); }
  .provider-stat span{
    color:var(--text-muted);
    font-size:var(--text-sm);
    line-height:1.25;
    font-weight:600;
  }
  .provider-stat-total{
    min-width:0;
    margin:0;
    padding:6px 14px 6px 8px;
    border-right:2px solid var(--border);
  }
  .provider-stat-total b{
    font-size:var(--text-lg);
    font-weight:700;
  }
  .provider-stat-total span{
    font-weight:700;
  }
  .provider-stat span::before,
  .export-col h3::before{
    content:"";
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:6px;
    border-radius:50%;
    background:var(--provider-color, var(--accent));
    box-shadow:0 0 0 2px var(--surface);
    vertical-align:1px;
  }
  .provider-stat.is-empty{ opacity:.42; }
  .provider-stat.is-empty b{ font-size:var(--text-18); }
  .provider-stat.stat-updated{
    animation:provider-stat-updated .6s ease-out;
  }
  @keyframes provider-stat-updated{
    0%{ background:var(--green-bg); transform:scale(1.08); }
    100%{ background:transparent; transform:scale(1); }
  }
  @media (min-width:761px) and (max-width:1450px){
    .header-stats{ flex:1 1 720px; justify-content:flex-end; }
    .provider-stats{ grid-template-columns:repeat(3, minmax(140px, 1fr)); }
  }

  .settings-btn{
    background:var(--surface-2);
    border:2px solid var(--border);
    border-radius:var(--radius-md);
    font-size:var(--text-24);
    width:auto; min-height:52px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    flex-shrink:0;
  }
  .settings-btn:hover{ border-color:var(--border-strong); background:#efece0; }

  /* ---------- Modal ---------- */
  .modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(20,18,12,0.72);
    /* Muss über der fixierten mobilen Tab-Leiste liegen (mobile.css:
       .tabs{ z-index:60 }), sonst bleibt die Navigation hinter einem
       offenen Dialog - inkl. Login - bedienbar. */
    z-index:70;
    align-items:flex-start;
    justify-content:center;
    padding:60px 20px;
    overflow-y:auto;
  }
  .modal-backdrop.active{ display:flex; }
  .modal-box{
    max-width:520px;
    width:100%;
  }
  .modal-box h2{ font-size:var(--text-lg); margin:0 0 18px; }
  /* Unter-Navigation innerhalb des Einstellungen-Dialogs - bewusst als
     Unterstrich-Tabs statt der gefüllten Pillenform von .tab/.preset-btn,
     damit sie nicht wie eine zweite Haupt-Navigation wirkt (siehe
     DESIGN.md, Audit vom 10.08.2026). */
  .settings-tabs{
    display:flex;
    gap:var(--space-4);
    border-bottom:2px solid var(--border);
    margin-bottom:24px;
  }
  .settings-tab{
    background:none;
    border:none;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
    padding:0 2px 10px;
    color:var(--text-muted);
    font-weight:700;
    font-size:var(--text-sm);
    cursor:pointer;
  }
  .settings-tab:hover{ color:var(--text); }
  .settings-tab.active{
    color:var(--accent-dark);
    border-bottom-color:var(--accent);
  }
  #settings-backdrop{
    align-items:center;
    padding:20px;
    overflow:hidden;
    overscroll-behavior:contain;
  }
  #settings-backdrop .modal-box{
    width:min(900px, calc(100vw - 40px));
    max-width:900px;
    max-height:calc(100vh - 40px);
    max-height:calc(100dvh - 40px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scrollbar-color:var(--border-strong) var(--surface-2);
    scrollbar-width:auto;
    padding:32px;
  }
  #settings-backdrop .modal-box::-webkit-scrollbar{
    width:12px;
  }
  #settings-backdrop .modal-box::-webkit-scrollbar-track{
    background:var(--surface-2);
    border-radius:999px;
  }
  #settings-backdrop .modal-box::-webkit-scrollbar-thumb{
    border:3px solid var(--surface-2);
    border-radius:999px;
    background:var(--border-strong);
  }
.settings-hint{
    font-size:var(--text-15);
    color:var(--text-muted);
    margin-top:12px;
  }
  .settings-section-label{
    display:block;
    margin-top:22px;
  }
  .settings-inline-row{
    display:flex;
    gap:14px;
    align-items:stretch;
    flex-wrap:wrap;
  }
  .settings-inline-row input{
    flex:1;
    min-width:0;
    font-size:var(--text-md);
    background:var(--surface);
    padding:12px 14px;
  }
  /* Der Schalter (feste Breite, siehe .settings-toggle) steht rechts und
     ist in beiden Zeilen gleich breit - dadurch ist die Fläche davor in
     beiden Zeilen automatisch gleich breit. Das Eingabefeld (Scanpreis
     bzw. Lager) füllt diese Fläche vollständig aus, der Testton-Button
     bleibt dabei auf seiner Inhaltsbreite (kein Leerraum, aber auch kein
     unnötig breiter Button). */
  .currency-input{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    border:2px solid var(--border-strong);
    border-radius:var(--radius);
    background:var(--surface);
    overflow:hidden;
  }
  .currency-input > span{
    padding:0 14px;
    color:var(--accent-dark);
    font-family:var(--font-mono);
    font-size:var(--text-24);
    font-weight:700;
  }
  .currency-input input{
    width:100%;
    border:0;
    border-left:1px solid var(--border);
    border-radius:0;
  }
  .settings-inline-row button{
    flex:0 0 auto;
    width:auto;
    padding:0 18px;
  }
  /* Echter Schalter (Track + beweglicher Knopf), keine Pillen-Optik -
     sonst nicht von Navigation/Filtern zu unterscheiden (siehe DESIGN.md,
     Audit vom 10.08.2026). Breite großzügig über dem tatsächlich nötigen
     Platz gewählt: die Box selbst ist unsichtbar (kein Rahmen/Hintergrund,
     Inhalt linksbündig), zusätzlicher Leerraum am Boxende fällt also nicht
     auf - verhindert zuverlässig, dass der Text umbricht oder die Box
     durch erzwungenes Nowrap breiter wird als die feste Breite. */
  .settings-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 300px;
    min-height:var(--control-height);
    padding:4px 0;
    border:none;
    background:none;
    color:var(--text);
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
  }
  .settings-toggle-track{
    position:relative;
    flex:none;
    width:44px;
    height:26px;
    border:2px solid var(--border-strong);
    border-radius:999px;
    background:var(--surface-2);
    transition:background .15s ease, border-color .15s ease;
  }
  .settings-toggle-knob{
    position:absolute;
    top:1px;
    left:1px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:transform .15s ease;
  }
  .settings-toggle.active .settings-toggle-track{
    border-color:var(--green);
    background:var(--green);
  }
  .settings-toggle.active .settings-toggle-knob{
    transform:translateX(18px);
  }
  .settings-toggle.active .settings-toggle-label{
    color:var(--green);
  }
  .settings-network-address{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:22px;
    padding:18px;
    border:3px solid var(--accent);
    border-radius:var(--radius);
    background:var(--accent-bg);
    font-size:var(--text-md);
    font-weight:700;
  }
  .settings-network-address strong{
    color:var(--accent-dark);
    font-family:var(--font-mono);
    font-size:var(--text-24);
    overflow-wrap:anywhere;
  }
  .settings-group,
  .settings-update,
  .settings-account{
    margin-top:22px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface-2);
  }
  .settings-group:first-child{ margin-top:0; }
  .settings-group .settings-section-label,
  .settings-update .settings-section-label,
  .settings-account .settings-section-label{ margin-top:0; }
  .settings-update .settings-hint{ margin:10px 0 14px; }
  .settings-update .settings-hint strong{
    font-family:var(--font-mono);
    overflow-wrap:anywhere;
  }
  .settings-update .scan-status{ margin-top:12px; }
  .settings-expert-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:12px;
  }
  .source-toggle-settings{
    min-width:0;
    margin:22px 0 0;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
  }
  .source-toggle-settings legend{ font-weight:700; padding:0 6px; }
  .source-toggle-settings .settings-hint{ margin:0 0 14px; }
  .source-toggle-group + .source-toggle-group{ margin-top:14px; }
  .source-toggle-group strong{ display:block; margin-bottom:8px; }
  .source-toggle-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 14px;
  }
  .source-toggle-grid label{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:52px;
    padding:8px 10px;
    border-radius:var(--radius);
    background:var(--surface-2);
    font-size:var(--text-md);
    cursor:pointer;
  }
  .source-toggle-grid input[type="checkbox"]{
    flex:none;
    width:30px;
    height:30px;
    min-height:30px;
    margin:0;
    padding:0;
    accent-color:var(--accent);
  }
  @media (max-width:420px){
    .source-toggle-grid{ grid-template-columns:1fr; }
  }
  .settings-accounts .settings-hint{ margin:10px 0 14px; }
  #accounts-provider-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    align-items:start;
    gap:14px;
  }
  .accounts-provider-title{ margin:0 0 4px; font-size:var(--text-18); }
  .accounts-rows{
    list-style:none;
    margin:10px 0 0;
    padding:0;
  }
  .accounts-row{ border-bottom:1px solid var(--border); }
  .accounts-row:last-child{ border-bottom:0; }
  .accounts-empty-hint{
    padding:10px 4px;
    color:var(--text-muted);
    font-size:var(--text-15);
    border-bottom:1px solid var(--border);
  }
  .accounts-row-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 4px;
    cursor:pointer;
    border-radius:var(--radius-sm);
  }
  .accounts-row-header:focus-visible{
    outline:3px solid var(--accent-bg);
    outline-offset:4px;
  }
  .accounts-row-header:hover .accounts-row-toggle{ color:var(--accent-dark); }
  .accounts-row-main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .accounts-row-name{ font-weight:700; }
  .accounts-row-username{
    color:var(--text-muted);
    font-size:var(--text-xs);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .accounts-row-toggle{ flex:none; color:var(--text-muted); font-size:var(--text-md); line-height:1; }
  .accounts-row-add .accounts-row-name{ color:var(--accent-dark); }
  .accounts-row-body{ padding:4px 4px 14px; }
  .accounts-row-body[hidden]{ display:none; }
  .accounts-form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .accounts-field{ display:block; }
  .accounts-field-label{
    display:block;
    font-size:var(--text-xs);
    color:var(--text-muted);
    margin-bottom:4px;
  }
  .accounts-field input{ width:100%; min-width:0; }
  .accounts-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  @media (max-width:600px){
    #settings-backdrop{
      padding:10px;
    }
    #settings-backdrop .modal-box{
      width:calc(100vw - 20px);
      max-height:calc(100vh - 20px);
      max-height:calc(100dvh - 20px);
      padding:22px 18px;
    }
  }
  body.settings-dialog-open{
    overflow:hidden;
  }
  .timing-panel{ margin-bottom:18px; }
  .timing-panel h3{ margin-top:0; }
  .timing-stats{ display:grid; gap:8px; }
  .timing-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
    border-bottom:1px solid var(--border);
  }
  .timing-row:last-child{ border-bottom:0; }
  .timing-row span{ color:var(--text-muted); }
  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:22px;
    flex-wrap:wrap;
  }
  #settings-save-btn{
    min-width:190px;
    min-height:60px;
    padding:14px 28px;
    font-size:var(--text-lg);
    box-shadow:0 4px 0 var(--accent-dark);
  }
  /* Einzige Quelle für .btn-primary/.btn-secondary (vorher zusätzlich in
     design.css und sizing.css redefiniert - siehe DESIGN.md). */
  .btn-primary, .btn-secondary{
    min-height:var(--control-height);
    padding:10px 16px;
    font-size:var(--text-md);
    font-weight:700;
    line-height:1.2;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease;
  }
  .btn-primary{ background:var(--accent); color:var(--surface); border:2px solid var(--accent-dark); box-shadow:0 3px 0 var(--accent-dark); }
  .btn-primary:hover{ background:var(--accent-dark); }
  /* Duotone-Icons haben eine zweite, mit --icon-tint eingefärbte Form
     (siehe templates/index.html Icon-Sprite). Auf dunklem/Accent-Grund
     verschwindet die Standardfärbung (--accent auf --accent), deshalb hier
     auf einen hellen Ton umschalten statt fix auf --accent zu bleiben. */
  .btn-primary .icon{ --icon-tint:var(--surface); --icon-tint-opacity:0.5; }
  .btn-secondary{ background:var(--surface); color:var(--text-muted); border:2px solid var(--border-strong); }
  .btn-secondary:hover{ background:var(--surface-2); }
  button:hover{ box-shadow:var(--shadow-sm); }
  button:active{ transform:translateY(1px); }

  /* ---------- Tabs ---------- */
  .tabs{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 220px 0 28px;
    background:var(--surface);
    border-bottom:2px solid var(--border);
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  .tab[hidden], .view[hidden]{ display:none; }
  .tab{
    flex-shrink:0;
    font-size:var(--text-18);
    font-weight:700;
    color:var(--text-muted);
    background:var(--surface-2);
    border:2px solid var(--border);
    border-bottom:none;
    padding:14px 26px;
    cursor:pointer;
    border-radius:var(--radius-md) 10px 0 0;
    display:flex;
    align-items:center;
    gap:10px;
    align-self:flex-end;
  }
  .tab.active{
    color:var(--accent-dark);
    background:var(--bg);
    border-color:var(--border-strong);
    position:relative;
    top:2px;
  }
  .tab:hover:not(.active){ background:#e9e6da; }
  /* Kein Tab-Button, sondern Konto-Info (Name + Abmelden) rechts in
     derselben Leiste. Absolut positioniert und damit bewusst kein
     Flex-Kind von .tabs mehr: so steht der Button unabhängig von der
     (unten bündigen) Tab-Ausrichtung exakt mittig zur ganzen Leistenhöhe,
     und .tabs bleibt bei vielen Tabs (z. B. eingeblendeter Admin-Tab
     "Benutzer") ein einfacher nowrap+scroll-Flex ohne Rücksicht auf
     diesen Block nehmen zu müssen (siehe padding-right oben, reserviert
     den Platz dafür). */
  .tabs-account{
    position:absolute;
    top:50%;
    right:28px;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:12px;
    padding-left:20px;
    border-left:2px solid var(--border);
  }
  .tabs-account-name{
    font-size:var(--text-15);
    font-weight:700;
    color:var(--text-muted);
    white-space:nowrap;
  }

  /* Bereichsfarbe je Tab-Icon, aktiv wie inaktiv - auf Desktop reicht der
     Kontrast der Bereichsfarben gegen den fast-weißen --bg/--surface-2
     auch im aktiven Zustand (geprüft: alle Tokens ≥3:1, das WCAG-Minimum
     für grafische Objekte). "Aktiv" bleibt trotzdem eindeutig erkennbar
     über Rahmen/Hintergrund/Label-Farbe (siehe .tab.active oben) - die
     Icon-Farbe ist zusätzliche Bereichs-Kennung, kein Auswahl-Indikator.
     Auf Mobil überschreibt mobile.css das bewusst wieder auf Weiß, weil
     dieselben Farben gegen die dortige --accent-Kachel keinen
     ausreichenden Kontrast mehr hätten (mehrere Tokens <2:1 gegen
     --accent geprüft). */
  .tab[data-view="scan"] .tab-icon{ color:var(--icon-scan); --icon-tint:var(--icon-scan); }
  .tab[data-view="export"] .tab-icon{ color:var(--icon-export); --icon-tint:var(--icon-export); }
  .tab[data-view="boxes"] .tab-icon{ color:var(--icon-boxes); --icon-tint:var(--icon-boxes); }
  .tab[data-view="pick"] .tab-icon{ color:var(--icon-pick); --icon-tint:var(--icon-pick); }
  .tab[data-view="books"] .tab-icon{ color:var(--icon-books); --icon-tint:var(--icon-books); }
  .tab[data-view="trends"] .tab-icon{ color:var(--icon-trends); --icon-tint:var(--icon-trends); }
  .tab[data-view="accounts"] .tab-icon{ color:var(--icon-accounts); --icon-tint:var(--icon-accounts); }
  .tab[data-view="users"] .tab-icon{ color:var(--icon-users); --icon-tint:var(--icon-users); }

  .view{ display:none; padding:28px; max-width:1400px; margin:0 auto; }
  .view.active{ display:block; }

  /* ---------- Panels ---------- */
  .panel{
    background:var(--surface);
    border:2px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
  }