/* Admin InvoiceStack: struttura a schede con i colori del marchio.
   Niente ombre, bordi #e2e8f0, blu #0078ff per selezioni e riempimenti,
   inchiostro #192a3d per testo e pulsanti scuri. Inter self-hosted. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #f6f8fb; --surface: #fff; --ink: #192a3d; --text: #334155; --muted: #475569; --label: #64748b; --faint: #94a3b8;
  --border: #e2e8f0; --line: #eef2f6; --head: #fbfcfe; --input: #cbd5e1;
  --brand: #0078ff; --brand-text: #0062d1; --brand-soft: rgba(0,120,255,.1); --brand-light: #a5c8f5;
  --green: #15803d; --green-soft: #dcfce7; --red: #b91c1c; --red-soft: #fee2e2; --red-dot: #dc2626;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-text); text-decoration: none; }
a:hover { color: #004fa8; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2 { margin: 0; }
h2 { font-size: 14.5px; font-weight: 700; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 28px 20px 48px; }
.mono { font-family: ui-monospace, Consolas, "SF Mono", monospace; font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.label { color: var(--label); }
.faint { color: var(--faint); }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hidden { display: none !important; }

/* Intestazione e schede */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.admin-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); background: var(--brand-soft); border-radius: 999px; padding: 2px 8px; vertical-align: 3px; margin-left: 4px; }
.tagline { font-size: 12.5px; color: var(--muted); }
.top-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Pagina di login: una card centrata, stessi marchio e campi dell'admin */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px 20px; }
.login .brand { margin-bottom: 22px; }
.login-form { display: grid; gap: 14px; }
.login-form .btn { width: 100%; margin-top: 2px; }
.login-err { margin: 0; min-height: 20px; font-size: 13px; font-weight: 600; color: var(--red); }
.tabs { display: flex; gap: 4px; margin: 22px 0 18px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--brand); }
.count { font-size: 11px; font-weight: 700; background: var(--line); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.tabs a.on .count { background: var(--brand-soft); color: var(--brand-text); }
.newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red-dot); }

