:root{
    --bg:#f9f9f7;
    --surface:#fcfcfb;
    --surface-2:#f1f0eb;
    --text-primary:#0b0b0b;
    --text-secondary:#52514e;
    --text-muted:#898781;
    --border:rgba(11,11,11,0.10);
    --grid:#e1e0d9;
    --baseline:#c3c2b7;
    --accent:#2a78d6;
    --accent-dark:#184f95;
    --accent-wash:rgba(42,120,214,0.10);
    --cat-2:#eb6834;
    --cat-3:#1baf7a;
    --cat-4:#eda100;
    --cat-7:#4a3aa7;
    --status-good:#0ca30c;
    --status-good-wash:rgba(12,163,12,0.12);
    --status-warning:#fab219;
    --status-warning-wash:rgba(250,178,25,0.18);
    --status-critical:#d03b3b;
    --success-text:#006300;
    --status-good-side:#087a08;
    --status-warning-side:#c98500;
    --cat7-side:#332875;
    --accent-side:#184f95;
    --cat2-side:#a8481c;
    --cat3-side:#0f7a52;
    --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 6px 20px rgba(11,11,11,0.05);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0d0d0d;
      --surface:#1a1a19;
      --surface-2:#232322;
      --text-primary:#ffffff;
      --text-secondary:#c3c2b7;
      --text-muted:#898781;
      --border:rgba(255,255,255,0.10);
      --grid:#2c2c2a;
      --baseline:#383835;
      --accent:#3987e5;
      --accent-dark:#86b6ef;
      --accent-wash:rgba(57,135,229,0.16);
      --cat-2:#d95926;
      --cat-3:#199e70;
      --cat-4:#c98500;
      --cat-7:#9085e9;
      --status-good:#0ca30c;
      --status-good-wash:rgba(12,163,12,0.18);
      --status-warning:#fab219;
      --status-warning-wash:rgba(250,178,25,0.18);
      --status-critical:#d03b3b;
      --success-text:#0ca30c;
      --status-good-side:#087a08;
      --status-warning-side:#c98500;
      --cat7-side:#332875;
      --accent-side:#184f95;
      --cat2-side:#a8481c;
      --cat3-side:#0f7a52;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.35);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0d0d0d;
    --surface:#1a1a19;
    --surface-2:#232322;
    --text-primary:#ffffff;
    --text-secondary:#c3c2b7;
    --text-muted:#898781;
    --border:rgba(255,255,255,0.10);
    --grid:#2c2c2a;
    --baseline:#383835;
    --accent:#3987e5;
    --accent-dark:#86b6ef;
    --accent-wash:rgba(57,135,229,0.16);
    --cat-2:#d95926;
    --cat-3:#199e70;
    --cat-4:#c98500;
    --cat-7:#9085e9;
    --status-good:#0ca30c;
    --status-good-wash:rgba(12,163,12,0.18);
    --status-warning:#fab219;
    --status-warning-wash:rgba(250,178,25,0.18);
    --status-critical:#d03b3b;
    --success-text:#0ca30c;
    --status-good-side:#087a08;
    --status-warning-side:#c98500;
    --cat7-side:#332875;
    --accent-side:#184f95;
    --cat2-side:#a8481c;
    --cat3-side:#0f7a52;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.35);
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  [hidden]{display:none!important;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text-primary);
    font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding-inline:20px;
    padding-block:20px 48px;
  }
  h1,h2,h3{font-family:"IBM Plex Sans", system-ui, sans-serif; text-wrap:balance; margin:0;}
  .num{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;}
  .tabular{font-variant-numeric:tabular-nums;}

  /* ---------- header ---------- */
  header.top{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    margin-inline:-20px;
    padding-inline:20px;
  }
  .top-inner{
    display:flex;
    align-items:center;
    gap:16px;
    padding-block:14px;
    flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:12px; flex:1 1 260px;}
  .brand .mark{
    width:38px;height:38px;border-radius:9px;
    background:linear-gradient(155deg, var(--accent), var(--accent-dark));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;
    flex:none;
  }
  .brand h1{font-size:19px;font-weight:700;letter-spacing:-0.01em;}
  .brand .sub{font-size:12.5px;color:var(--text-secondary);margin-top:1px;}
  .top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

  button{font-family:inherit;}
  .btn{
    appearance:none;border:1px solid var(--border);
    background:var(--surface);color:var(--text-primary);
    padding:9px 14px;border-radius:9px;font-size:13.5px;font-weight:600;
    cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    transition:background .15s ease, border-color .15s ease;
  }
  .btn:hover{background:var(--surface-2);}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
  .btn svg{width:15px;height:15px;flex:none;}
  #file-input{display:none;}

  .banner{
    margin-block:14px 0;
    padding:11px 14px;border-radius:10px;
    font-size:13px;line-height:1.45;
    display:flex;gap:10px;align-items:flex-start;
    border:1px solid var(--border);
  }
  .banner.warn{background:var(--status-warning-wash);border-color:color-mix(in srgb, var(--status-warning) 45%, var(--border));}
  .banner.good{background:var(--status-good-wash);border-color:color-mix(in srgb, var(--status-good) 40%, var(--border));}
  .banner.info{background:var(--accent-wash);border-color:color-mix(in srgb, var(--accent) 35%, var(--border));}
  .banner svg{width:16px;height:16px;flex:none;margin-top:1px;}
  .banner[hidden]{display:none!important;}

  /* ---------- sections ---------- */
  section{margin-block-start:26px;}
  .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
  .section-head h2{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary);font-weight:700;}
  .section-head .meta{font-size:12.5px;color:var(--text-muted);}

  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
  }

  /* ---------- filters ---------- */
  .filters-card{padding:16px;}
  .filters-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:10px;
  }
  .field{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
  .field select,.field input{
    width:100%;
    font-size:13px;
    padding:8px 9px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text-primary);
    font-family:inherit;
  }
  .field select:focus-visible,.field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .filters-footer{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
    gap:10px;flex-wrap:wrap;
  }
  .filters-footer .count{font-size:13px;color:var(--text-secondary);}
  .filters-footer .count b{color:var(--text-primary);font-family:system-ui,sans-serif;}
  .chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  .chip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--accent-wash);color:var(--accent-dark);
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-size:12px;font-weight:600;padding:4px 8px 4px 10px;border-radius:999px;
  }
  .chip button{all:unset;cursor:pointer;line-height:0;padding:2px;}
  .chip button svg{width:11px;height:11px;display:block;}

  /* ---------- KPI tiles ---------- */
  .kpi-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:12px;
  }
  .kpi{
    padding:15px 16px;
    display:flex;flex-direction:column;gap:6px;
    position:relative;overflow:hidden;
  }
  .kpi .bar{position:absolute;left:0;top:0;bottom:0;width:3px;}
  .kpi .lbl{font-size:12px;color:var(--text-secondary);font-weight:600;}
  .kpi .val{font-size:26px;font-weight:700;letter-spacing:-0.01em;font-family:system-ui,sans-serif;}
  .kpi .sub{font-size:12px;color:var(--text-muted);}
  .kpi.emph{background:var(--status-warning-wash);}
  .kpi.emph .bar{background:var(--status-warning);}
  .kpi.emph .val{color:color-mix(in srgb, var(--status-warning) 60%, var(--text-primary));}
  .kpi.clickable{cursor:pointer;transition:box-shadow .15s ease, transform .08s ease;}
  .kpi.clickable:hover{box-shadow:0 2px 8px rgba(11,11,11,0.08), 0 12px 26px rgba(11,11,11,0.10);}
  .kpi.clickable:active{transform:scale(0.98);}
  .kpi.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .kpi.active{outline:2px solid var(--accent);outline-offset:-2px;}
  .kpi.emph.active{outline-color:var(--status-warning);}

  /* ---------- charts grid ---------- */
  .charts-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
  }
  .chart-card{padding:16px 16px 14px;}
  .chart-card.wide{grid-column:1 / -1;}
  .chart-title{font-size:13.5px;font-weight:700;margin-bottom:2px;}
  .chart-caption{font-size:12px;color:var(--text-muted);margin-bottom:10px;}
  .chart-body{position:relative;}
  .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--text-secondary);}
  .legend .item{display:flex;align-items:center;gap:6px;}
  .legend .sw{width:9px;height:9px;border-radius:2.5px;flex:none;}
  .legend-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);padding:4px 7px;border-radius:7px;cursor:pointer;font-family:inherit;}
  .legend-item .sw{width:9px;height:9px;border-radius:2.5px;flex:none;}
  .legend-item:hover{background:var(--surface-2);}
  .legend-item.active{background:var(--accent-wash);color:var(--text-primary);font-weight:700;}
  .legend-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .legend-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;}
  .pie3d-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px;}
  .pie3d-stage{position:relative;flex:none;}
  .pie3d-side{position:absolute;left:0;border-radius:50%;}
  .pie3d-top{position:absolute;left:0;top:0;border-radius:50%;cursor:pointer;}
  .pie3d-highlight{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;mix-blend-mode:multiply;}
  :root[data-theme="dark"] .pie3d-highlight{mix-blend-mode:screen;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pie3d-highlight{mix-blend-mode:screen;}}
  .pie3d-label{position:absolute;font-size:16px;font-weight:700;font-family:inherit;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,0.25);}
  .pie3d-total{font-size:13px;color:var(--text-muted);text-align:center;}
  .pie3d-total b{color:var(--text-primary);font-weight:700;}
  .bar-row{display:flex;align-items:center;gap:10px;padding-block:3px;border-radius:7px;}
  .bar-row .rlabel{width:132px;flex:none;font-size:12px;color:var(--text-secondary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bar-row .rtrack{flex:1;position:relative;height:22px;}
  .bar-row .rfill{position:absolute;left:0;top:3px;height:16px;border-radius:4px;background:var(--accent);min-width:3px;}
  .bar-row .rval{margin-left:8px;font-size:12px;color:var(--text-primary);font-weight:600;width:34px;flex:none;font-family:system-ui,sans-serif;}
  .hbar-wrap .bar-row:hover .rfill{filter:brightness(1.08);}
  .bar-row.clickable{cursor:pointer;}
  .bar-row.clickable:hover{background:var(--surface-2);}
  .bar-row.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .bar-row.active{background:var(--accent-wash);}
  .bar-row.active .rlabel{color:var(--text-primary);font-weight:700;}
  .col-bar.clickable{cursor:pointer;transition:filter .1s ease;}
  .col-bar.clickable:hover{filter:brightness(1.1);}
  .col-bar.clickable:focus-visible{outline:2px solid var(--text-primary);outline-offset:1px;}
  .col-bar.active{outline:2px solid var(--text-primary);outline-offset:1px;}
  .group-col{cursor:pointer;border-radius:4px;padding:0 2px;}
  .group-col.active{outline:2px dashed var(--text-secondary);outline-offset:4px;}
  .bar3d{position:relative;width:10px;min-width:10px;cursor:pointer;transition:filter .1s ease;}
  .bar3d:hover{filter:brightness(1.12);}
  .bar3d.active{outline:2px solid var(--text-primary);outline-offset:2px;}
  .bar3d-front{position:absolute;inset:0;border-radius:2px 2px 0 0;}
  .bar3d-top{position:absolute;top:-5px;left:0;width:100%;height:5px;transform:skewX(-40deg);transform-origin:bottom left;border-radius:1px 1px 0 0;}
  .bar3d-side{position:absolute;top:0;right:-5px;width:5px;height:100%;transform:skewY(-40deg);transform-origin:top left;}
  .empty-note{font-size:13px;color:var(--text-muted);padding:18px 4px;text-align:center;}

  svg.chart-svg text{font-family:system-ui,-apple-system,"Segoe UI",sans-serif; fill:var(--text-secondary);}
  svg.chart-svg .axis-line{stroke:var(--baseline);stroke-width:1;}
  svg.chart-svg .grid-line{stroke:var(--grid);stroke-width:1;}
  svg.chart-svg .val-lbl{fill:var(--text-primary);font-weight:600;}
  .tooltip{
    position:absolute;pointer-events:none;
    background:var(--text-primary);color:var(--bg);
    font-size:11.5px;font-weight:600;padding:5px 8px;border-radius:6px;
    transform:translate(-50%,-115%);white-space:nowrap;z-index:5;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    opacity:0;transition:opacity .1s ease;
  }
  .tooltip.show{opacity:1;}

  /* ---------- table ---------- */
  .table-card{padding:0;overflow:hidden;}
  .table-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap;}
  .table-scroll{overflow-x:auto;max-height:480px;overflow-y:auto;}
  table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:920px;}
  thead th{
    position:sticky;top:0;background:var(--surface-2);
    text-align:left;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
    color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;z-index:1;
  }
  thead th[data-key]{cursor:pointer;user-select:none;}
  thead th[data-key]:hover{color:var(--text-primary);}
  .sort-ind{display:inline-block;width:8px;font-size:9px;color:var(--accent);}
  tbody td{padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text-secondary);}
  tbody tr:hover td{background:var(--surface-2);}
  td.strong{color:var(--text-primary);font-weight:600;}
  .status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;}
  .status-pill.fin{background:var(--status-good-wash);color:var(--success-text);}
  .status-pill.pro{background:var(--status-warning-wash);color:color-mix(in srgb, var(--status-warning) 55%, var(--text-primary));}
  .status-pill.pla{background:var(--accent-wash);color:var(--accent-dark);}
  .status-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
  .pager{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:12.5px;color:var(--text-secondary);border-top:1px solid var(--border);}
  .pager button{border:1px solid var(--border);background:var(--surface);border-radius:7px;width:26px;height:26px;cursor:pointer;color:var(--text-primary);}
  .pager button:disabled{opacity:.35;cursor:default;}

  #admin-controls{display:inline-flex;align-items:center;gap:10px;}
  #btn-admin-toggle svg{width:14px;height:14px;}

  .report-months{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);}
  .report-months .rm-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);white-space:nowrap;}
  .report-months select{font-size:12.5px;padding:6px 7px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-family:inherit;max-width:110px;}
  .report-months select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

  .modal-backdrop{
    position:fixed;inset:0;z-index:100;
    background:rgba(11,11,11,0.5);
    display:flex;align-items:center;justify-content:center;
    padding:16px;
  }
  .modal-card{
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:20px;max-width:340px;width:100%;box-shadow:var(--shadow);
  }
  .modal-card h3{font-size:15.5px;margin-bottom:6px;}
  .modal-card p{font-size:13px;color:var(--text-secondary);margin:0 0 14px;line-height:1.4;}
  .modal-card input{
    width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--text-primary);font-size:14px;font-family:inherit;
  }
  .modal-error{color:var(--status-critical);font-size:12.5px;margin-top:8px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}

  footer.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

  @media (max-width:900px){
    .kpi-grid{grid-template-columns:repeat(3,1fr);}
    .charts-grid{grid-template-columns:minmax(0,1fr);}
    .bar-row .rlabel{width:100px;}
  }
  @media (max-width:520px){
    .kpi-grid{grid-template-columns:repeat(2,1fr);}
    .wrap{padding-inline:16px;}
    header.top{margin-inline:-16px;padding-inline:16px;}
  }

  /* ---------- Radar de Impresoras: tabs ---------- */
  .tabs{display:flex;gap:8px;margin-top:18px;border-bottom:1px solid var(--border);}
  .tab-btn{
    appearance:none;border:none;background:none;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text-secondary);
    padding:10px 6px 12px;display:inline-flex;align-items:center;gap:8px;
    border-bottom:2.5px solid transparent;margin-bottom:-1px;
    transition:color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{color:var(--text-primary);}
  .tab-btn.active{color:var(--text-primary);border-bottom-color:var(--accent);}
  .tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .tab-dot{width:9px;height:9px;border-radius:50%;flex:none;}
  .dot-kyocera{background:var(--accent);}
  .dot-zebra{background:var(--cat-2);}
  .tab-count{
    font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface-2);
    border-radius:999px;padding:1px 7px;font-family:system-ui,sans-serif;
  }
  .tab-btn.active .tab-count{color:var(--text-primary);}

  /* ---------- toner meter ---------- */
  .toner-cell{display:flex;align-items:center;gap:8px;min-width:150px;}
  .toner-track{
    position:relative;width:84px;height:9px;border-radius:5px;flex:none;
    background:var(--surface-2);border:1px solid var(--border);overflow:hidden;
  }
  .toner-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;transition:width .2s ease;}
  .toner-fill.ok{background:var(--status-good);}
  .toner-fill.warn{background:var(--status-warning);}
  .toner-fill.crit{background:var(--status-critical);}
  .toner-fill.full{border-radius:5px;}
  .toner-pct{font-size:12.5px;font-weight:700;font-family:system-ui,sans-serif;width:38px;flex:none;text-align:right;}
  .toner-pct.crit{color:var(--status-critical);}
  .toner-pct.warn{color:color-mix(in srgb, var(--status-warning) 60%, var(--text-primary));}
  .toner-na{font-size:12px;color:var(--text-muted);}
  .toner-alert-badge{
    display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
    color:#fff;background:var(--status-critical);border-radius:999px;padding:2px 7px 2px 6px;
    letter-spacing:.02em;animation:toner-pulse 1.6s ease-in-out infinite;flex:none;
  }
  .toner-alert-badge svg{width:10px;height:10px;flex:none;}
  @keyframes toner-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(208,59,59,0.45);}
    50%{box-shadow:0 0 0 4px rgba(208,59,59,0);}
  }
  tr.row-critical td{background:color-mix(in srgb, var(--status-critical) 7%, transparent);}
  tr.row-critical:hover td{background:color-mix(in srgb, var(--status-critical) 12%, transparent);}

  /* ---------- status pill (online/offline) ---------- */
  .status-pill.online{background:var(--status-good-wash);color:var(--success-text);}
  .status-pill.offline{background:color-mix(in srgb, var(--status-critical) 16%, transparent);color:var(--status-critical);}

  /* ---------- error chips (Zebra) ---------- */
  .err-chips{display:flex;flex-wrap:wrap;gap:4px;max-width:320px;}
  .err-chip{
    font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;
    background:color-mix(in srgb, var(--status-critical) 14%, transparent);color:var(--status-critical);
  }
  .err-chip.ok{background:var(--status-good-wash);color:var(--success-text);}
  .err-chip.offline{background:color-mix(in srgb, var(--text-muted) 20%, transparent);color:var(--text-secondary);}

  /* ---------- toner color breakdown (impresoras a color) ---------- */
  .toner-cell-color{flex-wrap:wrap;gap:5px;min-width:220px;}
  .toner-chip{
    display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
    padding:2px 7px;border-radius:999px;font-family:system-ui,sans-serif;
    border:1.5px solid transparent;white-space:nowrap;
  }
  .toner-chip.chip-c{background:rgba(0,174,239,0.16);color:#0a7fac;}
  .toner-chip.chip-m{background:rgba(236,0,140,0.14);color:#b8006e;}
  .toner-chip.chip-y{background:rgba(255,214,0,0.24);color:#8a6d00;}
  .toner-chip.chip-k{background:var(--surface-2);color:var(--text-primary);border-color:var(--border);}
  :root[data-theme="dark"] .toner-chip.chip-c{color:#5fd2ff;}
  :root[data-theme="dark"] .toner-chip.chip-m{color:#ff7fc4;}
  :root[data-theme="dark"] .toner-chip.chip-y{color:#ffe066;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .toner-chip.chip-c{color:#5fd2ff;}
    :root:not([data-theme="light"]) .toner-chip.chip-m{color:#ff7fc4;}
    :root:not([data-theme="light"]) .toner-chip.chip-y{color:#ffe066;}
  }
  .toner-chip.solo.ok{background:var(--status-good-wash);color:var(--success-text);}
  .toner-chip.solo.warn{background:var(--status-warning-wash);color:color-mix(in srgb, var(--status-warning) 60%, var(--text-primary));}
  .toner-chip.unknown{opacity:.55;font-weight:600;}
  .toner-chip.crit{
    border-color:var(--status-critical);color:#fff !important;
    background:var(--status-critical) !important;
    animation:toner-pulse 1.6s ease-in-out infinite;
  }

  .kpi.crit{background:color-mix(in srgb, var(--status-critical) 12%, transparent);}
  .kpi.crit .bar{background:var(--status-critical);}
  .kpi.crit .val{color:var(--status-critical);}
  .kpi.good{background:var(--status-good-wash);}
  .kpi.good .bar{background:var(--status-good);}
  .kpi.good .val{color:var(--success-text);}