/* [claude-opus-5-5 2026-09-25] New stylesheet: the customer Usage & performance page and the overview usage card.
   Chart hues are the validated dark categorical set (dataviz validator, surface #1d1f23: all checks pass);
   status hues are reserved for states and always ship with a label.
   [claude-opus-5-5 2026-10-07] Owner: rebuilt in the site's compact 2000s-2010s desktop vocabulary, designed in Silver first
   and carried to the other themes through their variables: register panels with header pills (API keys), a bevelled
   toolbar strip (Billing's summary bar), inset readout wells (Billing's figures), segment meters and column-header bands. */
@layer refined {
  :root{--viz-1:#3987e5;--viz-2:#d95926;--viz-3:#199e70;--viz-4:#c98500;--viz-5:#9085e9;--viz-neutral:#6f737c;--status-good:#0ca30c;--status-warning:#fab219;--status-serious:#ec835a;--status-critical:#d03b3b;
    --heat-0:#23262c;--heat-1:#1c3558;--heat-2:#1f5294;--heat-3:#3987e5;--heat-4:#86b6ef;
    --u-well-bg:linear-gradient(#0000002e,#00000014);--u-well-edge:#0007;--u-well-shadow:inset 0 1px 2px #0006,0 1px #ffffff07;
    --u-band-bg:linear-gradient(#00000026,#00000012);--u-trough:linear-gradient(#08090b,#101114)}
  .u-head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .u-back{margin-bottom:10px}.admin-heading-actions{display:flex;gap:8px;align-items:center}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .usage-root{display:flex;flex-direction:column;gap:12px;min-width:0}
  .usage-root .panel{min-width:0}
  .usage-root .u-pad{padding:12px 14px}
  .u-sub{font-size:10.5px;color:var(--muted)}
  .u-sub code,.u-log code{font-size:10px}
  .u-muted{color:var(--muted)}
  .u-empty{padding:14px;text-align:center;font-size:11.5px;color:var(--muted)}

  /* Register panel header: title left, pills or a control right, a rule under it (API keys). */
  .usage-root .u-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:7px 14px;margin:0;border-bottom:1px solid var(--line)}
  .usage-root .u-head h2{font-size:14px;line-height:1.4;margin:0;white-space:nowrap}
  .usage-root .u-head .inline-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .usage-root .u-head .segmented{max-width:none}
  .usage-root .u-head select{width:auto;font-size:11.5px;padding:4px 26px 4px 8px}

  /* Inset readout wells (Billing's figures): label above, value, a quiet line under. */
  .u-wells{display:grid;gap:6px;margin:0}
  .u-well{min-width:0;padding:6px 9px 7px;border-radius:4px;border:1px solid var(--u-well-edge);background:var(--u-well-bg);box-shadow:var(--u-well-shadow)}
  .u-well dt{font-size:9.5px;color:var(--subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-well dd{margin:1px 0 0;min-width:0}
  .u-val{display:flex;align-items:center;gap:0;font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.1px}
  .u-val small{font-size:11px;font-weight:500;color:var(--muted);margin-left:3px}
  .u-well dd>small{display:flex;flex-wrap:wrap;gap:0 5px;align-items:baseline;font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-well-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 9px}
  .u-well-row dd{margin:0;font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
  .u-val .stream-pips{margin-right:7px;height:14px;grid-auto-columns:6px}
  .u-delta{font-size:10px;color:var(--muted);white-space:nowrap}.u-delta.good{color:#8fd49b}.u-delta.bad{color:#f0a296}

  /* A band of column headings, or a sub-heading inside a register (the tables' header strip). */
  .u-band{display:flex;align-items:baseline;gap:7px;padding:6px 14px;font-size:10.5px;font-weight:550;color:var(--muted);background:var(--u-band-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .u-band small{font-weight:400;color:var(--subtle)}

  /* Segment and fill meters in a recessed trough (Billing's stream meter). */
  .u-meter{display:block;height:7px;margin-top:4px;border-radius:2px;border:1px solid #0008;background:var(--u-trough);box-shadow:inset 0 1px 2px #0009,0 1px #ffffff08;overflow:hidden}
  .u-meter i{display:block;height:100%;border-radius:1px;background:linear-gradient(color-mix(in srgb,var(--viz-1) 70%,#fff),color-mix(in srgb,var(--viz-1) 85%,#000));box-shadow:inset 0 1px #ffffff40}
  .u-meter i.neutral{background:linear-gradient(#9a9ea6,#5f636b)}.u-meter i.error{background:linear-gradient(#e8706f,#a92e2e)}
  .u-meter i.busy,.u-meter i.warn{background:linear-gradient(#ffd36f,#c98a1c)}.u-meter i.request{background:linear-gradient(#b3aaf3,#6f63c9)}
  .u-meter-cell{width:26%;vertical-align:middle!important}.u-meter-cell .u-meter{margin-top:0}

  /* Status lamps: a small bevelled bead. */
  .u-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;margin-right:7px;vertical-align:1px;background:var(--viz-neutral);box-shadow:inset 0 1px #ffffff55,0 0 0 1px #0007}
  .u-dot.ok{background:var(--viz-1)}.u-dot.error{background:var(--status-critical)}.u-dot.busy,.u-dot.warn{background:var(--status-warning)}.u-dot.request{background:var(--viz-5)}
  .u-dot.live{background:var(--status-good);box-shadow:inset 0 1px #ffffff66,0 0 0 1px #0007,0 0 5px #0ca30c88}

  /* One-line notices in the pill colours: something to act on, never prose. */
  .u-notice{display:flex;align-items:center;gap:8px;margin:0;padding:6px 10px;border-radius:4px;font-size:11.5px;line-height:1.4;border:1px solid var(--line);background:var(--raised);color:var(--muted);box-shadow:inset 0 1px #ffffff08}
  .u-notice svg{width:14px;height:14px;flex:none}
  .u-notice a{margin-left:auto;white-space:nowrap;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .u-notice.warning{background:#352b1c;border-color:#8b7047;color:#f0d19b}
  .u-notice.danger{background:#382028;border-color:#925c6a;color:#f6c3ce}
  .u-live .u-notice{margin:0 14px 10px}

  /* Tables: the site's register tables, dense. */
  .u-table{width:100%;border-collapse:collapse}
  .u-table th,.u-table td{padding:7px 14px;font-size:12px;text-align:left;vertical-align:top;border-bottom:1px solid #ffffff0a}
  .u-table thead th,.u-table .u-band-row th{padding:6px 14px;font-size:10.5px;font-weight:500;color:var(--muted);background:var(--u-band-bg);border-bottom:1px solid var(--line);white-space:nowrap}
  .u-table .u-band-row th{border-top:1px solid var(--line)}
  .u-table tbody th{font-weight:500;color:var(--text);background:none}
  .u-table tbody tr:last-child>*{border-bottom:0}
  .u-table td small,.u-table th small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:1px}
  .u-table td>small.u-inline-note{display:inline;margin:0}
  .u-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .u-table strong{font-weight:600}
  .u-compact th,.u-compact td{padding-top:5px;padding-bottom:5px}
  .u-aside{font-size:10px;font-weight:400;color:var(--subtle);margin:0 6px;white-space:nowrap}
  .u-log-table th,.u-log-table td{padding:6px 10px}.u-log-table th:first-child,.u-log-table td:first-child{padding-left:14px}.u-log-table th:last-child,.u-log-table td:last-child{padding-right:14px}
  .u-log-table td:first-child,.u-log-table td.num{white-space:nowrap}
  .u-log-table tbody tr:nth-child(even) td,.u-keys tbody tr:nth-child(even) td{background:#ffffff04}
  .u-grid2 .u-table th,.u-grid2 .u-table td{padding-left:8px;padding-right:8px}.u-grid2 .u-table th:first-child,.u-grid2 .u-table td:first-child{padding-left:14px}.u-grid2 .u-table th:last-child,.u-grid2 .u-table td:last-child{padding-right:14px}
  .u-perf tbody th{min-width:118px}
    .u-row{cursor:pointer}.u-row:hover td,.u-row:focus-visible td{background:#ffffff07}.u-row:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}

  /* Running now */
  .u-live-tag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);padding:3px 8px;border-radius:4px;border:1px solid var(--u-well-edge);background:var(--u-well-bg);box-shadow:var(--u-well-shadow)}
  .u-pulse{width:7px;height:7px;border-radius:50%;background:var(--status-good);box-shadow:0 0 0 0 #0ca30c80;animation:u-pulse 2s infinite}
  .u-stale .u-pulse{background:var(--status-warning);animation:none}
  @keyframes u-pulse{70%{box-shadow:0 0 0 5px #0ca30c00}100%{box-shadow:0 0 0 0 #0ca30c00}}
  .u-live-body{padding:0}
  .u-live-wells{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 14px}
  .u-live-wells .u-spark{display:block;width:100%;height:20px;margin-top:3px}
  .u-spark{display:block;width:100%;height:26px}
  .u-services{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0 14px 9px;font-size:11px;color:var(--muted)}
  .u-svc b{color:var(--text);font-weight:500;margin-left:3px}.u-svc small{margin-left:7px;color:var(--subtle)}
  .u-idle{margin:0;padding:9px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}
  .u-live .table-wrap{border-top:1px solid var(--line)}
  .u-recent table thead th:first-child{color:var(--text);font-weight:600}

  /* Toolbar strip (Billing's summary bar), kept in reach while scrolling. */
  .usage-root .u-toolbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:8px 10px;position:sticky;top:6px;z-index:5}
  .usage-root .u-ranges{flex:0 1 auto;max-width:none}.usage-root .u-ranges button{flex:0 0 auto;padding:4px 9px}
  .u-custom{display:flex;gap:8px}.u-custom[hidden]{display:none}
  .u-inline{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;color:var(--muted)}.u-inline input{width:auto;padding:4px 8px;font-size:12px}
  .u-filters{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;align-items:center}
  .u-filters select{width:auto;max-width:200px;font-size:11.5px;padding:5px 26px 5px 8px}.u-filters select[hidden]{display:none}
  .u-filters .button.small{min-height:30px;padding:5px 10px;font-size:11.5px}
  .u-report{display:flex;flex-direction:column;gap:12px;transition:opacity .2s}.u-report.u-loading{opacity:.55}

  /* Totals */
  .u-fig-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 14px 12px}

  /* Billing period strip */
  .u-period{padding:9px 14px 12px}
  .u-period-head{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:9px}
  .u-period-head h2{font-size:14px;margin:0}
  .u-period-head .stream-pips{margin:0 0 0 auto;grid-auto-columns:6px;height:14px}
  .u-period-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Charts */
  .u-chart-head{flex-wrap:wrap}.u-tabs{flex:0 1 auto;flex-wrap:wrap}.u-tabs button{flex:0 0 auto}
  .u-legend{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 14px 0;font-size:10.5px;color:var(--muted)}
  .u-legend span{display:inline-flex;align-items:center;gap:6px}.u-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;box-shadow:inset 0 1px #ffffff40}
  .u-legend i.dash{height:2px;width:14px;background-image:none}.u-legend i.ref{height:0;width:14px;border-top:1px dashed var(--muted)}
  .u-chart{position:relative;padding:6px 8px 10px;min-width:0}
  .u-svg{display:block;max-width:100%;overflow:visible;touch-action:pan-y}
  .u-grid{stroke:#ffffff12;stroke-width:1}.u-axis{fill:var(--subtle);font-size:10px;font-family:inherit}
  .u-ref{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1}.u-ref-label{fill:var(--muted)}
  .u-cross{stroke:#ffffff55;stroke-width:1}.u-mark{stroke:#ffffffa0;stroke-width:1;stroke-dasharray:3 3}.u-mark-label{fill:var(--text)}
  .u-tip{position:absolute;z-index:3;pointer-events:none;min-width:190px;padding:8px 10px;border:1px solid #505560;border-radius:4px;background:#1d2025f2;box-shadow:inset 0 1px #ffffff10,0 8px 20px #0009;font-size:11px}
  .u-tip.u-float{position:fixed;z-index:1000}
  .u-tip strong{display:block;margin-bottom:5px;font-weight:600}.u-tip div{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;padding:1px 0}
  .u-tip i{width:9px;height:9px;border-radius:2px}.u-tip span{color:var(--muted)}.u-tip b{font-weight:500}
  .u-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .u-grid2>.panel{min-width:0}
  .u-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0}
  .u-feature-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:10px 14px 12px}

  /* Heatmap */
  .u-heat-wrap{padding:10px 14px 12px;overflow-x:auto}
  .u-heat{display:flex;flex-direction:column;gap:3px;min-width:330px}
  .u-heat-row,.u-heat-hours{display:grid;grid-template-columns:30px repeat(24,minmax(8px,1fr));gap:3px;align-items:center}
  .u-heat-hours span{font-size:9px;color:var(--subtle)}.u-heat-day{font-size:10px;color:var(--muted)}
  .u-cell{aspect-ratio:1;border-radius:2px;background:var(--heat-0);box-shadow:inset 0 1px 1px #0006}
  .u-cell[data-level="1"],.u-heat-legend i[data-level="1"]{background:var(--heat-1)}.u-cell[data-level="2"],.u-heat-legend i[data-level="2"]{background:var(--heat-2)}
  .u-cell[data-level="3"],.u-heat-legend i[data-level="3"]{background:var(--heat-3)}.u-cell[data-level="4"],.u-heat-legend i[data-level="4"]{background:var(--heat-4)}
  .u-heat-legend{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:10px;color:var(--muted);flex-wrap:wrap}.u-heat-legend i{width:11px;height:11px;border-radius:2px;background:var(--heat-0)}.u-heat-legend .u-sub{margin-left:auto}

  /* Request log */
  .u-log-tools{flex-wrap:wrap}.u-log-tools .segmented{flex:0 1 auto;flex-wrap:wrap;max-width:none}.u-log-tools .segmented button{flex:0 0 auto}
  .u-log-tools .search-field{min-width:240px;flex:0 1 320px}
  .u-log-foot{justify-content:space-between}

  /* Request detail */
  dialog.u-dialog{width:560px}.u-detail{max-height:52vh;overflow:auto;padding-right:4px}
  .u-timeline{position:relative;height:12px;border-radius:2px;border:1px solid #0008;background:var(--u-trough);box-shadow:inset 0 1px 2px #0009,0 1px #ffffff08;margin:4px 0 8px;overflow:hidden}.u-timeline i{position:absolute;top:0;bottom:0;box-shadow:inset 0 1px #ffffff40}
  .u-timeline .wait,.u-timeline-legend .wait{background:var(--viz-2)}.u-timeline .think,.u-timeline-legend .think{background:var(--viz-4)}.u-timeline .write,.u-timeline-legend .write{background:var(--viz-1)}
  .u-timeline-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--muted);margin-bottom:10px}.u-timeline-legend span{display:inline-flex;align-items:center;gap:6px}.u-timeline-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

  /* Overview card */
  .u-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:10px}.u-card-grid small{font-size:10px;color:var(--muted);display:block}.u-card-grid strong{font-size:18px;font-weight:500}.u-card-grid strong span{font-size:11px;color:var(--muted);font-weight:400}
  .u-warn-text{font-size:11px;color:var(--amber);margin-top:8px}

  @media(max-width:1100px){.u-fig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:940px){.u-live-wells{grid-template-columns:1fr 1fr}.u-grid2{grid-template-columns:1fr}.u-filters{margin-left:0}}
  @media(max-width:700px){.usage-root .u-toolbar{position:static}.u-period-grid{grid-template-columns:1fr}.u-period-head .stream-pips{margin-left:0}
    .u-head-actions .button{padding:6px 9px}.page-head:has(.u-head-actions){flex-direction:column;align-items:stretch}.u-head-actions{justify-content:flex-start}
    .u-log-tools .search-field{min-width:0;flex:1 1 100%;max-width:none}.u-filters select{max-width:150px}.u-table th,.u-table td{padding-left:10px;padding-right:10px}}
  @media(max-width:450px){.u-live-wells,.u-fig-grid{grid-template-columns:1fr 1fr;gap:5px}.u-val{font-size:14px}}
  @media(prefers-reduced-motion:reduce){.u-pulse{animation:none}}
}
/* [claude-opus-5-5 2026-10-07] Serving nodes register (nodes_panel.js), on Home and Usage. */
@layer refined {
  .np .u-head{flex-wrap:wrap}
  .np .inline-badges{align-items:center}
  .np-open{font-size:11px;margin-left:4px}
  .np-table td{vertical-align:middle;padding-top:7px;padding-bottom:7px}
  .np-name{font-weight:600;color:var(--text);text-decoration:none}.np-name:hover{text-decoration:underline}
  .np-table .stream-pips{margin-right:6px}
  .np-state{display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:550;white-space:nowrap;border:1px solid;box-shadow:inset 0 1px 2px #0006,0 1px 0 #ffffff08}
  .np-state.ok{background:#203a2d;border-color:#557f64;color:#bce7ca}
  .np-state.warn{background:#352b1c;border-color:#8b7047;color:#f0d19b}
  .np-state.error{background:#382028;border-color:#925c6a;color:#f6c3ce}
  .np-state.neutral{background:var(--raised);border-color:var(--line);color:var(--muted)}
  .np-table td small[title]{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .np-cache{min-width:110px}.np-cache-val{display:block;font-size:11px;font-variant-numeric:tabular-nums}.np-cache .u-meter{margin-top:3px}
}
/* [claude-opus-5-5 2026-10-07] Operator home (app.js adminOverview): the same vocabulary as Usage. The attention panel and
   the activity timeline keep their own markup (admin.js, app.js) and are dressed here, on Home only. */
.ov-figures .u-val .muted{font-size:11px;font-weight:500;margin-left:3px;color:var(--muted)}
.ov-figures .u-val .stat-aside{font-size:10px;font-weight:500;margin-left:8px}
@layer refined {
  .ov-summary{padding:10px}
  .ov-figures{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ov-timeline .timeline{list-style:none;margin:0;padding:0}
  .ov-root .ov-timeline .timeline li,.ov-root .ov-timeline .timeline li:first-child{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 14px;border-bottom:1px solid #ffffff0a}
  .ov-timeline .timeline li:nth-child(even){background:#ffffff04}
  .ov-timeline .timeline li:last-child{border-bottom:0}
  .ov-timeline .timeline-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:4px}
  .ov-timeline .timeline-icon svg.icon{width:13px;height:13px}
  .ov-timeline .timeline li>div{display:flex;align-items:baseline;gap:8px;min-width:0}
  .ov-timeline .timeline p{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ov-timeline .timeline small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ov-timeline .timeline time{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .ov-timeline .empty{padding:14px}
  .ov-beta{padding:6px 14px 2px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .ov-beta .detail-row{flex:1 1 220px;align-items:center;border:0;padding:0;margin:0}
  .ov-note{margin:0;padding:6px 14px 11px;font-size:10.5px;color:var(--subtle)}
  @media(max-width:1100px){.ov-figures,.ov-root .admin-attention-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:600px){.ov-figures,.ov-root .admin-attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
}
/* [claude-opus-5-5 2026-10-07] Outside the layer: admin.css (unlayered) styles the attention panel, and unlayered rules
   win over layered ones whatever their specificity. Home only. */
.ov-root .admin-attention{margin:0;padding:0}
.ov-root .admin-cap{min-height:42px;padding:7px 14px;background:none;box-shadow:none}
.ov-root .admin-cap h2{font-size:14px}.ov-root .admin-cap .text-button{font-size:11px}
.ov-root .admin-attention-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px 14px}
.ov-root .admin-attention-grid a{flex-direction:row;align-items:baseline;gap:8px;padding:6px 9px;border:1px solid var(--u-well-edge)!important;border-radius:4px;background:var(--u-well-bg);box-shadow:var(--u-well-shadow);color:var(--muted);font-size:11px;text-decoration:none}
.ov-root .admin-attention-grid a:hover{border-color:var(--line)!important;color:var(--text)}
.ov-root .admin-attention-grid strong{font-size:15px;font-weight:600;color:var(--subtle);font-variant-numeric:tabular-nums}
.ov-root .admin-attention-grid strong.has-count{color:#f0d19b}
.ov-root .admin-attention-grid a svg{width:11px;height:11px;margin-left:auto;align-self:center;opacity:.6}
.ov-root .stage-pipe{gap:6px 18px;padding:7px 14px;background:var(--u-band-bg);font-size:10.5px}
.ov-root .admin-attention[data-quiet=true] .admin-attention-grid strong{color:var(--subtle)}
/* [claude-opus-5-5 2026-09-25] Embedded usage (node Traffic tab, operator overview). */
@layer refined {
  .usage-root[data-scope=fleet]{margin-top:18px}
  .u-embed-head{display:flex;align-items:baseline;gap:10px}.u-embed-head h2{font-size:18px!important;letter-spacing:-.3px}
  .fc-traffic .usage-root{gap:10px}
}
/* [claude-opus-5-5 2026-10-09] Pools & capacity > Abuse protection (guard_admin.js): the usage registers, wells and bands,
   with compact inline inputs for the guard's settings. Unlayered, like the access console it sits in. */
.guard-root{display:flex;flex-direction:column;gap:12px;margin-top:0}
.guard-root .u-pad{padding:10px 14px}
.guard-root .u-notice{margin-bottom:8px}
.guard-root .g-wells{grid-template-columns:repeat(5,minmax(0,1fr))}
.guard-settings{display:flex;flex-direction:column;gap:12px}
.guard-root .g-pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:start}
.guard-root .g-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:12px}
.guard-root .g-line label{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:12px;color:var(--text)}
.guard-root .g-box{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;white-space:nowrap}
.guard-root .g-num{display:inline-block;padding:3px 6px;font-size:12px;height:auto;margin:0 2px;font-variant-numeric:tabular-nums}
.guard-root .g-checks tbody th{max-width:0;width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guard-root .g-checks td{vertical-align:middle;white-space:nowrap}
.guard-root .g-checks tbody th,.guard-root .g-tune th{vertical-align:middle}
.guard-root .g-tune th{width:1%;font-weight:500;white-space:nowrap;padding-right:18px}
.guard-root .g-tune td{font-size:12px;color:var(--muted);white-space:nowrap}
.guard-root .u-band small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.guard-root .g-areas{display:grid;gap:10px}
.guard-root .g-area{display:block;margin:0}
.guard-root .g-area textarea{width:100%;min-height:62px;font-family:Consolas,Menlo,monospace;font-size:11.5px;resize:vertical}
.guard-root .g-learned{margin:0;border-top:1px solid var(--line);white-space:normal;line-height:1.5}
.guard-root .g-save{display:flex;align-items:center;gap:12px;padding:9px 14px;position:sticky;bottom:8px;z-index:3}
.guard-root .g-save .form-error:empty{display:none}
.guard-root .u-log-table td{vertical-align:middle}
.guard-root .g-log{table-layout:auto}
.guard-root .g-log td{white-space:nowrap}
.guard-root .g-log .g-who{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.guard-root .g-log .g-why{max-width:0;width:48%;overflow:hidden;text-overflow:ellipsis}
.guard-root .u-head select{width:auto;font-size:11.5px;padding:4px 26px 4px 8px}
@media (max-width:1100px){.guard-root .g-pair{grid-template-columns:minmax(0,1fr)}.guard-root .g-wells{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.guard-root .g-wells{grid-template-columns:repeat(2,minmax(0,1fr))}.guard-root .u-head{flex-wrap:wrap}.guard-root .g-checks{min-width:640px}.guard-root .g-log{min-width:720px}}
/* [claude-opus-5-5 2026-10-15] A person in the guard log who links to others through a device, fingerprint or mailbox. */
.guard-root .g-linked{color:var(--amber)}
.admin-network{margin-bottom:8px}