/* Pulsanti, chip, pillole */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--input); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--muted); color: var(--ink); }
.btn-dark { border: 0; background: var(--ink); color: #fff; }
.btn-dark:hover { background: #0f1d2d; color: #fff; }
.btn-lg { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { width: 30px; height: 30px; min-height: 0; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); }
.btn-icon:hover { border-color: var(--input); color: var(--ink); }
.btn-icon.danger { color: var(--red); }
.btn-icon.danger:hover { color: var(--red); border-color: #fca5a5; }
.btn-bare { border: 0; background: none; padding: 2px; color: var(--label); display: inline-flex; }
.btn-bare:hover { color: var(--ink); }
.link-btn { border: 0; background: none; padding: 0; color: var(--brand-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.link-btn:hover { color: #004fa8; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--muted); background: var(--surface); cursor: pointer; }
.chip:hover { border-color: var(--input); color: var(--ink); }
.chip.on { background: var(--brand-soft); border-color: transparent; color: var(--brand-text); }
.chip .n { opacity: .7; }
.chip-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.sq { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--line); color: var(--muted); white-space: nowrap; }
.pill-active, .pill-no_renew, .pill-processed, .pill-ok, .pill-on { background: var(--green-soft); color: var(--green); }
.pill-trial, .pill-received { background: #e0efff; color: var(--brand-text); }
.pill-renewal { background: #f3e8ff; color: #7c3aed; }
.pill-expired, .pill-excluded, .pill-zero { background: var(--line); color: var(--muted); }
.pill-refunded, .pill-error, .pill-revoked { background: var(--red-soft); color: var(--red); }
.pill-exhausted, .pill-off { background: #ffe4e6; color: #be123c; }
.pill-manual { background: #e0f2fe; color: #075985; }
.pill-past_due, .pill-skipped { background: #fef3c7; color: #92400e; }
.pill-no_renew .soft { opacity: .6; font-weight: 500; }

/* Card e pannelli */
.section-label { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.card b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.card b.good { color: var(--green); }
.card .sub { font-size: 12.5px; color: var(--muted); }
.card .sub b { font-size: inherit; letter-spacing: 0; font-weight: 700; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; overflow: hidden; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.panel-head .titles { display: flex; flex-direction: column; gap: 2px; }
.panel-head .desc { font-size: 12.5px; color: var(--muted); }
.panel-body { padding: 16px; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.two-col { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.two-col > .main { flex: 999 1 640px; min-width: 0; }
.two-col > .side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.two-col > .panel { margin-bottom: 0; }
.two-col .side .panel { margin-bottom: 0; }
.notice { border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; font-size: 13px; }
.notice-error { background: var(--red-soft); border: 1px solid #fca5a5; color: var(--red); font-weight: 600; }
.notice-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--ink); }
.notice-ok .tick { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #16a34a; color: #fff; flex: none; }
.notice-ok .titles { display: flex; flex-direction: column; gap: 2px; }
.notice-ok .titles b { font-size: 14px; }
.notice-ok .titles span { font-size: 12.5px; color: var(--muted); }
.notice-ok .keybox { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 8px 6px 12px; background: #fff; border: 1px solid #bbf7d0; border-radius: 9px; }
.notice-ok .keybox .mono { font-size: 13.5px; font-weight: 600; }
.btn-copy { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: #fff; border-radius: 7px; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.notice-ok .open { font-size: 13px; font-weight: 600; }

/* Tabelle */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label); padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--head); white-space: nowrap; }
td { padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--head); }
td.strong, .strong { font-weight: 600; color: var(--ink); }
#is-license-table th, #is-license-table td { padding-left: 10px; padding-right: 10px; }
tr.month-row td { background: #f8fafc; border-bottom: 1px solid var(--border); padding: 9px 14px; }
tr.month-row:hover td { background: #f8fafc; }
.month-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.month-head .name { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.month-head .tot { font-size: 12px; color: var(--label); }
tr.renewal td { background: #fbfaff; color: #6b7280; }
tr.renewal .plan { color: #7c3aed; }
tr.off { opacity: .45; }
tr.detail-row td { background: var(--head); padding: 0 14px 14px; white-space: normal; }
tr.detail-row:hover td { background: var(--head); }
tr.is-new td { background: #fffafa; }
pre.dark { margin: 0; padding: 12px 14px; background: #0f172a; color: #e2e8f0; border-radius: 10px; font-size: 11.5px; line-height: 1.55; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.empty { text-align: center; color: var(--faint); padding: 28px; white-space: normal; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex: none; }
.dot.yes { background: #16a34a; border: 2px solid #16a34a; }
.dot.no { background: #fff; border: 2px solid var(--red-dot); }
.key-cell { display: inline-flex; align-items: center; gap: 8px; }
/* Celle su due righe (Licenses): il dato principale sopra, il secondo sotto
   in piccolo. Cosi' la tabella sta nel riquadro senza scorrere. */
.stack { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.sub { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--label); }
.sub .mono { font-size: 11.5px; }
.stack-end { align-items: flex-end; }

/* Finestre modali (New license) */
dialog.modal {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
dialog.modal::backdrop { background: rgba(15, 23, 42, .35); }
dialog.modal-sm { width: min(460px, calc(100% - 32px)); }
.confirm-body { display: flex; flex-direction: column; gap: 10px; }
.confirm-body p { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.confirm-what { padding: 10px 12px; background: var(--head); border: 1px solid var(--border); border-radius: 10px; color: var(--ink) !important; font-size: 12.5px !important; overflow-wrap: anywhere; }
.confirm-body .form-foot { margin-top: 6px; }
.btn-danger { border: 0; background: var(--red); color: #fff; }
.btn-danger:hover { background: #991b1b; color: #fff; }
@media (max-width: 600px) { dialog.modal-sm { width: calc(100% - 32px); max-height: calc(100vh - 32px); margin: auto; border-radius: 16px; } }
dialog.modal .panel-head { position: sticky; top: 0; z-index: 1; background: var(--surface); flex-wrap: nowrap; align-items: flex-start; }
dialog.modal .panel-head .titles { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 600px) {
  dialog.modal { width: 100%; max-width: none; max-height: 100vh; margin: 0; border-radius: 0; }
}
/* Email al cliente: busta blu, pallino verde se gia' scritto, finestra */
.btn-icon.mail { color: var(--brand-text); position: relative; }
.btn-icon.mail:hover { color: var(--brand-text); border-color: var(--brand-light); }
.maildot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: #16a34a; border: 2px solid #fff; }
.title-actions { gap: 8px; margin-left: 4px; }
.title-actions .hint { font-size: 12.5px; color: var(--label); }
.mail-meta .field { font-weight: 400; }
.mail-meta .ft { font-size: 12px; font-weight: 600; color: var(--label); }
.mail-meta .val { font-size: 13px; overflow-wrap: anywhere; }
.mail-pickers { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.mail-pickers .chips { gap: 6px; }
.mail-pickers .chip { min-height: 34px; padding: 0 14px; font-size: 13px; }
.mail-pickers .hint { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--label); }
.notice-warn { margin: 0; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; font-size: 12.5px; color: #92400e; }
#is-email-message { font-size: 13.5px; line-height: 1.55; }
.sub.renew-renews { color: var(--green); }
.sub.renew-due { color: #b45309; }
.sub.renew-none { color: var(--faint); }
.email { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.credit-bar { display: block; width: 72px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.credit-bar > span { display: block; height: 100%; background: var(--brand); }
.credit-bar.low > span { background: var(--red-dot); }
.plan a { font-weight: 600; color: var(--ink); }
.plan a:hover { color: var(--brand-text); }
.inline-form { display: inline; margin: 0; }
.actions { display: inline-flex; gap: 4px; align-items: center; }
/* Azioni della riga a destra: matita e revoca restano nella stessa colonna
   anche nelle righe senza busta (trial, rimborsate, revocate). */
.td-actions { text-align: right; white-space: nowrap; }
/* Pulsante che in questa riga non si puo' usare: grigio, col motivo nel title */
.btn-icon.is-off { color: var(--faint, #94a3b8); opacity: .45; cursor: default; }
.btn-icon.is-off:hover { border-color: var(--border); color: var(--faint, #94a3b8); }
.star { color: var(--faint); cursor: help; }

/* Modifica inline */
tr.editing .view { display: none; }
tr .edit { display: none; }
tr.editing .edit { display: inline-flex; }
.inp { height: 30px; padding: 0 8px; border: 1px solid var(--input); border-radius: 8px; font-size: 12.5px; background: #fff; }
.inp:focus, .field input:focus, .field textarea:focus, .search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.inp.w70 { width: 70px; } .inp.w90 { width: 90px; } .inp.w180 { width: 180px; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

/* Barra ricerca e paginazione (Licenses) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--input); border-radius: 9px; padding: 0 12px; min-height: 36px; width: 240px; max-width: 100%; background: #fff; }
.search:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.search input { border: 0; outline: none; font-size: 13px; width: 100%; background: transparent; }
.search svg { color: var(--label); flex: none; }
.toolbar .push { margin-left: auto; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.pager-info { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pager-info select { height: 28px; border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pager-links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager-links button { min-width: 30px; text-align: center; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--ink); font-size: 13px; }
.pager-links button:hover { border-color: var(--input); }
.pager-links button.cur { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.pager-links button:disabled { color: #cbd5e1; cursor: default; border-color: var(--border); }
.pager-links .gap { color: var(--faint); padding: 0 4px; }

/* Grafico a barre (Dashboard) */
.legend { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .item { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 9px; height: 9px; border-radius: 3px; }
.range-nav { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; }
.range-nav a, .range-nav span.off { padding: 3px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); }
.range-nav span.off { color: var(--faint); }
.range-nav .cur { padding: 3px 6px; font-weight: 600; color: var(--ink); }
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 18px 16px 12px; align-items: end; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-val { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-track { height: 150px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--border); }
.bar-new { width: 46%; max-width: 26px; background: var(--brand); border-radius: 4px 4px 0 0; }
.bar-ren { width: 46%; max-width: 26px; background: var(--brand-light); }
.bar-lab { font-size: 11px; color: var(--label); }
.bar-col.now .bar-lab { color: var(--ink); font-weight: 700; }
.health a, .health .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.health a:hover { background: var(--head); }
.health > :last-child { border-bottom: 0; }
.health .pills { display: inline-flex; gap: 6px; }

/* Moduli (New license, PDF tester) */
.form { display: flex; flex-direction: column; gap: 20px; padding: 18px 16px 20px; }
.form fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.form legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); background: #fff; border: 1px solid var(--border); }
.choice label .meta { font-weight: 500; opacity: .75; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label:has(input:checked) { color: var(--ink); background: rgba(0,120,255,.08); border: 2px solid var(--pick, var(--brand)); padding: 0 13px; }
.choice label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.fields { display: grid; gap: 14px; }
.fields.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.field .opt { font-weight: 400; color: var(--label); margin-left: 2px; }
.field input, .field textarea { height: 38px; padding: 0 12px; border: 1px solid var(--input); border-radius: 9px; font-size: 13.5px; font-weight: 400; background: #fff; width: 100%; }
.field input.mono, .field textarea.mono { font-size: 13px; }
.field input:read-only { background: var(--head); color: var(--muted); }
.field textarea { height: auto; padding: 12px; line-height: 1.5; resize: vertical; }
.field .hint { font-weight: 400; color: var(--label); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.form-foot .recap { font-size: 12.5px; color: var(--label); }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.kv span:first-child { color: var(--muted); }
.result-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.api-line { font-size: 12.5px; color: var(--label); }
.api-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.api-form input { height: 34px; padding: 0 10px; border: 1px solid var(--input); border-radius: 8px; font-size: 12.5px; width: 280px; max-width: 100%; }

/* Dettaglio licenza */
.kv-table td:first-child { width: 140px; font-weight: 600; color: var(--muted); }
.kv-table td { white-space: normal; }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 14px; }
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.page-title h1 { font-size: 19px; letter-spacing: -.01em; }

.foot { font-size: 12px; color: var(--label); margin: 14px 2px 0; }

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields.c3, .fields.c2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding: 16px 16px 40px; }
  .brand-name { font-size: 17px; }
  .cards { grid-template-columns: 1fr; }
  .card b { font-size: 22px; }
  .fields.c3, .fields.c2 { grid-template-columns: 1fr; }
  .bars { gap: 4px; padding: 14px 10px 10px; }
  .bar-val { font-size: 9px; }
  .bar-lab { font-size: 10px; }
  .search { width: 100%; }
  .toolbar .push { margin-left: 0; }
  .notice-ok .keybox { margin-left: 0; }
}