/* AI usage & credits (views/ai-plans.js): a wide infographic board on a coloured glass background.
   Glass = translucent surface + blur over soft colour fields; chart colours are data colours (one per kind of work /
   option), kept apart from the UI accent. Light and dark follow the tokens. */
.ux { --g-surface: color-mix(in srgb, var(--surface) 64%, transparent); --g-line: color-mix(in srgb, #fff 55%, var(--line));
  --g-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset, 0 10px 30px -12px rgba(15, 23, 42, .18), 0 2px 6px -2px rgba(15, 23, 42, .06);
  display: grid; gap: 18px; max-width: 1680px; margin: 0 auto; position: relative; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ux { --g-surface: color-mix(in srgb, var(--surface) 58%, transparent); --g-line: color-mix(in srgb, #fff 10%, var(--line)); --g-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 32px -14px rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] .ux { --g-surface: color-mix(in srgb, var(--surface) 58%, transparent); --g-line: color-mix(in srgb, #fff 10%, var(--line)); --g-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 32px -14px rgba(0, 0, 0, .6); }

/* the colour fields the glass sits on */
.ux-glass { isolation: isolate; padding: 6px 2px 24px; }
.ux-glass::before { content: ''; position: absolute; inset: -40px -24px 0; z-index: -1; pointer-events: none; border-radius: 32px;
  background:
    radial-gradient(38% 30% at 8% 6%, color-mix(in srgb, #E0A526 30%, transparent), transparent 70%),
    radial-gradient(32% 28% at 92% 4%, color-mix(in srgb, #8B5CF6 24%, transparent), transparent 70%),
    radial-gradient(36% 30% at 60% 42%, color-mix(in srgb, #3B82F6 16%, transparent), transparent 72%),
    radial-gradient(34% 30% at 4% 70%, color-mix(in srgb, #14B8A6 20%, transparent), transparent 72%),
    radial-gradient(34% 30% at 96% 82%, color-mix(in srgb, #EC4899 16%, transparent), transparent 72%);
  filter: blur(8px); }

/* the landscape board: twelve columns, cards span 3 / 4 / 6 / 8 / 12 */
.ux-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.ux-board > * { grid-column: span 12; min-width: 0; }
.ux-board > .span-3 { grid-column: span 3; } .ux-board > .span-4 { grid-column: span 4; } .ux-board > .span-6 { grid-column: span 6; } .ux-board > .span-8 { grid-column: span 8; }
@media (max-width: 1280px) { .ux-board > .span-4 { grid-column: span 6; } .ux-board > .span-8 { grid-column: span 12; } .ux-board > .span-4.ux-center { grid-column: span 12; } }
@media (max-width: 1000px) { .ux-board > .span-3 { grid-column: span 6; } .ux-board > .span-6, .ux-board > .span-4 { grid-column: span 12; } }
@media (max-width: 560px) { .ux-board > .span-3 { grid-column: span 12; } }

/* glass cards */
.ux-card, .ux-tile, .ux-hero { background: var(--g-surface); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--g-line); border-radius: 20px; box-shadow: var(--g-shadow); }
.ux-card { padding: 20px 22px; }
.ux-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ux-card-h h3 { font-size: 15.5px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.ux-card-h p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ux-center { display: flex; flex-direction: column; }
.ux-center .ux-donut { margin: 4px auto 16px; }
.ux-h4 { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 18px 0 10px; }
.ux-empty { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.ux-dim { color: var(--muted); }

/* hero: the month at a glance */
.ux-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 28px; position: relative; overflow: hidden; }
.ux-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, color-mix(in srgb, #E0A526 14%, transparent), transparent 45%, color-mix(in srgb, #8B5CF6 10%, transparent)); }
.ux-hero > * { position: relative; z-index: 1; }
.ux-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 4px 10px; border-radius: 99px; }
.ux-hero h2 { margin: 10px 0 6px; font-size: 44px; font-weight: 650; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ux-hero h2 small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ux-hero p { margin: 0; color: var(--text-2); font-size: 13.5px; max-width: 640px; line-height: 1.5; }
.ux-hero-r { display: grid; gap: 12px; justify-items: end; }
.ux-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ux-hero-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 12px; border-radius: 99px; background: var(--g-surface); border: 1px solid var(--g-line); color: var(--text-2); }
.ux-hero-chips span b { color: var(--text); font-variant-numeric: tabular-nums; }
.ux-hero-chips span.warn { border-color: color-mix(in srgb, #F43F5E 50%, var(--line)); color: var(--neg-ink); }
@media (max-width: 900px) { .ux-hero { grid-template-columns: 1fr; justify-items: start; } .ux-hero-r { justify-items: start; } .ux-hero-chips { justify-content: flex-start; } }

/* coloured tiles */
.ux-tile { position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start; padding: 18px 20px 16px; min-height: 168px; }
.ux-tile::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, transparent)); }
.ux-tile::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); pointer-events: none; }
.ux-tile.is-warn { border-color: color-mix(in srgb, #F43F5E 55%, var(--line)); }
.ux-tile-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 6px 14px -6px var(--c); margin-bottom: 6px; }
.ux-tile-l { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ux-tile-v { font-size: 32px; font-weight: 650; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ux-tile-v small { font-size: 14px; color: var(--muted); font-weight: 500; }
.ux-tile-f { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ux-over { color: var(--neg-ink); font-weight: 600; }
.ux-spark { width: 100%; height: 40px; display: block; margin-top: 4px; }
.ux-meter { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; margin: 10px 0 4px; }
.ux-meter.sm { height: 5px; margin-top: 4px; max-width: 120px; }
.ux-meter i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--accent)) 60%, transparent), var(--c, var(--accent))); border-radius: inherit; }
.ux-meter.warm i { background: #F97316; }
.ux-meter.hot i { background: #F43F5E; }

/* segmented control and tabs */
.ux-seg, .ux-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--g-line); }
.ux-seg button, .ux-tabs button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.ux-seg button.on, .ux-tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.ux-tabs { flex-wrap: wrap; }
.ux-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ux-top p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 760px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ux-top2 { display: flex; justify-content: flex-end; }

/* charts */
.ux-chart { width: 100%; height: auto; display: block; }
.ux-grid { stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.ux-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.ux-hit { fill: transparent; }
.ux-col:hover .ux-hit { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.ux-avg line { stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .7; }
.ux-avg rect { fill: var(--surface); stroke: var(--line); }
.ux-avg text { fill: var(--text-2); font-size: 11px; font-weight: 600; font-family: inherit; }
.ux-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; font-size: 12.5px; color: var(--text-2); }
.ux-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ux-legend i, .ux-rank i, .ux-dot { width: 10px; height: 10px; border-radius: 4px; display: inline-block; flex: none; }
.ux-dot { margin-right: 8px; vertical-align: -1px; }
.ux-donut { position: relative; width: var(--s); height: var(--s); flex: none; }
.ux-donut svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .14)); }
.ux-donut circle[data-ux-tip] { transition: stroke-width .15s; cursor: default; }
.ux-donut circle[data-ux-tip]:hover { stroke-width: 32; }
.ux-track { stroke: color-mix(in srgb, var(--text) 7%, transparent); }
.ux-donut-c, .ux-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ux-donut-c b { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ux-donut-c small, .ux-ring-c small { color: var(--muted); font-size: 11.5px; max-width: 90px; line-height: 1.3; }
.ux-ring { position: relative; width: var(--s); height: var(--s); flex: none; }
.ux-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c) 30%, transparent)); }
.ux-ring-c b { font-size: calc(var(--s) * 0.2); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ux-ring-c b small { font-size: .55em; color: var(--muted); }
.ux-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ux-rank li { display: grid; grid-template-columns: 10px 1fr auto 44px; gap: 8px; align-items: center; font-size: 13px; }
.ux-rank b { font-variant-numeric: tabular-nums; }
.ux-rank em { font-style: normal; color: var(--muted); text-align: right; font-size: 12px; }
.ux-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.ux-rings.sm { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); margin-top: 6px; }
.ux-ringcell { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 40%, transparent); }
.ux-ringcell b { font-size: 13px; }
.ux-ringcell b em { font-style: normal; color: var(--muted); font-weight: 500; }
.ux-ringcell small { color: var(--muted); font-size: 12px; }

/* running now / recent work */
.ux-live, .ux-pulse { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; display: inline-block; flex: none; animation: ux-pulse 1.8s infinite; }
@keyframes ux-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .ux-live, .ux-pulse { animation: none; } }
.ux-run { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ux-run li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 45%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ux-run-t { min-width: 0; }
.ux-run-t b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-run-t small, .ux-run-n small { color: var(--muted); font-size: 11.5px; }
.ux-run-n { text-align: right; }
.ux-run-n b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }

/* options per feature: two columns of feature rows with coloured pills */
.ux-optkey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ux-optkey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-optkey > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.ux-optkey b { font-size: 13.5px; }
.ux-optkey b em { font-style: normal; color: var(--c); margin-left: 4px; }
.ux-optkey small { color: var(--text-2); font-size: 12px; line-height: 1.4; }
.ux-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1280px) { .ux-feats { grid-template-columns: 1fr; } }
.ux-feat { display: grid; grid-template-columns: minmax(170px, 0.9fr) minmax(0, 1.6fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 45%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ux-feat-t { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
.ux-feat-t .ux-dot { margin-top: 4px; }
.ux-feat-t b { display: block; font-size: 13px; }
.ux-feat-t small { display: block; color: var(--muted); font-size: 11.5px; }
@media (max-width: 700px) { .ux-feat { grid-template-columns: 1fr; } }
.ux-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.ux-pills button { display: grid; gap: 1px; text-align: left; border: 0; border-radius: 9px; padding: 6px 9px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; min-width: 0; }
.ux-pills button span { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-pills button small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ux-pills button:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 12%, transparent); }
.ux-pills button.on { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 75%, #000)); color: #fff; box-shadow: 0 6px 14px -8px var(--c); }
.ux-pills button.on small { color: rgba(255, 255, 255, .85); }
.ux-pills button:disabled { cursor: default; opacity: .5; }
.ux-pills button.on:disabled { opacity: 1; }

/* tables (admin) */
.ux-tbl-wrap { overflow-x: auto; }
.ux-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ux-tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ux-tbl td { padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); vertical-align: middle; }
.ux-tbl tr:last-child td { border-bottom: 0; }
.ux-tbl td small { display: block; color: var(--muted); font-size: 12px; }
.ux-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.ux-tbl tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.ux-tbl code { font-size: 12px; }
.ux-tbl .ux-seg { flex-wrap: nowrap; }
.ux-tbl .ux-seg button { padding: 5px 10px; font-size: 12.5px; }
.ux-tbl .ux-switch.sm span { white-space: nowrap; }
.ux-tbl td:first-child b { white-space: nowrap; }
.ux-tbl .ux-num + small { display: block; margin-top: 2px; }
.ux-mbar { display: inline-grid; grid-template-columns: 70px 40px; gap: 8px; align-items: center; }
.ux-mbar i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #22C55E var(--w), color-mix(in srgb, var(--text) 8%, transparent) var(--w)); }
.ux-mbar.neg i { background: #F43F5E; }
.ux-mbar b { font-weight: 600; text-align: right; }

/* admin forms */
.ux-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
.ux-badge.on { background: color-mix(in srgb, #22C55E 18%, transparent); color: #15803d; }
.ux-badge.dev { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.ux-badge.warn { background: color-mix(in srgb, #F97316 20%, transparent); color: #9a4a12; }
.ux-route { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, #3B82F6 14%, transparent); color: #1d4ed8; white-space: nowrap; }
.ux-route.local { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.ux-in { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); width: 100%; min-width: 0; }
.ux-in:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; border-color: var(--accent); }
.ux-num { max-width: 110px; }
.ux-fld { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.ux-fld small { color: var(--muted); }
.ux-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ux-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ux-row { display: flex; gap: 12px; margin-top: 14px; max-width: 280px; }
.ux-card .ux-seg { flex-wrap: wrap; margin-bottom: 14px; }
.ux-routes { display: grid; gap: 10px; }
.ux-routerow { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 14px; align-items: end; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 45%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); box-shadow: inset 4px 0 0 var(--c); }
.ux-routename { display: grid; gap: 3px; align-self: center; }
.ux-routename b { font-size: 13.5px; }
.ux-routename small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ux-routerow .ux-fld > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .ux-routerow { grid-template-columns: 1fr; } }
.ux-switches { display: grid; gap: 14px; }
.ux-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.ux-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ux-switch > i { width: 40px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); position: relative; flex: none; transition: background .15s; }
.ux-switch > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.ux-switch input:checked + i { background: linear-gradient(135deg, #22C55E, #15803d); }
.ux-switch input:checked + i::after { transform: translateX(18px); }
.ux-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.ux-switch span { display: grid; gap: 2px; }
.ux-switch small { color: var(--muted); font-size: 12px; }
.ux-switch.sm { align-items: center; }
.ux-switch.sm > i { width: 32px; height: 18px; }
.ux-switch.sm > i::after { width: 12px; height: 12px; }
.ux-switch.sm input:checked + i::after { transform: translateX(14px); }
.ux-allow { min-width: 300px; }
.ux-chip { display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0; padding: 3px 10px 3px 6px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.ux-chip input { accent-color: var(--c); margin: 0; }
.ux-chip:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ux-margins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .ux-margins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-margin { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.ux-margin label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ux-margin .ux-in { max-width: 90px; }
.ux-credit small { color: var(--muted); font-size: 12px; }
.ux-credit-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin: 8px 0 4px; gap: 2px; }
.ux-credit-bar.big { height: 12px; }
.ux-credit-bar i { background: #64748B; }
.ux-credit-bar em { background: var(--c); }

/* hover card */
.ux-tipbox { position: fixed; z-index: 9999; pointer-events: none; max-width: 300px; padding: 10px 13px; border-radius: 12px; color: #fff; font-size: 12.5px; line-height: 1.45;
  background: rgba(15, 23, 42, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.ux-tipbox b { display: block; margin-bottom: 2px; }
.ux-tipbox span { opacity: .85; }
.ux-tipbox[hidden] { display: none; }
/* Settings pages sit in a narrow column; the usage board uses the full width of the screen (landscape) */
.page-narrow:has(> .ux) { max-width: none; }
/* option names wrap rather than being cut (the pills are narrow in the two-column landscape layout) */
.ux-pills button span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; font-size: 11.5px; }
.ux-pills button { align-content: start; }