.ui-responsive-split { position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
/* The track is moved by hand in a drag, so its markup has no style attribute, and the width goes on the outer element: one would be written again on any change, and the drag would jump home. */
.ui-responsive-split-track { display: flex; width: 200%; height: 100%; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.ui-responsive-split-pane { box-sizing: border-box; display: flex; flex-direction: column; flex: none; width: 50%; min-width: 0; height: 100%; min-height: 0; background: var(--ui-bg); }
/* visibility, so that a pane out of sight keeps its scroll and leaves the tab order and screen readers. */
.ui-responsive-split-detailing .ui-responsive-split-track { transform: translateX(-50%); }
.ui-responsive-split-detailing .ui-responsive-split-side { visibility: hidden; transition: visibility 0s .26s; }
.ui-responsive-split:not(.ui-responsive-split-detailing) .ui-responsive-split-main { visibility: hidden; transition: visibility 0s .26s; }
.ui-responsive-split-dragging .ui-responsive-split-track { transition: none; user-select: none; -webkit-user-select: none; }
.ui-responsive-split-dragging .ui-responsive-split-pane { visibility: visible !important; transition: none !important; }
.ui-responsive-split-head {
  display: flex; align-items: center; gap: 4px; flex: none; min-height: 52px; box-sizing: content-box; padding: var(--ui-safe-top, env(safe-area-inset-top, 0px)) 12px 0 var(--ui-responsive-split-left, 16px); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-responsive-split-head h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ui-responsive-split-head h2:focus { outline: none; }
.ui-responsive-split-side .ui-responsive-split-head { padding-left: max(16px, var(--ui-safe-left, env(safe-area-inset-left, 0px))); }
.ui-responsive-split-main .ui-responsive-split-head { padding-left: max(4px, var(--ui-safe-left, env(safe-area-inset-left, 0px))); }
.ui-responsive-split-back {
  display: inline-flex; align-items: center; gap: 2px; flex: none; min-width: 44px; min-height: 44px; padding: 0 10px 0 4px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: 500 15px/1 var(--ui-font); cursor: pointer;
}
.ui-responsive-split-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-responsive-split-back svg { width: 22px; height: 22px; }
.ui-responsive-split-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px)); }
.ui-responsive-split-rows { margin: 0; padding: 0; list-style: none; }
.ui-responsive-split-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; box-sizing: border-box; width: 100%; min-height: 60px;
  padding: 9px 12px 9px max(16px, var(--ui-safe-left, env(safe-area-inset-left, 0px))); border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ui-responsive-split-row:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-responsive-split-row b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-responsive-split-row small { grid-column: 1; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-responsive-split-row i { grid-row: 1 / 3; grid-column: 2; color: var(--ui-muted); font: 13px/1.3 var(--ui-font); }
.ui-responsive-split-row[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-responsive-split-body { padding: 16px max(16px, var(--ui-safe-right, env(safe-area-inset-right, 0px))) 24px 16px; }
.ui-responsive-split-body > div > :first-child { margin-top: 0; }
.ui-responsive-split-text { margin: 0 0 16px; white-space: pre-line; }
.ui-responsive-split-none { padding: 40px 24px; color: var(--ui-muted); text-align: center; }
/* Sideways is the edge drag's. A text box or a wide table in the detail still pans by itself, so a drag begun on one is that box's. */
.ui-responsive-split-body { box-sizing: border-box; min-height: 100%; touch-action: pan-y; }
.ui-responsive-split-dragging .ui-responsive-split-scroll { overflow: hidden; }
@container (min-width: 640px) {
  .ui-responsive-split-track { width: 100%; transform: none !important; transition: none; }
  .ui-responsive-split-pane { visibility: visible !important; transition: none; }
  .ui-responsive-split-side { width: var(--ui-responsive-split-width, 320px); max-width: 45%; border-right: 1px solid var(--ui-border); }
  .ui-responsive-split-main { flex: 1; width: auto; }
  .ui-responsive-split-back { display: none; }
  .ui-responsive-split-main .ui-responsive-split-head { padding-left: 20px; }
  .ui-responsive-split-body { padding-left: 20px; padding-right: max(20px, var(--ui-safe-right, env(safe-area-inset-right, 0px))); }
}
@media (hover: hover) {
  .ui-responsive-split-row:hover { background: var(--ui-subtle); }
  .ui-responsive-split-row[aria-current="true"]:hover { background: var(--ui-accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-responsive-split-track { transition: none; }
  .ui-responsive-split-detailing .ui-responsive-split-side, .ui-responsive-split:not(.ui-responsive-split-detailing) .ui-responsive-split-main { transition: none; }
}


.ui-tagcloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding: 0; list-style: none;
  font-family: var(--ui-font); line-height: 1.2; --t: var(--ui-accent); }
.ui-tagcloud-neutral { --t: var(--ui-fg); }
.ui-tagcloud-tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 4px; border-radius: 4px;
  color: color-mix(in srgb, var(--t) var(--ui-tagcloud-mix), var(--ui-muted)); text-decoration: none; }
a.ui-tagcloud-tag:hover { background: color-mix(in srgb, var(--t) 10%, transparent); text-decoration: underline; }
a.ui-tagcloud-tag:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tagcloud-tag[aria-current="true"] { background: var(--t); color: var(--ui-bg); }
.ui-tagcloud-s1 { font-size: 13px; font-weight: 400; --ui-tagcloud-mix: 45%; }
.ui-tagcloud-s2 { font-size: 15px; font-weight: 450; --ui-tagcloud-mix: 60%; }
.ui-tagcloud-s3 { font-size: 18px; font-weight: 500; --ui-tagcloud-mix: 72%; }
.ui-tagcloud-s4 { font-size: 22px; font-weight: 600; --ui-tagcloud-mix: 86%; }
.ui-tagcloud-s5 { font-size: 27px; font-weight: 650; --ui-tagcloud-mix: 100%; }
.ui-tagcloud-n { color: var(--ui-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ui-tagcloud-tag[aria-current="true"] .ui-tagcloud-n { color: inherit; opacity: .8; }


.ui-amount-pad { container-type: inline-size; min-width: 0; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-amount-pad-body { display: grid; gap: 14px; min-width: 0; }
.ui-amount-pad-show { display: grid; gap: 4px; min-width: 0; justify-items: center; text-align: center; }
.ui-amount-pad-label { color: var(--ui-muted); font-weight: 500; }
.ui-amount-pad-figure { max-width: 100%; font-weight: 700; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: min(52px, calc(150cqi / var(--chars))); }
.ui-amount-pad-zero { color: var(--ui-muted); }
.ui-amount-pad-note { min-height: 21px; margin: 0; color: var(--ui-muted); }
.ui-amount-pad-note[data-bad] { color: var(--ui-danger); }
.ui-amount-pad-shake-1 .ui-amount-pad-figure { animation: ui-amount-pad-shake-a .36s ease-in-out; }
.ui-amount-pad-shake-2 .ui-amount-pad-figure { animation: ui-amount-pad-shake-b .36s ease-in-out; }
/* Two names for one shake: changing the class is what starts it again. */
@keyframes ui-amount-pad-shake-a { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes ui-amount-pad-shake-b { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes ui-amount-pad-flash-a { 50% { color: var(--ui-danger); } }
@keyframes ui-amount-pad-flash-b { 50% { color: var(--ui-danger); } }
.ui-amount-pad-done {
  width: 100%; min-height: 50px; margin: 0; border: 0; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 17px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-amount-pad-done:disabled { opacity: .5; cursor: not-allowed; }
.ui-amount-pad-done:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) {
  .ui-amount-pad-shake-1 .ui-amount-pad-figure { animation-name: ui-amount-pad-flash-a; }
  .ui-amount-pad-shake-2 .ui-amount-pad-figure { animation-name: ui-amount-pad-flash-b; }
}
@container (min-width: 440px) {
  .ui-amount-pad-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 16px; }
  .ui-amount-pad-show { grid-row: span 2; }
  .ui-amount-pad-figure { font-size: min(48px, calc(66cqi / var(--chars))); }
}


.ui-delivery { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-delivery svg { flex: none; width: 20px; height: 20px; color: var(--ui-success); }
.ui-delivery-when { font-weight: 600; }
.ui-delivery-cutoff { color: var(--ui-muted); }
.ui-delivery-sm { font-size: 13px; gap: 6px; }
.ui-delivery-sm svg { width: 16px; height: 16px; }


.ui-rsi { --ui-rsi-line: light-dark(#6250d6, #9085e9); --ui-rsi-price: light-dark(#2a78d6, #3987e5);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-rsi-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-rsi-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-rsi-plot { position: relative; }
.ui-rsi-pane, .ui-rsi-yp { position: relative; height: var(--h); }
.ui-rsi-ipane, .ui-rsi-yi { position: relative; height: var(--ih); }
.ui-rsi-pane + .ui-rsi-ipane, .ui-rsi-yp + .ui-rsi-yi { margin-top: 18px; }
.ui-rsi-name { position: absolute; z-index: 1; top: 2px; left: 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; pointer-events: none; }
.ui-rsi-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-rsi-band { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--ui-rsi-line) 8%, transparent); }
.ui-rsi-level { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ui-strong); }
.ui-rsi-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-rsi-svg path { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ui-rsi-price { stroke: var(--ui-rsi-price); }
.ui-rsi-fill { fill: var(--ui-rsi-price) !important; stroke: none; opacity: .08; }
.ui-rsi-line { stroke: var(--ui-rsi-line); }
.ui-rsi-hot path { stroke: var(--ui-danger); }
.ui-rsi-cold path { stroke: var(--ui-success); }
.ui-rsi-cols { position: absolute; inset: 0; display: flex; }
.ui-rsi-col { position: relative; flex: 1; min-width: 0; }
.ui-rsi-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-rsi-col:hover::before { opacity: .9; }
.ui-rsi-dot { position: absolute; left: 50%; display: none; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-rsi-dp { --c: var(--ui-rsi-price); } .ui-rsi-di { --c: var(--ui-rsi-line); }
.ui-rsi-col:hover .ui-rsi-dot { display: block; }
.ui-rsi-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 140px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-rsi-flip .ui-rsi-tip { left: auto; right: calc(50% + 10px); }
.ui-rsi-col:hover .ui-rsi-tip { display: block; }
.ui-rsi-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-rsi-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-rsi-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-rsi-tip .ui-rsi-state { color: var(--ui-muted); font-size: 11px; }
.ui-rsi-tip .ui-rsi-over { color: var(--ui-danger); } .ui-rsi-tip .ui-rsi-under { color: var(--ui-success); }
.ui-rsi-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-rsi-y .ui-rsi-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--c); color: var(--ui-bg); font-weight: 600; }
.ui-rsi-x { position: relative; height: 16px; margin-top: 6px; }
.ui-rsi-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-rsi-x .ui-rsi-first { transform: none; }
.ui-rsi-x .ui-rsi-end { transform: translateX(-100%); }


.ui-composer-bar { position: sticky; bottom: 0; z-index: 3; container-type: inline-size; min-width: 0; font: 16px/22px var(--ui-font); color: var(--ui-fg); }
.ui-composer-bar-lifted {
  position: relative; display: grid; gap: 6px; padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-border); background: var(--ui-surface); transform: translateY(calc(-1 * var(--ui-composer-bar-lift, 0px)));
}
.ui-composer-bar-up .ui-composer-bar-lifted { padding-bottom: 8px; }
.ui-composer-bar-top:empty { display: none; }
.ui-composer-bar-row { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.ui-composer-bar-field {
  flex: 1; display: block; box-sizing: border-box; min-width: 0; height: 44px; margin: 0; padding: 10px 14px; resize: none; overflow-y: hidden;
  border: 1px solid var(--ui-border); border-radius: 22px; background: var(--ui-bg); color: var(--ui-fg); font: inherit;
  overscroll-behavior: contain; -webkit-appearance: none; appearance: none;
}
.ui-composer-bar-field[hidden] { display: none; }
.ui-composer-bar-field::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-composer-bar-field:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-composer-bar-field:disabled { opacity: .55; }
.ui-composer-bar-btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: manipulation;
}
.ui-composer-bar-btn svg { width: 24px; height: 24px; transition: transform .15s; }
.ui-composer-bar-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-composer-bar-btn:disabled { opacity: .5; cursor: default; }
.ui-composer-bar-plus[aria-expanded="true"] svg { transform: rotate(45deg); }
.ui-composer-bar-main { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-composer-bar-main.ui-composer-bar-voice { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-composer-bar-stop { background: var(--ui-danger-soft); color: var(--ui-danger); }
@media (hover: hover) { .ui-composer-bar-btn:hover:not(:disabled) { color: var(--ui-fg); background: var(--ui-subtle); } .ui-composer-bar-main:hover:not(:disabled):not(.ui-composer-bar-voice) { color: var(--ui-accent-fg); background: var(--ui-accent); } }
.ui-composer-bar-rec { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.ui-composer-bar-rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-danger); animation: ui-composer-bar-beat 1.2s infinite; }
@keyframes ui-composer-bar-beat { 50% { opacity: .3; } }
.ui-composer-bar-note { margin: 0; padding: 0 8px; color: var(--ui-muted); font-size: 13px; line-height: 18px; }
.ui-composer-bar-note:empty { display: none; }
.ui-composer-bar-count { margin: 0; padding: 0 8px; color: var(--ui-muted); font-size: 12px; line-height: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-composer-bar-count-full { color: var(--ui-danger); }
.ui-composer-bar-settings { min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-composer-bar-files { display: flex; gap: 8px; margin: 0; padding: 2px; overflow-x: auto; list-style: none; overscroll-behavior-x: contain; scrollbar-width: none; }
.ui-composer-bar-file {
  position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; line-height: 14px;
}
.ui-composer-bar-file img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-composer-bar-file span { display: block; padding: 6px 4px 0; overflow-wrap: anywhere; }
.ui-composer-bar-drop {
  position: absolute; top: 0; right: 0; display: grid; place-items: start end; width: 44px; height: 44px; padding: 2px; border: 0;
  background: transparent; color: #fff; cursor: pointer;
}
.ui-composer-bar-drop svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(15, 14, 24, .7); }
.ui-composer-bar-drop:focus-visible { outline: none; }
.ui-composer-bar-drop:focus-visible svg { box-shadow: var(--ui-focus); }
.ui-composer-bar-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-composer-bar-way {
  display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--ui-radius);
  background: var(--ui-subtle); color: var(--ui-fg); font: 500 13px/18px var(--ui-font); cursor: pointer;
}
.ui-composer-bar-way svg { width: 22px; height: 22px; color: var(--ui-accent); }
.ui-composer-bar-way:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-composer-bar-pickers { display: none; }
/* A tablet has room to leave the box alone: the tray is a card by the +, not a row under it. */
@container (min-width: 600px) {
  .ui-composer-bar-tray {
    position: absolute; left: 8px; bottom: calc(100% + 6px); width: 300px; padding: 8px; border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
  }
  .ui-composer-bar-lifted { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ui-composer-bar-btn svg { transition: none; } .ui-composer-bar-rec i { animation: none; } }


.ui-offline-host { display: contents; }
.ui-offline { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ui-warning-soft); color: var(--ui-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--ui-warning) 35%, transparent); font: 14px/1.45 var(--ui-font); }
.ui-offline-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 60; box-shadow: var(--ui-shadow); animation: ui-offline-in .2s ease-out; }
.ui-offline-flow { border: 1px solid color-mix(in srgb, var(--ui-warning) 35%, transparent); border-radius: var(--ui-radius-sm); }
.ui-offline-icon { flex: none; width: 20px; height: 20px; color: var(--ui-warning); }
.ui-offline-body { flex: 1; min-width: 0; }
.ui-offline-title { font-weight: 600; margin-right: 6px; }
.ui-offline-text { color: color-mix(in srgb, var(--ui-fg) 80%, transparent); }
.ui-offline-btn { flex: none; height: 30px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--ui-warning) 45%, var(--ui-border));
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-offline-btn:hover { background: var(--ui-subtle); }
.ui-offline-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: inherit; font-size: 20px; line-height: 1; opacity: .7; cursor: pointer; }
.ui-offline-x:hover { opacity: 1; background: color-mix(in srgb, var(--ui-warning) 18%, transparent); }
.ui-offline-btn:focus-visible, .ui-offline-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@keyframes ui-offline-in { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .ui-offline-sticky { animation: none; } }


.ui-three-col {
  position: relative; box-sizing: border-box; min-width: 0; height: 100%; overflow: hidden; container: ui-three-col / inline-size;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 var(--ui-font);
}
.ui-three-col-grid { position: relative; display: grid; height: 100%; min-height: 0; grid-template-columns: 220px 320px minmax(0, 1fr); }
.ui-three-col-col { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 0; background: var(--ui-bg); }
.ui-three-col-side { background: var(--ui-subtle); border-right: 1px solid var(--ui-border); }
.ui-three-col-list { border-right: 1px solid var(--ui-border); }
.ui-three-col-head {
  display: flex; align-items: center; gap: 4px; flex: none; min-height: 52px; box-sizing: border-box;
  padding: max(3px, env(safe-area-inset-top)) 8px 3px; border-bottom: 1px solid var(--ui-border);
}
.ui-three-col-head h2 { flex: 1; min-width: 0; margin: 0; padding: 0 6px; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.ui-three-col-go {
  display: none; align-items: center; gap: 2px; flex: none; min-width: 44px; min-height: 44px; max-width: 45%; box-sizing: border-box; padding: 0 8px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 15px/1.2 var(--ui-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ui-three-col-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* touch-action stops at a scroller, so a column's pan-y must be said here too. */
.ui-three-col-scroll { flex: 1; min-height: 0; overflow: auto; overflow-anchor: none; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }
.ui-three-col-folder {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 14px; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-three-col-folder[aria-current="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; }
.ui-three-col-folder small { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-three-col-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; box-sizing: border-box; width: 100%; min-height: 72px; padding: 10px 14px; border: 0;
  border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-three-col-row[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-three-col-row b { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-three-col-row small { color: var(--ui-muted); font-size: 13px; }
.ui-three-col-row span { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--ui-muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ui-three-col-unread b { font-weight: 700; }
.ui-three-col-unread b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ui-accent); vertical-align: 1px; }
.ui-three-col-folder:focus-visible, .ui-three-col-row:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
@media (hover: hover) { .ui-three-col-folder:hover, .ui-three-col-row:hover { background: var(--ui-subtle); } .ui-three-col-go:hover { background: var(--ui-subtle); } }
.ui-three-col-none { margin: 0; padding: 32px 20px; color: var(--ui-muted); text-align: center; }
.ui-three-col-item { padding: 16px 20px 28px; }
.ui-three-col-item p { margin: 0 0 12px; }
.ui-three-col-meta { color: var(--ui-muted); font-size: 14px; }
.ui-three-col-scrim { display: none; position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: var(--ui-overlay); }
@container ui-three-col (max-width: 959.98px) {
  .ui-three-col-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .ui-three-col-side {
    position: absolute; inset: 0 auto 0 0; z-index: 3; width: min(300px, 80%); box-shadow: var(--ui-shadow-lg); transform: translateX(-105%); visibility: hidden;
    touch-action: pan-y;
  }
  .ui-three-col[data-depth="0"] .ui-three-col-side { transform: none; visibility: visible; }
  .ui-three-col[data-depth="0"] .ui-three-col-scrim { display: block; }
  /* Out of sight only once it has slid away, and in sight at once, so the focus can go there. */
  .ui-three-col-moving .ui-three-col-side { transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s; }
  .ui-three-col-moving[data-depth="0"] .ui-three-col-side { transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .ui-three-col-go-folders { display: inline-flex; }
}
@container ui-three-col (max-width: 599.98px) {
  .ui-three-col-grid { display: block; }
  .ui-three-col-col { position: absolute; inset: 0; width: 100%; border: 0; touch-action: pan-y; visibility: hidden; box-shadow: none; }
  .ui-three-col-side { z-index: 0; transform: translateX(-30%); }
  .ui-three-col-list { z-index: 1; transform: translateX(100%); }
  .ui-three-col-detail { z-index: 2; transform: translateX(100%); }
  .ui-three-col[data-depth="0"] .ui-three-col-side { transform: none; visibility: visible; }
  .ui-three-col[data-depth="1"] .ui-three-col-side { transform: translateX(-30%); }
  .ui-three-col[data-depth="1"] .ui-three-col-list { transform: none; visibility: visible; }
  .ui-three-col[data-depth="2"] .ui-three-col-list { transform: translateX(-30%); }
  .ui-three-col[data-depth="2"] .ui-three-col-detail { transform: none; visibility: visible; }
  .ui-three-col[data-depth="0"] .ui-three-col-scrim { display: none; }
  .ui-three-col-peek .ui-three-col-col { visibility: visible; }
  .ui-three-col-moving .ui-three-col-col { transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
  .ui-three-col-moving[data-depth="0"] .ui-three-col-side, .ui-three-col-moving[data-depth="1"] .ui-three-col-list,
  .ui-three-col-moving[data-depth="2"] .ui-three-col-detail { transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .ui-three-col-go-back { display: inline-flex; }
  .ui-three-col-go-close { display: none !important; }
}
.ui-three-col-go-close { display: none; }
@container ui-three-col (max-width: 959.98px) { .ui-three-col-go-close { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .ui-three-col-col { transition: none !important; } }


.ui-bseo { display: grid; gap: 16px; min-width: 0; max-width: 640px; margin: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-bseo-field { display: grid; gap: 6px; }
.ui-bseo-label { font-weight: 600; }
.ui-bseo-field input, .ui-bseo-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); resize: vertical; }
.ui-bseo-field input:focus, .ui-bseo-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bseo-count { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; color: var(--ui-muted); font-size: 12px; --k: var(--ui-muted); }
.ui-bseo-count b { color: var(--k); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-bseo-meter { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ui-subtle); }
.ui-bseo-meter span { display: block; height: 100%; background: var(--k); transition: width .15s; }
.ui-bseo-good { --k: var(--ui-success); } .ui-bseo-long { --k: var(--ui-danger); } .ui-bseo-short { --k: var(--ui-warning); }
.ui-bseo-tabs { display: inline-flex; gap: 2px; justify-self: start; padding: 3px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-bseo-tabs button { height: 28px; padding: 0 12px; border: 0; border-radius: calc(var(--ui-radius-sm) - 2px); background: none; color: var(--ui-muted);
  font: 600 13px var(--ui-font); cursor: pointer; }
.ui-bseo-tabs button[aria-selected="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ui-bseo-tabs button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseo-panel { padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); }
.ui-bseo-result { display: grid; gap: 3px; max-width: 600px; }
.ui-bseo-site { display: flex; align-items: center; gap: 10px; }
.ui-bseo-favicon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-accent);
  font-size: 12px; font-weight: 700; }
.ui-bseo-site span { display: grid; line-height: 1.3; }
.ui-bseo-site small { color: var(--ui-muted); font-size: 12px; }
.ui-bseo-result-title { margin: 4px 0 0; color: var(--ui-info); font-size: 19px; font-weight: 400; line-height: 1.3; }
.ui-bseo-result-text { margin: 0; color: var(--ui-muted); font-size: 13.5px; }
.ui-bseo-none { font-style: italic; }
.ui-bseo-card { max-width: 500px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-bseo-card-pic { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: var(--ui-subtle); }
.ui-bseo-card-blank { display: grid; place-items: center; color: var(--ui-strong); font-size: 40px; font-weight: 800;
  background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-subtle)); }
.ui-bseo-card-body { display: grid; gap: 2px; padding: 10px 14px 12px; border-top: 1px solid var(--ui-border); }
.ui-bseo-card-body small { color: var(--ui-muted); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.ui-bseo-card-body b { overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ui-bseo-card-body span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ui-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-bseo-meter span { transition: none; } }


.ui-fxcross { min-width: 0; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 13px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-fxcross-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-fxcross-table caption { padding: 12px 14px 4px; text-align: left; font-size: 14px; font-weight: 650; }
.ui-fxcross-table caption small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-fxcross-table th, .ui-fxcross-table td { padding: 9px 12px; text-align: right; white-space: nowrap; }
.ui-fxcross-table thead th { border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 650; letter-spacing: .03em; }
.ui-fxcross-table tbody th { border-right: 1px solid var(--ui-border); text-align: left; font-weight: 650; }
.ui-fxcross-table .ui-fxcross-corner { text-align: left; font-weight: 400; font-size: 11px; }
.ui-fxcross-table tbody tr:not(:last-child) > * { border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-fxcross-table td:hover { background: var(--ui-subtle); }
.ui-fxcross-self { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--ui-border) 45%, transparent) 5px 6px); }
.ui-fxcross-table .ui-fxcross-hl { background: var(--ui-accent-soft); }
.ui-fxcross-table th.ui-fxcross-hl { color: var(--ui-accent); }
.ui-fxcross-base { margin-left: 4px; padding: 0 5px; border-radius: 3px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 10px; font-weight: 600; }


.ui-scanct { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-scanct h3 { margin: 0; font-size: 18px; }
.ui-scanct-cols { display: grid; gap: 12px; min-width: 0; }
.ui-scanct-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-scanin { display: grid; gap: 8px; min-width: 0; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-scanin-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin: 0; }
.ui-scanin-form label { display: grid; gap: 2px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-scanin-form input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 12px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 17px var(--ui-mono); }
.ui-scanin-form input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-scanin-view { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--ui-radius); background: #0f0e17; color: #fff; aspect-ratio: 16 / 9; }
.ui-scanin-view[hidden] { display: none; }
.ui-scanin-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-scanin-aim { position: absolute; inset: 22% 8%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px; pointer-events: none; }
.ui-scanin-aim::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #ff5a5a; }
.ui-scanin-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-scanin-acts > * { flex: 1 1 110px; }
.ui-scanin-msg { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-scanin-msg:empty { display: none; }
.ui-scanct-said { display: grid; align-content: center; min-height: 64px; margin: 0; padding: 8px 12px; border-left: 6px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.ui-scanct-said[data-kind="good"] { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-scanct-said[data-kind="over"] { border-color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-scanct-said[data-kind="bad"] { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-scanct-bar { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.ui-scanct-times { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 14px; }
.ui-scanct-times input { box-sizing: border-box; width: 72px; height: 46px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-mono); text-align: center; }
.ui-scanct-times input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-scanct-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ui-scanct-sum div { min-width: 0; padding: 6px 4px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); text-align: center; }
.ui-scanct-sum dt { color: var(--ui-muted); font-size: 12px; }
.ui-scanct-sum dd { margin: 0; font: 700 18px/1.3 var(--ui-mono); }
.ui-scanct-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-scanct-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); font-size: 14px; font-weight: 600; cursor: pointer; }
.ui-scanct-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-scanct-chip:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-scanct-chip:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-scanct-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ui-scanct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 4px 6px 12px; border-left: 4px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); content-visibility: auto; contain-intrinsic-size: auto 60px; }
.ui-scanct-row[data-state="match"] { border-color: var(--ui-success); }
.ui-scanct-row[data-state="over"], .ui-scanct-row[data-state="unknown"] { border-color: var(--ui-warning); }
.ui-scanct-row[data-state="short"] { border-color: var(--ui-danger); }
.ui-scanct-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-scanct-code { display: block; color: var(--ui-muted); font: 12px var(--ui-mono); overflow-wrap: anywhere; }
.ui-scanct-note { display: block; font-size: 13px; font-weight: 500; }
.ui-scanct-qty { display: inline-flex; align-items: center; }
.ui-scanct-step { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 22px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-scanct-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-scanct-step:disabled { opacity: .35; cursor: default; }
.ui-scanct-n { min-width: 48px; text-align: center; font: 700 16px var(--ui-mono); }
.ui-scanct-empty { margin: 0; color: var(--ui-muted); }
.ui-scanct-review { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-scanct-review h4 { margin: 0; font-size: 16px; }
.ui-scanct-review ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-scanct-review p { margin: 0; }
.ui-scanct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-scanct-acts > * { flex: 1 1 140px; }
.ui-scanct-line { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 14px; }
@container (min-width: 640px) {
  .ui-scanct-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
}


.ui-comment-thread { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; list-style: none; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-comment-thread-empty { margin: 0; color: var(--ui-muted); }
.ui-comment-thread-fold {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; height: 26px; padding: 0 6px; margin-left: -6px;
  border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-comment-thread-fold svg { width: 12px; height: 12px; transition: transform .15s; }
.ui-comment-thread-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.ui-comment-thread-fold:hover { background: var(--ui-accent-soft); }
.ui-comment-thread-fold:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-comment-thread-reply { margin: 4px 0 6px; }
.ui-comment-thread-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (prefers-reduced-motion: reduce) { .ui-comment-thread-fold svg { transition: none; } }


.ui-usage { display: grid; gap: 6px; min-width: 0; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); }
.ui-usage-warn { --t: var(--ui-warning); }
.ui-usage-full, .ui-usage-over { --t: var(--ui-danger); }
.ui-usage-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.ui-usage-label { font-weight: 500; font-size: 14px; }
.ui-usage-nums { color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-usage-nums b { color: var(--ui-fg); font-weight: 600; }
.ui-usage-track { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-usage-sm .ui-usage-track { height: 4px; }
.ui-usage-lg .ui-usage-track { height: 12px; }
.ui-usage-fill { height: 100%; border-radius: inherit; background: var(--t); transition: width .3s ease; }
.ui-usage-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ui-bg); }
.ui-usage-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; color: var(--ui-muted); }
.ui-usage-warning { display: inline-flex; align-items: center; gap: 5px; color: var(--t); font-weight: 600; }
.ui-usage-warning svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .ui-usage-fill { transition: none; } }


.ui-otp-input { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-otp-input-label { padding: 0; font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-otp-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-otp-input-boxes { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.ui-otp-input-sep { flex: 0 1 10px; min-width: 4px; width: 10px; height: 2px; border-radius: 1px; background: var(--ui-strong); }
.ui-otp-input-box {
  flex: 0 1 44px; min-width: 0; width: 44px; height: 52px; margin: 0; padding: 0; text-align: center;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 600 22px/1 var(--ui-mono); caret-color: var(--ui-accent);
  transition: border-color .15s, box-shadow .15s;
}
.ui-otp-input-box:hover { border-color: var(--ui-strong); }
.ui-otp-input-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-otp-input-filled { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-otp-input-box[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-otp-input-box:disabled { opacity: .55; cursor: not-allowed; }
.ui-otp-input-masked .ui-otp-input-box { -webkit-text-security: disc; }
.ui-otp-input-hint, .ui-otp-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-otp-input-error { color: var(--ui-danger); }
@media (max-width: 420px) { .ui-otp-input-boxes { gap: 5px; } .ui-otp-input-box { height: 46px; font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .ui-otp-input-box { transition: none; } }


.stacked-modal-demo-page { padding: 20px; border: 1px solid var(--ui-border); background: var(--ui-subtle); }
.stacked-modal-demo-page h3 { margin: 0 0 4px; }
.stacked-modal-demo-rows { margin: 12px 0 0; padding: 0; list-style: none; }
.stacked-modal-demo-rows li { padding: 12px 0; border-bottom: 1px solid var(--ui-border); }


.ui-switcher { display: flex; flex-wrap: wrap; gap: var(--ui-switcher-gap, 16px); min-width: 0; }
.ui-switcher > *, .ui-switcher > quillo-raw > * { flex-grow: 1; flex-basis: calc((var(--ui-switcher-at, 640px) - 100%) * 999); min-width: 0; }
.ui-switcher-2 > :nth-last-child(n + 3), .ui-switcher-2 > :nth-last-child(n + 3) ~ *,
.ui-switcher-2 > quillo-raw > :nth-last-child(n + 3), .ui-switcher-2 > quillo-raw > :nth-last-child(n + 3) ~ * { flex-basis: 100%; }
.ui-switcher-3 > :nth-last-child(n + 4), .ui-switcher-3 > :nth-last-child(n + 4) ~ *,
.ui-switcher-3 > quillo-raw > :nth-last-child(n + 4), .ui-switcher-3 > quillo-raw > :nth-last-child(n + 4) ~ * { flex-basis: 100%; }
.ui-switcher-4 > :nth-last-child(n + 5), .ui-switcher-4 > :nth-last-child(n + 5) ~ *,
.ui-switcher-4 > quillo-raw > :nth-last-child(n + 5), .ui-switcher-4 > quillo-raw > :nth-last-child(n + 5) ~ * { flex-basis: 100%; }
.ui-switcher-5 > :nth-last-child(n + 6), .ui-switcher-5 > :nth-last-child(n + 6) ~ *,
.ui-switcher-5 > quillo-raw > :nth-last-child(n + 6), .ui-switcher-5 > quillo-raw > :nth-last-child(n + 6) ~ * { flex-basis: 100%; }
.ui-switcher-6 > :nth-last-child(n + 7), .ui-switcher-6 > :nth-last-child(n + 7) ~ *,
.ui-switcher-6 > quillo-raw > :nth-last-child(n + 7), .ui-switcher-6 > quillo-raw > :nth-last-child(n + 7) ~ * { flex-basis: 100%; }


.ui-swipetabs { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; container-type: inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-swipetabs-strip {
  position: relative; display: flex; flex: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}
.ui-swipetabs-strip::-webkit-scrollbar { display: none; }
.ui-swipetabs-tab {
  flex: none; min-width: 72px; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--ui-muted); font: 500 14px/1.2 var(--ui-font); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ui-swipetabs-tab[aria-selected="true"] { color: var(--ui-accent); }
.ui-swipetabs-tab:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
@media (hover: hover) { .ui-swipetabs-tab:hover { color: var(--ui-fg); } .ui-swipetabs-tab[aria-selected="true"]:hover { color: var(--ui-accent); } }
/* Before the first measure the selected tab marks itself, so the page shows it from the server. */
.ui-swipetabs-strip:not(.ui-swipetabs-measured) .ui-swipetabs-tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-swipetabs-line {
  position: absolute; bottom: 0; left: 0; width: 1px; height: 2px; background: var(--ui-accent); transform-origin: 0 0; visibility: hidden; pointer-events: none; will-change: transform;
}
.ui-swipetabs-measured .ui-swipetabs-line { visibility: visible; }
.ui-swipetabs-track { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ui-swipetabs-track::-webkit-scrollbar { display: none; }
.ui-swipetabs-page { box-sizing: border-box; flex: 0 0 100%; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; outline: none; }
.ui-swipetabs-page:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-swipetabs-built { display: contents; }
.ui-swipetabs-wait { padding: 32px 16px; color: var(--ui-muted); text-align: center; }
@container (min-width: 600px) {
  .ui-swipetabs-strip { justify-content: center; }
  .ui-swipetabs-tab { flex: 0 1 160px; min-width: 0; }
}


.ui-balcard { display: grid; gap: 10px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-balcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.ui-balcard-title { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-balcard-eye {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer;
  touch-action: manipulation;
}
.ui-balcard-eye svg { width: 22px; height: 22px; pointer-events: none; }
.ui-balcard-eye:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-balcard-eye:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
/* The row of cards moves under a finger on the phone; the page keeps its up and down. */
.ui-balcard-view { position: relative; min-width: 0; overflow: hidden; border-radius: var(--ui-radius); touch-action: pan-y; outline: none; }
.ui-balcard-view:focus-visible { box-shadow: var(--ui-focus); }
.ui-balcard-track { display: flex; transform: translateX(calc(var(--ui-balcard-at) * -100%)); transition: transform .26s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ui-balcard-moving { transition: none; }
.ui-balcard-card {
  box-sizing: border-box; display: grid; align-content: start; gap: 6px; flex: 0 0 100%; min-width: 0; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface);
}
.ui-balcard-name { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.ui-balcard-name span { min-width: 0; overflow-wrap: anywhere; }
.ui-balcard-last { flex: none; color: var(--ui-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
/* A hold is the finger's: no selection or callout may take it, as the amount is what it is on. */
.ui-balcard-amt {
  display: block; width: 100%; min-height: 56px; padding: 4px 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg);
  font: 700 min(34px, 9.4cqw)/1.2 var(--ui-font); font-variant-numeric: tabular-nums; text-align: left; overflow-wrap: anywhere; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
}
.ui-balcard-amt:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-balcard-neg { color: var(--ui-danger); }
.ui-balcard-low { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-balcard-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-balcard-step {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--ui-surface); color: var(--ui-fg);
  cursor: pointer; font: 20px/1 var(--ui-font); touch-action: manipulation;
}
.ui-balcard-step:disabled { opacity: .4; cursor: default; }
.ui-balcard-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-balcard-where { display: grid; justify-items: center; gap: 4px; color: var(--ui-muted); font-size: 13px; }
.ui-balcard-dots { display: flex; gap: 6px; }
.ui-balcard-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-strong); }
.ui-balcard-dots i.ui-balcard-dot-on { background: var(--ui-accent); }
.ui-balcard-totals { display: none; }
.ui-balcard-empty { margin: 0; padding: 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
/* Space for them all: no swiping, nothing to page through, and the totals a row of one cannot have. */
@container (min-width: 560px) {
  .ui-balcard-view { touch-action: auto; overflow: visible; }
  .ui-balcard-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; transform: none; }
  .ui-balcard-nav { display: none; }
  .ui-balcard-totals { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
  .ui-balcard-totals strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ui-balcard-track { transition: none; } }


.ui-pull-refresh { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; container-type: inline-size;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-pull-refresh-bar { display: flex; flex: none; align-items: center; gap: 8px; min-height: 52px; padding: 4px 12px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-pull-refresh-status { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 13px; }
.ui-pull-refresh-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px;
  padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-pull-refresh-btn svg { width: 20px; height: 20px; }
.ui-pull-refresh-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pull-refresh-btn[aria-disabled="true"] { color: var(--ui-muted); cursor: default; }
.ui-pull-refresh-btn-text { display: none; }
@media (hover: hover) { .ui-pull-refresh-btn:not([aria-disabled="true"]):hover { background: var(--ui-subtle); } }
.ui-pull-refresh-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ui-subtle); --p: 0; }
.ui-pull-refresh-ind { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px;
  color: var(--ui-muted); font-size: 13px; opacity: var(--p); }
.ui-pull-refresh-arrow { display: grid; place-items: center; width: 24px; height: 24px; transform: rotate(calc(var(--p) * 180deg)); }
.ui-pull-refresh-arrow svg { width: 20px; height: 20px; }
.ui-pull-refresh-spin { width: 20px; height: 20px; border: 2px solid var(--ui-accent); border-right-color: transparent; border-radius: 50%;
  animation: ui-pull-refresh-spin .7s linear infinite; }
@keyframes ui-pull-refresh-spin { to { transform: rotate(360deg); } }
.ui-pull-refresh-done { color: var(--ui-success); font-weight: 600; }
.ui-pull-refresh-failed { color: var(--ui-danger); font-weight: 600; }
/* Its own scroller, and contain keeps the browser's pull and the page behind out of it. pan-y lets the
   browser scroll; a pull that is ours is kept from it by the touchmove guard in @mount. */
.ui-pull-refresh-scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y;
  background: var(--ui-bg); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.ui-pull-refresh-on .ui-pull-refresh-scroll { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@container (min-width: 480px) {
  .ui-pull-refresh-btn { padding: 0 14px; }
  .ui-pull-refresh-btn-text { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-pull-refresh-scroll { transition: none; }
  .ui-pull-refresh-spin { animation-duration: 2.4s; }
}


.ui-panel {
  --ui-panel-pad: 20px; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-panel-pad-none { --ui-panel-pad: 0; }
.ui-panel-pad-sm { --ui-panel-pad: 12px; }
.ui-panel-pad-lg { --ui-panel-pad: 28px; }
.ui-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 52px;
  padding: 10px 16px; border-bottom: 1px solid var(--ui-border);
}
.ui-panel-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ui-panel-sub { margin: 1px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ui-panel-body { flex: 1; padding: var(--ui-panel-pad); }
.ui-panel-body > :first-child { margin-top: 0; }
.ui-panel-body > :last-child { margin-bottom: 0; }
.ui-panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle);
  border-radius: 0 0 var(--ui-radius) var(--ui-radius);
}
.ui-panel-foot-start { justify-content: flex-start; }
.ui-panel-foot-between { justify-content: space-between; }
.ui-panel-subtle .ui-panel-head { background: var(--ui-subtle); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
.ui-panel-accent { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
.ui-panel-accent .ui-panel-head { background: var(--ui-accent-soft); color: var(--ui-accent); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
.ui-panel-accent .ui-panel-sub { color: inherit; opacity: .8; }
.ui-panel-danger { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); }
.ui-panel-danger .ui-panel-head { background: var(--ui-danger-soft); color: var(--ui-danger); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
.ui-panel-danger .ui-panel-sub { color: inherit; opacity: .8; }


.ui-bhead { display: grid; gap: 14px; min-width: 0; margin: 0; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-bhead-center { justify-items: center; text-align: center; }
.ui-bhead-kicker { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-accent); }
.ui-bhead-kicker a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-bhead-kicker a:hover { text-decoration: underline; }
.ui-bhead-kicker a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bhead .ui-bhead-title { margin: 0; max-width: 24ch; font-size: clamp(28px, 5vw, 42px); font-weight: 750; line-height: 1.12;
  letter-spacing: -.02em; text-wrap: balance; }
.ui-bhead-dek { margin: 0; max-width: 60ch; color: var(--ui-muted); font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.ui-bhead-byline { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ui-bhead-faces { display: flex; flex: none; }
.ui-bhead-face { display: inline-grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 2px solid var(--ui-bg);
  border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 14px; font-weight: 650; }
.ui-bhead-face + .ui-bhead-face { margin-left: -12px; }
.ui-bhead-face img { width: 100%; height: 100%; object-fit: cover; }
.ui-bhead-who { display: grid; gap: 1px; min-width: 0; text-align: start; }
.ui-bhead-by { margin: 0; font-weight: 600; }
.ui-bhead-by a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-bhead-by a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bhead-by a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bhead-when { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-bhead-when > * + *::before { content: "·"; margin-right: 8px; }
.ui-bhead-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-bhead-center .ui-bhead-tags, .ui-bhead-center .ui-bhead-byline { justify-content: center; }
.ui-bhead-tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-muted);
  font-size: 13px; text-decoration: none; }
a.ui-bhead-tag:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
a.ui-bhead-tag:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bhead-cover { display: grid; gap: 8px; width: 100%; margin: 10px 0 0; }
.ui-bhead-cover img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-bhead-cover figcaption { color: var(--ui-muted); font-size: 13px; text-align: start; }


.ui-comment-sheet-host { display: contents; }
.ui-comment-sheet-open { min-height: 46px; padding: 0 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px var(--ui-font); cursor: pointer; }
.ui-comment-sheet-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-comment-sheet {
  position: fixed; inset: 0; z-index: 35; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent;
  color: var(--ui-fg); container-type: size; font: 15px/1.4 var(--ui-font);
}
.ui-comment-sheet::backdrop { background: transparent; }
.ui-comment-sheet-shade { position: absolute; inset: 0; background: var(--ui-overlay); }
.ui-comment-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: var(--ui-comment-sheet-lift, 0px); display: flex; flex-direction: column; box-sizing: border-box; height: 64%;
  max-height: calc(100% - var(--ui-comment-sheet-lift, 0px) - 8px); border-radius: 16px 16px 0 0; background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
  transition: height .24s cubic-bezier(.2, .9, .3, 1), transform .24s cubic-bezier(.2, .9, .3, 1); animation: ui-comment-sheet-up .24s cubic-bezier(.2, .9, .3, 1);
}
@keyframes ui-comment-sheet-up { from { transform: translateY(100%); } }
.ui-comment-sheet-full .ui-comment-sheet-panel { height: calc(100% - 8px); }
.ui-comment-sheet-panel.ui-comment-sheet-dragging { transition: none; }
.ui-comment-sheet-handle { flex: none; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-comment-sheet-grip { display: grid; place-items: center; width: 100%; height: 44px; margin-bottom: -14px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.ui-comment-sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-comment-sheet-grip:focus-visible { outline: none; }
.ui-comment-sheet-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-comment-sheet-head { display: flex; align-items: center; gap: 4px; padding: 0 6px 6px 16px; }
.ui-comment-sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-comment-sheet-head h2 span { color: var(--ui-muted); font-weight: 500; }
.ui-comment-sheet-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-comment-sheet-btn svg { width: 20px; height: 20px; }
.ui-comment-sheet-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-comment-sheet-sorts { flex: none; display: flex; gap: 4px; padding: 0 12px 6px; border-bottom: 1px solid var(--ui-border); }
.ui-comment-sheet-sort { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-comment-sheet-sort[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-comment-sheet-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-comment-sheet-list { flex: 1; min-height: 0; margin: 0; padding: 4px 12px 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.ui-comment-sheet-none { padding: 32px 16px; color: var(--ui-muted); text-align: center; }
.ui-comment-sheet-replies { margin: 0; padding: 0 0 0 40px; list-style: none; }
.ui-comment-sheet-one { display: grid; grid-template-columns: 32px 1fr; gap: 0 8px; padding-top: 10px; }
.ui-comment-sheet-face { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 650; }
.ui-comment-sheet-face img { width: 100%; height: 100%; object-fit: cover; }
.ui-comment-sheet-meta { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.ui-comment-sheet-meta b { font-weight: 600; }
.ui-comment-sheet-meta small { color: var(--ui-muted); font-size: 12px; }
.ui-comment-sheet-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-comment-sheet-to { color: var(--ui-accent); font-weight: 500; }
.ui-comment-sheet-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -8px; color: var(--ui-muted); }
.ui-comment-sheet-act { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: inherit; font: 500 13px var(--ui-font); cursor: pointer; font-variant-numeric: tabular-nums; }
.ui-comment-sheet-act[aria-pressed="true"] { color: var(--ui-danger); }
.ui-comment-sheet-act:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-comment-sheet-gone { color: var(--ui-danger); }
.ui-comment-sheet-ask { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); font-size: 13px; }
.ui-comment-sheet-more { display: block; min-height: 44px; margin-left: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--ui-accent); font: 600 13px var(--ui-font); cursor: pointer; }
.ui-comment-sheet-more:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-comment-sheet-replying { display: flex; align-items: center; gap: 4px; padding: 0 0 0 8px; color: var(--ui-muted); font-size: 13px; }
.ui-comment-sheet-replying span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a tablet the post stays in sight: a column at the side, not a sheet over it. */
@container (min-width: 640px) {
  .ui-comment-sheet-panel, .ui-comment-sheet-full .ui-comment-sheet-panel { top: 0; left: auto; bottom: var(--ui-comment-sheet-lift, 0px); width: 380px; height: auto; max-height: none; border-radius: 16px 0 0 16px; animation-name: ui-comment-sheet-in; }
  .ui-comment-sheet-grip, .ui-comment-sheet-size { display: none; }
  .ui-comment-sheet-handle { touch-action: auto; cursor: default; }
  .ui-comment-sheet-head { padding-top: 10px; }
}
@keyframes ui-comment-sheet-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-comment-sheet-panel { transition: none; animation: none; } }


.ui-month-calendar { display: grid; gap: 8px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-month-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-month-calendar-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ui-month-calendar-nav {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); cursor: pointer;
}
.ui-month-calendar-nav svg { width: 18px; height: 18px; }
.ui-month-calendar-nav:hover { border-color: var(--ui-strong); }
.ui-month-calendar-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-month-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ui-month-calendar-wd { padding: 2px 0; font-size: 12px; font-weight: 500; color: var(--ui-muted); text-align: center; }
.ui-month-calendar-day {
  display: grid; align-content: space-between; gap: 2px; min-height: 64px; min-width: 0; padding: 6px; text-align: left;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 12px/1.25 var(--ui-font); cursor: pointer;
}
.ui-month-calendar-day b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-month-calendar-day span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-month-calendar-label { font-weight: 500; }
.ui-month-calendar-note { color: var(--ui-muted); }
.ui-month-calendar-day:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-month-calendar-day:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-month-calendar-day:disabled { opacity: .5; cursor: not-allowed; }
.ui-month-calendar-today b { color: var(--ui-accent); }
.ui-month-calendar-closed {
  background: repeating-linear-gradient(45deg, var(--ui-surface), var(--ui-surface) 6px, var(--ui-subtle) 6px, var(--ui-subtle) 8px);
}
.ui-month-calendar-closed .ui-month-calendar-label { text-decoration: line-through; color: var(--ui-muted); }
.ui-month-calendar-booked { background: var(--ui-success-soft); border-color: transparent; }
.ui-month-calendar-held { background: var(--ui-warning-soft); border-color: transparent; }
.ui-month-calendar-day[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-month-calendar-foot { margin: 0; font-size: 13px; color: var(--ui-muted); }
@media (max-width: 520px) {
  .ui-month-calendar-day { min-height: 52px; padding: 4px; font-size: 11px; }
  .ui-month-calendar-note { display: none; }
}


.ui-lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--s, 140px), 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-lb-thumb {
  display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); cursor: zoom-in; aspect-ratio: var(--r, 1);
}
.ui-lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ui-lb-thumb:hover img { transform: scale(1.04); }
.ui-lb-thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 5px var(--ui-accent); }
.ui-lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--ui-bg) 94%, transparent); color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
}
.ui-lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: ui-lb-in .18s ease-out; }
.ui-lb::backdrop { background: var(--ui-overlay); backdrop-filter: blur(4px); }
@keyframes ui-lb-in { from { opacity: 0; } }
.ui-lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; }
.ui-lb-count { margin: 0; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px; touch-action: pan-y; }
.ui-lb-stage img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow-lg); user-select: none; -webkit-user-drag: none;
}
.ui-lb-cap { margin: 0; padding: 12px 18px 18px; text-align: center; color: var(--ui-fg); }
.ui-lb-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); cursor: pointer;
}
.ui-lb-btn:hover:not(:disabled) { background: var(--ui-subtle); }
.ui-lb-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-lb-btn:disabled { opacity: .35; cursor: default; }
.ui-lb-btn svg { width: 20px; height: 20px; }
.ui-lb-prev, .ui-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.ui-lb-prev { left: 12px; }
.ui-lb-next { right: 12px; }
.ui-lb-x { width: 40px; height: 40px; box-shadow: none; }
@media (max-width: 600px) {
  .ui-lb-stage { padding: 0 8px; }
  .ui-lb-prev, .ui-lb-next { top: auto; bottom: 8px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-lb[open] { animation: none; } .ui-lb-thumb img { transition: none; } }


.demo-pull-row { display: block; padding: 12px 16px; border-bottom: 1px solid var(--ui-border); }
.demo-pull-row b { display: block; font-weight: 600; }
.demo-pull-row span { color: var(--ui-muted); font-size: 14px; }


.ui-rform { display: grid; gap: 14px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-rform-problems { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; overflow-wrap: anywhere; }
.ui-rform-field { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-rform-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-rform-req { margin-left: 2px; color: var(--ui-danger); }
.ui-rform-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
textarea.ui-rform-input { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.ui-rform-input:hover { border-color: var(--ui-strong); }
.ui-rform-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rform-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-rform-choices { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ui-rform-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ui-rform-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-rform-check input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rform-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-rform-error { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-rform-summary { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-rform-submit { justify-self: start; height: 38px; padding: 0 16px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 14px/1 var(--ui-font); cursor: pointer; }
.ui-rform-submit:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-rform-submit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-rform-input { transition: none; } }


.ui-symc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start;
  min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.35 var(--ui-font); text-decoration: none; }
.ui-symc-up { --k: var(--ui-success); } .ui-symc-down { --k: var(--ui-danger); } .ui-symc-flat { --k: var(--ui-muted); }
a.ui-symc { transition: border-color .15s, box-shadow .15s; }
a.ui-symc:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
a.ui-symc:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-symc-id { display: grid; min-width: 0; }
.ui-symc-sym { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.ui-symc-name { overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-symc-quote { display: grid; justify-items: end; }
.ui-symc-price { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ui-symc-chg { display: inline-flex; align-items: center; gap: 6px; color: var(--k); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-symc-pill { padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--k) 14%, transparent); }
.ui-symc-spark { grid-column: 1 / -1; width: 100%; height: 56px; overflow: visible; }
.ui-symc-line { fill: none; stroke: var(--k); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ui-symc-fill { fill: var(--k); opacity: .1; }
.ui-symc-base { stroke: var(--ui-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.ui-symc-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--ui-muted); font-size: 12px; }
.ui-symc-foot b { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-symc-range { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 180px; font-variant-numeric: tabular-nums; }
.ui-symc-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--ui-subtle); }
.ui-symc-bar span { position: absolute; top: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--k);
  box-shadow: 0 0 0 2px var(--ui-surface); transform: translateY(-50%); }
.ui-symc-note { margin-left: auto; }
.ui-symc-sm { grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center; padding: 10px 14px; }
.ui-symc-sm .ui-symc-spark { grid-column: 2; grid-row: 1; height: 32px; }
.ui-symc-sm .ui-symc-price { font-size: 15px; }
.ui-symc-sm .ui-symc-foot { display: none; }


.ui-blog { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-blog-cards { grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-blog-min, 280px), 100%), 1fr)); }
.ui-blog-post { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ui-blog-rows .ui-blog-post { flex-direction: row-reverse; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ui-border); }
.ui-blog-rows .ui-blog-post:last-child { padding-bottom: 0; border-bottom: 0; }
.ui-blog-pic { display: block; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-subtle); aspect-ratio: 16 / 9; }
.ui-blog-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ui-blog-pic:hover img { transform: scale(1.03); }
.ui-blog-pic:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-blog-rows .ui-blog-pic { flex: none; width: 220px; aspect-ratio: 4 / 3; }
.ui-blog-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.ui-blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-blog-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 12px; font-weight: 600; text-decoration: none; }
a.ui-blog-tag:hover { text-decoration: underline; }
a.ui-blog-tag:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-blog-title { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; }
.ui-blog-title a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-blog-title a:hover { color: var(--ui-accent); }
.ui-blog-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-blog-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; color: var(--ui-muted); }
.ui-blog-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; color: var(--ui-muted); font-size: 13px; }
.ui-blog-meta time, .ui-blog-meta span { white-space: nowrap; }
.ui-blog-author { color: var(--ui-fg); font-weight: 500; }
.ui-blog-dot::before { content: "·"; }
@media (max-width: 640px) {
  .ui-blog-rows .ui-blog-post { flex-direction: column; gap: 10px; }
  .ui-blog-rows .ui-blog-pic { width: auto; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .ui-blog-pic img { transition: none; } }


.ui-empty-screen {
  container-type: inline-size; box-sizing: border-box; display: flex; width: 100%; height: 100%; min-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
  padding: max(16px, var(--ui-safe-top, env(safe-area-inset-top, 0px))) max(20px, var(--ui-safe-right, env(safe-area-inset-right, 0px))) max(16px, var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px))) max(20px, var(--ui-safe-left, env(safe-area-inset-left, 0px)));
}
.ui-empty-screen-fill { position: fixed; inset: 0; z-index: 30; height: auto; }
.ui-empty-screen-page { flex: 1; display: grid; align-content: center; justify-items: center; gap: 12px; min-width: 0; text-align: center; }
.ui-empty-screen-art { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-empty-screen-done .ui-empty-screen-art { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-empty-screen-art svg { width: 52px; height: 52px; }
.ui-empty-screen-tick { stroke-dasharray: 26; stroke-dashoffset: 26; animation: ui-empty-screen-draw .5s .15s ease-out forwards; }
@keyframes ui-empty-screen-draw { to { stroke-dashoffset: 0; } }
.ui-empty-screen-title { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 22px; font-weight: 650; line-height: 1.25; }
.ui-empty-screen-text { max-width: 42ch; margin: 0; color: var(--ui-muted); }
.ui-empty-screen-tips { max-width: 42ch; margin: 0; padding: 0; color: var(--ui-muted); list-style: none; }
.ui-empty-screen-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-empty-screen-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1.2 var(--ui-font); cursor: pointer;
}
.ui-empty-screen-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-empty-screen-chip svg { width: 14px; height: 14px; color: var(--ui-muted); }
.ui-empty-screen-count { margin: 0; color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-empty-screen-steps { display: grid; gap: 6px; width: 100%; max-width: 420px; margin: 0; padding: 0; list-style: none; text-align: left; }
.ui-empty-screen-step {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none;
}
button.ui-empty-screen-step, a.ui-empty-screen-step { cursor: pointer; }
.ui-empty-screen-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-empty-screen-step-next { border-color: var(--ui-accent); background: var(--ui-accent-soft); font-weight: 600; }
.ui-empty-screen-step-done { color: var(--ui-muted); text-decoration: line-through; }
.ui-empty-screen-mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--ui-strong); border-radius: 50%; font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-empty-screen-step-done .ui-empty-screen-mark { border-color: var(--ui-success); background: var(--ui-success); color: var(--ui-bg); }
.ui-empty-screen-step-next .ui-empty-screen-mark { border-color: var(--ui-accent); }
.ui-empty-screen-actions { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: 6px; }
.ui-empty-screen-actions .ui-btn { width: 100%; }
@container (min-width: 640px) {
  .ui-empty-screen-page { grid-template-columns: 180px minmax(0, 480px); justify-content: center; justify-items: start; column-gap: 32px; align-content: center; text-align: left; }
  .ui-empty-screen-art { grid-row: 1 / span 8; width: 180px; height: 180px; }
  .ui-empty-screen-art svg { width: 88px; height: 88px; }
  .ui-empty-screen-page > :not(.ui-empty-screen-art) { grid-column: 2; }
  .ui-empty-screen-title { font-size: 26px; }
  .ui-empty-screen-chips { justify-content: flex-start; }
  .ui-empty-screen-actions { display: flex; flex-wrap: wrap; max-width: none; }
  .ui-empty-screen-actions .ui-btn { width: auto; min-width: 160px; }
}
@media (prefers-reduced-motion: reduce) { .ui-empty-screen-tick { animation: none; stroke-dashoffset: 0; } }


.ui-activity { margin: 0; padding: 0; list-style: none; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-activity-day { margin: 14px 0 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-activity-day:first-child { margin-top: 0; }
.ui-activity-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 0 0 18px; }
.ui-activity-item::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--ui-border); }
.ui-activity-item:last-child::before, .ui-activity-item:has(+ .ui-activity-day)::before { display: none; }
.ui-activity-pic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-activity-pic img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ui-activity-icon { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid var(--ui-bg); background: var(--t); color: var(--ui-bg); --t: var(--ui-muted); }
.ui-activity-icon svg { width: 10px; height: 10px; }
.ui-activity-accent { --t: var(--ui-accent); }
.ui-activity-success { --t: var(--ui-success); }
.ui-activity-warning { --t: var(--ui-warning); }
.ui-activity-danger { --t: var(--ui-danger); }
.ui-activity-info { --t: var(--ui-info); }
.ui-activity-text { min-width: 0; padding-top: 7px; }
.ui-activity-line { margin: 0; color: var(--ui-muted); }
.ui-activity-who { color: var(--ui-fg); font-weight: 600; }
.ui-activity-target { color: var(--ui-fg); font-weight: 500; }
a.ui-activity-target { color: var(--ui-accent); text-decoration: none; }
a.ui-activity-target:hover { text-decoration: underline; }
a.ui-activity-target:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-activity-time { margin-left: 6px; color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-activity-body { margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); }
.ui-activity-compact .ui-activity-item { grid-template-columns: 20px 1fr; gap: 8px; padding-bottom: 10px; }
.ui-activity-compact .ui-activity-item::before { left: 9px; top: 24px; }
.ui-activity-compact .ui-activity-pic { width: 20px; height: 20px; background: none; }
.ui-activity-compact .ui-activity-icon { position: static; width: 20px; height: 20px; border: 0; }
.ui-activity-compact .ui-activity-text { padding-top: 0; }


.ui-funnelc { --ui-funnelc-1: light-dark(#2a78d6, #3987e5);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-funnelc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-funnelc-body { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content; column-gap: 14px; align-items: center; }
.ui-funnelc-stage { display: contents; }
.ui-funnelc-name { grid-column: 1; max-width: 14em; overflow: hidden; color: var(--ui-fg); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ui-funnelc-cell { grid-column: 2; position: relative; height: var(--h); }
.ui-funnelc-shape { position: absolute; inset: 0; background: var(--ui-funnelc-1); border-radius: 3px;
  clip-path: polygon(var(--l1) 0, var(--r1) 0, var(--r2) 100%, var(--l2) 100%); transition: filter .12s ease; }
.ui-funnelc-stage:hover .ui-funnelc-shape { filter: brightness(1.15); }
.ui-funnelc-body:has(.ui-funnelc-stage:hover) .ui-funnelc-stage:not(:hover) .ui-funnelc-shape { opacity: .45; }
.ui-funnelc-num { grid-column: 3; display: grid; justify-items: start; min-width: 5em; }
.ui-funnelc-num b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-funnelc-num small { color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-funnelc-conv { grid-column: 2; padding: 3px 0; color: var(--ui-muted); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-funnelc-conv b { color: var(--ui-fg); font-weight: 600; }
.ui-funnelc-gap { grid-column: 2; height: 2px; }
.ui-funnelc-tip { position: absolute; z-index: 20; top: 50%; left: 50%; display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -50%); pointer-events: none; }
.ui-funnelc-stage:hover .ui-funnelc-tip { display: block; }
.ui-funnelc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-funnelc-tip p { display: flex; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-funnelc-tip p b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-funnelc-shape { transition: none; } }


.ui-stack { display: flex; flex-direction: column; gap: var(--ui-stack-gap, 12px); min-width: 0; }
.ui-stack-row { flex-direction: row; }
.ui-stack-wrap { flex-wrap: wrap; }
@media (max-width: 639px) { .ui-stack-collapse { flex-direction: column; } }


.ui-carousel { position: relative; display: grid; gap: 10px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-carousel-view { position: relative; min-width: 0; }
.ui-carousel-track {
  position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--ui-radius); outline: none;
}
.ui-carousel-track::-webkit-scrollbar { display: none; }
.ui-carousel-track:focus-visible { box-shadow: var(--ui-focus); }
.ui-carousel-track > *, .ui-carousel-track > quillo-raw > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ui-carousel-slide > img { display: block; width: 100%; height: auto; }
.ui-carousel-nav {
  position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px;
  padding: 0; border: 1px solid var(--ui-border); border-radius: 50%; background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  color: var(--ui-fg); box-shadow: var(--ui-shadow); cursor: pointer; transition: background .15s, opacity .15s;
}
.ui-carousel-nav svg { width: 18px; height: 18px; }
.ui-carousel-nav:hover { background: var(--ui-surface); }
.ui-carousel-nav:focus-visible, .ui-carousel-dot:focus-visible, .ui-carousel-play:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-carousel-nav:disabled { opacity: 0; pointer-events: none; }
.ui-carousel-prev { left: 10px; }
.ui-carousel-next { right: 10px; }
.ui-carousel-bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 24px; }
.ui-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.ui-carousel-dot {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.ui-carousel-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ui-strong); transition: width .2s, background .2s;
}
.ui-carousel-dot:hover::before { background: var(--ui-muted); }
.ui-carousel-dot[aria-current="true"]::before { width: 20px; background: var(--ui-accent); }
.ui-carousel-play {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ui-border);
  border-radius: 50%; background: var(--ui-surface); color: var(--ui-fg); cursor: pointer;
}
.ui-carousel-play svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .ui-carousel-nav { width: 32px; height: 32px; margin-top: -16px; } .ui-carousel-prev { left: 6px; } .ui-carousel-next { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .ui-carousel-track { scroll-behavior: auto; } .ui-carousel-dot::before, .ui-carousel-nav { transition: none; } }


.ui-lc { --ui-lc-1: light-dark(#2a78d6, #3987e5); --ui-lc-2: light-dark(#eb6834, #d95926);
  --ui-lc-3: light-dark(#1baf7a, #199e70); --ui-lc-4: light-dark(#eda100, #c98500);
  --ui-lc-5: light-dark(#e87ba4, #d55181); --ui-lc-6: light-dark(#008300, #008300);
  --ui-lc-7: light-dark(#6250d6, #9085e9); --ui-lc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg);
  container-type: inline-size; }
.ui-lc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-lc-s1 { --c: var(--ui-lc-1); } .ui-lc-s2 { --c: var(--ui-lc-2); } .ui-lc-s3 { --c: var(--ui-lc-3); }
.ui-lc-s4 { --c: var(--ui-lc-4); } .ui-lc-s5 { --c: var(--ui-lc-5); } .ui-lc-s6 { --c: var(--ui-lc-6); }
.ui-lc-s7 { --c: var(--ui-lc-7); } .ui-lc-s8 { --c: var(--ui-lc-8); }
.ui-lc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-lc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-lc-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-lc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-lc-y { position: relative; min-width: 24px; }
.ui-lc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lc-plot { position: relative; }
.ui-lc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-lc-grid.ui-lc-zero { background: var(--ui-strong); }
.ui-lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-lc-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-lc-area { fill: var(--c); opacity: .12; stroke: none; }
.ui-lc-pt, .ui-lc-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-lc-pt { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.ui-lc-cols { position: absolute; top: 0; bottom: 0; display: flex; }
.ui-lc-col { position: relative; flex: 1; min-width: 0; }
.ui-lc-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-lc-col .ui-lc-dot { left: 50%; display: none; }
.ui-lc-col:hover::before { opacity: 1; }
.ui-lc-col:hover .ui-lc-dot, .ui-lc-col:hover .ui-lc-tip { display: block; }
.ui-lc-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-lc-flip .ui-lc-tip { left: auto; right: calc(50% + 10px); }
.ui-lc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-lc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-lc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-lc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-lc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-lc-x .ui-lc-first { transform: none; }
.ui-lc-x .ui-lc-last { transform: translateX(-100%); }
@container (max-width: 520px) { .ui-lc-x .ui-lc-alt { display: none; } }


.ui-navlink {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--ui-radius-sm);
  color: var(--ui-muted); font: 500 14px/1.3 var(--ui-font); text-decoration: none; white-space: nowrap;
  transition: color .12s, background .12s;
}
.ui-navlink:hover { color: var(--ui-fg); }
.ui-navlink:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-navlink[aria-current="page"] { color: var(--ui-accent); }
.ui-navlink-pill:hover { background: var(--ui-subtle); }
.ui-navlink-pill[aria-current="page"] { background: var(--ui-accent-soft); }
.ui-navlink-underline { border-radius: 0; padding: 8px 2px; box-shadow: inset 0 -2px 0 transparent; }
.ui-navlink-underline[aria-current="page"] { color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-navlink-icon { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; font-size: 15px; line-height: 1; }
.ui-navlink-icon svg { width: 18px; height: 18px; }
.ui-navlink-badge {
  min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .ui-navlink { transition: none; } }


.ui-scrubbar { display: grid; gap: 0; min-width: 0; padding-inline: 10px; container-type: inline-size; color: var(--ui-fg); font: 12px/1.3 var(--ui-font); }
/* Sideways is ours; a finger going up or down first is the page's, which ends the drag with pointercancel. */
.ui-scrubbar-rail {
  position: relative; display: flex; align-items: center; height: 56px; cursor: pointer; outline: none; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ui-scrubbar-own .ui-scrubbar-rail { touch-action: none; }
.ui-scrubbar-rail[aria-disabled="true"] { cursor: default; opacity: .55; }
.ui-scrubbar-line { position: relative; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: var(--ui-strong); transition: height .12s; }
.ui-scrubbar-held .ui-scrubbar-line { height: 9px; }
.ui-scrubbar-got { position: absolute; top: 0; bottom: 0; background: var(--ui-muted); opacity: .5; }
.ui-scrubbar-fill { position: absolute; inset: 0; background: var(--ui-accent); transform-origin: 0 50%; transform: scaleX(var(--ui-scrubbar-drag, var(--ui-scrubbar-at, 0))); }
.ui-scrubbar-thumb {
  position: absolute; top: 50%; left: calc(var(--ui-scrubbar-drag, var(--ui-scrubbar-at, 0)) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-surface); transition: scale .12s; pointer-events: none;
}
.ui-scrubbar-held .ui-scrubbar-thumb { scale: 1.35; }
.ui-scrubbar-rail:focus-visible .ui-scrubbar-thumb { box-shadow: 0 0 0 2px var(--ui-surface), var(--ui-focus); }
.ui-scrubbar-tip {
  position: absolute; left: 0; bottom: 100%; display: none; gap: 1px; justify-items: center; padding: 5px 10px; border-radius: var(--ui-radius-sm);
  background: var(--ui-fg); color: var(--ui-bg); box-shadow: var(--ui-shadow); pointer-events: none; white-space: nowrap; z-index: 3;
}
.ui-scrubbar-held .ui-scrubbar-tip { display: grid; }
.ui-scrubbar-tip-time { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-scrubbar-tip-rate { font-size: 11px; opacity: .8; }
.ui-scrubbar-tip-rate:empty { display: none; }
.ui-scrubbar-times { display: flex; justify-content: space-between; margin-top: -12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
/* With room, the times sit at the bar's ends and it keeps the row's height. */
@container (min-width: 460px) {
  .ui-scrubbar-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
  .ui-scrubbar-times { display: contents; }
  .ui-scrubbar-now { grid-column: 1; grid-row: 1; }
  .ui-scrubbar-left { grid-column: 3; grid-row: 1; }
  .ui-scrubbar-rail { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .ui-scrubbar-line, .ui-scrubbar-thumb { transition: none; } }


.ui-mdetail { container: ui-mdetail / inline-size; min-width: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-mdetail-in {
  display: grid; grid-template-columns: var(--ui-mdetail-w, 280px) minmax(0, 1fr); height: var(--ui-mdetail-h, 480px); min-width: 0;
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
}
.ui-mdetail-list { margin: 0; padding: 6px; overflow: auto; list-style: none; border-right: 1px solid var(--ui-border); outline: none; }
.ui-mdetail-list:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-mdetail-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; cursor: pointer;
}
.ui-mdetail-item:hover { background: var(--ui-subtle); }
.ui-mdetail-item[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-mdetail-item[aria-selected="true"] .ui-mdetail-title { color: var(--ui-accent); }
.ui-mdetail-list:focus-visible .ui-mdetail-active { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-mdetail-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ui-subtle); font-size: 15px; }
.ui-mdetail-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ui-mdetail-title, .ui-mdetail-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mdetail-title { font-weight: 500; }
.ui-mdetail-sub { color: var(--ui-muted); font-size: 13px; }
.ui-mdetail-meta { flex: none; align-self: flex-start; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-mdetail-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; }
.ui-mdetail-back {
  display: none; align-items: center; gap: 4px; width: fit-content; margin: 8px 8px 0; padding: 6px 10px 6px 6px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-mdetail-back:hover { background: var(--ui-accent-soft); }
.ui-mdetail-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mdetail-back svg { width: 16px; height: 16px; }
.ui-mdetail-body { flex: 1; padding: 20px; }
.ui-mdetail-body > :first-child { margin-top: 0; }
.ui-mdetail-empty { display: grid; place-items: center; height: 100%; color: var(--ui-muted); }
.ui-mdetail-pane[hidden], .ui-mdetail-panes[hidden] { display: none; }
.ui-mdetail-pane > :first-child { margin-top: 0; }
.ui-mdetail-pane > :last-child { margin-bottom: 0; }
@container ui-mdetail (max-width: 639px) {
  .ui-mdetail-in { grid-template-columns: minmax(0, 1fr); }
  .ui-mdetail-list { border-right: 0; }
  .ui-mdetail-detail, .ui-mdetail-showing .ui-mdetail-list { display: none; }
  .ui-mdetail-showing .ui-mdetail-detail { display: flex; }
  .ui-mdetail-back { display: inline-flex; }
}


.ui-netstat { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-netstat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--s); font-weight: 500; font-size: 13px;
  --t: var(--ui-success); --s: var(--ui-success-soft); }
.ui-netstat-pill[data-state="slow"] { --t: var(--ui-warning); --s: var(--ui-warning-soft); }
.ui-netstat-pill[data-state="offline"] { --t: var(--ui-danger); --s: var(--ui-danger-soft); }
.ui-netstat-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.ui-netstat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.ui-netstat-grid > div { padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-netstat-grid dt { color: var(--ui-muted); font-size: 12px; }
.ui-netstat-grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-netstat-say { margin: 8px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-netstat-say:empty { display: none; }
/* A wide pane has room for all four in a row. */
@container (min-width: 420px) { .ui-netstat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


.ui-member-card { display: grid; gap: 14px; min-width: 0; max-width: 380px; padding: 18px 20px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font);
  border-top: 4px solid var(--ui-accent); }
.ui-member-card-coop { margin: 0; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-member-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ui-member-card-photo, .ui-member-card-initials { flex: none; width: 56px; height: 56px; border-radius: 50%; }
.ui-member-card-photo { object-fit: cover; background: var(--ui-subtle); }
.ui-member-card-initials { display: grid; place-items: center; background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 19px; font-weight: 650; letter-spacing: .02em; }
.ui-member-card-who { display: grid; gap: 2px; min-width: 0; }
.ui-member-card .ui-member-card-name { display: block; margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.ui-member-card-name a { color: inherit; text-decoration: none; }
.ui-member-card-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-member-card-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-member-card-kind { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-member-card-status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--ui-subtle); color: var(--ui-muted); text-transform: capitalize; }
.ui-member-card-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui-member-card-active .ui-member-card-status { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-member-card-dormant .ui-member-card-status { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-member-card-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px 16px; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--ui-border); }
.ui-member-card-facts div { display: grid; gap: 1px; min-width: 0; }
.ui-member-card-facts dt { color: var(--ui-muted); font-size: 12px; }
.ui-member-card-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-member-card-facts time { white-space: nowrap; }
.ui-member-card-num { font-family: var(--ui-mono); font-size: 13px; }
.ui-member-card-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-member-card-dormant { border-top-color: var(--ui-warning); }
.ui-member-card-other { border-top-color: var(--ui-muted); }


.ui-code { padding: .12em .4em; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-fg);
  font: .9em var(--ui-mono); overflow-wrap: anywhere; }
.ui-code-accent { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-code-btn { position: relative; display: inline-flex; align-items: center; gap: .4em; border: 1px solid transparent; cursor: pointer;
  vertical-align: baseline; line-height: 1.3; transition: border-color .15s, background .15s; }
.ui-code-btn:hover { border-color: var(--ui-border); }
.ui-code-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-code-btn svg { flex: none; width: .95em; height: .95em; color: var(--ui-muted); }
.ui-code-ok svg { color: var(--ui-success); }
.ui-code-bad svg { color: var(--ui-danger); }
.ui-code-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 7px;
  border-radius: 4px; background: var(--ui-fg); color: var(--ui-bg); font: 500 11px/1.3 var(--ui-font); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ui-code-btn { transition: none; } }


.ui-asave { display: grid; gap: 14px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-asave-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-info-soft); color: var(--ui-fg); font-size: 13px; }
.ui-asave-offer span { flex: 1 1 200px; }
.ui-asave-field { display: grid; gap: 5px; min-width: 0; }
.ui-asave-label { font-size: 13px; font-weight: 500; }
.ui-asave-req { margin-left: 2px; color: var(--ui-danger); }
.ui-asave-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
textarea.ui-asave-input { height: auto; min-height: 96px; padding: 8px 10px; resize: vertical; }
.ui-asave-input:hover { border-color: var(--ui-strong); }
.ui-asave-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-asave-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-asave-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ui-asave-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-asave-check input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-asave-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-asave-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-asave-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-asave-status { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-asave-status[data-status="failed"], .ui-asave-status[data-status="blocked"] { color: var(--ui-warning); }
.ui-asave-btn { height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-asave-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-asave-btn:focus-visible, .ui-asave-send:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-asave-send { height: 38px; padding: 0 16px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px/1 var(--ui-font); cursor: pointer; }
.ui-asave-send:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
@media (prefers-reduced-motion: reduce) { .ui-asave-input { transition: none; } }


.ui-timeline { margin: 0; padding: 0; list-style: none; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-timeline-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 18px;
  --t: var(--ui-strong); }
.ui-timeline-item:last-child { padding-bottom: 0; }
.ui-timeline-item::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: -2px; width: 2px;
  border-radius: 1px; background: var(--ui-border); }
.ui-timeline-item:last-child::before { display: none; }
.ui-timeline-dot { width: 12px; height: 12px; margin: 5px 0 0 5px; border-radius: 50%; background: var(--ui-surface);
  border: 2.5px solid var(--t); }
.ui-timeline-accent { --t: var(--ui-accent); }
.ui-timeline-success { --t: var(--ui-success); }
.ui-timeline-warning { --t: var(--ui-warning); }
.ui-timeline-danger { --t: var(--ui-danger); }
.ui-timeline-info { --t: var(--ui-info); }
.ui-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ui-timeline-title { font-weight: 600; }
.ui-timeline-head time { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-timeline-body { margin: 2px 0 0; color: var(--ui-muted); }


.ui-logviewer { display: grid; gap: 8px; min-width: 0; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-logviewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-logviewer-lvl { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted); font: 500 12px/1 var(--ui-font); cursor: pointer; --t: var(--ui-muted); }
.ui-logviewer-lvl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t); opacity: .4; }
.ui-logviewer-lvl[aria-pressed="true"] { border-color: color-mix(in srgb, var(--t) 45%, var(--ui-border)); color: var(--ui-fg);
  background: color-mix(in srgb, var(--t) 10%, var(--ui-surface)); }
.ui-logviewer-lvl[aria-pressed="true"]::before { opacity: 1; }
.ui-logviewer-lvl:focus-visible, .ui-logviewer-wrapbtn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-logviewer-lvl b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-logviewer-debug, .ui-logviewer-trace { --t: var(--ui-muted); }
.ui-logviewer-info { --t: var(--ui-info); }
.ui-logviewer-warn { --t: var(--ui-warning); }
.ui-logviewer-error, .ui-logviewer-fatal { --t: var(--ui-danger); }
.ui-logviewer-search { flex: 1 1 160px; max-width: 260px; height: 30px; margin-left: auto; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px/1 var(--ui-font); }
.ui-logviewer-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-logviewer-wrapbtn { height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-muted); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-logviewer-wrapbtn[aria-pressed="true"] { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-logviewer-box { overflow: auto; padding: 8px 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-bg); color: var(--ui-fg); font: 12.5px/1.6 var(--ui-mono); }
.ui-logviewer-box:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-logviewer-line { display: flex; gap: 10px; padding: 0 12px; white-space: pre; }
.ui-logviewer-wrap .ui-logviewer-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-logviewer-line:hover { background: var(--ui-subtle); }
.ui-logviewer-line.ui-logviewer-error, .ui-logviewer-line.ui-logviewer-fatal { background: color-mix(in srgb, var(--ui-danger) 10%, transparent); }
.ui-logviewer-line.ui-logviewer-warn { background: color-mix(in srgb, var(--ui-warning) 8%, transparent); }
.ui-logviewer-n { flex: none; min-width: 3ch; color: var(--ui-muted); opacity: .6; text-align: right; user-select: none; -webkit-user-select: none; }
.ui-logviewer-time { flex: none; color: var(--ui-muted); }
.ui-logviewer-tag { flex: none; width: 5ch; color: var(--t); font-weight: 700; }
.ui-logviewer-src { flex: none; color: var(--ui-accent); }
.ui-logviewer-msg { min-width: 0; }
.ui-logviewer-box mark { border-radius: 2px; background: color-mix(in srgb, var(--ui-warning) 40%, transparent); color: inherit; }
.ui-logviewer-none { padding: 18px 12px; color: var(--ui-muted); font-family: var(--ui-font); text-align: center; }
.ui-logviewer-foot { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }


.ui-columns { container-type: inline-size; min-width: 0; }
.ui-columns-in {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: var(--ui-columns-tpl, none);
  gap: var(--ui-columns-gap, 16px); align-items: var(--ui-columns-align, stretch); min-width: 0;
}
.ui-columns-in > *, .ui-columns-in > quillo-raw > * { min-width: 0; }
@container (max-width: 479px) {
  .ui-columns-sm > .ui-columns-in { display: flex; flex-direction: column; }
  .ui-columns-sm.ui-columns-reverse > .ui-columns-in { flex-direction: column-reverse; }
  .ui-columns-sm > .ui-columns-in > *, .ui-columns-sm > .ui-columns-in > quillo-raw > * { flex: none; }
}
@container (max-width: 639px) {
  .ui-columns-md > .ui-columns-in { display: flex; flex-direction: column; }
  .ui-columns-md.ui-columns-reverse > .ui-columns-in { flex-direction: column-reverse; }
  .ui-columns-md > .ui-columns-in > *, .ui-columns-md > .ui-columns-in > quillo-raw > * { flex: none; }
}
@container (max-width: 899px) {
  .ui-columns-lg > .ui-columns-in { display: flex; flex-direction: column; }
  .ui-columns-lg.ui-columns-reverse > .ui-columns-in { flex-direction: column-reverse; }
  .ui-columns-lg > .ui-columns-in > *, .ui-columns-lg > .ui-columns-in > quillo-raw > * { flex: none; }
}


.ui-slope {
  --ui-slope-1: light-dark(#2a78d6, #3987e5); --ui-slope-2: light-dark(#eb6834, #d95926);
  --ui-slope-3: light-dark(#1baf7a, #199e70); --ui-slope-4: light-dark(#eda100, #c98500);
  --ui-slope-5: light-dark(#e87ba4, #d55181); --ui-slope-6: light-dark(#008300, #008300);
  --ui-slope-7: light-dark(#6250d6, #9085e9); --ui-slope-8: light-dark(#e34948, #e66767);
  --ui-slope-up: light-dark(#18794e, #4cc38a); --ui-slope-down: light-dark(#c62a2f, #ff6b6b); --ui-slope-flat: var(--ui-muted);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-slope-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-slope-s1 { --c: var(--ui-slope-1); } .ui-slope-s2 { --c: var(--ui-slope-2); } .ui-slope-s3 { --c: var(--ui-slope-3); }
.ui-slope-s4 { --c: var(--ui-slope-4); } .ui-slope-s5 { --c: var(--ui-slope-5); } .ui-slope-s6 { --c: var(--ui-slope-6); }
.ui-slope-s7 { --c: var(--ui-slope-7); } .ui-slope-s8 { --c: var(--ui-slope-8); }
.ui-slope-up { --c: var(--ui-slope-up); } .ui-slope-down { --c: var(--ui-slope-down); } .ui-slope-flat { --c: var(--ui-slope-flat); }
.ui-slope-wrap { padding: 0 clamp(90px, 26%, 170px); }
.ui-slope-heads { display: flex; justify-content: space-between; margin: 0 -40px 8px; color: var(--ui-muted); font-weight: 600; }
.ui-slope-heads span { width: 80px; text-align: center; }
.ui-slope-plot { position: relative; margin: 8px 0; }
.ui-slope-axis { position: absolute; top: -8px; bottom: -8px; width: 1px; background: var(--ui-border); }
.ui-slope-item { position: absolute; inset: 0; pointer-events: none; transition: opacity .15s ease; }
.ui-slope-plot:has(.ui-slope-item:hover) .ui-slope-item:not(:hover) { opacity: .18; }
.ui-slope-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-slope-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; }
.ui-slope-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.ui-slope-item:hover .ui-slope-line { stroke-width: 3; }
.ui-slope-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-slope-lab { position: absolute; display: flex; align-items: baseline; gap: 6px; max-width: clamp(84px, 26vw, 164px);
  transform: translateY(-50%); pointer-events: auto; white-space: nowrap; }
.ui-slope-lab.ui-slope-l { right: calc(100% + 10px); justify-content: flex-end; }
.ui-slope-lab.ui-slope-r { left: calc(100% + 10px); }
.ui-slope-lab b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-slope-name { overflow: hidden; color: var(--ui-muted); text-overflow: ellipsis; }
.ui-slope-chg { color: var(--c); font-size: 11px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-slope-item { transition: none; } }


.ui-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-pager-link {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.ui-pager-link:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-pager-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pager-next { grid-column: 2; text-align: right; flex-direction: row-reverse; }
.ui-pager-text { display: grid; gap: 1px; min-width: 0; }
.ui-pager-word { color: var(--ui-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ui-pager-title { font-weight: 600; color: var(--ui-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pager-link:hover .ui-pager-title { color: var(--ui-accent); }
.ui-pager-hint { color: var(--ui-muted); font-size: 13px; }
.ui-pager-arrow { flex: none; width: 18px; height: 18px; color: var(--ui-muted); }
.ui-pager-link:hover .ui-pager-arrow { color: var(--ui-accent); }
@media (max-width: 520px) {
  .ui-pager { grid-template-columns: 1fr; }
  .ui-pager-next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .ui-pager-link { transition: none; } }


.ui-shake { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-shake-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-shake-card[data-hit] { animation: ui-shake-hit .4s ease-out; }
.ui-shake-say { margin: 0; font-weight: 500; }
.ui-shake-meter { height: 8px; border-radius: 999px; overflow: hidden; background: var(--ui-subtle); }
.ui-shake-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--ui-accent); transform: scaleX(0); transform-origin: left; }
.ui-shake-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-shake-note:empty { display: none; }
/* One above the other: side by side, the main button would widen into the other's place as it goes, under the same finger. */
.ui-shake-bar { display: flex; flex-direction: column; gap: 8px; }
@keyframes ui-shake-hit { 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ui-shake-card[data-hit] { animation: none; } }
/* With room, the words and the meter on one side, the buttons on the other. */
@container (min-width: 420px) {
  .ui-shake-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .ui-shake-bar { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
}


.ui-budget-planner { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 760px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-budget-planner .ui-budget-planner-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-budget-planner-field { display: grid; gap: 5px; min-width: 0; max-width: 240px; }
.ui-budget-planner-field label, .ui-budget-planner-cell label { font-size: 13px; font-weight: 500; }
.ui-budget-planner input[type=text], .ui-budget-planner select { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-budget-planner input[type=text]:hover, .ui-budget-planner select:hover { border-color: var(--ui-strong); }
.ui-budget-planner input[type=text]:focus, .ui-budget-planner select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-budget-planner input[aria-invalid] { border-color: var(--ui-danger); }
.ui-budget-planner-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-budget-planner-row, .ui-budget-planner-labels { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 74px; gap: 8px; align-items: center; }
.ui-budget-planner-labels { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-budget-planner-cell { display: grid; gap: 3px; min-width: 0; }
.ui-budget-planner-cell label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-budget-planner-left { min-width: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-budget-planner-over { color: var(--ui-danger); }
.ui-budget-planner-bar { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-budget-planner-bar span { display: block; height: 100%; background: var(--ui-accent); }
.ui-budget-planner-bar .ui-budget-planner-full { background: var(--ui-danger); }
@container (max-width: 560px) {
  .ui-budget-planner-labels { display: none; }
  .ui-budget-planner-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 10px; }
  .ui-budget-planner-cell label { position: static; width: auto; height: auto; clip: auto; color: var(--ui-muted); font-size: 12px; }
}
.ui-budget-planner-btn { box-sizing: border-box; height: 34px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-budget-planner-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-budget-planner-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-budget-planner-btn:disabled { color: var(--ui-muted); cursor: not-allowed; }
.ui-budget-planner-add { justify-self: start; }
.ui-budget-planner-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-budget-planner-out { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-budget-planner-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 0; }
.ui-budget-planner-sums dt { color: var(--ui-muted); font-size: 12px; }
.ui-budget-planner-sums dd { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-budget-planner-rule { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-budget-planner-rule caption { padding-bottom: 4px; color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; }
.ui-budget-planner-rule th { padding: 3px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-budget-planner-rule td { padding: 4px 0; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-budget-planner-rule th + th, .ui-budget-planner-rule td + td { padding-left: 10px; }
.ui-budget-planner-rule th:first-child, .ui-budget-planner-rule td:first-child { text-align: left; }
.ui-budget-planner-rule td { overflow-wrap: anywhere; }
@container (max-width: 420px) { .ui-budget-planner-rule th:nth-child(4), .ui-budget-planner-rule td:nth-child(4) { display: none; } }
.ui-budget-planner-warn { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-budget-planner-warn li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 10px; border-radius: var(--ui-radius-sm);
  background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-budget-planner-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-budget-planner-move { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; align-items: end; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--ui-border); }
.ui-budget-planner-move legend { padding: 0; font-size: 13px; font-weight: 600; }
.ui-budget-planner-move .ui-budget-planner-field { max-width: none; }
.ui-budget-planner-moved { margin: 0; color: var(--ui-success); font-size: 13px; }


.ui-chord {
  --ui-chord-1: light-dark(#2a78d6, #3987e5); --ui-chord-2: light-dark(#eb6834, #d95926);
  --ui-chord-3: light-dark(#1baf7a, #199e70); --ui-chord-4: light-dark(#eda100, #c98500);
  --ui-chord-5: light-dark(#e87ba4, #d55181); --ui-chord-6: light-dark(#008300, #008300);
  --ui-chord-7: light-dark(#6250d6, #9085e9); --ui-chord-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-chord-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-chord-s1 { --c: var(--ui-chord-1); } .ui-chord-s2 { --c: var(--ui-chord-2); } .ui-chord-s3 { --c: var(--ui-chord-3); }
.ui-chord-s4 { --c: var(--ui-chord-4); } .ui-chord-s5 { --c: var(--ui-chord-5); } .ui-chord-s6 { --c: var(--ui-chord-6); }
.ui-chord-s7 { --c: var(--ui-chord-7); } .ui-chord-s8 { --c: var(--ui-chord-8); }
.ui-chord-box { max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.ui-chord-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-chord-arc { fill: var(--c); stroke: var(--ui-bg); stroke-width: .5; }
.ui-chord-rib { fill: var(--c); fill-opacity: .6; stroke: var(--ui-bg); stroke-width: .4; transition: opacity .15s ease; }
.ui-chord-name { fill: var(--ui-fg); font: 500 11px var(--ui-font); dominant-baseline: central; }
.ui-chord-box svg:has(.ui-chord-rib:hover) .ui-chord-rib:not(:hover) { opacity: .12; }
.ui-chord-box svg:has(.ui-chord-g1:hover) .ui-chord-rib:not(.ui-chord-t1),
.ui-chord-box svg:has(.ui-chord-g2:hover) .ui-chord-rib:not(.ui-chord-t2),
.ui-chord-box svg:has(.ui-chord-g3:hover) .ui-chord-rib:not(.ui-chord-t3),
.ui-chord-box svg:has(.ui-chord-g4:hover) .ui-chord-rib:not(.ui-chord-t4),
.ui-chord-box svg:has(.ui-chord-g5:hover) .ui-chord-rib:not(.ui-chord-t5),
.ui-chord-box svg:has(.ui-chord-g6:hover) .ui-chord-rib:not(.ui-chord-t6),
.ui-chord-box svg:has(.ui-chord-g7:hover) .ui-chord-rib:not(.ui-chord-t7),
.ui-chord-box svg:has(.ui-chord-g8:hover) .ui-chord-rib:not(.ui-chord-t8) { opacity: .08; }
@media (prefers-reduced-motion: reduce) { .ui-chord-rib { transition: none; } }


.ui-book-spread { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 320px; color: var(--ui-fg); background: var(--ui-bg); font-family: var(--ui-font); }
.ui-book-spread-bar { display: flex; align-items: center; gap: 4px; flex: none; min-height: 48px; padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-book-spread-title { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-book-spread-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-book-spread-btn:disabled { color: var(--ui-muted); opacity: .5; cursor: default; }
.ui-book-spread-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-book-spread-btn:not(:disabled):hover { background: var(--ui-subtle); } }
.ui-book-spread-view { position: relative; flex: 1; min-height: 0; margin: 20px max(28px, env(safe-area-inset-right)) 8px max(28px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; outline: none; touch-action: pan-y pinch-zoom; font-size: var(--size); line-height: 1.6; }
.ui-book-spread-ready { overflow: hidden; }
.ui-book-spread-view:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent); }
.ui-book-spread-flow { column-fill: auto; will-change: transform; }
.ui-book-spread-para { margin: 0 0 .8em; orphans: 2; widows: 2; }
.ui-book-spread-head { margin: 0 0 .7em; font-size: 1.3em; font-weight: 700; line-height: 1.25; break-after: avoid; }
.ui-book-spread-turning { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-book-spread-swiping { user-select: none; -webkit-user-select: none; }
.ui-book-spread-gutter { position: absolute; top: 48px; bottom: 28px; left: 50%; width: 1px; background: var(--ui-border); pointer-events: none; }
.ui-book-spread-foot { display: flex; justify-content: space-between; flex: none; padding: 2px max(28px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); color: var(--ui-muted); font: 13px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-book-spread-turning { transition: none; } }


.ui-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-comment-avatar {
  display: grid; place-items: center; grid-row: span 3; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 650; user-select: none;
}
.ui-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.ui-comment-name { font-weight: 600; }
.ui-comment-role { padding: 1px 6px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 600; }
.ui-comment-time { color: var(--ui-muted); font-size: 12px; }
.ui-comment-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-comment-actions { display: flex; gap: 4px; margin-left: -8px; }
.ui-comment-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-comment-btn svg { width: 15px; height: 15px; }
.ui-comment-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-comment-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-comment-btn[aria-pressed="true"] { color: var(--ui-danger); }
.ui-comment-btn[aria-pressed="true"] svg { fill: currentColor; }
.ui-comment-replies { grid-column: 2; display: grid; gap: 14px; margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--ui-border); }
.ui-comment-replies:empty { display: none; }


.ui-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-subtle); vertical-align: middle; }
.ui-theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 12px; border: 0;
  border-radius: 999px; background: transparent; color: var(--ui-muted); font: 500 13px/1 var(--ui-font); cursor: pointer;
  transition: background .15s, color .15s;
}
.ui-theme-toggle-btn:hover { color: var(--ui-fg); }
.ui-theme-toggle-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-theme-toggle-btn[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); }
.ui-theme-toggle-btn svg { flex: none; width: 16px; height: 16px; }
.ui-theme-toggle-one { padding: 0; border: 0; background: transparent; }
.ui-theme-toggle-one .ui-theme-toggle-btn { border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); }
.ui-theme-toggle-one .ui-theme-toggle-btn:hover { background: var(--ui-subtle); }
.ui-theme-toggle-sm .ui-theme-toggle-btn { height: 26px; min-width: 26px; padding: 0 9px; font-size: 12px; }
.ui-theme-toggle-sm .ui-theme-toggle-btn svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .ui-theme-toggle-btn { transition: none; } }


.ui-typing-indicator { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--ui-muted); font: 12px/1.3 var(--ui-font); }
.ui-typing-indicator:empty { min-height: 0; }
.ui-typing-indicator-dots { display: inline-flex; gap: 3px; padding: 7px 10px; border-radius: 12px; background: var(--ui-subtle); }
.ui-typing-indicator-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-muted); animation: ui-typing-indicator-dot 1.2s infinite ease-in-out; }
.ui-typing-indicator-dots i:nth-child(2) { animation-delay: .15s; }
.ui-typing-indicator-dots i:nth-child(3) { animation-delay: .3s; }
.ui-typing-indicator-inline { display: inline-flex; min-height: 0; }
@keyframes ui-typing-indicator-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ui-typing-indicator-dots i { animation: none; opacity: .7; } }


.ui-slot-finder { display: grid; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-slot-finder .ui-slot-finder-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-slot-finder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; }
.ui-slot-finder-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-slot-finder-field input, .ui-slot-finder-field textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-slot-finder-field textarea { font: 12px/1.5 var(--ui-mono); resize: vertical; }
.ui-slot-finder-field input:focus-visible, .ui-slot-finder-field textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-slot-finder-field [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-slot-finder-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.ui-slot-finder-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-slot-finder-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; }
.ui-slot-finder-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-slot-finder-head { margin: 0; font-size: 14px; font-weight: 650; }
.ui-slot-finder-slots { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-slot-finder-slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-slot-finder-partial { background: var(--ui-warning-soft); }
.ui-slot-finder-busy { color: var(--ui-warning); font-size: 12px; overflow-wrap: anywhere; }
.ui-slot-finder-pick { padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1.2 var(--ui-font); cursor: pointer; }
.ui-slot-finder-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-slot-finder-said { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-scanadd { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-scanadd h3 { margin: 0; font-size: 17px; }
.ui-scanadd-cols { display: grid; gap: 12px; min-width: 0; }
.ui-scanadd-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-scanadd-view {
  position: relative; display: grid; place-items: center; min-height: 140px; overflow: hidden; border-radius: var(--ui-radius); background: #0f0e17; color: #fff; aspect-ratio: 16 / 10;
}
.ui-scanadd-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-scanadd-aim { position: absolute; inset: 22% 8%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px; pointer-events: none; }
.ui-scanadd-aim::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #ff5a5a; }
.ui-scanadd-msg { position: relative; margin: 0; padding: 12px 16px; text-align: center; }
.ui-scanadd-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-scanadd-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin: 0; }
.ui-scanadd-form label { display: grid; gap: 2px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-scanadd-form input {
  box-sizing: border-box; width: 100%; height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font);
}
.ui-scanadd-form input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-scanadd-said { min-height: 20px; margin: 0; font-weight: 600; }
.ui-scanadd-bad { color: var(--ui-danger); }
.ui-scanadd-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-scanadd-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 4px 6px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle);
}
.ui-scanadd-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-scanadd-code { display: block; color: var(--ui-muted); font: 12px var(--ui-mono); }
.ui-scanadd-unknown { display: block; color: var(--ui-warning); font-size: 12px; font-weight: 400; }
.ui-scanadd-qty { display: inline-flex; align-items: center; }
.ui-scanadd-step {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg);
  font: 500 20px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-scanadd-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-scanadd-n { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-scanadd-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: var(--ui-muted); }
.ui-scanadd-empty { margin: 0; color: var(--ui-muted); }
@container (min-width: 600px) { .ui-scanadd-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } }


.ui-sessions { display: grid; gap: 12px; margin: 0; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-sessions-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-sessions-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 12px 16px; }
.ui-sessions-row + .ui-sessions-row { border-top: 1px solid var(--ui-border); }
.ui-sessions-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-muted); }
.ui-sessions-icon svg { width: 20px; height: 20px; }
.ui-sessions-current .ui-sessions-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-sessions-what { display: grid; gap: 1px; min-width: 0; }
.ui-sessions-name { font-weight: 600; }
.ui-sessions-this { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--ui-success-soft); color: var(--ui-success); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ui-sessions-meta { color: var(--ui-muted); font-size: 13px; }
.ui-sessions-meta span + span::before { content: " · "; }
.ui-sessions-ip { font-family: var(--ui-mono); font-size: 12px; }
.ui-sessions-btn { height: 30px; padding: 0 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; white-space: nowrap; }
.ui-sessions-btn:hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-sessions-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sessions-all { justify-self: start; }
.ui-sessions-empty { padding: 24px 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
@media (max-width: 480px) { .ui-sessions-row { grid-template-columns: auto minmax(0, 1fr); } .ui-sessions-row .ui-sessions-btn { grid-column: 2; justify-self: start; margin-top: 6px; } }


.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center;
  font: 14px/1.5 var(--ui-font); color: var(--ui-muted); }
.ui-empty-start { justify-items: start; text-align: left; }
.ui-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); }
.ui-empty-icon svg { width: 26px; height: 26px; }
.ui-empty-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ui-fg); }
.ui-empty-text { max-width: 42ch; }
.ui-empty-text > * { margin: 0; }
.ui-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.ui-empty-start .ui-empty-actions { justify-content: flex-start; }
.ui-empty-sm { padding: 24px 16px; }
.ui-empty-sm .ui-empty-icon { width: 44px; height: 44px; }
.ui-empty-sm .ui-empty-icon svg { width: 20px; height: 20px; }
.ui-empty-sm .ui-empty-title { font-size: 15px; }


.ui-bfeed { display: grid; gap: 14px; min-width: 0; max-width: 520px; margin: 0; padding: 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-bfeed-head { display: flex; align-items: center; gap: 12px; }
.ui-bfeed-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft);
  color: var(--ui-warning); }
.ui-bfeed-icon svg { width: 20px; height: 20px; }
.ui-bfeed .ui-bfeed-title { margin: 0; font-size: 17px; font-weight: 700; }
.ui-bfeed-text { margin: 2px 0 0; color: var(--ui-muted); }
.ui-bfeed-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-bfeed-feed { display: grid; gap: 5px; }
.ui-bfeed-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ui-bfeed-kind { padding: 0 6px; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; line-height: 18px; text-transform: uppercase; }
.ui-bfeed-row { display: flex; gap: 6px; }
.ui-bfeed-row input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 13px var(--ui-mono); }
.ui-bfeed-row input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bfeed-copy { position: relative; flex: none; display: inline-grid; min-width: 82px; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 13px var(--ui-font); cursor: pointer; }
.ui-bfeed-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ui-bfeed-copy svg { width: 14px; height: 14px; }
.ui-bfeed-copy:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-bfeed-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bfeed-copy .ui-bfeed-done { visibility: hidden; color: var(--ui-success); }
.ui-bfeed-ok .ui-bfeed-done { visibility: visible; } .ui-bfeed-ok .ui-bfeed-label { visibility: hidden; }
.ui-bfeed-ok { border-color: var(--ui-success); }
.ui-bfeed-bad-note { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-bfeed-readers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-bfeed-readers a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-fg); font-weight: 500;
  text-decoration: none; }
.ui-bfeed-readers a:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-bfeed-readers a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bfeed-what summary { display: inline-block; color: var(--ui-accent); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 3px; }
.ui-bfeed-what summary:hover { text-decoration: underline; }
.ui-bfeed-what summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bfeed-what p { margin: 6px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-bfeed-email { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ui-border); }
.ui-bfeed-email label { font-weight: 600; }
.ui-bfeed-email div { display: flex; gap: 6px; }
.ui-bfeed-email input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-bfeed-email input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bfeed-email button { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-bfeed-email button:hover { filter: brightness(1.08); }
.ui-bfeed-email button:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-collateral { display: grid; gap: 14px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font);
  --ui-collateral-tone: var(--ui-success); }
.ui-collateral-near { --ui-collateral-tone: var(--ui-warning); }
.ui-collateral-over { --ui-collateral-tone: var(--ui-danger); }
.ui-collateral-ltv { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-collateral-ltv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ui-collateral-ltv-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ui-collateral-ratio { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--ui-collateral-tone); font-variant-numeric: tabular-nums; }
.ui-collateral-ratio small { margin-left: 6px; color: var(--ui-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.ui-collateral-meter { position: relative; height: 12px; margin: 4px 0 18px; border-radius: 999px; background: var(--ui-subtle); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-collateral-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ui-collateral-tone); }
.ui-collateral-limit { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ui-fg); border-radius: 1px; }
.ui-collateral-limit span { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); color: var(--ui-muted); font-size: 11px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ui-collateral-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.ui-collateral-facts dt { color: var(--ui-muted); font-size: 12px; }
.ui-collateral-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-collateral-facts .ui-collateral-room dd { color: var(--ui-collateral-tone); }
.ui-collateral-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-collateral-item { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-collateral-item-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; }
.ui-collateral-kind { display: inline-block; margin-bottom: 2px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ui-collateral-name { margin: 0; font-size: 15px; font-weight: 600; }
.ui-collateral-detail { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-collateral-value { text-align: right; }
.ui-collateral-value strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.ui-collateral-value small { color: var(--ui-muted); font-size: 12px; }
.ui-collateral-share { height: 4px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-collateral-share span { display: block; height: 100%; background: var(--ui-accent); }
.ui-collateral-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-collateral-doc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--ui-border); border-radius: 999px;
  font-size: 12px; background: var(--ui-bg); }
.ui-collateral-doc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-strong); }
.ui-collateral-verified::before { background: var(--ui-success); }
.ui-collateral-pending::before { background: var(--ui-warning); }
.ui-collateral-missing { border-style: dashed; border-color: var(--ui-danger); color: var(--ui-danger); }
.ui-collateral-missing::before { background: var(--ui-danger); }
.ui-collateral-doc a { color: inherit; font-weight: 500; text-decoration: none; }
.ui-collateral-doc a:hover { text-decoration: underline; }
.ui-collateral-doc a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-collateral-doc-state { color: var(--ui-muted); }
.ui-collateral-none { margin: 0; color: var(--ui-muted); font-size: 12px; }


.ui-in-app-banner-host {
  position: fixed; inset: 0 0 auto 0; z-index: 70; display: flex; justify-content: center; box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); pointer-events: none;
}
.ui-in-app-banner {
  position: relative; display: flex; align-items: stretch; box-sizing: border-box; width: 100%; max-width: 480px; pointer-events: auto;
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 14px/1.35 var(--ui-font);
  /* Sideways is left to the page. */
  touch-action: pan-x; -webkit-touch-callout: none; user-select: none;
  animation: ui-in-app-banner-in .34s cubic-bezier(.22, 1, .36, 1); transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
@keyframes ui-in-app-banner-in { from { transform: translateY(calc(-100% - 16px)); } }
.ui-in-app-banner-out { transform: translateY(calc(-100% - 24px)); opacity: 0; }
.ui-in-app-banner-main {
  display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 10px 4px 10px 12px; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; touch-action: inherit;
}
.ui-in-app-banner-main:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-in-app-banner-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--ui-radius);
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 17px; font-weight: 700;
}
.ui-in-app-banner-text { display: block; flex: 1; min-width: 0; }
.ui-in-app-banner-top { display: flex; justify-content: space-between; gap: 8px; color: var(--ui-muted); font-size: 12px; }
.ui-in-app-banner-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-in-app-banner-body { display: -webkit-box; overflow: hidden; color: var(--ui-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ui-in-app-banner-close {
  display: grid; place-items: center; flex: none; align-self: center; width: 44px; height: 44px; margin-right: 4px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: inherit;
}
@media (hover: hover) { .ui-in-app-banner-close:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-in-app-banner-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-in-app-banner-close svg { width: 16px; height: 16px; }
.ui-in-app-banner-more {
  position: absolute; left: 50%; bottom: -9px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-subtle);
  color: var(--ui-muted); font-size: 11px; line-height: 16px; transform: translateX(-50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .ui-in-app-banner { animation: none; transition: none; } }


.ui-funnel-analyzer { display: grid; gap: 14px; min-width: 0; max-width: 760px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-funnel-analyzer .ui-funnel-analyzer-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-funnel-analyzer-scroll { position: relative; min-width: 0; overflow-x: auto; }
.ui-funnel-analyzer-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-funnel-analyzer-table { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-funnel-analyzer-table th { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.ui-funnel-analyzer-table th:first-child { text-align: left; }
.ui-funnel-analyzer-table td { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-funnel-analyzer-table td:first-child { text-align: left; }
.ui-funnel-analyzer-input { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-funnel-analyzer-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-funnel-analyzer-input[aria-invalid] { border-color: var(--ui-danger); }
.ui-funnel-analyzer-count { width: 110px; text-align: right; }
.ui-funnel-analyzer-track { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--ui-subtle); overflow: hidden; }
.ui-funnel-analyzer-fill { display: block; height: 100%; background: var(--ui-accent); }
.ui-funnel-analyzer-leaky td { background: var(--ui-danger-soft); }
.ui-funnel-analyzer-leaky .ui-funnel-analyzer-fill { background: var(--ui-danger); }
.ui-funnel-analyzer-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 13px var(--ui-font); cursor: pointer; }
.ui-funnel-analyzer-button:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-funnel-analyzer-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-funnel-analyzer-button:disabled { opacity: .55; cursor: not-allowed; }
.ui-funnel-analyzer-live { display: grid; gap: 8px; min-width: 0; }
.ui-funnel-analyzer-leak { margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; }
.ui-funnel-analyzer-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-funnel-analyzer-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-funnel-analyzer-whatif { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-funnel-analyzer-whatif legend { padding: 0 6px; font-weight: 600; }
.ui-funnel-analyzer-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-funnel-analyzer-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.ui-funnel-analyzer-field .ui-funnel-analyzer-input { height: 36px; }
.ui-funnel-analyzer-result { margin: 0; font-weight: 600; }
.ui-funnel-analyzer-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 480px) { .ui-funnel-analyzer-pair { grid-template-columns: minmax(0, 1fr); } }


.ui-swipe-toast-host {
  position: fixed; inset: auto 0 var(--ui-swipe-toast-bottom, 64px) 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-sizing: border-box; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none;
  transition: bottom .2s;
}
.ui-swipe-toast-host quillo-island { display: contents; }
.ui-swipe-toast-more { margin: 0; padding: 0 10px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font: 12px/20px var(--ui-font); pointer-events: auto; }
.ui-swipe-toast {
  display: flex; align-items: center; gap: 4px; box-sizing: border-box; width: 100%; max-width: 420px; min-height: 52px; padding: 2px 4px 2px 14px;
  border: 1px solid var(--ui-border); border-left: 3px solid var(--ui-swipe-toast-edge, var(--ui-border)); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.35 var(--ui-font); pointer-events: auto;
  /* Sideways is this gesture's; up and down still scroll the page. */
  touch-action: pan-y; -webkit-touch-callout: none; user-select: none;
  animation: ui-swipe-toast-in .26s cubic-bezier(.22, 1, .36, 1); transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
@keyframes ui-swipe-toast-in { from { transform: translateY(16px); opacity: 0; } }
.ui-swipe-toast-danger { --ui-swipe-toast-edge: var(--ui-danger); }
.ui-swipe-toast-success { --ui-swipe-toast-edge: var(--ui-success); }
.ui-swipe-toast-left, .ui-swipe-toast-right { opacity: 0; }
.ui-swipe-toast-left { transform: translateX(-110%); }
.ui-swipe-toast-right { transform: translateX(110%); }
.ui-swipe-toast-fade { transform: translateY(12px); opacity: 0; }
.ui-swipe-toast-text { flex: 1; min-width: 0; margin: 0; padding: 6px 0; overflow-wrap: anywhere; }
.ui-swipe-toast-undo {
  flex: none; min-width: 56px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-accent); font: 600 14px var(--ui-font); cursor: pointer; touch-action: inherit;
}
.ui-swipe-toast-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: inherit;
}
@media (hover: hover) { .ui-swipe-toast-undo:hover, .ui-swipe-toast-close:hover { background: var(--ui-subtle); } }
.ui-swipe-toast-undo:focus-visible, .ui-swipe-toast-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-swipe-toast-close svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .ui-swipe-toast { animation: none; transition: none; } .ui-swipe-toast-host { transition: none; } }


.ui-whats-new-host { display: contents; }
.ui-whats-new {
  box-sizing: border-box; inset: auto 0 0 0; width: 100%; max-width: 100vw; max-height: min(80dvh, calc(100dvh - env(safe-area-inset-top) - 16px)); margin: 0 auto; padding: 0;
  overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0; border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.45 var(--ui-font); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.ui-whats-new[open] { display: flex; flex-direction: column; animation: ui-whats-new-up .28s cubic-bezier(.2, .8, .2, 1); }
.ui-whats-new::backdrop { background: var(--ui-overlay); }
.ui-whats-new-held { transition: none; }
@keyframes ui-whats-new-up { from { transform: translateY(100%); } }
.ui-whats-new-grip {
  flex: none; display: grid; place-items: center; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-whats-new-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-whats-new-grip:focus-visible { outline: none; }
.ui-whats-new-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-whats-new-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 20px 8px; container: ui-whats-new / inline-size; }
.ui-whats-new-body h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; }
.ui-whats-new-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ui-whats-new-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 12px; min-width: 0; }
.ui-whats-new-art { display: grid; place-items: center; grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 22px; line-height: 1; }
.ui-whats-new-art svg { width: 24px; height: 24px; }
.ui-whats-new-item h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: 16px; line-height: 1.3; }
.ui-whats-new-item small { color: var(--ui-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ui-whats-new-item p { margin: 2px 0 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-whats-new-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--ui-accent); font-size: 14px; }
.ui-whats-new-rest { margin: 12px 0 0; color: var(--ui-muted); font-size: 14px; }
.ui-whats-new-foot { flex: none; padding: 8px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); }
@container ui-whats-new (min-width: 520px) { .ui-whats-new-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } }
@media (min-width: 700px) {
  .ui-whats-new { inset: 0; width: min(640px, 90vw); height: fit-content; margin: auto; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); }
  .ui-whats-new-grip { display: none; }
  .ui-whats-new-body { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ui-whats-new { transition: none; } .ui-whats-new[open] { animation: none; } }


.ui-polarc {
  --ui-polarc-1: light-dark(#2a78d6, #3987e5); --ui-polarc-2: light-dark(#eb6834, #d95926);
  --ui-polarc-3: light-dark(#1baf7a, #199e70); --ui-polarc-4: light-dark(#eda100, #c98500);
  --ui-polarc-5: light-dark(#e87ba4, #d55181); --ui-polarc-6: light-dark(#008300, #008300);
  --ui-polarc-7: light-dark(#6250d6, #9085e9); --ui-polarc-8: light-dark(#e34948, #e66767);
  --ui-polarc-9: var(--ui-strong);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; min-width: 0; margin: 0;
  font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-polarc-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-polarc-s1 { --c: var(--ui-polarc-1); } .ui-polarc-s2 { --c: var(--ui-polarc-2); } .ui-polarc-s3 { --c: var(--ui-polarc-3); }
.ui-polarc-s4 { --c: var(--ui-polarc-4); } .ui-polarc-s5 { --c: var(--ui-polarc-5); } .ui-polarc-s6 { --c: var(--ui-polarc-6); }
.ui-polarc-s7 { --c: var(--ui-polarc-7); } .ui-polarc-s8 { --c: var(--ui-polarc-8); }
.ui-polarc-s9 { --c: var(--ui-polarc-9); }
.ui-polarc-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ui-polarc-ring { fill: none; stroke: color-mix(in srgb, var(--ui-border) 80%, transparent); stroke-width: 1; }
.ui-polarc-rim { stroke: var(--ui-strong); }
.ui-polarc-slice { fill: var(--c); fill-opacity: .8; stroke: var(--ui-bg); stroke-width: 1.5; stroke-linejoin: round; }
.ui-polarc-part { transition: opacity .15s ease; }
.ui-polarc-part:hover .ui-polarc-slice { fill-opacity: 1; }
.ui-polarc-name { fill: var(--ui-fg); font-size: 12px; }
.ui-polarc-tick { fill: var(--ui-muted); font-size: 10px; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--ui-bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ui-polarc-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  flex: 1 1 180px; min-width: 0; max-width: 300px; margin: 0; padding: 0; list-style: none; }
.ui-polarc-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; transition: opacity .15s ease; }
.ui-polarc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ui-polarc-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-polarc-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-polarc:has(.ui-polarc-p1:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p1),
.ui-polarc:has(.ui-polarc-p2:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p2),
.ui-polarc:has(.ui-polarc-p3:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p3),
.ui-polarc:has(.ui-polarc-p4:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p4),
.ui-polarc:has(.ui-polarc-p5:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p5),
.ui-polarc:has(.ui-polarc-p6:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p6),
.ui-polarc:has(.ui-polarc-p7:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p7),
.ui-polarc:has(.ui-polarc-p8:hover) :is(.ui-polarc-part, .ui-polarc-legend li):not(.ui-polarc-p8) { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .ui-polarc-part, .ui-polarc-legend li { transition: none; } }


.ui-coupon { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-coupon-label { font-size: 13px; font-weight: 500; }
.ui-coupon-row { display: flex; gap: 8px; }
.ui-coupon-box { flex: 1; display: flex; align-items: center; height: 38px; padding: 0 12px; gap: 8px; min-width: 0; background: var(--ui-surface);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); transition: border-color .15s, box-shadow .15s; }
.ui-coupon-box:hover { border-color: var(--ui-strong); }
.ui-coupon-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-coupon-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 14px var(--ui-mono); letter-spacing: .04em; text-transform: uppercase; }
.ui-coupon-box input::placeholder { color: var(--ui-muted); opacity: 1; font-family: var(--ui-font); letter-spacing: 0; text-transform: none; }
.ui-coupon-box input:read-only { color: var(--ui-success); font-weight: 600; }
.ui-coupon-ok { flex: none; width: 16px; height: 16px; color: var(--ui-success); }
.ui-coupon-btn { flex: none; height: 38px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle);
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; transition: background .15s, border-color .15s; }
.ui-coupon-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-surface); }
.ui-coupon-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-coupon-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-coupon-invalid .ui-coupon-box, .ui-coupon-invalid .ui-coupon-box:hover { border-color: var(--ui-danger); }
.ui-coupon-applied .ui-coupon-box { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-coupon-msg { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-coupon-msg-ok { color: var(--ui-success); }
.ui-coupon-msg-bad { color: var(--ui-danger); }
.ui-coupon-sm .ui-coupon-box, .ui-coupon-sm .ui-coupon-btn { height: 30px; font-size: 13px; }
.ui-coupon-sm .ui-coupon-box { padding: 0 10px; }
.ui-coupon-sm .ui-coupon-btn { padding: 0 12px; }
.ui-coupon-disabled { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ui-coupon-box, .ui-coupon-btn { transition: none; } }


.ui-topbar { position: relative; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; container-type: inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); --ui-topbar-h: 56px; }
.ui-topbar-bar {
  position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: 4px; box-sizing: border-box; height: calc(var(--ui-topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); background: var(--ui-bg);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s, box-shadow .2s;
}
.ui-topbar-hidden { transform: translate3d(0, -100%, 0); }
.ui-topbar-tinted { background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface)); box-shadow: 0 1px 0 var(--ui-border); }
.ui-topbar-title { flex: 1; min-width: 0; margin: 0 0 0 8px; overflow: hidden; font-size: 20px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ui-topbar-nav, .ui-topbar-actions button {
  display: inline-grid; flex: none; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.ui-topbar-nav svg, .ui-topbar-actions svg { width: 24px; height: 24px; }
.ui-topbar-nav:focus-visible, .ui-topbar-actions button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-topbar-nav:hover, .ui-topbar-actions button:hover { background: var(--ui-subtle); } }
.ui-topbar-actions { display: flex; flex: none; align-items: center; }
.ui-topbar-scroll {
  box-sizing: border-box; height: 100%; padding-top: calc(var(--ui-topbar-h) + env(safe-area-inset-top)); overflow: auto; overscroll-behavior: contain; outline: none;
}
.ui-topbar-scroll:focus-visible { box-shadow: inset var(--ui-focus); }
@container (min-width: 600px) { .ui-topbar-bar, .ui-topbar-scroll { --ui-topbar-h: 64px; } .ui-topbar-bar { padding-inline: 12px; } .ui-topbar-title { font-size: 22px; } }
/* After the wider pane's: a phone on its side is wide, and short. */
@media (max-height: 430px) { .ui-topbar-bar, .ui-topbar-scroll { --ui-topbar-h: 48px; } }
@media (prefers-reduced-motion: reduce) { .ui-topbar-bar { transition: none; } }


.ui-kiosk-screen { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 320px; color: var(--ui-fg); background: var(--ui-bg); font: 16px/1.45 var(--ui-font); }
.ui-kiosk-screen-on { position: fixed; inset: 0; z-index: 1000; height: 100dvh; min-height: 0; overscroll-behavior: none; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-kiosk-screen-on input, .ui-kiosk-screen-on textarea { user-select: text; -webkit-user-select: text; }
.ui-kiosk-screen-start { display: grid; place-content: center; justify-items: center; gap: 14px; flex: 1; padding: 24px; text-align: center; }
.ui-kiosk-screen-start h2 { margin: 0; font-size: 28px; line-height: 1.2; }
.ui-kiosk-screen-start p { max-width: 460px; margin: 0; color: var(--ui-muted); }
.ui-kiosk-screen-facts { display: grid; gap: 4px; margin: 0; padding: 0; color: var(--ui-muted); font-size: 14px; list-style: none; }
.ui-kiosk-screen-go { min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 17px var(--ui-font); cursor: pointer; }
.ui-kiosk-screen-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-kiosk-screen-stage { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.ui-kiosk-screen-corner { position: absolute; z-index: 5; width: 72px; height: 72px; -webkit-tap-highlight-color: transparent; }
.ui-kiosk-screen-top-right { top: 0; right: 0; }
.ui-kiosk-screen-top-left { top: 0; left: 0; }
.ui-kiosk-screen-bottom-right { right: 0; bottom: 0; }
.ui-kiosk-screen-bottom-left { left: 0; bottom: 0; }
.ui-kiosk-screen-layer { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; background: var(--ui-overlay); }
.ui-kiosk-screen-card { box-sizing: border-box; display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); max-height: 100%; overflow-y: auto; padding: 22px; border-radius: calc(var(--ui-radius) + 6px); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); text-align: center; }
.ui-kiosk-screen-card h2 { margin: 0; font-size: 22px; }
.ui-kiosk-screen-card p { margin: 0; color: var(--ui-muted); }
.ui-kiosk-screen-left { display: grid; place-items: center; width: 88px; height: 88px; border: 4px solid var(--ui-accent); border-radius: 50%; color: var(--ui-accent); font: 700 36px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-kiosk-screen-lost { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3; transform: translateX(-50%); min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ui-fg); color: var(--ui-bg); font: 600 15px var(--ui-font); box-shadow: var(--ui-shadow-lg); cursor: pointer; }
.ui-kiosk-screen-dots { display: flex; gap: 12px; height: 18px; }
.ui-kiosk-screen-dot { width: 14px; height: 14px; border: 2px solid var(--ui-strong); border-radius: 50%; }
.ui-kiosk-screen-dot-on { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-kiosk-screen-wrong { animation: ui-kiosk-screen-shake .3s; }
@keyframes ui-kiosk-screen-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ui-kiosk-screen-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; }
.ui-kiosk-screen-digit { height: 64px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); color: var(--ui-fg); font: 600 22px var(--ui-font); cursor: pointer; }
.ui-kiosk-screen-digit:disabled { opacity: .5; cursor: default; }
.ui-kiosk-screen-digit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-kiosk-screen-word { font-size: 14px; }
.ui-kiosk-screen-note { min-height: 22px; font-size: 14px; }
.ui-kiosk-screen-bad { color: var(--ui-danger) !important; }
@media (prefers-reduced-motion: reduce) { .ui-kiosk-screen-wrong { animation: none; } }


.ui-network {
  --ui-network-1: light-dark(#2a78d6, #3987e5); --ui-network-2: light-dark(#eb6834, #d95926);
  --ui-network-3: light-dark(#1baf7a, #199e70); --ui-network-4: light-dark(#eda100, #c98500);
  --ui-network-5: light-dark(#e87ba4, #d55181); --ui-network-6: light-dark(#008300, #008300);
  --ui-network-7: light-dark(#6250d6, #9085e9); --ui-network-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-network-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-network-s1 { --c: var(--ui-network-1); } .ui-network-s2 { --c: var(--ui-network-2); } .ui-network-s3 { --c: var(--ui-network-3); }
.ui-network-s4 { --c: var(--ui-network-4); } .ui-network-s5 { --c: var(--ui-network-5); } .ui-network-s6 { --c: var(--ui-network-6); }
.ui-network-s7 { --c: var(--ui-network-7); } .ui-network-s8 { --c: var(--ui-network-8); }
.ui-network-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-network-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-network-key { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ui-network-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-network-link { stroke: var(--ui-strong); stroke-linecap: round; stroke-opacity: .8; }
.ui-network-link:hover { stroke: var(--ui-fg); stroke-opacity: 1; }
.ui-network-node circle { fill: var(--c); stroke: var(--ui-bg); stroke-width: .6; }
.ui-network-node text { fill: var(--ui-fg); font-family: var(--ui-font); font-size: 2.3px; text-anchor: middle;
  paint-order: stroke; stroke: var(--ui-bg); stroke-width: .6px; pointer-events: none; }
.ui-network-node:hover circle { stroke: var(--ui-fg); stroke-width: .8; }
.ui-network-node:hover text { font-weight: 700; }
.ui-network-nolabels .ui-network-node text { visibility: hidden; }
.ui-network-nolabels .ui-network-node:hover text { visibility: visible; }
.ui-network-plain { --c: var(--ui-network-1); }


.ui-quick-add { container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); background: var(--ui-surface); }
.ui-quick-add-docked { position: fixed; left: 0; right: 0; bottom: var(--ui-quick-add-kb, 0px); z-index: 20; padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  border-top: 1px solid var(--ui-border); box-shadow: 0 -4px 16px rgba(15, 14, 24, .08); }
.ui-quick-add-docked[data-up="1"] { padding-bottom: 8px; }
.ui-quick-add-inner { display: grid; gap: 6px; }
.ui-quick-add-row { display: flex; gap: 8px; min-width: 0; }
.ui-quick-add-field { position: relative; flex: 1; min-width: 0; height: 46px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); overflow: hidden; }
.ui-quick-add-field:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
/* The line is drawn twice, in the same font: the field's own text is clear, its caret shows, and the marks show through it. */
.ui-quick-add-mirror, .ui-quick-add-input { box-sizing: border-box; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 12px; border: 0; font: 16px/44px var(--ui-font); letter-spacing: 0; white-space: pre; }
.ui-quick-add-mirror { overflow: hidden; color: var(--ui-fg); pointer-events: none; }
.ui-quick-add-input { background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ui-fg); outline: none; }
.ui-quick-add-input::placeholder { color: var(--ui-muted); -webkit-text-fill-color: var(--ui-muted); opacity: 1; }
.ui-quick-add-mark { border-radius: 3px; }
.ui-quick-add-mark[data-kind="date"], .ui-quick-add-mark[data-kind="time"], .ui-quick-add-mark[data-kind="repeat"] { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-quick-add-mark[data-kind="list"] { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-quick-add-mark[data-kind="priority"] { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-quick-add-add { flex: none; min-width: 64px; min-height: 46px; padding: 0 14px; border: 0; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-quick-add-add:disabled { background: var(--ui-subtle); color: var(--ui-muted); cursor: default; }
.ui-quick-add-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-quick-add-chips { display: flex; gap: 6px; min-height: 44px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ui-quick-add-chips:empty { display: none; }
.ui-quick-add-chips::-webkit-scrollbar { display: none; }
.ui-quick-add-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-quick-add-chip[data-kind="date"] { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-quick-add-chip[data-kind="list"] { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-quick-add-chip[data-kind="priority"] { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-quick-add-chip svg { width: 12px; height: 12px; }
.ui-quick-add-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-quick-add-say { min-height: 18px; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-quick-add-say:empty { display: none; }
/* On a tablet what was found stands beside the line, so the bar stays one row tall. */
@container (min-width: 600px) {
  .ui-quick-add-inner { grid-template-columns: minmax(0, 1fr) minmax(180px, 40%); align-items: center; }
  .ui-quick-add-chips { justify-content: flex-end; }
  .ui-quick-add-chips:empty { display: flex; }
  .ui-quick-add-say { grid-column: 1 / -1; }
}


.ui-checklist { margin: 0; padding: 0; list-style: none; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-checklist li { display: flex; align-items: flex-start; gap: 10px; margin: .4em 0; overflow-wrap: anywhere; }
.ui-checklist-icon { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; margin-top: .08em;
  border-radius: 50%; }
.ui-checklist-icon svg { width: .8em; height: .8em; }
.ui-checklist-done .ui-checklist-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-checklist-todo .ui-checklist-icon { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-checklist-empty .ui-checklist-todo .ui-checklist-icon { background: none; border: 1.5px solid var(--ui-strong); color: transparent; }
.ui-checklist-empty .ui-checklist-todo { color: var(--ui-muted); }
.ui-checklist-strike .ui-checklist-done .ui-checklist-text { text-decoration: line-through; color: var(--ui-muted); }
.ui-checklist-summary { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-checklist-sm { font-size: 13px; }
.ui-checklist-lg { font-size: 17px; }


.ui-dt { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-dt-search { width: min(100%, 280px); height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface) no-repeat 11px 50% / 15px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  color: var(--ui-fg); font: inherit; }
.ui-dt-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-dt-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-dt-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dt table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-dt th, .ui-dt td { padding: 9px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-dt tbody tr:last-child td { border-bottom: 0; }
.ui-dt th { position: sticky; top: 0; z-index: 1; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-dt .ui-dt-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-dt-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0;
  border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; }
.ui-dt-sort:hover { color: var(--ui-fg); }
.ui-dt-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dt-right .ui-dt-sort { flex-direction: row-reverse; }
.ui-dt-arrow { width: 12px; height: 12px; opacity: .35; }
[aria-sort] .ui-dt-sort { color: var(--ui-fg); }
[aria-sort] .ui-dt-arrow { opacity: 1; color: var(--ui-accent); }
.ui-dt tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-dt-zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-dt-zebra tbody tr:hover td { background: var(--ui-subtle); }
.ui-dt-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); white-space: normal; }
.ui-dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-dt-pages { display: flex; gap: 6px; }
.ui-dt-pages button { height: 30px; padding: 0 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-dt-pages button:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-dt-pages button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dt-pages button:disabled { opacity: .5; cursor: not-allowed; }


.ui-sbarc {
  --ui-sbarc-1: light-dark(#2a78d6, #3987e5); --ui-sbarc-2: light-dark(#eb6834, #d95926);
  --ui-sbarc-3: light-dark(#1baf7a, #199e70); --ui-sbarc-4: light-dark(#eda100, #c98500);
  --ui-sbarc-5: light-dark(#e87ba4, #d55181); --ui-sbarc-6: light-dark(#008300, #008300);
  --ui-sbarc-7: light-dark(#6250d6, #9085e9); --ui-sbarc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-sbarc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-sbarc-s1 { --c: var(--ui-sbarc-1); } .ui-sbarc-s2 { --c: var(--ui-sbarc-2); } .ui-sbarc-s3 { --c: var(--ui-sbarc-3); }
.ui-sbarc-s4 { --c: var(--ui-sbarc-4); } .ui-sbarc-s5 { --c: var(--ui-sbarc-5); } .ui-sbarc-s6 { --c: var(--ui-sbarc-6); }
.ui-sbarc-s7 { --c: var(--ui-sbarc-7); } .ui-sbarc-s8 { --c: var(--ui-sbarc-8); }
.ui-sbarc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-sbarc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-sbarc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-sbarc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-sbarc-y { position: relative; min-width: 24px; }
.ui-sbarc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-sbarc-plot { position: relative; }
.ui-sbarc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-sbarc-grid.ui-sbarc-zero { background: var(--ui-strong); }
.ui-sbarc-cols { position: absolute; inset: 0; display: flex; }
.ui-sbarc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-sbarc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-sbarc-bar { position: absolute; top: 0; bottom: 0; left: 50%; width: min(48px, 64%); transform: translateX(-50%); }
.ui-sbarc-seg { position: absolute; left: 0; right: 0; bottom: var(--a); height: var(--b); min-height: 1px; box-sizing: border-box;
  background: var(--c); background-clip: padding-box; }
.ui-sbarc-on { border-bottom: 2px solid transparent; }
.ui-sbarc-top { border-radius: 4px 4px 0 0; }
.ui-sbarc-val { position: absolute; left: 50%; bottom: calc(var(--a) + 3px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-sbarc-x { display: flex; margin-top: 6px; }
.ui-sbarc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-sbarc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 140px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-sbarc-col:first-child .ui-sbarc-tip { left: 0; transform: translateY(-100%); }
.ui-sbarc-col:last-child .ui-sbarc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-sbarc-col:hover .ui-sbarc-tip { display: block; }
.ui-sbarc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-sbarc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-sbarc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sbarc-tip i { min-width: 3.4em; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.ui-sbarc-tip .ui-sbarc-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ui-border); }


.demo-anchored { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; height: 100%; box-sizing: border-box; padding: 14px; font: 14px/1.5 var(--ui-font); }
.demo-anchored-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-anchored-mid { display: grid; place-items: center; color: var(--ui-muted); text-align: center; }
.demo-anchored-long p { margin: 0 0 12px; }
.demo-anchored-field { display: grid; gap: 6px; }
.demo-anchored-field input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }


.ui-bento-wrap { container-type: inline-size; min-width: 0; }
.ui-bento {
  display: grid; grid-template-columns: repeat(var(--ui-bento-cols, 4), minmax(0, 1fr)); grid-auto-rows: var(--ui-bento-row, 180px);
  grid-auto-flow: dense; gap: var(--ui-bento-gap, 16px); min-width: 0; color: var(--ui-fg); font: 14px/1.5 var(--ui-font);
}
.ui-bento-tile {
  position: relative; display: flex; flex-direction: column; grid-column: span var(--ui-bento-c, 1); grid-row: span var(--ui-bento-r, 1);
  min-width: 0; overflow: hidden; padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: inherit; text-decoration: none;
}
.ui-bento-head { display: grid; gap: 2px; margin-bottom: 8px; }
.ui-bento-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-bento-sub { margin: 0; color: var(--ui-muted); }
.ui-bento-body { flex: 1; min-height: 0; }
.ui-bento-body > :first-child { margin-top: 0; }
.ui-bento-body > :last-child { margin-bottom: 0; }
.ui-bento-image { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; }
.ui-bento-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, color-mix(in srgb, var(--ui-surface) 90%, transparent)); }
.ui-bento-tile:has(.ui-bento-image) { isolation: isolate; justify-content: flex-end; }
.ui-bento-subtle { background: var(--ui-subtle); border-color: transparent; }
.ui-bento-accent { background: var(--ui-accent-soft); border-color: transparent; }
.ui-bento-accent .ui-bento-title { color: var(--ui-accent); }
.ui-bento-success { background: var(--ui-success-soft); border-color: transparent; }
.ui-bento-success .ui-bento-title { color: var(--ui-success); }
.ui-bento-warning { background: var(--ui-warning-soft); border-color: transparent; }
.ui-bento-warning .ui-bento-title { color: var(--ui-warning); }
.ui-bento-danger { background: var(--ui-danger-soft); border-color: transparent; }
.ui-bento-danger .ui-bento-title { color: var(--ui-danger); }
.ui-bento-info { background: var(--ui-info-soft); border-color: transparent; }
.ui-bento-info .ui-bento-title { color: var(--ui-info); }
a.ui-bento-tile { transition: border-color .15s, box-shadow .15s; }
a.ui-bento-tile:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
a.ui-bento-tile:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@container (max-width: 639px) {
  .ui-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-bento-tile { grid-column: span 1; }
  .ui-bento-wide { grid-column: span 2; }
}
@container (max-width: 399px) {
  .ui-bento { grid-template-columns: minmax(0, 1fr); }
  .ui-bento-tile, .ui-bento-wide { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) { a.ui-bento-tile { transition: none; } }


.ui-leaderboard { margin: 0; padding: 4px; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--ui-radius-sm); }
.ui-leaderboard-row + .ui-leaderboard-row { box-shadow: 0 -1px 0 var(--ui-border); }
.ui-leaderboard-top { background: color-mix(in srgb, var(--ui-warning-soft) 45%, transparent); }
.ui-leaderboard-you, .ui-leaderboard-you + .ui-leaderboard-row { box-shadow: none; }
.ui-leaderboard-you { background: var(--ui-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 35%, transparent); }
.ui-leaderboard-rank { flex: none; width: 30px; text-align: center; color: var(--ui-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-leaderboard-medal { font-size: 20px; line-height: 1; }
.ui-leaderboard-pic { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden;
  border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 13px; font-weight: 600; }
.ui-leaderboard-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-leaderboard-who { flex: 1; min-width: 0; display: grid; }
.ui-leaderboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: inherit; text-decoration: none; }
a.ui-leaderboard-name:hover { color: var(--ui-accent); text-decoration: underline; }
a.ui-leaderboard-name:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-leaderboard-meta { color: var(--ui-muted); font-size: 12px; }
.ui-leaderboard-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font-size: 11px; font-weight: 600; vertical-align: 1px; }
.ui-leaderboard-score { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-leaderboard-unit { margin-left: 3px; color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-leaderboard-gap { padding: 0 12px; color: var(--ui-muted); text-align: center; letter-spacing: .2em; }


.ui-btt {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
}
.ui-btt-inline { position: sticky; right: auto; bottom: 12px; z-index: 2; height: 0; }
.ui-btt-inline .ui-btt-btn { position: absolute; right: 12px; bottom: 0; }
.ui-btt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow); font: 500 14px/1 var(--ui-font); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background .15s, border-color .15s, box-shadow .15s;
}
.ui-btt-btn svg { width: 18px; height: 18px; flex: none; }
.ui-btt-btn:not(.ui-btt-labelled) { width: 44px; padding: 0; }
.ui-btt-shown .ui-btt-btn { opacity: 1; visibility: visible; transform: none; }
.ui-btt-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-btt-btn:focus-visible { outline: none; box-shadow: var(--ui-shadow), var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-btt-btn { transition: none; } }


.ui-camera-capture { display: grid; gap: 10px; max-width: 480px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-camera-capture-view {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ui-radius);
  background: var(--ui-subtle); color: var(--ui-muted); text-align: center;
}
.ui-camera-capture-view video, .ui-camera-capture-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-camera-capture-mirror video { transform: scaleX(-1); }
.ui-camera-capture-view video[hidden], .ui-camera-capture-view img[hidden] { display: none; }
.ui-camera-capture-msg { display: grid; justify-items: center; gap: 8px; max-width: 80%; padding: 16px; }
.ui-camera-capture-msg svg { width: 32px; height: 32px; }
.ui-camera-capture-bad { color: var(--ui-danger); }
.ui-camera-capture-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-camera-capture canvas { display: none; }


.ui-prose { max-width: 68ch; font: 16px/1.7 var(--ui-font); color: var(--ui-fg); overflow-wrap: anywhere; }
.ui-prose-sm { font-size: 14px; line-height: 1.65; }
.ui-prose-lg { font-size: 18px; line-height: 1.75; }
.ui-prose > :first-child { margin-top: 0; }
.ui-prose > :last-child { margin-bottom: 0; }
.ui-prose p, .ui-prose ul, .ui-prose ol, .ui-prose blockquote, .ui-prose pre, .ui-prose table, .ui-prose figure,
.ui-prose dl, .ui-prose details { margin: 0 0 1.1em; }
.ui-prose h1, .ui-prose h2, .ui-prose h3, .ui-prose h4, .ui-prose h5, .ui-prose h6 {
  margin: 1.7em 0 .55em; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; color: var(--ui-fg); }
.ui-prose h1 { font-size: 2em; line-height: 1.15; letter-spacing: -.02em; }
.ui-prose h2 { font-size: 1.5em; }
.ui-prose h3 { font-size: 1.25em; }
.ui-prose h4 { font-size: 1.1em; }
.ui-prose h5 { font-size: 1em; }
.ui-prose h6 { font-size: .85em; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: .4em; }
.ui-prose a { color: var(--ui-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ui-prose a:hover { text-decoration-thickness: 2px; }
.ui-prose a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-prose strong { font-weight: 600; }
.ui-prose ul, .ui-prose ol { padding-left: 1.5em; }
.ui-prose li { margin: .3em 0; }
.ui-prose li > ul, .ui-prose li > ol { margin: .3em 0; }
.ui-prose li::marker { color: var(--ui-muted); }
.ui-prose ul:has(> li > input[type="checkbox"]) { padding-left: .25em; list-style: none; }
.ui-prose li > input[type="checkbox"] { margin: 0 .5em 0 0; vertical-align: -.1em; }
.ui-prose blockquote { margin-left: 0; padding: .25em 0 .25em 1.1em; border-left: 3px solid var(--ui-accent); color: var(--ui-muted); }
.ui-prose blockquote > :last-child { margin-bottom: 0; }
.ui-prose code { padding: .12em .35em; border-radius: 4px; background: var(--ui-subtle); font: .9em var(--ui-mono); }
.ui-prose pre { padding: 14px 16px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); font: .875em/1.6 var(--ui-mono); tab-size: 4; }
.ui-prose pre code { padding: 0; border-radius: 0; background: none; font: inherit; }
.ui-prose kbd { padding: .1em .4em; border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--ui-surface); font: .85em var(--ui-mono); }
.ui-prose mark { padding: 0 .15em; border-radius: 3px; background: color-mix(in srgb, var(--ui-warning) 28%, transparent); color: inherit; }
.ui-prose table { width: 100%; border-collapse: collapse; font-size: .95em; line-height: 1.5; }
.ui-prose th, .ui-prose td { padding: .5em .75em; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.ui-prose th { font-weight: 600; border-bottom-color: var(--ui-strong); }
.ui-prose tbody tr:last-child td { border-bottom-color: var(--ui-strong); }
.ui-prose img, .ui-prose video { max-width: 100%; height: auto; border-radius: var(--ui-radius-sm); }
.ui-prose figcaption { margin-top: .5em; font-size: .875em; color: var(--ui-muted); text-align: center; }
.ui-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ui-border); }
.ui-prose dt { font-weight: 600; }
.ui-prose dd { margin: 0 0 .5em 1.5em; }
.ui-prose del { color: var(--ui-muted); }
.ui-prose sup, .ui-prose sub { font-size: .75em; line-height: 0; }


.ui-consent-checkbox { display: grid; gap: 4px; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-consent-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ui-consent-checkbox-label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-consent-checkbox-box {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 2px;
  background: var(--ui-surface); border: 1px solid var(--ui-strong); border-radius: 4px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ui-consent-checkbox-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--ui-accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s;
}
.ui-consent-checkbox-label:hover .ui-consent-checkbox-box { border-color: var(--ui-accent); }
.ui-consent-checkbox-label input:checked + .ui-consent-checkbox-box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-consent-checkbox-label input:checked + .ui-consent-checkbox-box::after { transform: rotate(45deg) scale(1); }
.ui-consent-checkbox-label input:focus-visible + .ui-consent-checkbox-box { box-shadow: var(--ui-focus); }
.ui-consent-checkbox-text a { color: var(--ui-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; border-radius: 3px; }
.ui-consent-checkbox-text a:hover { text-decoration-thickness: 2px; }
.ui-consent-checkbox-text a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-consent-checkbox-req { margin-left: 2px; color: var(--ui-danger); }
.ui-consent-checkbox-hint, .ui-consent-checkbox-error { margin: 0 0 0 28px; font-size: 13px; color: var(--ui-muted); }
.ui-consent-checkbox-error { color: var(--ui-danger); }
.ui-consent-checkbox-invalid .ui-consent-checkbox-box { border-color: var(--ui-danger); }
.ui-consent-checkbox-disabled { opacity: .55; }
.ui-consent-checkbox-disabled .ui-consent-checkbox-label { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-consent-checkbox-box, .ui-consent-checkbox-box::after { transition: none; } }


.ui-notification-list { display: grid; gap: 12px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-notification-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-notification-list-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 650; }
.ui-notification-list-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ui-notification-list-all { padding: 4px 8px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-accent);
  font: 500 13px/1.2 var(--ui-font); cursor: pointer; }
.ui-notification-list-all:hover { background: var(--ui-accent-soft); }
.ui-notification-list-all:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-notification-list-day { margin: 4px 0 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ui-notification-list-items { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; }
.ui-notification-list-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 14px; background: var(--ui-surface); }
.ui-notification-list-item + .ui-notification-list-item { border-top: 1px solid var(--ui-border); }
.ui-notification-list-unread { background: color-mix(in srgb, var(--ui-accent-soft) 55%, var(--ui-surface)); }
.ui-notification-list-unread::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ui-accent); }
.ui-notification-list-icon { --t: var(--ui-info); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--t) 15%, transparent); color: var(--t); }
.ui-notification-list-icon svg { width: 16px; height: 16px; }
.ui-notification-list-success { --t: var(--ui-success); } .ui-notification-list-warning { --t: var(--ui-warning); }
.ui-notification-list-danger { --t: var(--ui-danger); } .ui-notification-list-mention { --t: var(--ui-accent); }
.ui-notification-list-body { display: grid; gap: 2px; min-width: 0; }
.ui-notification-list-name { margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.ui-notification-list-unread .ui-notification-list-name { font-weight: 650; }
.ui-notification-list-name a { color: inherit; text-decoration: none; }
.ui-notification-list-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-notification-list-name a:focus-visible, .ui-notification-list-links a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-notification-list-text { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-notification-list-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 13px; }
.ui-notification-list-links a { color: var(--ui-accent); font-weight: 500; text-decoration: none; }
.ui-notification-list-links a:hover { text-decoration: underline; }
.ui-notification-list-side { display: grid; justify-items: end; align-content: start; gap: 4px; }
.ui-notification-list-time { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-notification-list-btns { display: flex; gap: 2px; }
.ui-notification-list-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-notification-list-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-notification-list-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-notification-list-btn svg { width: 14px; height: 14px; }
.ui-notification-list-empty { padding: 28px 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }


.ui-broll { display: grid; gap: 14px; margin: 0; font: 15px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-broll .ui-broll-title { margin: 0; font-size: 20px; font-weight: 700; }
.ui-broll .ui-broll-group { margin: 8px 0 0; color: var(--ui-muted); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ui-broll-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-broll-blog { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 12px 0;
  border-bottom: 1px solid var(--ui-border); }
.ui-broll-badge { grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 16px; font-weight: 700; }
.ui-broll-badge img { width: 100%; height: 100%; object-fit: cover; }
.ui-broll-name { min-width: 0; font-weight: 650; }
.ui-broll-name a { color: var(--ui-fg); text-decoration: none; border-radius: 3px; }
.ui-broll-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-broll-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-broll-author { margin-left: 6px; color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-broll-feed { grid-row: 1; grid-column: 3; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ui-radius-sm);
  color: var(--ui-muted); }
.ui-broll-feed:hover { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-broll-feed:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-broll-feed svg { width: 16px; height: 16px; }
.ui-broll-about { grid-column: 2; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-broll-latest { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 2px 0 0; font-size: 13px; }
.ui-broll-latest small { color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-broll-latest a { color: var(--ui-fg); text-decoration: none; border-radius: 3px; }
.ui-broll-latest a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-broll-latest a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-broll-latest time { color: var(--ui-muted); white-space: nowrap; }
.ui-broll-latest time::before { content: "·"; margin-right: 6px; }
.ui-broll-fresh time { color: var(--ui-success); font-weight: 600; }
.ui-broll-opml { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--ui-accent); font-size: 14px; font-weight: 600;
  text-decoration: none; border-radius: 3px; }
.ui-broll-opml:hover { text-decoration: underline; }
.ui-broll-opml:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-broll-opml svg { width: 15px; height: 15px; }


.ui-rotation { position: relative; min-width: 0; height: var(--ui-rotation-h, 100%); }
.ui-rotation-box { container: ui-rotation / size; }
.ui-rotation-grid {
  display: grid; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; gap: var(--ui-rotation-gap, 12px);
  grid-template-areas: var(--ui-rotation-p-areas, none); grid-template-columns: var(--ui-rotation-p-cols, none); grid-template-rows: var(--ui-rotation-p-rows, none);
  grid-auto-columns: minmax(0, 1fr); --ui-rotation-place: var(--ui-rotation-p-place);
}
/* The arrangement is CSS alone, so it changes in the same frame as the turn: no script runs first, so nothing flashes. */
@media (orientation: landscape) {
  .ui-rotation-screen > .ui-rotation-grid {
    grid-template-areas: var(--ui-rotation-l-areas, none); grid-template-columns: var(--ui-rotation-l-cols, none); grid-template-rows: var(--ui-rotation-l-rows, none);
    --ui-rotation-place: var(--ui-rotation-l-place);
  }
}
@container ui-rotation (orientation: landscape) {
  .ui-rotation-grid {
    grid-template-areas: var(--ui-rotation-l-areas, none); grid-template-columns: var(--ui-rotation-l-cols, none); grid-template-rows: var(--ui-rotation-l-rows, none);
    --ui-rotation-place: var(--ui-rotation-l-place);
  }
}
.ui-rotation-area { min-width: 0; min-height: 0; }
/* Not Chrome's own scroll anchoring: Safari has none, so both go by the one below. */
.ui-rotation-area-scroll { overflow: auto; overflow-anchor: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Out of sight by visibility, not display: what is not laid out forgets its scroll. */
.ui-rotation-area[data-only="landscape"] { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
@media (orientation: portrait) {
  .ui-rotation-screen .ui-rotation-area[data-only="portrait"] { position: static; width: auto; height: auto; visibility: visible; }
}
@media (orientation: landscape) {
  .ui-rotation-screen .ui-rotation-area[data-only="landscape"] { position: static; width: auto; height: auto; visibility: visible; }
  .ui-rotation-screen .ui-rotation-area[data-only="portrait"] { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
}
.ui-rotation-box .ui-rotation-area[data-only="portrait"] { position: static; width: auto; height: auto; visibility: visible; }
@container ui-rotation (orientation: landscape) {
  .ui-rotation-area[data-only="landscape"] { position: static; width: auto; height: auto; visibility: visible; }
  .ui-rotation-area[data-only="portrait"] { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
}


.ui-tax-brackets { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-tax-brackets .ui-tax-brackets-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-tax-brackets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 14px; }
.ui-tax-brackets-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-tax-brackets-field label { font-size: 13px; font-weight: 500; }
.ui-tax-brackets-field input { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-tax-brackets-field input:hover, .ui-tax-brackets-data textarea:hover { border-color: var(--ui-strong); }
.ui-tax-brackets-field input:focus, .ui-tax-brackets-data textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-tax-brackets-field input[aria-invalid], .ui-tax-brackets-data textarea[aria-invalid] { border-color: var(--ui-danger); }
.ui-tax-brackets-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-tax-brackets-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-tax-brackets-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-tax-brackets-out { display: grid; gap: 12px; min-width: 0; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-tax-brackets-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-tax-brackets-table th { padding: 4px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-tax-brackets-table td { padding: 4px 0; border-bottom: 1px solid var(--ui-border); text-align: right; overflow-wrap: anywhere; }
.ui-tax-brackets-table th:first-child, .ui-tax-brackets-table td:first-child { text-align: left; }
.ui-tax-brackets-table th + th, .ui-tax-brackets-table td + td { padding-left: 10px; }
.ui-tax-brackets-next td { font-weight: 650; }
.ui-tax-brackets-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; }
.ui-tax-brackets-sums dt { color: var(--ui-muted); }
.ui-tax-brackets-sums dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-tax-brackets-home { padding-top: 4px; color: var(--ui-fg) !important; font-size: 16px; font-weight: 700; }
.ui-tax-brackets-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-tax-brackets-raise { margin: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); font-weight: 500; }
.ui-tax-brackets-data { display: grid; gap: 6px; min-width: 0; }
.ui-tax-brackets-data summary { width: fit-content; font-size: 13px; font-weight: 500; cursor: pointer; }
.ui-tax-brackets-data summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 3px; }
.ui-tax-brackets-data label { display: block; margin: 6px 0 4px; color: var(--ui-muted); font-size: 12px; }
.ui-tax-brackets-data textarea { box-sizing: border-box; width: 100%; min-height: 110px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); }


.ui-exprinput { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-exprinput-label { font-size: 13px; font-weight: 500; }
.ui-exprinput-req { margin-left: 2px; color: var(--ui-danger); }
.ui-exprinput-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-mono);
  font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.ui-exprinput-control::placeholder { color: var(--ui-muted); opacity: 1; font-family: var(--ui-font); }
.ui-exprinput-control:hover { border-color: var(--ui-strong); }
.ui-exprinput-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-exprinput-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-exprinput-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-exprinput-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-exprinput-out { margin: 0; min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-exprinput-out strong { color: var(--ui-fg); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-exprinput-note { display: block; font-size: 12px; }
.ui-exprinput-bad { color: var(--ui-danger); }
.ui-exprinput-where { display: block; margin: 2px 0 0; padding: 4px 8px; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-fg);
  font: 13px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-exprinput-where mark { border-radius: 2px; background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 700;
  text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ui-exprinput-control { transition: none; } }


.ui-scrollprog { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: var(--h, 3px); background: transparent; pointer-events: none;
  --t: var(--ui-accent); }
.ui-scrollprog-bottom { top: auto; bottom: 0; }
.ui-scrollprog-inline { position: sticky; top: 0; left: auto; right: auto; z-index: 3; margin-bottom: calc(-1 * var(--h, 3px)); }
.ui-scrollprog-fill { height: 100%; width: 0; background: var(--t); transition: width .1s linear; }
.ui-scrollprog-success { --t: var(--ui-success); }
.ui-scrollprog-info { --t: var(--ui-info); }
.ui-scrollprog-warning { --t: var(--ui-warning); }
.ui-scrollprog-danger { --t: var(--ui-danger); }
.ui-scrollprog-neutral { --t: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-scrollprog-fill { transition: none; } }


.ui-sd { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; font: 14px/1.4 var(--ui-font);
  color: var(--ui-fg); --t: var(--ui-strong); --d: 8px; }
.ui-sd-sm { --d: 6px; gap: 5px; font-size: 13px; }
.ui-sd-lg { --d: 10px; gap: 8px; font-size: 15px; }
.ui-sd-online, .ui-sd-ok { --t: var(--ui-success); }
.ui-sd-away, .ui-sd-warning { --t: var(--ui-warning); }
.ui-sd-busy, .ui-sd-error { --t: var(--ui-danger); }
.ui-sd-info { --t: var(--ui-info); }
.ui-sd-dot { position: relative; flex: none; width: var(--d); height: var(--d); border-radius: 50%; background: var(--t); }
.ui-sd-offline .ui-sd-dot, .ui-sd-unknown .ui-sd-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--t); }
.ui-sd-pulse .ui-sd-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--t);
  animation: ui-sd-pulse 1.6s ease-out infinite; }
@keyframes ui-sd-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ui-sd-pulse .ui-sd-dot::after { animation: none; transform: scale(1.9); opacity: .25; }
}


.ui-hero { display: grid; gap: 32px; align-items: center; padding: 56px 24px; font: 16px/1.6 var(--ui-font); color: var(--ui-fg); }
.ui-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-hero-lg { padding: 88px 24px; gap: 48px; }
.ui-hero-words { display: grid; gap: 14px; justify-items: start; text-align: left; }
.ui-hero-center .ui-hero-words { justify-items: center; text-align: center; max-width: 720px; margin: 0 auto; }
.ui-hero-eyebrow { margin: 0; color: var(--ui-accent); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ui-hero-title { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.ui-hero-lg .ui-hero-title { font-size: clamp(38px, 6.5vw, 64px); }
.ui-hero-text { margin: 0; max-width: 58ch; color: var(--ui-muted); font-size: 18px; }
.ui-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ui-hero-center .ui-hero-actions { justify-content: center; }
.ui-hero-side { min-width: 0; }
.ui-hero-side > img { display: block; width: 100%; height: auto; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg); }
.ui-hero-side > :first-child { margin-top: 0; }
@media (max-width: 760px) {
  .ui-hero { padding: 40px 16px; }
  .ui-hero-split { grid-template-columns: minmax(0, 1fr); }
}


.ui-video-capture { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-video-capture-body { display: grid; gap: 10px; }
.ui-video-capture-frame {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 4; max-height: 70dvh; width: 100%; margin: 0 auto;
  border-radius: var(--ui-radius); background: #111; color: #eee; text-align: center;
}
.ui-video-capture-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-video-capture-frame video[hidden] { display: none; }
.ui-video-capture-review { object-fit: contain !important; background: #000; }
.ui-video-capture-msg { z-index: 1; max-width: 80%; padding: 16px; }
.ui-video-capture-clock {
  position: absolute; top: 10px; left: 50%; z-index: 2; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font: 600 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-video-capture-go { position: absolute; bottom: 14px; left: 50%; z-index: 2; width: 84px; height: 84px; transform: translateX(-50%); }
.ui-video-capture-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ui-video-capture-ring circle { fill: none; stroke-width: 6; }
.ui-video-capture-ring-back { stroke: rgba(255, 255, 255, .4); }
.ui-video-capture-ring-left { stroke: var(--ui-danger); }
.ui-video-capture-shutter {
  position: absolute; inset: 10px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ui-danger);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ui-video-capture-shutter:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ui-video-capture-shutter span { display: block; width: 44px; height: 44px; border-radius: 50%; background: currentColor; transition: border-radius .15s, transform .15s; }
.ui-video-capture-on .ui-video-capture-shutter span { border-radius: 8px; transform: scale(.6); }
.ui-video-capture-side { display: grid; gap: 8px; align-content: start; }
.ui-video-capture-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-video-capture-bar > * { flex: 1 1 auto; }
.ui-video-capture-file {
  position: relative; display: none; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; overflow: hidden; flex: 1 1 auto;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 16px/1 var(--ui-font); cursor: pointer;
}
.ui-video-capture-file-on { display: inline-flex; }
.ui-video-capture-file input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ui-video-capture-file:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-video-capture-note, .ui-video-capture-hint { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-video-capture-why { margin: 0; color: var(--ui-danger); font-size: 13px; }
/* A tablet, or a wide pane: the frame beside its controls, and upright clips stay upright. */
@container (min-width: 440px) {
  .ui-video-capture-body { grid-template-columns: minmax(0, 1fr) 170px; align-items: start; gap: 16px; }
  .ui-video-capture-bar { flex-direction: column; }
  .ui-video-capture-bar > * { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-video-capture-shutter span { transition: none; } }


.ui-arings { container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-arings-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ui-arings-pic { position: relative; flex: none; width: min(100%, var(--ui-arings-size)); aspect-ratio: 1; }
.ui-arings-pic svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ui-arings-pic circle { fill: none; }
.ui-arings-track { stroke: color-mix(in srgb, var(--t) 16%, transparent); }
.ui-arings-arc { stroke: var(--t); stroke-linecap: round; transition: stroke-dasharray .45s ease;
  animation: ui-arings-draw .9s cubic-bezier(.3, .7, .2, 1) backwards; }
.ui-arings-lap { stroke: color-mix(in srgb, var(--t) 74%, #fff); animation-delay: .85s; animation-duration: .6s; }
.ui-arings-pic .ui-arings-head { fill: color-mix(in srgb, var(--t) 74%, #fff); stroke: rgba(0, 0, 0, .32); stroke-width: 1.5; animation: ui-arings-show .2s 1.3s backwards; }
.ui-arings-none { visibility: hidden; }
@keyframes ui-arings-draw { from { stroke-dashoffset: var(--ui-arings-d); opacity: 0; } 6% { opacity: 1; } }
@keyframes ui-arings-show { from { opacity: 0; } }
.ui-arings-center { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 650; font-size: 13px; color: var(--ui-muted); pointer-events: none; }
.ui-arings-side { width: 100%; min-width: 0; }
.ui-arings-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-arings-legend { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-arings-item { position: relative; display: grid; grid-template-columns: 12px 1fr auto; align-items: baseline; gap: 2px 8px; }
.ui-arings-dot { align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--t); }
.ui-arings-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-arings-pct { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--t); }
.ui-arings-of { grid-column: 2 / -1; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-arings-tone-accent { --t: var(--ui-accent); }
.ui-arings-tone-success { --t: var(--ui-success); }
.ui-arings-tone-warning { --t: var(--ui-warning); }
.ui-arings-tone-danger { --t: var(--ui-danger); }
.ui-arings-tone-info { --t: var(--ui-info); }
@container (min-width: 360px) {
  .ui-arings-in { flex-direction: row; gap: 22px; }
  .ui-arings-pic { width: min(52%, var(--ui-arings-size)); }
}
@container (min-width: 620px) {
  .ui-arings-in { gap: 40px; }
  .ui-arings-pic { width: calc(var(--ui-arings-size) * 1.4); }
  .ui-arings-legend { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  .ui-arings-pct { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-arings-arc, .ui-arings-pic .ui-arings-head { animation: none; transition: none; }
}


.ui-utm { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-utm .ui-utm-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-utm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ui-utm-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.ui-utm-field label { font-size: 13px; font-weight: 500; }
.ui-utm-req { color: var(--ui-muted); font-weight: 400; }
.ui-utm-input { box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-utm-input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-utm-input[aria-invalid] { border-color: var(--ui-danger); }
.ui-utm-sent { color: var(--ui-muted); font: 12px var(--ui-mono); overflow-wrap: anywhere; }
.ui-utm-recent { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-utm-pick { padding: 1px 7px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 12px/1.5 var(--ui-font); cursor: pointer; }
.ui-utm-pick:hover { border-color: var(--ui-accent); }
.ui-utm-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-utm-options { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-utm-option { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ui-utm-option select { height: 30px; padding: 0 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-utm-option select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-utm-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-utm-list li { padding: 6px 10px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); overflow-wrap: anywhere; }
.ui-utm-list.ui-utm-bad li { border-left-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-utm-result { display: grid; gap: 6px; }
.ui-utm-result h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-utm-link { margin: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 13px/1.5 var(--ui-mono); overflow-wrap: anywhere; }
.ui-utm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-utm-btn { height: 30px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-utm-btn:hover { background: var(--ui-subtle); }
.ui-utm-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-utm-note { color: var(--ui-muted); font-size: 13px; }


.ui-treetable { min-width: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-treetable table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-treetable th, .ui-treetable td { padding: 8px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-treetable thead th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-treetable tbody tr:last-child td { border-bottom: 0; }
.ui-treetable tbody tr { outline: none; }
.ui-treetable tbody tr:focus-visible td { box-shadow: inset 0 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent); }
.ui-treetable tbody tr:focus-visible td:first-child { box-shadow: inset 2px 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent); }
.ui-treetable tbody tr:focus-visible td:last-child { box-shadow: inset -2px 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent); }
.ui-treetable tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-treetable-zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-treetable .ui-treetable-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-treetable-first { display: flex; align-items: center; gap: 4px; padding-left: calc((var(--ui-treetable-level) - 1) * 20px); }
.ui-treetable-arrow { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0;
  border-radius: 4px; background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-treetable-arrow:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-treetable-arrow:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-treetable-arrow svg { width: 12px; height: 12px; transition: transform .15s; }
[aria-expanded="true"] .ui-treetable-arrow svg { transform: rotate(90deg); }
.ui-treetable-leaf { flex: none; width: 22px; }
.ui-treetable-parent .ui-treetable-first { font-weight: 500; }
.ui-treetable-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-treetable-arrow svg { transition: none; } }


.ui-pay-history { display: grid; gap: 12px; min-width: 0; padding: 16px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-pay-history-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ui-pay-history-title { margin: 0; font-size: 15px; font-weight: 650; }
.ui-pay-history-rate { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-pay-history-rate b { color: var(--ui-fg); }
.ui-pay-history-scroll { overflow-x: auto; }
.ui-pay-history table { border-collapse: separate; border-spacing: 4px; margin: -4px; font-variant-numeric: tabular-nums; }
.ui-pay-history th { padding: 0 2px; color: var(--ui-muted); font-size: 11px; font-weight: 600; text-align: center; }
.ui-pay-history thead th abbr { text-decoration: none; }
.ui-pay-history tbody th { padding-right: 8px; text-align: left; font-size: 12px; color: var(--ui-fg); }
.ui-pay-history td { padding: 0; }
.ui-pay-history-cell { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 5px; font-size: 11px; font-weight: 700;
  background: var(--ui-subtle); color: var(--ui-muted); }
.ui-pay-history-ok { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-pay-history-30 { background: color-mix(in srgb, var(--ui-warning) 22%, transparent); color: color-mix(in srgb, var(--ui-warning) 75%, var(--ui-fg)); }
.ui-pay-history-60 { background: color-mix(in srgb, var(--ui-danger) 40%, var(--ui-warning)); color: #fff; }
.ui-pay-history-90 { background: var(--ui-danger); color: #fff; }
.ui-pay-history-none { background: transparent; box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-pay-history-blank { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 55%, transparent); }
.ui-pay-history-out { visibility: hidden; }
.ui-pay-history-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-pay-history-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-pay-history-legend .ui-pay-history-cell { width: 26px; height: 20px; font-size: 10px; }
.ui-pay-history-legend b { color: var(--ui-fg); font-weight: 650; font-variant-numeric: tabular-nums; }


.ui-syncbar { container-type: inline-size; box-sizing: border-box; min-width: 0; color: var(--ui-fg); font: 14px/1.35 var(--ui-font); }
.ui-syncbar-top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-syncbar-bottom { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-syncbar-in { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-syncbar-top .ui-syncbar-in, .ui-syncbar-bottom .ui-syncbar-in { border: 0; border-radius: 0; }
.ui-syncbar[data-state="saved"] { --ui-syncbar-tone: var(--ui-success); }
.ui-syncbar[data-state="syncing"] { --ui-syncbar-tone: var(--ui-accent); }
.ui-syncbar[data-state="offline"], .ui-syncbar[data-stale] { --ui-syncbar-tone: var(--ui-warning); }
.ui-syncbar[data-state="failed"] { --ui-syncbar-tone: var(--ui-danger); }
.ui-syncbar-icon { flex: none; width: 20px; height: 20px; color: var(--ui-syncbar-tone); }
.ui-syncbar[data-state="syncing"] .ui-syncbar-icon { animation: ui-syncbar-turn 1.1s linear infinite; }
.ui-syncbar-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ui-syncbar-word { font-weight: 600; }
.ui-syncbar-detail { overflow-wrap: anywhere; color: var(--ui-muted); font-size: 13px; }
.ui-syncbar-retry { flex: none; min-width: 72px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-syncbar-retry:disabled { color: var(--ui-muted); cursor: default; }
.ui-syncbar-retry:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-syncbar-retry:hover:enabled { border-color: var(--ui-strong); background: var(--ui-subtle); } }
@container (min-width: 520px) {
  .ui-syncbar-text { flex-direction: row; align-items: baseline; gap: 10px; }
}
@keyframes ui-syncbar-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-syncbar[data-state="syncing"] .ui-syncbar-icon { animation: none; } }


.ui-fu { display: grid; gap: 8px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-fu-label { font-size: 13px; font-weight: 500; }
.ui-fu-req { margin-left: 2px; color: var(--ui-danger); }
.ui-fu-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-fu-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-fu-zone {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  padding: 22px 16px; border: 1.5px dashed var(--ui-strong); border-radius: var(--ui-radius); background: var(--ui-subtle);
  color: var(--ui-muted); text-align: center; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-fu-zone input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-fu-zone:hover { border-color: var(--ui-accent); }
.ui-fu-zone:has(input:focus-visible) { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fu-over { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-fu-invalid { border-color: var(--ui-danger); }
.ui-fu-zone > svg { width: 30px; height: 30px; color: var(--ui-accent); }
.ui-fu-zone-text { display: grid; gap: 2px; }
.ui-fu-zone-text b { color: var(--ui-fg); font-weight: 500; }
.ui-fu-browse {
  display: inline-block; margin-left: 4px; padding: 3px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-accent); font-weight: 500;
}
.ui-fu-zone:hover .ui-fu-browse { border-color: var(--ui-accent); }
.ui-fu-rules { font-size: 13px; }
.ui-fu:has(input:disabled) .ui-fu-zone { opacity: .55; }
.ui-fu-zone:has(input:disabled), .ui-fu-zone input:disabled { cursor: not-allowed; border-color: var(--ui-strong); }
.ui-fu-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-fu-file {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 8px 8px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface);
}
.ui-fu-bad { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); background: var(--ui-danger-soft); }
.ui-fu-thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--ui-subtle); }
.ui-fu-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px;
  background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); font: 700 10px/1 var(--ui-font); letter-spacing: .02em;
  --k: var(--ui-muted);
}
.ui-fu-k-image { --k: var(--ui-success); } .ui-fu-k-pdf { --k: var(--ui-danger); } .ui-fu-k-doc { --k: var(--ui-info); }
.ui-fu-k-sheet { --k: var(--ui-success); } .ui-fu-k-archive { --k: var(--ui-warning); } .ui-fu-k-audio, .ui-fu-k-video { --k: var(--ui-accent); }
.ui-fu-meta { display: grid; flex: 1; min-width: 0; }
.ui-fu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ui-fu-size { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-fu-why { color: var(--ui-danger); font-size: 12px; }
.ui-fu-x {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-fu-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-fu-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fu-x svg { width: 14px; height: 14px; }
.ui-fu-progress { display: grid; gap: 4px; font-size: 13px; color: var(--ui-muted); }
.ui-fu-progress > span { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.ui-fu-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-fu-bar div { height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .2s; }
.ui-fu-done .ui-fu-bar div { background: var(--ui-success); }
@media (prefers-reduced-motion: reduce) { .ui-fu-zone, .ui-fu-bar div { transition: none; } }


.ui-patronage-calc { display: grid; gap: 18px; min-width: 0; max-width: 560px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-patronage-calc .ui-patronage-calc-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-patronage-calc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 14px; }
.ui-patronage-calc-field { display: grid; gap: 5px; min-width: 0; }
.ui-patronage-calc-field label, .ui-patronage-calc-basis legend { font-size: 13px; font-weight: 500; }
.ui-patronage-calc-box { box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.ui-patronage-calc-box:hover { border-color: var(--ui-strong); }
.ui-patronage-calc-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-patronage-calc-box input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-patronage-calc-box input::-webkit-inner-spin-button { display: none; }
.ui-patronage-calc-box span { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-patronage-calc-bad .ui-patronage-calc-box { border-color: var(--ui-danger); }
.ui-patronage-calc-basis { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.ui-patronage-calc-basis legend { float: left; margin-right: 6px; padding: 0; }
.ui-patronage-calc-basis label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-patronage-calc-basis input { accent-color: var(--ui-accent); margin: 0; }
.ui-patronage-calc-out { display: grid; gap: 0; margin: 0; padding: 4px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-patronage-calc-out div { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--ui-border); }
.ui-patronage-calc-out div:last-child { border-bottom: 0; }
.ui-patronage-calc-out dt { font-weight: 500; }
.ui-patronage-calc-out dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-patronage-calc-how { display: block; font-weight: 400; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-patronage-calc-total dt, .ui-patronage-calc-total dd { font-size: 16px; font-weight: 700; }
.ui-patronage-calc-total dd { color: var(--ui-accent); }
.ui-patronage-calc-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 480px) { .ui-patronage-calc-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-patronage-calc-box { transition: none; } }


.ui-checkbox-cards { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-checkbox-cards-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-checkbox-cards-req { margin-left: 2px; color: var(--ui-danger); }
.ui-checkbox-cards-list { display: grid; grid-template-columns: repeat(var(--ui-checkbox-cards-cols, auto-fill), minmax(min(200px, 100%), 1fr)); gap: 10px; }
.ui-checkbox-cards-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-checkbox-cards-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-checkbox-cards-card:hover { border-color: var(--ui-strong); }
.ui-checkbox-cards-card:has(input:checked) {
  border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface));
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
.ui-checkbox-cards-card:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-checkbox-cards-card:has(input:checked):has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-focus); }
.ui-checkbox-cards-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-checkbox-cards-card:has(input:disabled):hover { border-color: var(--ui-border); }
.ui-checkbox-cards-box {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px;
  border: 1px solid var(--ui-strong); background: var(--ui-surface); transition: background .15s, border-color .15s;
}
.ui-checkbox-cards-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--ui-accent-fg);
  border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s;
}
.ui-checkbox-cards-card input:checked ~ .ui-checkbox-cards-box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-checkbox-cards-card input:checked ~ .ui-checkbox-cards-box::after { transform: rotate(45deg) scale(1); }
.ui-checkbox-cards-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-accent); font-size: 18px; }
.ui-checkbox-cards-icon svg { width: 18px; height: 18px; }
.ui-checkbox-cards-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ui-checkbox-cards-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 500; }
.ui-checkbox-cards-meta { flex: none; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-checkbox-cards-desc { color: var(--ui-muted); font-size: 13px; }
.ui-checkbox-cards-sm .ui-checkbox-cards-card { padding: 9px 11px; gap: 10px; }
.ui-checkbox-cards-sm .ui-checkbox-cards-title { font-size: 13px; }
.ui-checkbox-cards-sm .ui-checkbox-cards-desc, .ui-checkbox-cards-sm .ui-checkbox-cards-meta { font-size: 12px; }
.ui-checkbox-cards-invalid .ui-checkbox-cards-card { border-color: var(--ui-danger); }
.ui-checkbox-cards-hint, .ui-checkbox-cards-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-checkbox-cards-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-checkbox-cards-card, .ui-checkbox-cards-box, .ui-checkbox-cards-box::after { transition: none; } }


.ui-time-slots { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-time-slots-legend { padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 500; }
.ui-time-slots-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-time-slots-slot { position: relative; display: block; }
.ui-time-slots-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-time-slots-box {
  display: grid; gap: 1px; min-width: 112px; padding: 7px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ui-time-slots-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-time-slots-meta { font-size: 12px; color: var(--ui-muted); }
.ui-time-slots-slot:hover .ui-time-slots-box { border-color: var(--ui-strong); }
.ui-time-slots-slot input:focus-visible + .ui-time-slots-box { box-shadow: var(--ui-focus); }
.ui-time-slots-slot input:checked + .ui-time-slots-box { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-time-slots-warning .ui-time-slots-box { border-color: var(--ui-warning); }
.ui-time-slots-warning .ui-time-slots-meta { color: var(--ui-warning); }
.ui-time-slots-danger .ui-time-slots-box { border-color: var(--ui-danger); }
.ui-time-slots-danger .ui-time-slots-meta { color: var(--ui-danger); }
.ui-time-slots-slot input:disabled + .ui-time-slots-box { opacity: .5; cursor: not-allowed; background: var(--ui-subtle); }
.ui-time-slots-empty { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-time-slots-box { transition: none; } }


.ui-chipsbar { container-type: inline-size; position: sticky; z-index: 5; box-sizing: border-box; width: 100%; padding: 6px 0 4px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg); color: var(--ui-fg); font: 14px/1.3 var(--ui-font); }
.ui-chipsbar-line { display: flex; align-items: center; min-width: 0; }
.ui-chipsbar-chips { position: relative; display: flex; flex: 1; gap: 8px; min-width: 0; padding: 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.ui-chipsbar-chips::-webkit-scrollbar { display: none; }
.ui-chipsbar-chips[data-fade="left"] { mask-image: linear-gradient(to right, transparent, #000 24px); -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); }
.ui-chipsbar-chips[data-fade="right"] { mask-image: linear-gradient(to left, transparent, #000 24px); -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); }
.ui-chipsbar-chips[data-fade="both"] { mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ui-chipsbar-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .12s, border-color .12s, color .12s; }
.ui-chipsbar-chip small { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-chipsbar-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-chipsbar-chip[aria-pressed="true"] small { color: inherit; }
.ui-chipsbar-chip:disabled { border-style: dashed; color: var(--ui-muted); cursor: default; }
.ui-chipsbar-chip:focus-visible, .ui-chipsbar-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-chipsbar-chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--ui-accent); } }
.ui-chipsbar-clear { flex: none; min-width: 60px; min-height: 44px; margin-right: 6px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-accent); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-chipsbar-count { min-height: 18px; margin: 2px 0 0; padding: 0 16px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@container (min-width: 640px) {
  .ui-chipsbar-chips { flex-wrap: wrap; overflow: visible; }
  .ui-chipsbar-chips[data-fade] { mask-image: none; -webkit-mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-chipsbar-chip { transition: none; } }


.ui-pin-pad { container-type: inline-size; min-width: 0; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-pin-pad-body { display: grid; gap: 18px; min-width: 0; }
.ui-pin-pad-head { display: grid; gap: 10px; justify-items: center; text-align: center; }
.ui-pin-pad-title { margin: 0; font-size: 18px; font-weight: 600; }
.ui-pin-pad-dots { display: flex; justify-content: center; gap: 14px; padding: 6px 0; }
.ui-pin-pad-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ui-strong); box-sizing: border-box; transition: background .1s; }
.ui-pin-pad-on { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-pin-pad-wrong .ui-pin-pad-dot { border-color: var(--ui-danger); }
.ui-pin-pad-shake-1 { animation: ui-pin-pad-shake-a .4s ease-in-out; }
.ui-pin-pad-shake-2 { animation: ui-pin-pad-shake-b .4s ease-in-out; }
/* Two names for one shake: changing the class is what starts it again. */
@keyframes ui-pin-pad-shake-a { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes ui-pin-pad-shake-b { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.ui-pin-pad-said { min-height: 21px; margin: 0; color: var(--ui-muted); }
.ui-pin-pad-said[data-bad] { color: var(--ui-danger); }
.ui-pin-pad-keys .ui-number-pad-key { border-radius: 50%; aspect-ratio: 1; min-height: 64px; max-width: 76px; justify-self: center; width: 100%; }
.ui-pin-pad-keys .ui-number-pad-blank { min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .ui-pin-pad-shake-1, .ui-pin-pad-shake-2 { animation: none; }
  .ui-pin-pad-dot { transition: none; }
}
@container (min-width: 440px) {
  .ui-pin-pad-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 16px; }
}


.ui-thumbnail {
  position: relative; display: inline-grid; flex: none; overflow: hidden; width: var(--s, 64px); height: var(--s, 64px); padding: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: #fff;
  font: 500 12px/1.2 var(--ui-font); text-decoration: none; vertical-align: middle;
}
.ui-thumbnail-xs { --s: 32px; border-radius: 4px; }
.ui-thumbnail-sm { --s: 48px; }
.ui-thumbnail-lg { --s: 96px; }
.ui-thumbnail-xl { --s: 128px; }
.ui-thumbnail-square { border-radius: 0; }
.ui-thumbnail-circle { border-radius: 50%; }
.ui-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-thumbnail-contain img { object-fit: contain; }
.ui-thumbnail-text {
  position: absolute; inset: auto 0 0 0; padding: 14px 6px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.ui-thumbnail-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); font-size: calc(var(--s, 64px) * .26); font-weight: 600; }
a.ui-thumbnail, button.ui-thumbnail { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
a.ui-thumbnail:hover, button.ui-thumbnail:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
.ui-thumbnail:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { a.ui-thumbnail, button.ui-thumbnail { transition: none; } }


.ui-tourney { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-tourney .ui-tourney-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-tourney-field { display: grid; gap: 5px; max-width: 420px; font-size: 13px; font-weight: 500; }
.ui-tourney textarea { box-sizing: border-box; width: 100%; min-height: 100px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); resize: vertical; }
.ui-tourney textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-tourney-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-tourney-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-tourney-status { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; }
.ui-tourney-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.ui-tourney-board:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tourney-round { display: flex; flex-direction: column; min-width: 0; }
.ui-tourney .ui-tourney-round-name { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--ui-muted); }
.ui-tourney-matches { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-tourney-match { display: grid; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-tourney-bye { border-style: dashed; }
.ui-tourney-label { padding: 2px 8px; color: var(--ui-muted); font-size: 11px; background: var(--ui-subtle); }
.ui-tourney-seat { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 4px 8px; border: 0; border-top: 1px solid var(--ui-border); background: none; color: var(--ui-fg);
  font: 14px var(--ui-font); text-align: left; }
button.ui-tourney-seat { cursor: pointer; }
button.ui-tourney-seat:hover:not(:disabled) { background: var(--ui-accent-soft); }
button.ui-tourney-seat:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-tourney-seat:disabled { color: var(--ui-muted); cursor: default; }
.ui-tourney-seat[aria-pressed="true"] { background: var(--ui-accent-soft); font-weight: 650; }
.ui-tourney-seed { flex: none; min-width: 16px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-tourney-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tourney-tick { flex: none; margin-left: auto; color: var(--ui-accent); }


.ui-parcoords {
  --ui-parcoords-1: light-dark(#2a78d6, #3987e5); --ui-parcoords-2: light-dark(#eb6834, #d95926);
  --ui-parcoords-3: light-dark(#1baf7a, #199e70); --ui-parcoords-4: light-dark(#eda100, #c98500);
  --ui-parcoords-5: light-dark(#e87ba4, #d55181); --ui-parcoords-6: light-dark(#008300, #008300);
  --ui-parcoords-7: light-dark(#6250d6, #9085e9); --ui-parcoords-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-parcoords-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-parcoords-s1 { --c: var(--ui-parcoords-1); } .ui-parcoords-s2 { --c: var(--ui-parcoords-2); } .ui-parcoords-s3 { --c: var(--ui-parcoords-3); }
.ui-parcoords-s4 { --c: var(--ui-parcoords-4); } .ui-parcoords-s5 { --c: var(--ui-parcoords-5); } .ui-parcoords-s6 { --c: var(--ui-parcoords-6); }
.ui-parcoords-s7 { --c: var(--ui-parcoords-7); } .ui-parcoords-s8 { --c: var(--ui-parcoords-8); }
.ui-parcoords-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-parcoords-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-parcoords-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-parcoords-wrap { padding: 22px 30px 8px 44px; }
.ui-parcoords-plot { position: relative; }
.ui-parcoords-axis { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ui-strong); }
.ui-parcoords-name { position: absolute; bottom: calc(100% + 8px); left: 0; transform: translateX(-50%); color: var(--ui-fg);
  font-weight: 600; white-space: nowrap; }
.ui-parcoords-tick { position: absolute; z-index: 1; right: 5px; transform: translateY(-50%); color: var(--ui-muted); font-size: 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 3px var(--ui-bg), 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-parcoords-tick::after { content: ""; position: absolute; top: 50%; right: -5px; width: 4px; height: 1px; background: var(--ui-strong); }
.ui-parcoords-svg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-parcoords-line { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-opacity: .7; stroke-linejoin: round;
  pointer-events: visibleStroke; transition: stroke-opacity .15s ease; }
.ui-parcoords-svg:hover .ui-parcoords-line { stroke-opacity: .15; }
.ui-parcoords-svg .ui-parcoords-line:hover { stroke-opacity: 1; stroke-width: 3; }
.ui-parcoords-solo { --c: var(--ui-parcoords-1); }
@media (prefers-reduced-motion: reduce) { .ui-parcoords-line { transition: none; } }


.ui-gantt {
  --ui-gantt-1: light-dark(#2a78d6, #3987e5); --ui-gantt-2: light-dark(#eb6834, #d95926);
  --ui-gantt-3: light-dark(#1baf7a, #199e70); --ui-gantt-4: light-dark(#eda100, #c98500);
  --ui-gantt-5: light-dark(#e87ba4, #d55181); --ui-gantt-6: light-dark(#008300, #008300);
  --ui-gantt-7: light-dark(#6250d6, #9085e9); --ui-gantt-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-gantt-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-gantt-s1 { --c: var(--ui-gantt-1); } .ui-gantt-s2 { --c: var(--ui-gantt-2); } .ui-gantt-s3 { --c: var(--ui-gantt-3); }
.ui-gantt-s4 { --c: var(--ui-gantt-4); } .ui-gantt-s5 { --c: var(--ui-gantt-5); } .ui-gantt-s6 { --c: var(--ui-gantt-6); }
.ui-gantt-s7 { --c: var(--ui-gantt-7); } .ui-gantt-s8 { --c: var(--ui-gantt-8); }
.ui-gantt-grid { display: grid; grid-template-columns: minmax(7em, max-content) minmax(0, 1fr); column-gap: 12px; padding-bottom: 18px; }
.ui-gantt-name { display: flex; align-items: center; min-width: 0; max-width: 16em; overflow: hidden; color: var(--ui-fg);
  text-overflow: ellipsis; white-space: nowrap; }
.ui-gantt-name.ui-gantt-gname { font-weight: 600; }
.ui-gantt-name.ui-gantt-in { padding-left: 14px; color: var(--ui-muted); }
.ui-gantt-axis { position: relative; height: 22px; border-bottom: 1px solid var(--ui-border); }
.ui-gantt-axis span { position: absolute; bottom: 5px; padding-left: 4px; color: var(--ui-muted); white-space: nowrap; }
.ui-gantt-track { position: relative; border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent); }
.ui-gantt-rule { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-gantt-bar { position: absolute; top: 22%; bottom: 22%; min-width: 4px; overflow: visible; border-radius: 5px;
  background: color-mix(in srgb, var(--c) 28%, var(--ui-bg)); }
.ui-gantt-done { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--c); }
.ui-gantt-pct { position: absolute; top: 50%; left: 6px; color: var(--ui-fg); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.ui-gantt-span { position: absolute; top: 40%; bottom: 40%; border-radius: 2px; background: var(--c); }
.ui-gantt-span::before, .ui-gantt-span::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border: 4px solid transparent;
  border-top: 5px solid var(--c); }
.ui-gantt-span::before { left: 0; border-left-color: var(--c); }
.ui-gantt-span::after { right: 0; border-right-color: var(--c); }
.ui-gantt-ms { position: absolute; top: 50%; width: 13px; height: 13px; margin-left: -6.5px; background: var(--c);
  border: 2px solid var(--ui-bg); transform: translateY(-50%) rotate(45deg); }
.ui-gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ui-danger); z-index: 3; pointer-events: none; }
.ui-gantt-today span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 3px; background: var(--ui-danger);
  color: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; }
.ui-gantt-bar:hover, .ui-gantt-ms:hover { z-index: 6; box-shadow: 0 0 0 2px var(--ui-fg); }
.ui-gantt-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-gantt-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-gantt-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-gantt-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-gantt-tip { top: calc(100% + 6px); left: 0; }
.ui-gantt-ms .ui-gantt-tip { transform: rotate(-45deg); top: 14px; left: 14px; }
.ui-gantt-late .ui-gantt-tip { left: auto; right: 0; }
.ui-gantt-bar:hover .ui-gantt-tip, .ui-gantt-ms:hover .ui-gantt-tip { display: block; }


.ui-splitter {
  --ui-splitter-at: 50%; display: grid; min-width: 0; height: var(--ui-splitter-height, auto); overflow: hidden;
  grid-template-columns: minmax(0, var(--ui-splitter-at)) auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); color: var(--ui-fg);
  font: 14px/1.5 var(--ui-font);
}
.ui-splitter-vertical {
  height: var(--ui-splitter-height, 320px);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--ui-splitter-at)) auto minmax(0, 1fr);
}
.ui-splitter-pane { min-width: 0; min-height: 0; overflow: auto; }
.ui-splitter-collapsed > .ui-splitter-pane:first-child { visibility: hidden; }
.ui-splitter-handle {
  position: relative; z-index: 1; display: grid; place-items: center; width: 9px; margin: 0 -4px;
  cursor: col-resize; touch-action: none; user-select: none; outline: none;
}
.ui-splitter-handle::before { content: ""; position: absolute; inset: 0 4px; background: var(--ui-border); transition: background .15s; }
.ui-splitter-vertical .ui-splitter-handle { width: auto; height: 9px; margin: -4px 0; cursor: row-resize; }
.ui-splitter-vertical .ui-splitter-handle::before { inset: 4px 0; }
.ui-splitter-grip {
  position: relative; display: grid; gap: 3px; padding: 6px 3px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); pointer-events: none; transition: border-color .15s;
}
.ui-splitter-vertical .ui-splitter-grip { grid-auto-flow: column; padding: 3px 6px; }
.ui-splitter-grip i { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--ui-muted); }
.ui-splitter-handle:hover::before, .ui-splitter-dragging .ui-splitter-handle::before { background: var(--ui-accent); }
.ui-splitter-handle:hover .ui-splitter-grip, .ui-splitter-dragging .ui-splitter-grip { border-color: var(--ui-accent); }
.ui-splitter-handle:focus-visible::before { background: var(--ui-accent); }
.ui-splitter-handle:focus-visible .ui-splitter-grip { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-splitter-dragging { cursor: col-resize; user-select: none; }
.ui-splitter-vertical.ui-splitter-dragging { cursor: row-resize; }
.ui-splitter-dragging .ui-splitter-pane { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ui-splitter-handle::before, .ui-splitter-grip { transition: none; } }


.ui-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); cursor: pointer;
  text-decoration: none; transition: background .12s;
}
.ui-bell:hover { background: var(--ui-subtle); }
.ui-bell:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bell svg { width: 22px; height: 22px; transform-origin: 50% 4px; }
.ui-bell-ring:has(.ui-bell-count) svg { animation: ui-bell-swing .8s ease-in-out 1; }
@keyframes ui-bell-swing { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } }
.ui-bell-count {
  position: absolute; top: 4px; left: 50%; margin-left: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  border: 2px solid var(--ui-bg); background: var(--ui-danger); color: #fff; font: 700 10px/13px var(--ui-font); text-align: center;
  font-variant-numeric: tabular-nums;
}
.ui-bell-dot { min-width: 10px; height: 10px; padding: 0; margin-left: 4px; top: 6px; }
.ui-bell-sm { width: 30px; height: 30px; }
.ui-bell-sm svg { width: 18px; height: 18px; }
.ui-bell-sm .ui-bell-count { top: 1px; margin-left: 0; }
.ui-bell-lg { width: 46px; height: 46px; }
.ui-bell-lg svg { width: 26px; height: 26px; }
.ui-bell-lg .ui-bell-count { top: 6px; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .ui-bell { transition: none; } .ui-bell-ring:has(.ui-bell-count) svg { animation: none; } }


.ui-inspect { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-inspect h3 { margin: 0; font-size: 18px; }
.ui-inspect-body { display: grid; gap: 16px; min-width: 0; }
.ui-inspect-side { display: none; }
.ui-inspect-main { display: grid; gap: 16px; min-width: 0; }
.ui-inspect-sec { display: grid; gap: 8px; min-width: 0; scroll-margin-top: 8px; }
.ui-inspect-sec h4 { margin: 0; font-size: 16px; }
.ui-inspect-item { display: grid; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); scroll-margin: 12px; }
.ui-inspect-item[data-answer="pass"] { border-left-color: var(--ui-success); }
.ui-inspect-item[data-answer="fail"] { border-left-color: var(--ui-danger); }
.ui-inspect-item[data-short] { border-color: var(--ui-danger); }
.ui-inspect-text { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-inspect-crit { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 12px; font-weight: 700; }
.ui-inspect-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-inspect-opt { position: relative; display: grid; place-items: center; min-height: 56px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); font-weight: 700; cursor: pointer; touch-action: manipulation; }
.ui-inspect-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-inspect-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-inspect-opt:has(input[value="pass"]:checked) { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-inspect-opt:has(input[value="fail"]:checked) { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-inspect-opt:has(input[value="na"]:checked) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-inspect-fail { display: grid; gap: 8px; min-width: 0; }
.ui-inspect-fail label { display: grid; gap: 2px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-inspect-fail textarea { box-sizing: border-box; width: 100%; min-height: 76px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); resize: vertical; }
.ui-inspect-fail textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-inspect-need { margin: 0; color: var(--ui-danger); font-size: 14px; font-weight: 600; }
.ui-inspect-need:empty { display: none; }
.ui-inspect-bar { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 8px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-bg); }
.ui-inspect-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; font-size: 14px; font-weight: 600; }
.ui-inspect-sum [data-outcome="fail"] { color: var(--ui-danger); }
.ui-inspect-sum [data-outcome="pass"] { color: var(--ui-success); }
.ui-inspect-prog { display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-inspect-prog span { display: block; height: 100%; background: var(--ui-accent); transition: width .2s; }
.ui-inspect-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-inspect-said { margin: 0; font-size: 14px; font-weight: 600; }
.ui-inspect-said:empty { display: none; }
.ui-inspect-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 14px; }
.ui-inspect-jump { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 600 14px var(--ui-font); text-align: left; cursor: pointer; }
.ui-inspect-jump small { color: var(--ui-muted); font: 500 13px var(--ui-mono); }
.ui-inspect-jump:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-inspect-done { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius); }
.ui-inspect-done h4 { margin: 0; font-size: 17px; }
.ui-inspect-done p { margin: 0; }
@media (hover: hover) { .ui-inspect-jump:hover { background: var(--ui-subtle); } }
@container (min-width: 700px) {
  .ui-inspect-body { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .ui-inspect-side { position: sticky; top: 8px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
}
@media (prefers-reduced-motion: reduce) { .ui-inspect-prog span { transition: none; } }


.ui-swipe-row { position: relative; overflow: hidden; container-type: inline-size; background: var(--ui-surface); color: var(--ui-fg);
  font: 15px/1.4 var(--ui-font); border-bottom: 1px solid var(--ui-border); overscroll-behavior-x: contain; }
.ui-swipe-row-top { position: relative; min-height: 60px; overflow: hidden; }
.ui-swipe-row-pane { position: absolute; inset: 0 auto 0 auto; display: flex; visibility: hidden; max-width: 100%; }
.ui-swipe-row-leading { left: 0; }
.ui-swipe-row-trailing { right: 0; flex-direction: row; }
.ui-swipe-row-showing .ui-swipe-row-pane { visibility: visible; }
.ui-swipe-row-act { flex: 1 1 var(--w); display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0;
  background: var(--t, var(--ui-muted)); color: var(--tf, #fff); font: 600 13px/1.2 var(--ui-font); cursor: pointer;
  overflow: hidden; white-space: nowrap; transition: flex-grow .16s; }
.ui-swipe-row-act:focus-visible { outline: 2px solid var(--ui-fg); outline-offset: -3px; }
.ui-swipe-row-tone-accent { --t: var(--ui-accent); --tf: var(--ui-accent-fg); }
.ui-swipe-row-tone-danger { --t: var(--ui-danger); --tf: #fff; }
.ui-swipe-row-tone-success { --t: var(--ui-success); --tf: #fff; }
/* Past the full swipe, the action that will run takes the whole width of what is shown. */
.ui-swipe-row-armed .ui-swipe-row-act-full { flex-grow: 60; }
.ui-swipe-row-front { position: relative; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px 4px 6px 16px; background: var(--ui-surface);
  touch-action: pan-y; transition: transform .24s cubic-bezier(.2, .8, .2, 1); outline: none; }
.ui-swipe-row-front:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-swipe-row-moving .ui-swipe-row-front { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-swipe-row-body { flex: 1; min-width: 0; }
.ui-swipe-row-more-btn { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-swipe-row-more-btn svg { width: 20px; height: 20px; }
.ui-swipe-row-more-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-swipe-row-inline { display: none; flex: none; gap: 6px; }
.ui-swipe-row-chip { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--t, var(--ui-fg)); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-swipe-row-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-swipe-row-sheet { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle); }
@media (hover: hover) {
  .ui-swipe-row-more-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
  .ui-swipe-row-chip:hover { background: var(--ui-subtle); }
}
@container (min-width: 520px) {
  .ui-swipe-row-more-btn { display: none; }
  .ui-swipe-row-inline { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .ui-swipe-row-front, .ui-swipe-row-act { transition: none; } }


.ui-fxpair { display: grid; gap: 12px; min-width: 0; max-width: 360px; padding: 16px 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.35 var(--ui-font); color: var(--ui-fg);
  font-variant-numeric: tabular-nums; align-content: start; --k: var(--ui-muted); }
.ui-fxpair-up { --k: var(--ui-success); } .ui-fxpair-down { --k: var(--ui-danger); }
.ui-fxpair-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ui-fxpair .ui-fxpair-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; }
.ui-fxpair-title a { color: inherit; text-decoration: none; }
.ui-fxpair-title a:hover { color: var(--ui-accent); }
.ui-fxpair-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-fxpair-flags { flex: none; font-size: 18px; letter-spacing: -.15em; white-space: nowrap; }
.ui-fxpair-name { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-fxpair-chg { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); white-space: nowrap; }
.ui-fxpair-quotes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.ui-fxpair-side { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-fxpair-side:last-child { text-align: right; }
.ui-fxpair-side small { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ui-fxpair-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ui-fxpair-big { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.ui-fxpair-frac { vertical-align: super; font-size: 12px; font-weight: 600; }
.ui-fxpair-spread { align-self: center; display: grid; justify-items: center; color: var(--ui-muted); font-size: 12px; }
.ui-fxpair-spread b { color: var(--ui-fg); font-size: 14px; font-weight: 600; }
.ui-fxpair-range { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; color: var(--ui-muted); }
.ui-fxpair-range b { display: block; color: var(--ui-fg); font-size: 13px; font-weight: 600; }
.ui-fxpair-range > :last-child { text-align: right; }
.ui-fxpair-track { position: relative; height: 4px; border-radius: 2px; background: var(--ui-border); }
.ui-fxpair-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--ui-surface); border-radius: 50%;
  background: var(--k); box-sizing: border-box; }
.ui-fxpair-spark { display: block; width: 100%; height: 48px; overflow: visible; }
.ui-fxpair-spark path { fill: none; stroke: var(--k); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ui-fxpair-spark .ui-fxpair-area { fill: var(--k); opacity: .1; stroke: none; }
.ui-fxpair-spark line { stroke: var(--ui-strong); stroke-dasharray: 3 3; }
.ui-fxpair-foot { margin: 0; color: var(--ui-muted); font-size: 12px; }


.ui-bclap { position: relative; display: inline-flex; align-items: center; gap: 8px; font: 14px/1 var(--ui-font); color: var(--ui-fg);
  font-variant-numeric: tabular-nums; --s: 44px; }
.ui-bclap-sm { --s: 34px; font-size: 13px; } .ui-bclap-lg { --s: 56px; font-size: 16px; }
.ui-bclap-btn { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); padding: 0; border: 1px solid var(--ui-border);
  border-radius: 50%; background: var(--ui-surface); color: var(--ui-muted); cursor: pointer; transition: border-color .15s, color .15s, transform .1s; }
.ui-bclap-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-bclap-btn:active { transform: scale(.92); }
.ui-bclap-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bclap-btn svg { width: 52%; height: 52%; }
.ui-bclap-on .ui-bclap-btn { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-bclap-on .ui-bclap-btn svg .ui-bclap-palm { fill: color-mix(in srgb, var(--ui-accent) 25%, transparent); }
.ui-bclap-full .ui-bclap-btn { cursor: not-allowed; }
.ui-bclap-full .ui-bclap-btn:active { transform: none; }
.ui-bclap-count { min-width: 2ch; color: var(--ui-muted); font-weight: 600; }
.ui-bclap-on .ui-bclap-count { color: var(--ui-fg); }
.ui-bclap-burst { position: absolute; left: calc(var(--s) / 2); bottom: calc(100% + 6px); display: grid; place-items: center; min-width: 34px; height: 34px;
  padding: 0 6px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; font-weight: 700;
  transform: translateX(-50%); pointer-events: none; animation: ui-bclap-rise .25s ease-out; }
@keyframes ui-bclap-rise { from { opacity: 0; transform: translate(-50%, 8px) scale(.8); } }
.ui-bclap-undo { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--ui-muted); cursor: pointer; }
.ui-bclap-undo:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-bclap-undo:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bclap-undo svg { width: 12px; height: 12px; }
.ui-bclap-max { color: var(--ui-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-bclap-btn, .ui-bclap-burst { transition: none; animation: none; } .ui-bclap-btn:active { transform: none; } }


.safe-area-demo-screen { height: 100%; background: var(--ui-accent-soft); }
.safe-area-demo-fill { display: grid; align-content: space-between; height: 100%; min-height: 100%; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.safe-area-demo-fill > * { margin: 0; padding: 10px 12px; background: var(--ui-surface); }
.safe-area-demo-keys { display: flex; flex-wrap: wrap; gap: 8px; }


.ui-rxt { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-rxt .ui-rxt-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-rxt .ui-rxt-sub { margin: 0; font-size: 13px; font-weight: 600; }
.ui-rxt-field { display: grid; gap: 5px; min-width: 0; }
.ui-rxt-field > label { font-size: 13px; font-weight: 500; }
.ui-rxt-input { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); transition: border-color .15s, box-shadow .15s; }
.ui-rxt-input:hover { border-color: var(--ui-strong); }
.ui-rxt-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rxt-input[aria-invalid="true"] { border-color: var(--ui-danger); }
textarea.ui-rxt-input { min-height: 96px; resize: vertical; }
.ui-rxt-flags { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.ui-rxt-flags legend { float: left; margin-right: 8px; padding: 0; font-weight: 500; }
.ui-rxt-flags label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-rxt-flags input { margin: 0; accent-color: var(--ui-accent); }
.ui-rxt-flags input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rxt-error { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-rxt-error pre { margin: 0; overflow-x: auto; font: 13px/1.4 var(--ui-mono); }
.ui-rxt-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; overflow-wrap: anywhere; }
.ui-rxt-count { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-rxt-out { max-height: 260px; margin: 0; overflow: auto; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 13px/1.6 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-rxt-out:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rxt-out mark { border-radius: 2px; background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.ui-rxt-out mark.ui-rxt-even { background: var(--ui-info-soft); color: var(--ui-info); box-shadow: 0 0 0 1px var(--ui-info); }
.ui-rxt-out mark.ui-rxt-empty { padding: 0 1px; }
.ui-rxt-table { overflow-x: auto; }
.ui-rxt-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-rxt-table th, .ui-rxt-table td { padding: 5px 8px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.ui-rxt-table th { color: var(--ui-muted); font-weight: 600; white-space: nowrap; }
.ui-rxt-table code { font: 12px var(--ui-mono); overflow-wrap: anywhere; }
.ui-rxt-none { color: var(--ui-muted); }
.ui-rxt-tokens { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-rxt-token { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ui-rxt-token code { padding: 1px 5px; border-radius: 4px; background: var(--ui-subtle); font: 12px var(--ui-mono); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .ui-rxt-input { transition: none; } }


.ui-dotplot {
  --ui-dotplot-1: light-dark(#2a78d6, #3987e5); --ui-dotplot-2: light-dark(#eb6834, #d95926);
  --ui-dotplot-3: light-dark(#1baf7a, #199e70); --ui-dotplot-4: light-dark(#eda100, #c98500);
  --ui-dotplot-5: light-dark(#e87ba4, #d55181); --ui-dotplot-6: light-dark(#008300, #008300);
  --ui-dotplot-7: light-dark(#6250d6, #9085e9); --ui-dotplot-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-dotplot-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-dotplot-s1 { --c: var(--ui-dotplot-1); } .ui-dotplot-s2 { --c: var(--ui-dotplot-2); } .ui-dotplot-s3 { --c: var(--ui-dotplot-3); }
.ui-dotplot-s4 { --c: var(--ui-dotplot-4); } .ui-dotplot-s5 { --c: var(--ui-dotplot-5); } .ui-dotplot-s6 { --c: var(--ui-dotplot-6); }
.ui-dotplot-s7 { --c: var(--ui-dotplot-7); } .ui-dotplot-s8 { --c: var(--ui-dotplot-8); }
.ui-dotplot-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-dotplot-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-dotplot-key { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ui-dotplot-body { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 12px; align-items: center; padding-right: 8px; }
.ui-dotplot-rl { max-width: 16em; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ui-dotplot-grids { position: relative; grid-column: 2; align-self: stretch; }
.ui-dotplot-grid { position: absolute; top: 0; bottom: 0; left: var(--a); width: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-dotplot-zero { background: var(--ui-strong); }
.ui-dotplot-row { position: relative; grid-column: 2; height: 28px; border-radius: 4px; }
.ui-dotplot-row::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dotted var(--ui-border); }
.ui-dotplot-row:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-dotplot-bar { position: absolute; top: 50%; left: var(--a); width: var(--b); height: 4px; margin-top: -2px; border-radius: 2px;
  background: color-mix(in srgb, var(--ui-strong) 70%, transparent); }
.ui-dotplot-dot { position: absolute; top: 50%; left: var(--x); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); transition: transform .12s ease; }
.ui-dotplot-row:hover .ui-dotplot-dot { transform: scale(1.25); }
.ui-dotplot-tip { position: absolute; z-index: 20; bottom: calc(100% + 2px); right: 0; display: none; min-width: 130px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-dotplot-row:hover .ui-dotplot-tip { display: block; }
.ui-dotplot-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-dotplot-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-dotplot-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-dotplot-tip .ui-dotplot-change { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ui-border); }
.ui-dotplot-x { position: relative; grid-column: 2; height: 16px; margin-top: 4px; }
.ui-dotplot-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ui-dotplot-dot { transition: none; } }


.ui-rcv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-rcv .ui-rcv-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-rcv-field { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-rcv input, .ui-rcv select, .ui-rcv textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-rcv input, .ui-rcv select { height: 38px; }
.ui-rcv textarea { min-height: 130px; padding: 8px 10px; resize: vertical; }
.ui-rcv input:focus-visible, .ui-rcv select:focus-visible, .ui-rcv textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rcv-rule { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-rcv-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-rcv-result { margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; }
.ui-rcv-rounds { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ui-rcv-round { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-rcv-round-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; }
.ui-rcv .ui-rcv-round-name { margin: 0; font-size: 14px; font-weight: 650; }
.ui-rcv-need { color: var(--ui-muted); font-size: 12px; }
.ui-rcv-tally { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-rcv-line { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.ui-rcv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rcv-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-rcv-fill { height: 100%; border-radius: 999px; background: var(--ui-accent); }
.ui-rcv-gone .ui-rcv-fill { background: var(--ui-danger); }
.ui-rcv-won .ui-rcv-fill { background: var(--ui-success); }
.ui-rcv-count { font-weight: 600; }
.ui-rcv-gain { margin-left: 4px; color: var(--ui-success); font-size: 12px; font-weight: 500; }
.ui-rcv-move { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-statgroup { display: grid; grid-template-columns: repeat(var(--ui-statgroup-n, auto-fit), minmax(160px, 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-border);
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); container-type: inline-size; }
.ui-statgroup-item { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px 18px; background: var(--ui-surface); --t: var(--ui-muted); }
.ui-statgroup-label { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-statgroup-value { margin: 0; font-size: 26px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-statgroup-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ui-muted); }
.ui-statgroup-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 5px; border-radius: 999px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); }
.ui-statgroup-good { --t: var(--ui-success); }
.ui-statgroup-bad { --t: var(--ui-danger); }
@container (max-width: 560px) { .ui-statgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 300px) { .ui-statgroup { grid-template-columns: minmax(0, 1fr); } }


.ui-timesheet-grid { display: grid; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-timesheet-grid .ui-timesheet-grid-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-timesheet-grid-wrap { overflow-x: auto; }
.ui-timesheet-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-timesheet-grid-table th, .ui-timesheet-grid-table td { padding: 4px 5px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-timesheet-grid-table thead th { font-weight: 600; color: var(--ui-muted); }
.ui-timesheet-grid-table th:first-child { position: sticky; left: 0; background: var(--ui-surface); min-width: 92px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; }
.ui-timesheet-grid-table tfoot th, .ui-timesheet-grid-table tfoot td { color: var(--ui-muted); }
.ui-timesheet-grid-table tfoot .ui-timesheet-grid-worked th, .ui-timesheet-grid-table tfoot .ui-timesheet-grid-worked td { color: var(--ui-fg); font-weight: 650; }
.ui-timesheet-grid-cell { box-sizing: border-box; width: 74px; padding: 5px 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.3 var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-timesheet-grid-cell:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-timesheet-grid-cell[aria-invalid="true"] { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-timesheet-grid-over { color: var(--ui-warning); font-weight: 650; }
.ui-timesheet-grid-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-variant-numeric: tabular-nums; }
.ui-timesheet-grid-sum b { font-weight: 700; }
.ui-timesheet-grid-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-timesheet-grid-notes { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-timesheet-grid-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-timesheet-grid-submit { padding: 8px 14px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 13px/1.2 var(--ui-font); cursor: pointer; }
.ui-timesheet-grid-submit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-timesheet-grid-said { margin: 0; min-height: 1.4em; color: var(--ui-muted); font-size: 13px; }


.ui-stats-band { display: grid; gap: 24px; margin: 0; padding: 36px 32px; border-radius: var(--ui-radius);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-stats-min, 160px), 100%), 1fr));
  font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-stats-band-cols { grid-template-columns: repeat(var(--ui-stats-cols), minmax(0, 1fr)); }
.ui-stats-band-subtle { background: var(--ui-subtle); }
.ui-stats-band-accent { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-stats-band-outline { border: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-stats-band-plain { padding: 0; }
.ui-stats-band > div { display: grid; gap: 4px; justify-items: center; min-width: 0; text-align: center; }
.ui-stats-band-value { margin: 0; font-size: clamp(30px, 4vw, 42px); font-weight: 750; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.ui-stats-band-label { margin: 0; font-weight: 500; }
.ui-stats-band-note { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-stats-band-accent .ui-stats-band-note { color: inherit; opacity: .75; }
@media (max-width: 640px) {
  .ui-stats-band { gap: 20px; padding: 28px 20px; }
  .ui-stats-band-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.ui-ratio { position: relative; width: 100%; min-width: 0; aspect-ratio: var(--ui-ratio, 16 / 9); overflow: hidden; }
.ui-ratio > *, .ui-ratio > quillo-raw > * { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.ui-ratio > :is(img, video), .ui-ratio > quillo-raw > :is(img, video) { display: block; object-fit: var(--ui-ratio-fit, cover); }
.ui-ratio > iframe, .ui-ratio > quillo-raw > iframe { border: 0; }
.ui-ratio-round { border-radius: var(--ui-radius); }


.ui-snackbar-host { position: fixed; z-index: 70; display: grid; justify-items: center; pointer-events: none;
  left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); font: 14px/1.45 var(--ui-font); }
.ui-snackbar-bottom-left { justify-items: start; }
.ui-snackbar-bottom-right { justify-items: end; }
.ui-snackbar {
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, 100%); min-height: 48px;
  padding: 10px 8px 10px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg);
  box-shadow: var(--ui-shadow-lg); pointer-events: auto; animation: ui-snackbar-in .2s ease-out;
  --t: var(--ui-bg);
}
.ui-snackbar-success { --t: var(--ui-success); }
.ui-snackbar-warning { --t: var(--ui-warning); }
.ui-snackbar-danger { --t: var(--ui-danger); }
.ui-snackbar-info { --t: var(--ui-info); }
.ui-snackbar:not(.ui-snackbar-neutral) { box-shadow: var(--ui-shadow-lg), inset 4px 0 0 var(--t); }
.ui-snackbar-text { flex: 1; min-width: 0; margin: 0; }
.ui-snackbar-action {
  flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg) 14%, transparent); color: inherit; font: 600 13px/1 var(--ui-font); cursor: pointer;
}
.ui-snackbar:not(.ui-snackbar-neutral) .ui-snackbar-action { color: color-mix(in srgb, var(--t) 70%, var(--ui-bg)); }
.ui-snackbar-action:hover { background: color-mix(in srgb, var(--ui-bg) 24%, transparent); }
.ui-snackbar-x {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: inherit; font-size: 20px; line-height: 1; opacity: .7; cursor: pointer;
}
.ui-snackbar-x:hover { opacity: 1; background: color-mix(in srgb, var(--ui-bg) 14%, transparent); }
.ui-snackbar-action:focus-visible, .ui-snackbar-x:focus-visible { outline: 2px solid var(--ui-bg); outline-offset: 1px; }
@keyframes ui-snackbar-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ui-snackbar { animation: none; } }
@media (max-width: 480px) { .ui-snackbar { width: 100%; } }


.ui-amountin { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-amountin-label { font-size: 13px; font-weight: 500; }
.ui-amountin-req { margin-left: 2px; color: var(--ui-danger); }
.ui-amountin-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.ui-amountin-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-amountin-control:hover { border-color: var(--ui-strong); }
.ui-amountin-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-amountin-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-amountin-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-amountin-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-amountin-out { margin: 0; min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-amountin-out strong { color: var(--ui-fg); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-amountin-note { display: block; font-size: 12px; }
.ui-amountin-bad { color: var(--ui-danger); }
.ui-amountin-unsure { display: block; color: var(--ui-warning); font-size: 12px; }
.ui-amountin-ways { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-amountin-way { min-height: 30px; padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 13px/1.3 var(--ui-font); text-align: left; cursor: pointer; }
.ui-amountin-way:hover { border-color: var(--ui-accent); }
.ui-amountin-way:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-amountin-way[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-amountin-way small { display: block; color: var(--ui-muted); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ui-amountin-control { transition: none; } }


.ui-podq { position: relative; box-sizing: border-box; height: var(--ui-podq-height, 70dvh); min-width: 0; container: ui-podq / inline-size; color: var(--ui-fg); font: 14px/1.35 var(--ui-font); }
.ui-podq-in { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.ui-podq-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ui-podq-top { flex: none; padding: 10px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-podq-total { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-podq-sub { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-podq-list { position: relative; flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.ui-podq-item { position: relative; background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); }
.ui-podq-sorting .ui-podq-item { transition: transform .16s; }
.ui-podq-sorting .ui-podq-held { z-index: 2; transition: none; box-shadow: var(--ui-shadow-lg); }
/* What shows behind a row as it is swiped. */
.ui-podq-under { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 650; color: #fff; }
.ui-podq-under span:first-child { color: var(--ui-success); }
.ui-podq-under span:last-child { color: var(--ui-danger); }
.ui-podq-row { position: relative; display: flex; align-items: center; gap: 2px; min-height: 72px; padding: 4px 4px 4px 8px; background: var(--ui-bg); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-podq-now .ui-podq-row { background: var(--ui-accent-soft); }
.ui-podq-play {
  display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-fg); cursor: pointer; touch-action: manipulation;
}
.ui-podq-now .ui-podq-play { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-podq-play svg { width: 22px; height: 22px; }
.ui-podq-open { display: block; flex: 1; min-width: 0; min-height: 60px; padding: 4px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: pan-y; }
.ui-podq-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-podq-played .ui-podq-title { color: var(--ui-muted); font-weight: 400; }
.ui-podq-line { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--ui-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ui-podq-bar { display: block; height: 3px; margin-top: 5px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-podq-bar i { display: block; height: 100%; background: var(--ui-accent); transform-origin: 0 50%; }
.ui-podq-grip { display: grid; flex: none; place-items: center; width: 44px; height: 60px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ui-muted); cursor: grab; touch-action: none; }
.ui-podq-grip svg { width: 20px; height: 20px; }
.ui-podq-more { position: relative; padding: 2px 12px 12px; background: var(--ui-bg); }
.ui-podq-notes { margin: 6px 0 10px; color: var(--ui-muted); }
.ui-podq-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-podq-act { min-height: 46px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-fg); font: 600 14px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-podq-danger { color: var(--ui-danger); }
.ui-podq-side { display: none; }
.ui-podq-undo { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; border-radius: 12px; background: var(--ui-fg); color: var(--ui-bg); z-index: 3; box-shadow: var(--ui-shadow-lg); }
.ui-podq-undo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-podq-undo button { min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: 700 14px var(--ui-font); cursor: pointer; }
.ui-podq-empty { margin: 0; padding: 36px 16px; text-align: center; color: var(--ui-muted); }
.ui-podq :focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-podq-act:hover, .ui-podq-grip:hover { background: var(--ui-subtle); } }
/* Wide: what would open in the row stays open beside the list. */
@container ui-podq (min-width: 700px) {
  .ui-podq-in { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); }
  .ui-podq-more { display: none; }
  .ui-podq-side { display: block; min-height: 0; padding: 16px; overflow-y: auto; border-left: 1px solid var(--ui-border); }
  .ui-podq-side h2 { margin: 0 0 2px; font-size: 18px; }
  .ui-podq-chosen .ui-podq-row { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-podq-sorting .ui-podq-item { transition: none; } }


.ui-xfer { display: grid; gap: 16px; min-width: 0; max-width: 480px; padding: 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-xfer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ui-xfer-title { margin: 0; font-size: 17px; font-weight: 600; }
.ui-xfer-step { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-xfer-fields { display: grid; gap: 14px; }
.ui-xfer-field { display: grid; gap: 6px; min-width: 0; }
.ui-xfer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ui-xfer-label { font-size: 13px; font-weight: 500; }
.ui-xfer-opt { color: var(--ui-muted); font-weight: 400; }
.ui-xfer-field select, .ui-xfer-field input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); outline: none; transition: border-color .15s, box-shadow .15s; }
.ui-xfer-field select:hover, .ui-xfer-field input:hover { border-color: var(--ui-strong); }
.ui-xfer-field select:focus, .ui-xfer-field input:focus { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-xfer-money { position: relative; }
.ui-xfer-money span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); font-weight: 500; pointer-events: none; }
.ui-xfer-field .ui-xfer-money input { padding-left: 28px; font-variant-numeric: tabular-nums; }
.ui-xfer-field [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-xfer-hint, .ui-xfer-error { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-xfer-error { color: var(--ui-danger); font-weight: 500; }
.ui-xfer-review { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; padding: 14px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-xfer-review dt { color: var(--ui-muted); }
.ui-xfer-review dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-xfer-sub { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-xfer-total, .ui-xfer-total + dd { padding-top: 8px; border-top: 1px solid var(--ui-border); font-weight: 650; color: var(--ui-fg); }
.ui-xfer-after + dd { font-weight: 600; }
.ui-xfer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ui-xfer-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); font: 500 14px var(--ui-font); cursor: pointer; transition: background .15s, border-color .15s; }
.ui-xfer-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-xfer-primary { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-xfer-primary:hover { background: color-mix(in srgb, var(--ui-accent) 88%, #000); }
.ui-xfer-secondary { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); }
.ui-xfer-secondary:hover { border-color: var(--ui-strong); }
.ui-xfer-done { display: grid; justify-items: center; gap: 6px; padding: 12px 0; text-align: center; }
.ui-xfer-done svg { width: 40px; height: 40px; color: var(--ui-success); }
.ui-xfer-done p { margin: 0; }
.ui-xfer-done-amount { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ui-xfer-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-xfer-field select, .ui-xfer-field input, .ui-xfer-btn { transition: none; } }


.ui-cart-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--ui-border);
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-cart-item-media { width: 80px; aspect-ratio: 1; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-cart-item-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-cart-item-info { display: grid; gap: 4px; min-width: 0; }
.ui-cart-item-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-cart-item-name a { color: inherit; text-decoration: none; }
.ui-cart-item-name a:hover { color: var(--ui-accent); }
.ui-cart-item-opts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ui-muted); }
.ui-cart-item-stock { font-size: 12px; font-weight: 500; color: var(--ui-warning); }
.ui-cart-item-out .ui-cart-item-stock { color: var(--ui-danger); }
.ui-cart-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.ui-cart-item-qty { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); overflow: hidden; }
.ui-cart-item-qty:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-cart-item-qty button { width: 30px; border: 0; background: var(--ui-subtle); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer; }
.ui-cart-item-qty button:hover:not(:disabled) { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-cart-item-qty button:disabled { color: var(--ui-muted); opacity: .5; cursor: not-allowed; }
.ui-cart-item-qty input { width: 44px; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 14px var(--ui-font); text-align: center;
  font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.ui-cart-item-qty input::-webkit-inner-spin-button, .ui-cart-item-qty input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ui-cart-item-remove { padding: 4px 0; border: 0; background: none; color: var(--ui-muted); font: 13px var(--ui-font); text-decoration: underline; cursor: pointer; border-radius: 3px; }
.ui-cart-item-remove:hover { color: var(--ui-danger); }
.ui-cart-item-remove:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cart-item-total { display: grid; justify-items: end; gap: 2px; text-align: right; }
.ui-cart-item-each { font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
.ui-cart-item-sm { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 10px 0; }
.ui-cart-item-sm .ui-cart-item-media { width: 56px; }
.ui-cart-item-sm .ui-cart-item-name { font-size: 14px; }
.ui-cart-item-sm .ui-cart-item-qty { height: 28px; }
.ui-cart-item-sm .ui-cart-item-qty button { width: 26px; }
.ui-cart-item-sm .ui-cart-item-qty input { width: 36px; font-size: 13px; }
@media (max-width: 480px) { .ui-cart-item { grid-template-columns: 64px 1fr; } .ui-cart-item-total { grid-column: 2; justify-items: start; text-align: left; } }


.ui-drawer-host { display: contents; }
.ui-drawer {
  box-sizing: border-box; margin: 0; padding: 0; max-width: 100vw; max-height: 100dvh; overflow: hidden;
  border: 0; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font);
}
.ui-drawer::backdrop { background: var(--ui-overlay); }
.ui-drawer-right, .ui-drawer-left { --w: 400px; top: 0; bottom: 0; width: min(var(--w), calc(100vw - 40px)); height: 100dvh; }
.ui-drawer-right { left: auto; right: 0; border-left: 1px solid var(--ui-border); }
.ui-drawer-left { right: auto; left: 0; border-right: 1px solid var(--ui-border); }
.ui-drawer-sm { --w: 320px; }
.ui-drawer-lg { --w: 560px; }
.ui-drawer-bottom {
  --h: 70dvh; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: var(--h);
  border-top: 1px solid var(--ui-border); border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}
.ui-drawer-bottom.ui-drawer-sm { --h: 45dvh; }
.ui-drawer-bottom.ui-drawer-lg { --h: 92dvh; }
.ui-drawer-box { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.ui-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
  padding: 16px 20px; border-bottom: 1px solid var(--ui-border);
}
.ui-drawer-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-drawer-x {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -4px -6px -4px 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-drawer-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-drawer-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 22px; }
.ui-drawer-body > :first-child { margin-top: 0; }
.ui-drawer-body > :last-child { margin-bottom: 0; }
.ui-drawer-right[open] { animation: ui-drawer-right .22s ease-out; }
.ui-drawer-left[open] { animation: ui-drawer-left .22s ease-out; }
.ui-drawer-bottom[open] { animation: ui-drawer-bottom .22s ease-out; }
@keyframes ui-drawer-right { from { transform: translateX(100%); } }
@keyframes ui-drawer-left { from { transform: translateX(-100%); } }
@keyframes ui-drawer-bottom { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-drawer[open] { animation: none; } }


.ui-torch-toggle { display: inline-grid; justify-items: center; gap: 8px; max-width: 280px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); text-align: center; }
.ui-torch-toggle-btn {
  display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ui-torch-toggle-btn svg { width: 32px; height: 32px; }
.ui-torch-toggle-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-torch-toggle-btn[aria-pressed="true"] { border-color: transparent; background: #ffd34d; color: #3a2c00; box-shadow: 0 0 0 6px rgba(255, 211, 77, .3); }
.ui-torch-toggle-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-torch-toggle-say { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-torch-toggle-why { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-torch-toggle-settings {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-torch-toggle-settings:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-likert-scale { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-likert-scale-legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
.ui-likert-scale-req { margin-left: 2px; color: var(--ui-danger); }
.ui-likert-scale-row { display: flex; align-items: flex-start; gap: 12px; }
.ui-likert-scale-end { flex: 1 1 0; font-size: 13px; color: var(--ui-muted); padding-top: 4px; }
.ui-likert-scale-end:last-child { text-align: right; }
.ui-likert-scale-points { display: flex; gap: 6px; }
.ui-likert-scale-opt { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 36px; cursor: pointer; }
.ui-likert-scale-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-likert-scale-dot {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ui-strong); background: var(--ui-surface); color: var(--ui-muted);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-likert-scale-opt:hover .ui-likert-scale-dot { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-likert-scale-opt input:checked + .ui-likert-scale-dot { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-likert-scale-opt input:focus-visible + .ui-likert-scale-dot { box-shadow: var(--ui-focus); }
.ui-likert-scale-word { font-size: 12px; color: var(--ui-muted); text-align: center; max-width: 76px; }
.ui-likert-scale-opt input:checked ~ .ui-likert-scale-word { color: var(--ui-fg); font-weight: 500; }
.ui-likert-scale-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-likert-scale-invalid .ui-likert-scale-dot { border-color: var(--ui-danger); }
.ui-likert-scale-hint, .ui-likert-scale-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-likert-scale-error { color: var(--ui-danger); }
@media (max-width: 560px) {
  .ui-likert-scale-row { flex-wrap: wrap; }
  .ui-likert-scale-points { order: -1; width: 100%; justify-content: space-between; }
  .ui-likert-scale-end { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) { .ui-likert-scale-dot { transition: none; } }


.ui-variant { display: grid; gap: 16px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-variant-group { display: grid; gap: 8px; }
.ui-variant-head { display: flex; gap: 6px; font-size: 13px; }
.ui-variant-label { font-weight: 500; }
.ui-variant-picked { color: var(--ui-muted); }
.ui-variant-need { color: var(--ui-danger); }
.ui-variant-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-variant-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 38px; padding: 0 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.ui-variant-opt:hover { border-color: var(--ui-strong); }
.ui-variant-opt[aria-checked="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-variant-opt:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-variant-opt[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-focus); }
.ui-variant-out { color: var(--ui-muted); cursor: not-allowed; background: var(--ui-subtle); }
.ui-variant-out::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: currentColor; transform: rotate(-20deg); }
.ui-variant-swatch { width: 34px; min-width: 0; height: 34px; padding: 3px; border-radius: 50%; }
.ui-variant-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ui-variant-swatch[aria-checked="true"] { background: var(--ui-surface); border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-variant-swatch.ui-variant-out span { opacity: .4; }
.ui-variant-swatch.ui-variant-out::after { left: 15%; right: 15%; transform: rotate(-45deg); }
.ui-variant-sm .ui-variant-opt { height: 32px; min-width: 36px; padding: 0 10px; font-size: 13px; }
.ui-variant-sm .ui-variant-swatch { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .ui-variant-opt { transition: none; } }


.ui-team { display: grid; gap: 28px; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-team-head { display: grid; gap: 8px; max-width: 640px; margin: 0 auto 4px; text-align: center; }
.ui-team-title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ui-team-text { margin: 0; color: var(--ui-muted); font-size: 17px; }
.ui-team-grid { display: grid; gap: 28px 20px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-team-min, 200px), 100%), 1fr)); }
.ui-team-cols .ui-team-grid { grid-template-columns: repeat(var(--ui-team-cols), minmax(0, 1fr)); }
.ui-team-person { display: grid; gap: 4px; justify-items: center; min-width: 0; text-align: center; }
.ui-team-cards .ui-team-person { padding: 24px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-team-person > .ui-avatar { margin-bottom: 8px; }
.ui-team-name { margin: 0; font-size: 16px; font-weight: 600; }
.ui-team-role { margin: 0; color: var(--ui-accent); font-size: 13px; font-weight: 500; }
.ui-team-bio { margin: 6px 0 0; color: var(--ui-muted); font-size: 14px; }
.ui-team-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.ui-team-links a { color: var(--ui-muted); font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 3px; }
.ui-team-links a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-team-links a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 899px) { .ui-team-many .ui-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ui-team-cols .ui-team-grid { grid-template-columns: minmax(0, 1fr); } }


.ui-alert-dialog-host { display: contents; }
.ui-alert-dialog {
  width: min(400px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font);
  --t: var(--ui-info); --ts: var(--ui-info-soft);
}
.ui-alert-dialog-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-alert-dialog-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-alert-dialog-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-alert-dialog::backdrop { background: var(--ui-overlay); }
.ui-alert-dialog[open] { animation: ui-alert-dialog-in .16s ease-out; }
@keyframes ui-alert-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-alert-dialog-box { display: grid; gap: 8px; justify-items: center; padding: 24px 22px 20px; text-align: center; }
.ui-alert-dialog-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--ts); color: var(--t); }
.ui-alert-dialog-icon svg { width: 24px; height: 24px; }
.ui-alert-dialog-box h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-alert-dialog-body { color: var(--ui-muted); }
.ui-alert-dialog-body > :first-child { margin-top: 0; }
.ui-alert-dialog-body > :last-child { margin-bottom: 0; }
.ui-alert-dialog-box form { width: 100%; margin: 12px 0 0; }
.ui-alert-dialog-ok {
  width: 100%; height: 38px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-alert-dialog-ok:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-alert-dialog-ok:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-alert-dialog[open] { animation: none; } }


.ui-payees { display: grid; gap: 12px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-payees-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-payees-title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.ui-payees-add { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-accent); font-size: 13px; font-weight: 500; text-decoration: none; }
.ui-payees-add:hover { text-decoration: underline; }
.ui-payees-add:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-payees-search { position: relative; flex-basis: 100%; }
.ui-payees-search svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; }
.ui-payees-search input { width: 100%; height: 34px; padding: 0 10px 0 30px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); outline: none; transition: border-color .15s, box-shadow .15s; }
.ui-payees-search input:hover { border-color: var(--ui-strong); }
.ui-payees-search input:focus { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-payees-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; }
.ui-payees-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ui-payees-item + .ui-payees-item { border-top: 1px solid var(--ui-border); }
.ui-payees-initials { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 13px; font-weight: 650; letter-spacing: .02em; }
.ui-payees-who { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ui-payees-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-payees-bank, .ui-payees-last { color: var(--ui-muted); font-size: 12px; }
.ui-payees-num { font-family: var(--ui-mono); letter-spacing: .03em; }
.ui-payees-last b { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-payees-pay { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--ui-accent); border-radius: 999px;
  background: transparent; color: var(--ui-accent); font: 500 13px var(--ui-font); text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.ui-payees-pay:hover { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-payees-pay:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-payees-empty { margin: 0; padding: 24px 14px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ui-payees-pay, .ui-payees-search input { transition: none; } }


.ui-listgroup { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); counter-reset: ui-listgroup; }
.ui-listgroup-flush { border: 0; border-radius: 0; background: none; }
.ui-listgroup > li + li { border-top: 1px solid var(--ui-border); }
.ui-listgroup-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none; }
.ui-listgroup > li:first-child > .ui-listgroup-item { border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0; }
.ui-listgroup > li:last-child > .ui-listgroup-item { border-radius: 0 0 calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px); }
a.ui-listgroup-item, button.ui-listgroup-item { cursor: pointer; transition: background .15s; }
a.ui-listgroup-item:hover, button.ui-listgroup-item:hover { background: var(--ui-subtle); }
a.ui-listgroup-item:focus-visible, button.ui-listgroup-item:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-listgroup-item[aria-current="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-listgroup-item[aria-current="true"] .ui-listgroup-desc { color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-fg)); }
.ui-listgroup-item[aria-disabled="true"] { color: var(--ui-muted); cursor: not-allowed; }
.ui-listgroup-numbered .ui-listgroup-item::before { counter-increment: ui-listgroup; content: counter(ui-listgroup) "."; flex: none;
  min-width: 1.4em; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-listgroup-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ui-listgroup-label { font-weight: 500; }
.ui-listgroup-desc { color: var(--ui-muted); font-size: 13px; }
.ui-listgroup-meta { flex: none; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-listgroup-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  --t: var(--ui-muted); --ts: var(--ui-subtle); background: var(--ts); color: var(--t); }
.ui-listgroup-badge-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }
.ui-listgroup-badge-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-listgroup-badge-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-listgroup-badge-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-listgroup-badge-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-listgroup-sm .ui-listgroup-item { padding: 7px 12px; font-size: 13px; }
.ui-listgroup-sm .ui-listgroup-badge { min-width: 18px; height: 18px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { a.ui-listgroup-item, button.ui-listgroup-item { transition: none; } }


.ui-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-fieldset-box { padding: 16px 18px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.ui-fieldset-legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ui-fieldset-box > .ui-fieldset-legend { float: none; width: auto; padding: 0 6px; margin-left: -6px; }
.ui-fieldset-req { margin-left: 2px; color: var(--ui-danger); }
.ui-fieldset-desc { clear: both; margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-fieldset-fields { clear: both; display: grid; gap: var(--ui-fieldset-gap, 14px); padding-top: 14px; }
.ui-fieldset-box > .ui-fieldset-fields { padding-top: 10px; }
.ui-fieldset-box > .ui-fieldset-desc + .ui-fieldset-fields { padding-top: 14px; }
.ui-fieldset-inline .ui-fieldset-fields { display: flex; flex-wrap: wrap; align-items: flex-start; }
.ui-fieldset-grid { container-type: inline-size; }
.ui-fieldset-grid .ui-fieldset-fields { grid-template-columns: repeat(var(--ui-fieldset-cols, 2), minmax(0, 1fr)); }
@container (max-width: 480px) { .ui-fieldset-grid .ui-fieldset-fields { grid-template-columns: minmax(0, 1fr); } }
.ui-fieldset:disabled { color: var(--ui-muted); }


.ui-bagsel { display: grid; gap: 14px; min-width: 0; max-width: 560px; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-bagsel-head { display: flex; align-items: center; gap: 12px; }
.ui-bagsel-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft);
  color: var(--ui-accent); }
.ui-bagsel-icon svg { width: 22px; height: 22px; }
.ui-bagsel .ui-bagsel-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-bagsel-rule { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-bagsel-cabin { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); font-size: 13px; }
.ui-bagsel-cabin::before { content: "✓ "; color: var(--ui-success); font-weight: 700; }
.ui-bagsel-prices { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bagsel-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.ui-bagsel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--ui-border); }
.ui-bagsel-row:last-child { border-bottom: 1px solid var(--ui-border); }
.ui-bagsel-who { display: grid; min-width: 0; }
.ui-bagsel-who b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-bagsel-cost { color: var(--ui-muted); font-size: 13px; }
.ui-bagsel-count { display: flex; align-items: center; gap: 10px; }
.ui-bagsel-count output { min-width: 22px; font-size: 16px; font-weight: 650; text-align: center; }
.ui-bagsel-step { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); font: 18px/1 var(--ui-font); cursor: pointer; transition: border-color .15s, background .15s; }
.ui-bagsel-step:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-bagsel-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bagsel-step:disabled { opacity: .35; cursor: not-allowed; }
.ui-bagsel-same { justify-self: start; padding: 0; border: 0; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-bagsel-same:hover { text-decoration: underline; }
.ui-bagsel-same:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ui-focus); }
.ui-bagsel-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; }
.ui-bagsel-foot output { font-size: 20px; font-weight: 700; }
.ui-bagsel-save { grid-column: 1 / -1; color: var(--ui-success); font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ui-bagsel-step { transition: none; } }


.ui-orders { display: grid; gap: 10px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-orders-item { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-orders-item > summary { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px 16px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; border-radius: var(--ui-radius); }
.ui-orders-item > summary::-webkit-details-marker { display: none; }
.ui-orders-item > summary:hover { background: var(--ui-subtle); }
.ui-orders-item > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-orders-chev { width: 8px; height: 8px; border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .2s; }
.ui-orders-item[open] > summary .ui-orders-chev { transform: rotate(45deg); }
.ui-orders-id { font-weight: 600; }
.ui-orders-id span { font-weight: 400; color: var(--ui-muted); }
.ui-orders-date { color: var(--ui-muted); white-space: nowrap; }
.ui-orders-status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 12px/1 var(--ui-font); white-space: nowrap;
  --t: var(--ui-muted); --ts: var(--ui-subtle); color: var(--t); background: var(--ts); }
.ui-orders-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.ui-orders-processing, .ui-orders-paid { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-orders-shipped { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-orders-delivered { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-orders-cancelled { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-orders-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-orders-body { padding: 4px 16px 14px; border-top: 1px solid var(--ui-border); }
.ui-orders-lines { margin: 0; padding: 0; list-style: none; }
.ui-orders-line { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }
.ui-orders-line + .ui-orders-line { border-top: 1px solid var(--ui-border); }
.ui-orders-line img, .ui-orders-ph { display: block; width: 40px; height: 40px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); object-fit: cover; }
.ui-orders-line-text { display: grid; gap: 1px; min-width: 0; }
.ui-orders-line-meta { font-size: 12px; color: var(--ui-muted); }
.ui-orders-line-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-orders-note { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-orders-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 13px; }
.ui-orders-links a { color: var(--ui-accent); font-weight: 500; text-decoration: none; }
.ui-orders-links a:hover { text-decoration: underline; }
.ui-orders-empty { padding: 32px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@media (max-width: 600px) { .ui-orders-item > summary { grid-template-columns: auto 1fr auto; } .ui-orders-date, .ui-orders-total { grid-column: 2 / -1; } }
@media (prefers-reduced-motion: reduce) { .ui-orders-chev { transition: none; } }


.ui-realtime {
  --ui-realtime-1: light-dark(#2a78d6, #3987e5); --ui-realtime-2: light-dark(#eb6834, #d95926);
  --ui-realtime-3: light-dark(#1baf7a, #199e70); --ui-realtime-4: light-dark(#eda100, #c98500);
  --ui-realtime-5: light-dark(#e87ba4, #d55181); --ui-realtime-6: light-dark(#008300, #008300);
  --ui-realtime-7: light-dark(#6250d6, #9085e9); --ui-realtime-8: light-dark(#e34948, #e66767);
  display: grid; gap: 8px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-realtime-s1 { --c: var(--ui-realtime-1); } .ui-realtime-s2 { --c: var(--ui-realtime-2); } .ui-realtime-s3 { --c: var(--ui-realtime-3); }
.ui-realtime-s4 { --c: var(--ui-realtime-4); } .ui-realtime-s5 { --c: var(--ui-realtime-5); } .ui-realtime-s6 { --c: var(--ui-realtime-6); }
.ui-realtime-s7 { --c: var(--ui-realtime-7); } .ui-realtime-s8 { --c: var(--ui-realtime-8); }
.ui-realtime-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ui-realtime-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-realtime-now { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-realtime-up { color: var(--ui-success); } .ui-realtime-down { color: var(--ui-danger); }
.ui-realtime-chg { font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-realtime-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ui-muted); }
.ui-realtime-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-success); }
.ui-realtime-paused .ui-realtime-live i { background: var(--ui-strong); }
.ui-realtime-pause { height: 26px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); cursor: pointer; }
.ui-realtime-pause:hover { border-color: var(--ui-strong); }
.ui-realtime-pause:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-realtime-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 6px; }
.ui-realtime-y { position: relative; min-width: 24px; }
.ui-realtime-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-realtime-plot { position: relative; }
.ui-realtime-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-realtime-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-realtime-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-realtime-area { fill: var(--c); opacity: .12; }
.ui-realtime-head-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); }
.ui-realtime-head-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c);
  animation: ui-realtime-pulse 1.4s ease-out infinite; }
.ui-realtime-paused .ui-realtime-head-dot::after { animation: none; opacity: 0; }
@keyframes ui-realtime-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.ui-realtime-cols { position: absolute; inset: 0; display: flex; }
.ui-realtime-col { position: relative; flex: 1; min-width: 0; --x: 50%; }
.ui-realtime-col:first-child:not(:last-child) { flex: .5; --x: 0%; }
.ui-realtime-col:last-child:not(:first-child) { flex: .5; --x: 100%; }
.ui-realtime-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-realtime-col:hover::before { opacity: 1; }
.ui-realtime-tip { position: absolute; z-index: 20; top: 0; left: var(--x); display: none; padding: 4px 8px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--ui-muted);
  font-size: 12px; transform: translateX(8px); white-space: nowrap; pointer-events: none; }
.ui-realtime-tip b { margin-left: 6px; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-realtime-flip .ui-realtime-tip { transform: translateX(calc(-100% - 8px)); }
.ui-realtime-col:hover .ui-realtime-tip { display: block; }
@media (prefers-reduced-motion: reduce) { .ui-realtime-head-dot::after { animation: none; opacity: 0; } }


.ui-adquiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-adquiz .ui-adquiz-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-adquiz-meter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-adquiz-why { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-adquiz-card { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-adquiz .ui-adquiz-question { margin: 0; padding: 0; font-size: 15px; font-weight: 600; outline: none; overflow-wrap: anywhere; }
.ui-adquiz-question:focus-visible { box-shadow: var(--ui-focus); }
.ui-adquiz-choices { display: grid; gap: 6px; }
.ui-adquiz-choice { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.ui-adquiz-choice:hover { border-color: var(--ui-strong); }
.ui-adquiz-choice:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-adquiz-choice input { flex: none; margin: 0; accent-color: var(--ui-accent); }
.ui-adquiz-is-right { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-adquiz-is-wrong { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-adquiz-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-adquiz-go { height: 36px; padding: 0 16px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 13px var(--ui-font); cursor: pointer; }
.ui-adquiz-go:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-adquiz-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-adquiz-warn { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-adquiz-told { display: grid; gap: 4px; margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-adquiz-verdict { margin: 0; font-weight: 650; }
.ui-adquiz-explain { margin: 0; }
.ui-adquiz-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-warning); font-size: 13px; }
.ui-adquiz-result { display: grid; gap: 2px; margin: 0; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-adquiz-level { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-adquiz-review { display: grid; gap: 8px; margin: 0; padding: 0 0 0 20px; }
.ui-adquiz-review li { overflow-wrap: anywhere; }
.ui-adquiz-review small { display: block; color: var(--ui-muted); font-size: 12px; }


.ui-packlist { display: grid; gap: 14px; min-width: 0; max-width: 560px; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-packlist-head { display: grid; gap: 8px; }
.ui-packlist-titlerow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-packlist .ui-packlist-title { margin: 0; font-size: 17px; font-weight: 650; }
.ui-packlist-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-packlist-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-packlist-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ui-accent); transition: width .25s; }
.ui-packlist-done .ui-packlist-bar span { background: var(--ui-success); }
.ui-packlist-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font-size: 13px; }
.ui-packlist-hide { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); cursor: pointer; }
.ui-packlist-hide input { width: 15px; height: 15px; margin: 0; accent-color: var(--ui-accent); }
.ui-packlist-reset { padding: 0; border: 0; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-packlist-reset:hover:not(:disabled) { text-decoration: underline; }
.ui-packlist-reset:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ui-focus); }
.ui-packlist-reset:disabled { color: var(--ui-muted); opacity: .6; cursor: not-allowed; }
.ui-packlist-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-packlist-group legend { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 6px; border-bottom: 1px solid var(--ui-border);
  color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui-packlist-tally { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-weight: 600; }
.ui-packlist-full .ui-packlist-tally { color: var(--ui-success); }
.ui-packlist-items { display: grid; margin: 0; padding: 4px 0 0; list-style: none; }
.ui-packlist-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 4px; border-radius: var(--ui-radius-sm); }
.ui-packlist-item:hover { background: var(--ui-subtle); }
.ui-packlist-item label { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.ui-packlist-item input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-success); cursor: pointer; }
.ui-packlist-item input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-packlist-label { min-width: 0; overflow-wrap: anywhere; }
.ui-packlist-qty { flex: none; padding: 0 6px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.ui-packlist-packed .ui-packlist-label { color: var(--ui-muted); text-decoration: line-through; }
.ui-packlist-remove { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--ui-muted); cursor: pointer; opacity: 0; }
.ui-packlist-remove svg { width: 14px; height: 14px; }
.ui-packlist-item:hover .ui-packlist-remove, .ui-packlist-remove:focus-visible { opacity: 1; }
.ui-packlist-remove:hover { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-packlist-remove:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: none) { .ui-packlist-remove { opacity: 1; } }
.ui-packlist-empty { margin: 0; padding: 6px 4px; color: var(--ui-muted); font-size: 13px; }
.ui-packlist-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.ui-packlist-add input, .ui-packlist-add select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-packlist-add input:focus, .ui-packlist-add select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-packlist-add button { height: 36px; padding: 0 14px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px var(--ui-font); cursor: pointer; }
.ui-packlist-add button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 460px) { .ui-packlist-add { grid-template-columns: 1fr 1fr; } .ui-packlist-add input { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ui-packlist-bar span { transition: none; } }


.ui-trust { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0; padding: 0; list-style: none; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ui-trust-list { flex-direction: column; gap: 12px; }
.ui-trust-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-trust-grid .ui-trust-item { flex-direction: column; text-align: center; gap: 8px; padding: 14px 10px; }
.ui-trust-bordered .ui-trust-item { padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-trust-icon { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 18px; }
.ui-trust-icon svg { width: 20px; height: 20px; }
.ui-trust-text { display: grid; gap: 1px; min-width: 0; }
.ui-trust-title { font-weight: 600; }
.ui-trust-note { color: var(--ui-muted); }
.ui-trust-sm { gap: 12px 20px; font-size: 12px; }
.ui-trust-sm .ui-trust-icon { width: 28px; height: 28px; font-size: 15px; }
.ui-trust-sm .ui-trust-icon svg { width: 16px; height: 16px; }


.ui-dirnav { position: relative; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); background: var(--ui-bg); }
.ui-dirnav-boxed { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.ui-dirnav-bar {
  position: sticky; top: var(--ui-dirnav-top, 0); z-index: 3; display: flex; flex-wrap: wrap; gap: 1px; margin: 0; padding: 6px 8px;
  list-style: none; background: var(--ui-bg); border-bottom: 1px solid var(--ui-border);
}
.ui-dirnav-boxed .ui-dirnav-bar { top: 0; }
.ui-dirnav-letter {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 3px;
  border-radius: var(--ui-radius-sm); color: var(--ui-accent); font-size: 12px; font-weight: 600; text-decoration: none;
}
a.ui-dirnav-letter:hover { background: var(--ui-accent-soft); }
.ui-dirnav-letter:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dirnav-off { color: var(--ui-strong); }
.ui-dirnav-group { margin: 0; }
.ui-dirnav-head {
  position: sticky; top: calc(var(--ui-dirnav-top, 0px) + 37px); z-index: 2; margin: 0; padding: 4px 14px; background: var(--ui-subtle);
  border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); color: var(--ui-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.ui-dirnav-boxed .ui-dirnav-head { top: 37px; }
.ui-dirnav ul { margin: 0; padding: 0; list-style: none; }
.ui-dirnav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; color: var(--ui-fg);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 55%, transparent);
}
.ui-dirnav-item:hover { background: var(--ui-subtle); }
.ui-dirnav-item:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-dirnav-item[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-dirnav-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dirnav-meta { flex: none; color: var(--ui-muted); font-size: 13px; }


.ui-kbsc { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-kbsc caption { padding: 0 0 8px; text-align: left; font-weight: 600; }
.ui-kbsc td { padding: 7px 0; border-top: 1px solid var(--ui-border); }
.ui-kbsc td:last-child { text-align: right; }
.ui-kbsc kbd { display: inline-block; min-width: 22px; padding: 2px 6px; border: 1px solid var(--ui-border); border-bottom-width: 2px;
  border-radius: 5px; background: var(--ui-subtle); color: var(--ui-fg); font: 500 12px/1.4 var(--ui-mono); text-align: center; }
.ui-kbsc-or { margin: 0 6px; color: var(--ui-muted); font-size: 12px; }


.ui-translation-checker { display: grid; gap: 14px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-translation-checker-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-translation-checker-field { display: grid; align-content: start; gap: 4px; min-width: 0; }
.ui-translation-checker-field label, .ui-translation-checker-filter label { font-size: 13px; font-weight: 500; }
.ui-translation-checker-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 8px 10px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); }
.ui-translation-checker-field textarea:hover { border-color: var(--ui-strong); }
.ui-translation-checker-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-translation-checker-said { margin: 0; font-weight: 600; }
.ui-translation-checker-note { margin: 0; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-translation-checker-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-translation-checker-locales { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; min-width: 0; }
.ui-translation-checker-locale { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: inherit; text-align: left; cursor: pointer; }
.ui-translation-checker-locale:hover { border-color: var(--ui-strong); }
.ui-translation-checker-locale:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-translation-checker-locale[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-translation-checker-locale b { font-weight: 600; }
.ui-translation-checker-locale small { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-translation-checker-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--ui-border); }
.ui-translation-checker-bar span { display: block; height: 100%; border-radius: 3px; background: var(--ui-success); }
.ui-translation-checker-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ui-translation-checker-filter select { box-sizing: border-box; height: 32px; padding: 0 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-translation-checker-filter select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-translation-checker-scroll { min-width: 0; max-height: 520px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-translation-checker-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-translation-checker-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.ui-translation-checker-table th { position: sticky; top: 0; padding: 6px 10px; border-bottom: 1px solid var(--ui-strong); background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 500; text-align: left; }
.ui-translation-checker-table td { padding: 6px 10px; border-bottom: 1px solid var(--ui-border); vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; }
.ui-translation-checker-key { font: 12px/1.5 var(--ui-mono); color: var(--ui-muted); }
.ui-translation-checker-none { color: var(--ui-muted); font-style: italic; }
.ui-translation-checker-issues { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-translation-checker-issue-missing { color: var(--ui-danger); }
.ui-translation-checker-issue-placeholder, .ui-translation-checker-issue-html { color: var(--ui-danger); }
.ui-translation-checker-issue-unchanged, .ui-translation-checker-issue-overlong, .ui-translation-checker-issue-space { color: var(--ui-warning); }
.ui-translation-checker-fine { color: var(--ui-success); font-size: 13px; }


.ui-selmode { position: relative; container-type: inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "list" "acts"; box-sizing: border-box; height: 100%; min-height: 280px; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-selmode-grid { display: contents; }
.ui-selmode-top { grid-area: top; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-selmode-head { flex: 1; min-width: 0; margin: 0; font: 600 17px/1.2 var(--ui-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-selmode-btn { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-accent); font: 500 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-selmode-btn:disabled { color: var(--ui-muted); cursor: default; }
.ui-selmode-btn:focus-visible, .ui-selmode-act:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-selmode-list { grid-area: list; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior-y: contain; list-style: none; }
.ui-selmode-row { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 60px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; transition: background .12s, transform .12s; }
.ui-selmode-press { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); transform: scale(.985); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ui-selmode-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-selmode-row:disabled { opacity: .5; cursor: default; }
.ui-selmode-row[aria-pressed="true"] { background: var(--ui-accent-soft); }
.ui-selmode-on .ui-selmode-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ui-selmode-box { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 0; height: 24px; margin-right: -12px; overflow: hidden; border: 0 solid var(--ui-strong); border-radius: 50%; color: var(--ui-accent-fg); transition: width .16s, margin .16s; }
.ui-selmode-on .ui-selmode-box { width: 24px; margin-right: 0; border-width: 2px; }
[aria-pressed="true"] > .ui-selmode-box { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-selmode-box svg { width: 14px; height: 14px; opacity: 0; }
[aria-pressed="true"] > .ui-selmode-box svg { opacity: 1; }
.ui-selmode-text { flex: 1; min-width: 0; }
.ui-selmode-title, .ui-selmode-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-selmode-title { font-weight: 500; }
.ui-selmode-sub { color: var(--ui-muted); font-size: 14px; }
.ui-selmode-meta { flex: none; color: var(--ui-muted); font-size: 13px; }
.ui-selmode-acts { grid-area: acts; display: flex; gap: 8px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-selmode-act { flex: 1; min-width: 0; min-height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-selmode-act:disabled { opacity: .45; cursor: default; }
.ui-selmode-danger { color: var(--ui-danger); }
.ui-selmode-empty { margin: 0; padding: 40px 16px; color: var(--ui-muted); text-align: center; }
@container (min-width: 640px) {
  .ui-selmode-grid { display: grid; grid-area: top; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
  .ui-selmode-top { grid-area: auto; border-bottom: 0; }
  .ui-selmode-acts { grid-area: auto; align-items: center; padding: 4px 12px; border-top: 0; }
  .ui-selmode-act { flex: none; min-width: 96px; }
}
@media (hover: hover) { .ui-selmode-row:not(:disabled):hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ui-selmode-row, .ui-selmode-box { transition: none; } .ui-selmode-press { transform: none; } }


.ui-searchhead { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; container-type: inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-searchhead-head { position: relative; z-index: 2; flex: none; padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-searchhead-top { display: flex; align-items: center; gap: 8px; min-height: 48px; overflow: hidden; transition: min-height .18s, max-height .18s, opacity .18s; max-height: 80px; }
.ui-searchhead-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 24px; font-weight: 700; line-height: 1.2; outline: none; text-overflow: ellipsis; white-space: nowrap; }
.ui-searchhead-top button { display: inline-grid; flex: none; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-accent); font: inherit; cursor: pointer; }
.ui-searchhead-top svg { width: 24px; height: 24px; }
.ui-searchhead-on .ui-searchhead-top { min-height: 0; max-height: 0; opacity: 0; visibility: hidden; }
.ui-searchhead-row { display: flex; align-items: center; gap: 4px; margin: 0; }
.ui-searchhead-field { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; }
.ui-searchhead-glass { position: absolute; inset-inline-start: 10px; width: 18px; height: 18px; color: var(--ui-muted); pointer-events: none; }
/* 16 px: iOS zooms the page in on a field whose text is smaller. */
.ui-searchhead-input {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 44px 0 36px; border: 1px solid transparent; border-radius: 12px; background: var(--ui-subtle); color: var(--ui-fg); font: 16px var(--ui-font);
  outline: none; -webkit-appearance: none; appearance: none;
}
.ui-searchhead-input::-webkit-search-cancel-button { display: none; }
.ui-searchhead-input:focus { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-searchhead-clear {
  position: absolute; inset-inline-end: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-searchhead-clear svg { width: 18px; height: 18px; }
.ui-searchhead-clear:focus-visible, .ui-searchhead-cancel:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-searchhead-cancel { display: none; flex: none; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 16px var(--ui-font); cursor: pointer; }
.ui-searchhead-on .ui-searchhead-cancel { display: block; }
.ui-searchhead-body { position: relative; flex: 1; min-height: 0; }
.ui-searchhead-page { height: 100%; overflow: auto; overscroll-behavior: contain; }
.ui-searchhead-drop {
  position: absolute; inset: 0; z-index: 3; box-sizing: border-box; display: none; padding-bottom: calc(var(--ui-searchhead-kb, 0px) + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; background: var(--ui-bg);
}
.ui-searchhead-on .ui-searchhead-drop { display: block; }
.ui-searchhead-list { margin: 0; padding: 4px 0; list-style: none; }
.ui-searchhead-listhead { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px 0 16px; color: var(--ui-muted); font: 600 13px var(--ui-font); }
.ui-searchhead-recent { display: flex; align-items: stretch; }
.ui-searchhead-pick, .ui-searchhead-drop-all, .ui-searchhead-forget { min-height: 44px; border: 0; background: transparent; color: var(--ui-fg); font: 15px var(--ui-font); cursor: pointer; }
.ui-searchhead-pick { flex: 1; min-width: 0; padding: 0 8px 0 16px; overflow: hidden; text-align: start; text-overflow: ellipsis; white-space: nowrap; }
.ui-searchhead-drop-all { padding: 0 12px; color: var(--ui-accent); font-size: 14px; }
.ui-searchhead-forget { display: grid; flex: none; place-items: center; width: 44px; padding: 0; color: var(--ui-muted); }
.ui-searchhead-forget svg { width: 16px; height: 16px; }
.ui-searchhead-pick:focus-visible, .ui-searchhead-drop-all:focus-visible, .ui-searchhead-forget:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
@media (hover: hover) { .ui-searchhead-pick:hover, .ui-searchhead-forget:hover { background: var(--ui-subtle); } }
.ui-searchhead-none { margin: 0; padding: 32px 16px; color: var(--ui-muted); text-align: center; overflow-wrap: anywhere; }
@container (min-width: 600px) {
  .ui-searchhead-head { display: flex; align-items: center; gap: 16px; padding-inline: 24px; padding-bottom: 0; min-height: 64px; }
  .ui-searchhead-top { flex: 1; min-width: 0; }
  .ui-searchhead-on .ui-searchhead-top { min-height: 48px; max-height: 80px; opacity: 1; visibility: visible; }
  .ui-searchhead-row { flex: 0 1 420px; }
  .ui-searchhead-drop {
    inset: 8px 24px auto auto; width: 420px; max-height: min(70%, 520px, calc(100% - var(--ui-searchhead-kb, 0px) - 16px)); padding-bottom: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
  }
}
@media (prefers-reduced-motion: reduce) { .ui-searchhead-top { transition: none; } }


.ui-pt { position: relative; display: flex; min-width: 0; overflow: hidden; contain: inline-size; border-block: 1px solid var(--ui-border); background: var(--ui-surface);
  font: 13px/1 var(--ui-font); color: var(--ui-fg);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ui-pt-track { display: flex; flex: none; min-width: max-content; animation: ui-pt-scroll var(--d) linear infinite; }
.ui-pt:hover .ui-pt-track, .ui-pt:focus-within .ui-pt-track { animation-play-state: paused; }
.ui-pt-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ui-pt-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 22px; white-space: nowrap;
  border-right: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-pt-sym { font-weight: 650; letter-spacing: .02em; color: var(--ui-fg); text-decoration: none; }
a.ui-pt-sym:hover { color: var(--ui-accent); }
a.ui-pt-sym:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-pt-price { font-variant-numeric: tabular-nums; }
.ui-pt-chg { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-pt-up .ui-pt-chg { color: var(--ui-success); } .ui-pt-down .ui-pt-chg { color: var(--ui-danger); } .ui-pt-flat .ui-pt-chg { color: var(--ui-muted); }
.ui-pt-chg svg { width: 8px; height: 8px; fill: currentColor; }
@keyframes ui-pt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ui-pt { overflow-x: auto; mask-image: none; }
  .ui-pt-track { animation: none; }
  .ui-pt-track > [aria-hidden="true"] { display: none; }
}


.ui-hc { position: relative; display: inline-block; }
.ui-hc-trigger {
  display: inline; padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; font-weight: 500;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
a.ui-hc-trigger { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ui-accent) 40%, transparent); }
.ui-hc-trigger:hover { text-decoration-color: currentColor; }
.ui-hc-trigger:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-hc-card {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; box-sizing: border-box; width: min(var(--w, 300px), calc(100vw - 32px));
  padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.5 var(--ui-font); text-align: left; white-space: normal;
  display: none;
}
.ui-hc-card::before { content: ""; position: absolute; inset: -10px 0; z-index: -1; }
.ui-hc-card > span { display: block; }
.ui-hc-card a { color: var(--ui-accent); }
.ui-hc-card a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-hc-card > * + * { margin-top: 6px; }
.ui-hc-top .ui-hc-card { top: auto; bottom: calc(100% + 8px); }
.ui-hc-center .ui-hc-card { left: 50%; margin-left: calc(min(var(--w, 300px), calc(100vw - 32px)) / -2); }
.ui-hc-end .ui-hc-card { left: auto; right: 0; }
/* Shown at once but seen only after the delay, so a pointer passing by does not open it. */
.ui-hc:not(.ui-hc-off):is(:hover, :focus-within, .ui-hc-open) .ui-hc-card {
  display: block; visibility: visible; opacity: 1; translate: 0 0;
  transition: visibility 0s, opacity .15s, translate .15s; transition-delay: var(--delay, 400ms);
}
@starting-style {
  .ui-hc:not(.ui-hc-off):is(:hover, :focus-within, .ui-hc-open) .ui-hc-card { visibility: hidden; opacity: 0; translate: 0 4px; }
}
.ui-hc:not(.ui-hc-off).ui-hc-pinned .ui-hc-card { transition-delay: 0s; }
@supports (position-area: bottom) {
  .ui-hc-card {
    position: fixed; inset: auto; margin: 8px 0; position-anchor: var(--a); position-area: bottom span-right;
    position-try-fallbacks: bottom span-left, flip-block, top span-left;
  }
  .ui-hc-top .ui-hc-card { inset: auto; position-area: top span-right; position-try-fallbacks: top span-left, flip-block, bottom span-left; }
  .ui-hc-center .ui-hc-card { margin-left: 0; position-area: bottom; position-try-fallbacks: bottom span-right, bottom span-left, flip-block; }
  .ui-hc-top.ui-hc-center .ui-hc-card { position-area: top; position-try-fallbacks: top span-right, top span-left, flip-block; }
  .ui-hc-end .ui-hc-card { position-area: bottom span-left; position-try-fallbacks: bottom span-right, flip-block, top span-right; }
  .ui-hc-top.ui-hc-end .ui-hc-card { position-area: top span-left; position-try-fallbacks: top span-right, flip-block, bottom span-right; }
  @media (max-width: 520px) {
    .ui-hc .ui-hc-card { margin: 8px 16px; position-area: bottom span-all; justify-self: center; position-try-fallbacks: flip-block; }
    .ui-hc-top .ui-hc-card { position-area: top span-all; }
  }
}
@media (hover: none) { .ui-hc:not(.ui-hc-open):not(:focus-within) .ui-hc-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-hc .ui-hc-card { translate: none !important; } }


.ui-share-sheet-host { display: contents; }
.ui-share-sheet {
  box-sizing: border-box; inset: auto 0 0 0; width: min(560px, 100vw); max-width: 100vw; max-height: calc(100dvh - 24px); margin: 0 auto;
  padding: 0; overflow: auto; border: 1px solid var(--ui-border); border-bottom: 0;
  border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 14px/1.45 var(--ui-font);
}
.ui-share-sheet[open] { animation: ui-share-sheet-up .24s cubic-bezier(.2, .8, .2, 1); }
.ui-share-sheet::backdrop { background: var(--ui-overlay); }
@keyframes ui-share-sheet-up { from { transform: translateY(100%); } }
.ui-share-sheet-box { padding: 10px 20px max(20px, env(safe-area-inset-bottom)); }
.ui-share-sheet-grip { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: var(--ui-strong); }
.ui-share-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui-share-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ui-share-sheet-x {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-share-sheet-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-share-sheet-x svg { width: 18px; height: 18px; }
.ui-share-sheet-link { display: flex; gap: 8px; margin-bottom: 16px; }
.ui-share-sheet-url {
  flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 13px/1 var(--ui-mono);
}
.ui-share-sheet-url:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-share-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-share-sheet-target {
  display: grid; justify-items: center; gap: 6px; width: 100%; padding: 10px 4px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 12px/1.3 var(--ui-font); text-align: center; text-decoration: none; cursor: pointer;
}
.ui-share-sheet-target:hover { background: var(--ui-subtle); }
.ui-share-sheet-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent);
  font: 700 16px/1 var(--ui-font);
}
.ui-share-sheet-icon svg { width: 20px; height: 20px; }
.ui-share-sheet-ok .ui-share-sheet-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-share-sheet-x:focus-visible, .ui-share-sheet-target:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-share-sheet[open] { animation: none; } }


.ui-roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; min-width: 0;
  font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-roadmap-col { display: grid; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-roadmap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.ui-roadmap-title { margin: 0; font-size: 14px; font-weight: 700; }
.ui-roadmap-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted);
  font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-roadmap-sub { margin: -6px 4px 0; color: var(--ui-muted); font-size: 13px; }
.ui-roadmap-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-roadmap-item { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-roadmap-item-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.ui-roadmap-item-title a { color: inherit; text-decoration: none; }
.ui-roadmap-item-title a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-roadmap-item-title a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-roadmap-text { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-roadmap-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.ui-roadmap-status { --t: var(--ui-muted); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t); font-weight: 600; }
.ui-roadmap-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-roadmap-done { --t: var(--ui-success); }
.ui-roadmap-in-progress { --t: var(--ui-accent); }
.ui-roadmap-planned { --t: var(--ui-info); }
.ui-roadmap-exploring { --t: var(--ui-warning); }
.ui-roadmap-blocked { --t: var(--ui-danger); }
.ui-roadmap-tag { padding: 1px 7px; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-muted); }
.ui-roadmap-date, .ui-roadmap-votes { margin-left: auto; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-roadmap-date + .ui-roadmap-votes { margin-left: 0; }
.ui-roadmap-empty { padding: 14px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); font-size: 13px; text-align: center; }


.ui-punch { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-punch h3 { margin: 0; font-size: 18px; }
.ui-punch-cols { display: grid; gap: 12px; min-width: 0; }
.ui-punch-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-punch-state { display: grid; gap: 2px; padding: 12px; border-left: 6px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-punch-state[data-state="in"] { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-punch-state[data-state="break"] { border-color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-punch-state b { font-size: 20px; }
.ui-punch-btns { display: grid; gap: 10px; }
/* Big enough for a thumb in a glove, and held on the page while a place is awaited, so
   what is under a second tap does not change. */
.ui-punch-main, .ui-punch-other { display: grid; place-items: center; width: 100%; padding: 0 12px; border: 2px solid transparent; border-radius: var(--ui-radius); font: 700 22px/1.2 var(--ui-font); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui-punch-main { min-height: 104px; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-punch-main[data-kind="out"] { background: var(--ui-danger); color: #fff; }
.ui-punch-other { min-height: 76px; border-color: var(--ui-strong); background: var(--ui-surface); color: var(--ui-fg); font-size: 19px; }
.ui-punch-other[hidden] { display: none; }
.ui-punch-main:focus-visible, .ui-punch-other:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-punch-main[aria-disabled="true"], .ui-punch-other[aria-disabled="true"] { opacity: .6; cursor: default; }
.ui-punch-said { min-height: 22px; margin: 0; font-weight: 600; }
.ui-punch-said:empty { display: none; }
.ui-punch-ask { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-warning); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-punch-ask p { margin: 0; font-weight: 600; }
.ui-punch-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-punch-acts > * { flex: 1 1 130px; }
.ui-punch-note { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 14px; }
.ui-punch-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ui-punch-sum div { padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-punch-sum div[data-over] { background: var(--ui-danger-soft); }
.ui-punch-sum dt { color: var(--ui-muted); font-size: 13px; }
.ui-punch-sum dd { margin: 0; font: 700 22px/1.3 var(--ui-font); }
.ui-punch-log { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-punch-log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-punch-log b { font-family: var(--ui-mono); }
.ui-punch-log small { color: var(--ui-muted); }
.ui-punch-flag { padding: 0 6px; border-radius: 4px; background: var(--ui-warning-soft); color: var(--ui-fg); font-size: 13px; font-weight: 600; }
.ui-punch-empty { margin: 0; color: var(--ui-muted); }
@container (min-width: 640px) {
  .ui-punch-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .ui-punch-main { min-height: 140px; font-size: 26px; }
}


.ui-wheel-picker { display: grid; gap: 6px; min-width: 0; font: 18px/1.2 var(--ui-font); color: var(--ui-fg); }
.ui-wheel-picker-label { font-size: 13px; font-weight: 500; text-align: center; }
.ui-wheel-picker-drum { position: relative; height: calc(var(--rows) * 44px); min-width: 0; }
/* The band the chosen row rests in, behind the rows. */
.ui-wheel-picker-band {
  position: absolute; inset: calc((var(--rows) - 1) * 22px) 0 auto; height: 44px; border-radius: var(--ui-radius);
  background: var(--ui-subtle); border-block: 1px solid var(--ui-border); pointer-events: none;
}
.ui-wheel-picker-drum:has(select:focus-visible) .ui-wheel-picker-band { box-shadow: var(--ui-focus); }
.ui-wheel-picker-list {
  position: relative; box-sizing: border-box; height: 100%; padding-block: calc((var(--rows) - 1) * 22px); overflow: hidden;
  overscroll-behavior: contain; scrollbar-width: none; cursor: grab; outline: none;
  perspective: 600px; -webkit-mask-image: linear-gradient(transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(transparent, #000 34%, #000 66%, transparent);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
}
.ui-wheel-picker-list::-webkit-scrollbar { display: none; }
/* Until the browser takes over, the server's page shows the right row all the same. */
.ui-wheel-picker-list:not(.ui-wheel-picker-ready) > .ui-wheel-picker-item:first-child { margin-top: calc(var(--at) * -44px); }
.ui-wheel-picker-on { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.ui-wheel-picker-grab { cursor: grabbing; }
.ui-wheel-picker-off .ui-wheel-picker-list { overflow: hidden; cursor: not-allowed; opacity: .55; }
.ui-wheel-picker-item {
  box-sizing: border-box; height: 44px; padding-inline: 8px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; scroll-snap-align: center; scroll-snap-stop: normal; font-variant-numeric: tabular-nums;
}
.ui-wheel-picker-item[data-off] { color: var(--ui-muted); text-decoration: line-through; }
/* The select lies over the wheel and takes no finger: a screen reader finds it where the wheel is, and it is big enough to reach. */
.ui-wheel-picker-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; font-size: 16px; }
@supports (animation-timeline: view()) {
  .ui-wheel-picker-on .ui-wheel-picker-item { animation: ui-wheel-picker-turn linear both; animation-timeline: view(); }
  @keyframes ui-wheel-picker-turn {
    from { transform: rotateX(62deg) scale(.9); }
    50% { transform: none; }
    to { transform: rotateX(-62deg) scale(.9); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-wheel-picker-on { scroll-behavior: auto; }
  .ui-wheel-picker-on .ui-wheel-picker-item { animation: none; }
}


.demo-side-page { padding: 16px 20px; font: 15px/1.6 var(--ui-font); }
.demo-side-page h4 { margin: 0 0 8px; font-size: 20px; }
.demo-side-out { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }


.ui-alert-host { display: contents; }
.ui-alert {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  font: 14px/1.5 var(--ui-font); color: var(--ui-fg);
  --t: var(--ui-info); --ts: var(--ui-info-soft);
}
.ui-alert-neutral { --t: var(--ui-muted); --ts: var(--ui-subtle); }
.ui-alert-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }
.ui-alert-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-alert-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-alert-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-alert-soft { background: var(--ts); border-color: color-mix(in srgb, var(--t) 22%, transparent); }
.ui-alert-outline { background: var(--ui-surface); border-color: color-mix(in srgb, var(--t) 55%, var(--ui-border)); }
.ui-alert-solid { background: var(--t); color: var(--ui-bg); }
.ui-alert-neutral.ui-alert-solid { background: var(--ui-fg); }
.ui-alert-icon { flex: none; width: 20px; height: 20px; color: var(--t); }
.ui-alert-solid .ui-alert-icon { color: inherit; }
.ui-alert-body { flex: 1; min-width: 0; }
.ui-alert-title { margin: 0; font-weight: 600; }
.ui-alert a { color: inherit; font-weight: 500; text-underline-offset: 2px; }
.ui-alert-text > :first-child { margin-top: 0; }
.ui-alert-text > :last-child { margin-bottom: 0; }
.ui-alert-title + .ui-alert-text { margin-top: 2px; color: color-mix(in srgb, currentColor 82%, transparent); }
.ui-alert-x {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -3px -5px -3px 0;
  border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit;
  font-size: 20px; line-height: 1; opacity: .7; cursor: pointer;
}
.ui-alert-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.ui-alert-x:focus-visible { outline: none; opacity: 1; box-shadow: var(--ui-focus); }


.ui-combobox { position: relative; display: grid; gap: 6px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-combobox-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-combobox-req { margin-left: 2px; color: var(--ui-danger); }
.ui-combobox-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-combobox-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-combobox-box { position: relative; display: flex; align-items: center; }
.ui-combobox-control {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 36px 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1 var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-combobox-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-combobox-control:hover { border-color: var(--ui-strong); }
.ui-combobox-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-combobox-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-combobox-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-combobox-toggle {
  position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-muted); cursor: pointer;
}
.ui-combobox-toggle:disabled { cursor: not-allowed; opacity: .55; }
.ui-combobox-toggle span {
  width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform .15s;
}
.ui-combobox-open .ui-combobox-toggle span { margin-top: 3px; transform: rotate(-135deg); }
.ui-combobox-pop {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 4px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.ui-combobox-pop[hidden] { display: none; }
.ui-combobox-list { max-height: 240px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.ui-combobox-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px;
  border-radius: 4px; cursor: pointer; color: var(--ui-fg);
}
.ui-combobox-opt[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-combobox-opt svg { flex: none; width: 14px; height: 14px; color: var(--ui-accent); }
.ui-combobox-empty { padding: 7px 10px; color: var(--ui-muted); }
.ui-combobox-sm .ui-combobox-control { height: 30px; font-size: 13px; padding-right: 30px; }
.ui-combobox-sm .ui-combobox-toggle { width: 24px; height: 24px; right: 3px; }
.ui-combobox-sm .ui-combobox-opt { padding: 5px 8px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-combobox-control, .ui-combobox-toggle span { transition: none; } }


.ui-bookmark-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ui-bookmark-button:hover { background: var(--ui-subtle); border-color: var(--ui-strong); }
.ui-bookmark-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bookmark-button:disabled { opacity: .55; cursor: not-allowed; }
.ui-bookmark-button-ghost { border-color: transparent; }
.ui-bookmark-button-soft { border-color: transparent; background: var(--ui-subtle); }
.ui-bookmark-button-on, .ui-bookmark-button-on:hover { color: var(--ui-accent); border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); background: var(--ui-accent-soft); }
.ui-bookmark-button-ghost.ui-bookmark-button-on { border-color: transparent; }
.ui-bookmark-button svg { flex: none; width: 18px; height: 18px; fill: none; transition: fill .15s; }
.ui-bookmark-button-on svg { fill: currentColor; }
.ui-bookmark-button-only { width: 34px; padding: 0; }
.ui-bookmark-button-sm { height: 28px; padding: 0 9px; font-size: 13px; }
.ui-bookmark-button-sm svg { width: 16px; height: 16px; }
.ui-bookmark-button-sm.ui-bookmark-button-only { width: 28px; padding: 0; }
.ui-bookmark-button-lg { height: 42px; padding: 0 16px; font-size: 15px; }
.ui-bookmark-button-lg svg { width: 22px; height: 22px; }
.ui-bookmark-button-lg.ui-bookmark-button-only { width: 42px; padding: 0; }
@media (prefers-reduced-motion: reduce) { .ui-bookmark-button, .ui-bookmark-button svg { transition: none; } }


.ui-metrictrend { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 14px/1.3 var(--ui-font); color: var(--ui-fg);
  vertical-align: baseline; --t: var(--ui-muted); }
.ui-metrictrend-good { --t: var(--ui-success); }
.ui-metrictrend-bad { --t: var(--ui-danger); }
.ui-metrictrend-value { font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ui-metrictrend-change { display: inline-flex; align-items: center; gap: 3px; color: var(--t); font-weight: 600; font-size: .9em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-metrictrend-change svg { width: .85em; height: .85em; flex: none; }
.ui-metrictrend-pill .ui-metrictrend-change { padding: 1px 7px 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--t) 13%, transparent); }
.ui-metrictrend-sm { font-size: 12px; gap: 6px; }
.ui-metrictrend-lg { font-size: 22px; gap: 10px; }
.ui-metrictrend-lg .ui-metrictrend-change { font-size: 15px; }


.ui-speed-dial { position: fixed; z-index: 40; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.ui-speed-dial-bottom-right { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
.ui-speed-dial-bottom-left { left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); align-items: flex-start; }
.ui-speed-dial-top-right { right: max(20px, env(safe-area-inset-right)); top: max(20px, env(safe-area-inset-top)); flex-direction: column; }
.ui-speed-dial-top-left { left: max(20px, env(safe-area-inset-left)); top: max(20px, env(safe-area-inset-top)); flex-direction: column; align-items: flex-start; }
.ui-speed-dial-inline { position: absolute; z-index: 2; }
.ui-speed-dial-inline.ui-speed-dial-bottom-right { right: 16px; bottom: 16px; }
.ui-speed-dial-inline.ui-speed-dial-bottom-left { left: 16px; bottom: 16px; }
.ui-speed-dial-inline.ui-speed-dial-top-right { right: 16px; top: 16px; }
.ui-speed-dial-inline.ui-speed-dial-top-left { left: 16px; top: 16px; }
.ui-speed-dial > .ui-fab { position: static; }
.ui-speed-dial-main svg { transition: transform .2s; }
.ui-speed-dial-open .ui-speed-dial-main svg { transform: rotate(135deg); }
.ui-speed-dial-list { display: none; flex-direction: inherit; align-items: inherit; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-speed-dial-open .ui-speed-dial-list { display: flex; }
.ui-speed-dial-list li { display: flex; align-items: center; gap: 10px; animation: ui-speed-dial-in .15s ease-out backwards; }
.ui-speed-dial-bottom-left li, .ui-speed-dial-top-left li { flex-direction: row-reverse; }
@keyframes ui-speed-dial-in { from { opacity: 0; transform: translateY(6px); } }
.ui-speed-dial-name {
  padding: 5px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg);
  font: 500 13px/1.3 var(--ui-font); white-space: nowrap; box-shadow: var(--ui-shadow);
}
.ui-speed-dial-item {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ui-border);
  border-radius: 50%; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.ui-speed-dial-item:hover { background: var(--ui-subtle); border-color: var(--ui-strong); }
.ui-speed-dial-item:focus-visible { outline: none; box-shadow: var(--ui-shadow), var(--ui-focus); }
.ui-speed-dial-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-speed-dial-item svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .ui-speed-dial-main svg { transition: none; } .ui-speed-dial-list li { animation: none; } }


.demo-tut-spot { display: grid; place-items: center; height: 170px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-muted); touch-action: none; }
.demo-tut-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-tut-pick { min-height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.demo-tut-pick[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.demo-tut-scroll { height: 170px; overflow-y: auto; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); }
.demo-tut-scroll p { margin: 0; padding: 40px 16px; }


.ui-fuzzysel { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-fuzzysel-label { font-size: 13px; font-weight: 500; }
.ui-fuzzysel-req { margin-left: 2px; color: var(--ui-danger); }
.ui-fuzzysel-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-fuzzysel-box { position: relative; display: flex; align-items: center; }
.ui-fuzzysel-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 36px 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ui-fuzzysel-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-fuzzysel-control:hover { border-color: var(--ui-strong); }
.ui-fuzzysel-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fuzzysel-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-fuzzysel-toggle { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-fuzzysel-toggle:disabled { cursor: not-allowed; opacity: .55; }
.ui-fuzzysel-toggle span { width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ui-fuzzysel-open .ui-fuzzysel-toggle span { margin-top: 3px; transform: rotate(-135deg); }
.ui-fuzzysel-pop { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 4px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-fuzzysel-pop[hidden] { display: none; }
.ui-fuzzysel-list { max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.ui-fuzzysel-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; cursor: pointer; color: var(--ui-fg); overflow-wrap: anywhere; }
.ui-fuzzysel-opt[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-fuzzysel-text { flex: 1; min-width: 0; }
.ui-fuzzysel-text mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ui-fuzzysel-sub { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-fuzzysel-tag { flex: none; color: var(--ui-muted); font-size: 11px; }
.ui-fuzzysel-opt svg { flex: none; width: 14px; height: 14px; color: var(--ui-accent); }
.ui-fuzzysel-empty, .ui-fuzzysel-more { padding: 7px 10px; color: var(--ui-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-fuzzysel-control { transition: none; } }


.ui-ol { margin: 0; padding: 0; list-style: none; counter-reset: ui-ol; font: 15px/1.5 var(--ui-font); color: var(--ui-fg);
  --ui-ol-color: var(--ui-muted); }
.ui-ol > li { position: relative; padding-left: 2em; margin: .35em 0; overflow-wrap: anywhere; counter-increment: ui-ol; }
.ui-ol > li::before { content: counter(ui-ol) "."; position: absolute; left: 0; top: 0; width: 1.6em; text-align: right;
  color: var(--ui-ol-color); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-ol-letters > li::before { content: counter(ui-ol, lower-alpha) "."; }
.ui-ol-roman > li::before { content: counter(ui-ol, lower-roman) "."; }
.ui-ol-circles > li { padding-left: 2.3em; }
.ui-ol-circles > li::before { content: counter(ui-ol); top: .1em; width: 1.5em; height: 1.5em; border-radius: 50%;
  display: inline-grid; place-items: center; background: var(--ui-ol-color); color: var(--ui-bg); font-size: .8em; line-height: 1; }
.ui-ol-plain { list-style: decimal; padding-left: 1.6em; }
.ui-ol-plain > li { padding-left: .3em; counter-increment: none; }
.ui-ol-plain > li::before { content: none; }
.ui-ol-plain > li::marker { color: var(--ui-ol-color); font-weight: 600; }
.ui-ol-accent { --ui-ol-color: var(--ui-accent); }
.ui-ol-circles.ui-ol-accent > li::before { color: var(--ui-accent-fg); }
.ui-ol-fg { --ui-ol-color: var(--ui-fg); }
.ui-ol-tight > li { margin: .1em 0; }
.ui-ol-loose > li { margin: .75em 0; }
.ui-ol-sm { font-size: 13px; }
.ui-ol-lg { font-size: 17px; }
.ui-ol li > .ui-ol { margin-top: .35em; }


.ui-macd { --ui-macd-price: light-dark(#2a78d6, #3987e5); --ui-macd-line: light-dark(#2a78d6, #3987e5);
  --ui-macd-signal: light-dark(#eb6834, #d95926);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-macd-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-macd-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-macd-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-macd-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.ui-macd-kh { width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--ui-success) 50%, var(--ui-danger) 50%); }
.ui-macd-cl { --c: var(--ui-macd-line); } .ui-macd-cs { --c: var(--ui-macd-signal); } .ui-macd-cp { --c: var(--ui-macd-price); }
.ui-macd-up { --k: var(--ui-success); } .ui-macd-down { --k: var(--ui-danger); }
.ui-macd-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-macd-plot { position: relative; }
.ui-macd-pane, .ui-macd-yp { position: relative; height: var(--h); }
.ui-macd-ipane, .ui-macd-yi { position: relative; height: var(--ih); }
.ui-macd-pane + .ui-macd-ipane, .ui-macd-yp + .ui-macd-yi { margin-top: 18px; }
.ui-macd-name { position: absolute; z-index: 1; top: 2px; left: 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; pointer-events: none; }
.ui-macd-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-macd-zero { background: var(--ui-strong); }
.ui-macd-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-macd-svg path { fill: none; stroke: var(--c); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ui-macd-svg .ui-macd-fill { fill: var(--ui-macd-price); stroke: none; opacity: .08; }
.ui-macd-cols { position: absolute; inset: 0; display: flex; }
.ui-macd-col { position: relative; flex: 1; min-width: 0; }
.ui-macd-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-macd-col:hover::before { opacity: .9; }
.ui-macd-hist { position: absolute; left: 18%; right: 18%; min-height: 1px; background: var(--k); }
.ui-macd-fade { opacity: .45; }
.ui-macd-dot { position: absolute; left: 50%; display: none; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-macd-col:hover .ui-macd-dot { display: block; }
.ui-macd-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-macd-flip .ui-macd-tip { left: auto; right: calc(50% + 10px); }
.ui-macd-col:hover .ui-macd-tip { display: block; }
.ui-macd-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-macd-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-macd-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-macd-tip .ui-macd-hv b { color: var(--k); }
.ui-macd-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-macd-y .ui-macd-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--c); color: var(--ui-bg); font-weight: 600; }
.ui-macd-x { position: relative; height: 16px; margin-top: 6px; }
.ui-macd-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-macd-x .ui-macd-first { transform: none; }
.ui-macd-x .ui-macd-end { transform: translateX(-100%); }


.ui-product { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ui-product:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
.ui-product-media { position: relative; display: block; aspect-ratio: var(--r, 4 / 3); background: var(--ui-subtle); overflow: hidden; }
.ui-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ui-product:hover .ui-product-media img { transform: scale(1.03); }
.ui-product-badge { position: absolute; top: 10px; left: 10px; z-index: 1; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 600 11px/22px var(--ui-font); letter-spacing: .02em; text-transform: uppercase; color: var(--ui-accent-fg); background: var(--ui-accent); }
.ui-product-badge-success { background: var(--ui-success); color: #fff; }
.ui-product-badge-warning { background: var(--ui-warning); color: #fff; }
.ui-product-badge-danger { background: var(--ui-danger); color: #fff; }
.ui-product-badge-neutral { background: var(--ui-fg); color: var(--ui-bg); }
.ui-product-corner { position: absolute; top: 8px; right: 8px; z-index: 1; }
.ui-product-out .ui-product-media img { opacity: .55; filter: grayscale(.6); }
.ui-product-body { display: grid; gap: 6px; padding: 12px 14px 14px; flex: 1; align-content: start; }
.ui-product-brand { font-size: 12px; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .04em; }
.ui-product-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-product-name a { color: inherit; text-decoration: none; }
.ui-product-name a::after { content: ""; position: absolute; inset: 0; }
.ui-product-name a:hover { color: var(--ui-accent); }
.ui-product-name a:focus-visible { outline: none; }
.ui-product:has(.ui-product-name a:focus-visible) { box-shadow: var(--ui-focus); border-color: var(--ui-accent); }
.ui-product { position: relative; }
.ui-product-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-muted); }
.ui-product-stars { display: inline-flex; gap: 1px; }
.ui-product-star { position: relative; width: 14px; height: 14px; color: var(--ui-strong); }
.ui-product-star svg { display: block; width: 14px; height: 14px; }
.ui-product-star-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--ui-warning); }
.ui-product-stock { font-size: 12px; font-weight: 500; color: var(--ui-warning); }
.ui-product-out .ui-product-stock { color: var(--ui-danger); }
.ui-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.ui-product-form { position: relative; z-index: 1; display: contents; }
.ui-product-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 13px/1 var(--ui-font); white-space: nowrap; cursor: pointer;
  transition: background .15s, box-shadow .15s; }
.ui-product-btn svg { width: 16px; height: 16px; }
.ui-product-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-product-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-product-btn:disabled { background: var(--ui-subtle); color: var(--ui-muted); cursor: not-allowed; }
.ui-product-sm .ui-product-body { padding: 10px 12px 12px; gap: 4px; }
.ui-product-sm .ui-product-name { font-size: 14px; }
.ui-product-sm .ui-product-btn { height: 30px; padding: 0 10px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-product, .ui-product-media img, .ui-product-btn { transition: none; } .ui-product:hover .ui-product-media img { transform: none; } }


html:has(.ui-stacked-modal[open]) { overflow: hidden; }
.ui-stacked-modal-host { display: contents; }
.ui-stacked-modal-page { transition: transform .34s cubic-bezier(.22, 1, .36, 1), border-radius .34s; }
.ui-stacked-modal {
  position: fixed; inset: max(44px, calc(env(safe-area-inset-top) + 16px)) 0 var(--ui-stacked-modal-kb, 0px) 0; box-sizing: border-box; flex-direction: column;
  width: 100%; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0;
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: 0 -4px 24px rgba(15, 14, 24, .18), 0 160px 0 0 var(--ui-surface); font: 15px/1.5 var(--ui-font); overscroll-behavior: contain;
  transform-origin: 50% 0; transform: translateY(105%); will-change: transform;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), filter .34s, overlay .34s allow-discrete, display .34s allow-discrete;
}
.ui-stacked-modal[open] { display: flex; transform: translateY(var(--ui-stacked-modal-y, 0px)) scale(var(--ui-stacked-modal-scale, 1)); filter: brightness(var(--ui-stacked-modal-dim, 1)); }
@starting-style { .ui-stacked-modal[open] { transform: translateY(105%); } }
.ui-stacked-modal::backdrop { background: var(--ui-overlay); opacity: .7; }
.ui-stacked-modal-grip { display: flex; flex: none; align-items: center; justify-content: center; height: 22px; touch-action: none; }
.ui-stacked-modal-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-stacked-modal-head {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 0 8px 6px 20px; border-bottom: 1px solid var(--ui-border);
  touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.ui-stacked-modal-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-stacked-modal-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
@media (hover: hover) { .ui-stacked-modal-close:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-stacked-modal-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stacked-modal-close svg { width: 18px; height: 18px; }
.ui-stacked-modal-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); }
.ui-stacked-modal-body > :first-child { margin-top: 0; }
.ui-stacked-modal-body > :last-child { margin-bottom: 0; }
/* A <dialog> sits over the whole window, so the window's width is the right one to ask, Split View included. */
@media (min-width: 600px) {
  .ui-stacked-modal {
    inset: 8dvh 0 calc(8dvh + var(--ui-stacked-modal-kb, 0px)) 0; width: min(600px, calc(100vw - 48px)); margin: 0 auto; border: 1px solid var(--ui-border);
    border-radius: calc(var(--ui-radius) + 6px); box-shadow: var(--ui-shadow-lg);
  }
}
@media (prefers-reduced-motion: reduce) { .ui-stacked-modal, .ui-stacked-modal-page { transition: none; } }


.ui-force-update-host { display: contents; }
.ui-force-update {
  position: fixed; z-index: 70; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.5 var(--ui-font);
}
.ui-force-update::backdrop { background: var(--ui-overlay); }
.ui-force-update-hard { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; }
.ui-force-update-hard[open] { display: flex; align-items: center; justify-content: center; }
.ui-force-update-soft {
  inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--ui-border);
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-force-update-in {
  display: grid; gap: 12px; box-sizing: border-box; width: 100%; max-width: 30em; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.ui-force-update-hard .ui-force-update-in { justify-items: center; text-align: center; }
.ui-force-update-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-force-update-mark svg { width: 36px; height: 36px; }
.ui-force-update h2 { margin: 0; font-size: 24px; line-height: 1.25; }
.ui-force-update p { margin: 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-force-update-notes { display: grid; gap: 2px; margin: 0; padding-inline-start: 20px; text-align: start; }
.ui-force-update-acts { display: grid; gap: 8px; width: 100%; }
@media (min-width: 700px) {
  .ui-force-update-soft { inset: 0; width: min(480px, 90vw); height: fit-content; margin: auto; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); }
  .ui-force-update-hard .ui-force-update-mark { width: 96px; height: 96px; }
  .ui-force-update-hard .ui-force-update-mark svg { width: 48px; height: 48px; }
}


.ui-crontab { display: grid; gap: 14px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-crontab .ui-crontab-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-crontab-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ui-crontab-field { display: grid; gap: 5px; min-width: 0; }
.ui-crontab-field label { font-size: 13px; font-weight: 500; }
.ui-crontab-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
.ui-crontab-line { font-family: var(--ui-mono); }
.ui-crontab-input:hover { border-color: var(--ui-strong); }
.ui-crontab-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-crontab-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-crontab-error { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-crontab-error pre { margin: 0; overflow-x: auto; font: 13px/1.4 var(--ui-mono); }
.ui-crontab-says { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ui-crontab-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-crontab .ui-crontab-sub { margin: 0; font-size: 13px; font-weight: 600; }
.ui-crontab-runs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-crontab-input { transition: none; } }


.ui-fbuild { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-fbuild .ui-fbuild-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-fbuild .ui-fbuild-sub { margin: 0; font-size: 13px; font-weight: 600; }
.ui-fbuild-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.ui-fbuild-pane { display: grid; gap: 10px; min-width: 0; }
.ui-fbuild-palette { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-fbuild-btn { height: 28px; padding: 0 9px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-fbuild-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-fbuild-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fbuild-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.ui-fbuild-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-fbuild-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-fbuild-on { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-fbuild-pick { flex: 1 1 120px; min-width: 0; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: var(--ui-fg); font: 13px/1.3 var(--ui-font); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ui-fbuild-pick small { display: block; color: var(--ui-muted); font: 11px var(--ui-mono); }
.ui-fbuild-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fbuild-empty { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-fbuild-field { display: grid; gap: 4px; min-width: 0; }
.ui-fbuild-field label { font-size: 13px; font-weight: 500; }
.ui-fbuild-input { box-sizing: border-box; width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
textarea.ui-fbuild-input { height: 96px; padding: 6px 8px; font-family: var(--ui-mono); resize: vertical; }
.ui-fbuild-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fbuild-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-fbuild-why { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-fbuild-tick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ui-fbuild-tick input { margin: 0; accent-color: var(--ui-accent); }
.ui-fbuild-tick input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fbuild-preview { padding: 12px 14px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); }
.ui-fbuild-json { display: grid; gap: 8px; min-width: 0; }
.ui-fbuild-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-fbuild-said { color: var(--ui-muted); font-size: 13px; }
.ui-fbuild-errors { margin: 0; padding-left: 18px; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }


.ui-pagedots-demo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--ui-radius); }
.ui-pagedots-demo-track::-webkit-scrollbar { display: none; }
.ui-pagedots-demo-card { display: grid; flex: 0 0 100%; place-items: center; box-sizing: border-box; height: 180px; scroll-snap-align: start; scroll-snap-stop: always; background: var(--ui-accent-soft); color: var(--ui-accent); font: 600 22px var(--ui-font); }


.ui-settings { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-settings-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-settings-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-settings-desc { margin: 3px 0 0; color: var(--ui-muted); }
.ui-settings-rows { margin: 0; padding: 0; list-style: none; }
.ui-settings-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 14px 20px; }
.ui-settings-row + .ui-settings-row { border-top: 1px solid var(--ui-border); }
.ui-settings-row-wide { grid-template-columns: minmax(0, 1fr); }
.ui-settings-label { font-weight: 500; }
.ui-settings-hint { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-settings-control { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.ui-settings-row-wide .ui-settings-control { justify-content: stretch; margin-top: 6px; }
.ui-settings-row-wide .ui-settings-control > * { flex: 1; }
.ui-settings-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle);
  border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
@media (max-width: 560px) {
  .ui-settings-row { grid-template-columns: minmax(0, 1fr); }
  .ui-settings-control { justify-content: flex-start; margin-top: 6px; }
}


.ui-brk-host { display: contents; }
.ui-brk { --t: var(--ui-danger); display: flex; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid var(--t);
  border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--t) 8%, var(--ui-surface)); color: var(--ui-fg);
  font: 15px/1.4 var(--ui-font); }
.ui-brk-warning { --t: var(--ui-warning); }
.ui-brk-accent { --t: var(--ui-accent); }
.ui-brk-neutral { --t: var(--ui-fg); }
.ui-brk-label { flex: none; display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--t); color: var(--ui-bg);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.ui-brk-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: ui-brk-pulse 1.4s ease-in-out infinite; }
@keyframes ui-brk-pulse { 50% { opacity: .2; } }
.ui-brk-body { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: center; padding: 9px 14px; }
.ui-brk .ui-brk-headline { margin: 0; font-size: 16px; font-weight: 750; line-height: 1.3; }
.ui-brk-headline a { color: inherit; text-decoration: none; }
.ui-brk-headline a:hover { text-decoration: underline; text-decoration-color: var(--t); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ui-brk-headline a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-brk-summary { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-brk-time { flex: none; align-self: center; padding: 0 4px 0 6px; color: var(--ui-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-brk-time:last-child { padding-right: 14px; }
.ui-brk-x { flex: none; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 8px 0 2px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ui-brk-x:hover { background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--ui-fg); }
.ui-brk-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 560px) {
  .ui-brk { flex-wrap: wrap; }
  .ui-brk-label { padding: 6px 12px; }
  .ui-brk-body { order: 3; flex-basis: 100%; padding-top: 4px; }
  .ui-brk-time { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-brk-label::before { animation: none; } }


.ui-comparison { min-width: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-comparison table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-comparison th, .ui-comparison td { padding: 10px 14px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-comparison td { text-align: center; }
.ui-comparison thead th { text-align: center; background: var(--ui-subtle); font-weight: 600; }
.ui-comparison thead th:first-child, .ui-comparison tbody th { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 500;
  background: var(--ui-surface); }
.ui-comparison thead th:first-child { background: var(--ui-subtle); }
.ui-comparison tbody tr:last-child th, .ui-comparison tbody tr:last-child td { border-bottom: 0; }
.ui-comparison-meta, .ui-comparison-hint { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-comparison-group th { padding-top: 16px; background: var(--ui-surface); color: var(--ui-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; }
.ui-comparison-picked { background: color-mix(in srgb, var(--ui-accent-soft) 55%, var(--ui-surface)); }
.ui-comparison thead th.ui-comparison-picked { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-comparison-tagline { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-comparison-yes, .ui-comparison-no, .ui-comparison-none { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.ui-comparison-yes { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-comparison-no { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-comparison-none { color: var(--ui-muted); }
.ui-comparison-yes svg, .ui-comparison-no svg { width: 12px; height: 12px; }


.ui-hotelcard { position: relative; display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); min-width: 0; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ui-hotelcard:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
.ui-hotelcard:has(.ui-hotelcard-name a:focus-visible) { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-hotelcard-column { display: flex; flex-direction: column; width: 100%; max-width: 340px; }
.ui-hotelcard-bare { grid-template-columns: 1fr; }
.ui-hotelcard-media { position: relative; min-height: 180px; background: var(--ui-subtle); }
.ui-hotelcard-column .ui-hotelcard-media { aspect-ratio: 16 / 10; min-height: 0; }
.ui-hotelcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-hotelcard-badge { position: absolute; top: 10px; left: 10px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 11px/22px var(--ui-font); letter-spacing: .03em; text-transform: uppercase; }
.ui-hotelcard-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 14px 16px; }
.ui-hotelcard-column .ui-hotelcard-body { flex: 1; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.ui-hotelcard-info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ui-hotelcard-kind { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-hotelcard-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ui-hotelcard .ui-hotelcard-name { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; }
.ui-hotelcard-name a { color: inherit; text-decoration: none; }
.ui-hotelcard-name a::after { content: ""; position: absolute; inset: 0; }
.ui-hotelcard-name a:hover { color: var(--ui-accent); }
.ui-hotelcard-name a:focus-visible { outline: none; }
.ui-hotelcard-stars { display: inline-flex; gap: 1px; color: var(--ui-warning); }
.ui-hotelcard-stars svg { width: 13px; height: 13px; }
.ui-hotelcard-where { color: var(--ui-muted); font-size: 13px; }
.ui-hotelcard-amen { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ui-hotelcard-amen li { padding: 2px 8px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-muted); font-size: 12px; }
.ui-hotelcard-terms { display: grid; gap: 1px; font-size: 13px; }
.ui-hotelcard-cancel { color: var(--ui-success); font-weight: 600; }
.ui-hotelcard-cancel::before { content: "✓ "; }
.ui-hotelcard-prepay { color: var(--ui-muted); }
.ui-hotelcard-left { color: var(--ui-danger); font-size: 13px; font-weight: 600; }
.ui-hotelcard-side { display: grid; align-content: space-between; justify-items: end; gap: 12px; text-align: right; }
.ui-hotelcard-column .ui-hotelcard-side { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; text-align: left; }
.ui-hotelcard-column .ui-hotelcard-price { justify-items: end; text-align: right; }
.ui-hotelcard-review { display: flex; align-items: center; gap: 8px; }
.ui-hotelcard-words { display: grid; font-size: 12px; color: var(--ui-muted); text-align: right; }
.ui-hotelcard-words b { color: var(--ui-fg); font-size: 14px; font-weight: 650; }
.ui-hotelcard-column .ui-hotelcard-review { flex-direction: row-reverse; }
.ui-hotelcard-column .ui-hotelcard-words { text-align: left; }
.ui-hotelcard-score { display: grid; place-items: center; min-width: 36px; height: 34px; padding: 0 6px; border-radius: 8px 8px 8px 2px; background: var(--ui-accent);
  color: var(--ui-accent-fg); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-hotelcard-price { display: grid; gap: 1px; justify-items: end; font-variant-numeric: tabular-nums; }
.ui-hotelcard-old { color: var(--ui-danger); font-size: 13px; text-decoration: line-through; }
.ui-hotelcard-night { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.ui-hotelcard-night small { color: var(--ui-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ui-hotelcard-total, .ui-hotelcard-note { color: var(--ui-muted); font-size: 12px; }
.ui-hotelcard-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 34px; margin-top: 6px; padding: 0 14px;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; font-weight: 600; text-decoration: none; }
.ui-hotelcard-btn:hover { filter: brightness(1.08); }
.ui-hotelcard-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 620px) {
  .ui-hotelcard { grid-template-columns: 1fr; }
  .ui-hotelcard-media { aspect-ratio: 16 / 9; min-height: 0; }
  .ui-hotelcard-body { grid-template-columns: 1fr; }
  .ui-hotelcard-side { justify-items: start; text-align: left; }
  .ui-hotelcard-price { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .ui-hotelcard { transition: none; } }


.swipe-toast-demo-page { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; height: 100%; padding: 20px 20px 72px; }
.swipe-toast-demo-tabs { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-around; height: 56px; border-top: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); font: 12px var(--ui-font); }


.ui-qbuild { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-qbuild .ui-qbuild-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-qbuild-group { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-qbuild-group .ui-qbuild-group { background: var(--ui-subtle); }
.ui-qbuild-group .ui-qbuild-group .ui-qbuild-group { background: var(--ui-surface); }
.ui-qbuild-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ui-qbuild-kids { display: grid; gap: 8px; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--ui-border); list-style: none; }
.ui-qbuild-kids:empty { display: none; }
.ui-qbuild-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ui-qbuild-bad select, .ui-qbuild-bad input[type="text"], .ui-qbuild-bad input[type="date"] { border-color: var(--ui-danger); }
.ui-qbuild select, .ui-qbuild-input { box-sizing: border-box; max-width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-qbuild-input { width: 150px; }
.ui-qbuild select:focus-visible, .ui-qbuild-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-qbuild-and { color: var(--ui-muted); font-size: 13px; }
.ui-qbuild-pick { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
.ui-qbuild-pick label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.ui-qbuild-pick input { margin: 0; accent-color: var(--ui-accent); }
.ui-qbuild-pick input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-qbuild-btn { height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-qbuild-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-qbuild-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-qbuild-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-qbuild-why { flex-basis: 100%; margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-qbuild-count { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-qbuild-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-qbuild-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; min-width: 0; }
.ui-qbuild-pane { display: grid; align-content: start; gap: 4px; min-width: 0; margin: 0; }
.ui-qbuild-pane figcaption { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-qbuild-pane pre { max-height: 240px; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); font: 12px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-qbuild-pane pre:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-button-group { display: inline-flex; align-items: stretch; vertical-align: middle; }
.ui-button-group-spaced { flex-wrap: wrap; gap: 8px; }
.ui-button-group-vertical { flex-direction: column; }
.ui-button-group-full { display: flex; width: 100%; }
.ui-button-group-full > * { flex: 1; }
.ui-button-group-attached > * { position: relative; }
.ui-button-group-attached > :hover, .ui-button-group-attached > :focus-visible { z-index: 1; }
.ui-button-group-attached:not(.ui-button-group-vertical) > * + * { margin-left: -1px; }
.ui-button-group-attached:not(.ui-button-group-vertical) > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-button-group-attached:not(.ui-button-group-vertical) > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-button-group-attached.ui-button-group-vertical > * + * { margin-top: -1px; }
.ui-button-group-attached.ui-button-group-vertical > :not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }
.ui-button-group-attached.ui-button-group-vertical > :not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ui-button-group-attached:not(.ui-button-group-vertical) > :is(.ui-btn-solid, .ui-icon-btn-solid) + :is(.ui-btn-solid, .ui-icon-btn-solid) {
  margin-left: 0; border-left: 1px solid color-mix(in srgb, var(--ui-bg) 30%, transparent);
}
.ui-button-group-attached.ui-button-group-vertical > :is(.ui-btn-solid, .ui-icon-btn-solid) + :is(.ui-btn-solid, .ui-icon-btn-solid) {
  margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--ui-bg) 30%, transparent);
}


.ui-post-card {
  display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.5 var(--ui-font); color: var(--ui-fg);
}
.ui-post-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-post-card-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 14px; font-weight: 650; user-select: none;
}
.ui-post-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-post-card-who { display: grid; min-width: 0; line-height: 1.3; }
.ui-post-card-name { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.ui-post-card-name svg { width: 15px; height: 15px; color: var(--ui-info); }
.ui-post-card-meta { display: flex; gap: 6px; color: var(--ui-muted); font-size: 13px; }
.ui-post-card-meta a { color: inherit; text-decoration: none; }
.ui-post-card-meta a:hover { text-decoration: underline; }
.ui-post-card-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.ui-post-card-image { display: block; width: 100%; max-height: 420px; border-radius: var(--ui-radius-sm); object-fit: cover; background: var(--ui-subtle); }
.ui-post-card-counts { display: flex; gap: 14px; color: var(--ui-muted); font-size: 13px; }
.ui-post-card-actions { display: flex; gap: 4px; margin: 0 -8px -4px; padding-top: 6px; border-top: 1px solid var(--ui-border); }
.ui-post-card-btn {
  display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: 500 13px/1 var(--ui-font);
  text-decoration: none; cursor: pointer;
}
.ui-post-card-btn svg { width: 17px; height: 17px; }
.ui-post-card-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-post-card-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-post-card-btn[aria-pressed="true"] { color: var(--ui-danger); }
.ui-post-card-btn[aria-pressed="true"] svg { fill: currentColor; }


.ui-nav-rail { position: relative; box-sizing: border-box; min-width: 0; height: 100%; container: ui-nav-rail / inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 13px/1.25 var(--ui-font); }
.ui-nav-rail-frame { display: flex; height: 100%; min-height: 0; }
.ui-nav-rail-side {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: calc(80px + env(safe-area-inset-left)); box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) 0 8px env(safe-area-inset-left); overflow-y: auto; overscroll-behavior: contain; background: var(--ui-subtle); border-right: 1px solid var(--ui-border);
}
.ui-nav-rail-page { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.ui-nav-rail-menu {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-fg); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-nav-rail-menu svg { width: 24px; height: 24px; }
.ui-nav-rail-menu:focus-visible, .ui-nav-rail-action:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nav-rail-action {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; margin: 4px 0 8px; padding: 0; border: 0; border-radius: 16px; background: var(--ui-accent); color: var(--ui-accent-fg);
  box-shadow: var(--ui-shadow); font: 600 24px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-nav-rail-action svg { width: 24px; height: 24px; }
.ui-nav-rail-places { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.ui-nav-rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-sizing: border-box; width: 72px; min-height: 60px; padding: 4px 2px; border: 0;
  border-radius: var(--ui-radius); background: transparent; color: var(--ui-muted); font: 500 12px/1.2 var(--ui-font); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-nav-rail-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nav-rail-item[aria-current] { color: var(--ui-fg); font-weight: 600; }
.ui-nav-rail-pill { position: relative; display: inline-grid; place-items: center; width: 56px; height: 32px; border-radius: 999px; font-size: 19px; line-height: 1; transition: background .15s; }
.ui-nav-rail-pill svg { width: 24px; height: 24px; }
.ui-nav-rail-item[aria-current] .ui-nav-rail-pill { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-nav-rail-word { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav-rail-badge { position: absolute; top: -3px; left: 34px; min-width: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--ui-danger); color: #fff; font: 700 10px/16px var(--ui-font); text-align: center; }
.ui-nav-rail-dot { top: 2px; left: 38px; width: 8px; min-width: 0; height: 8px; padding: 0; }
.ui-nav-rail-more { display: none; }
@media (hover: hover) { .ui-nav-rail-item:hover .ui-nav-rail-pill, .ui-nav-rail-menu:hover { background: var(--ui-border); } }
@container ui-nav-rail (max-width: 599.98px) {
  .ui-nav-rail-frame { flex-direction: column-reverse; }
  .ui-nav-rail-side { flex-direction: row; justify-content: center; width: 100%; padding: 4px env(safe-area-inset-right) max(4px, env(safe-area-inset-bottom)) env(safe-area-inset-left); overflow: visible; border-right: 0; border-top: 1px solid var(--ui-border); }
  .ui-nav-rail-menu { display: none; }
  .ui-nav-rail-places { flex-direction: row; justify-content: space-around; gap: 0; }
  .ui-nav-rail-item { flex: 1 1 0; width: auto; min-width: 0; max-width: 112px; }
  .ui-nav-rail-extra { display: none; }
  .ui-nav-rail-more { display: flex; }
  .ui-nav-rail-action { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 2; margin: 0; box-shadow: var(--ui-shadow-lg); }
}
.ui-nav-rail-drawer {
  inset: 0 auto 0 0; box-sizing: border-box; width: min(320px, 86vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-right: 1px solid var(--ui-border);
  background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ui-nav-rail-drawer[open] { display: flex; flex-direction: column; animation: ui-nav-rail-in .24s cubic-bezier(.2, .8, .2, 1); }
.ui-nav-rail-drawer::backdrop { background: var(--ui-overlay); }
.ui-nav-rail-dragging { transition: none; }
@keyframes ui-nav-rail-in { from { transform: translateX(-100%); } }
.ui-nav-rail-drawer-top { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 56px; padding: env(safe-area-inset-top) 6px 0 16px; border-bottom: 1px solid var(--ui-border); }
.ui-nav-rail-drawer-top h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ui-nav-rail-drawer-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.ui-nav-rail-row {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 6px 12px; border: 0; border-radius: var(--ui-radius); background: transparent;
  color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-nav-rail-row[aria-current] { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; }
.ui-nav-rail-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nav-rail-row .ui-nav-rail-pill { width: 28px; }
.ui-nav-rail-row .ui-nav-rail-badge { position: static; margin-left: auto; font-size: 12px; line-height: 20px; min-width: 20px; }
.ui-nav-rail-row .ui-nav-rail-dot { width: 8px; min-width: 0; height: 8px; }
.ui-nav-rail-row span:not([class]) { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ui-nav-rail-drawer { transition: none; } .ui-nav-rail-drawer[open] { animation: none; } .ui-nav-rail-pill { transition: none; } }


.ui-stormeter { position: relative; container-type: inline-size; display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-stormeter-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-stormeter-sum { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ui-stormeter-total { margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-stormeter-of { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-stormeter-bar { display: flex; overflow: hidden; height: 12px; border-radius: 999px; background: var(--ui-subtle); }
.ui-stormeter-seg { min-width: 0; background: var(--ui-stormeter-tone); }
.ui-stormeter-seg + .ui-stormeter-seg { border-left: 1px solid var(--ui-surface); }
.ui-stormeter-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ui-stormeter-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-stormeter-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.ui-stormeter-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-stormeter-tone); }
.ui-stormeter-tone-0 { --ui-stormeter-tone: var(--ui-accent); }
.ui-stormeter-tone-1 { --ui-stormeter-tone: var(--ui-info); }
.ui-stormeter-tone-2 { --ui-stormeter-tone: var(--ui-success); }
.ui-stormeter-tone-3 { --ui-stormeter-tone: var(--ui-warning); }
.ui-stormeter-tone-4 { --ui-stormeter-tone: var(--ui-danger); }
.ui-stormeter-tone-5 { --ui-stormeter-tone: var(--ui-strong); }
.ui-stormeter-bytes { display: block; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-stormeter-note { grid-column: 1 / -1; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-stormeter-btn { min-width: 76px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-stormeter-btn:disabled { opacity: .6; cursor: default; }
.ui-stormeter-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stormeter-danger { border-color: var(--ui-danger); background: var(--ui-danger); color: var(--ui-surface); }
.ui-stormeter-ask { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); }
.ui-stormeter-q { margin: 0; font-weight: 600; }
.ui-stormeter-warn { margin: 0; font-size: 14px; }
.ui-stormeter-ask-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-stormeter-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-stormeter-said { flex: 1 1 200px; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-stormeter-said[data-bad] { color: var(--ui-danger); }
.ui-stormeter-where { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (hover: hover) { .ui-stormeter-btn:hover:enabled { border-color: var(--ui-strong); background: var(--ui-subtle); } .ui-stormeter-danger:hover:enabled { border-color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 85%, #000); } }
@container (min-width: 600px) {
  .ui-stormeter-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
}
@container (max-width: 599px) {
  .ui-stormeter-body { display: grid; gap: 12px; }
}


.ui-form-wizard { display: grid; gap: 18px; min-width: 0; max-width: 560px; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-form-wizard-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: ui-form-wizard; }
.ui-form-wizard-step { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; }
.ui-form-wizard-step::before { content: ""; height: 4px; border-radius: 2px; background: var(--ui-border); }
.ui-form-wizard-done::before, .ui-form-wizard-current::before { background: var(--ui-accent); }
.ui-form-wizard-step-label {
  display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ui-muted);
  font: 500 12px var(--ui-font); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px;
}
.ui-form-wizard-current .ui-form-wizard-step-label { color: var(--ui-fg); }
button.ui-form-wizard-step-label { color: var(--ui-accent); cursor: pointer; }
button.ui-form-wizard-step-label:hover { text-decoration: underline; }
button.ui-form-wizard-step-label:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-form-wizard-num { font-variant-numeric: tabular-nums; }
.ui-form-wizard-form { display: grid; gap: 18px; margin: 0; }
.ui-form-wizard-panel { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-form-wizard-panel[hidden] { display: none; }
.ui-form-wizard-title { margin: 0; padding: 0; font-size: 18px; font-weight: 650; line-height: 1.3; outline: none; }
.ui-form-wizard-text { margin: -8px 0 0; color: var(--ui-muted); }
.ui-form-wizard-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-form-wizard-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-form-wizard-req { margin-left: 2px; color: var(--ui-danger); }
.ui-form-wizard-input {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
textarea.ui-form-wizard-input { height: auto; padding: 8px 12px; resize: vertical; }
select.ui-form-wizard-input { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--ui-muted) 50%);
  background-position: right 16px top 50%, right 11px top 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ui-form-wizard-input:hover { border-color: var(--ui-strong); }
.ui-form-wizard-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-form-wizard-input:user-invalid { border-color: var(--ui-danger); }
.ui-form-wizard-check { display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; }
.ui-form-wizard-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-accent); cursor: pointer; }
.ui-form-wizard-check input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-form-wizard-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ui-form-wizard-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-form-wizard-review { display: grid; gap: 14px; }
.ui-form-wizard-review-step { display: grid; gap: 8px; }
.ui-form-wizard-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--ui-border); }
.ui-form-wizard-review-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
.ui-form-wizard-edit { padding: 0; border: 0; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; border-radius: 3px; }
.ui-form-wizard-edit:hover { text-decoration: underline; }
.ui-form-wizard-edit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-form-wizard-dl { display: grid; gap: 6px; margin: 0; }
.ui-form-wizard-dl div { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 12px; }
.ui-form-wizard-dl dt { color: var(--ui-muted); }
.ui-form-wizard-dl dd { margin: 0; overflow-wrap: anywhere; }
.ui-form-wizard-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.ui-form-wizard-gap { flex: 1; }
.ui-form-wizard-button {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px var(--ui-font); cursor: pointer;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.ui-form-wizard-button:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-form-wizard-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-form-wizard-back { background: transparent; color: var(--ui-fg); border-color: var(--ui-border); }
.ui-form-wizard-back:hover { background: var(--ui-subtle); border-color: var(--ui-strong); }
.ui-form-wizard-count { font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ui-form-wizard-step-label .ui-form-wizard-name { display: none; } .ui-form-wizard-dl div { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .ui-form-wizard-input, .ui-form-wizard-button { transition: none; } }


.ui-text { margin: 0; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); overflow-wrap: anywhere; }
:where(span, small).ui-text { font-size: inherit; line-height: inherit; }
.ui-text + .ui-text { margin-top: .6em; }
.ui-text-xs { font-size: 12px; }
.ui-text-sm { font-size: 13px; }
.ui-text-lg { font-size: 17px; }
.ui-text-xl { font-size: 20px; line-height: 1.4; }
.ui-text-normal { font-weight: 400; }
.ui-text-medium { font-weight: 500; }
.ui-text-semibold { font-weight: 600; }
.ui-text-bold { font-weight: 700; }
.ui-text-muted { color: var(--ui-muted); }
.ui-text-accent { color: var(--ui-accent); }
.ui-text-success { color: var(--ui-success); }
.ui-text-warning { color: var(--ui-warning); }
.ui-text-danger { color: var(--ui-danger); }
.ui-text-info { color: var(--ui-info); }
.ui-text-start { text-align: start; }
.ui-text-center { text-align: center; }
.ui-text-end { text-align: end; }
.ui-text-justify { text-align: justify; }
.ui-text-italic { font-style: italic; }
.ui-text-mono { font-family: var(--ui-mono); font-size: .93em; }


.ui-prompt-dialog-text:empty { display: none; }
.ui-prompt-dialog-host { display: contents; }
.ui-prompt-dialog {
  width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font);
}
.ui-prompt-dialog::backdrop { background: var(--ui-overlay); }
.ui-prompt-dialog[open] { animation: ui-prompt-dialog-in .16s ease-out; }
@keyframes ui-prompt-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-prompt-dialog form { display: grid; gap: 14px; padding: 20px 22px 20px; }
.ui-prompt-dialog h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-prompt-dialog-text { margin: -6px 0 0; color: var(--ui-muted); }
.ui-prompt-dialog-text > :first-child { margin-top: 0; }
.ui-prompt-dialog-text > :last-child { margin-bottom: 0; }
.ui-prompt-dialog-field { display: grid; gap: 6px; font-size: 13px; }
.ui-prompt-dialog-field > span { font-weight: 500; }
.ui-prompt-dialog-input {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
.ui-prompt-dialog-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-prompt-dialog-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-prompt-dialog-hint { color: var(--ui-muted); }
.ui-prompt-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ui-prompt-dialog-btn {
  height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-prompt-dialog-btn:hover { background: var(--ui-subtle); }
.ui-prompt-dialog-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-prompt-dialog-ok { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-prompt-dialog-ok:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
@media (prefers-reduced-motion: reduce) { .ui-prompt-dialog[open] { animation: none; } .ui-prompt-dialog-input { transition: none; } }


.ui-avatar-upload { display: grid; gap: 8px; min-width: 0; width: fit-content; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-avatar-upload-label { font-size: 13px; font-weight: 500; }
.ui-avatar-upload-req { margin-left: 2px; color: var(--ui-danger); }
.ui-avatar-upload-row { display: flex; align-items: center; gap: 16px; }
.ui-avatar-upload-pic {
  position: relative; flex: none; display: grid; place-items: center; width: var(--ui-avatar-upload-size, 96px); height: var(--ui-avatar-upload-size, 96px);
  overflow: hidden; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-border);
  font-weight: 600; font-size: calc(var(--ui-avatar-upload-size, 96px) * .36); letter-spacing: .02em; user-select: none;
}
.ui-avatar-upload-square .ui-avatar-upload-pic { border-radius: var(--ui-radius); }
.ui-avatar-upload-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-avatar-upload-pic svg { width: 45%; height: 45%; color: var(--ui-muted); }
.ui-avatar-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-avatar-upload-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-avatar-upload-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-avatar-upload-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-avatar-upload-btn:has(input:focus-visible) { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-avatar-upload-btn:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-avatar-upload-remove {
  height: 32px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted);
  font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-avatar-upload-remove:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-avatar-upload-remove:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-avatar-upload-remove:disabled { opacity: .55; cursor: not-allowed; }
.ui-avatar-upload-meta { font-size: 12px; color: var(--ui-muted); }
.ui-avatar-upload-hint, .ui-avatar-upload-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-avatar-upload-error { color: var(--ui-danger); }
.ui-avatar-upload-invalid .ui-avatar-upload-pic { box-shadow: inset 0 0 0 2px var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-avatar-upload-btn { transition: none; } }


.ui-filtertabs { display: flex; flex-wrap: wrap; gap: 4px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-filtertabs-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ui-muted); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.ui-filtertabs-tab:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-filtertabs-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-filtertabs-tab[aria-selected="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-filtertabs-tab:disabled { opacity: .5; cursor: not-allowed; }
.ui-filtertabs-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ui-subtle); border: 1px solid var(--ui-border);
  color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
.ui-filtertabs-tab[aria-selected="true"] .ui-filtertabs-count { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-filtertabs-line { gap: 0; border-bottom: 1px solid var(--ui-border); }
.ui-filtertabs-line .ui-filtertabs-tab { height: 40px; margin-bottom: -1px; border-radius: 0; box-shadow: inset 0 -2px 0 transparent; }
.ui-filtertabs-line .ui-filtertabs-tab:hover { background: transparent; }
.ui-filtertabs-line .ui-filtertabs-tab[aria-selected="true"] { background: transparent; color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-filtertabs-line .ui-filtertabs-tab[aria-selected="true"] .ui-filtertabs-count { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-filtertabs-sm .ui-filtertabs-tab { height: 28px; padding: 0 10px; font-size: 13px; }
.ui-filtertabs-sm .ui-filtertabs-count { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ui-filtertabs-tab { transition: none; } }


.ui-abbr { position: relative; text-decoration: underline dotted; text-decoration-color: var(--ui-muted); text-underline-offset: 2px;
  cursor: help; border-radius: 3px; }
.ui-abbr:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-abbr-bubble::after { content: attr(data-ui-abbr); position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); display: none; width: max-content; max-width: min(240px, 70vw); padding: 5px 9px;
  border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); box-shadow: var(--ui-shadow);
  font: 500 12px/1.4 var(--ui-font); text-align: center; white-space: normal; text-decoration: none; }
.ui-abbr-bubble:hover::after, .ui-abbr-bubble:focus::after { display: block; }
@media (hover: none) { .ui-abbr-bubble:hover:not(:focus)::after { display: none; } }


.ui-split-view {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 0; height: var(--ui-split-view-h, 100%);
  container: ui-split-view / inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-split-view-bar {
  display: flex; align-items: center; gap: 4px; flex: none; min-height: 52px; box-sizing: border-box; padding: 3px 6px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-split-view-title { flex: 1; min-width: 0; margin: 0; padding: 0 8px; overflow: hidden; font-size: 15px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ui-split-view-go {
  display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 44px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 15px/1.2 var(--ui-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-split-view-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-split-view-go:hover { background: var(--ui-subtle); } }
.ui-split-view-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ui-split-view-panes { display: flex; width: 100%; height: 100%; }
.ui-split-view-pane {
  box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 100%; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; outline: none;
  -webkit-overflow-scrolling: touch; border-left: 1px solid var(--ui-border);
}
.ui-split-view-pane:first-child { border-left: 0; }
.ui-split-view-divider { position: absolute; top: 0; bottom: 0; z-index: 2; display: none; width: 44px; margin-left: -22px; touch-action: pan-y; cursor: col-resize; outline: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui-split-view-grip { position: absolute; top: 50%; left: 50%; width: 8px; height: 56px; margin: -28px 0 0 -4px; border-radius: 999px; background: var(--ui-strong); transition: background .15s, transform .15s; }
.ui-split-view-divider:focus-visible .ui-split-view-grip { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-split-view-dragging .ui-split-view-grip { background: var(--ui-accent); transform: scaleX(1.25); }
.ui-split-view-dragging { cursor: col-resize; }
.ui-split-view-dragging .ui-split-view-pane { pointer-events: none; }
.ui-split-view-settle .ui-split-view-pane, .ui-split-view-settle .ui-split-view-divider { transition: flex-basis .22s cubic-bezier(.2, .8, .2, 1), left .22s cubic-bezier(.2, .8, .2, 1); }
@container ui-split-view (min-width: 840px) {
  .ui-split-view-panes > :nth-child(1) { flex: 0 0 var(--ui-split-view-a); }
  .ui-split-view[data-count="3"] .ui-split-view-panes > :nth-child(2) { flex: 0 0 var(--ui-split-view-b); }
  .ui-split-view[data-fold="last"] .ui-split-view-panes > :nth-child(2) { flex: 1 1 0; }
  .ui-split-view[data-fold="first"] .ui-split-view-panes > :nth-child(1), .ui-split-view[data-fold="last"] .ui-split-view-panes > :nth-child(3) {
    position: absolute; inset: 0 auto 0 0; width: 40%; visibility: hidden; pointer-events: none;
  }
  .ui-split-view-divider[data-index="0"] { display: block; left: var(--ui-split-view-a); }
  .ui-split-view-divider[data-index="1"] { display: block; left: calc(var(--ui-split-view-a) + var(--ui-split-view-b)); }
  /* A pane put away leaves its divider at the edge: the way back for a finger and for the keys. */
  .ui-split-view[data-fold="first"] .ui-split-view-divider[data-index="0"] { left: 0; margin-left: 0; }
  .ui-split-view[data-fold="first"] .ui-split-view-divider[data-index="1"] { left: var(--ui-split-view-b); }
  .ui-split-view[data-fold="last"] .ui-split-view-divider[data-index="1"] { left: 100%; margin-left: -44px; }
}
@container ui-split-view (min-width: 600px) and (max-width: 839.98px) {
  .ui-split-view[data-count="2"] .ui-split-view-panes > :nth-child(1) { flex: 0 0 var(--ui-split-view-a); }
  .ui-split-view[data-count="2"][data-fold="first"] .ui-split-view-panes > :nth-child(1) { position: absolute; inset: 0 auto 0 0; width: 40%; visibility: hidden; pointer-events: none; }
  .ui-split-view[data-count="2"] .ui-split-view-divider[data-index="0"] { display: block; left: var(--ui-split-view-a); }
  .ui-split-view[data-count="2"][data-fold="first"] .ui-split-view-divider[data-index="0"] { left: 0; margin-left: 0; }
  .ui-split-view[data-count="3"][data-at="0"] .ui-split-view-panes > :nth-child(1) { flex: 0 0 var(--ui-split-view-m); }
  .ui-split-view[data-count="3"][data-at="0"] .ui-split-view-panes > :nth-child(3) { position: absolute; inset: 0 auto 0 0; width: 40%; visibility: hidden; pointer-events: none; }
  .ui-split-view[data-count="3"]:not([data-at="0"]) .ui-split-view-panes > :nth-child(1) { position: absolute; inset: 0 auto 0 0; width: 40%; visibility: hidden; pointer-events: none; }
  .ui-split-view[data-count="3"]:not([data-at="0"]) .ui-split-view-panes > :nth-child(2) { flex: 0 0 var(--ui-split-view-m); border-left: 0; }
  .ui-split-view[data-count="3"][data-at="0"] .ui-split-view-divider[data-index="0"] { display: block; left: var(--ui-split-view-m); }
  .ui-split-view[data-count="3"]:not([data-at="0"]) .ui-split-view-divider[data-index="1"] { display: block; left: var(--ui-split-view-m); }
}
@container ui-split-view (max-width: 599.98px) {
  .ui-split-view-panes > .ui-split-view-pane { position: absolute; inset: 0 auto 0 0; width: 100%; visibility: hidden; pointer-events: none; border-left: 0; }
  .ui-split-view[data-at="0"] .ui-split-view-panes > :nth-child(1), .ui-split-view[data-at="1"] .ui-split-view-panes > :nth-child(2),
  .ui-split-view[data-at="2"] .ui-split-view-panes > :nth-child(3) { visibility: visible; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-split-view-settle .ui-split-view-pane, .ui-split-view-settle .ui-split-view-divider, .ui-split-view-grip { transition: none; }
}


.status-tint-demo-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.status-tint-demo-field { display: grid; gap: 4px; max-width: 320px; color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }
.status-tint-demo-field input { box-sizing: border-box; min-height: 46px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-tripb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 760px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-tripb .ui-tripb-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-tripb-trip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ui-tripb-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-tripb input, .ui-tripb select { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-tripb input:focus-visible, .ui-tripb select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-tripb input[aria-invalid] { border-color: var(--ui-danger); }
.ui-tripb-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-tripb-row { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-border); }
.ui-tripb-inputs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 84px minmax(0, 1.4fr) minmax(0, 1.2fr) 32px; gap: 6px; align-items: center; }
.ui-tripb-amount { text-align: right; font-variant-numeric: tabular-nums; }
.ui-tripb-remove { width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-muted); font: 16px/1 var(--ui-font); cursor: pointer; }
.ui-tripb-remove:hover { border-color: var(--ui-border); color: var(--ui-danger); }
.ui-tripb-remove:focus-visible, .ui-tripb-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tripb-sum { margin: 0; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-tripb-bad { margin: 0; color: var(--ui-danger); font-size: 12px; }
.ui-tripb-add { justify-self: start; height: 34px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-tripb-add:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-tripb-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-tripb-say { margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-tripb-over { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-tripb-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.ui-tripb-out div { display: grid; gap: 2px; min-width: 0; }
.ui-tripb-out dt { color: var(--ui-muted); font-size: 12px; }
.ui-tripb-out dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-tripb-scroll { overflow-x: auto; }
.ui-tripb-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tripb-kinds { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-tripb-kinds th, .ui-tripb-kinds td { padding: 6px; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-tripb-kinds thead th { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-tripb-kinds tbody th { text-align: left; font-weight: 600; }
.ui-tripb-kinds thead th:first-child { text-align: left; }
.ui-tripb-is-over td { color: var(--ui-danger); font-weight: 600; }
.ui-tripb-rates { margin: 0; color: var(--ui-muted); font-size: 12px; }
@media (max-width: 620px) {
  .ui-tripb-trip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-tripb-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ui-tripb-label { grid-column: 1 / -1; }
}


.ui-grouped { min-width: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-grouped table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-grouped th, .ui-grouped td { padding: 9px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-grouped thead th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; }
.ui-grouped .ui-grouped-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-grouped-group th { background: color-mix(in srgb, var(--ui-accent-soft) 55%, var(--ui-surface)); font-weight: 600; }
.ui-grouped-name { color: var(--ui-fg); }
.ui-grouped-count { margin-left: 8px; color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-grouped-zebra tbody tr:nth-child(odd):not(.ui-grouped-group):not(.ui-grouped-sub) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-grouped tbody tr:not(.ui-grouped-group):hover td { background: var(--ui-subtle); }
.ui-grouped-sub th, .ui-grouped-sub td { background: var(--ui-subtle); color: var(--ui-fg); font-weight: 600; font-size: 13px; }
.ui-grouped-sub th { font-weight: 500; color: var(--ui-muted); }
.ui-grouped-total th, .ui-grouped-total td { border-bottom: 0; border-top: 2px solid var(--ui-strong); background: var(--ui-surface); font-weight: 700; }
.ui-grouped-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); white-space: normal; }


.ui-alert-rule { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-alert-rule .ui-alert-rule-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-alert-rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.ui-alert-rule-field { display: grid; gap: 5px; min-width: 0; }
.ui-alert-rule-field label { font-size: 13px; font-weight: 500; }
.ui-alert-rule-field input, .ui-alert-rule-field select { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-alert-rule-field input:focus-visible, .ui-alert-rule-field select:focus-visible, .ui-alert-rule-data textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-alert-rule-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-alert-rule-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-alert-rule-chart { display: block; width: 100%; height: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-alert-rule-chart text { fill: var(--ui-muted); font: 22px var(--ui-font); }
.ui-alert-rule-line { fill: none; stroke: var(--ui-accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ui-alert-rule-limit { stroke: var(--ui-danger); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.ui-alert-rule-band { fill: var(--ui-danger); opacity: .16; }
.ui-alert-rule-mark { fill: var(--ui-danger); }
.ui-alert-rule-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.ui-alert-rule-stats > div { padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-alert-rule-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-alert-rule-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-alert-rule-warns { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-alert-rule-warns li { padding: 8px 12px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); }
.ui-alert-rule-warns li.ui-alert-rule-tip { border-left-color: var(--ui-info); background: var(--ui-info-soft); }
.ui-alert-rule-scroll { overflow-x: auto; }
.ui-alert-rule-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-alert-rule table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-alert-rule caption { padding: 0 0 6px; text-align: left; font-weight: 600; }
.ui-alert-rule th, .ui-alert-rule td { padding: 5px 8px; border-bottom: 1px solid var(--ui-border); text-align: left; white-space: nowrap; }
.ui-alert-rule thead th { color: var(--ui-muted); font-weight: 500; }
.ui-alert-rule-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-alert-rule-data summary { font-weight: 600; cursor: pointer; }
.ui-alert-rule-data summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-alert-rule-data textarea { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); resize: vertical; }


.ui-date-range-picker { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-date-range-picker-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-date-range-picker-trigger {
  display: flex; align-items: center; gap: 8px; width: fit-content; min-width: 240px; max-width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ui-date-range-picker-trigger svg { flex: none; width: 18px; height: 18px; color: var(--ui-muted); }
.ui-date-range-picker-trigger:hover { border-color: var(--ui-strong); }
.ui-date-range-picker-trigger:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-date-range-picker-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ui-date-range-picker-empty { color: var(--ui-muted); }
.ui-date-range-picker-invalid .ui-date-range-picker-trigger { border-color: var(--ui-danger); }
.ui-date-range-picker-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; width: max-content; max-width: calc(100vw - 32px); margin-top: 4px;
  padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg);
}
.ui-date-range-picker-pop[hidden] { display: none; }
.ui-date-range-picker-body { display: flex; gap: 16px; }
.ui-date-range-picker-presets { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding-right: 12px; border-right: 1px solid var(--ui-border); }
.ui-date-range-picker-preset {
  padding: 6px 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg);
  font: 13px var(--ui-font); text-align: left; white-space: nowrap; cursor: pointer;
}
.ui-date-range-picker-preset:hover { background: var(--ui-subtle); }
.ui-date-range-picker-preset[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 500; }
.ui-date-range-picker-preset:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-date-range-picker-months { display: flex; flex-wrap: wrap; gap: 20px; }
.ui-date-range-picker-month { width: 252px; max-width: 100%; }
.ui-date-range-picker-head { display: flex; align-items: center; justify-content: center; position: relative; height: 30px; margin-bottom: 4px; }
.ui-date-range-picker-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.ui-date-range-picker-nav {
  position: absolute; top: 0; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-date-range-picker-nav svg { width: 18px; height: 18px; }
.ui-date-range-picker-prev { left: 0; }
.ui-date-range-picker-next { right: 0; }
.ui-date-range-picker-nav:hover:not([aria-disabled="true"]) { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-date-range-picker-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-date-range-picker-nav[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.ui-date-range-picker-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-date-range-picker-grid th { padding: 4px 0; font-size: 12px; font-weight: 500; color: var(--ui-muted); text-align: center; }
.ui-date-range-picker-grid td { padding: 1px 0; text-align: center; }
.ui-date-range-picker-day { height: 34px; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; outline: none; }
.ui-date-range-picker-day:hover { background: var(--ui-subtle); border-radius: var(--ui-radius-sm); }
.ui-date-range-picker-day:focus { box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-date-range-picker-today { font-weight: 700; color: var(--ui-accent); }
.ui-date-range-picker-in, .ui-date-range-picker-day.ui-date-range-picker-in:hover { background: var(--ui-accent-soft); color: var(--ui-fg); border-radius: 0; }
.ui-date-range-picker-preview { background: color-mix(in srgb, var(--ui-accent-soft) 60%, transparent); box-shadow: inset 0 1px 0 var(--ui-accent), inset 0 -1px 0 var(--ui-accent); }
.ui-date-range-picker-edge, .ui-date-range-picker-day.ui-date-range-picker-edge:hover { background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-date-range-picker-first { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
.ui-date-range-picker-last { border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-date-range-picker-first.ui-date-range-picker-last { border-radius: var(--ui-radius-sm); }
.ui-date-range-picker-day[aria-disabled="true"] { color: var(--ui-muted); opacity: .45; cursor: not-allowed; background: none; }
.ui-date-range-picker-off { text-decoration: line-through; }
.ui-date-range-picker-note { display: block; font-size: 10px; line-height: 1.1; color: var(--ui-muted); text-decoration: none; }
.ui-date-range-picker-noted .ui-date-range-picker-day { height: 42px; line-height: 1.2; }
.ui-date-range-picker-edge .ui-date-range-picker-note { color: inherit; }
.ui-date-range-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-border); font-size: 13px; color: var(--ui-muted); }
.ui-date-range-picker-clear {
  padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer;
}
.ui-date-range-picker-clear:hover { border-color: var(--ui-strong); }
.ui-date-range-picker-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-date-range-picker-hint, .ui-date-range-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-date-range-picker-error { color: var(--ui-danger); }
.ui-date-range-picker-sm .ui-date-range-picker-trigger { height: 30px; min-width: 200px; font-size: 13px; }
@media (max-width: 640px) {
  .ui-date-range-picker-body { flex-direction: column; gap: 10px; }
  .ui-date-range-picker-presets { flex-direction: row; flex-wrap: wrap; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .ui-date-range-picker-month { width: 100%; }
  .ui-date-range-picker-pop { right: 0; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-date-range-picker-trigger { transition: none; } }


.ui-savest { display: inline-flex; align-items: center; gap: 6px; font: 13px/1.4 var(--ui-font); color: var(--ui-muted); --t: var(--ui-muted); }
.ui-savest-saved { --t: var(--ui-success); }
.ui-savest-unsaved { --t: var(--ui-warning); }
.ui-savest-error { --t: var(--ui-danger); color: var(--ui-danger); }
.ui-savest-icon { flex: none; width: 16px; height: 16px; color: var(--t); }
.ui-savest-saving .ui-savest-icon { animation: ui-savest-turn 1s linear infinite; }
.ui-savest-time { color: var(--ui-muted); }
.ui-savest-time::before { content: "·"; margin: 0 6px 0 0; }
.ui-savest-action { height: 24px; padding: 0 8px; margin-left: 2px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-savest-action:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-savest-action:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-savest-sm { font-size: 12px; gap: 5px; }
.ui-savest-sm .ui-savest-icon { width: 14px; height: 14px; }
@keyframes ui-savest-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-savest-saving .ui-savest-icon { animation: none; } }


.ui-sunburst {
  --ui-sunburst-1: light-dark(#2a78d6, #3987e5); --ui-sunburst-2: light-dark(#eb6834, #d95926);
  --ui-sunburst-3: light-dark(#1baf7a, #199e70); --ui-sunburst-4: light-dark(#eda100, #c98500);
  --ui-sunburst-5: light-dark(#e87ba4, #d55181); --ui-sunburst-6: light-dark(#008300, #008300);
  --ui-sunburst-7: light-dark(#6250d6, #9085e9); --ui-sunburst-8: light-dark(#e34948, #e66767);
  display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 16px 28px; min-width: 0; margin: 0;
  font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-sunburst-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-sunburst-s1 { --c: var(--ui-sunburst-1); } .ui-sunburst-s2 { --c: var(--ui-sunburst-2); } .ui-sunburst-s3 { --c: var(--ui-sunburst-3); }
.ui-sunburst-s4 { --c: var(--ui-sunburst-4); } .ui-sunburst-s5 { --c: var(--ui-sunburst-5); } .ui-sunburst-s6 { --c: var(--ui-sunburst-6); }
.ui-sunburst-s7 { --c: var(--ui-sunburst-7); } .ui-sunburst-s8 { --c: var(--ui-sunburst-8); }
.ui-sunburst-ring { flex: none; max-width: 100%; aspect-ratio: 1; }
.ui-sunburst-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-sunburst-arc { fill: color-mix(in srgb, var(--c) var(--k, 100%), var(--ui-bg)); stroke: var(--ui-bg); stroke-width: .8;
  transition: opacity .15s ease; }
.ui-sunburst-ring svg:has(.ui-sunburst-arc:hover) .ui-sunburst-arc:not(:hover) { opacity: .45; }
.ui-sunburst-d2 { --k: 78%; } .ui-sunburst-d3 { --k: 60%; } .ui-sunburst-d4 { --k: 46%; } .ui-sunburst-d5 { --k: 36%; }
.ui-sunburst-text { fill: #fff; font: 600 6.5px var(--ui-font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ui-sunburst-text.ui-sunburst-dark { fill: var(--ui-fg); }
.ui-sunburst-mid { text-anchor: middle; pointer-events: none; font-family: var(--ui-font); }
.ui-sunburst-mid .ui-sunburst-big { fill: var(--ui-fg); font-size: 10px; font-weight: 650; }
.ui-sunburst-mid .ui-sunburst-small { fill: var(--ui-muted); font-size: 7px; }
.ui-sunburst-hover { visibility: hidden; }
.ui-sunburst-ring svg:has(.ui-sunburst-arc:hover) .ui-sunburst-total { visibility: hidden; }
.ui-sunburst-arc:hover + .ui-sunburst-hover { visibility: visible; }
.ui-sunburst-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center;
  flex: 1 1 200px; min-width: 0; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.ui-sunburst-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.ui-sunburst-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ui-sunburst-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sunburst-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sunburst-pct { min-width: 3.2em; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-sunburst-arc { transition: none; } }


.ui-multiples {
  --ui-multiples-1: light-dark(#2a78d6, #3987e5); --ui-multiples-2: light-dark(#eb6834, #d95926);
  --ui-multiples-3: light-dark(#1baf7a, #199e70); --ui-multiples-4: light-dark(#eda100, #c98500);
  --ui-multiples-5: light-dark(#e87ba4, #d55181); --ui-multiples-6: light-dark(#008300, #008300);
  --ui-multiples-7: light-dark(#6250d6, #9085e9); --ui-multiples-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-multiples-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-multiples-s1 { --c: var(--ui-multiples-1); } .ui-multiples-s2 { --c: var(--ui-multiples-2); } .ui-multiples-s3 { --c: var(--ui-multiples-3); }
.ui-multiples-s4 { --c: var(--ui-multiples-4); } .ui-multiples-s5 { --c: var(--ui-multiples-5); } .ui-multiples-s6 { --c: var(--ui-multiples-6); }
.ui-multiples-s7 { --c: var(--ui-multiples-7); } .ui-multiples-s8 { --c: var(--ui-multiples-8); }
.ui-multiples-grid { display: grid; gap: 14px 18px; }
.ui-multiples-panel { min-width: 0; padding: 10px 12px 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-multiples-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ui-multiples-name { overflow: hidden; color: var(--ui-muted); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-multiples-last { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-multiples-plot { position: relative; }
.ui-multiples-grid-line { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-multiples-grid-line span { position: absolute; z-index: 2; left: 0; bottom: 2px; color: var(--ui-muted); font-size: 10px;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 3px var(--ui-surface), 0 0 2px var(--ui-surface); pointer-events: none; }
.ui-multiples-grid-line .ui-multiples-top { top: 2px; bottom: auto; }
.ui-multiples-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-multiples-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-multiples-area { fill: var(--c); opacity: .16; stroke: none; }
.ui-multiples-cols { position: absolute; inset: 0; display: flex; }
.ui-multiples-col { position: relative; flex: 1; min-width: 0; --x: 50%; }
.ui-multiples-line-kind .ui-multiples-col:first-child:not(:last-child) { flex: .5; --x: 0%; }
.ui-multiples-line-kind .ui-multiples-col:last-child:not(:first-child) { flex: .5; --x: 100%; }
.ui-multiples-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-multiples-line-kind .ui-multiples-col:hover::before { opacity: 1; }
.ui-multiples-dot { position: absolute; left: var(--x); display: none; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ui-surface); }
.ui-multiples-col:hover .ui-multiples-dot { display: block; }
.ui-multiples-bar { position: absolute; left: 15%; right: 15%; bottom: var(--a); height: var(--b); min-height: 1px;
  border-radius: 2px 2px 0 0; background: var(--c); }
.ui-multiples-col:hover .ui-multiples-bar { filter: brightness(1.12); }
.ui-multiples-x { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--ui-muted); font-size: 11px; }
.ui-multiples-x span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-multiples-tip { position: absolute; z-index: 20; bottom: calc(100% + 6px); left: var(--x); display: none; padding: 4px 8px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow);
  color: var(--ui-fg); font-size: 12px; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.ui-multiples-tip b { margin-left: 6px; font-variant-numeric: tabular-nums; }
.ui-multiples-col:first-child .ui-multiples-tip { transform: none; }
.ui-multiples-col:last-child .ui-multiples-tip { transform: translateX(-100%); }
.ui-multiples-col:hover .ui-multiples-tip { display: block; }


.ui-team-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 20px 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); text-align: center; }
.ui-team-card-photo { width: 112px; height: 112px; margin-bottom: 10px; border-radius: var(--ui-radius); overflow: hidden; }
.ui-team-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-team-card-photo > .ui-team-card-initials { --s: 112px; }
.ui-team-card-sm .ui-team-card-photo { width: 72px; height: 72px; }
.ui-team-card-sm .ui-team-card-photo > .ui-team-card-initials { --s: 72px; }
.ui-team-card-name { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.ui-team-card-name a { color: inherit; text-decoration: none; }
.ui-team-card-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-team-card-name a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-team-card-role { color: var(--ui-accent); font-size: 13px; font-weight: 500; }
.ui-team-card-bio { margin: 6px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-team-card-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.ui-team-card-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-radius-sm); color: var(--ui-muted); }
.ui-team-card-link:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-team-card-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-team-card-link svg { width: 18px; height: 18px; }


.ui-email-input { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-email-input-label { font-size: 13px; font-weight: 500; }
.ui-email-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-email-input-box {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-email-input-box:hover { border-color: var(--ui-strong); }
.ui-email-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-email-input-box:has(input:user-invalid) { border-color: var(--ui-danger); }
.ui-email-input-box svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-email-input-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font);
}
.ui-email-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-email-input-suggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm);
  background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px;
}
.ui-email-input-take { padding: 2px 4px; border: 0; border-radius: 3px; background: transparent; color: inherit; font: 600 13px var(--ui-font); text-decoration: underline; cursor: pointer; }
.ui-email-input-take:hover { background: color-mix(in srgb, var(--ui-warning) 15%, transparent); }
.ui-email-input-take:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-email-input-keep { margin-left: auto; padding: 2px 6px; border: 0; border-radius: 3px; background: transparent; color: inherit; font: 13px var(--ui-font); cursor: pointer; opacity: .8; }
.ui-email-input-keep:hover { opacity: 1; text-decoration: underline; }
.ui-email-input-keep:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-email-input-sm .ui-email-input-box { height: 30px; padding: 0 10px; }
.ui-email-input-sm .ui-email-input-box input { font-size: 13px; }
.ui-email-input-invalid .ui-email-input-box, .ui-email-input-invalid .ui-email-input-box:hover { border-color: var(--ui-danger); }
.ui-email-input-hint, .ui-email-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-email-input-error { color: var(--ui-danger); }
.ui-email-input-disabled { opacity: .55; }
.ui-email-input-disabled input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-email-input-box { transition: none; } }


.ui-theme-sheet-host { display: contents; }
.ui-theme-sheet-open { min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer; }
.ui-theme-sheet-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* The dialog is moved by hand in a drag, so it has no style attribute in its markup: one would be written again on any change, and the drag would jump home. */
.ui-theme-sheet {
  box-sizing: border-box; inset: auto 0 0 0; width: 100%; max-width: 100vw; max-height: calc(100dvh - 12px); margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0;
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.45 var(--ui-font);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain;
}
.ui-theme-sheet[open] { display: flex; flex-direction: column; animation: ui-theme-sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes ui-theme-sheet-up { from { transform: translateY(100%); } }
.ui-theme-sheet::backdrop { background: var(--ui-overlay); }
.ui-theme-sheet-dragging { transition: none; user-select: none; -webkit-user-select: none; }
.ui-theme-sheet-grip { display: grid; place-items: center; flex: none; height: 28px; touch-action: none; cursor: grab; }
.ui-theme-sheet-grip i { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-theme-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; padding: 0 12px 8px 20px; touch-action: none; }
.ui-theme-sheet-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ui-theme-sheet-done { min-width: 64px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 600 16px/1 var(--ui-font); cursor: pointer; }
.ui-theme-sheet-done:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-theme-sheet-body { flex: 1; display: grid; gap: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px max(20px, var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px))); }
.ui-theme-sheet-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-theme-sheet-group legend { margin-bottom: 6px; padding: 0; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-theme-sheet-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui-theme-sheet-mode { position: relative; display: grid; place-items: center; min-height: 52px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); cursor: pointer; font-weight: 500; }
.ui-theme-sheet-mode:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-theme-sheet-mode:has(input:focus-visible), .ui-theme-sheet-swatch:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-theme-sheet-mode input, .ui-theme-sheet-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-theme-sheet-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-theme-sheet-swatch { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; }
.ui-theme-sheet-swatch i { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-theme-sheet-light); }
.ui-dark .ui-theme-sheet-swatch i { background: var(--ui-theme-sheet-dark); }
@media (prefers-color-scheme: dark) { :root:not(.ui-light) .ui-theme-sheet-swatch i { background: var(--ui-theme-sheet-dark); } }
.ui-light .ui-theme-sheet-swatch i { background: var(--ui-theme-sheet-light); }
.ui-theme-sheet-swatch:has(input:checked) i { box-shadow: 0 0 0 3px var(--ui-surface), 0 0 0 5px var(--ui-fg); }
.ui-theme-sheet-preview { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); color: var(--ui-fg); }
.ui-theme-sheet-preview b { font-size: 16px; }
.ui-theme-sheet-preview p { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-theme-sheet-sample { justify-self: start; padding: 8px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-theme-sheet-link { color: var(--ui-accent); font-weight: 600; }
@media (min-width: 700px) and (min-height: 500px) {
  .ui-theme-sheet { inset: 0; width: 620px; height: fit-content; margin: auto; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px); }
  .ui-theme-sheet-grip { display: none; }
  .ui-theme-sheet-head { padding: 14px 12px 8px 20px; touch-action: auto; }
  .ui-theme-sheet-body { grid-template-columns: minmax(0, 1fr) 220px; }
  .ui-theme-sheet-preview { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  @keyframes ui-theme-sheet-up { from { transform: translateY(12px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .ui-theme-sheet { transition: none; } .ui-theme-sheet[open] { animation: none; } }


.ui-phev { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-phev h3 { margin: 0; font-size: 18px; }
.ui-phev-cols { display: grid; gap: 12px; min-width: 0; }
.ui-phev-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-phev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-phev-tags legend { padding: 0 0 4px; color: var(--ui-muted); font-size: 13px; }
.ui-phev-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-weight: 600; cursor: pointer; touch-action: manipulation; }
.ui-phev-tag input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-phev-tag:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-phev-tag:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-phev-tag small { color: var(--ui-muted); font: 500 13px var(--ui-mono); }
.ui-phev-tag[data-met] small { color: var(--ui-success); }
.ui-phev-add { display: grid; gap: 8px; min-width: 0; }
.ui-phev-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-phev-add-row > * { flex: 1 1 140px; }
.ui-phev-say { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-phev-say:empty { display: none; }
.ui-phev-bad { color: var(--ui-danger); font-weight: 600; }
.ui-phev-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 14px; }
.ui-phev-line[data-off] { background: var(--ui-warning-soft); }
.ui-phev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ui-phev-grid li { position: relative; min-width: 0; }
.ui-phev-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); cursor: pointer; touch-action: manipulation; }
.ui-phev-thumb:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-phev-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-phev-mark { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 1px 6px; overflow: hidden; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 12px/1.5 var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.ui-phev-wait { position: absolute; right: 4px; top: 4px; padding: 1px 6px; border-radius: 4px; background: var(--ui-warning-soft); color: var(--ui-fg); font: 600 12px/1.5 var(--ui-font); }
.ui-phev-drop { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ui-phev-drop span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 16px; line-height: 1; }
.ui-phev-drop:focus-visible { outline: none; }
.ui-phev-drop:focus-visible span { box-shadow: var(--ui-focus); }
.ui-phev-empty { margin: 0; padding: 20px 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-phev-view { box-sizing: border-box; width: min(100vw, 860px); max-width: 100vw; max-height: 100dvh; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); overscroll-behavior: contain; }
.ui-phev-view::backdrop { background: var(--ui-overlay); }
.ui-phev-view img { display: block; width: 100%; max-height: 66dvh; object-fit: contain; background: #0f0e17; }
.ui-phev-view-foot { display: grid; gap: 8px; padding: 12px; }
.ui-phev-view-foot p { margin: 0; font: 13px/1.4 var(--ui-mono); overflow-wrap: anywhere; }
.ui-phev-view-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-phev-view-acts > * { flex: 1 1 120px; }
.ui-phev-foot { display: grid; gap: 8px; }
@container (min-width: 640px) {
  .ui-phev-cols { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
  .ui-phev-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ui-phev-tag { transition: none; } }


.ui-picklist { --tap: 72px; display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-picklist h3 { margin: 0; font-size: 18px; }
.ui-picklist-top { display: grid; gap: 4px; }
.ui-picklist-count { margin: 0; font-weight: 600; }
.ui-picklist-bar { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-picklist-bar span { display: block; height: 100%; background: var(--ui-success); transition: width .2s; }
.ui-picklist-cols { display: grid; gap: 12px; min-width: 0; }
.ui-picklist-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-picklist-card { display: grid; gap: 6px; padding: 14px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
.ui-picklist-loc { margin: 0; font: 800 40px/1.1 var(--ui-mono); overflow-wrap: anywhere; }
.ui-picklist-name { margin: 0; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.ui-picklist-code { margin: 0; color: var(--ui-muted); font: 14px var(--ui-mono); overflow-wrap: anywhere; }
.ui-picklist-qty { margin: 0; font: 700 26px var(--ui-mono); }
.ui-picklist-next { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-picklist-said { display: grid; align-content: center; min-height: 56px; margin: 0; padding: 8px 12px; border-left: 6px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; overflow-wrap: anywhere; }
.ui-picklist-said[data-kind="good"] { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-picklist-said[data-kind="bad"] { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-picklist-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-picklist-big, .ui-picklist-other { display: grid; place-items: center; min-height: var(--tap); padding: 0 10px; border: 2px solid transparent; border-radius: var(--ui-radius-sm); font: 700 19px/1.2 var(--ui-font); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ui-picklist-big { grid-column: 1 / -1; min-height: calc(var(--tap) + 16px); background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 22px; }
.ui-picklist-other { border-color: var(--ui-strong); background: var(--ui-surface); color: var(--ui-fg); }
.ui-picklist-other[hidden] { display: none; }
.ui-picklist-big:focus-visible, .ui-picklist-other:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-picklist-other:disabled { opacity: .5; cursor: default; }
.ui-picklist-short { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-warning); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-picklist-short h4 { margin: 0; font-size: 16px; }
.ui-picklist-found { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ui-picklist-found b { min-width: 60px; text-align: center; font: 700 28px var(--ui-mono); }
.ui-picklist-step { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 700 30px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-picklist-step:disabled { opacity: .4; cursor: default; }
.ui-picklist-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-picklist-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-picklist-reason { position: relative; display: grid; place-items: center; min-height: 56px; padding: 4px 8px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); font-weight: 600; text-align: center; cursor: pointer; }
.ui-picklist-reason input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-picklist-reason:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-picklist-reason:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-picklist-rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ui-picklist-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 56px; padding: 6px 10px; border: 1px solid var(--ui-border); border-left: 5px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.3 var(--ui-font); text-align: left; cursor: pointer; touch-action: manipulation; content-visibility: auto; contain-intrinsic-size: auto 58px; }
.ui-picklist-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-picklist-row[aria-current="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-picklist-row[data-state="done"] { border-left-color: var(--ui-success); opacity: .75; }
.ui-picklist-row[data-state="short"] { border-left-color: var(--ui-danger); }
.ui-picklist-row[data-state="skipped"] { border-left-color: var(--ui-warning); }
.ui-picklist-row b { font-family: var(--ui-mono); overflow-wrap: anywhere; }
.ui-picklist-row span { min-width: 0; overflow-wrap: anywhere; }
.ui-picklist-row small { color: var(--ui-muted); font: 500 13px var(--ui-mono); white-space: nowrap; }
.ui-picklist-end { display: grid; gap: 8px; padding: 14px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius); }
.ui-picklist-end h4 { margin: 0; font-size: 18px; }
.ui-picklist-end p { margin: 0; }
.ui-picklist-end ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.ui-picklist-note { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 14px; }
@container (min-width: 640px) {
  .ui-picklist-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .ui-picklist-loc { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .ui-picklist-bar span { transition: none; } }


.ui-barcodein { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-barcodein-label { font-size: 13px; font-weight: 500; }
.ui-barcodein-req { margin-left: 2px; color: var(--ui-danger); }
.ui-barcodein-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-mono); font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s; }
.ui-barcodein-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-barcodein-control:hover { border-color: var(--ui-strong); }
.ui-barcodein-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-barcodein-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-barcodein-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-barcodein-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-barcodein-out { display: grid; gap: 4px; min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-barcodein-out p { margin: 0; }
.ui-barcodein-good { color: var(--ui-success); }
.ui-barcodein-bad { color: var(--ui-danger); }
.ui-barcodein-digits { font-family: var(--ui-mono); color: var(--ui-fg); }
.ui-barcodein-digits mark { border-radius: 2px; background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 700; }
.ui-barcodein-others { display: grid; gap: 2px; margin: 0; }
.ui-barcodein-others div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ui-barcodein-others dt { font-size: 12px; color: var(--ui-muted); }
.ui-barcodein-others dd { margin: 0; color: var(--ui-fg); font-family: var(--ui-mono); }
.ui-barcodein-use { padding: 0; border: 0; border-radius: 3px; background: none; color: var(--ui-accent); font: 600 13px var(--ui-font); cursor: pointer; text-align: left;
  text-decoration: underline; overflow-wrap: anywhere; }
.ui-barcodein-use:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-barcodein-control { transition: none; } }


.ui-amortization { display: grid; gap: 14px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-amortization-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 0; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-border); }
.ui-amortization-facts div { padding: 12px 14px; background: var(--ui-surface); }
.ui-amortization-facts dt { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-amortization-facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-amortization-years { display: grid; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-amortization-year + .ui-amortization-year { border-top: 1px solid var(--ui-border); }
.ui-amortization-year > summary { display: grid; grid-template-columns: 18px minmax(90px, 1.2fr) repeat(3, minmax(0, 1fr)); align-items: baseline; gap: 4px 12px;
  padding: 10px 14px; cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
.ui-amortization-year > summary::-webkit-details-marker { display: none; }
.ui-amortization-year > summary::before { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--ui-muted); border-bottom: 2px solid var(--ui-muted);
  transform: translateY(-2px) rotate(-45deg); transition: transform .15s; }
.ui-amortization-year[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.ui-amortization-year > summary:hover { background: var(--ui-subtle); }
.ui-amortization-year > summary:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-amortization-label b { display: block; font-weight: 650; }
.ui-amortization-label small, .ui-amortization-sum small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-amortization-sum { text-align: right; font-weight: 600; }
.ui-amortization-scroll { overflow-x: auto; border-top: 1px solid var(--ui-border); }
.ui-amortization table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-amortization th, .ui-amortization td { padding: 6px 14px; text-align: right; white-space: nowrap; }
.ui-amortization thead th { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--ui-subtle); }
.ui-amortization th:first-child, .ui-amortization td:first-child { text-align: left; }
.ui-amortization tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-amortization tbody th { font-weight: 500; }
.ui-amortization tfoot td, .ui-amortization tfoot th { border-top: 1px solid var(--ui-border); font-weight: 650; }
.ui-amortization-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0; padding: 0 4px; color: var(--ui-muted); font-size: 13px; }
.ui-amortization-total b { color: var(--ui-fg); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ui-amortization-year > summary { grid-template-columns: 18px 1fr 1fr; }
  .ui-amortization-year > summary .ui-amortization-hide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-amortization-year > summary::before { transition: none; } }


.ui-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; height: 38px; min-width: 38px;
  padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; vertical-align: middle;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ui-toggle:hover { background: var(--ui-subtle); border-color: var(--ui-strong); }
.ui-toggle:focus-visible { outline: none; box-shadow: var(--ui-focus); position: relative; z-index: 2; }
.ui-toggle:disabled { opacity: .55; cursor: not-allowed; }
.ui-toggle-soft { border-color: transparent; background: var(--ui-subtle); }
.ui-toggle-ghost { border-color: transparent; }
.ui-toggle-on, .ui-toggle-on:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); background: var(--ui-accent-soft); color: var(--ui-accent);
}
.ui-toggle-ghost.ui-toggle-on { border-color: transparent; }
.ui-toggle-icon { display: inline-grid; place-items: center; min-width: 1em; font-weight: 650; line-height: 1; }
.ui-toggle-icon svg { width: 18px; height: 18px; }
.ui-toggle-only { padding: 0; width: 38px; }
.ui-toggle-sm { height: 30px; min-width: 30px; padding: 0 10px; font-size: 13px; }
.ui-toggle-sm.ui-toggle-only { width: 30px; padding: 0; }
.ui-toggle-sm .ui-toggle-icon svg { width: 16px; height: 16px; }
.ui-toggle-lg { height: 46px; min-width: 46px; padding: 0 20px; font-size: 16px; }
.ui-toggle-lg.ui-toggle-only { width: 46px; padding: 0; }
.ui-toggle-group { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.ui-toggle-group-attached { flex-wrap: nowrap; gap: 0; }
.ui-toggle-group-attached > .ui-toggle + .ui-toggle { margin-left: -1px; }
.ui-toggle-group-attached > .ui-toggle:not(:first-of-type) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-toggle-group-attached > .ui-toggle:not(:last-of-type) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-toggle-group-attached > .ui-toggle-on { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ui-toggle { transition: none; } }


.ui-imsg { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 13px/1.4 var(--ui-font);
  color: var(--t); --t: var(--ui-info); }
.ui-imsg-neutral { --t: var(--ui-muted); }
.ui-imsg-success { --t: var(--ui-success); }
.ui-imsg-warning { --t: var(--ui-warning); }
.ui-imsg-error { --t: var(--ui-danger); }
.ui-imsg-sm { font-size: 12px; gap: 5px; }
.ui-imsg-icon { flex: none; width: 16px; height: 16px; }
.ui-imsg-sm .ui-imsg-icon { width: 14px; height: 14px; }
.ui-imsg-text { min-width: 0; }
.ui-imsg a { color: inherit; font-weight: 500; text-underline-offset: 2px; }


.context-preview-demo-trip { padding: 16px 60px 16px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.context-preview-demo-trip h3 { margin: 0 0 4px; font-size: 16px; }
.context-preview-demo-trip p { margin: 0; color: var(--ui-muted); font-size: 14px; }
.context-preview-demo-sub { margin: 8px 0 0; color: var(--ui-muted); font-size: 14px; }


.ui-date-wheels { container-type: inline-size; min-width: 0; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-date-wheels-body { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ui-date-wheels-set { display: grid; grid-template-columns: 1.7fr .8fr 1.1fr; gap: 4px; min-width: 0; }
.ui-date-wheels-ymd .ui-date-wheels-set { grid-template-columns: 1.1fr 1.7fr .8fr; }
.ui-date-wheels-dmy .ui-date-wheels-set { grid-template-columns: .8fr 1.7fr 1.1fr; }
.ui-date-wheels-out { display: block; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-date-wheels-big { display: none; }
@container (min-width: 440px) {
  .ui-date-wheels-body { grid-template-columns: minmax(150px, 220px) minmax(0, 420px); justify-content: center; align-items: center; gap: 16px; }
  .ui-date-wheels-out { padding: 18px 12px; border-radius: var(--ui-radius); background: var(--ui-subtle); }
  .ui-date-wheels-big { display: block; font-size: 56px; line-height: 1.1; font-weight: 700; }
  .ui-date-wheels-line { display: block; font-weight: 500; color: var(--ui-muted); }
}


.ui-tabs { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-tabs-radio { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ui-tabs-tab {
  order: 0; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 0; background: none;
  color: var(--ui-muted); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; user-select: none;
  transition: color .15s, background .15s, box-shadow .15s, border-color .15s;
}
.ui-tabs-tab:hover { color: var(--ui-fg); }
.ui-tabs-panel { order: 1; display: none; width: 100%; padding-top: 16px; }
.ui-tabs-panel > :first-child { margin-top: 0; }
.ui-tabs-panel > :last-child { margin-bottom: 0; }
.ui-tabs-radio:checked + .ui-tabs-tab + .ui-tabs-panel,
.ui-tabs:not(:has(> .ui-tabs-radio:checked)) > .ui-tabs-panel:first-of-type,
.ui-tabbar-panel { display: block; }
.ui-tabs-radio:focus-visible + .ui-tabs-tab, .ui-tabs-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }

.ui-tabs-line::after { content: ""; order: 0; flex: 1 0 0; align-self: stretch; border-bottom: 1px solid var(--ui-border); }
.ui-tabs-line .ui-tabs-tab { border-bottom: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; }
.ui-tabs-line .ui-tabs-radio:checked + .ui-tabs-tab,
.ui-tabs-line:not(:has(> .ui-tabs-radio:checked)) > .ui-tabs-tab:first-of-type,
.ui-tabs-line .ui-tabs-tab[aria-selected="true"] { color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-tabs-line .ui-tabs-radio:checked:focus-visible + .ui-tabs-tab,
.ui-tabs-line .ui-tabs-tab[aria-selected="true"]:focus-visible { box-shadow: inset 0 -2px 0 var(--ui-accent), var(--ui-focus); }

.ui-tabs-pill { gap: 4px; }
.ui-tabs-pill .ui-tabs-tab { height: 32px; border-radius: 999px; }
.ui-tabs-pill .ui-tabs-tab:hover { background: var(--ui-subtle); }
.ui-tabs-pill .ui-tabs-radio:checked + .ui-tabs-tab,
.ui-tabs-pill:not(:has(> .ui-tabs-radio:checked)) > .ui-tabs-tab:first-of-type,
.ui-tabs-pill .ui-tabs-tab[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }

.ui-tabbar-list { display: flex; flex-wrap: wrap; width: 100%; }
.ui-tabs-line .ui-tabbar-list::after { content: ""; flex: 1 0 0; align-self: stretch; border-bottom: 1px solid var(--ui-border); }
.ui-tabs-pill .ui-tabbar-list { gap: 4px; }
.ui-tabs-line.ui-tabbar::after { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-tabs-tab { transition: none; } }


.ui-toc { min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-toc-sticky { position: sticky; top: var(--ui-toc-top, 16px); max-height: calc(100vh - var(--ui-toc-top, 16px) * 2); overflow: auto; }
.ui-toc-title { margin: 0 0 8px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ui-border); }
.ui-toc li { margin: 0; }
.ui-toc a {
  display: block; margin-left: -1px; padding: 5px 10px 5px calc(12px + var(--ui-toc-depth, 0) * 14px);
  border-left: 2px solid transparent; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
  color: var(--ui-muted); text-decoration: none; overflow-wrap: anywhere; transition: color .15s, border-color .15s;
}
.ui-toc a:hover { color: var(--ui-fg); }
.ui-toc a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-toc a[aria-current] { border-left-color: var(--ui-accent); color: var(--ui-accent); font-weight: 500; }
.ui-toc-deep a { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-toc a { transition: none; } }


.ui-compass { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-compass-in { display: grid; gap: 12px; justify-items: center; }
.ui-compass-face { position: relative; width: min(100%, 280px); aspect-ratio: 1; }
.ui-compass-rose { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.ui-compass-ring { fill: var(--ui-surface); stroke: var(--ui-border); stroke-width: 1; }
.ui-compass-tick { stroke: var(--ui-muted); stroke-width: 1; }
.ui-compass-tick-big { stroke: var(--ui-fg); stroke-width: 2; }
.ui-compass-letter { fill: var(--ui-fg); font: 600 14px/1 var(--ui-font); text-anchor: middle; }
.ui-compass-north { fill: var(--ui-danger); }
.ui-compass-mark { fill: var(--ui-accent); }
.ui-compass-lubber { position: absolute; left: 50%; top: -2px; width: 0; height: 0; margin-left: -8px; border: 8px solid transparent; border-top: 14px solid var(--ui-danger); }
.ui-compass-side { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.ui-compass-read { display: grid; gap: 2px; justify-items: center; text-align: center; }
.ui-compass-big { font: 600 30px/1.15 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-compass-turn { color: var(--ui-accent); font-weight: 500; }
.ui-compass-say { margin: 0; color: var(--ui-muted); max-width: 34ch; }
.ui-compass-say:empty { display: none; }
.ui-compass-say[data-bad] { color: var(--ui-fg); }
.ui-compass-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* With room, the readings and advice stand beside the dial. */
@container (min-width: 420px) {
  .ui-compass-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .ui-compass-face { width: min(100%, 420px, 70dvh); }
}


.ui-dc { display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-dc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-dc-bid { --k: var(--ui-success); } .ui-dc-ask { --k: var(--ui-danger); }
.ui-dc-head { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-dc-head li { display: inline-flex; align-items: center; gap: 6px; }
.ui-dc-head b { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-dc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.ui-dc-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 20px; }
.ui-dc-plot { position: relative; height: var(--h); border-bottom: 1px solid var(--ui-strong); }
.ui-dc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-dc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-dc-area { fill: var(--k); opacity: .16; }
.ui-dc-edge { fill: none; stroke: var(--k); stroke-width: 2; stroke-linejoin: round; }
.ui-dc-mid { position: absolute; z-index: 1; top: 0; bottom: 0; border-left: 1px dashed var(--ui-strong); pointer-events: none; }
.ui-dc-mid span { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); padding: 1px 5px; border-radius: 3px;
  background: var(--ui-subtle); color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-dc-zone { position: absolute; top: 0; bottom: 0; }
.ui-dc-zone::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--y); border-top: 2px solid var(--k);
  background: color-mix(in srgb, var(--k) 22%, transparent); opacity: 0; }
.ui-dc-zone:hover::before { opacity: 1; }
.ui-dc-tip { position: absolute; z-index: 20; bottom: calc(var(--y) + 8px); display: none; min-width: 170px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-dc-bid .ui-dc-tip { left: 0; } .ui-dc-ask .ui-dc-tip { right: 0; }
.ui-dc-zone:hover .ui-dc-tip { display: block; }
.ui-dc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; color: var(--k); }
.ui-dc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-dc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-dc-y { position: relative; height: var(--h); }
.ui-dc-y span { position: absolute; left: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-dc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-dc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-dc-x .ui-dc-first { transform: none; }
.ui-dc-x .ui-dc-end { transform: translateX(-100%); }
.ui-dc-empty { display: grid; place-items: center; height: var(--h); border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); }


.ui-price-breakdown { display: grid; gap: 8px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-price-breakdown-title { margin: 0; font-size: 15px; font-weight: 600; }
.ui-price-breakdown-lines { display: grid; gap: 6px; margin: 0; }
.ui-price-breakdown-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ui-price-breakdown-line dt { min-width: 0; }
.ui-price-breakdown-line dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-price-breakdown-hint { display: block; font-size: 12px; color: var(--ui-muted); }
.ui-price-breakdown-success dd, .ui-price-breakdown-success dt { color: var(--ui-success); }
.ui-price-breakdown-muted dd, .ui-price-breakdown-muted dt { color: var(--ui-muted); }
.ui-price-breakdown-danger dd, .ui-price-breakdown-danger dt { color: var(--ui-danger); }
.ui-price-breakdown-total { padding-top: 8px; border-top: 1px solid var(--ui-border); font-weight: 700; font-size: 15px; }
.ui-price-breakdown-note { margin: 0; font-size: 12px; color: var(--ui-muted); }


.ui-errpage { display: grid; justify-items: center; gap: 10px; padding: 56px 24px; text-align: center;
  font: 15px/1.55 var(--ui-font); color: var(--ui-fg); }
.ui-errpage-code { font: 800 72px/1 var(--ui-font); letter-spacing: -.03em; color: var(--ui-accent-soft);
  -webkit-text-stroke: 1.5px var(--ui-accent); font-variant-numeric: tabular-nums; }
.ui-errpage-title { margin: 4px 0 0; font-size: 24px; font-weight: 650; line-height: 1.25; }
.ui-errpage-text { max-width: 46ch; color: var(--ui-muted); }
.ui-errpage-text > :first-child { margin-top: 0; }
.ui-errpage-text > :last-child { margin-bottom: 0; }
.ui-errpage-search { display: flex; gap: 8px; width: min(100%, 420px); margin-top: 12px; }
.ui-errpage-search input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-errpage-search input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-errpage-search button, .ui-errpage-link { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-accent);
  font: 500 14px/1 var(--ui-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ui-errpage-search button:hover, .ui-errpage-link:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-errpage-search button:focus-visible, .ui-errpage-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-errpage-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.ui-errpage-link-main { background: var(--ui-accent); border-color: transparent; color: var(--ui-accent-fg); }
.ui-errpage-link-main:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-errpage-ref { margin-top: 18px; color: var(--ui-muted); font-size: 12px; font-family: var(--ui-mono); }
.ui-errpage-lg { padding: 96px 24px; min-height: 70vh; align-content: center; }
.ui-errpage-lg .ui-errpage-code { font-size: 112px; }
.ui-errpage-lg .ui-errpage-title { font-size: 30px; }
@media (max-width: 480px) { .ui-errpage-code { font-size: 56px; } .ui-errpage-lg .ui-errpage-code { font-size: 80px; } }


.device-preview-demo-app { display: grid; grid-template-rows: auto 1fr; height: 100cqh; }
.device-preview-demo-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.device-preview-demo-cards { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 14px; overflow: auto; }
.device-preview-demo-cards > div { padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
@container (min-width: 600px) { .device-preview-demo-cards { grid-template-columns: repeat(3, 1fr); } }
.device-preview-demo-count { min-width: 64px; min-height: 44px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 16px var(--ui-font); }


.ui-share-capital { display: grid; gap: 16px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-share-capital .ui-share-capital-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-share-capital-goal { display: grid; gap: 8px; }
.ui-share-capital-figures { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ui-share-capital-held { font-size: 24px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-share-capital-of { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-share-capital-bar { height: 10px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-share-capital-fill { height: 100%; border-radius: inherit; background: var(--ui-accent); }
.ui-share-capital-done .ui-share-capital-fill { background: var(--ui-success); }
.ui-share-capital-left { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-share-capital-done .ui-share-capital-left { color: var(--ui-success); font-weight: 500; }
.ui-share-capital-scroll { overflow-x: auto; }
.ui-share-capital table { width: 100%; border-collapse: collapse; }
.ui-share-capital th { padding: 8px 10px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.ui-share-capital td { padding: 9px 10px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-share-capital tbody tr:hover td { background: var(--ui-subtle); }
.ui-share-capital .ui-share-capital-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-share-capital-date { white-space: nowrap; color: var(--ui-muted); }
.ui-share-capital-ref { display: block; color: var(--ui-muted); font-size: 12px; font-family: var(--ui-mono); }
.ui-share-capital-in { color: var(--ui-success); }
.ui-share-capital-out { color: var(--ui-danger); }
.ui-share-capital tfoot td { border-bottom: 0; border-top: 2px solid var(--ui-fg); font-weight: 650; }
.ui-share-capital-empty { color: var(--ui-muted); text-align: center; }


.ui-lead { margin: 0; max-width: 60ch; font: 400 18px/1.6 var(--ui-font); color: color-mix(in srgb, var(--ui-fg) 78%, var(--ui-muted));
  letter-spacing: -.005em; overflow-wrap: anywhere; }
.ui-lead-lg { font-size: 21px; line-height: 1.5; }
.ui-lead-fg { color: var(--ui-fg); }
.ui-lead-center { margin-left: auto; margin-right: auto; text-align: center; }
.ui-lead-end { margin-left: auto; text-align: end; }


html:has(.ui-action-sheet[open]) { overflow: hidden; }
.ui-action-sheet-host { display: contents; }
.ui-action-sheet-anchor { display: inline-flex; }
.ui-action-sheet {
  position: fixed; inset: auto 0 0 0; box-sizing: border-box; flex-direction: column; gap: 8px;
  width: 100%; max-width: 480px; max-height: 100dvh; margin: 0 auto; border: 0; overflow: visible;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)); background: transparent; color: var(--ui-fg); font: 15px/1.4 var(--ui-font);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), overlay .3s allow-discrete, display .3s allow-discrete;
  overscroll-behavior: contain; touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.ui-action-sheet[open] { display: flex; transform: translateY(0); }
@starting-style { .ui-action-sheet[open] { transform: translateY(100%); } }
.ui-action-sheet::backdrop { background: var(--ui-overlay); }
.ui-action-sheet-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: calc(var(--ui-radius) + 6px); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.ui-action-sheet-grip { flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 999px; background: var(--ui-strong); }
.ui-action-sheet-head { flex: none; padding: 8px 20px 12px; border-bottom: 1px solid var(--ui-border); text-align: center; }
.ui-action-sheet-head h2 { margin: 0; color: var(--ui-muted); font-size: 14px; font-weight: 600; }
.ui-action-sheet-head p { margin: 2px 0 0; color: var(--ui-muted); font-size: 13px; }
/* A long list scrolls: the browser may have vertical drags here, and @touchmove says when not. */
.ui-action-sheet-list { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.ui-action-sheet-row, .ui-action-sheet-cancel {
  display: block; box-sizing: border-box; width: 100%; min-height: 56px; padding: 10px 20px; border: 0; background: transparent;
  color: var(--ui-accent); font: 500 17px/1.3 var(--ui-font); text-align: center; cursor: pointer; touch-action: inherit;
}
.ui-action-sheet-row + .ui-action-sheet-row { border-top: 1px solid var(--ui-border); }
.ui-action-sheet-row:active:not(:disabled), .ui-action-sheet-cancel:active { background: var(--ui-subtle); }
@media (hover: hover) { .ui-action-sheet-row:hover:not(:disabled), .ui-action-sheet-cancel:hover { background: var(--ui-subtle); } }
.ui-action-sheet-row:focus-visible, .ui-action-sheet-cancel:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-action-sheet-row:disabled { color: var(--ui-muted); opacity: .6; cursor: not-allowed; }
.ui-action-sheet-danger { color: var(--ui-danger); }
.ui-action-sheet-cancel { flex: none; border-radius: calc(var(--ui-radius) + 6px); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); font-weight: 600; }
/* A <dialog> sits over the whole window, so the window's width is the right one to ask, Split View included. */
@media (min-width: 600px) {
  .ui-action-sheet {
    inset: var(--ui-action-sheet-top, 50%) auto auto var(--ui-action-sheet-left, 50%); width: 320px; margin: 0; padding: 0; gap: 0;
    max-height: calc(100dvh - 24px); border-radius: calc(var(--ui-radius) + 6px); overflow: hidden; box-shadow: var(--ui-shadow-lg);
    transform: scale(.94); opacity: 0; transition: transform .16s, opacity .16s, overlay .16s allow-discrete, display .16s allow-discrete;
    background: var(--ui-surface); touch-action: auto; -webkit-touch-callout: default;
  }
  .ui-action-sheet[open] { transform: none; opacity: 1; }
  @starting-style { .ui-action-sheet[open] { transform: scale(.94); opacity: 0; } }
  .ui-action-sheet::backdrop { background: transparent; }
  .ui-action-sheet-grip { display: none; }
  .ui-action-sheet-panel { border-radius: 0; box-shadow: none; }
  .ui-action-sheet-cancel { border-top: 1px solid var(--ui-border); border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-action-sheet { transition: none; } }


.ui-slide-confirm { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); --t: var(--ui-accent); --tf: var(--ui-accent-fg); --ts: var(--ui-accent-soft); }
.ui-slide-confirm-inner { display: grid; gap: 10px; }
.ui-slide-confirm-danger { --t: var(--ui-danger); --tf: #fff; --ts: var(--ui-danger-soft); }
.ui-slide-confirm-track { position: relative; height: 60px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); container-type: inline-size; touch-action: pan-y; }
.ui-slide-confirm-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--ts); transform-origin: 0 50%; transform: scaleX(0); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.ui-slide-confirm-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 64px; font-weight: 600; text-align: center; pointer-events: none; }
.ui-slide-confirm-thumb { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--t); color: var(--tf); box-shadow: var(--ui-shadow);
  cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.ui-slide-confirm-thumb svg { width: 24px; height: 24px; }
.ui-slide-confirm-thumb:focus-visible { box-shadow: 0 0 0 3px var(--ui-bg), 0 0 0 6px var(--t); }
.ui-slide-confirm-moving .ui-slide-confirm-thumb, .ui-slide-confirm-moving .ui-slide-confirm-fill { transition: none; }
.ui-slide-confirm-moving .ui-slide-confirm-thumb { cursor: grabbing; }
.ui-slide-confirm-done .ui-slide-confirm-thumb { transform: translateX(calc(100cqw - 60px)); cursor: default; }
.ui-slide-confirm-done .ui-slide-confirm-fill { transform: scaleX(1); }
.ui-slide-confirm-off { opacity: .55; }
.ui-slide-confirm-off .ui-slide-confirm-thumb { cursor: not-allowed; }
.ui-slide-confirm-hold { position: relative; min-height: 48px; padding: 0 16px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-slide-confirm-hold span { position: relative; }
.ui-slide-confirm-hold i { position: absolute; inset: 0; background: var(--ts); transform-origin: 0 50%; transform: scaleX(var(--h, 0)); }
.ui-slide-confirm-hold:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-slide-confirm-hold[aria-disabled="true"] { color: var(--ui-muted); opacity: .6; cursor: default; }
@media (hover: hover) { .ui-slide-confirm-hold:not([aria-disabled="true"]):hover { background: var(--ui-subtle); } }
@container (min-width: 520px) {
  .ui-slide-confirm-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ui-slide-confirm-thumb, .ui-slide-confirm-fill { transition: none; } }


.ui-ha { --ui-ha-1: light-dark(#2a78d6, #3987e5); --ui-ha-2: light-dark(#eb6834, #d95926);
  --ui-ha-3: light-dark(#1baf7a, #199e70); --ui-ha-4: light-dark(#eda100, #c98500);
  --ui-ha-5: light-dark(#e87ba4, #d55181); --ui-ha-6: light-dark(#008300, #008300);
  --ui-ha-7: light-dark(#6250d6, #9085e9); --ui-ha-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-ha-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-ha-s1 { --c: var(--ui-ha-1); } .ui-ha-s2 { --c: var(--ui-ha-2); } .ui-ha-s3 { --c: var(--ui-ha-3); }
.ui-ha-s4 { --c: var(--ui-ha-4); } .ui-ha-s5 { --c: var(--ui-ha-5); } .ui-ha-s6 { --c: var(--ui-ha-6); }
.ui-ha-s7 { --c: var(--ui-ha-7); } .ui-ha-s8 { --c: var(--ui-ha-8); }
.ui-ha-up { --k: var(--ui-success); } .ui-ha-down { --k: var(--ui-danger); }
.ui-ha-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-ha-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-ha-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-ha-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-ha-plot { position: relative; }
.ui-ha-pane, .ui-ha-cp { position: relative; height: var(--h); }
.ui-ha-vpane, .ui-ha-cv { position: relative; height: var(--vh); margin-top: 16px; }
.ui-ha-vpane { border-top: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-ha-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-ha-svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-ha-ma { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-ha-last { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); opacity: .75; pointer-events: none; }
.ui-ha-cols { position: absolute; inset: 0; display: flex; }
.ui-ha-col { position: relative; flex: 1; min-width: 0; }
.ui-ha-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-ha-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-ha-col:hover::before { opacity: .8; }
.ui-ha-wick { position: absolute; left: 50%; width: 1px; margin-left: -.5px; background: var(--k); }
.ui-ha-body { position: absolute; left: 16%; right: 16%; min-height: 1px; border-radius: 1px; background: var(--k); }
.ui-ha-vol { position: absolute; bottom: 0; left: 16%; right: 16%; min-height: 1px; border-radius: 1px 1px 0 0; background: var(--k); opacity: .35; }
.ui-ha-col:hover .ui-ha-vol { opacity: .7; }
.ui-ha-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-ha-flip .ui-ha-tip { left: auto; right: calc(50% + 10px); }
.ui-ha-col:hover .ui-ha-tip { display: block; }
.ui-ha-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-ha-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-ha-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-ha-tip .ui-ha-chg b { color: var(--k); }
.ui-ha-y { position: relative; }
.ui-ha-y > div { position: relative; }
.ui-ha-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-ha-y .ui-ha-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--k); color: var(--ui-bg); font-weight: 600; }
.ui-ha-x { position: relative; height: 16px; margin-top: 6px; }
.ui-ha-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-ha-x .ui-ha-first { transform: none; }
.ui-ha-x .ui-ha-end { transform: translateX(-100%); }


.ui-color-picker { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-color-picker-label { font-size: 13px; font-weight: 500; }
.ui-color-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-color-picker-field {
  display: flex; align-items: center; gap: 8px; width: 180px; max-width: 100%; height: 38px; padding: 0 10px 0 5px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-color-picker-field:hover { border-color: var(--ui-strong); }
.ui-color-picker-field:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-color-picker-invalid .ui-color-picker-field { border-color: var(--ui-danger); }
.ui-color-picker-chip {
  flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid color-mix(in srgb, var(--ui-fg) 18%, transparent);
  border-radius: 4px; background: var(--c); cursor: pointer;
}
.ui-color-picker-chip:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-color-picker-field input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-mono); text-transform: lowercase;
}
.ui-color-picker-panel {
  position: absolute; z-index: 20; top: 100%; left: 0; display: grid; gap: 12px; width: 248px; max-width: calc(100vw - 32px);
  margin-top: 4px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-color-picker-panel[hidden] { display: none; }
.ui-color-picker-area {
  position: relative; height: 150px; border-radius: var(--ui-radius-sm); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h) 100% 50%));
}
.ui-color-picker-area:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-color-picker-thumb {
  position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .3); pointer-events: none;
}
.ui-color-picker-hue {
  display: block; width: 100%; height: 14px; margin: 0; appearance: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.ui-color-picker-hue:focus { outline: none; }
.ui-color-picker-hue::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%; background: transparent;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.ui-color-picker-hue::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: transparent; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.ui-color-picker-hue:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), var(--ui-focus); }
.ui-color-picker-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 6px; }
.ui-color-picker-sw {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--ui-fg) 15%, transparent);
  border-radius: 4px; background: var(--c); cursor: pointer;
}
.ui-color-picker-sw:hover { transform: scale(1.08); }
.ui-color-picker-sw[aria-pressed="true"] { outline: 2px solid var(--ui-fg); outline-offset: 2px; }
.ui-color-picker-sw:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-color-picker-sm .ui-color-picker-field { height: 30px; width: 150px; }
.ui-color-picker-sm .ui-color-picker-chip { width: 22px; height: 22px; }
.ui-color-picker-sm .ui-color-picker-field input { font-size: 13px; }
.ui-color-picker-hint, .ui-color-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-color-picker-error { color: var(--ui-danger); }
.ui-color-picker-disabled { opacity: .55; }
.ui-color-picker-disabled .ui-color-picker-chip { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-color-picker-field { transition: none; } .ui-color-picker-sw:hover { transform: none; } }


.ui-multi-select { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-multi-select-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-multi-select-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 36px 4px 6px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.ui-multi-select-box:hover { border-color: var(--ui-strong); }
.ui-multi-select-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-multi-select-invalid .ui-multi-select-box { border-color: var(--ui-danger); }
.ui-multi-select-chip {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 26px; padding: 0 2px 0 9px; border-radius: 4px;
  background: var(--ui-accent-soft); color: var(--ui-accent); font: 500 13px/1 var(--ui-font);
}
.ui-multi-select-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-multi-select-x {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: inherit; cursor: pointer; opacity: .75;
}
.ui-multi-select-x svg { width: 10px; height: 10px; }
.ui-multi-select-x:hover { opacity: 1; background: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-multi-select-x:focus-visible { outline: none; opacity: 1; box-shadow: var(--ui-focus); }
.ui-multi-select-search {
  flex: 1 0 90px; min-width: 0; height: 28px; margin: 0; padding: 0 6px; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px/1 var(--ui-font);
}
.ui-multi-select-search::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-multi-select-toggle {
  position: absolute; right: 4px; top: 4px; display: inline-grid; place-items: center; width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-multi-select-toggle span {
  width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform .15s;
}
.ui-multi-select-open .ui-multi-select-toggle span { margin-top: 3px; transform: rotate(-135deg); }
.ui-multi-select-field { position: relative; }
.ui-multi-select-pop {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 4px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.ui-multi-select-pop[hidden] { display: none; }
.ui-multi-select-list { max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.ui-multi-select-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.ui-multi-select-opt:hover, .ui-multi-select-active { background: var(--ui-subtle); }
.ui-multi-select-active { box-shadow: inset 0 0 0 1px var(--ui-strong); }
.ui-multi-select-all { border-bottom: 1px solid var(--ui-border); border-radius: 4px 4px 0 0; margin-bottom: 2px; font-weight: 500; }
.ui-multi-select-tick {
  flex: none; position: relative; width: 16px; height: 16px; border: 1px solid var(--ui-strong); border-radius: 4px; background: var(--ui-surface);
}
.ui-multi-select-opt[aria-selected="true"] .ui-multi-select-tick { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-multi-select-opt[aria-selected="true"] .ui-multi-select-tick::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px;
  border: solid var(--ui-accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ui-multi-select-some .ui-multi-select-tick { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-multi-select-some .ui-multi-select-tick::after {
  content: ""; position: absolute; left: 3px; top: 6.5px; width: 8px; border-top: 2px solid var(--ui-accent-fg);
}
.ui-multi-select-opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-multi-select-empty { padding: 7px 10px; color: var(--ui-muted); }
.ui-multi-select-hint, .ui-multi-select-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-multi-select-error { color: var(--ui-danger); }
.ui-multi-select-sm .ui-multi-select-box { min-height: 30px; padding: 2px 30px 2px 4px; gap: 4px; }
.ui-multi-select-sm .ui-multi-select-chip { height: 22px; font-size: 12px; }
.ui-multi-select-sm .ui-multi-select-search { height: 24px; font-size: 13px; }
.ui-multi-select-sm .ui-multi-select-toggle { top: 1px; width: 26px; height: 26px; }
.ui-multi-select-sm .ui-multi-select-opt { padding: 5px 8px; font-size: 13px; }
.ui-multi-select-disabled .ui-multi-select-box { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-multi-select-box, .ui-multi-select-toggle span { transition: none; } }


.ui-hmap {
  --ui-hmap-1: light-dark(#2a78d6, #3987e5); --ui-hmap-2: light-dark(#eb6834, #d95926);
  --ui-hmap-3: light-dark(#1baf7a, #199e70); --ui-hmap-4: light-dark(#eda100, #c98500);
  --ui-hmap-5: light-dark(#e87ba4, #d55181); --ui-hmap-6: light-dark(#008300, #008300);
  --ui-hmap-7: light-dark(#6250d6, #9085e9); --ui-hmap-8: light-dark(#e34948, #e66767);
  --ui-hmap-0: color-mix(in srgb, var(--ui-border) 45%, var(--ui-bg));
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-hmap-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-hmap-s1 { --c: var(--ui-hmap-1); } .ui-hmap-s2 { --c: var(--ui-hmap-2); } .ui-hmap-s3 { --c: var(--ui-hmap-3); }
.ui-hmap-s4 { --c: var(--ui-hmap-4); } .ui-hmap-s5 { --c: var(--ui-hmap-5); } .ui-hmap-s6 { --c: var(--ui-hmap-6); }
.ui-hmap-s7 { --c: var(--ui-hmap-7); } .ui-hmap-s8 { --c: var(--ui-hmap-8); }
.ui-hmap-grid { display: grid; gap: 2px; align-items: stretch; }
.ui-hmap-rl { align-self: center; max-width: 12em; padding-right: 6px; overflow: hidden; color: var(--ui-muted);
  text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ui-hmap-cl { min-width: 0; padding-top: 4px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-hmap-cell { position: relative; display: grid; place-items: center; min-width: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--c) var(--v), var(--ui-hmap-0)); color: var(--ui-fg);
  font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-hmap-cell:hover { outline: 2px solid var(--ui-fg); outline-offset: -1px; z-index: 1; }
.ui-hmap-strong { color: #fff; }
.ui-hmap-empty { background: repeating-linear-gradient(135deg, var(--ui-hmap-0) 0 4px, transparent 4px 7px); }
.ui-hmap-val { overflow: hidden; max-width: 100%; padding: 0 2px; white-space: nowrap; }
.ui-hmap-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-hmap-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-hmap-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-hmap-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-hmap-tip { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.ui-hmap-l .ui-hmap-tip { left: 0; transform: none; }
.ui-hmap-r .ui-hmap-tip { left: auto; right: 0; transform: none; }
.ui-hmap-cell:hover .ui-hmap-tip { display: block; }
.ui-hmap-legend { display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 3px; width: min(240px, 100%);
  margin-left: auto; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-hmap-bar { grid-column: 1 / -1; height: 10px; border-radius: 3px;
  background: linear-gradient(to right, color-mix(in srgb, var(--c) 8%, var(--ui-hmap-0)), var(--c)); }
.ui-hmap-div .ui-hmap-bar { background: linear-gradient(to right, var(--ui-hmap-8), var(--ui-hmap-0), var(--c)); }
.ui-hmap-legend span:nth-child(3) { text-align: center; }
.ui-hmap-legend span:nth-child(4) { text-align: right; }


/* set elsewhere: leaflet- (Leaflet's script sets them) */
.ui-pindrop { position: relative; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-height: 320px; container-type: size; overflow: hidden; background: var(--ui-subtle); color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-pindrop-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ui-pindrop-stage { position: relative; flex: 1; min-height: 0; outline: none; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.ui-pindrop-stage:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-pindrop-map { position: absolute; inset: 0; }
.ui-pindrop .leaflet-container { background: var(--ui-subtle); font: 11px/1.4 var(--ui-font); }
/* The pin's tip is the middle of the map. It takes no touches: they go to the map. */
.ui-pindrop-pin { position: absolute; left: 50%; top: 50%; z-index: 500; width: 40px; height: 52px; margin: -52px 0 0 -20px; pointer-events: none; color: var(--ui-accent); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)); transition: transform .15s; }
.ui-pindrop-pin svg { display: block; width: 40px; height: 52px; }
.ui-pindrop-shadow { position: absolute; left: 50%; top: 50%; z-index: 499; width: 12px; height: 5px; margin: -2px 0 0 -6px; border-radius: 50%; background: rgb(0 0 0 / .4); pointer-events: none; transition: transform .15s, opacity .15s; }
.ui-pindrop[data-moving] .ui-pindrop-pin { transform: translateY(-12px); }
.ui-pindrop[data-moving] .ui-pindrop-shadow { transform: scale(.6); opacity: .6; }
.ui-pindrop-side { position: absolute; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); z-index: 600; display: grid; gap: 6px; }
.ui-pindrop-btn {
  box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 600 20px/1 var(--ui-font); cursor: pointer; box-shadow: var(--ui-shadow); -webkit-tap-highlight-color: transparent;
}
.ui-pindrop-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pindrop-btn:disabled { opacity: .45; cursor: default; }
.ui-pindrop-btn svg { width: 22px; height: 22px; }
.ui-pindrop-panel { flex: none; display: grid; gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-pindrop-where { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.ui-pindrop-coords { font: 600 16px/1.3 var(--ui-mono); font-variant-numeric: tabular-nums; }
.ui-pindrop-near { color: var(--ui-muted); font-size: 13px; }
.ui-pindrop-pad { display: grid; grid-template-columns: repeat(4, 44px); justify-content: center; gap: 8px; }
.ui-pindrop-go {
  box-sizing: border-box; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 16px/1 var(--ui-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-pindrop-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pindrop-say { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-pindrop-say:empty { display: none; }
/* Their room is kept, so that a word here does not resize the map under the pin. */
.ui-pindrop-notes { min-height: 36px; }
.ui-pindrop-picked { margin: 0; font-size: 13px; font-weight: 600; }
/* With the room, the controls stand beside the map and leave it all its height. */
@container (min-width: 600px) {
  .ui-pindrop-in { flex-direction: row; }
  .ui-pindrop-panel { flex: 0 0 280px; align-content: start; padding: 16px; border-top: 0; border-left: 1px solid var(--ui-border); }
  .ui-pindrop-where { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .ui-pindrop-pin, .ui-pindrop-shadow { transition: none; } }


.ui-jxt { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-jxt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ui-jxt-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-jxt-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-jxt-export label { color: var(--ui-muted); font-size: 13px; }
.ui-jxt-format { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-jxt-format:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-jxt-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font);
  white-space: nowrap; cursor: pointer; }
.ui-jxt-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-jxt-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-jxt-btn svg { width: 14px; height: 14px; flex: none; }
.ui-jxt-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-jxt-primary:hover:not(:disabled) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-jxt-cols { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-jxt-cols > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 600; font-size: 13px;
  cursor: pointer; list-style: none; border-radius: var(--ui-radius-sm); }
.ui-jxt-cols > summary::-webkit-details-marker { display: none; }
.ui-jxt-cols > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt-cols > summary svg { width: 12px; height: 12px; color: var(--ui-muted); transition: transform .15s; }
.ui-jxt-cols[open] > summary svg { transform: rotate(90deg); }
.ui-jxt-cols > summary small { color: var(--ui-muted); font-weight: 400; font-size: 12px; }
.ui-jxt-collist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; margin: 0;
  padding: 4px 12px 12px; list-style: none; }
.ui-jxt-colitem { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; }
.ui-jxt-colitem label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.ui-jxt-colitem label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-jxt-colitem input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ui-accent); }
.ui-jxt-colitem input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt-off label span { color: var(--ui-muted); text-decoration: line-through; }
.ui-jxt-kind { flex: none; color: var(--ui-muted); font-size: 11px; }
.ui-jxt-move { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: 4px; background: none; color: var(--ui-muted); cursor: pointer; }
.ui-jxt-move:hover:not(:disabled) { border-color: var(--ui-border); color: var(--ui-fg); }
.ui-jxt-move:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt-move:disabled { opacity: .3; cursor: default; }
.ui-jxt-move svg { width: 12px; height: 12px; }
.ui-jxt-scroll { position: relative; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  overscroll-behavior: contain; }
.ui-jxt-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ui-jxt th, .ui-jxt td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-jxt tbody tr:last-child td { border-bottom: 0; }
.ui-jxt thead th { position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: var(--ui-subtle); vertical-align: bottom; }
.ui-jxt tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-jxt .ui-jxt-num { text-align: right; }
.ui-jxt .ui-jxt-mid { text-align: center; }
.ui-jxt-head { display: grid; gap: 4px; justify-items: start; }
.ui-jxt-num .ui-jxt-head { justify-items: end; }
.ui-jxt-mid .ui-jxt-head { justify-items: center; }
.ui-jxt-sort { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; margin: 0 -4px; padding: 2px 4px; border: 0;
  border-radius: 4px; background: none; color: var(--ui-fg); font: 600 13px/1.3 var(--ui-font); cursor: pointer; }
.ui-jxt-sort > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ui-jxt-sort:hover { color: var(--ui-accent); }
.ui-jxt-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt-arrow { width: 12px; height: 12px; flex: none; opacity: .35; }
[aria-sort] .ui-jxt-arrow { opacity: 1; color: var(--ui-accent); }
.ui-jxt-type { position: relative; display: inline-flex; align-items: center; --k: var(--ui-muted); }
.ui-jxt-glyph { position: absolute; left: 5px; width: 16px; overflow: hidden; text-align: center; color: var(--k);
  font: 600 10px/1 var(--ui-mono); letter-spacing: -.04em; pointer-events: none; }
.ui-jxt-type select { appearance: none; -webkit-appearance: none; height: 22px; padding: 0 18px 0 25px; border: 1px solid color-mix(in srgb, var(--k) 35%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--k) 10%, var(--ui-surface)) no-repeat right 6px center / 8px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 2.5l3 3 3-3'/%3E%3C/svg%3E");
  color: var(--ui-fg); font: 500 11px/1 var(--ui-font); cursor: pointer; }
.ui-jxt-type select:hover { border-color: var(--k); }
.ui-jxt-type select:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jxt-k-integer, .ui-jxt-k-decimal, .ui-jxt-k-money { --k: var(--ui-info); }
.ui-jxt-k-boolean { --k: var(--ui-warning); }
.ui-jxt-k-date, .ui-jxt-k-datetime { --k: var(--ui-success); }
.ui-jxt-k-email, .ui-jxt-k-url, .ui-jxt-k-json { --k: var(--ui-accent); }
.ui-jxt-k-mixed { --k: var(--ui-danger); }
.ui-jxt-null { color: var(--ui-muted); }
.ui-jxt-bad { color: var(--ui-danger); text-decoration: underline wavy color-mix(in srgb, var(--ui-danger) 60%, transparent);
  text-underline-offset: 3px; }
.ui-jxt-yes, .ui-jxt-no { display: inline-flex; vertical-align: middle; }
.ui-jxt-yes svg, .ui-jxt-no svg { width: 15px; height: 15px; }
.ui-jxt-yes { color: var(--ui-success); }
.ui-jxt-no { color: var(--ui-muted); }
.ui-jxt td a { color: var(--ui-accent); text-decoration: none; }
.ui-jxt td a:hover { text-decoration: underline; }
.ui-jxt td a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-jxt-json { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  padding: 1px 6px; border-radius: 4px; background: var(--ui-subtle); font: 12px/1.5 var(--ui-mono); }
.ui-jxt-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); white-space: normal; }
.ui-jxt-more { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-jxt-preview { display: grid; gap: 4px; margin: 0; min-width: 0; }
.ui-jxt-preview figcaption { color: var(--ui-muted); font-size: 12px; }
.ui-jxt-preview pre { max-height: 220px; margin: 0; overflow: auto; padding: 10px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-fg); font: 12px/1.5 var(--ui-mono); white-space: pre; }
.ui-jxt-preview pre:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-jxt-cols > summary svg { transition: none; } }


.ui-flow-steps-wrap { container-type: inline-size; min-width: 0; }
.ui-flow-steps { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-flow-steps-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.ui-flow-steps-item + .ui-flow-steps-item { margin-left: 48px; }
.ui-flow-steps-box { --t: var(--ui-border); flex: 1; display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--t); border-top-width: 3px; border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-flow-steps-accent .ui-flow-steps-box { --t: var(--ui-accent); }
.ui-flow-steps-success .ui-flow-steps-box { --t: var(--ui-success); }
.ui-flow-steps-warning .ui-flow-steps-box { --t: var(--ui-warning); }
.ui-flow-steps-danger .ui-flow-steps-box { --t: var(--ui-danger); }
.ui-flow-steps-info .ui-flow-steps-box { --t: var(--ui-info); }
.ui-flow-steps-current .ui-flow-steps-box { --t: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: var(--ui-focus); }
.ui-flow-steps-coming .ui-flow-steps-box { opacity: .6; border-style: dashed; }
.ui-flow-steps-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 2px; border-radius: 50%;
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-flow-steps-done .ui-flow-steps-num { background: var(--ui-success); color: #fff; }
.ui-flow-steps-current .ui-flow-steps-num { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-flow-steps-title { font-weight: 600; overflow-wrap: anywhere; }
.ui-flow-steps-text { color: var(--ui-muted); font-size: 13px; }
.ui-flow-steps-arrow { position: absolute; top: 50%; left: 100%; display: grid; justify-items: center; width: 48px; transform: translateY(-50%); color: var(--ui-strong); }
.ui-flow-steps-arrow svg { width: 40px; height: 14px; }
.ui-flow-steps-then { margin-bottom: 2px; color: var(--ui-muted); font-size: 11px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.ui-flow-steps-vertical { flex-direction: column; max-width: 420px; }
.ui-flow-steps-vertical .ui-flow-steps-item + .ui-flow-steps-item { margin: 40px 0 0; }
.ui-flow-steps-vertical .ui-flow-steps-arrow { top: 100%; left: 0; right: 0; width: auto; height: 40px; grid-template-columns: 1fr auto 1fr; align-items: center; transform: none; }
.ui-flow-steps-vertical .ui-flow-steps-arrow svg { grid-column: 2; width: 40px; transform: rotate(90deg); }
.ui-flow-steps-vertical .ui-flow-steps-then { grid-column: 3; justify-self: start; margin: 0 0 0 4px; text-align: left; }
@container (max-width: 560px) {
  .ui-flow-steps { flex-direction: column; }
  .ui-flow-steps .ui-flow-steps-item + .ui-flow-steps-item { margin: 40px 0 0; }
  .ui-flow-steps .ui-flow-steps-arrow { top: 100%; left: 0; right: 0; width: auto; height: 40px; grid-template-columns: 1fr auto 1fr; align-items: center; transform: none; }
  .ui-flow-steps .ui-flow-steps-arrow svg { grid-column: 2; transform: rotate(90deg); }
  .ui-flow-steps .ui-flow-steps-then { grid-column: 3; justify-self: start; margin: 0 0 0 4px; text-align: left; }
}


.ui-tourcard { position: relative; display: flex; flex-direction: column; min-width: 0; max-width: 340px; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); transition: border-color .15s, box-shadow .15s; }
.ui-tourcard:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
.ui-tourcard:has(.ui-tourcard-title a:focus-visible) { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-tourcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ui-subtle); }
.ui-tourcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ui-tourcard:hover .ui-tourcard-media img { transform: scale(1.03); }
.ui-tourcard-badge { position: absolute; top: 10px; left: 10px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 11px/22px var(--ui-font); letter-spacing: .02em; }
.ui-tourcard-badge-warning { background: var(--ui-warning); color: var(--ui-surface); }
.ui-tourcard-badge-success { background: var(--ui-success); color: var(--ui-surface); }
.ui-tourcard-save { position: absolute; z-index: 1; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); }
.ui-tourcard-save svg { width: 18px; height: 18px; }
.ui-tourcard-save:hover { color: var(--ui-danger); }
.ui-tourcard-save:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tourcard-saved { color: var(--ui-danger); }
.ui-tourcard-saved svg { fill: currentColor; }
.ui-tourcard-body { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.ui-tourcard-cat { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-tourcard .ui-tourcard-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.ui-tourcard-title a { color: inherit; text-decoration: none; }
.ui-tourcard-title a::after { content: ""; position: absolute; inset: 0; }
.ui-tourcard-title a:hover { color: var(--ui-accent); }
.ui-tourcard-title a:focus-visible { outline: none; }
.ui-tourcard-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ui-muted); font-size: 13px; }
.ui-tourcard-facts > span { display: inline-flex; align-items: center; gap: 4px; }
.ui-tourcard-facts svg { width: 15px; height: 15px; }
.ui-tourcard-rating b { color: var(--ui-fg); font-weight: 650; }
.ui-tourcard-rating svg { color: var(--ui-warning); }
.ui-tourcard-feats { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-success); font-size: 13px; }
.ui-tourcard-feats li::before { content: "✓ "; font-weight: 700; }
.ui-tourcard-langs, .ui-tourcard-next { color: var(--ui-muted); font-size: 12px; }
.ui-tourcard-next b { color: var(--ui-fg); font-weight: 600; }
.ui-tourcard-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: auto; padding-top: 8px; font-variant-numeric: tabular-nums; }
.ui-tourcard-from { color: var(--ui-muted); font-size: 12px; }
.ui-tourcard-amount { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.ui-tourcard-old { color: var(--ui-danger); font-size: 13px; text-decoration: line-through; }
.ui-tourcard-per { color: var(--ui-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-tourcard, .ui-tourcard-media img { transition: none; } .ui-tourcard:hover .ui-tourcard-media img { transform: none; } }


.ui-fxconv { display: grid; gap: 14px; min-width: 0; max-width: 580px; padding: 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-fxconv .ui-fxconv-title { margin: 0; font-size: 15px; font-weight: 650; }
.ui-fxconv-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.ui-fxconv-field { display: grid; gap: 6px; min-width: 0; }
.ui-fxconv-label { font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-fxconv-input, .ui-fxconv-select { box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 15px var(--ui-font);
  font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.ui-fxconv-input { text-align: right; font-weight: 600; }
.ui-fxconv-input:hover, .ui-fxconv-select:hover { border-color: var(--ui-strong); }
.ui-fxconv-input:focus, .ui-fxconv-select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fxconv-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-fxconv-swap { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-subtle); color: var(--ui-fg); cursor: pointer; transition: background .15s, color .15s, transform .2s; }
.ui-fxconv-swap svg { width: 16px; height: 16px; }
.ui-fxconv-swap:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-fxconv-swap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fxconv-swap:active { transform: rotate(180deg); }
.ui-fxconv-result { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-fxconv-from { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-fxconv-to { font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-fxconv-rates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--ui-muted);
  font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-fxconv-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-fxconv-note { margin: 0; color: var(--ui-muted); font-size: 12px; }
@media (max-width: 520px) {
  .ui-fxconv-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ui-fxconv-fields > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ui-fxconv-input, .ui-fxconv-select, .ui-fxconv-swap { transition: none; } }


.ui-address-form-set { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-address-form-legend { padding: 0; margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.ui-address-form-form { display: grid; gap: 14px; margin: 0; }
.ui-address-form-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.ui-address-form-field { display: grid; gap: 6px; min-width: 0; }
.ui-address-form-label { font-size: 13px; font-weight: 500; }
.ui-address-form-opt { margin-left: 4px; color: var(--ui-muted); font-weight: 400; }
.ui-address-form-input, .ui-address-form-select {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
.ui-address-form-select { appearance: none; padding-right: 36px; cursor: pointer; }
.ui-address-form-select-box { position: relative; }
.ui-address-form-select-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-address-form-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-address-form-input:hover, .ui-address-form-select:hover { border-color: var(--ui-strong); }
.ui-address-form-input:focus, .ui-address-form-select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-address-form-set [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-address-form-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-address-form-actions { display: flex; gap: 12px; padding-top: 2px; }
.ui-address-form-button {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border: 0;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px var(--ui-font);
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.ui-address-form-button:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-address-form-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 560px) { .ui-address-form-row { grid-template-columns: 1fr 1fr; } .ui-address-form-row > :first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ui-address-form-input, .ui-address-form-select, .ui-address-form-button { transition: none; } }


.ui-citation-builder { display: grid; gap: 14px; min-width: 0; max-width: 760px; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-citation-builder-kind { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-citation-builder-kind legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-citation-builder-kind label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-citation-builder-kind input { margin: 0; accent-color: var(--ui-accent); }
.ui-citation-builder-kind input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-citation-builder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-citation-builder-field { display: grid; align-content: start; gap: 4px; min-width: 0; }
.ui-citation-builder-wide { grid-column: 1 / -1; }
.ui-citation-builder-field label { font-size: 13px; font-weight: 500; }
.ui-citation-builder-field small { color: var(--ui-muted); font-size: 12px; }
.ui-citation-builder-field input, .ui-citation-builder-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); resize: vertical; }
.ui-citation-builder-field input:hover, .ui-citation-builder-field textarea:hover { border-color: var(--ui-strong); }
.ui-citation-builder-field input:focus, .ui-citation-builder-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-citation-builder-need input, .ui-citation-builder-need textarea { border-color: var(--ui-warning); }
.ui-citation-builder-read { margin: 0; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-citation-builder-said { margin: 0; font-weight: 600; }
.ui-citation-builder-notes { display: grid; gap: 4px; margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-citation-builder-out { display: grid; gap: 10px; min-width: 0; }
.ui-citation-builder-style { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-citation-builder-style h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.ui-citation-builder-style p { margin: 0; overflow-wrap: anywhere; }
.ui-citation-builder-style pre { margin: 0; overflow-x: auto; font: 12.5px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-citation-builder-copy { height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-citation-builder-copy:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-citation-builder-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-story-capture {
  container-type: inline-size; position: relative; display: grid; width: 100%; height: 100%; min-height: min(100dvh, 520px); overflow: hidden;
  background: #000; color: #fff; font: 14px/1.4 var(--ui-font); overscroll-behavior: none;
}
.ui-story-capture-view { position: absolute; inset: 0; overflow: hidden; }
.ui-story-capture-view video, .ui-story-capture-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-story-capture-view video[hidden] { display: none; }
.ui-story-capture-mirror video { transform: scaleX(-1); }
.ui-story-capture-shot { object-fit: contain !important; }
.ui-story-capture-top {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 8px) 8px calc(env(safe-area-inset-left, 0px) + 8px);
}
.ui-story-capture-clock { padding: 3px 10px; border-radius: 999px; background: var(--ui-danger); color: #fff; font: 600 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-story-capture-round {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff;
  font: 500 12px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-story-capture-round svg { width: 24px; height: 24px; }
.ui-story-capture-round:focus-visible, .ui-story-capture-shutter:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ui-story-capture-round:disabled { opacity: .4; cursor: default; }
.ui-story-capture-bottom {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px;
  padding: 8px calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 14px) calc(env(safe-area-inset-left, 0px) + 12px);
}
.ui-story-capture-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; width: 100%; }
.ui-story-capture-go { position: relative; width: 88px; height: 88px; }
.ui-story-capture-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ui-story-capture-ring circle { fill: none; stroke-width: 6; }
.ui-story-capture-ring-back { stroke: rgba(255, 255, 255, .55); }
.ui-story-capture-ring-on { stroke: var(--ui-danger); }
.ui-story-capture-shutter {
  position: absolute; inset: 10px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; touch-action: none; transition: transform .12s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ui-story-capture-holding .ui-story-capture-shutter { background: var(--ui-danger); transform: scale(.72); }
.ui-story-capture-hint { margin: 0; color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.ui-story-capture-review { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 420px; }
.ui-story-capture-review > * { flex: 1 1 auto; }
.ui-story-capture-wait { pointer-events: none; }
.ui-story-capture-screen {
  position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center;
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.ui-story-capture-screen svg { width: 44px; height: 44px; }
.ui-story-capture-screen h3 { margin: 0; font: 600 18px/1.3 var(--ui-font); color: #fff; }
.ui-story-capture-screen p { margin: 0; max-width: 300px; color: #ddd; }
.ui-story-capture-why { margin: 0; color: #ffb4b4; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.ui-story-capture input[type=file] { display: none; }
/* A tablet held either way: the shutter at the side, under the thumb, as in the system's camera. */
@container (min-width: 440px) {
  .ui-story-capture-bottom { left: auto; top: 0; width: 132px; align-content: center; padding-top: calc(env(safe-area-inset-top, 0px) + 60px); }
  .ui-story-capture-row { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 14px; }
  .ui-story-capture-hint { text-align: center; }
  .ui-story-capture-review { flex-direction: column; }
  .ui-story-capture-review > * { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-story-capture-shutter { transition: none; } }


.ui-hashtag { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ui-accent); font: 500 14px/1.4 var(--ui-font); text-decoration: none; border-radius: 3px; }
.ui-hashtag:hover { text-decoration: underline; }
.ui-hashtag:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-hashtag-neutral { color: var(--ui-fg); }
.ui-hashtag-count { color: var(--ui-muted); font-size: .85em; font-weight: 400; font-variant-numeric: tabular-nums; }
.ui-hashtag-sm { font-size: 13px; }
.ui-hashtag-list { display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-hashtag-list h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.ui-hashtag-list ol { margin: 0; padding: 0; list-style: none; counter-reset: ui-hashtag; }
.ui-hashtag-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ui-border); counter-increment: ui-hashtag; }
.ui-hashtag-item:first-child { border-top: 0; }
.ui-hashtag-item::before { content: counter(ui-hashtag); color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-hashtag-item .ui-hashtag { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-hashtag-posts { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-hashtag-trend { display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }
.ui-hashtag-up { color: var(--ui-success); }
.ui-hashtag-down { color: var(--ui-danger); }


.ui-review-list { display: grid; gap: 12px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-review-list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ui-review-list-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-review-list-star { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-review-list-star:hover { border-color: var(--ui-strong); }
.ui-review-list-star:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-review-list-star[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-review-list-star:disabled { opacity: .5; cursor: not-allowed; }
.ui-review-list-star svg { width: 12px; height: 12px; color: var(--ui-warning); }
.ui-review-list-star small { color: var(--ui-muted); font-weight: 400; }
.ui-review-list-star[aria-pressed="true"] small { color: inherit; }
.ui-review-list-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13px; }
.ui-review-list-sort select {
  height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface) no-repeat right 9px center / 10px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  color: var(--ui-fg); font: 13px/1 var(--ui-font); appearance: none;
}
.ui-review-list-sort select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-review-list-count { color: var(--ui-muted); font-size: 13px; }
.ui-review-list-items { display: grid; }
.ui-review-list-items > .ui-review-list-item:last-child { border-bottom: 0; }
.ui-review-list-empty { padding: 24px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-review-list-more { justify-self: center; height: 34px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-review-list-more:hover { border-color: var(--ui-strong); }
.ui-review-list-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-corr { --t: var(--ui-warning); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; max-width: 720px; margin: 0; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--t) 40%, var(--ui-border)); border-left: 4px solid var(--t); border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--t) 7%, var(--ui-surface)); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-corr-clarification, .ui-corr-update { --t: var(--ui-info); }
.ui-corr-editors_note { --t: var(--ui-accent); }
.ui-corr-retraction { --t: var(--ui-danger); }
.ui-corr-icon { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--t); color: var(--ui-bg); }
.ui-corr-icon svg { width: 14px; height: 14px; }
.ui-corr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.ui-corr-title { color: var(--t); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ui-corr-head time { color: var(--ui-muted); font-size: 13px; }
.ui-corr-body { margin: 0; }
.ui-corr-retraction .ui-corr-body { font-weight: 550; }
.ui-corr-link { grid-column: 2; justify-self: start; color: var(--ui-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.ui-corr-link:hover { text-decoration: underline; }
.ui-corr-link:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-corr-end { padding: 12px 0 0; border: 0; border-top: 1px solid var(--ui-border); border-radius: 0; background: none; font-size: 14px; font-style: italic; }
.ui-corr-end .ui-corr-icon { display: none; }
.ui-corr-end .ui-corr-link { grid-column: 1 / -1; font-style: normal; }
.ui-corr-end .ui-corr-head, .ui-corr-end .ui-corr-body { grid-column: 1 / -1; }
.ui-corr-end .ui-corr-title { font-style: normal; }


.ui-planadv { display: grid; gap: 16px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-planadv .ui-planadv-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-planadv-meter { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 4px 12px; align-items: center; }
.ui-planadv-meter label { grid-column: 1 / -1; font-size: 13px; font-weight: 500; }
.ui-planadv-meter input[type="range"] { width: 100%; margin: 0; accent-color: var(--ui-accent); }
.ui-planadv-meter input[type="range"]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-planadv-box { box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-planadv-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-planadv-box input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 14px var(--ui-font); text-align: right; font-variant-numeric: tabular-nums; }
.ui-planadv-box span { flex: none; color: var(--ui-muted); font-size: 12px; }
.ui-planadv-bad .ui-planadv-box { border-color: var(--ui-danger); }
.ui-planadv-billing { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.ui-planadv-billing legend { float: left; margin-right: 8px; padding: 0; font-weight: 500; }
.ui-planadv-billing label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ui-planadv-billing input { margin: 0; accent-color: var(--ui-accent); }
.ui-planadv-verdict { margin: 0; font-size: 15px; font-weight: 650; color: var(--ui-success); }
.ui-planadv-turns { display: grid; gap: 3px; margin: 0; padding: 0 0 0 18px; font-size: 13px; }
.ui-planadv-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-planadv-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 10px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-planadv-win { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-planadv-out { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-planadv-name { font-weight: 650; overflow-wrap: anywhere; }
.ui-planadv-cost { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ui-planadv-how { grid-column: 1 / -1; color: var(--ui-muted); font-size: 12px; }
.ui-planadv-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-planadv-problems { margin: 0; padding: 8px 12px 8px 26px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 12px; }
@media (max-width: 420px) { .ui-planadv { padding: 16px; } .ui-planadv-meter { grid-template-columns: 1fr; } }


.ui-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--s, 220px), 100%), 1fr)); gap: var(--g, 16px);
  margin: 0; padding: 0; list-style: none; }
.ui-product-grid > li { display: flex; min-width: 0; }
.ui-product-grid > li > .ui-product { flex: 1; }
.ui-product-grid-empty { padding: 32px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted);
  font: 14px/1.4 var(--ui-font); text-align: center; }


/* The host takes no touches, so all of what is behind stays in reach; only the sheet does. */
.ui-peek-sheet-host { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; container-type: size; container-name: ui-peek-sheet; }
.ui-peek-sheet-fixed { position: fixed; }
.ui-peek-sheet {
  position: absolute; inset: 12px 0 var(--ui-peek-sheet-kb, 0px) 0; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
  pointer-events: auto; border: 1px solid var(--ui-border); border-bottom: 0; background: var(--ui-surface); color: var(--ui-fg);
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; box-shadow: var(--ui-shadow-lg), 0 160px 0 0 var(--ui-surface);
  font: 15px/1.5 var(--ui-font); will-change: transform; transform: translateY(var(--ui-peek-sheet-y, var(--ui-peek-sheet-first)));
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.ui-peek-sheet-grip {
  display: grid; place-items: center; flex: none; width: 100%; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.ui-peek-sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-peek-sheet-grip:focus-visible { outline: none; }
.ui-peek-sheet-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-peek-sheet-head { flex: none; margin-top: -8px; padding: 0 20px 10px; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.ui-peek-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-peek-sheet-body {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 4px 20px calc(24px + env(safe-area-inset-bottom) + var(--ui-peek-sheet-hide, 0px));
}
.ui-peek-sheet-body > :first-child { margin-top: 0; }
.ui-peek-sheet-body > :last-child { margin-bottom: 0; }
@container ui-peek-sheet (min-width: 600px) {
  .ui-peek-sheet { inset: 12px auto calc(12px + var(--ui-peek-sheet-kb, 0px)) 12px; width: 360px; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px); box-shadow: var(--ui-shadow-lg); }
}
@media (prefers-reduced-motion: reduce) { .ui-peek-sheet { transition: none; } }


.ui-bc { --ui-bc-1: light-dark(#2a78d6, #3987e5); --ui-bc-2: light-dark(#eb6834, #d95926);
  --ui-bc-3: light-dark(#1baf7a, #199e70); --ui-bc-4: light-dark(#eda100, #c98500);
  --ui-bc-5: light-dark(#e87ba4, #d55181); --ui-bc-6: light-dark(#008300, #008300);
  --ui-bc-7: light-dark(#6250d6, #9085e9); --ui-bc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-bc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-bc-s1 { --c: var(--ui-bc-1); } .ui-bc-s2 { --c: var(--ui-bc-2); } .ui-bc-s3 { --c: var(--ui-bc-3); }
.ui-bc-s4 { --c: var(--ui-bc-4); } .ui-bc-s5 { --c: var(--ui-bc-5); } .ui-bc-s6 { --c: var(--ui-bc-6); }
.ui-bc-s7 { --c: var(--ui-bc-7); } .ui-bc-s8 { --c: var(--ui-bc-8); }
.ui-bc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-bc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-bc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-bc-v { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-bc-y { position: relative; min-width: 24px; }
.ui-bc-y span, .ui-bc-hx span { position: absolute; color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bc-y span { right: 0; transform: translateY(50%); }
.ui-bc-plot { position: relative; }
.ui-bc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-bc-grid.ui-bc-zero { background: var(--ui-strong); }
.ui-bc-cols { position: absolute; inset: 0; display: flex; }
.ui-bc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-bc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-bc-bars { position: absolute; inset: 0 16%; display: flex; justify-content: center; gap: 2px; }
.ui-bc-slot { position: relative; flex: 1; max-width: 44px; }
.ui-bc-bar { position: absolute; left: 0; right: 0; bottom: var(--a); height: var(--b); min-height: 1px;
  background: var(--c); border-radius: 4px 4px 0 0; }
.ui-bc-neg { border-radius: 0 0 4px 4px; }
.ui-bc-mid { border-radius: 0; height: max(1px, calc(var(--b) - 2px)); }
.ui-bc-val { position: absolute; left: 50%; bottom: calc(var(--a) + 3px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bc-val.ui-bc-under { bottom: auto; top: calc(100% - var(--a) + 3px); }
.ui-bc-x { display: flex; margin-top: 6px; }
.ui-bc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-bc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-bc-col:first-child .ui-bc-tip { left: 0; transform: translateY(-100%); }
.ui-bc-col:last-child .ui-bc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-bc-col:hover .ui-bc-tip, .ui-bc-row:hover .ui-bc-tip { display: block; }
.ui-bc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-bc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-bc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-bc-h { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 10px; align-items: center; }
.ui-bc-rl { max-width: 16em; overflow: hidden; color: var(--ui-muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ui-bc-hgrid { position: relative; grid-column: 2; align-self: stretch; }
.ui-bc-hgrid .ui-bc-grid { top: 0; bottom: 0; left: var(--a); right: auto; width: 1px; height: auto; }
.ui-bc-row { position: relative; grid-column: 2; display: grid; gap: 2px; padding: 5px 0; border-radius: 4px; }
.ui-bc-row:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-bc-row .ui-bc-slot { max-width: none; height: 14px; }
.ui-bc-row .ui-bc-bar { top: 0; bottom: 0; left: var(--a); width: var(--b); height: auto; min-width: 1px; border-radius: 0 4px 4px 0; }
.ui-bc-row .ui-bc-neg { border-radius: 4px 0 0 4px; }
.ui-bc-row .ui-bc-mid { border-radius: 0; height: auto; width: max(1px, calc(var(--b) - 2px)); }
.ui-bc-row .ui-bc-val { top: 50%; bottom: auto; left: calc(var(--a) + 5px); transform: translateY(-50%); }
.ui-bc-row .ui-bc-val.ui-bc-under { left: auto; right: calc(100% - var(--a) + 5px); }
.ui-bc-row .ui-bc-tip { top: 0; left: auto; right: 0; transform: translateY(-100%); }
.ui-bc-hx { position: relative; grid-column: 2; height: 16px; margin-top: 4px; }
.ui-bc-hx span { top: 0; transform: translateX(-50%); }
.ui-bc-hx span:first-child { transform: none; }
.ui-bc-hx span:last-child:not(:first-child) { transform: translateX(-100%); }


.ui-action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.35 var(--ui-font);
}
.ui-action-bar-text { display: grid; min-width: 0; }
.ui-action-bar-text b { font-size: 16px; font-weight: 650; }
.ui-action-bar-text span { overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-action-bar-do { display: flex; flex: none; gap: 8px; }
.ui-action-bar-space { display: none; }
@media (min-width: 721px) { .ui-action-bar-wide-hidden, .ui-action-bar-wide-hidden + .ui-action-bar-space { display: none; } }
@media (max-width: 720px) {
  .ui-action-bar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; border-width: 1px 0 0; border-radius: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgb(0 0 0 / .08);
  }
  .ui-action-bar-space { display: block; height: calc(72px + env(safe-area-inset-bottom)); }
}


.ui-linklist { font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-linklist-heading { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--ui-muted); letter-spacing: .04em; text-transform: uppercase; }
.ui-linklist ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-linklist-divided ul { gap: 0; }
.ui-linklist-divided li + li { border-top: 1px solid var(--ui-border); }
.ui-linklist-link {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 10px; border-radius: var(--ui-radius-sm);
  color: inherit; text-decoration: none; transition: background .12s;
}
.ui-linklist-divided .ui-linklist-link { border-radius: 0; padding-left: 4px; padding-right: 4px; }
.ui-linklist-link:hover { background: var(--ui-subtle); }
.ui-linklist-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-linklist-icon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; font-size: 18px; line-height: 1; color: var(--ui-accent); }
.ui-linklist-icon svg { width: 20px; height: 20px; }
.ui-linklist-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ui-linklist-label { font-weight: 600; color: var(--ui-fg); }
.ui-linklist-link:hover .ui-linklist-label { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.ui-linklist-label svg { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--ui-muted); }
.ui-linklist-desc { color: var(--ui-muted); }
.ui-linklist-meta { flex: none; margin-top: 2px; color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-linklist-chev { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ui-strong); }
.ui-linklist-link:hover .ui-linklist-chev { color: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-linklist-link { transition: none; } }


.ui-loan-calculator { container-type: inline-size; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-loan-calculator-grid { display: grid; gap: 0; }
@container (min-width: 620px) { .ui-loan-calculator-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.ui-loan-calculator-inputs { display: grid; gap: 22px; align-content: start; padding: 20px 22px 22px; }
.ui-loan-calculator-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-loan-calculator-field { display: grid; gap: 8px; }
.ui-loan-calculator-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-loan-calculator-head label { font-size: 13px; font-weight: 500; }
.ui-loan-calculator-box { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-bg); transition: border-color .15s, box-shadow .15s; }
.ui-loan-calculator-box:hover { border-color: var(--ui-strong); }
.ui-loan-calculator-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-loan-calculator-box input { width: 7.5em; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 600 15px var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-loan-calculator-box input.ui-loan-calculator-short { width: 3.6em; }
.ui-loan-calculator-unit { color: var(--ui-muted); font-size: 13px; }
.ui-loan-calculator-range { --ui-loan-calculator-fill: 0%; appearance: none; display: block; width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer; }
.ui-loan-calculator-range:focus { outline: none; }
.ui-loan-calculator-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ui-border);
  background: linear-gradient(to right, var(--ui-accent) var(--ui-loan-calculator-fill), var(--ui-subtle) var(--ui-loan-calculator-fill)); }
.ui-loan-calculator-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ui-subtle); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-loan-calculator-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ui-accent); }
.ui-loan-calculator-range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--ui-surface); border: 2px solid var(--ui-accent); box-shadow: var(--ui-shadow); }
.ui-loan-calculator-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-accent); }
.ui-loan-calculator-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ui-focus); }
.ui-loan-calculator-range:focus-visible::-moz-range-thumb { box-shadow: var(--ui-focus); }
.ui-loan-calculator-limits { display: flex; justify-content: space-between; margin-top: -4px; color: var(--ui-muted); font-size: 12px;
  font-variant-numeric: tabular-nums; }
.ui-loan-calculator-result { display: grid; gap: 14px; align-content: start; padding: 20px 22px 22px; border-top: 1px solid var(--ui-border);
  background: var(--ui-subtle); border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
@container (min-width: 620px) { .ui-loan-calculator-result { border-top: 0; border-left: 1px solid var(--ui-border); border-radius: 0 var(--ui-radius) var(--ui-radius) 0; } }
.ui-loan-calculator-caption { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-loan-calculator-payment { display: block; margin-top: -10px; font-size: 34px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.ui-loan-calculator-per { color: var(--ui-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.ui-loan-calculator-bar { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--ui-warning); }
.ui-loan-calculator-bar span { background: var(--ui-accent); }
.ui-loan-calculator-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -6px 0 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-loan-calculator-key li { display: inline-flex; align-items: center; gap: 6px; }
.ui-loan-calculator-key li::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--ui-accent); }
.ui-loan-calculator-key li + li::before { background: var(--ui-warning); }
.ui-loan-calculator-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; margin: 0; }
.ui-loan-calculator-totals dd { padding-left: 16px; }
.ui-loan-calculator-totals dt { color: var(--ui-muted); }
.ui-loan-calculator-totals dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-loan-calculator-totals .ui-loan-calculator-sum { padding-top: 8px; border-top: 1px solid var(--ui-border); color: var(--ui-fg); font-weight: 650; }


.ui-decision-matrix { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-decision-matrix .ui-decision-matrix-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-decision-matrix-scroll { position: relative; min-width: 0; overflow-x: auto; }
.ui-decision-matrix-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-decision-matrix-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-decision-matrix-table th, .ui-decision-matrix-table td { padding: 5px 6px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; font-weight: 400; }
.ui-decision-matrix-table thead th { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-decision-matrix-table .ui-decision-matrix-end { text-align: right; font-weight: 600; white-space: nowrap; }
.ui-decision-matrix-head { display: grid; gap: 4px; min-width: 148px; }
.ui-decision-matrix-input { box-sizing: border-box; width: 100%; min-width: 84px; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-decision-matrix-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-decision-matrix-input[aria-invalid] { border-color: var(--ui-danger); }
.ui-decision-matrix-subtle { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-decision-matrix-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.ui-decision-matrix-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-decision-matrix-best td, .ui-decision-matrix-best th { background: var(--ui-success-soft); }
.ui-decision-matrix-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 13px var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-decision-matrix-button:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-decision-matrix-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-decision-matrix-button:disabled { opacity: .55; cursor: not-allowed; }
.ui-decision-matrix-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-decision-matrix-live { display: grid; gap: 10px; min-width: 0; }
.ui-decision-matrix-verdict { margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; }
.ui-decision-matrix-moves { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-decision-matrix-moves li { padding: 6px 0; border-bottom: 1px solid var(--ui-border); }
.ui-decision-matrix-moves li:last-child { border-bottom: 0; }
.ui-decision-matrix-moved { margin: 0; font-size: 13px; font-weight: 600; }
.ui-decision-matrix-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-decision-matrix-errors { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }


.ui-radio-group { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-radio-group-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-radio-group-req { margin-left: 2px; color: var(--ui-danger); }
.ui-radio-group-list { display: flex; flex-direction: column; gap: 10px; }
.ui-radio-group-row .ui-radio-group-list { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
.ui-radio-group-opt { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: fit-content; }
.ui-radio-group-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-radio-group-dot {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--ui-surface); border: 1px solid var(--ui-strong); transition: border-color .15s, box-shadow .15s;
}
.ui-radio-group-dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ui-accent);
  transform: scale(0); transition: transform .12s;
}
.ui-radio-group-opt:hover .ui-radio-group-dot { border-color: var(--ui-accent); }
.ui-radio-group-opt input:checked + .ui-radio-group-dot { border-color: var(--ui-accent); border-width: 1.5px; }
.ui-radio-group-opt input:checked + .ui-radio-group-dot::after { transform: scale(1); }
.ui-radio-group-opt input:focus-visible + .ui-radio-group-dot { box-shadow: var(--ui-focus); }
.ui-radio-group-text { display: grid; gap: 2px; }
.ui-radio-group-opt-hint { color: var(--ui-muted); font-size: 13px; }
.ui-radio-group-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-radio-group-opt:has(input:disabled):hover .ui-radio-group-dot { border-color: var(--ui-strong); }
.ui-radio-group-cards .ui-radio-group-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ui-radio-group-cards.ui-radio-group-column .ui-radio-group-list { grid-template-columns: 1fr; }
.ui-radio-group-cards .ui-radio-group-opt {
  width: auto; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-radio-group-cards .ui-radio-group-opt:hover { border-color: var(--ui-strong); }
.ui-radio-group-cards .ui-radio-group-opt:has(input:checked) {
  border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface));
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
.ui-radio-group-cards .ui-radio-group-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-radio-group-cards .ui-radio-group-opt input:focus-visible + .ui-radio-group-dot { box-shadow: none; }
.ui-radio-group-cards .ui-radio-group-text > :first-child { font-weight: 500; }
.ui-radio-group-invalid .ui-radio-group-dot,
.ui-radio-group-invalid.ui-radio-group-cards .ui-radio-group-opt { border-color: var(--ui-danger); }
.ui-radio-group-hint, .ui-radio-group-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-radio-group-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) {
  .ui-radio-group-dot, .ui-radio-group-dot::after, .ui-radio-group-cards .ui-radio-group-opt { transition: none; }
}


.demo-rail-page { padding: 18px 20px; font: 15px/1.6 var(--ui-font); }
.demo-rail-page h4 { margin: 0 0 6px; font-size: 20px; }


.ui-bpcard { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-bpcard-in { display: grid; gap: 12px; overflow: hidden; padding: 16px; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-bpcard-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-weight: 600; }
.ui-bpcard-flight { font-variant-numeric: tabular-nums; }
.ui-bpcard-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ui-bpcard-code3 { display: block; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.ui-bpcard-city { display: block; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-bpcard-to { text-align: right; }
.ui-bpcard-line { width: 40px; border-top: 2px dashed var(--ui-strong); }
.ui-bpcard-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.ui-bpcard-big > div { min-width: 0; padding: 10px 12px; border-radius: var(--ui-radius); background: var(--ui-accent-soft); }
.ui-bpcard-big dt { color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ui-bpcard-big dd { margin: 0; font-size: 40px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-bpcard-was { display: block; color: var(--ui-danger); font-size: 13px; font-weight: 600; line-height: 1.3; }
.ui-bpcard-count { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-bpcard-count[data-phase="boarding"] { color: var(--ui-success); }
.ui-bpcard-count[data-phase="closed"], .ui-bpcard-count[data-phase="gone"] { color: var(--ui-danger); }
.ui-bpcard-count span { display: block; color: var(--ui-muted); font-size: 14px; font-weight: 500; }
.ui-bpcard-show {
  display: grid; justify-items: center; gap: 4px; width: 100%; padding: 12px 8px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius); background: transparent; color: var(--ui-fg);
  font: 500 14px/1.3 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-bpcard-show:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bpcard-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px 12px; margin: 0; }
.ui-bpcard-more dt { color: var(--ui-muted); font-size: 12px; }
.ui-bpcard-more dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-bpcard-net { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bpcard-net[data-off] { color: var(--ui-fg); font-weight: 600; }
.ui-bpcard-empty { padding: 20px; color: var(--ui-muted); text-align: center; }
/* The code's own page: light whatever the theme, since a scanner reads dark on light. */
.ui-bpcard-full {
  box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  border: 0; background: #fff; color: #111; font: 15px/1.35 var(--ui-font); overscroll-behavior: contain;
}
.ui-bpcard-full[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.ui-bpcard-full::backdrop { background: #fff; }
.ui-bpcard-full-code { display: grid; place-items: center; width: 100%; min-height: 0; }
.ui-bpcard-full-code svg { display: block; width: min(92vw, 62dvh); height: auto; max-width: 100%; }
.ui-bpcard-full-code .ui-barcode svg { height: 30dvh; }
.ui-bpcard-full-line { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.ui-bpcard-full-say { margin: 0; color: #444; font-size: 14px; text-align: center; }
.ui-bpcard-full-say:empty { display: none; }
.ui-bpcard-done {
  box-sizing: border-box; min-width: 160px; min-height: 48px; padding: 0 24px; border: 1px solid #111; border-radius: 999px; background: #111; color: #fff; font: 600 16px/1 var(--ui-font); cursor: pointer;
}
.ui-bpcard-done:focus-visible { outline: 3px solid #0a66ff; outline-offset: 2px; }
/* With the room, the code stands beside what it stands for, and a turned phone does the same. */
@container (min-width: 560px) {
  .ui-bpcard-in { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 20px; }
  .ui-bpcard-head, .ui-bpcard-route, .ui-bpcard-big, .ui-bpcard-count, .ui-bpcard-more, .ui-bpcard-net { grid-column: 1; }
  .ui-bpcard-show { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  .ui-bpcard-big dd { font-size: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .ui-bpcard-full[open] { flex-direction: row; flex-wrap: wrap; align-content: center; }
  .ui-bpcard-full-code { width: auto; }
  .ui-bpcard-full-code svg { width: min(70dvh, 46vw); }
}


.ui-hapbtn-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }


.ui-dividend-statement { display: grid; gap: 18px; min-width: 0; max-width: 640px; padding: 24px 26px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-dividend-statement-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.ui-dividend-statement-coop { margin: 0 0 2px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-dividend-statement .ui-dividend-statement-title { display: block; margin: 0; font-size: 19px; font-weight: 650; line-height: 1.25; }
.ui-dividend-statement-who { margin: 0; text-align: right; }
.ui-dividend-statement-who b { display: block; font-weight: 600; }
.ui-dividend-statement-who span { color: var(--ui-muted); font-family: var(--ui-mono); font-size: 13px; }
.ui-dividend-statement-scroll { overflow-x: auto; }
.ui-dividend-statement table { width: 100%; border-collapse: collapse; }
.ui-dividend-statement th { padding: 8px 10px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.ui-dividend-statement td, .ui-dividend-statement tbody th { padding: 10px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-dividend-statement tbody th { color: var(--ui-fg); font-size: 14px; font-weight: 500; white-space: normal; }
.ui-dividend-statement-basis { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-dividend-statement .ui-dividend-statement-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-dividend-statement .ui-dividend-statement-gross th, .ui-dividend-statement .ui-dividend-statement-gross td { font-weight: 600; }
.ui-dividend-statement-tax td.ui-dividend-statement-num:last-child { color: var(--ui-danger); }
.ui-dividend-statement .ui-dividend-statement-net th, .ui-dividend-statement .ui-dividend-statement-net td { border-bottom: 0; border-top: 2px solid var(--ui-fg); font-size: 16px; font-weight: 700; }
.ui-dividend-statement-net td:last-child { color: var(--ui-success); }
.ui-dividend-statement-foot { display: grid; gap: 4px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; }
.ui-dividend-statement-foot p { margin: 0; }
.ui-dividend-statement-foot b { color: var(--ui-fg); font-weight: 500; }
@media (max-width: 520px) { .ui-dividend-statement { padding: 18px 16px; } .ui-dividend-statement-who { text-align: left; } }
@media print { .ui-dividend-statement { border: 0; padding: 0; background: #fff; color: #000; } }


.ui-embed-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r, 16/9); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-embed-frame-fixed { aspect-ratio: auto; height: var(--h); }
.ui-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }


.ui-nowp { position: relative; height: var(--ui-nowp-height, 100dvh); min-width: 0; overflow: hidden; container: ui-nowp / size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-nowp-wrap {
  display: grid; grid-template: "top" auto "stage" minmax(0, 1fr) "ctrl" auto / minmax(0, 1fr); gap: 4px; height: 100%; box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.ui-nowp-top { grid-area: top; display: flex; align-items: center; gap: 4px; min-height: 48px; }
.ui-nowp-where { flex: 1; text-align: center; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-nowp-gap { width: 46px; flex: none; }
.ui-nowp-stage { grid-area: stage; position: relative; display: grid; place-items: center; min-height: 0; container-type: size; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-nowp-art {
  display: grid; place-items: center; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); overflow: hidden; border-radius: 14px; background: var(--ui-accent-soft); color: var(--ui-accent);
  font: 700 72px var(--ui-font); box-shadow: var(--ui-shadow-lg); will-change: transform;
}
.ui-nowp-art img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ui-nowp-ctrl { grid-area: ctrl; display: grid; gap: 0; min-width: 0; }
.ui-nowp-words { min-width: 0; padding: 4px 8px 0; }
.ui-nowp-title { margin: 0; overflow: hidden; font-size: 20px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ui-nowp-artist { margin: 0; overflow: hidden; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap; }
.ui-nowp-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ui-nowp-tools { display: flex; align-items: center; justify-content: space-around; gap: 8px; min-height: 52px; }
.ui-nowp-btn {
  display: grid; place-items: center; min-width: 52px; min-height: 52px; padding: 0 6px; border: 0; border-radius: 50%; background: none; color: var(--ui-fg); font: 600 14px var(--ui-font);
  font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ui-nowp-btn:disabled { color: var(--ui-strong); cursor: default; }
.ui-nowp-btn svg { width: 30px; height: 30px; }
.ui-nowp-small svg { width: 24px; height: 24px; }
.ui-nowp-small { min-width: 46px; min-height: 46px; border-radius: 12px; }
.ui-nowp-wide { border-radius: 999px; }
.ui-nowp-pressed { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-nowp-play { position: relative; width: 68px; height: 68px; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-nowp-play svg { width: 34px; height: 34px; }
.ui-nowp-busy::after { content: ""; position: absolute; inset: -4px; border: 3px solid transparent; border-top-color: var(--ui-accent); border-radius: 50%; animation: ui-nowp-spin .9s linear infinite; }
@keyframes ui-nowp-spin { to { transform: rotate(360deg); } }
.ui-nowp-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nowp-said { min-height: 18px; margin: 0; text-align: center; color: var(--ui-muted); font-size: 13px; }
.ui-nowp-said:empty { display: none; }
.ui-nowp-queue { grid-area: stage; display: none; flex-direction: column; min-width: 0; min-height: 0; background: var(--ui-bg); }
.ui-nowp-queue h2 { margin: 0; padding: 8px; font-size: 15px; font-weight: 650; }
.ui-nowp-open .ui-nowp-queue { display: flex; }
.ui-nowp-open .ui-nowp-stage { visibility: hidden; }
.ui-nowp-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.ui-nowp-item { display: flex; align-items: center; gap: 2px; border-radius: 12px; }
.ui-nowp-item[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-nowp-jump { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 6px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-nowp-jump:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nowp-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--ui-subtle); object-fit: cover; }
.ui-nowp-names { min-width: 0; }
.ui-nowp-names b, .ui-nowp-names span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nowp-names b { font-weight: 600; }
.ui-nowp-names span { color: var(--ui-muted); font-size: 13px; }
.ui-nowp-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--ui-muted); }
@media (hover: hover) { .ui-nowp-btn:hover:not(:disabled), .ui-nowp-jump:hover { background: var(--ui-subtle); } .ui-nowp-play:hover:not(:disabled) { background: var(--ui-accent); } }
/* Wide: the queue beside the player, always there, so its button goes. */
@container ui-nowp (min-width: 700px) {
  .ui-nowp-wrap { grid-template: "top queue" auto "stage queue" minmax(0, 1fr) "ctrl queue" auto / minmax(0, 1fr) minmax(280px, 38%); column-gap: 24px; }
  .ui-nowp-queue, .ui-nowp-open .ui-nowp-queue { grid-area: queue; display: flex; border-left: 1px solid var(--ui-border); padding-left: 12px; }
  .ui-nowp-qbtn { display: none; }
  .ui-nowp-open .ui-nowp-stage { visibility: visible; }
}
/* A phone on its side: no height for art above the controls, so it goes beside them. */
@container ui-nowp (min-width: 560px) and (max-height: 520px) {
  .ui-nowp-wrap { grid-template: "stage top" auto "stage ctrl" minmax(0, 1fr) / 40% minmax(0, 1fr); column-gap: 20px; }
  .ui-nowp-queue { display: none; grid-area: stage; border: 0; padding: 0; }
  .ui-nowp-open .ui-nowp-queue { display: flex; grid-area: stage; border: 0; padding: 0; }
  .ui-nowp-open .ui-nowp-stage { visibility: hidden; }
  .ui-nowp-qbtn { display: grid; }
  .ui-nowp-ctrl { align-content: center; overflow-y: auto; }
  .ui-nowp-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .ui-nowp-busy::after { animation: none; } }


.demo-size-class { display: flex; flex-direction: column; height: 100%; }
.demo-size-class-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); font: 14px/1.4 var(--ui-font); }
.demo-size-class-bar output { margin-left: auto; font-weight: 600; }
.demo-size-class-room { flex: 1; min-height: 0; background: var(--ui-subtle); }
.demo-size-class-box { height: 100%; margin: 0 auto; background: var(--ui-bg); border-inline: 1px solid var(--ui-border); }
.demo-size-class-cols { display: grid; gap: 16px; height: 100%; padding: 16px; }
.demo-size-class-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.demo-size-class-col h4 { margin: 0; font: 600 15px/1.3 var(--ui-font); }
.demo-size-class-scroll { flex: 1 1 200px; min-height: 120px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.demo-size-class-scroll p { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); font: 14px/1.4 var(--ui-font); }
.demo-size-class-col textarea { box-sizing: border-box; width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }


.ui-booking-summary { display: grid; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-booking-summary-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-booking-summary-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-booking-summary-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-booking-summary-head { display: flex; gap: 12px; align-items: flex-start; }
.ui-booking-summary-head img { flex: none; width: 88px; height: 72px; border-radius: var(--ui-radius-sm); object-fit: cover; background: var(--ui-subtle); }
.ui-booking-summary-what { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ui-booking-summary-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.ui-booking-summary-place { color: var(--ui-muted); font-size: 13px; }
.ui-booking-summary-status { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ts); color: var(--t); font-size: 12px; font-weight: 600; }
.ui-booking-summary-ref { color: var(--ui-muted); font-size: 12px; }
.ui-booking-summary-ref code { font: 600 12px/1 var(--ui-mono); color: var(--ui-fg); user-select: all; }
.ui-booking-summary-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 0; padding: 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-booking-summary-dates div { display: grid; gap: 1px; min-width: 0; }
.ui-booking-summary-dates div:last-child { text-align: right; }
.ui-booking-summary-dates dt { color: var(--ui-muted); font-size: 12px; }
.ui-booking-summary-dates dd { margin: 0; font-weight: 600; }
.ui-booking-summary-dates small { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-booking-summary-nights { padding: 2px 8px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-booking-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-booking-summary-row dt { color: var(--ui-muted); }
.ui-booking-summary-row dd { margin: 0; font-weight: 500; }
.ui-booking-summary-facts { display: grid; gap: 6px; margin: 0; }
.ui-booking-summary-edit { color: var(--ui-accent); font-size: 13px; text-decoration: none; }
.ui-booking-summary-edit:hover { text-decoration: underline; }
.ui-booking-summary-edit:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-booking-summary-lines { display: grid; gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.ui-booking-summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ui-booking-summary-line dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-booking-summary-hint { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-booking-summary-success dt, .ui-booking-summary-success dd { color: var(--ui-success); }
.ui-booking-summary-muted dt, .ui-booking-summary-muted dd { color: var(--ui-muted); }
.ui-booking-summary-danger-line dt, .ui-booking-summary-danger-line dd { color: var(--ui-danger); }
.ui-booking-summary-total { padding-top: 8px; border-top: 1px solid var(--ui-border); font-size: 16px; font-weight: 700; }
.ui-booking-summary-note { margin: 0; color: var(--ui-muted); font-size: 12px; }


.ui-org-chart { min-width: 0; overflow-x: auto; padding: 4px 4px 8px; font: 13px/1.35 var(--ui-font); color: var(--ui-fg); --ui-org-chart-line: var(--ui-strong); }
.ui-org-chart ul { position: relative; display: flex; justify-content: center; margin: 0; padding: 22px 0 0; list-style: none; }
.ui-org-chart > ul { padding-top: 0; width: max-content; min-width: 100%; }
.ui-org-chart li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; }
.ui-org-chart > ul > li { padding-top: 0; }
.ui-org-chart li::before, .ui-org-chart li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px;
  border-top: 2px solid var(--ui-org-chart-line); }
.ui-org-chart li::after { right: auto; left: 50%; border-left: 2px solid var(--ui-org-chart-line); }
.ui-org-chart li:only-child::before, .ui-org-chart li:only-child::after { display: none; }
.ui-org-chart li:only-child { padding-top: 0; }
.ui-org-chart li:first-child::before, .ui-org-chart li:last-child::after { border: 0 none; }
.ui-org-chart li:last-child::before { border-right: 2px solid var(--ui-org-chart-line); border-radius: 0 8px 0 0; }
.ui-org-chart li:first-child::after { border-radius: 8px 0 0 0; }
.ui-org-chart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 22px; border-left: 2px solid var(--ui-org-chart-line); }
.ui-org-chart > ul > li::before, .ui-org-chart > ul > li::after { display: none; }
.ui-org-chart-box { display: grid; justify-items: center; gap: 2px; width: 150px; padding: 12px 10px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); text-align: center; box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-fg) 6%, transparent); }
.ui-org-chart-box .ui-org-chart-pic { margin-bottom: 6px; }
.ui-org-chart-name { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.ui-org-chart-name a { color: inherit; text-decoration: none; }
.ui-org-chart-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-org-chart-name a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-org-chart-title { color: var(--ui-muted); }
.ui-org-chart-note { margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; }
.ui-org-chart-here { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: 0 0 0 1px var(--ui-accent); }
.ui-org-chart-here .ui-org-chart-title { color: var(--ui-accent); }
.ui-org-chart-compact .ui-org-chart-box { width: 120px; padding: 8px; }
.ui-org-chart-compact .ui-org-chart-name { font-size: 13px; }


.ui-size-class { position: relative; container: ui-size-class / inline-size; min-width: 0; width: 100%; }
.ui-size-class-fill { height: 100%; }
/* Hidden with visibility, not display: an element that is not laid out forgets its
   scroll, and these must come back as they were. Neither focus nor a screen reader
   reaches it. */
.ui-size-class-slot { position: absolute; inset: 0 0 auto 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
/* Chrome's scroll anchoring moves a list as its slot leaves, by the height it lost. */
.ui-size-class-slot * { overflow-anchor: none; }
@container ui-size-class (max-width: 599.98px) {
  .ui-size-class-slot[data-when~="compact"] { position: relative; inset: auto; height: auto; overflow: visible; visibility: visible; pointer-events: auto; }
}
@container ui-size-class (min-width: 600px) and (max-width: 839.98px) {
  .ui-size-class-slot[data-when~="medium"] { position: relative; inset: auto; height: auto; overflow: visible; visibility: visible; pointer-events: auto; }
}
@container ui-size-class (min-width: 840px) {
  .ui-size-class-slot[data-when~="expanded"] { position: relative; inset: auto; height: auto; overflow: visible; visibility: visible; pointer-events: auto; }
}
.ui-size-class-fill > .ui-size-class-slot { min-height: 0; }
@container ui-size-class (max-width: 599.98px) { .ui-size-class-fill > .ui-size-class-slot[data-when~="compact"] { height: 100%; } }
@container ui-size-class (min-width: 600px) and (max-width: 839.98px) { .ui-size-class-fill > .ui-size-class-slot[data-when~="medium"] { height: 100%; } }
@container ui-size-class (min-width: 840px) { .ui-size-class-fill > .ui-size-class-slot[data-when~="expanded"] { height: 100%; } }


.ui-megamenu { position: relative; z-index: 10; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-megamenu-in { display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 20px; }
.ui-megamenu-brand { flex: none; color: var(--ui-fg); font-weight: 650; font-size: 16px; text-decoration: none; border-radius: var(--ui-radius-sm); }
.ui-megamenu-brand:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-megamenu-bar { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-megamenu-item { position: static; }
.ui-megamenu-trigger {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); font: 500 14px/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ui-megamenu-trigger:hover, .ui-megamenu-item:focus-within > .ui-megamenu-trigger, .ui-megamenu-item:hover > .ui-megamenu-trigger { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-megamenu-trigger:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-megamenu-trigger[aria-current="page"] { color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; }
.ui-megamenu-chev { width: 14px; height: 14px; transition: transform .15s; }
.ui-megamenu-item:hover .ui-megamenu-chev, .ui-megamenu-item:focus-within .ui-megamenu-chev { transform: rotate(180deg); }
.ui-megamenu-panel {
  position: absolute; left: 0; right: 0; top: 100%; display: none; padding: 24px 20px 28px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg); box-shadow: var(--ui-shadow-lg);
}
.ui-megamenu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ui-megamenu-item:hover > .ui-megamenu-panel, .ui-megamenu-item:focus-within > .ui-megamenu-panel { display: block; animation: ui-megamenu-in .14s ease-out; }
@keyframes ui-megamenu-in { from { opacity: 0; transform: translateY(-4px); } }
.ui-megamenu-cols { display: grid; grid-template-columns: repeat(var(--ui-megamenu-cols, 3), minmax(0, 1fr)); gap: 28px; max-width: 1100px; margin: 0 auto; }
.ui-megamenu-title { margin: 0 0 8px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-megamenu-cols ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-megamenu-link {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 -8px; padding: 7px 8px; border-radius: var(--ui-radius-sm);
  color: var(--ui-fg); text-decoration: none; font-size: 14px;
}
.ui-megamenu-link:hover { background: var(--ui-subtle); }
.ui-megamenu-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-megamenu-link[aria-current="page"] .ui-megamenu-name { color: var(--ui-accent); }
.ui-megamenu-icon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; font-size: 17px; line-height: 1; color: var(--ui-accent); }
.ui-megamenu-icon svg { width: 18px; height: 18px; }
.ui-megamenu-name { display: block; font-weight: 600; }
.ui-megamenu-desc { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-megamenu-featured {
  display: block; padding: 16px; border-radius: var(--ui-radius); background: var(--ui-accent-soft); color: var(--ui-fg);
  text-decoration: none; font-size: 14px;
}
.ui-megamenu-featured:hover .ui-megamenu-cta { text-decoration: underline; }
.ui-megamenu-featured:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-megamenu-featured .ui-megamenu-name { font-size: 15px; }
.ui-megamenu-cta { display: inline-block; margin-top: 10px; color: var(--ui-accent); font-weight: 600; }
.ui-megamenu-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 760px) {
  .ui-megamenu-cols { grid-template-columns: 1fr 1fr; }
  .ui-megamenu-panel { max-height: 70vh; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-megamenu-chev { transition: none; } .ui-megamenu-item:hover > .ui-megamenu-panel, .ui-megamenu-item:focus-within > .ui-megamenu-panel { animation: none; } }


.ui-gift { position: relative; display: inline-block; max-width: 100%; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-gift-open { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-gift-open svg { width: 16px; height: 16px; color: var(--ui-accent); }
.ui-gift-open:hover, .ui-gift-open[aria-expanded="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-gift button:focus-visible, .ui-gift a:focus-visible, .ui-gift input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-gift-panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: grid; gap: 12px; width: min(380px, 92vw); padding: 16px 18px 18px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.ui-gift-end .ui-gift-panel { left: auto; right: 0; }
.ui-gift-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-gift .ui-gift-title { margin: 0; font-size: 16px; font-weight: 750; }
.ui-gift-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ui-gift-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-gift-text { margin: 0; color: var(--ui-muted); }
.ui-gift-text b { color: var(--ui-fg); }
.ui-gift-meter { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.ui-gift-meter span { height: 6px; border-radius: 3px; background: var(--ui-accent); }
.ui-gift-meter .ui-gift-used { background: var(--ui-border); }
.ui-gift-make { justify-self: start; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 650 14px var(--ui-font); cursor: pointer; }
.ui-gift-make:hover:not(:disabled) { filter: brightness(1.08); }
.ui-gift-make:disabled { opacity: .45; cursor: not-allowed; }
.ui-gift-link { display: flex; gap: 6px; }
.ui-gift-link input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 13px var(--ui-mono); }
.ui-gift-copy, .ui-gift-mail { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 13px var(--ui-font); text-decoration: none; cursor: pointer; }
.ui-gift-copy:hover, .ui-gift-mail:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-gift-ok { color: var(--ui-success); border-color: var(--ui-success); }
.ui-gift-status { margin: 0; min-height: 1.45em; color: var(--ui-muted); font-size: 13px; }
.ui-gift-none { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-fg); font-size: 13px; }


.ui-resizable {
  position: relative; box-sizing: border-box; width: var(--ui-resizable-w, 320px); height: var(--ui-resizable-h, 200px); max-width: 100%;
  min-width: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.5 var(--ui-font);
}
.ui-resizable-x { height: auto; }
.ui-resizable-y { width: auto; }
.ui-resizable-body { height: 100%; min-height: 0; overflow: auto; }
.ui-resizable-handle {
  position: absolute; z-index: 2; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--ui-muted); cursor: nwse-resize; touch-action: none; user-select: none;
}
.ui-resizable-handle svg { width: 14px; height: 14px; }
.ui-resizable-corner { right: 0; bottom: 0; width: 22px; height: 22px; }
.ui-resizable-right { top: 0; bottom: 0; right: 0; width: 12px; cursor: ew-resize; }
.ui-resizable-bottom { left: 0; right: 0; bottom: 0; height: 12px; cursor: ns-resize; }
.ui-resizable-right::before, .ui-resizable-bottom::before { content: ""; border-radius: 999px; background: var(--ui-strong); }
.ui-resizable-right::before { width: 3px; height: 28px; }
.ui-resizable-bottom::before { width: 28px; height: 3px; }
.ui-resizable-handle:hover, .ui-resizable-dragging .ui-resizable-handle { color: var(--ui-accent); }
.ui-resizable-handle:hover::before, .ui-resizable-dragging .ui-resizable-handle::before { background: var(--ui-accent); }
.ui-resizable-handle:focus-visible { outline: none; color: var(--ui-accent); }
.ui-resizable-handle:focus-visible::after, .ui-resizable-dragging::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: var(--ui-focus);
}
.ui-resizable:has(.ui-resizable-handle:focus-visible) { box-shadow: var(--ui-focus); }
.ui-resizable-dragging { box-shadow: var(--ui-focus); }
.ui-resizable-dragging .ui-resizable-body { pointer-events: none; }
.ui-resizable-size {
  position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 2px 7px; border-radius: var(--ui-radius-sm);
  background: var(--ui-fg); color: var(--ui-bg); font: 500 11px/1.4 var(--ui-mono); pointer-events: none; opacity: 0; transition: opacity .15s;
}
.ui-resizable-dragging .ui-resizable-size { opacity: .9; }
.ui-resizable-corner + .ui-resizable-size { right: 24px; }
@media (prefers-reduced-motion: reduce) { .ui-resizable-size { transition: none; } }


.ui-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 999px; vertical-align: middle;
  font: 500 12px/1 var(--ui-font); white-space: nowrap; font-variant-numeric: tabular-nums;
  --t: var(--ui-muted); --ts: var(--ui-subtle);
}
.ui-badge-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }
.ui-badge-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-badge-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-badge-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-badge-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-badge-soft { background: var(--ts); color: var(--t); }
.ui-badge-neutral.ui-badge-soft { color: var(--ui-fg); }
.ui-badge-solid { background: var(--t); color: var(--ui-bg); }
.ui-badge-neutral.ui-badge-solid { background: var(--ui-fg); }
.ui-badge-outline { border-color: color-mix(in srgb, var(--t) 45%, var(--ui-border)); color: var(--t); }
.ui-badge-neutral.ui-badge-outline { color: var(--ui-fg); border-color: var(--ui-border); }
.ui-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.ui-badge-solid.ui-badge-dot::before { background: currentColor; }
.ui-badge-count { min-width: 22px; justify-content: center; padding: 0 6px; }
.ui-badge-sm { height: 18px; padding: 0 7px; font-size: 11px; }
.ui-badge-sm.ui-badge-count { min-width: 18px; padding: 0 5px; }


.ui-code-editor { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-code-editor-label { font-size: 13px; font-weight: 500; }
.ui-code-editor-req { margin-left: 2px; color: var(--ui-danger); }
.ui-code-editor-frame {
  position: relative; display: flex; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); transition: border-color .15s, box-shadow .15s;
}
.ui-code-editor-frame:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-code-editor-gutter {
  flex: none; margin: 0; padding: 10px 0; overflow: hidden; border-right: 1px solid var(--ui-border); background: var(--ui-subtle);
  color: var(--ui-muted); font: 13px/1.6 var(--ui-mono); text-align: right; user-select: none; white-space: pre;
}
.ui-code-editor-gutter span { display: block; padding: 0 10px 0 12px; }
.ui-code-editor-frame textarea {
  flex: 1; display: block; box-sizing: border-box; min-width: 0; margin: 0; padding: 10px 12px; border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--ui-fg); font: 13px/1.6 var(--ui-mono); tab-size: var(--ui-code-editor-tab, 4);
  white-space: pre; overflow: auto; overflow-wrap: normal;
}
.ui-code-editor-wrap textarea { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-code-editor-frame textarea::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-code-editor-frame textarea:disabled { opacity: .55; cursor: not-allowed; }
.ui-code-editor-lang {
  position: absolute; right: 8px; top: 6px; padding: 2px 7px; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-muted);
  font: 600 11px/1.4 var(--ui-font); letter-spacing: .04em; text-transform: uppercase; pointer-events: none;
}
.ui-code-editor-invalid .ui-code-editor-frame { border-color: var(--ui-danger); }
.ui-code-editor-hint, .ui-code-editor-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-code-editor-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-code-editor-frame { transition: none; } }


.ui-sluginput { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-sluginput-field { display: grid; gap: 6px; min-width: 0; }
.ui-sluginput-label { font-size: 13px; font-weight: 500; }
.ui-sluginput-req { margin-left: 2px; color: var(--ui-danger); }
.ui-sluginput-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ui-sluginput-control:hover { border-color: var(--ui-strong); }
.ui-sluginput-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sluginput-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-sluginput-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-sluginput-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-sluginput-url { display: block; color: var(--ui-muted); font: 12px/1.5 var(--ui-mono); overflow-wrap: anywhere; }
.ui-sluginput-url b { color: var(--ui-fg); font-weight: 600; }
.ui-sluginput-out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-sluginput-free { color: var(--ui-success); }
.ui-sluginput-bad { color: var(--ui-danger); }
.ui-sluginput-use, .ui-sluginput-follow { padding: 0; border: 0; border-radius: 3px; background: none; font: 600 13px var(--ui-font); color: var(--ui-accent);
  cursor: pointer; text-decoration: underline; overflow-wrap: anywhere; }
.ui-sluginput-follow { font-weight: 500; color: var(--ui-muted); }
.ui-sluginput-use:focus-visible, .ui-sluginput-follow:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-sluginput-control { transition: none; } }


.ui-access-checker { display: grid; gap: 16px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-access-checker .ui-access-checker-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-access-checker-ask { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ui-access-checker-field { display: grid; gap: 5px; min-width: 0; }
.ui-access-checker-field label { font-size: 13px; font-weight: 500; }
.ui-access-checker-field select, .ui-access-checker-field input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-access-checker-field select:focus-visible, .ui-access-checker-field input:focus-visible, .ui-access-checker-policy textarea:focus-visible {
  outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-access-checker-answer { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--ui-radius-sm); border-left: 4px solid var(--ui-border); background: var(--ui-subtle); }
.ui-access-checker-allow { border-left-color: var(--ui-success); }
.ui-access-checker-deny { border-left-color: var(--ui-danger); }
.ui-access-checker-verdict { font-size: 16px; font-weight: 700; }
.ui-access-checker-allow .ui-access-checker-verdict { color: var(--ui-success); }
.ui-access-checker-deny .ui-access-checker-verdict { color: var(--ui-danger); }
.ui-access-checker-reason, .ui-access-checker-via, .ui-access-checker-others { margin: 0; overflow-wrap: anywhere; }
.ui-access-checker-via, .ui-access-checker-others { color: var(--ui-muted); font-size: 13px; }
.ui-access-checker-rule { font-family: var(--ui-mono); font-size: 13px; }
.ui-access-checker-problems { display: grid; gap: 4px; margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-access-checker-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-access-checker-error { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-access-checker-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-access-checker-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-access-checker table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-access-checker caption { padding: 8px 10px; text-align: left; font-weight: 600; }
.ui-access-checker th, .ui-access-checker td { padding: 4px 6px; border: 1px solid var(--ui-border); text-align: center; white-space: nowrap; }
.ui-access-checker thead th { background: var(--ui-subtle); font-weight: 600; }
.ui-access-checker tbody th { position: sticky; left: 0; background: var(--ui-surface); text-align: left; font-weight: 500; }
.ui-access-checker-role { color: var(--ui-muted); font-weight: 400; }
.ui-access-checker-cell { width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; font: 600 13px/1 var(--ui-font); cursor: pointer; }
.ui-access-checker-cell:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-access-checker-yes { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-access-checker-no { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-access-checker-picked { border-color: var(--ui-fg); }
.ui-access-checker-policy summary { font-weight: 600; cursor: pointer; }
.ui-access-checker-policy summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-access-checker-policy textarea { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); resize: vertical; }


.ui-bestcoupon { display: grid; gap: 14px; min-width: 0; max-width: 640px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-bestcoupon .ui-bestcoupon-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-bestcoupon-out { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-bestcoupon-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-bestcoupon-steps li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ui-bestcoupon-steps span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bestcoupon-total { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--ui-border); font-size: 16px; font-weight: 700; }
.ui-bestcoupon-total span:last-child { color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.ui-bestcoupon-say { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-bestcoupon-win { margin: 0; font-weight: 600; color: var(--ui-success); }
.ui-bestcoupon-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-bestcoupon-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-bestcoupon-row:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bestcoupon-row input { margin: 3px 0 0; accent-color: var(--ui-accent); }
.ui-bestcoupon-used { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-bestcoupon-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-bestcoupon-what { color: var(--ui-muted); font-weight: 400; }
.ui-bestcoupon-why { grid-column: 2; color: var(--ui-muted); font-size: 12px; }
.ui-bestcoupon-used .ui-bestcoupon-why { color: var(--ui-success); }
.ui-bestcoupon-problems { margin: 0; padding: 8px 12px 8px 26px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 12px; }
@media (max-width: 420px) { .ui-bestcoupon { padding: 16px; } }


.ui-range-slider { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-range-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-range-slider-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-range-slider-value { font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-range-slider-track { position: relative; height: 22px; margin: 0 2px; }
.ui-range-slider-track::before, .ui-range-slider-fill {
  content: ""; position: absolute; top: 8px; height: 6px; border-radius: 999px;
}
.ui-range-slider-track::before { left: 0; right: 0; background: var(--ui-subtle); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-range-slider-fill { left: var(--lo); right: calc(100% - var(--hi)); background: var(--ui-accent); }
.ui-range-slider input {
  position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; appearance: none; background: transparent;
  pointer-events: none;
}
.ui-range-slider input:focus { outline: none; }
.ui-range-slider input::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.ui-range-slider input::-moz-range-track { background: transparent; }
.ui-range-slider input::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; cursor: grab;
  background: var(--ui-surface); border: 2px solid var(--ui-accent); box-shadow: var(--ui-shadow); transition: transform .12s, box-shadow .15s;
}
.ui-range-slider input::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; cursor: grab;
  background: var(--ui-surface); border: 2px solid var(--ui-accent); box-shadow: var(--ui-shadow);
}
.ui-range-slider input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.ui-range-slider input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ui-focus); }
.ui-range-slider input:focus-visible::-moz-range-thumb { box-shadow: var(--ui-focus); }
.ui-range-slider-top { z-index: 1; }
.ui-range-slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ui-muted); }
.ui-range-slider-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-range-slider:disabled { opacity: .55; }
.ui-range-slider:disabled input::-webkit-slider-thumb { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-range-slider input::-webkit-slider-thumb { transition: none; } }


.ui-arth { display: grid; gap: 12px; max-width: 760px; margin: 0; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-arth-center { justify-items: center; margin-inline: auto; text-align: center; }
.ui-arth-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; }
.ui-arth-label { --t: var(--ui-accent); display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t); font-size: 12px; }
.ui-arth-label-danger { --t: var(--ui-danger); }
.ui-arth-label-warning { --t: var(--ui-warning); }
.ui-arth-label-neutral { --t: var(--ui-muted); }
.ui-arth-label-danger::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: ui-arth-pulse 1.6s ease-in-out infinite; }
@keyframes ui-arth-pulse { 50% { opacity: .25; } }
.ui-arth-kicker { color: var(--ui-accent); text-decoration: none; }
a.ui-arth-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }
a.ui-arth-kicker:focus-visible, .ui-arth-byline a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-arth .ui-arth-headline { margin: 0; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; font-weight: 750; letter-spacing: -.015em;
  text-wrap: balance; }
.ui-arth .ui-arth-dek { margin: 0; color: var(--ui-muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.45; text-wrap: pretty; }
.ui-arth-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--ui-border); }
.ui-arth-center .ui-arth-meta { justify-content: center; }
.ui-arth-faces { display: flex; flex: none; }
.ui-arth-face { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ui-bg); border-radius: 50%;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.ui-arth-face + .ui-arth-face { margin-left: -10px; }
.ui-arth-credits { display: grid; gap: 2px; min-width: 0; }
.ui-arth-byline { margin: 0; font-size: 14px; color: var(--ui-muted); }
.ui-arth-byline b { color: var(--ui-fg); font-weight: 650; }
.ui-arth-byline a { color: var(--ui-fg); font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--ui-strong); }
.ui-arth-byline a:hover { color: var(--ui-accent); border-color: currentColor; }
.ui-arth-byline:first-child { font-size: 15px; }
.ui-arth-times { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-arth-center .ui-arth-times { justify-content: center; }
.ui-arth-times > span + span::before { content: "·"; margin-right: 12px; color: var(--ui-strong); }
.ui-arth-updated { color: var(--ui-fg); }
@media (prefers-reduced-motion: reduce) { .ui-arth-label-danger::before { animation: none; } }


.ui-varsh-host { display: contents; }
.ui-varsh-open {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 600 15px var(--ui-font); cursor: pointer;
  touch-action: manipulation;
}
.ui-varsh-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-varsh-wrap { display: grid; gap: 14px; }
.ui-varsh-pic { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-varsh-groups { display: grid; gap: 16px; min-width: 0; }
.ui-varsh-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-varsh-group legend { padding: 0 0 6px; font-weight: 600; }
.ui-varsh-group legend span { color: var(--ui-muted); font-weight: 400; }
.ui-varsh-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ui-varsh-opt {
  position: relative; display: grid; align-content: center; gap: 0; min-height: 56px; padding: 6px 8px; box-sizing: border-box; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer; text-align: center; touch-action: manipulation;
}
.ui-varsh-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.ui-varsh-opt:has(input:checked) { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); background: var(--ui-accent-soft); }
.ui-varsh-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-varsh-name { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; overflow-wrap: anywhere; }
.ui-varsh-swatch { flex: none; width: 16px; height: 16px; border: 1px solid var(--ui-strong); border-radius: 50%; }
.ui-varsh-why { color: var(--ui-muted); font-size: 12px; line-height: 1.25; }
.ui-varsh-low { color: var(--ui-warning); font-size: 12px; line-height: 1.25; }
/* Struck through, as well as the words: colour alone says nothing to some. */
.ui-varsh-out { border-style: dashed; background: var(--ui-subtle); }
.ui-varsh-out .ui-varsh-name { color: var(--ui-muted); text-decoration: line-through; }
.ui-varsh-said { min-height: 20px; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-varsh-foot { display: grid; gap: 10px; }
.ui-varsh-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-varsh-price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-varsh-state { color: var(--ui-muted); font-size: 13px; text-align: right; }
@container (min-width: 520px) {
  .ui-varsh-withpic { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 20px; }
  .ui-varsh-withpic .ui-varsh-pic { height: 100%; min-height: 260px; }
}


.ui-double-tap { container-type: inline-size; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-double-tap-inner { display: grid; }
/* manipulation: pans and pinches stay the page's, and the browser's own double tap to zoom is off. */
.ui-double-tap-media { position: relative; display: block; width: 100%; overflow: hidden; background: var(--c, var(--ui-subtle)); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; outline: none; }
.ui-double-tap-media:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-double-tap-media img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ui-double-tap-burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.ui-double-tap-burst svg { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); animation: ui-double-tap-pop .7s cubic-bezier(.2, .9, .3, 1.3) forwards; }
.ui-double-tap-ring { position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border: 3px solid #fff; border-radius: 50%; animation: ui-double-tap-ring .55s ease-out forwards; }
@keyframes ui-double-tap-pop { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.15); } 45% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) translateY(-14px); } }
@keyframes ui-double-tap-ring { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.ui-double-tap-side { display: grid; gap: 4px; align-content: start; padding: 8px 14px 12px; }
.ui-double-tap-row { display: flex; align-items: center; gap: 8px; }
.ui-double-tap-title { margin: 0; font-weight: 600; }
.ui-double-tap-text { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-double-tap-like { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px 0 6px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 600 14px/1 var(--ui-font); cursor: pointer; }
.ui-double-tap-like svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .16s; }
.ui-double-tap-like[aria-pressed="true"] { color: var(--ui-danger); }
.ui-double-tap-like[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.08); }
.ui-double-tap-like:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-double-tap-like:hover { background: var(--ui-subtle); } }
@container (min-width: 520px) {
  .ui-double-tap-inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .ui-double-tap-side { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Still there to see, without the movement; the end of this fade removes it. */
  .ui-double-tap-burst svg { animation: ui-double-tap-still .6s linear forwards; }
  .ui-double-tap-ring { display: none; }
  .ui-double-tap-like svg { transition: none; }
}
@keyframes ui-double-tap-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }


.ui-workload-view { display: grid; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-workload-view .ui-workload-view-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-workload-view-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-workload-view-wrap { position: relative; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-workload-view-wrap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-workload-view-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-workload-view-table th, .ui-workload-view-table td { padding: 8px 10px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.ui-workload-view-table thead th { background: var(--ui-subtle); font-weight: 600; white-space: nowrap; }
.ui-workload-view-table tbody th { position: sticky; left: 0; background: var(--ui-surface); font-weight: 600; white-space: nowrap; }
.ui-workload-view-table tbody th small { display: block; color: var(--ui-muted); font-weight: 400; }
.ui-workload-view-cell { min-width: 170px; }
.ui-workload-view-load { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-workload-view-bar { display: block; height: 6px; margin: 4px 0 6px; overflow: hidden; border-radius: 3px; background: var(--ui-subtle); }
.ui-workload-view-bar i { display: block; height: 100%; background: var(--ui-accent); }
.ui-workload-view-over { background: var(--ui-danger-soft); }
.ui-workload-view-over .ui-workload-view-load { color: var(--ui-danger); }
.ui-workload-view-over .ui-workload-view-bar i { background: var(--ui-danger); }
.ui-workload-view-under .ui-workload-view-load { color: var(--ui-warning); }
.ui-workload-view-under .ui-workload-view-bar i { background: var(--ui-warning); }
.ui-workload-view-items { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-workload-view-item { display: grid; gap: 2px; font-size: 12px; }
.ui-workload-view-item select { box-sizing: border-box; width: 100%; padding: 2px 4px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-surface); color: var(--ui-muted); font: 12px var(--ui-font); }
.ui-workload-view-item select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-workload-view-side { display: grid; gap: 8px; }
.ui-workload-view-side h4 { margin: 0; font-size: 14px; font-weight: 650; }
.ui-workload-view-moves { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-workload-view-move { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 13px; }
.ui-workload-view-move span { min-width: 0; overflow-wrap: anywhere; }
.ui-workload-view-stuck { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-workload-view-btn { flex: none; padding: 5px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1.2 var(--ui-font); cursor: pointer; }
.ui-workload-view-btn:hover { border-color: var(--ui-accent); }
.ui-workload-view-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-workload-view-said { min-height: 1.4em; margin: 0; color: var(--ui-muted); font-size: 13px; }


.demo-swipe-from { display: block; font-weight: 600; }
.demo-swipe-sub { display: block; color: var(--ui-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.ui-opening-hours { display: grid; gap: 10px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-opening-hours-title { margin: 0; font-size: 15px; font-weight: 600; }
.ui-opening-hours-status { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; --t: var(--ui-success); }
.ui-opening-hours-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 22%, transparent); }
.ui-opening-hours-status span { color: var(--ui-muted); font-weight: 400; }
.ui-opening-hours-soon { --t: var(--ui-warning); }
.ui-opening-hours-closed { --t: var(--ui-danger); }
.ui-opening-hours-table { width: 100%; border-collapse: collapse; }
.ui-opening-hours-table th, .ui-opening-hours-table td { padding: 6px 8px; border-top: 1px solid var(--ui-border); text-align: left; vertical-align: top; font-weight: 400; }
.ui-opening-hours-table tr:first-child th, .ui-opening-hours-table tr:first-child td { border-top: 0; }
.ui-opening-hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.ui-opening-hours-table td span { display: block; }
.ui-opening-hours-table small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-opening-hours-off { color: var(--ui-muted); }
.ui-opening-hours-today th, .ui-opening-hours-today td { font-weight: 600; background: var(--ui-accent-soft); }
.ui-opening-hours-today th { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
.ui-opening-hours-today td { border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }


.ui-language-picker { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-language-picker-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-language-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-language-picker-box { position: relative; display: block; }
.ui-language-picker-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-language-picker select {
  appearance: none; display: block; width: 100%; height: 38px; padding: 0 36px 0 12px;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-language-picker select:hover { border-color: var(--ui-strong); }
.ui-language-picker select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-language-picker select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-language-picker option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-language-picker-sm select { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-language-picker-sm .ui-language-picker-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
.ui-language-picker-invalid select, .ui-language-picker-invalid select:hover { border-color: var(--ui-danger); }
.ui-language-picker-hint, .ui-language-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-language-picker-error { color: var(--ui-danger); }
.ui-language-picker-disabled { opacity: .55; }
.ui-language-picker-disabled select { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-language-picker select { transition: none; } }


.ui-txfeed { box-sizing: border-box; height: 100%; min-width: 0; container-type: inline-size; color: var(--ui-fg); background: var(--ui-bg); font: 15px/1.4 var(--ui-font); }
.ui-txfeed-lay { display: grid; height: 100%; min-height: 0; min-width: 0; }
.ui-txfeed-looking { --ui-txfeed-top: 83px; }
.ui-txfeed-list { min-height: 0; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ui-txfeed-find { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 8px 12px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); }
/* 16 px and up, or iOS zooms the page when it is focused. */
.ui-txfeed-box { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); -webkit-appearance: none; appearance: none; }
.ui-txfeed-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-txfeed-clear { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); font: 22px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-txfeed-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-txfeed-said { grid-column: 1 / -1; min-height: 0; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-txfeed-days { margin: 0; padding: 0 0 calc(12px + env(safe-area-inset-bottom)); list-style: none; }
.ui-txfeed-day { position: sticky; top: var(--ui-txfeed-top, 61px); z-index: 2; display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 14px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-txfeed-pending .ui-txfeed-day { color: var(--ui-warning); }
.ui-txfeed-rows { margin: 0; padding: 0; list-style: none; }
.ui-txfeed-row {
  box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.ui-txfeed-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-txfeed-row[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-txfeed-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); font-weight: 700; }
.ui-txfeed-main { min-width: 0; }
.ui-txfeed-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-txfeed-cat { display: block; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-txfeed-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-txfeed-in { color: var(--ui-success); }
.ui-txfeed-none { margin: 0; padding: 28px 16px; color: var(--ui-muted); text-align: center; }
.ui-txfeed-sheet {
  box-sizing: border-box; inset: auto 0 0 0; width: min(100%, 560px); max-width: 100%; max-height: 85dvh; margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom); overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0;
  border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.4 var(--ui-font); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ui-txfeed-sheet[open] { display: flex; flex-direction: column; animation: ui-txfeed-up .24s cubic-bezier(.2, .8, .2, 1); }
.ui-txfeed-sheet::backdrop { background: var(--ui-overlay); }
@keyframes ui-txfeed-up { from { transform: translateY(100%); } }
.ui-txfeed-dragging { transition: none; }
html:has(.ui-txfeed-sheet[open]) { overflow: hidden; }
.ui-txfeed-grip { display: grid; place-items: center; flex: none; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.ui-txfeed-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-txfeed-grip:focus-visible { outline: none; }
.ui-txfeed-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-txfeed-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; }
.ui-txfeed-pane { display: none; }
.ui-txfeed-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 4px; }
.ui-txfeed-head h3 { margin: 0; font-size: 18px; outline: none; overflow-wrap: anywhere; }
.ui-txfeed-x { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); font: 22px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-txfeed-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-txfeed-big { margin: 2px 0 12px; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-txfeed-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.ui-txfeed-facts dt { color: var(--ui-muted); }
.ui-txfeed-facts dd { margin: 0; overflow-wrap: anywhere; }
/* Room for both: the sheet's place is taken by a pane, and the list keeps its scroll. */
@container (min-width: 640px) {
  .ui-txfeed-lay { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .ui-txfeed-pane { display: block; min-height: 0; overflow-y: auto; padding: 18px; border-left: 1px solid var(--ui-border); background: var(--ui-subtle); }
}
@media (hover: hover) { .ui-txfeed-row:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-txfeed-sheet { transition: none; } .ui-txfeed-sheet[open] { animation: none; } }


.ui-palloc { --ui-palloc-1: light-dark(#2a78d6, #3987e5); --ui-palloc-2: light-dark(#eb6834, #d95926);
  --ui-palloc-3: light-dark(#1baf7a, #199e70); --ui-palloc-4: light-dark(#eda100, #c98500);
  --ui-palloc-5: light-dark(#e87ba4, #d55181); --ui-palloc-6: light-dark(#008300, #008300);
  --ui-palloc-7: light-dark(#6250d6, #9085e9); --ui-palloc-8: var(--ui-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; min-width: 0; margin: 0; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-palloc-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-palloc-s1 { --c: var(--ui-palloc-1); } .ui-palloc-s2 { --c: var(--ui-palloc-2); } .ui-palloc-s3 { --c: var(--ui-palloc-3); }
.ui-palloc-s4 { --c: var(--ui-palloc-4); } .ui-palloc-s5 { --c: var(--ui-palloc-5); } .ui-palloc-s6 { --c: var(--ui-palloc-6); }
.ui-palloc-s7 { --c: var(--ui-palloc-7); } .ui-palloc-s8 { --c: var(--ui-palloc-8); }
.ui-palloc-up { --k: var(--ui-success); } .ui-palloc-down { --k: var(--ui-danger); }
.ui-palloc-ring { position: relative; flex: none; max-width: 100%; aspect-ratio: 1; }
.ui-palloc-ring svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ui-palloc-track { fill: none; stroke: var(--ui-subtle); stroke-width: 16; }
.ui-palloc-seg { fill: none; stroke: var(--c); stroke-width: 16; transition: stroke-width .15s ease, opacity .15s ease; }
.ui-palloc-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.ui-palloc-center > span { grid-area: 1 / 1; display: grid; max-width: 66%; }
.ui-palloc-center > span:not(.ui-palloc-sum) { visibility: hidden; }
.ui-palloc-center b { font-size: 19px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-palloc-center small { overflow: hidden; color: var(--ui-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ui-palloc-center .ui-palloc-up, .ui-palloc-center .ui-palloc-down { color: var(--k); }
.ui-palloc-table { flex: 1 1 340px; min-width: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-palloc-table caption { padding-bottom: 6px; color: var(--ui-muted); font-size: 12px; text-align: left; }
.ui-palloc-table th, .ui-palloc-table td { padding: 7px 8px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-palloc-table thead th { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-palloc-table th:first-child { text-align: left; }
.ui-palloc-table tbody th { font-weight: 400; }
.ui-palloc-table tfoot th, .ui-palloc-table tfoot td { border-bottom: 0; font-weight: 650; }
.ui-palloc-row > * { transition: opacity .15s ease; }
.ui-palloc-hold { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ui-palloc-key { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ui-palloc-hold b { font-weight: 650; }
.ui-palloc-hold small { overflow: hidden; color: var(--ui-muted); font-size: 12px; text-overflow: ellipsis; }
.ui-palloc-weight { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ui-palloc-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--ui-subtle); overflow: hidden; }
.ui-palloc-bar span { display: block; height: 100%; background: var(--c); }
.ui-palloc-gain { color: var(--k); }
.ui-palloc-gain small { margin-left: 6px; font-size: 12px; opacity: .85; }
.ui-palloc:has(.ui-palloc-p1:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p1, .ui-palloc-p1 > *),
.ui-palloc:has(.ui-palloc-p2:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p2, .ui-palloc-p2 > *),
.ui-palloc:has(.ui-palloc-p3:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p3, .ui-palloc-p3 > *),
.ui-palloc:has(.ui-palloc-p4:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p4, .ui-palloc-p4 > *),
.ui-palloc:has(.ui-palloc-p5:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p5, .ui-palloc-p5 > *),
.ui-palloc:has(.ui-palloc-p6:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p6, .ui-palloc-p6 > *),
.ui-palloc:has(.ui-palloc-p7:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p7, .ui-palloc-p7 > *),
.ui-palloc:has(.ui-palloc-p8:hover) :is(.ui-palloc-seg, .ui-palloc-row > *):not(.ui-palloc-p8, .ui-palloc-p8 > *) { opacity: .3; }
.ui-palloc:has(.ui-palloc-p:hover) .ui-palloc-sum { visibility: hidden; }
.ui-palloc:has(.ui-palloc-p1:hover) .ui-palloc-c1, .ui-palloc:has(.ui-palloc-p2:hover) .ui-palloc-c2,
.ui-palloc:has(.ui-palloc-p3:hover) .ui-palloc-c3, .ui-palloc:has(.ui-palloc-p4:hover) .ui-palloc-c4,
.ui-palloc:has(.ui-palloc-p5:hover) .ui-palloc-c5, .ui-palloc:has(.ui-palloc-p6:hover) .ui-palloc-c6,
.ui-palloc:has(.ui-palloc-p7:hover) .ui-palloc-c7, .ui-palloc:has(.ui-palloc-p8:hover) .ui-palloc-c8 { visibility: visible; }
.ui-palloc:has(.ui-palloc-p1:hover) .ui-palloc-seg.ui-palloc-p1, .ui-palloc:has(.ui-palloc-p2:hover) .ui-palloc-seg.ui-palloc-p2,
.ui-palloc:has(.ui-palloc-p3:hover) .ui-palloc-seg.ui-palloc-p3, .ui-palloc:has(.ui-palloc-p4:hover) .ui-palloc-seg.ui-palloc-p4,
.ui-palloc:has(.ui-palloc-p5:hover) .ui-palloc-seg.ui-palloc-p5, .ui-palloc:has(.ui-palloc-p6:hover) .ui-palloc-seg.ui-palloc-p6,
.ui-palloc:has(.ui-palloc-p7:hover) .ui-palloc-seg.ui-palloc-p7, .ui-palloc:has(.ui-palloc-p8:hover) .ui-palloc-seg.ui-palloc-p8 { stroke-width: 20; }
@media (prefers-reduced-motion: reduce) { .ui-palloc-seg, .ui-palloc-row > * { transition: none; } }


.ui-secfeed { position: relative; container-type: inline-size; box-sizing: border-box; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-secfeed-scroll { position: relative; box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; outline: none; }
.ui-secfeed-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-secfeed-section { position: relative; }
.ui-secfeed-head { position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); font: 600 14px/1.4 var(--ui-font); outline: none; }
.ui-secfeed-today .ui-secfeed-head { color: var(--ui-accent); }
.ui-secfeed-rows { margin: 0; padding: 0; list-style: none; }
.ui-secfeed-row { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 56px; padding: 8px 16px 8px max(16px, env(safe-area-inset-left)); border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.ui-secfeed-row { cursor: pointer; }
button.ui-secfeed-row:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
.ui-secfeed-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-secfeed-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-secfeed-sub { display: block; color: var(--ui-muted); font-size: 14px; }
.ui-secfeed-meta { flex: none; color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-secfeed-pill { position: absolute; top: 46px; left: 50%; z-index: 3; max-width: calc(100% - 32px); padding: 5px 12px; border-radius: 999px; background: var(--ui-fg); color: var(--ui-bg); font: 500 13px/1.3 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--ui-shadow); pointer-events: none; opacity: 0; transform: translate(-50%, -6px); transition: opacity .18s, transform .18s; }
.ui-secfeed-pill[data-on] { opacity: 1; transform: translate(-50%, 0); }
.ui-secfeed-jump { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 15px/1 var(--ui-font); box-shadow: var(--ui-shadow-lg); cursor: pointer; touch-action: manipulation; }
.ui-secfeed-jump:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-secfeed-jump svg { width: 16px; height: 16px; }
.ui-secfeed-none { margin: 40px 16px; color: var(--ui-muted); text-align: center; }
@container (min-width: 640px) {
  .ui-secfeed-section { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-bottom: 1px solid var(--ui-border); }
  .ui-secfeed-head { align-self: start; padding: 14px 16px; border-bottom: 0; background: transparent; font-size: 15px; }
  .ui-secfeed-pill { display: none; }
  .ui-secfeed-rows li:last-child .ui-secfeed-row { border-bottom: 0; }
}
@media (hover: hover) { button.ui-secfeed-row:hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ui-secfeed-pill { transition: none; } }


.ui-logo-cloud { display: grid; gap: 18px; font: 13px/1.4 var(--ui-font); color: var(--ui-muted); }
.ui-logo-cloud-title { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; }
.ui-logo-cloud-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 44px; margin: 0; padding: 0; list-style: none; }
.ui-logo-cloud-left .ui-logo-cloud-title { text-align: left; }
.ui-logo-cloud-left .ui-logo-cloud-list { justify-content: flex-start; }
.ui-logo-cloud-between .ui-logo-cloud-list { justify-content: space-between; }
.ui-logo-cloud-item { display: inline-flex; border-radius: var(--ui-radius-sm); }
.ui-logo-cloud-item img {
  display: block; width: auto; height: var(--h, 32px); filter: grayscale(1); opacity: .55;
  transition: filter .2s, opacity .2s;
}
.ui-logo-cloud-item:hover img, .ui-logo-cloud-item:focus-visible img, .ui-logo-cloud-color .ui-logo-cloud-item img { filter: none; opacity: 1; }
a.ui-logo-cloud-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-logo-cloud-sm .ui-logo-cloud-item img { --h: 24px; }
.ui-logo-cloud-lg .ui-logo-cloud-item img { --h: 44px; }
@media (prefers-reduced-motion: reduce) { .ui-logo-cloud-item img { transition: none; } }


.ui-debt-payoff { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 760px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-debt-payoff .ui-debt-payoff-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-debt-payoff input[type=text] { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-debt-payoff input[type=text]:hover { border-color: var(--ui-strong); }
.ui-debt-payoff input[type=text]:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-debt-payoff input[aria-invalid] { border-color: var(--ui-danger); }
.ui-debt-payoff-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-debt-payoff-row, .ui-debt-payoff-labels { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) 74px; gap: 8px; align-items: center; }
.ui-debt-payoff-labels { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-debt-payoff-cell { display: grid; gap: 3px; min-width: 0; }
.ui-debt-payoff-cell label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container (max-width: 520px) {
  .ui-debt-payoff-labels { display: none; }
  .ui-debt-payoff-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 10px; }
  .ui-debt-payoff-cell label { position: static; width: auto; height: auto; clip: auto; color: var(--ui-muted); font-size: 12px; }
}
.ui-debt-payoff-btn { box-sizing: border-box; height: 34px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-debt-payoff-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-debt-payoff-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-debt-payoff-btn:disabled { color: var(--ui-muted); cursor: not-allowed; }
.ui-debt-payoff-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 16px; }
.ui-debt-payoff-extra { display: grid; gap: 5px; width: 200px; max-width: 100%; }
.ui-debt-payoff-extra label { font-size: 13px; font-weight: 500; }
.ui-debt-payoff-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-debt-payoff-warn { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-debt-payoff-warn li { padding: 6px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-debt-payoff-out { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-debt-payoff-compare { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-debt-payoff-compare th, .ui-debt-payoff-months th { padding: 4px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-debt-payoff-compare td, .ui-debt-payoff-months td { padding: 4px 0; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-debt-payoff-compare th:first-child, .ui-debt-payoff-compare td:first-child, .ui-debt-payoff-months th:first-child, .ui-debt-payoff-months td:first-child { text-align: left; }
.ui-debt-payoff-compare th + th, .ui-debt-payoff-compare td + td, .ui-debt-payoff-months th + th, .ui-debt-payoff-months td + td { padding-left: 10px; }
.ui-debt-payoff-order { text-align: left !important; overflow-wrap: anywhere; }
.ui-debt-payoff-verdict { margin: 0; font-weight: 600; }
.ui-debt-payoff-plans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.ui-debt-payoff-plans legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-debt-payoff-plans label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-debt-payoff-plans input { margin: 0; accent-color: var(--ui-accent); }
.ui-debt-payoff-scroll { max-height: 320px; overflow: auto; }
.ui-debt-payoff-scroll:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-debt-payoff-months { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-debt-payoff-months th { position: sticky; top: 0; background: var(--ui-subtle); }


.ui-skip {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px/1 var(--ui-font); text-decoration: none;
  box-shadow: var(--ui-shadow-lg); transform: translateY(calc(-100% - 16px)); opacity: 0;
  transition: transform .15s, opacity .15s;
}
.ui-skip:focus, .ui-skip-shown { outline: none; transform: none; opacity: 1; }
.ui-skip:focus { box-shadow: var(--ui-shadow-lg), 0 0 0 3px var(--ui-accent-fg); }
.ui-skip-shown { position: static; display: inline-block; box-shadow: var(--ui-shadow); }
@media (prefers-reduced-motion: reduce) { .ui-skip { transition: none; } }


.ui-alrail { position: relative; container-type: inline-size; box-sizing: border-box; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-alrail-list { position: relative; box-sizing: border-box; height: 100%; padding-right: 44px; overflow-y: auto; overscroll-behavior-y: contain; }
.ui-alrail-head { position: sticky; top: 0; z-index: 1; margin: 0 -44px 0 0; padding: 3px 16px; background: var(--ui-subtle); color: var(--ui-muted); font: 600 13px/1.5 var(--ui-font); }
.ui-alrail-rows { margin: 0; padding: 0; list-style: none; content-visibility: auto; }
.ui-alrail-row { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 7px 8px 7px max(16px, env(safe-area-inset-left)); border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.ui-alrail-row { cursor: pointer; }
button.ui-alrail-row:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
.ui-alrail-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-alrail-sub { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-alrail-foot { margin: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-alrail-none { margin: 40px 16px; color: var(--ui-muted); text-align: center; }
/* none: the whole gesture is the rail's; the list beside it still scrolls by itself. */
.ui-alrail-rail { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; box-sizing: border-box; width: 44px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); touch-action: none; cursor: grab; outline: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ui-alrail-rail:focus-visible .ui-alrail-letters { box-shadow: var(--ui-focus); }
.ui-alrail-letters { display: flex; flex: 1; flex-direction: column; margin: 0 8px; border-radius: 999px; pointer-events: none; }
.ui-alrail-rail[data-on] .ui-alrail-letters { background: color-mix(in srgb, var(--ui-fg) 10%, transparent); }
.ui-alrail-letter { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; color: var(--ui-accent); font: 600 11px/1 var(--ui-font); }
.ui-alrail-letter[data-none] { color: var(--ui-strong); }
.ui-alrail-letter[data-at] { color: var(--ui-accent-fg); }
.ui-alrail-letter[data-at] span { display: grid; place-items: center; min-width: 15px; height: 15px; border-radius: 50%; background: var(--ui-accent); }
.ui-alrail-bubble { position: absolute; top: 0; right: 60px; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; border-radius: 50% 50% 8px 50%; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 30px/1 var(--ui-font); box-shadow: var(--ui-shadow-lg); pointer-events: none; opacity: 0; transition: opacity .12s; }
.ui-alrail-bubble[data-on] { opacity: 1; }
.ui-alrail-bubble[data-none] { background: var(--ui-strong); color: var(--ui-fg); }
@container (min-width: 640px) {
  .ui-alrail-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
@media (hover: hover) { button.ui-alrail-row:hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ui-alrail-bubble { transition: none; } }


.ui-cardstack { display: grid; gap: 14px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); --ui-cardstack-w: min(100cqw - 28px, 340px); --ui-cardstack-h: calc(var(--ui-cardstack-w) / 1.586); --ui-cardstack-gap: 54px; }
/* Each card shows a strip of 54 px, wide enough for a finger; the fan's lean is only a few degrees, as more would take from that. */
.ui-cardstack-deck {
  position: relative; width: var(--ui-cardstack-w); max-width: 100%; margin: 6px auto 0; padding: 0; list-style: none;
  height: calc(var(--ui-cardstack-h) + (var(--ui-cardstack-n) - 1) * var(--ui-cardstack-gap) + 10px); transition: height .26s cubic-bezier(.2, .8, .2, 1);
}
.ui-cardstack-item {
  position: absolute; inset: 0 0 auto 0; z-index: calc(var(--ui-cardstack-i) + 1); transform-origin: 50% 160%;
  transform: translateY(calc(var(--ui-cardstack-i) * var(--ui-cardstack-gap))) rotate(calc(var(--ui-cardstack-lean) * 1.1deg));
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
/* Lifted, it goes to the top, and the others line up below it, a strip each. */
.ui-cardstack-lifted .ui-cardstack-deck { height: calc(var(--ui-cardstack-h) + 10px + (var(--ui-cardstack-n) - 1) * var(--ui-cardstack-gap)); overflow: clip; overflow-clip-margin: 8px; }
.ui-cardstack-lifted .ui-cardstack-item { transform: translateY(calc(var(--ui-cardstack-h) + 10px + var(--ui-cardstack-r) * var(--ui-cardstack-gap))); }
.ui-cardstack-lifted .ui-cardstack-chosen { z-index: 40; transform: none; }
.ui-cardstack-card {
  box-sizing: border-box; position: relative; display: grid; grid-template-rows: auto 1fr auto; width: 100%; height: var(--ui-cardstack-h); padding: 12px 16px; overflow: hidden; border: 0; border-radius: 14px;
  background: var(--ui-cardstack-c, #2b2a3a); background-image: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); color: #fff; box-shadow: 0 2px 10px rgba(15, 14, 24, .3);
  font: 14px/1.3 var(--ui-font); text-align: left; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-cardstack-card:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.ui-cardstack-chosen .ui-cardstack-card { box-shadow: 0 10px 26px rgba(15, 14, 24, .4); }
.ui-cardstack-row { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; pointer-events: none; }
.ui-cardstack-digits { align-self: end; font: 500 17px/1.2 var(--ui-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; pointer-events: none; }
.ui-cardstack-brand { font-size: 13px; opacity: .92; pointer-events: none; }
/* Frost over a frozen card, and the word, as a colour alone says nothing to some. */
.ui-cardstack-frozen .ui-cardstack-card { background-image: linear-gradient(135deg, rgba(190, 225, 255, .55), rgba(190, 225, 255, .25)); }
.ui-cardstack-tag { padding: 0 8px; border-radius: 999px; background: #fff; color: #0b4f8a; font-size: 12px; font-weight: 700; }
.ui-cardstack-panel { display: grid; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-cardstack-panel h3 { margin: 0; font-size: 16px; }
.ui-cardstack-freeze { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-cardstack-freeze:disabled { opacity: .6; cursor: default; }
.ui-cardstack-freeze:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-cardstack-knob { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--ui-strong); transition: background .15s; }
.ui-cardstack-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.ui-cardstack-freeze[aria-checked="true"] .ui-cardstack-knob { background: var(--ui-info); }
.ui-cardstack-freeze[aria-checked="true"] .ui-cardstack-knob::after { transform: translateX(20px); }
.ui-cardstack-fields { display: grid; gap: 2px; margin: 0; }
.ui-cardstack-field { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 6px; min-height: 52px; border-top: 1px solid var(--ui-border); }
.ui-cardstack-field dt { grid-column: 1; grid-row: 1; align-self: end; color: var(--ui-muted); font-size: 12px; }
.ui-cardstack-field dd { grid-column: 1; grid-row: 2; align-self: start; margin: 0; font: 500 15px/1.3 var(--ui-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ui-cardstack-mini { grid-row: 1 / span 2; align-self: center; min-width: 56px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-cardstack-mini:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cardstack-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-cardstack-err { color: var(--ui-danger); }
.ui-cardstack-empty { margin: 0; padding: 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
.ui-cardstack-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Beside each other, on a tablet: the fan keeps its width, and the details take what is left. */
@container (min-width: 620px) {
  .ui-cardstack-lay { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .ui-cardstack-deck { margin: 6px 0 0; }
}
@media (hover: hover) { .ui-cardstack-mini:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-cardstack-item, .ui-cardstack-deck, .ui-cardstack-knob, .ui-cardstack-knob::after { transition: none; } }


.ui-nearby { container-type: inline-size; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-nearby-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ui-nearby-title { flex: 1 1 100%; margin: 0; font-size: 18px; font-weight: 700; }
.ui-nearby-chip {
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-nearby-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-nearby-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nearby-units { display: inline-flex; gap: 4px; margin-left: auto; }
.ui-nearby-say { margin: 0 0 10px; color: var(--ui-muted); font-size: 14px; }
.ui-nearby-say:empty { display: none; }
.ui-nearby-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-nearby-row {
  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; min-height: 72px; padding: 10px 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-nearby-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nearby-row:active { background: var(--ui-subtle); }
.ui-nearby-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-nearby-kind { color: var(--ui-muted); font-size: 13px; }
.ui-nearby-far { grid-column: 2; grid-row: 1; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ui-nearby-walk { grid-column: 2; grid-row: 2; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.ui-nearby-open { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; --t: var(--ui-success); }
.ui-nearby-open::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.ui-nearby-open span { color: var(--ui-muted); font-weight: 400; }
.ui-nearby-open[data-state="soon"] { --t: var(--ui-warning); }
.ui-nearby-open[data-state="closed"] { --t: var(--ui-danger); }
.ui-nearby-empty { padding: 20px 8px; color: var(--ui-muted); text-align: center; }
.ui-nearby-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-nearby { position: relative; }
/* With the room, two columns of rows, and the heading beside its buttons. */
@container (min-width: 620px) {
  .ui-nearby-title { flex: 1 1 auto; }
  .ui-nearby-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-nearby-units { margin-left: 0; }
}
@media (hover: hover) { .ui-nearby-row:hover { border-color: var(--ui-strong); } }


.ui-order-tracker { display: grid; gap: 14px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-order-tracker-eta { margin: 0; font-size: 15px; font-weight: 600; }
.ui-order-tracker-eta span { font-weight: 400; color: var(--ui-muted); }
.ui-order-tracker-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.ui-order-tracker-step { position: relative; flex: 1 1 0; min-width: 0; display: grid; gap: 8px; justify-items: start; padding-right: 12px; }
.ui-order-tracker-step:last-child { flex: none; padding-right: 0; }
.ui-order-tracker-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 34px; right: 8px; height: 2px; border-radius: 2px; background: var(--ui-border); }
.ui-order-tracker-done:not(:last-child)::after { background: var(--ui-success); }
.ui-order-tracker-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); }
.ui-order-tracker-mark svg { width: 14px; height: 14px; }
.ui-order-tracker-done .ui-order-tracker-mark { border-color: var(--ui-success); background: var(--ui-success); color: #fff; }
.ui-order-tracker-current .ui-order-tracker-mark { border-color: var(--ui-accent); color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-order-tracker-current .ui-order-tracker-mark::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-accent); animation: ui-order-tracker-pulse 1.6s ease-in-out infinite; }
.ui-order-tracker-cancelled .ui-order-tracker-mark { border-color: var(--ui-danger); background: var(--ui-danger); color: #fff; box-shadow: none; }
.ui-order-tracker-cancelled .ui-order-tracker-mark::before { display: none; }
@keyframes ui-order-tracker-pulse { 50% { opacity: .35; } }
.ui-order-tracker-text { display: grid; gap: 1px; }
.ui-order-tracker-label { font-weight: 500; }
.ui-order-tracker-coming .ui-order-tracker-label { color: var(--ui-muted); font-weight: 400; }
.ui-order-tracker-cancelled .ui-order-tracker-label { color: var(--ui-danger); }
.ui-order-tracker-at, .ui-order-tracker-hint { font-size: 12px; color: var(--ui-muted); }
.ui-order-tracker-vertical .ui-order-tracker-steps { flex-direction: column; }
.ui-order-tracker-vertical .ui-order-tracker-step { grid-template-columns: 28px 1fr; align-items: start; gap: 12px; padding: 0 0 20px; }
.ui-order-tracker-vertical .ui-order-tracker-step:last-child { padding-bottom: 0; }
.ui-order-tracker-vertical .ui-order-tracker-step:not(:last-child)::after { top: 32px; bottom: 4px; left: 13px; right: auto; width: 2px; height: auto; }
.ui-order-tracker-vertical .ui-order-tracker-text { padding-top: 4px; }
.ui-order-tracker-ship { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-order-tracker-ship a { color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.ui-order-tracker-ship code { font: 13px var(--ui-mono); }
@media (max-width: 600px) { .ui-order-tracker:not(.ui-order-tracker-vertical) .ui-order-tracker-at,
  .ui-order-tracker:not(.ui-order-tracker-vertical) .ui-order-tracker-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-order-tracker-current .ui-order-tracker-mark::before { animation: none; } }


.ui-color-swatches { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-color-swatches-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-color-swatches-req { margin-left: 2px; color: var(--ui-danger); }
.ui-color-swatches-list { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-color-swatches-opt { position: relative; display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.ui-color-swatches-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-color-swatches-chip {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-fg) 18%, transparent); transition: transform .12s, box-shadow .15s;
}
.ui-color-swatches-chip svg { width: 14px; height: 14px; opacity: 0; color: #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); transition: opacity .12s; }
.ui-color-swatches-opt:hover .ui-color-swatches-chip { transform: scale(1.08); }
.ui-color-swatches-opt input:checked + .ui-color-swatches-chip { box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent); }
.ui-color-swatches-opt input:checked + .ui-color-swatches-chip svg { opacity: 1; }
.ui-color-swatches-opt input:focus-visible + .ui-color-swatches-chip { box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent), var(--ui-focus); }
.ui-color-swatches-opt:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.ui-color-swatches-opt:has(input:disabled):hover .ui-color-swatches-chip { transform: none; }
.ui-color-swatches-opt:has(input:disabled) .ui-color-swatches-chip::after {
  content: ""; width: 30px; height: 2px; background: var(--ui-fg); transform: rotate(-45deg); border-radius: 1px;
}
.ui-color-swatches-name { font-size: 12px; color: var(--ui-muted); max-width: 72px; text-align: center; }
.ui-color-swatches-opt input:checked ~ .ui-color-swatches-name { color: var(--ui-fg); font-weight: 500; }
.ui-color-swatches-sm .ui-color-swatches-chip { width: 20px; height: 20px; }
.ui-color-swatches-sm .ui-color-swatches-chip svg { width: 10px; height: 10px; }
.ui-color-swatches-lg .ui-color-swatches-chip { width: 38px; height: 38px; }
.ui-color-swatches-lg .ui-color-swatches-chip svg { width: 18px; height: 18px; }
.ui-color-swatches-invalid .ui-color-swatches-chip { box-shadow: 0 0 0 2px var(--ui-danger); }
.ui-color-swatches-hint, .ui-color-swatches-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-color-swatches-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-color-swatches-chip, .ui-color-swatches-chip svg { transition: none; } }


.ui-dprof { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-dprof .ui-dprof-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-dprof-sum { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-dprof-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-dprof-empty { margin: 0; padding: 20px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-dprof-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-dprof-find { box-sizing: border-box; width: 200px; max-width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-dprof-find:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-dprof-only { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ui-dprof-only input { margin: 0; accent-color: var(--ui-accent); }
.ui-dprof-only input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dprof-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.ui-dprof-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-dprof-warned { border-left: 3px solid var(--ui-warning); }
.ui-dprof-picked { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-dprof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ui-dprof .ui-dprof-name { min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: 600 14px var(--ui-font); overflow-wrap: anywhere; text-align: left; cursor: pointer; }
.ui-dprof-name:hover { color: var(--ui-accent); }
.ui-dprof-name:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-dprof-type { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 600; }
.ui-dprof-meter { height: 5px; overflow: hidden; border-radius: 3px; background: var(--ui-subtle); }
.ui-dprof-meter span { display: block; height: 100%; background: var(--ui-accent); }
.ui-dprof-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 13px; }
.ui-dprof-stats dt { color: var(--ui-muted); }
.ui-dprof-stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-dprof-top { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-dprof-top li { display: flex; justify-content: space-between; gap: 8px; }
.ui-dprof-top span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ui-dprof-top span:last-child { flex: none; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-dprof-warn { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--ui-warning); font-size: 13px; }


.ui-jwt { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-jwt .ui-jwt-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-jwt-field { display: grid; gap: 5px; min-width: 0; }
.ui-jwt-field label { font-size: 13px; font-weight: 500; }
.ui-jwt-field textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); overflow-wrap: anywhere; resize: vertical; }
.ui-jwt-field textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-jwt-field textarea[aria-invalid] { border-color: var(--ui-danger); }
.ui-jwt-unverified { margin: 0; padding: 10px 12px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-weight: 500; }
.ui-jwt-error { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-jwt-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-jwt-warnings { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-jwt-warnings li { padding: 7px 12px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overflow-wrap: anywhere; }
.ui-jwt-warnings .ui-jwt-danger { border-left-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-jwt-scroll { overflow-x: auto; }
.ui-jwt-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jwt table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-jwt caption { padding: 0 0 6px; text-align: left; font-weight: 600; }
.ui-jwt th, .ui-jwt td { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.ui-jwt tbody th { font: 500 13px var(--ui-mono); white-space: nowrap; }
.ui-jwt thead th { color: var(--ui-muted); font-weight: 500; }
.ui-jwt-time { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-jwt-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ui-jwt-part { display: grid; gap: 4px; min-width: 0; align-content: start; }
.ui-jwt-part h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-jwt-part pre { margin: 0; padding: 8px 10px; overflow: auto; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 12px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-jwt-part pre:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-unread-marker { position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-unread-marker-scroll { box-sizing: border-box; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.ui-unread-marker-scroll:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-unread-marker-list { position: relative; box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: 8px 12px 64px; }
.ui-unread-marker-row { position: relative; padding: 3px 0; }
.ui-unread-marker-fresh::before { content: ""; position: absolute; top: 50%; left: -6px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ui-accent); }
.ui-unread-marker-line { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: var(--ui-danger); font-size: 12px; font-weight: 700; line-height: 18px; }
.ui-unread-marker-line::before, .ui-unread-marker-line::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.ui-unread-marker-jump {
  position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px;
  padding: 0 14px; border: 0; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); box-shadow: var(--ui-shadow); font: 600 14px var(--ui-font); cursor: pointer;
}
.ui-unread-marker-jump svg { width: 18px; height: 18px; transition: transform .15s; }
.ui-unread-marker-jump[data-way="up"] svg { transform: rotate(180deg); }
.ui-unread-marker-jump:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@container (min-width: 640px) { .ui-unread-marker-jump { right: 24px; } }
@media (prefers-reduced-motion: reduce) { .ui-unread-marker-jump svg { transition: none; } }


.ui-audio-player {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.3 var(--ui-font);
}
.ui-audio-player-play {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); cursor: pointer; transition: transform .12s;
}
.ui-audio-player-play:hover { transform: scale(1.05); }
.ui-audio-player-play:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-audio-player-play svg { width: 18px; height: 18px; }
.ui-audio-player-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ui-audio-player-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ui-audio-player-artist { color: var(--ui-muted); font-weight: 400; }
.ui-audio-player-row { display: flex; align-items: center; gap: 8px; }
.ui-audio-player-time { flex: none; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-audio-player-seek { flex: 1; min-width: 60px; appearance: none; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.ui-audio-player-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right, var(--ui-accent) var(--f, 0%), var(--ui-subtle) var(--f, 0%)); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-audio-player-seek::-moz-range-track { height: 5px; border-radius: 999px; background: var(--ui-subtle); }
.ui-audio-player-seek::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--ui-accent); }
.ui-audio-player-seek::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4.5px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-accent); }
.ui-audio-player-seek::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-accent); }
.ui-audio-player-seek:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 999px; }
.ui-audio-player-speed {
  flex: none; height: 28px; min-width: 44px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 600 12px/1 var(--ui-font); font-variant-numeric: tabular-nums; cursor: pointer;
}
.ui-audio-player-speed:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-audio-player-speed:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-audio-player-play { transition: none; } }


.ui-avs { display: inline-flex; align-items: center; vertical-align: middle; --s: 40px; }
.ui-avs-xs { --s: 24px; } .ui-avs-sm { --s: 32px; } .ui-avs-lg { --s: 56px; } .ui-avs-xl { --s: 72px; }
.ui-avs-item { position: relative; display: inline-flex; border-radius: 50%; }
.ui-avs-item + .ui-avs-item { margin-left: calc(var(--s) * -.28); }
.ui-avs-item:hover, .ui-avs-item:focus-within { z-index: 2; }
.ui-avs-av {
  position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); overflow: hidden;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--ui-bg); --h: #6e56cf;
  background: color-mix(in srgb, var(--h) 24%, var(--ui-bg)); color: color-mix(in srgb, var(--h) 70%, var(--ui-fg));
  font: 600 calc(var(--s) * .38)/1 var(--ui-font); letter-spacing: .02em; text-decoration: none; user-select: none;
  transition: transform .12s ease;
}
.ui-avs-square .ui-avs-item, .ui-avs-square .ui-avs-av { border-radius: calc(var(--s) * .22); }
a.ui-avs-av:hover { transform: translateY(-2px); }
a.ui-avs-av:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent); }
.ui-avs-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.ui-avs-av img::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--h) 24%, var(--ui-bg)); color: color-mix(in srgb, var(--h) 70%, var(--ui-fg));
  font: 600 calc(var(--s) * .38)/1 var(--ui-font); }
.ui-avs-c0 { --h: #e5484d; } .ui-avs-c1 { --h: #f76b15; } .ui-avs-c2 { --h: #ad7f00; }
.ui-avs-c3 { --h: #30a46c; } .ui-avs-c4 { --h: #12a594; } .ui-avs-c5 { --h: #0090ff; }
.ui-avs-c6 { --h: #6e56cf; } .ui-avs-c7 { --h: #d6409f; }
.ui-avs-more { background: var(--ui-subtle); color: var(--ui-muted); font-size: calc(var(--s) * .32); }
.ui-avs-more[tabindex]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent); }
.ui-avs-tip { position: absolute; z-index: 50; bottom: calc(100% + 8px); left: 50%; display: none; width: max-content;
  max-width: min(220px, 70vw); padding: 5px 8px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg);
  box-shadow: var(--ui-shadow); font: 500 12px/1.4 var(--ui-font); text-align: center; transform: translateX(-50%); pointer-events: none; }
.ui-avs-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin: -4px 0 0 -4px; width: 8px; height: 8px;
  background: inherit; transform: rotate(45deg); }
.ui-avs-item:hover > .ui-avs-tip, .ui-avs-item:focus-within > .ui-avs-tip { display: block; }
@media (hover: none) { .ui-avs-item:hover:not(:focus-within) > .ui-avs-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-avs-av { transition: none; } }


.ui-note-editor { position: relative; container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--ui-fg); font: 16px/1.5 var(--ui-font); background: var(--ui-surface); }
.ui-note-editor-frame { display: flex; flex: 1; min-height: 0; }
.ui-note-editor-paper { flex: 1; min-width: 0; min-height: 0; padding: 10px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.ui-note-editor-title { box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin: 0 0 4px; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 600 20px/1.3 var(--ui-font); }
.ui-note-editor-status { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 6px; color: var(--ui-muted); font-size: 13px; }
.ui-note-editor-status[data-bad] { min-height: 44px; color: var(--ui-danger); }
.ui-note-editor-retry { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font: 600 14px/1 var(--ui-font); cursor: pointer; }
/* One grid cell holds both copies: the drawn one sets the height, so the box grows with the text and never scrolls by itself. */
.ui-note-editor-stack { position: relative; display: grid; min-height: 12em; }
.ui-note-editor-draw, .ui-note-editor-input { box-sizing: border-box; grid-area: 1 / 1; width: 100%; margin: 0; padding: 0; border: 0; font: 16px/1.5 var(--ui-font); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; tab-size: 4; }
.ui-note-editor-draw { z-index: 2; color: var(--ui-fg); pointer-events: none; }
.ui-note-editor-input { z-index: 1; height: 100%; min-height: 100%; overflow: hidden; resize: none; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ui-fg); }
.ui-note-editor-input::placeholder { color: var(--ui-muted); -webkit-text-fill-color: var(--ui-muted); opacity: 1; }
.ui-note-editor-input::selection { background: color-mix(in srgb, var(--ui-accent) 30%, transparent); }
.ui-note-editor-line { min-height: 1.5em; }
/* Weight and size would move the words away from the caret, so strength is drawn with a shadow and colour. */
.ui-note-editor-line[data-kind="h1"], .ui-note-editor-line[data-kind="h2"], .ui-note-editor-line[data-kind="h3"] { color: var(--ui-accent); text-shadow: .35px 0 currentColor; }
.ui-note-editor-line[data-kind="quote"] { color: var(--ui-muted); }
.ui-note-editor-line[data-kind="done"] .ui-note-editor-rest { color: var(--ui-muted); text-decoration: line-through; }
.ui-note-editor-strong { text-shadow: .35px 0 currentColor; }
.ui-note-editor-code { color: var(--ui-info); }
.ui-note-editor-prefix { position: relative; color: var(--ui-strong); }
.ui-note-editor-line[data-kind="check"] .ui-note-editor-prefix, .ui-note-editor-line[data-kind="done"] .ui-note-editor-prefix { color: transparent; }
.ui-note-editor-tick { position: absolute; left: -12px; top: calc(.75em - 22px); display: grid; place-items: center; width: 44px; height: 44px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-note-editor-tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); cursor: pointer; }
.ui-note-editor-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex: none; gap: 2px; padding: 2px 4px max(2px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-subtle); }
/* The tools scroll on a narrow phone; Done stands outside them, as the way out of the keyboard must always show. */
.ui-note-editor-tools { display: flex; flex: 1; gap: 2px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ui-note-editor-tools::-webkit-scrollbar { display: none; }
.ui-note-editor[data-up="1"] .ui-note-editor-bar { position: fixed; left: 0; right: 0; bottom: var(--ui-note-editor-kb, 0px); padding-bottom: 2px; }
.ui-note-editor-tool { display: grid; flex: none; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 600 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-note-editor-tool:disabled { color: var(--ui-strong); cursor: default; }
.ui-note-editor-tool:focus-visible, .ui-note-editor-jump:focus-visible, .ui-note-editor-retry:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-note-editor-tool svg { width: 20px; height: 20px; }
.ui-note-editor-side { display: none; }
/* A tablet has room for the note's shape, and its toolbar sits above the text. */
@container (min-width: 640px) {
  .ui-note-editor-bar { order: -1; position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--ui-border); }
  .ui-note-editor-paper { padding: 16px 24px; }
  .ui-note-editor-side { display: block; flex: 0 0 min(30%, 260px); padding: 14px 12px; overflow-y: auto; border-left: 1px solid var(--ui-border); background: var(--ui-subtle); font-size: 14px; }
  .ui-note-editor-side h3 { margin: 0 0 6px; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
  .ui-note-editor-side ul { margin: 0 0 14px; padding: 0; list-style: none; }
  .ui-note-editor-side p { margin: 0 0 4px; color: var(--ui-muted); }
  .ui-note-editor-jump { display: block; width: 100%; min-height: 44px; padding: 0 8px 0 calc(8px + var(--depth, 0) * 12px); overflow: hidden; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1.2 var(--ui-font); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
}
@media (hover: hover) {
  .ui-note-editor-tool:hover:not(:disabled), .ui-note-editor-jump:hover { background: var(--ui-border); }
}


.demo-over { display: grid; gap: 12px; align-content: start; height: 100%; box-sizing: border-box; padding: 18px 20px; font: 15px/1.6 var(--ui-font); }
.demo-over h4 { margin: 0; font-size: 20px; }
.demo-over input { box-sizing: border-box; width: min(320px, 100%); height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }
.demo-over-note { margin: 0 0 10px; }


.ui-tfeed { display: grid; gap: 8px; min-width: 0; font: 13px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-tfeed-bar { display: flex; align-items: center; gap: 10px; color: var(--ui-muted); font-size: 12px; }
.ui-tfeed-bar span { margin-right: auto; }
.ui-tfeed-pause { height: 26px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-tfeed-pause:hover { border-color: var(--ui-strong); }
.ui-tfeed-pause:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tfeed-pause[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-tfeed-box { max-height: var(--h); overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-tfeed-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-tfeed-table th { position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.ui-tfeed-table td { padding: 4px 10px; text-align: right; white-space: nowrap; }
.ui-tfeed-table th:first-child, .ui-tfeed-table td:first-child { text-align: left; }
.ui-tfeed-time { color: var(--ui-muted); }
.ui-tfeed-buy { --k: var(--ui-success); } .ui-tfeed-sell { --k: var(--ui-danger); }
.ui-tfeed-price { color: var(--k); font-weight: 600; }
.ui-tfeed-tick { display: inline-block; width: 10px; color: var(--ui-muted); font-size: 10px; }
.ui-tfeed-large td { background: color-mix(in srgb, var(--k) 10%, transparent); font-weight: 650; }
.ui-tfeed-large td:first-child { box-shadow: inset 3px 0 0 var(--k); }
.ui-tfeed-new td { animation: ui-tfeed-flash 1s ease-out; }
@keyframes ui-tfeed-flash { from { background: color-mix(in srgb, var(--k) 30%, transparent); } }
.ui-tfeed-empty td { padding: 18px; color: var(--ui-muted); text-align: center !important; }
@media (prefers-reduced-motion: reduce) { .ui-tfeed-new td { animation: none; } }


.ui-repayment { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-repayment-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-border); }
.ui-repayment-sum > div { padding: 12px 14px; background: var(--ui-surface); }
.ui-repayment-sum dt { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-repayment-sum dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-repayment-sum dd small { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-repayment-sum .ui-repayment-alarm dd { color: var(--ui-danger); }
.ui-repayment-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-repayment table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-repayment th, .ui-repayment td { padding: 10px 14px; text-align: left; vertical-align: middle; white-space: nowrap; }
.ui-repayment thead th { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ui-subtle); border-bottom: 1px solid var(--ui-border); }
.ui-repayment tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-repayment .ui-repayment-num { text-align: right; }
.ui-repayment tbody th { color: var(--ui-muted); font-weight: 500; }
.ui-repayment-row-paid td { color: var(--ui-muted); }
.ui-repayment-row-overdue { background: color-mix(in srgb, var(--ui-danger-soft) 60%, transparent); }
.ui-repayment-row-next { box-shadow: inset 3px 0 0 var(--ui-accent); }
.ui-repayment-row-overdue.ui-repayment-row-next { box-shadow: inset 3px 0 0 var(--ui-danger); }
.ui-repayment-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--ui-subtle); color: var(--ui-muted); }
.ui-repayment-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-repayment-paid { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-repayment-due { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-repayment-overdue { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-repayment-extra { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; }
.ui-repayment-penalty { color: var(--ui-danger); font-weight: 600; }
.ui-repayment form { margin: 0; }
.ui-repayment-pay { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 13px var(--ui-font); font-variant-numeric: tabular-nums; cursor: pointer; }
.ui-repayment-row-overdue .ui-repayment-pay { background: var(--ui-danger); color: #fff; }
.ui-repayment-pay:hover { filter: brightness(1.08); }
.ui-repayment-pay:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-repayment-more { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-reply-box { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-reply-box-avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 650; user-select: none;
}
.ui-reply-box-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-reply-box-main { display: grid; flex: 1; gap: 8px; min-width: 0; }
.ui-reply-box-input {
  display: block; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; resize: none; field-sizing: content;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px/1.45 var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-reply-box-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-reply-box-input:hover { border-color: var(--ui-strong); }
.ui-reply-box-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-reply-box-input:disabled { opacity: .55; cursor: not-allowed; }
.ui-reply-box-open .ui-reply-box-input { min-height: calc(var(--ui-reply-box-rows, 3) * 1.45em + 18px); }
.ui-reply-box-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ui-reply-box-actions[hidden] { display: none; }
.ui-reply-box-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-reply-box-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-reply-box-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-reply-box-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reply-box-cancel { background: transparent; border-color: var(--ui-border); color: var(--ui-fg); }
.ui-reply-box-cancel:hover { background: var(--ui-subtle); }
@media (prefers-reduced-motion: reduce) { .ui-reply-box-input { transition: none; } }


.ui-shortcuts-dialog-host { display: contents; }
.ui-shortcuts-dialog {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.45 var(--ui-font);
}
.ui-shortcuts-dialog[open] { display: flex; flex-direction: column; animation: ui-shortcuts-dialog-in .16s ease-out; }
.ui-shortcuts-dialog::backdrop { background: var(--ui-overlay); }
@keyframes ui-shortcuts-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-shortcuts-dialog-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 16px 18px 12px; border-bottom: 1px solid var(--ui-border); }
.ui-shortcuts-dialog-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.ui-shortcuts-dialog-find {
  width: 200px; height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1 var(--ui-font);
}
.ui-shortcuts-dialog-find:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-shortcuts-dialog-x {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-shortcuts-dialog-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-shortcuts-dialog-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-shortcuts-dialog-x svg { width: 18px; height: 18px; }
.ui-shortcuts-dialog-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px 32px; min-height: 0; overflow: auto; padding: 16px 18px 20px; }
.ui-shortcuts-dialog-group h3 { margin: 0 0 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-shortcuts-dialog-group dl { display: grid; margin: 0; }
.ui-shortcuts-dialog-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--ui-border); }
.ui-shortcuts-dialog-row:last-child { border-bottom: 0; }
.ui-shortcuts-dialog-row dt { min-width: 0; }
.ui-shortcuts-dialog-row dd { display: inline-flex; flex: none; align-items: center; gap: 4px; margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-shortcuts-dialog kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; border: 1px solid var(--ui-border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--ui-subtle); color: var(--ui-fg); font: 500 12px/1.4 var(--ui-font); text-align: center;
}
.ui-shortcuts-dialog-empty { margin: 0; padding: 24px 0; color: var(--ui-muted); text-align: center; grid-column: 1 / -1; }
@media (max-width: 520px) { .ui-shortcuts-dialog-find { width: 130px; } }
@media (prefers-reduced-motion: reduce) { .ui-shortcuts-dialog[open] { animation: none; } }


.ui-reminder { container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-reminder-inner { display: grid; gap: 14px; }
.ui-reminder-about { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.ui-reminder-part { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-reminder-part legend { padding: 0; margin-bottom: 6px; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-reminder-choices { display: grid; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-reminder-choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-reminder-choice + .ui-reminder-choice { border-top: 1px solid var(--ui-border); }
.ui-reminder-choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }
.ui-reminder-choice:has(input:disabled) { color: var(--ui-muted); cursor: default; }
.ui-reminder-choice:has(input:focus-visible) { box-shadow: inset var(--ui-focus); }
.ui-reminder-name { flex: 1; min-width: 0; font-weight: 500; }
.ui-reminder-hint { flex: none; color: var(--ui-muted); font-size: 14px; }
.ui-reminder-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ui-reminder-field { display: grid; gap: 4px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
.ui-reminder-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font); appearance: none; -webkit-appearance: none; }
select.ui-reminder-input { appearance: auto; -webkit-appearance: auto; }
.ui-reminder-input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-reminder-step { display: flex; align-items: center; gap: 4px; }
.ui-reminder-step button { display: grid; flex: none; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 20px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-reminder-step button:disabled { color: var(--ui-strong); cursor: default; }
.ui-reminder-step span { flex: 1; min-width: 44px; color: var(--ui-fg); font-size: 16px; text-align: center; }
.ui-reminder-step button:focus-visible, .ui-reminder-day:focus-visible, .ui-reminder-set:focus-visible, .ui-reminder-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reminder-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ui-reminder-day { min-width: 0; min-height: 46px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-reminder-day[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-reminder-say { margin: 0; padding: 12px 14px; border-radius: var(--ui-radius); background: var(--ui-accent-soft); overflow-wrap: anywhere; }
.ui-reminder-say[data-bad] { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-reminder-next { margin: 6px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-reminder-next:empty { display: none; }
.ui-reminder-end { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-reminder-set, .ui-reminder-clear { flex: 1; min-height: 46px; padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-reminder-set:disabled { background: var(--ui-subtle); color: var(--ui-muted); cursor: default; }
.ui-reminder-clear { flex: 0 0 auto; background: var(--ui-danger-soft); color: var(--ui-danger); }
/* A tablet has the room to show both questions at once. */
@container (min-width: 600px) {
  .ui-reminder-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .ui-reminder-about, .ui-reminder-told, .ui-reminder-end { grid-column: 1 / -1; }
  .ui-reminder-end { justify-content: flex-end; }
  .ui-reminder-set { flex: 0 0 auto; min-width: 200px; }
}
@media (hover: hover) {
  .ui-reminder-choice:hover { background: var(--ui-subtle); }
}


.ui-swipeback {
  position: relative; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior-x: contain; touch-action: pan-y pinch-zoom;
  background: var(--ui-subtle); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); container-type: inline-size;
}
.ui-swipeback-behind, .ui-swipeback-front { position: absolute; inset: 0; }
.ui-swipeback-behind { visibility: hidden; overflow: hidden; background: var(--ui-bg); }
.ui-swipeback-on .ui-swipeback-behind { visibility: visible; will-change: transform; }
.ui-swipeback-scrim { position: absolute; inset: 0; opacity: 0; background: var(--ui-overlay); pointer-events: none; }
.ui-swipeback-front { display: flex; flex-direction: column; background: var(--ui-bg); }
.ui-swipeback-on .ui-swipeback-front { will-change: transform; box-shadow: var(--ui-shadow-lg); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-swipeback-settling .ui-swipeback-front, .ui-swipeback-settling .ui-swipeback-behind { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.ui-swipeback-settling .ui-swipeback-scrim { transition: opacity .26s cubic-bezier(.2, .8, .2, 1); }
.ui-swipeback-bar {
  display: flex; flex: none; align-items: center; gap: 2px; min-height: 48px; padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-swipeback-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-swipeback-back {
  display: inline-flex; flex: none; align-items: center; min-width: 44px; height: 44px; padding: 0 8px 0 4px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: inherit; cursor: pointer;
}
.ui-swipeback-back svg { width: 26px; height: 26px; }
.ui-swipeback-back:dir(rtl) svg { transform: scaleX(-1); }
.ui-swipeback-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-swipeback-back:hover { background: var(--ui-subtle); } }
/* pan-y: the page keeps up and down; what goes sideways comes to the handlers here. Said again on the scroller, as it stops counting at one. */
.ui-swipeback-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
@media (prefers-reduced-motion: reduce) {
  .ui-swipeback-settling .ui-swipeback-front, .ui-swipeback-settling .ui-swipeback-behind, .ui-swipeback-settling .ui-swipeback-scrim { transition: none; }
}


.ui-text-compare { display: grid; gap: 14px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-text-compare-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-text-compare-field { display: grid; gap: 4px; min-width: 0; }
.ui-text-compare-field label { font-size: 13px; font-weight: 500; }
.ui-text-compare-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 8px 10px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-text-compare-field textarea:hover { border-color: var(--ui-strong); }
.ui-text-compare-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-text-compare-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-text-compare-options label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ui-text-compare-options input { margin: 0; accent-color: var(--ui-accent); }
.ui-text-compare-options input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-text-compare-said { margin: 0; font-weight: 600; }
.ui-text-compare-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-text-compare-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 0; }
.ui-text-compare-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-text-compare-stats dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-text-compare-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-text-compare-panel { max-height: 360px; overflow: auto; margin: 0; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-text-compare-panel:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-text-compare-panel del { background: var(--ui-danger-soft); color: var(--ui-danger); text-decoration: line-through; }
.ui-text-compare-panel ins { background: var(--ui-success-soft); color: var(--ui-success); text-decoration: none; }
.ui-text-compare-space { outline: 1px dotted currentColor; }


.ui-fck { --t: var(--ui-muted); display: grid; gap: 14px; max-width: 640px; margin: 0; padding: 20px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-fck-t0 { --t: var(--ui-success); }
.ui-fck-t1 { --t: color-mix(in srgb, var(--ui-success) 55%, var(--ui-warning)); }
.ui-fck-t2 { --t: var(--ui-warning); }
.ui-fck-t3 { --t: color-mix(in srgb, var(--ui-warning) 45%, var(--ui-danger)); }
.ui-fck-t4 { --t: var(--ui-danger); }
.ui-fck-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
.ui-fck-kicker svg { width: 16px; height: 16px; color: var(--ui-accent); }
.ui-fck-claim { display: grid; gap: 6px; margin: 0; }
.ui-fck-claim blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--ui-strong); font-size: 19px; line-height: 1.4; font-weight: 600; }
.ui-fck-claim figcaption { padding-left: 17px; color: var(--ui-muted); font-size: 13px; }
.ui-fck-claim figcaption b { color: var(--ui-fg); font-weight: 650; }
.ui-fck-verdict { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--t) 10%, var(--ui-surface)); }
.ui-fck-said { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui-fck-rating { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--t); font-size: 26px; line-height: 1.1; font-weight: 800; }
.ui-fck-badge { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--t); color: var(--ui-bg); font-size: 18px; }
.ui-fck-scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ui-fck-scale li { display: grid; gap: 4px; min-width: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.2; text-align: center; }
.ui-fck-scale li::before { content: ""; height: 6px; border-radius: 3px; background: var(--ui-border); }
.ui-fck-scale li.ui-fck-on { color: var(--ui-fg); font-weight: 700; }
.ui-fck-scale li.ui-fck-on::before { height: 10px; margin-top: -2px; background: var(--t); }
.ui-fck-found { display: grid; gap: 4px; }
.ui-fck .ui-fck-found h3 { margin: 0; font-size: 14px; font-weight: 700; }
.ui-fck-found > div > :first-child { margin-top: 0; }
.ui-fck-found > div > :last-child { margin-bottom: 0; }
.ui-fck-sources summary { color: var(--ui-fg); font-size: 14px; font-weight: 600; cursor: pointer; }
.ui-fck-sources summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-fck-sources ul { margin: 8px 0 0; padding-left: 20px; color: var(--ui-muted); font-size: 14px; }
.ui-fck-sources a { color: var(--ui-accent); }
.ui-fck-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px;
  border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; }
.ui-fck-more { color: var(--ui-accent); font-size: 14px; font-weight: 650; text-decoration: none; }
.ui-fck-more:hover { text-decoration: underline; }
.ui-fck a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }


.ui-sample-size-calc { display: grid; gap: 16px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-sample-size-calc .ui-sample-size-calc-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-sample-size-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ui-sample-size-calc-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.ui-sample-size-calc-field input, .ui-sample-size-calc-field select { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-sample-size-calc-field input:hover, .ui-sample-size-calc-field select:hover { border-color: var(--ui-strong); }
.ui-sample-size-calc-field input:focus, .ui-sample-size-calc-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sample-size-calc-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-sample-size-calc-kind { display: flex; flex-wrap: wrap; gap: 4px 14px; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; font-size: 13px; }
.ui-sample-size-calc-kind legend { float: left; margin-right: 8px; padding: 0; }
.ui-sample-size-calc-kind label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-sample-size-calc-kind input { margin: 0; accent-color: var(--ui-accent); }
.ui-sample-size-calc-live { display: grid; gap: 12px; min-width: 0; }
.ui-sample-size-calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ui-sample-size-calc-out div { min-width: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-sample-size-calc-out dt { color: var(--ui-muted); font-size: 12px; }
.ui-sample-size-calc-out dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-sample-size-calc-how { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); font-size: 12px; }
.ui-sample-size-calc-how code { color: var(--ui-fg); font: 12px/1.5 var(--ui-mono); overflow-wrap: anywhere; }
.ui-sample-size-calc-note { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-sample-size-calc-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 520px) { .ui-sample-size-calc-grid, .ui-sample-size-calc-out { grid-template-columns: minmax(0, 1fr); } }


.ui-number-pad { container-type: inline-size; min-width: 0; font: 16px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-number-pad-body { display: grid; gap: 12px; min-width: 0; }
.ui-number-pad-figure {
  display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; min-height: 64px; padding: 8px 14px; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 600 32px/1.2 var(--ui-mono); overflow-wrap: anywhere;
}
.ui-number-pad-empty { color: var(--ui-muted); }
.ui-number-pad-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; width: 100%; margin-inline: auto; padding-bottom: env(safe-area-inset-bottom); }
/* pan-y: the page still scrolls from here, but two thumbs on the keys cannot zoom it. */
.ui-number-pad-key {
  display: grid; place-items: center; min-height: 60px; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 26px/1 var(--ui-font); cursor: pointer;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ui-number-pad-key:active { background: var(--ui-subtle); }
.ui-number-pad-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-number-pad-key:disabled { opacity: .5; cursor: not-allowed; }
/* A finger resting on delete must not turn into a scroll that ends the hold. */
.ui-number-pad-back { touch-action: none; background: var(--ui-subtle); }
.ui-number-pad-back svg { width: 26px; height: 26px; }
.ui-number-pad-blank { min-height: 60px; }
.ui-number-pad-note { grid-column: 1 / -1; margin: 0; color: var(--ui-muted); font-size: 13px; text-align: center; }
@media (hover: hover) { .ui-number-pad-key:hover:not(:disabled) { border-color: var(--ui-strong); } }
@container (min-width: 440px) {
  .ui-number-pad-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 20px; }
  .ui-number-pad-figure { min-height: 120px; font-size: 40px; }
}


.ui-text-field { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-text-field-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-text-field-req { margin-left: 2px; color: var(--ui-danger); }
.ui-text-field-box {
  display: flex; align-items: center; height: 38px; padding: 0 12px; gap: 8px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.ui-text-field-box:hover { border-color: var(--ui-strong); }
.ui-text-field-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-text-field-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font);
}
.ui-text-field-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-text-field-affix { flex: none; color: var(--ui-muted); white-space: nowrap; user-select: none; }
.ui-text-field-sm .ui-text-field-box { height: 30px; padding: 0 10px; }
.ui-text-field-sm .ui-text-field-box input { font-size: 13px; }
.ui-text-field-invalid .ui-text-field-box, .ui-text-field-invalid .ui-text-field-box:hover { border-color: var(--ui-danger); }
.ui-text-field-invalid .ui-text-field-box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.ui-text-field-hint, .ui-text-field-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-text-field-error { color: var(--ui-danger); }
.ui-text-field-disabled { opacity: .55; }
.ui-text-field-disabled .ui-text-field-box, .ui-text-field-disabled input { cursor: not-allowed; }
.ui-text-field-disabled .ui-text-field-box:hover { border-color: var(--ui-border); }
@media (prefers-reduced-motion: reduce) { .ui-text-field-box { transition: none; } }


.ui-lvc { display: grid; gap: 8px; min-width: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-lvc-up { --k: var(--ui-success); } .ui-lvc-down { --k: var(--ui-danger); }
.ui-lvc-read { display: flex; flex-wrap: wrap; gap: 2px 12px; min-height: 18px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-lvc-read b { color: var(--ui-fg); font-weight: 600; }
.ui-lvc-read .ui-lvc-up b, .ui-lvc-read .ui-lvc-down b { color: var(--k); }
.ui-lvc-read .ui-lvc-when { color: var(--ui-fg); font-weight: 600; }
.ui-lvc-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.ui-lvc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-danger); animation: ui-lvc-pulse 1.2s ease-in-out infinite; }
@keyframes ui-lvc-pulse { 50% { opacity: .3; } }
.ui-lvc-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 10px; }
.ui-lvc-plot { position: relative; outline: none; cursor: crosshair; }
.ui-lvc-plot:focus-visible { box-shadow: var(--ui-focus); }
.ui-lvc-pane { position: relative; height: var(--h); }
.ui-lvc-vpane { position: relative; height: 48px; margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-lvc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-lvc-cols { position: absolute; inset: 0; display: flex; }
.ui-lvc-col { position: relative; flex: 1; min-width: 0; }
.ui-lvc-cp { position: relative; height: var(--h); }
.ui-lvc-cv { position: relative; height: 48px; margin-top: 8px; }
.ui-lvc-wick { position: absolute; left: 50%; width: 1px; margin-left: -.5px; background: var(--k); transition: top .2s, height .2s; }
.ui-lvc-body { position: absolute; left: 16%; right: 16%; min-height: 1px; border-radius: 1px; background: var(--k); transition: top .2s, height .2s; }
.ui-lvc-vol { position: absolute; bottom: 0; left: 16%; right: 16%; min-height: 1px; background: var(--k); opacity: .35; transition: height .2s; }
.ui-lvc-open .ui-lvc-body { box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 30%, transparent); }
.ui-lvc-hover { background: color-mix(in srgb, var(--ui-subtle) 80%, transparent); }
.ui-lvc-hover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--ui-muted); }
.ui-lvc-last { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); transition: top .2s; pointer-events: none; }
.ui-lvc-y { position: relative; }
.ui-lvc-y > div { position: relative; height: var(--h); }
.ui-lvc-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lvc-y .ui-lvc-tag { z-index: 1; left: -4px; display: grid; padding: 1px 5px; border-radius: 3px; background: var(--k); color: var(--ui-bg);
  font-weight: 600; line-height: 1.25; transition: top .2s; }
.ui-lvc-tag small { font-size: 10px; font-weight: 500; opacity: .85; }
.ui-lvc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-lvc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lvc-empty { display: grid; place-items: center; height: var(--h); border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) {
  .ui-lvc-wick, .ui-lvc-body, .ui-lvc-vol, .ui-lvc-last, .ui-lvc-y .ui-lvc-tag { transition: none; }
  .ui-lvc-live::before { animation: none; }
}


.ui-nps-input { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-nps-input-legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
.ui-nps-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-nps-input-scores { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.ui-nps-input-opt { position: relative; display: block; cursor: pointer; }
.ui-nps-input-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-nps-input-score {
  display: grid; place-items: center; height: 38px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font-weight: 500; font-variant-numeric: tabular-nums;
  --t: var(--ui-accent); --ts: var(--ui-accent-soft); transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ui-nps-input-tones .ui-nps-input-detractor .ui-nps-input-score { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-nps-input-tones .ui-nps-input-passive .ui-nps-input-score { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-nps-input-tones .ui-nps-input-promoter .ui-nps-input-score { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-nps-input-opt:hover .ui-nps-input-score { border-color: var(--t); background: var(--ts); }
.ui-nps-input-opt input:checked + .ui-nps-input-score { border-color: var(--t); background: var(--t); color: #fff; }
.ui-nps-input-opt input:focus-visible + .ui-nps-input-score { box-shadow: var(--ui-focus); }
.ui-nps-input-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-nps-input-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--ui-muted); }
.ui-nps-input-invalid .ui-nps-input-score { border-color: var(--ui-danger); }
.ui-nps-input-hint, .ui-nps-input-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-nps-input-error { color: var(--ui-danger); }
@media (max-width: 480px) { .ui-nps-input-score { height: 32px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .ui-nps-input-score { transition: none; } }


.ui-txl { display: grid; gap: 12px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-txl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ui-txl-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-txl-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.ui-txl-search svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; }
.ui-txl-search input { width: 100%; height: 34px; padding: 0 10px 0 30px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); outline: none; transition: border-color .15s, box-shadow .15s; }
.ui-txl-search input:hover { border-color: var(--ui-strong); }
.ui-txl-search input:focus { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-txl-days { display: grid; gap: 14px; }
.ui-txl-day { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; }
.ui-txl-dayhead { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 14px; background: var(--ui-subtle);
  border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.ui-txl-daynet { font-variant-numeric: tabular-nums; }
.ui-txl-rows { margin: 0; padding: 0; list-style: none; }
.ui-txl-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ui-txl-row + .ui-txl-row { border-top: 1px solid var(--ui-border); }
.ui-txl-what { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ui-txl-desc { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-txl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ui-muted); font-size: 12px; }
.ui-txl-cat { padding: 0 7px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-fg); font-size: 11px; font-weight: 500; line-height: 18px; }
.ui-txl-pending-tag { padding: 0 7px; border: 1px dashed var(--ui-warning); border-radius: 999px; color: var(--ui-warning); font-size: 11px; font-weight: 600; line-height: 17px; }
.ui-txl-money { display: grid; flex: none; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; }
.ui-txl-amount { font-weight: 600; }
.ui-txl-in .ui-txl-amount { color: var(--ui-success); }
.ui-txl-pending .ui-txl-amount { color: var(--ui-muted); font-style: italic; }
.ui-txl-after { color: var(--ui-muted); font-size: 12px; }
.ui-txl-empty { margin: 0; padding: 28px 14px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ui-txl-search input { transition: none; } }


.pull-down-menu-demo-title { margin: 0; font-size: 19px; font-weight: 700; }
.pull-down-menu-demo-list { margin: 0; padding: 0 16px; list-style: none; }
.pull-down-menu-demo-list li { padding: 14px 0; border-bottom: 1px solid var(--ui-border); }


.ui-pull-down-menu { position: relative; container-type: inline-size; container-name: ui-pull-down-menu; }
.ui-pull-down-menu-head {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 4px 0 16px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.4 var(--ui-font);
  /* Sideways stays the page's, and on browsers that know pan-down, so does a push upward. iOS does not, and keeps the first. */
  touch-action: pan-x; touch-action: pan-x pan-down; -webkit-touch-callout: none; user-select: none;
}
.ui-pull-down-menu-title { flex: 1; min-width: 0; }
.ui-pull-down-menu-title > :first-child { margin-top: 0; }
.ui-pull-down-menu-title > :last-child { margin-bottom: 0; }
.ui-pull-down-menu-button {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: inherit;
}
@media (hover: hover) { .ui-pull-down-menu-button:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-pull-down-menu-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pull-down-menu-button svg { width: 20px; height: 20px; transition: transform .2s; }
.ui-pull-down-menu-showing .ui-pull-down-menu-button svg { transform: rotate(180deg); }
.ui-pull-down-menu-panel {
  position: absolute; inset: 100% 0 auto 0; z-index: 1; max-height: 70dvh; overflow: auto; border-radius: 0 0 calc(var(--ui-radius) + 4px) calc(var(--ui-radius) + 4px);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-12px);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .16s; overscroll-behavior: contain;
}
.ui-pull-down-menu-showing .ui-pull-down-menu-panel { opacity: 1; pointer-events: auto; transform: none; }
.ui-pull-down-menu-row {
  display: block; box-sizing: border-box; width: 100%; min-height: 50px; padding: 8px 16px; border: 0; background: transparent; color: var(--ui-fg);
  font: 16px/1.3 var(--ui-font); text-align: left; cursor: pointer;
}
.ui-pull-down-menu-row + .ui-pull-down-menu-row { border-top: 1px solid var(--ui-border); }
.ui-pull-down-menu-danger { color: var(--ui-danger); }
.ui-pull-down-menu-row:disabled { color: var(--ui-muted); opacity: .6; cursor: not-allowed; }
.ui-pull-down-menu-over, .ui-pull-down-menu-row:active:not(:disabled) { background: var(--ui-subtle); }
@media (hover: hover) { .ui-pull-down-menu-row:hover:not(:disabled) { background: var(--ui-subtle); } }
.ui-pull-down-menu-row:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
@container ui-pull-down-menu (min-width: 600px) {
  .ui-pull-down-menu-panel { inset: calc(100% + 6px) 8px auto auto; width: 300px; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px); }
}
@media (prefers-reduced-motion: reduce) { .ui-pull-down-menu-panel, .ui-pull-down-menu-button svg { transition: none; } }


.ui-treemap {
  --ui-treemap-1: light-dark(#2a78d6, #3987e5); --ui-treemap-2: light-dark(#eb6834, #d95926);
  --ui-treemap-3: light-dark(#1baf7a, #199e70); --ui-treemap-4: light-dark(#eda100, #c98500);
  --ui-treemap-5: light-dark(#e87ba4, #d55181); --ui-treemap-6: light-dark(#008300, #008300);
  --ui-treemap-7: light-dark(#6250d6, #9085e9); --ui-treemap-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-treemap-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-treemap-s1 { --c: var(--ui-treemap-1); } .ui-treemap-s2 { --c: var(--ui-treemap-2); } .ui-treemap-s3 { --c: var(--ui-treemap-3); }
.ui-treemap-s4 { --c: var(--ui-treemap-4); } .ui-treemap-s5 { --c: var(--ui-treemap-5); } .ui-treemap-s6 { --c: var(--ui-treemap-6); }
.ui-treemap-s7 { --c: var(--ui-treemap-7); } .ui-treemap-s8 { --c: var(--ui-treemap-8); }
.ui-treemap-box { position: relative; width: 100%; }
.ui-treemap-group { position: absolute; display: flex; flex-direction: column; padding: 1px; }
.ui-treemap-gname { flex: none; height: 20px; padding: 2px 5px 0; overflow: hidden; color: var(--ui-fg);
  font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-treemap-gname span { margin-left: 6px; color: var(--ui-muted); font-weight: 400; }
.ui-treemap-body { position: relative; flex: 1; }
.ui-treemap-tile { position: absolute; border: 1px solid var(--ui-bg); border-radius: 4px;
  background: color-mix(in srgb, var(--c) var(--k, 100%), var(--ui-bg)); color: #fff; container-type: size; }
.ui-treemap-tile:hover { z-index: 5; filter: brightness(1.08); outline: 2px solid var(--ui-fg); outline-offset: -1px; }
.ui-treemap-text { display: grid; align-content: start; gap: 1px; height: 100%; padding: 5px 7px; overflow: hidden; }
.ui-treemap-text b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-treemap-text span { overflow: hidden; opacity: .9; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 54px) or (max-height: 34px) { .ui-treemap-text span { display: none; } }
@container (max-width: 36px) or (max-height: 22px) { .ui-treemap-text { display: none; } }
.ui-treemap-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-treemap-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-treemap-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-treemap-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-treemap-tip { top: 6px; left: 6px; }
.ui-treemap-tile:hover .ui-treemap-tip { display: block; }
.ui-treemap-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-treemap-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-treemap-legend b { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-treemap-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }


.ui-tooltip { position: relative; display: inline-flex; vertical-align: middle; }
.ui-tooltip-tip {
  position: absolute; z-index: 50; display: none; width: max-content; max-width: min(240px, 70vw); padding: 6px 9px;
  border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); box-shadow: var(--ui-shadow);
  font: 500 12px/1.4 var(--ui-font); text-align: center; white-space: normal;
  --ui-tooltip-gap: 8px;
}
.ui-tooltip-tip::before { content: ""; position: absolute; inset: calc(-1 * var(--ui-tooltip-gap)); }
.ui-tooltip-tip::after { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.ui-tooltip:hover > .ui-tooltip-tip, .ui-tooltip:focus-within > .ui-tooltip-tip {
  display: block; animation: ui-tooltip-in .12s ease-out .15s both;
}
@keyframes ui-tooltip-in { from { opacity: 0; translate: var(--ui-tooltip-from); } }
.ui-tooltip-top > .ui-tooltip-tip { bottom: calc(100% + var(--ui-tooltip-gap)); left: 50%; transform: translateX(-50%); --ui-tooltip-from: 0 4px; }
.ui-tooltip-bottom > .ui-tooltip-tip { top: calc(100% + var(--ui-tooltip-gap)); left: 50%; transform: translateX(-50%); --ui-tooltip-from: 0 -4px; }
.ui-tooltip-left > .ui-tooltip-tip { right: calc(100% + var(--ui-tooltip-gap)); top: 50%; transform: translateY(-50%); --ui-tooltip-from: 4px 0; }
.ui-tooltip-right > .ui-tooltip-tip { left: calc(100% + var(--ui-tooltip-gap)); top: 50%; transform: translateY(-50%); --ui-tooltip-from: -4px 0; }
.ui-tooltip-top > .ui-tooltip-tip::after { top: 100%; left: 50%; margin: -4px 0 0 -4px; }
.ui-tooltip-bottom > .ui-tooltip-tip::after { bottom: 100%; left: 50%; margin: 0 0 -4px -4px; }
.ui-tooltip-left > .ui-tooltip-tip::after { left: 100%; top: 50%; margin: -4px 0 0 -4px; }
.ui-tooltip-right > .ui-tooltip-tip::after { right: 100%; top: 50%; margin: -4px -4px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .ui-tooltip:hover > .ui-tooltip-tip, .ui-tooltip:focus-within > .ui-tooltip-tip { animation: none; }
}
@media (hover: none) { .ui-tooltip:hover:not(:focus-within) > .ui-tooltip-tip { display: none; } }


.ui-setlist { position: relative; container-type: inline-size; box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; background: var(--ui-subtle); background: light-dark(var(--ui-subtle), var(--ui-bg)); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-setlist-search { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: inherit; }
.ui-setlist-field { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 10px; border-radius: var(--ui-radius); background: color-mix(in srgb, var(--ui-fg) 9%, transparent); color: var(--ui-muted); }
.ui-setlist-field svg { flex: none; width: 18px; height: 18px; }
/* 16 px: iOS zooms the page into any field with a smaller font. */
.ui-setlist-input { flex: 1; width: 0; min-height: 44px; padding: 0 6px; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }
.ui-setlist-input::-webkit-search-cancel-button { display: none; }
.ui-setlist-field:focus-within { box-shadow: var(--ui-focus); }
.ui-setlist-clear { flex: none; min-width: 60px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ui-accent); font: 500 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-setlist-found { min-height: 18px; margin: 0; padding: 0 28px 4px; color: var(--ui-muted); font-size: 13px; }
.ui-setlist-split { display: block; }
.ui-setlist-side { display: none; }
.ui-setlist-groups { min-width: 0; padding: 4px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.ui-setlist-group { margin: 0 0 22px; }
.ui-setlist-title { margin: 10px 16px 6px; color: var(--ui-muted); font: 500 13px/1.3 var(--ui-font); letter-spacing: .02em; text-transform: uppercase; }
.ui-setlist-rows { margin: 0; padding: 0; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-surface); background: light-dark(var(--ui-surface), var(--ui-subtle)); list-style: none; }
.ui-setlist-note { margin: 6px 16px 0; color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }
.ui-setlist-row { position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 14px 8px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; }
li + li > .ui-setlist-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--ui-border); }
a.ui-setlist-row, button.ui-setlist-row, label.ui-setlist-row { cursor: pointer; touch-action: manipulation; }
a.ui-setlist-row:active, button.ui-setlist-row:active, label.ui-setlist-row:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
.ui-setlist-row:focus-visible, .ui-setlist-row:has(:focus-visible) { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); border-radius: var(--ui-radius); }
.ui-setlist-off { opacity: .5; }
.ui-setlist-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-setlist-detail { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 13px; }
.ui-setlist-value { flex: 0 1 auto; max-width: 50%; color: var(--ui-muted); text-align: right; overflow-wrap: anywhere; }
.ui-setlist-chevron { flex: none; width: 8px; height: 14px; color: var(--ui-strong); }
/* The real control lies over the whole row, unseen: a press anywhere on the row is a press on it. */
.ui-setlist-check, .ui-setlist-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-setlist-select { font-size: 16px; }
.ui-setlist-check:disabled, .ui-setlist-select:disabled { cursor: default; }
.ui-setlist-track { position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px; background: var(--ui-strong); transition: background .16s; }
.ui-setlist-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .16s; }
.ui-setlist-check:checked + .ui-setlist-track { background: var(--ui-success); }
.ui-setlist-check:checked + .ui-setlist-track::after { transform: translateX(20px); }
.ui-setlist-none { margin: 40px 16px; color: var(--ui-muted); text-align: center; }
@container (min-width: 640px) {
  .ui-setlist-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .ui-setlist-side { position: sticky; top: 8px; display: grid; gap: 2px; margin: 0; padding: 8px 0 8px 16px; list-style: none; }
  .ui-setlist-search ~ .ui-setlist-split .ui-setlist-side { top: 64px; }
  .ui-setlist-jump { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: 500 15px/1.3 var(--ui-font); text-align: left; cursor: pointer; }
  .ui-setlist-jump:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
  .ui-setlist-jump[aria-current="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
  .ui-setlist-jump:focus-visible { outline: none; box-shadow: var(--ui-focus); }
}
@media (hover: hover) { a.ui-setlist-row:hover, button.ui-setlist-row:hover, label.ui-setlist-row:hover { background: color-mix(in srgb, var(--ui-fg) 5%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ui-setlist-track, .ui-setlist-track::after { transition: none; } }


.ui-sprint-planner { display: grid; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-sprint-planner .ui-sprint-planner-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-sprint-planner-team { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-sprint-planner-team legend { padding: 0 0 4px; font-size: 13px; font-weight: 600; }
.ui-sprint-planner-off { display: grid; gap: 3px; font-size: 13px; }
.ui-sprint-planner-off input { box-sizing: border-box; width: 88px; padding: 5px 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-sprint-planner-off input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sprint-planner-off input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-sprint-planner-meter { display: grid; gap: 4px; }
.ui-sprint-planner-figures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sprint-planner-used, .ui-sprint-planner-left { white-space: nowrap; }
.ui-sprint-planner-bar { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ui-subtle); }
.ui-sprint-planner-bar i { display: block; height: 100%; background: var(--ui-accent); }
.ui-sprint-planner-full .ui-sprint-planner-figures { color: var(--ui-danger); }
.ui-sprint-planner-full .ui-sprint-planner-bar i { background: var(--ui-danger); }
.ui-sprint-planner-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-sprint-planner-warnings { display: grid; gap: 2px; margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; list-style: none; }
.ui-sprint-planner-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ui-sprint-planner-list { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 80px; padding: 10px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); }
.ui-sprint-planner-list h4 { margin: 0; font-size: 13px; font-weight: 650; }
.ui-sprint-planner-list ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-sprint-planner-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-size: 13px; cursor: grab; }
.ui-sprint-planner-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ui-sprint-planner-meta { color: var(--ui-muted); font-size: 12px; }
.ui-sprint-planner-why { grid-column: 1 / -1; color: var(--ui-warning); font-size: 12px; overflow-wrap: anywhere; }
.ui-sprint-planner-btn { padding: 4px 9px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1.2 var(--ui-font); cursor: pointer; }
.ui-sprint-planner-btn:hover { border-color: var(--ui-accent); }
.ui-sprint-planner-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sprint-planner-fit { justify-self: start; border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; padding: 7px 12px; }
.ui-sprint-planner-said { min-height: 1.4em; margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-testimonial-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 22px 24px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.6 var(--ui-font); }
.ui-testimonial-card-plain { padding: 0; border: 0; background: none; }
.ui-testimonial-card-mark { width: 28px; height: 28px; color: var(--ui-accent); opacity: .5; }
.ui-testimonial-card-stars { display: inline-flex; gap: 2px; color: var(--ui-warning); }
.ui-testimonial-card-stars svg { width: 16px; height: 16px; }
.ui-testimonial-card-stars .ui-testimonial-card-off { color: var(--ui-border); }
.ui-testimonial-card-quote { flex: 1; margin: 0; }
.ui-testimonial-card-quote p { margin: 0; }
.ui-testimonial-card-large .ui-testimonial-card-quote { font-size: 20px; line-height: 1.5; font-weight: 450; letter-spacing: -.005em; }
.ui-testimonial-card-who { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; }
.ui-testimonial-card-name { font-weight: 600; }
.ui-testimonial-card-role { color: var(--ui-muted); font-size: 13px; }
.ui-testimonial-card-logo { max-width: 110px; max-height: 28px; margin-left: auto; object-fit: contain; }


.ui-auth-form { width: 100%; max-width: 400px; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-auth-form-card { padding: 28px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-auth-form-title { margin: 0 0 4px; font-size: 22px; font-weight: 650; line-height: 1.25; outline: none; }
.ui-auth-form-lead { margin: 0 0 18px; color: var(--ui-muted); }
.ui-auth-form-head { margin-bottom: 18px; }
.ui-auth-form-head .ui-auth-form-lead { margin: 0; }
.ui-auth-form-msg { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--ui-radius-sm); font-size: 13px; }
.ui-auth-form-msg-error { background: var(--ui-danger-soft); color: var(--ui-danger); border: 1px solid color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.ui-auth-form-msg-notice { background: var(--ui-success-soft); color: var(--ui-success); border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent); }
.ui-auth-form-providers { display: grid; gap: 8px; }
.ui-auth-form-provider {
  display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font-weight: 500; text-decoration: none; transition: border-color .15s, background .15s;
}
.ui-auth-form-provider:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-auth-form-provider:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-auth-form-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ui-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ui-auth-form-or::before, .ui-auth-form-or::after { content: ""; flex: 1; height: 1px; background: var(--ui-border); }
.ui-auth-form-form { display: grid; gap: 14px; margin: 0; }
.ui-auth-form-field { display: grid; gap: 6px; }
.ui-auth-form-labels { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-auth-form-labels label { font-size: 13px; font-weight: 500; }
.ui-auth-form-opt { margin-left: 4px; color: var(--ui-muted); font-weight: 400; }
.ui-auth-form-input {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
.ui-auth-form-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-auth-form-input:hover { border-color: var(--ui-strong); }
.ui-auth-form-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-auth-form-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-auth-form-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.ui-auth-form-code { font-family: var(--ui-mono); letter-spacing: .2em; }
.ui-auth-form-pw { position: relative; display: flex; align-items: center; }
.ui-auth-form-pw .ui-auth-form-input { padding-right: 44px; }
.ui-auth-form-pw .ui-auth-form-input::-ms-reveal { display: none; }
.ui-auth-form-eye {
  position: absolute; right: 5px; display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-auth-form-eye svg { width: 18px; height: 18px; }
.ui-auth-form-eye:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-auth-form-eye:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-auth-form-hint, .ui-auth-form-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-auth-form-error { color: var(--ui-danger); }
.ui-auth-form-meter { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: var(--ui-muted); }
.ui-auth-form-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: 1; max-width: 160px; }
.ui-auth-form-bars span { height: 4px; border-radius: 2px; background: var(--ui-border); transition: background .2s; }
.ui-auth-form-weak .ui-auth-form-bars span:nth-child(1) { background: var(--ui-danger); }
.ui-auth-form-fair .ui-auth-form-bars span:nth-child(-n+2) { background: var(--ui-warning); }
.ui-auth-form-strong .ui-auth-form-bars span { background: var(--ui-success); }
.ui-auth-form-weak .ui-auth-form-word { color: var(--ui-danger); }
.ui-auth-form-fair .ui-auth-form-word { color: var(--ui-warning); }
.ui-auth-form-strong .ui-auth-form-word { color: var(--ui-success); }
.ui-auth-form-check { display: flex; align-items: flex-start; gap: 9px; width: fit-content; cursor: pointer; font-size: 13px; }
.ui-auth-form-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ui-accent); cursor: pointer; }
.ui-auth-form-check input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-auth-form-check input[aria-invalid="true"] { outline: 2px solid var(--ui-danger); outline-offset: 1px; border-radius: 3px; }
.ui-auth-form-check a, .ui-auth-form-link {
  padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer; border-radius: 3px;
}
.ui-auth-form-check a:hover, .ui-auth-form-link:hover { text-decoration: underline; }
.ui-auth-form-check a:focus-visible, .ui-auth-form-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-auth-form-labels .ui-auth-form-link { font-size: 13px; }
.ui-auth-form-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin-top: 4px;
  border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px var(--ui-font); cursor: pointer; transition: background .15s, box-shadow .15s;
}
.ui-auth-form-submit:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-auth-form-submit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-auth-form-submit[aria-busy="true"] { opacity: .75; cursor: progress; }
.ui-auth-form-spin { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-auth-form-spin .7s linear infinite; }
@keyframes ui-auth-form-spin { to { transform: rotate(360deg); } }
.ui-auth-form-foot { margin: 18px 0 0; color: var(--ui-muted); text-align: center; }
@media (max-width: 420px) { .ui-auth-form-card { padding: 20px 16px; } }
@media (prefers-reduced-motion: reduce) { .ui-auth-form-input, .ui-auth-form-bars span { transition: none; } .ui-auth-form-spin { animation-duration: 2s; } }


.ui-fxstr { box-sizing: border-box; display: grid; gap: 10px; width: 100%; min-width: 0; max-width: 520px; padding: 16px 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 13px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-fxstr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ui-fxstr .ui-fxstr-title { margin: 0; font-size: 15px; font-weight: 650; }
.ui-fxstr-period { color: var(--ui-muted); font-size: 12px; }
.ui-fxstr-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-fxstr-item { display: grid; grid-template-columns: 22px 96px minmax(60px, 1fr) 64px; align-items: center; gap: 10px; }
.ui-fxstr-rank { color: var(--ui-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-fxstr-code b { font-weight: 650; }
.ui-fxstr-code small { display: block; overflow: hidden; color: var(--ui-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ui-fxstr-track { position: relative; height: 12px; border-radius: 3px; background: var(--ui-subtle); }
.ui-fxstr-split .ui-fxstr-track::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--ui-strong); }
.ui-fxstr-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--k); }
.ui-fxstr-up { --k: var(--ui-success); } .ui-fxstr-down { --k: var(--ui-danger); } .ui-fxstr-level { --k: var(--ui-accent); }
.ui-fxstr-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k); }
.ui-fxstr-level .ui-fxstr-value { color: var(--ui-fg); }
.ui-fxstr-empty { margin: 0; color: var(--ui-muted); }
@media (max-width: 420px) { .ui-fxstr-item { grid-template-columns: 18px 48px minmax(40px, 1fr) 56px; } .ui-fxstr-code small { display: none; } }


.ui-section { padding-block: 40px; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-section-none { padding-block: 0; }
.ui-section-sm { padding-block: 20px; }
.ui-section-lg { padding-block: 72px; }
.ui-section-subtle { background: var(--ui-subtle); }
.ui-section-in { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.ui-section-size-sm { max-width: 640px; }
.ui-section-size-md { max-width: 860px; }
.ui-section-size-full { max-width: none; }
.ui-section-flush { padding-inline: 0; }
@media (min-width: 640px) { .ui-section-in:not(.ui-section-flush) { padding-inline: 24px; } }
.ui-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.ui-section-title { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.ui-section-desc { max-width: 60ch; margin: 6px 0 0; color: var(--ui-muted); }
.ui-section-actions { display: flex; flex: none; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.ui-section-center { text-align: center; }
.ui-section-center .ui-section-head { flex-direction: column; align-items: center; }
.ui-section-center .ui-section-desc { margin-inline: auto; }
.ui-section-center .ui-section-actions { justify-content: center; }
.ui-section-body > :first-child { margin-top: 0; }
.ui-section-body > :last-child { margin-bottom: 0; }
@media (max-width: 599px) { .ui-section-head { flex-direction: column; } .ui-section-title { font-size: 21px; } }


.ui-wfallc { --ui-wfallc-total: light-dark(#2a78d6, #3987e5); --ui-wfallc-up: light-dark(#1baf7a, #199e70);
  --ui-wfallc-down: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-wfallc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-wfallc-total { --c: var(--ui-wfallc-total); } .ui-wfallc-up { --c: var(--ui-wfallc-up); } .ui-wfallc-down { --c: var(--ui-wfallc-down); }
.ui-wfallc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-wfallc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-wfallc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-wfallc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 10px; }
.ui-wfallc-y { position: relative; min-width: 24px; }
.ui-wfallc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-wfallc-plot { position: relative; }
.ui-wfallc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-wfallc-grid.ui-wfallc-zero { background: var(--ui-strong); }
.ui-wfallc-cols { position: absolute; inset: 0; display: flex; }
.ui-wfallc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-wfallc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-wfallc-step { position: absolute; left: 50%; width: 100%; bottom: var(--l); border-top: 1px dashed var(--ui-muted); }
.ui-wfallc-bar { position: absolute; left: 50%; bottom: var(--a); width: min(48px, 62%); height: var(--b); min-height: 1px;
  background: var(--c); border-radius: 3px; transform: translateX(-50%); }
.ui-wfallc-val { position: absolute; left: 50%; bottom: calc(var(--a) + var(--b) + 3px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-wfallc-val.ui-wfallc-under { bottom: auto; top: calc(100% - var(--a) + 3px); }
.ui-wfallc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 140px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-wfallc-col:first-child .ui-wfallc-tip { left: 0; transform: translateY(-100%); }
.ui-wfallc-col:last-child .ui-wfallc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-wfallc-col:hover .ui-wfallc-tip { display: block; }
.ui-wfallc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-wfallc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-wfallc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-wfallc-x { display: flex; margin-top: 6px; }
.ui-wfallc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-wfallc-x .ui-wfallc-sum { color: var(--ui-fg); font-weight: 600; }


.ui-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .4em; font: 600 15px/1.2 var(--ui-font); color: var(--ui-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-price-now { font-size: 1em; }
.ui-price-old { font-weight: 400; font-size: .85em; color: var(--ui-muted); text-decoration: line-through; }
.ui-price-off { display: inline-flex; align-items: center; height: 1.4em; padding: 0 .45em; border-radius: 999px; font-size: .72em; font-weight: 600; color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-price-sm { font-size: 13px; }
.ui-price-lg { font-size: 20px; }
.ui-price-xl { font-size: 28px; letter-spacing: -.01em; }
.ui-price-accent .ui-price-now { color: var(--ui-accent); }
.ui-price-danger .ui-price-now { color: var(--ui-danger); }


.ui-qa { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-qa-min, 130px), 100%), 1fr)); font: 14px/1.3 var(--ui-font); }
.ui-qa-cols { grid-template-columns: repeat(var(--ui-qa-cols), minmax(0, 1fr)); }
.ui-qa-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 104px;
  padding: 16px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: inherit; text-align: center; text-decoration: none; cursor: pointer; --t: var(--ui-accent); --ts: var(--ui-accent-soft);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.ui-qa-item:hover { border-color: var(--t); box-shadow: var(--ui-shadow); transform: translateY(-1px); }
.ui-qa-item:focus-visible { outline: none; border-color: var(--t); box-shadow: var(--ui-focus); }
.ui-qa-item:disabled, .ui-qa-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ui-qa-neutral { --t: var(--ui-fg); --ts: var(--ui-subtle); }
.ui-qa-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-qa-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-qa-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-qa-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-qa-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ts); color: var(--t); font-size: 22px; line-height: 1; }
.ui-qa-icon svg { width: 22px; height: 22px; }
.ui-qa-label { font-weight: 600; }
.ui-qa-hint { color: var(--ui-muted); font-size: 12px; }
@media (max-width: 559px) { .ui-qa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ui-qa-item { transition: none; } .ui-qa-item:hover { transform: none; } }


.ui-stylus-canvas { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; min-height: 320px; container-type: inline-size;
  color: var(--ui-fg); background: var(--ui-subtle); font: 14px/1.4 var(--ui-font); }
.ui-stylus-canvas-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ui-stylus-canvas-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: none; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-stylus-canvas-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ui-stylus-canvas-group + .ui-stylus-canvas-group { padding-left: 6px; border-left: 1px solid var(--ui-border); }
.ui-stylus-canvas-btn { min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-stylus-canvas-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-stylus-canvas-btn:disabled { color: var(--ui-muted); opacity: .55; cursor: default; }
.ui-stylus-canvas-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stylus-canvas-swatch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; cursor: pointer; }
.ui-stylus-canvas-swatch[aria-pressed="true"] { border-color: var(--ui-accent); }
.ui-stylus-canvas-swatch:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stylus-canvas-swatch span { width: 24px; height: 24px; border: 1px solid var(--ui-border); border-radius: 50%; }
.ui-stylus-canvas-zoom { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ui-muted); }
@media (hover: hover) { .ui-stylus-canvas-btn:not(:disabled):hover, .ui-stylus-canvas-swatch:hover { background: var(--ui-subtle); } }
.ui-stylus-canvas-view { position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none; touch-action: none; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.ui-stylus-canvas-view:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-stylus-canvas-page { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--ui-fg); }
.ui-stylus-canvas-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; min-height: 28px; padding: 4px max(10px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); font-size: 13px; }
.ui-stylus-canvas-save { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ui-accent); font-weight: 500; }
/* With the width of a turned tablet the tools stand down the side, and the page keeps its height. */
@container (min-width: 1000px) {
  .ui-stylus-canvas-body { flex-direction: row; }
  .ui-stylus-canvas-bar { flex-direction: column; flex-wrap: nowrap; width: 108px; overflow-y: auto; padding: 8px 6px; border-right: 1px solid var(--ui-border); border-bottom: 0; }
  .ui-stylus-canvas-group { justify-content: center; }
  .ui-stylus-canvas-group + .ui-stylus-canvas-group { padding: 6px 0 0; border-top: 1px solid var(--ui-border); border-left: 0; }
}


.ui-ldots { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; font: 14px/1.4 var(--ui-font);
  color: var(--ui-muted); --t: var(--ui-accent); --d: 7px; }
.ui-ldots-row { display: inline-flex; align-items: center; gap: calc(var(--d) * .6); height: calc(var(--d) * 2.6); }
.ui-ldots-dot { width: var(--d); height: var(--d); border-radius: 50%; background: var(--t);
  animation: ui-ldots-bounce 1.2s ease-in-out infinite; }
.ui-ldots-dot:nth-child(2) { animation-delay: .15s; }
.ui-ldots-dot:nth-child(3) { animation-delay: .3s; }
.ui-ldots-sm { --d: 5px; font-size: 13px; }
.ui-ldots-lg { --d: 10px; font-size: 15px; }
.ui-ldots-neutral { --t: var(--ui-muted); }
.ui-ldots-success { --t: var(--ui-success); }
.ui-ldots-warning { --t: var(--ui-warning); }
.ui-ldots-danger { --t: var(--ui-danger); }
.ui-ldots-info { --t: var(--ui-info); }
.ui-ldots-current { --t: currentColor; color: inherit; }
@keyframes ui-ldots-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(calc(var(--d) * -.8)); opacity: 1; } }
@keyframes ui-ldots-fade { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-ldots-dot { animation-name: ui-ldots-fade; animation-duration: 2s; } }


.ui-mread { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-mread h3 { margin: 0; font-size: 18px; }
.ui-mread-cols { display: grid; gap: 12px; min-width: 0; }
.ui-mread-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ui-mread-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 6px 12px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 15px var(--ui-font); text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-mread-row[aria-current="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-mread-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mread-row small { color: var(--ui-muted); font: 500 13px var(--ui-mono); overflow-wrap: anywhere; }
.ui-mread-row[data-state="odd"] small, .ui-mread-row[data-state="skipped"] small { color: var(--ui-fg); }
.ui-mread-entry { display: grid; gap: 10px; min-width: 0; }
.ui-mread-meter { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overflow-wrap: anywhere; }
.ui-mread-meter b { font-size: 17px; }
.ui-mread-meter span { color: var(--ui-muted); font-size: 14px; }
.ui-mread-field { display: grid; gap: 2px; color: var(--ui-muted); font-size: 13px; }
.ui-mread-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
/* 16 px and over: anything smaller and iOS zooms the page when the field is touched. */
.ui-mread-box input { box-sizing: border-box; width: 100%; height: 64px; padding: 0 12px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 700 28px var(--ui-mono); text-align: right; }
.ui-mread-box input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-mread-note { box-sizing: border-box; width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }
.ui-mread-note:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-mread-unit { color: var(--ui-fg); font-size: 17px; font-weight: 600; }
.ui-mread-said { display: grid; gap: 6px; margin: 0; padding: 8px 12px; border-left: 6px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; }
.ui-mread-said[hidden] { display: none; }
.ui-mread-said[data-status="ok"] { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-mread-said[data-status="odd"] { border-color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-mread-said[data-status="bad"] { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-mread-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ui-mread-key { display: grid; place-items: center; min-height: 64px; padding: 0; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 700 24px var(--ui-mono); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ui-mread-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mread-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-mread-acts > * { flex: 1 1 130px; }
.ui-mread-skip { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-mread-skip > * { flex: 1 1 130px; }
.ui-mread-sum { margin: 0; font-weight: 600; }
.ui-mread-done { display: grid; gap: 6px; padding: 12px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius); }
.ui-mread-done h4 { margin: 0; font-size: 17px; }
.ui-mread-done p { margin: 0; }
@media (hover: hover) { .ui-mread-key:hover { background: var(--ui-subtle); } }
@container (min-width: 640px) {
  .ui-mread-cols { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
}
@container (min-width: 960px) {
  .ui-mread-entry { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .ui-mread-pad { grid-column: 2; grid-row: 1 / span 6; }
}


.ui-roompick { display: grid; gap: 12px; min-width: 0; margin: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-roompick-room { display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); }
.ui-roompick-room:has(.ui-roompick-on) { border-color: var(--ui-accent); }
.ui-roompick-bare { grid-template-columns: 1fr; }
.ui-roompick-media { position: relative; min-height: 150px; background: var(--ui-subtle); }
.ui-roompick-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-roompick-body { display: grid; align-content: start; min-width: 0; }
.ui-roompick-about { display: grid; gap: 5px; padding: 14px 16px 10px; }
.ui-roompick-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ui-roompick .ui-roompick-name { margin: 0; font-size: 16px; font-weight: 650; }
.ui-roompick-left { padding: 1px 8px; border-radius: 999px; background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 12px; font-weight: 600; }
.ui-roompick-facts { color: var(--ui-muted); font-size: 13px; }
.ui-roompick-feats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-roompick-feats li { padding: 1px 8px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-muted); font-size: 12px; }
.ui-roompick-rates { margin: 0; padding: 0; list-style: none; }
.ui-roompick-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: 10px 16px;
  border-top: 1px solid var(--ui-border); }
.ui-roompick-on { background: color-mix(in srgb, var(--ui-accent-soft) 50%, var(--ui-surface)); }
.ui-roompick-terms { display: grid; gap: 2px; min-width: 0; }
.ui-roompick-terms b { font-weight: 600; }
.ui-roompick-perks { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.ui-roompick-yes { color: var(--ui-success); font-weight: 600; }
.ui-roompick-yes::before { content: "✓ "; }
.ui-roompick-no { color: var(--ui-muted); }
.ui-roompick-note { color: var(--ui-muted); font-size: 12px; }
.ui-roompick-price { display: grid; justify-items: end; gap: 1px; text-align: right; }
.ui-roompick-old { color: var(--ui-danger); font-size: 12px; text-decoration: line-through; }
.ui-roompick-night { font-size: 17px; font-weight: 700; white-space: nowrap; }
.ui-roompick-night small { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-roompick-stay { color: var(--ui-muted); font-size: 12px; }
.ui-roompick-count { display: flex; align-items: center; gap: 8px; }
.ui-roompick-count output { min-width: 18px; font-size: 15px; font-weight: 650; text-align: center; }
.ui-roompick-step { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); font: 17px/1 var(--ui-font); cursor: pointer; }
.ui-roompick-step:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-roompick-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-roompick-step:disabled { opacity: .35; cursor: not-allowed; }
.ui-roompick-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-roompick-sum { display: grid; gap: 1px; }
.ui-roompick-sum span { color: var(--ui-muted); font-size: 13px; }
.ui-roompick-sum output { font-size: 20px; font-weight: 700; }
.ui-roompick-go { height: 40px; padding: 0 22px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 15px var(--ui-font); cursor: pointer; }
.ui-roompick-go:hover:not(:disabled) { filter: brightness(1.08); }
.ui-roompick-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-roompick-go:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .ui-roompick-room { grid-template-columns: 1fr; }
  .ui-roompick-media { min-height: 0; aspect-ratio: 16 / 9; }
  .ui-roompick-rate { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-roompick-price { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; }
  .ui-roompick-count { grid-column: 2; grid-row: 1 / span 2; }
}


.ui-reaction-picker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; font: 500 13px/1 var(--ui-font); }
.ui-reaction-picker-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.ui-reaction-picker-chip:hover { background: var(--ui-subtle); border-color: var(--ui-strong); }
.ui-reaction-picker-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reaction-picker-chip[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); color: var(--ui-accent); }
.ui-reaction-picker-chip:active { transform: scale(.96); }
.ui-reaction-picker-emoji { font-size: 16px; line-height: 1; }
.ui-reaction-picker-add { padding: 0 9px; color: var(--ui-muted); }
.ui-reaction-picker-add svg { width: 16px; height: 16px; }
.ui-reaction-picker-menu {
  display: flex; flex-wrap: wrap; gap: 2px; width: max-content; max-width: min(280px, calc(100vw - 16px)); margin: auto; padding: 6px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-reaction-picker-choice {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; font-size: 20px; line-height: 1; cursor: pointer;
}
.ui-reaction-picker-choice:hover { background: var(--ui-subtle); }
.ui-reaction-picker-choice:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reaction-picker-menu:popover-open { animation: ui-reaction-picker-in .12s ease-out; }
@keyframes ui-reaction-picker-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-reaction-picker-menu { inset: auto; margin: 4px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }
}
@supports not (position-area: bottom) { .ui-reaction-picker-menu::backdrop { background: var(--ui-overlay); } }
.ui-reaction-picker-sm .ui-reaction-picker-chip { height: 26px; padding: 0 8px 0 7px; font-size: 12px; }
.ui-reaction-picker-sm .ui-reaction-picker-emoji { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .ui-reaction-picker-chip { transition: none; } .ui-reaction-picker-menu:popover-open { animation: none; } }


.ui-datalist { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); container-type: inline-size; }
.ui-datalist-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.ui-datalist-lines .ui-datalist-row + .ui-datalist-row { border-top: 1px solid var(--ui-border); }
.ui-datalist-pic { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent); font: 700 11px/1 var(--ui-font); letter-spacing: .03em; }
.ui-datalist-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-datalist-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ui-datalist-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ui-datalist-title { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.ui-datalist-title a { color: inherit; text-decoration: none; }
.ui-datalist-title a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-datalist-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-datalist-badge { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; --t: var(--ui-muted);
  color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); }
.ui-datalist-accent { --t: var(--ui-accent); }
.ui-datalist-success { --t: var(--ui-success); }
.ui-datalist-warning { --t: var(--ui-warning); }
.ui-datalist-danger { --t: var(--ui-danger); }
.ui-datalist-info { --t: var(--ui-info); }
.ui-datalist-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-datalist-meta li + li::before { content: "·"; margin: 0 7px; }
.ui-datalist-desc { margin: 2px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-datalist-actions { flex: none; display: flex; gap: 6px; }
.ui-datalist-act { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font);
  text-decoration: none; cursor: pointer; }
.ui-datalist-act:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-datalist-act:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-datalist-act.ui-datalist-danger { color: var(--ui-danger); }
.ui-datalist-act.ui-datalist-danger:hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-datalist-empty { padding: 28px 16px; color: var(--ui-muted); text-align: center; }
@container (max-width: 480px) {
  .ui-datalist-row { flex-wrap: wrap; }
  .ui-datalist-actions { width: 100%; padding-left: 54px; }
}


.ui-duration-input { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-duration-input-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-duration-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-duration-input-box {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; height: 38px; padding: 0 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-duration-input-box:hover { border-color: var(--ui-strong); }
.ui-duration-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-duration-input-part { display: inline-flex; align-items: baseline; gap: 2px; }
.ui-duration-input-part input {
  width: 2.4ch; min-width: 0; height: 28px; padding: 0 3px; border: 0; border-radius: 4px; outline: none; background: transparent;
  color: var(--ui-fg); font: 500 15px var(--ui-mono); text-align: right; font-variant-numeric: tabular-nums; box-sizing: content-box;
}
.ui-duration-input-part input:focus { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-duration-input-part input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-duration-input-wide input { width: 3.4ch; }
.ui-duration-input-unit { color: var(--ui-muted); font-size: 13px; margin-right: 6px; user-select: none; }
.ui-duration-input-part:last-child .ui-duration-input-unit { margin-right: 0; }
.ui-duration-input-invalid .ui-duration-input-box { border-color: var(--ui-danger); }
.ui-duration-input:disabled .ui-duration-input-box { opacity: .55; }
.ui-duration-input-hint, .ui-duration-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-duration-input-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-duration-input-box { transition: none; } }


.ui-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-pagination-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px;
  padding: 0 10px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
a.ui-pagination-link:hover { background: var(--ui-subtle); border-color: var(--ui-border); }
.ui-pagination-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pagination-link[aria-current="page"] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-pagination-link[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ui-pagination-gap { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 24px; color: var(--ui-muted); }
.ui-pagination-arrow { width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.ui-pagination-next .ui-pagination-arrow { transform: rotate(-135deg); }
.ui-pagination-sm .ui-pagination-link { min-width: 30px; height: 30px; padding: 0 8px; font-size: 13px; }
@media (max-width: 600px) {
  .ui-pagination ul { gap: 2px; }
  .ui-pagination .ui-pagination-link { min-width: 30px; padding: 0 4px; }
  .ui-pagination-gap { min-width: 16px; }
  .ui-pagination-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ui-pagination-link { transition: none; } }


.ui-invoice-builder { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 860px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-invoice-builder .ui-invoice-builder-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-invoice-builder-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
.ui-invoice-builder-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-invoice-builder-field > label, .ui-invoice-builder-field > span { font-size: 13px; font-weight: 500; }
.ui-invoice-builder-field input, .ui-invoice-builder-field select, .ui-invoice-builder-cell input { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  font-variant-numeric: tabular-nums; }
.ui-invoice-builder-field input:hover, .ui-invoice-builder-field select:hover, .ui-invoice-builder-cell input:hover { border-color: var(--ui-strong); }
.ui-invoice-builder-field input:focus, .ui-invoice-builder-field select:focus, .ui-invoice-builder-cell input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-invoice-builder input[aria-invalid] { border-color: var(--ui-danger); }
.ui-invoice-builder-due { display: flex; align-items: center; height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-invoice-builder-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-invoice-builder-row, .ui-invoice-builder-labels { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) 34px; gap: 8px; align-items: center; }
.ui-invoice-builder-labels { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-invoice-builder-cell { display: grid; gap: 3px; min-width: 0; }
.ui-invoice-builder-cell label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-invoice-builder-amount { min-width: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-invoice-builder-end { text-align: right; }
.ui-invoice-builder-drop { width: 34px; height: 34px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-muted); font: 16px var(--ui-font); cursor: pointer; }
.ui-invoice-builder-drop:hover { border-color: var(--ui-strong); color: var(--ui-danger); }
.ui-invoice-builder-drop:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
@container (max-width: 600px) {
  .ui-invoice-builder-labels { display: none; }
  .ui-invoice-builder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid var(--ui-border); }
  .ui-invoice-builder-cell:first-child { grid-column: 1 / -1; }
  .ui-invoice-builder-cell label { position: static; width: auto; height: auto; clip: auto; color: var(--ui-muted); font-size: 12px; }
}
.ui-invoice-builder-btn { box-sizing: border-box; height: 34px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-invoice-builder-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-invoice-builder-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-invoice-builder-btn:disabled { color: var(--ui-muted); cursor: not-allowed; }
.ui-invoice-builder-save { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-invoice-builder-save:hover:not(:disabled) { background: var(--ui-accent); filter: brightness(1.08); }
.ui-invoice-builder-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ui-invoice-builder-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-invoice-builder-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-invoice-builder-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 280px; }
.ui-invoice-builder-order label { font-size: 13px; font-weight: 500; }
.ui-invoice-builder-order input { box-sizing: border-box; width: 110px; height: 34px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-invoice-builder-order input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-invoice-builder-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-invoice-builder-out { display: grid; gap: 14px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
@container (min-width: 620px) { .ui-invoice-builder-out { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ui-invoice-builder-rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-invoice-builder-rates caption { padding-bottom: 4px; color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; }
.ui-invoice-builder-rates th { padding: 3px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-invoice-builder-rates td { padding: 3px 0; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-invoice-builder-rates th + th, .ui-invoice-builder-rates td + td { padding-left: 10px; }
.ui-invoice-builder-rates th:first-child, .ui-invoice-builder-rates td:first-child { text-align: left; }
.ui-invoice-builder-sums { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; margin: 0; align-content: start; }
.ui-invoice-builder-sums dt { color: var(--ui-muted); }
.ui-invoice-builder-sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ui-invoice-builder-sums .ui-invoice-builder-total { padding-top: 4px; color: var(--ui-fg); font-size: 16px; font-weight: 700; }
.ui-invoice-builder-saved { margin: 0; color: var(--ui-success); font-size: 13px; font-weight: 500; }


.ui-fareopt { min-width: 0; margin: 0; padding: 0; border: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-fareopt-legend { margin-bottom: 10px; padding: 0; font-size: 16px; font-weight: 650; }
.ui-fareopt-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.ui-fareopt-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.ui-fareopt-card input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ui-fareopt-card:hover { border-color: var(--ui-strong); }
.ui-fareopt-card:has(input:checked) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 45%, var(--ui-surface));
  box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-fareopt-card:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-focus); }
.ui-fareopt-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ui-fareopt-badge { position: absolute; top: -10px; right: 12px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 11px/20px var(--ui-font); letter-spacing: .02em; }
.ui-fareopt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ui-fareopt-name { font-size: 16px; font-weight: 650; }
.ui-fareopt-dot { flex: none; position: relative; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--ui-strong); border-radius: 50%;
  background: var(--ui-surface); }
.ui-fareopt-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ui-accent); transform: scale(0); transition: transform .12s; }
.ui-fareopt-card input:checked ~ .ui-fareopt-top .ui-fareopt-dot { border: 1.5px solid var(--ui-accent); }
.ui-fareopt-card input:checked ~ .ui-fareopt-top .ui-fareopt-dot::after { transform: scale(1); }
.ui-fareopt-price { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.ui-fareopt-amount { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ui-fareopt-per { color: var(--ui-muted); font-size: 12px; }
.ui-fareopt-more { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-fareopt-feats { display: grid; gap: 6px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--ui-border); list-style: none; font-size: 13px; }
.ui-fareopt-feat { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.ui-fareopt-feat svg { width: 16px; height: 16px; margin-top: 1px; }
.ui-fareopt-yes svg { color: var(--ui-success); }
.ui-fareopt-fee svg { color: var(--ui-warning); }
.ui-fareopt-no { color: var(--ui-muted); }
.ui-fareopt-no svg { color: var(--ui-muted); }
.ui-fareopt-how { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-fareopt-note { margin-top: auto; color: var(--ui-muted); font-size: 12px; }
.ui-fareopt-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 12px; padding: 12px 16px;
  border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-variant-numeric: tabular-nums; }
.ui-fareopt-total output { font-size: 18px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ui-fareopt-card, .ui-fareopt-dot::after { transition: none; } }


.ui-bottom-sheet-demo-list { margin: 16px 0 0; padding: 0; list-style: none; }
.ui-bottom-sheet-demo-list li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ui-border); }
.ui-bottom-sheet-demo-list span { color: var(--ui-muted); font-size: 14px; }
.ui-bottom-sheet-demo-field { box-sizing: border-box; display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-radio-cards { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-radio-cards-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-radio-cards-req { margin-left: 2px; color: var(--ui-danger); }
.ui-radio-cards-list { display: grid; grid-template-columns: repeat(var(--ui-radio-cards-cols, auto-fill), minmax(min(200px, 100%), 1fr)); gap: 10px; }
.ui-radio-cards-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-radio-cards-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-radio-cards-card:hover { border-color: var(--ui-strong); }
.ui-radio-cards-card:has(input:checked) {
  border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface));
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
.ui-radio-cards-card:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-radio-cards-card:has(input:checked):has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-focus); }
.ui-radio-cards-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-radio-cards-card:has(input:disabled):hover { border-color: var(--ui-border); }
.ui-radio-cards-dot {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1px solid var(--ui-strong); background: var(--ui-surface); transition: border-color .15s;
}
.ui-radio-cards-dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ui-accent);
  transform: scale(0); transition: transform .12s;
}
.ui-radio-cards-card input:checked ~ .ui-radio-cards-dot { border-color: var(--ui-accent); border-width: 1.5px; }
.ui-radio-cards-card input:checked ~ .ui-radio-cards-dot::after { transform: scale(1); }
.ui-radio-cards-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-accent); font-size: 18px; }
.ui-radio-cards-icon svg { width: 18px; height: 18px; }
.ui-radio-cards-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ui-radio-cards-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 500; }
.ui-radio-cards-meta { flex: none; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-radio-cards-desc { color: var(--ui-muted); font-size: 13px; }
.ui-radio-cards-sm .ui-radio-cards-card { padding: 9px 11px; gap: 10px; }
.ui-radio-cards-sm .ui-radio-cards-title { font-size: 13px; }
.ui-radio-cards-sm .ui-radio-cards-desc, .ui-radio-cards-sm .ui-radio-cards-meta { font-size: 12px; }
.ui-radio-cards-invalid .ui-radio-cards-card { border-color: var(--ui-danger); }
.ui-radio-cards-hint, .ui-radio-cards-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-radio-cards-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-radio-cards-card, .ui-radio-cards-dot, .ui-radio-cards-dot::after { transition: none; } }


.ui-margincalc { display: grid; gap: 16px; min-width: 0; max-width: 560px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-margincalc .ui-margincalc-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-margincalc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ui-margincalc-field { display: grid; gap: 5px; min-width: 0; }
.ui-margincalc-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; }
.ui-margincalc-tag { color: var(--ui-muted); font-size: 11px; font-weight: 500; }
.ui-margincalc-set .ui-margincalc-tag { color: var(--ui-accent); font-weight: 650; }
.ui-margincalc-box { box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.ui-margincalc-set .ui-margincalc-box { background: var(--ui-subtle); }
.ui-margincalc-box:hover { border-color: var(--ui-strong); }
.ui-margincalc-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-margincalc-box input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-margincalc-box span { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-margincalc-bad .ui-margincalc-box { border-color: var(--ui-danger); }
.ui-margincalc-out { display: grid; margin: 0; padding: 4px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-margincalc-out div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ui-border); }
.ui-margincalc-out div:last-child { border-bottom: 0; }
.ui-margincalc-out dt { font-weight: 500; }
.ui-margincalc-out dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-margincalc-target { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; align-items: end; }
.ui-margincalc-use { min-height: 38px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-margincalc-use:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-margincalc-use:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-margincalc-use:disabled { opacity: .55; cursor: not-allowed; }
.ui-margincalc-say { grid-column: 1 / -1; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-margincalc-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-margincalc-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; font-weight: 500; }
.ui-margincalc-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 420px) { .ui-margincalc { padding: 16px; } .ui-margincalc-grid, .ui-margincalc-target { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-margincalc-box { transition: none; } }


.ui-profile-form { display: grid; gap: 16px; min-width: 0; max-width: 560px; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-profile-form-fields { display: contents; }
.ui-profile-form-form { display: grid; gap: 16px; margin: 0; }
.ui-profile-form-avatar { display: flex; align-items: center; gap: 16px; }
.ui-profile-form-pic {
  flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 24px; font-weight: 600; letter-spacing: .02em;
}
.ui-profile-form-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-profile-form-pick { display: grid; gap: 4px; }
.ui-profile-form-pick input { font: 13px var(--ui-font); color: var(--ui-fg); max-width: 100%; }
.ui-profile-form-pick input::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer;
}
.ui-profile-form-pick input::file-selector-button:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-profile-form-pick input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-profile-form-hint { margin: 0; font-size: 12px; color: var(--ui-muted); }
.ui-profile-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ui-profile-form-field { display: grid; gap: 6px; min-width: 0; }
.ui-profile-form-label { font-size: 13px; font-weight: 500; }
.ui-profile-form-opt { margin-left: 4px; color: var(--ui-muted); font-weight: 400; }
.ui-profile-form-box {
  display: flex; align-items: center; height: 38px; padding: 0 12px; gap: 6px; background: var(--ui-surface);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); transition: border-color .15s, box-shadow .15s;
}
.ui-profile-form-box:hover { border-color: var(--ui-strong); }
.ui-profile-form-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-profile-form-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-profile-form-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-profile-form-affix { flex: none; color: var(--ui-muted); user-select: none; }
.ui-profile-form-area {
  box-sizing: border-box; width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.ui-profile-form-area:hover { border-color: var(--ui-strong); }
.ui-profile-form-area:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-profile-form-invalid .ui-profile-form-box, .ui-profile-form-invalid .ui-profile-form-area { border-color: var(--ui-danger); }
.ui-profile-form-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-profile-form-notice { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); color: var(--ui-success); font-size: 13px; }
.ui-profile-form-actions { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.ui-profile-form-button {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border: 0;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px var(--ui-font);
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.ui-profile-form-button:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-profile-form-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-profile-form-cancel { color: var(--ui-muted); text-decoration: none; font-weight: 500; border-radius: 3px; }
.ui-profile-form-cancel:hover { color: var(--ui-fg); text-decoration: underline; }
.ui-profile-form-cancel:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-profile-form-box, .ui-profile-form-area, .ui-profile-form-button { transition: none; } }


.ui-checklist-input { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-checklist-input-legend { padding: 0; font-size: 13px; font-weight: 500; }
.ui-checklist-input-progress { display: grid; gap: 6px; }
.ui-checklist-input-count { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-checklist-input-all { color: var(--ui-success); font-weight: 500; }
.ui-checklist-input-bar { height: 6px; border-radius: 3px; background: var(--ui-subtle); overflow: hidden; }
.ui-checklist-input-bar span { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--ui-accent); transition: width .25s, background .25s; }
.ui-checklist-input-done .ui-checklist-input-bar span { background: var(--ui-success); }
.ui-checklist-input-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-checklist-input-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: fit-content; }
.ui-checklist-input-item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-checklist-input-box {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; background: var(--ui-surface);
  border: 1px solid var(--ui-strong); border-radius: 4px; transition: background .15s, border-color .15s, box-shadow .15s;
}
.ui-checklist-input-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--ui-accent-fg);
  border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s;
}
.ui-checklist-input-item:hover .ui-checklist-input-box { border-color: var(--ui-accent); }
.ui-checklist-input-item input:checked + .ui-checklist-input-box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-checklist-input-item input:checked + .ui-checklist-input-box::after { transform: rotate(45deg) scale(1); }
.ui-checklist-input-item input:focus-visible + .ui-checklist-input-box { box-shadow: var(--ui-focus); }
.ui-checklist-input-text { display: grid; gap: 2px; }
.ui-checklist-input-strike input:checked ~ .ui-checklist-input-text > :first-child { text-decoration: line-through; color: var(--ui-muted); }
.ui-checklist-input-hint-item { font-size: 13px; color: var(--ui-muted); }
.ui-checklist-input-item:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-checklist-input-hint, .ui-checklist-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-checklist-input-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-checklist-input-bar span, .ui-checklist-input-box, .ui-checklist-input-box::after { transition: none; } }


.ui-iline {
  --ui-iline-1: light-dark(#2a78d6, #3987e5); --ui-iline-2: light-dark(#eb6834, #d95926);
  --ui-iline-3: light-dark(#1baf7a, #199e70); --ui-iline-4: light-dark(#eda100, #c98500);
  --ui-iline-5: light-dark(#e87ba4, #d55181); --ui-iline-6: light-dark(#008300, #008300);
  --ui-iline-7: light-dark(#6250d6, #9085e9); --ui-iline-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-iline-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-iline-s1 { --c: var(--ui-iline-1); } .ui-iline-s2 { --c: var(--ui-iline-2); } .ui-iline-s3 { --c: var(--ui-iline-3); }
.ui-iline-s4 { --c: var(--ui-iline-4); } .ui-iline-s5 { --c: var(--ui-iline-5); } .ui-iline-s6 { --c: var(--ui-iline-6); }
.ui-iline-s7 { --c: var(--ui-iline-7); } .ui-iline-s8 { --c: var(--ui-iline-8); }
.ui-iline-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-iline-item { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); cursor: pointer; }
.ui-iline-item[aria-pressed="false"] { color: var(--ui-muted); text-decoration: line-through; }
.ui-iline-item[aria-pressed="false"] .ui-iline-key { background: var(--ui-strong); }
.ui-iline-item:hover { border-color: var(--ui-strong); }
.ui-iline-key { width: 12px; height: 3px; border-radius: 2px; background: var(--c); }
.ui-iline-reset { margin-left: auto; height: 26px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); cursor: pointer; }
.ui-iline-reset:hover { border-color: var(--ui-strong); }
.ui-iline-item:focus-visible, .ui-iline-reset:focus-visible, .ui-iline-plot:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-iline-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-iline-y { position: relative; min-width: 24px; }
.ui-iline-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-iline-plot { position: relative; border-radius: 2px; cursor: crosshair; touch-action: none; user-select: none; }
.ui-iline-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); pointer-events: none; }
.ui-iline-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-iline-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-iline-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ui-fg); opacity: .45; pointer-events: none; }
.ui-iline-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-iline-pick { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
  border-inline: 1px solid var(--ui-accent); pointer-events: none; }
.ui-iline-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-muted); pointer-events: none; }
.ui-iline-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-iline-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-iline-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-iline-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-iline-tip { display: block; top: 0; transform: translateX(10px); }
.ui-iline-tip.ui-iline-flip { transform: translateX(calc(-100% - 10px)); }
.ui-iline-tip .ui-iline-key { width: 8px; height: 8px; border-radius: 50%; }
.ui-iline-x { position: relative; height: 16px; margin-top: 6px; }
.ui-iline-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-iline-x .ui-iline-first { transform: none; }
.ui-iline-x .ui-iline-last { transform: translateX(-100%); }


.ui-quota { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-quota-row { display: grid; gap: 5px; min-width: 0; --t: var(--ui-accent); }
.ui-quota-warn { --t: var(--ui-warning); }
.ui-quota-full { --t: var(--ui-danger); }
.ui-quota-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.ui-quota-label { font-weight: 500; font-size: 14px; }
.ui-quota-label a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-quota-label a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-quota-label a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-quota-note { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-quota-nums { color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-quota-warn .ui-quota-nums, .ui-quota-full .ui-quota-nums { color: var(--t); font-weight: 600; }
.ui-quota-track { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-quota-fill { height: 100%; border-radius: inherit; background: var(--t); transition: width .3s ease; }
.ui-quota-compact { gap: 8px; }
.ui-quota-compact .ui-quota-row { grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) auto; align-items: center; column-gap: 12px; }
.ui-quota-compact .ui-quota-head { display: contents; }
.ui-quota-compact .ui-quota-track { order: 1; }
.ui-quota-compact .ui-quota-nums { order: 2; }
.ui-quota-compact .ui-quota-note { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-quota-fill { transition: none; } }


.ui-address { position: relative; display: grid; gap: 8px; min-width: 0; padding: 16px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-address-selected { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-address-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ui-address-kind { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); }
.ui-address-default { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font: 600 11px/1 var(--ui-font); }
.ui-address-body { margin: 0; font-style: normal; }
.ui-address-name { display: block; font-weight: 600; }
.ui-address-contact { display: grid; gap: 2px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-address-contact a { color: inherit; text-decoration: none; }
.ui-address-contact a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-address-actions { display: flex; gap: 14px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--ui-border); font-size: 13px; }
.ui-address-actions a, .ui-address-actions button { padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: 3px; }
.ui-address-actions a:hover, .ui-address-actions button:hover { text-decoration: underline; }
.ui-address-actions a:focus-visible, .ui-address-actions button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-address-actions .ui-address-remove { color: var(--ui-danger); }
.ui-address-form { display: contents; }


.ui-ticker {
  display: flex; align-items: stretch; overflow: hidden; width: 100%; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
}
.ui-ticker-label {
  flex: none; display: flex; align-items: center; padding: 8px 14px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ui-ticker-danger .ui-ticker-label { background: var(--ui-danger); color: #fff; }
.ui-ticker-success .ui-ticker-label { background: var(--ui-success); color: #fff; }
.ui-ticker-neutral .ui-ticker-label { background: var(--ui-fg); color: var(--ui-bg); }
.ui-ticker-view {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ui-ticker-track { display: flex; width: max-content; height: 100%; animation: ui-ticker var(--t, 30s) linear infinite; }
.ui-ticker:hover .ui-ticker-track, .ui-ticker:focus-within .ui-ticker-track { animation-play-state: paused; }
.ui-ticker-list { display: flex; flex: none; align-items: center; margin: 0; padding: 0 0 0 20px; list-style: none; }
.ui-ticker-list li { display: flex; align-items: center; white-space: nowrap; }
.ui-ticker-list li::after { content: ""; width: 5px; height: 5px; margin: 0 20px; border-radius: 50%; background: var(--ui-strong); }
.ui-ticker-list a { color: inherit; text-decoration: none; }
.ui-ticker-list a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-ticker-list a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
@keyframes ui-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ui-ticker-view { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .ui-ticker-track { animation: none; }
  .ui-ticker-list[aria-hidden] { display: none; }
}


.ui-event-card { display: grid; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.5 var(--ui-font); color: var(--ui-fg); overflow: hidden; --t: var(--ui-accent); --ts: var(--ui-accent-soft); }
.ui-event-card-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-event-card-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-event-card-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-event-card-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-event-card-neutral { --t: var(--ui-muted); --ts: var(--ui-subtle); }
.ui-event-card-media { position: relative; }
.ui-event-card-media img { display: block; width: 100%; height: 160px; object-fit: cover; }
.ui-event-card-badge { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: var(--ui-surface); color: var(--t); font-size: 12px; font-weight: 600; box-shadow: var(--ui-shadow); }
.ui-event-card-body { display: flex; gap: 16px; padding: 16px; }
.ui-event-card-stack .ui-event-card-body { flex-direction: column; gap: 12px; }
.ui-event-card-date { display: grid; justify-items: center; align-content: center; flex: none; width: 60px; padding: 8px 4px; border-radius: var(--ui-radius-sm); background: var(--ts); color: var(--t); line-height: 1.1; }
.ui-event-card-stack .ui-event-card-date { width: fit-content; min-width: 60px; }
.ui-event-card-date span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ui-event-card-date b { font-size: 26px; font-weight: 700; color: var(--ui-fg); }
.ui-event-card-main { display: grid; gap: 4px; flex: 1; min-width: 0; align-content: start; }
.ui-event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ui-event-card-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.ui-event-card-title a { color: inherit; text-decoration: none; }
.ui-event-card-title a:hover { text-decoration: underline; }
.ui-event-card-title a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-event-card-top .ui-event-card-badge { position: static; flex: none; padding: 2px 8px; background: var(--ts); box-shadow: none; }
.ui-event-card-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-event-card-meta li { display: inline-flex; align-items: center; gap: 5px; }
.ui-event-card-meta svg { width: 14px; height: 14px; }
.ui-event-card-text { margin: 4px 0 0; color: var(--ui-muted); }
.ui-event-card-action { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ui-event-card-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  background: var(--t); color: var(--ui-accent-fg); font: 500 14px/1 var(--ui-font); text-decoration: none; cursor: pointer; transition: background .15s;
}
.ui-event-card-btn:hover { background: color-mix(in srgb, var(--t) 88%, var(--ui-fg)); }
.ui-event-card-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-event-card-btn:disabled, .ui-event-card-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ui-event-card-btn { transition: none; } }


.ui-callout { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--c) 25%, var(--ui-border)); border-left: 4px solid var(--c);
  border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--c) 6%, var(--ui-surface));
  font: 14px/1.55 var(--ui-font); color: var(--ui-fg); --c: var(--ui-info); }
.ui-callout-tip { --c: var(--ui-success); }
.ui-callout-warning { --c: var(--ui-warning); }
.ui-callout-important { --c: var(--ui-accent); }
.ui-callout-caution { --c: var(--ui-danger); }
.ui-callout-icon { grid-column: 1; width: 18px; height: 18px; margin-top: 1px; color: var(--c); }
.ui-callout-title { grid-column: 2; margin: 0; font-weight: 600; color: var(--c); }
.ui-callout-body { grid-column: 2; min-width: 0; }
.ui-callout-noicon .ui-callout-title, .ui-callout-noicon .ui-callout-body { grid-column: 1 / -1; }
.ui-callout-body > :first-child { margin-top: 0; }
.ui-callout-body > :last-child { margin-bottom: 0; }
.ui-callout-body a { color: var(--ui-accent); }
.ui-callout-body code { padding: .1em .35em; border-radius: 4px; background: color-mix(in srgb, var(--c) 12%, var(--ui-subtle)); font: .9em var(--ui-mono); }


.ui-image-compare {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r, 16/9); border-radius: var(--ui-radius);
  background: var(--ui-subtle); font: 600 12px/1 var(--ui-font); user-select: none; touch-action: pan-y;
}
.ui-image-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ui-image-compare-before { clip-path: inset(0 calc(100% - var(--at, 50%)) 0 0); }
.ui-image-compare-line { position: absolute; top: 0; bottom: 0; left: var(--at, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .4); pointer-events: none; }
.ui-image-compare-knob {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; transform: translate(-50%, -50%);
  border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; box-shadow: var(--ui-shadow);
}
.ui-image-compare-knob svg { width: 22px; height: 22px; }
.ui-image-compare-tag { position: absolute; top: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.ui-image-compare-tag-before { left: 12px; }
.ui-image-compare-tag-after { right: 12px; }
.ui-image-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; }
.ui-image-compare input::-webkit-slider-thumb { appearance: none; width: 44px; height: 100vh; }
.ui-image-compare:has(input:focus-visible) .ui-image-compare-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ui-accent); }


.ui-inspector {
  position: relative; display: flex; box-sizing: border-box; min-width: 0; height: var(--ui-inspector-height, 100%); overflow: hidden; container: ui-inspector / inline-size;
  background: var(--ui-bg); color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
}
.ui-inspector-frame { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; height: 100%; }
.ui-inspector-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.ui-inspector-panel { display: flex; flex-direction: column; flex: none; box-sizing: border-box; width: 300px; min-height: 0; background: var(--ui-surface); border-left: 1px solid var(--ui-border); }
.ui-inspector-closed .ui-inspector-panel { display: none; }
.ui-inspector-show {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: none; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); font: 500 14px/1.2 var(--ui-font); cursor: pointer;
}
.ui-inspector-closed .ui-inspector-show { display: inline-flex; }
.ui-inspector-grip { display: none; flex: none; place-items: center; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ui-inspector-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-inspector-grip:focus-visible { outline: none; }
.ui-inspector-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-inspector-head { display: flex; align-items: center; gap: 6px; flex: none; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-inspector-heading { flex: 1; min-width: 0; }
.ui-inspector-heading h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ui-muted); text-transform: uppercase; }
.ui-inspector-heading p { margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-inspector-hide { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 14px/1.2 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-inspector-hide:focus-visible, .ui-inspector-show:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-inspector-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }
.ui-inspector-empty { margin: 0; padding: 28px 16px; color: var(--ui-muted); text-align: center; }
.ui-inspector-section { border-bottom: 1px solid var(--ui-border); }
.ui-inspector-section summary {
  display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; min-height: 44px; padding: 0 14px; font-weight: 600; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-inspector-section summary::-webkit-details-marker { display: none; }
.ui-inspector-section summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ui-muted); border-bottom: 2px solid var(--ui-muted); transform: rotate(-45deg); transition: transform .15s; }
.ui-inspector-section[open] summary::after { transform: rotate(45deg); }
.ui-inspector-section summary:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-inspector-fields { display: grid; gap: 8px; padding: 2px 14px 14px; }
.ui-inspector-field { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 2px 8px; min-height: 44px; }
.ui-inspector-field label, .ui-inspector-label { min-width: 0; overflow: hidden; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap; }
.ui-inspector-input {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font);
}
.ui-inspector-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-inspector-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-inspector-number { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 2px; min-width: 0; }
.ui-inspector-number .ui-inspector-input { text-align: center; padding: 0 2px; }
.ui-inspector-step { width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-fg); font: 500 20px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-inspector-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-inspector-unit { grid-column: 2; color: var(--ui-muted); font-size: 12px; text-align: center; }
.ui-inspector-note { grid-column: 1 / -1; color: var(--ui-danger); font-size: 13px; }
.ui-inspector-color { box-sizing: border-box; width: 100%; height: 44px; padding: 2px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-inspector-read { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-inspector-switch { justify-self: end; width: 26px; height: 26px; margin: 0; accent-color: var(--ui-accent); }
@container ui-inspector (max-width: 599.98px) {
  .ui-inspector-stage { padding-bottom: 100px; box-sizing: border-box; }
  .ui-inspector-panel {
    position: absolute; left: 0; right: 0; bottom: var(--ui-inspector-kb, 0px); z-index: 3; width: auto; height: 96px; max-height: calc(100% - var(--ui-inspector-kb, 0px) - 24px);
    border-left: 0; border-top: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; box-shadow: var(--ui-shadow-lg);
    transition: height .24s cubic-bezier(.2, .8, .2, 1), bottom .2s;
  }
  .ui-inspector-panel[data-detent="half"] { height: 52%; }
  .ui-inspector-panel[data-detent="full"] { height: calc(100% - 24px); }
  .ui-inspector-dragging { transition: none; }
  .ui-inspector-closed .ui-inspector-panel { display: flex; }
  .ui-inspector-closed .ui-inspector-show { display: none; }
  .ui-inspector-grip { display: grid; }
  .ui-inspector-head { min-height: 48px; border-bottom: 0; }
  .ui-inspector-hide { display: none; }
  .ui-inspector-panel[data-detent="half"] .ui-inspector-head, .ui-inspector-panel[data-detent="full"] .ui-inspector-head { border-bottom: 1px solid var(--ui-border); }
  .ui-inspector-panel[data-detent="peek"] .ui-inspector-body { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .ui-inspector-panel { transition: none !important; } .ui-inspector-section summary::after { transition: none; } }


.ui-membership-app { display: grid; gap: 18px; min-width: 0; max-width: 640px; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-membership-app-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-membership-app-step { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; }
.ui-membership-app-step::before { content: ""; height: 4px; border-radius: 2px; background: var(--ui-border); }
.ui-membership-app-done::before, .ui-membership-app-current::before { background: var(--ui-accent); }
.ui-membership-app-step-label { display: block; padding: 0; border: 0; background: none; color: var(--ui-muted); font: 500 12px var(--ui-font);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; }
.ui-membership-app-current .ui-membership-app-step-label { color: var(--ui-fg); }
button.ui-membership-app-step-label { color: var(--ui-accent); cursor: pointer; }
button.ui-membership-app-step-label:hover { text-decoration: underline; }
button.ui-membership-app-step-label:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-membership-app-form { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-membership-app-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-membership-app-panel[hidden] { display: none; }
.ui-membership-app .ui-membership-app-title { display: block; grid-column: 1 / -1; margin: 0; font-size: 17px; font-weight: 650; outline: none; }
.ui-membership-app-text { grid-column: 1 / -1; margin: -8px 0 0; color: var(--ui-muted); }
.ui-membership-app-field { display: grid; gap: 5px; align-content: start; min-width: 0; }
.ui-membership-app-wide { grid-column: 1 / -1; }
.ui-membership-app-label { font-size: 13px; font-weight: 500; }
.ui-membership-app-req { margin-left: 2px; color: var(--ui-danger); }
.ui-membership-app-input { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); transition: border-color .15s, box-shadow .15s; }
textarea.ui-membership-app-input { height: auto; padding: 8px 12px; resize: vertical; }
.ui-membership-app-input:hover { border-color: var(--ui-strong); }
.ui-membership-app-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-membership-app-input:user-invalid { border-color: var(--ui-danger); }
.ui-membership-app-hint { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-membership-app-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ui-membership-app-check input { margin: 3px 0 0; accent-color: var(--ui-accent); }
.ui-membership-app-bens { grid-column: 1 / -1; display: grid; gap: 10px; }
.ui-membership-app-ben { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 90px auto; align-items: end; gap: 10px;
  padding: 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-membership-app-ben-num { grid-column: 1 / -1; margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-membership-app-icon { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-muted); cursor: pointer; }
.ui-membership-app-icon:hover:not(:disabled) { color: var(--ui-danger); border-color: var(--ui-danger); }
.ui-membership-app-icon:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-membership-app-icon:disabled { opacity: .4; cursor: not-allowed; }
.ui-membership-app-add { justify-self: start; height: 34px; padding: 0 14px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm);
  background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-membership-app-add:hover:not(:disabled) { border-color: var(--ui-accent); }
.ui-membership-app-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-membership-app-add:disabled { opacity: .5; cursor: not-allowed; }
.ui-membership-app-total { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-membership-app-total-ok { color: var(--ui-success); }
.ui-membership-app-error { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-membership-app-pledge { grid-column: 1 / -1; display: grid; gap: 0; margin: 0; padding: 4px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-membership-app-pledge div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ui-border); }
.ui-membership-app-pledge div:last-child { border-bottom: 0; }
.ui-membership-app-pledge dt { color: var(--ui-muted); }
.ui-membership-app-pledge dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ui-membership-app-review { grid-column: 1 / -1; display: grid; gap: 12px; }
.ui-membership-app-review-step { padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-membership-app-review-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ui-membership-app-review-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
.ui-membership-app-edit { padding: 2px 8px; border: 0; border-radius: 4px; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-membership-app-edit:hover { background: var(--ui-accent-soft); }
.ui-membership-app-edit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-membership-app-dl { display: grid; gap: 4px; margin: 0; }
.ui-membership-app-dl div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.ui-membership-app-dl dt { color: var(--ui-muted); }
.ui-membership-app-dl dd { margin: 0; overflow-wrap: anywhere; }
.ui-membership-app-actions { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ui-border); }
.ui-membership-app-gap { flex: 1; }
.ui-membership-app-count { color: var(--ui-muted); font-size: 13px; }
.ui-membership-app-button { height: 38px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-membership-app-button:hover { filter: brightness(1.08); }
.ui-membership-app-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-membership-app-back { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-fg); }
@media (max-width: 560px) {
  .ui-membership-app-panel { grid-template-columns: 1fr; }
  .ui-membership-app-ben { grid-template-columns: 1fr 1fr; }
  .ui-membership-app-dl div { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .ui-membership-app-input { transition: none; } }


.ui-popover {
  box-sizing: border-box; width: min(var(--w, 300px), calc(100vw - 16px)); max-height: calc(100dvh - 16px); margin: auto;
  padding: 14px 16px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.5 var(--ui-font);
}
.ui-popover > :first-child { margin-top: 0; }
.ui-popover > :last-child { margin-bottom: 0; }
.ui-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ui-popover-head h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-popover-x {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: -4px -6px -4px 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-popover-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-popover-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-popover[popover]:popover-open { animation: ui-popover-in .12s ease-out; }
@keyframes ui-popover-in { from { opacity: 0; } }
@supports (position-area: bottom) {
  .ui-popover {
    inset: auto; margin: 8px;
    position-try-fallbacks: flip-block, flip-inline, top, bottom;
  }
}
@supports not (position-area: bottom) { .ui-popover::backdrop { background: var(--ui-overlay); } }
@media (prefers-reduced-motion: reduce) { .ui-popover[popover]:popover-open { animation: none; } }


.ui-phone-sign-in {
  position: relative; display: grid; gap: 14px; min-width: 0; color: var(--ui-fg); font: 16px/1.45 var(--ui-font);
  padding-bottom: var(--ui-phone-sign-in-keyboard, 0px); container: ui-phone-sign-in / inline-size;
}
.ui-phone-sign-in h2 { margin: 0; font-size: 22px; line-height: 1.25; outline: none; }
.ui-phone-sign-in-lead { margin: -8px 0 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-phone-sign-in-form { display: grid; gap: 12px; min-width: 0; margin: 0; }
.ui-phone-sign-in-field { display: grid; gap: 4px; min-width: 0; }
.ui-phone-sign-in-field label { font-size: 14px; font-weight: 500; }
/* 16 px at least: iOS zooms the page into a smaller field. */
.ui-phone-sign-in-field select, .ui-phone-sign-in-num input, .ui-phone-sign-in-code {
  box-sizing: border-box; width: 100%; min-width: 0; height: 50px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 17px var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-phone-sign-in-field select:focus, .ui-phone-sign-in-num:focus-within, .ui-phone-sign-in-code:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-phone-sign-in-num { display: flex; align-items: center; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-phone-sign-in-num span { flex: none; padding-inline-start: 12px; color: var(--ui-muted); font-size: 17px; font-variant-numeric: tabular-nums; }
.ui-phone-sign-in-num input { flex: 1; border: 0; background: transparent; padding-inline-start: 8px; outline: none; box-shadow: none; }
.ui-phone-sign-in-bad .ui-phone-sign-in-num, .ui-phone-sign-in-bad .ui-phone-sign-in-code { border-color: var(--ui-danger); }
.ui-phone-sign-in-code { height: 60px; text-align: center; font: 600 26px var(--ui-mono); letter-spacing: .32em; text-indent: .32em; caret-color: var(--ui-accent); }
.ui-phone-sign-in-note, .ui-phone-sign-in-wait { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-phone-sign-in-note a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ui-accent); }
.ui-phone-sign-in-off { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 14px; }
.ui-phone-sign-in-error { margin: 0; color: var(--ui-danger); font-size: 14px; }
.ui-phone-sign-in-more { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: space-between; }
.ui-phone-sign-in-done { display: grid; justify-items: center; gap: 8px; padding: 24px 0; text-align: center; }
.ui-phone-sign-in-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ui-success-soft); color: var(--ui-success); }
.ui-phone-sign-in-tick svg { width: 32px; height: 32px; }
.ui-phone-sign-in-pair { display: grid; gap: 12px; min-width: 0; }
/* A tablet: the country beside the number, in a form of a readable width and not one across the screen. */
@container ui-phone-sign-in (min-width: 560px) {
  .ui-phone-sign-in-form, .ui-phone-sign-in-done { width: 100%; max-width: 480px; margin-inline: auto; }
  .ui-phone-sign-in-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}


.ui-acdet { display: grid; gap: 12px; align-content: start; min-width: 0; max-width: 520px; padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-acdet-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ui-acdet-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-acdet-bank { margin: 2px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-acdet-list { margin: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-acdet-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 12px; }
.ui-acdet-row + .ui-acdet-row { border-top: 1px solid var(--ui-border); }
.ui-acdet-row > div { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ui-acdet-row dt { color: var(--ui-muted); font-size: 12px; }
.ui-acdet-row dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ui-acdet-code dd { font-family: var(--ui-mono); font-size: 14px; letter-spacing: .03em; }
.ui-acdet-bad dd { color: var(--ui-danger); }
.ui-acdet-warn { display: block; color: var(--ui-danger); font-family: var(--ui-font); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ui-acdet-copy { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px var(--ui-font); cursor: pointer; transition: border-color .15s, color .15s; }
.ui-acdet-copy:hover { border-color: var(--ui-strong); color: var(--ui-accent); }
.ui-acdet-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-acdet-copy svg { width: 13px; height: 13px; }
.ui-acdet-ok { border-color: var(--ui-success); color: var(--ui-success); }
.ui-acdet-fail { border-color: var(--ui-danger); color: var(--ui-danger); }
.ui-acdet-all { height: 32px; padding: 0 12px; background: var(--ui-subtle); }
@media (prefers-reduced-motion: reduce) { .ui-acdet-copy { transition: none; } }


.ui-navbar {
  container: ui-navbar / inline-size; position: relative; z-index: 10;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-navbar-sticky { position: sticky; top: 0; }
.ui-navbar-in { display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 20px; }
.ui-navbar-brand {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  color: var(--ui-fg); font-weight: 650; font-size: 16px; text-decoration: none; border-radius: var(--ui-radius-sm);
}
.ui-navbar-brand :is(img, svg) { height: 26px; width: auto; }
.ui-navbar a:focus-visible, .ui-navbar summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-navbar-nav ul, .ui-navbar-menu ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-navbar-nav a, .ui-navbar-menu li a {
  display: block; padding: 6px 10px; border-radius: var(--ui-radius-sm);
  color: var(--ui-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ui-navbar-nav a:hover, .ui-navbar-menu li a:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-navbar-nav a[aria-current="page"], .ui-navbar-menu a[aria-current="page"] { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-navbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ui-navbar-menu { display: none; }
.ui-navbar-menu summary {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--ui-radius-sm);
  color: var(--ui-fg); cursor: pointer; list-style: none;
}
.ui-navbar-menu summary::-webkit-details-marker { display: none; }
.ui-navbar-menu summary:hover, .ui-navbar-menu[open] summary { background: var(--ui-subtle); }
.ui-navbar-menu[open] .ui-navbar-open, .ui-navbar-menu:not([open]) .ui-navbar-close { display: none; }
.ui-navbar-menu nav {
  position: absolute; top: 100%; left: 0; right: 0; padding: 8px 12px 12px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-bg); box-shadow: var(--ui-shadow);
}
.ui-navbar-menu ul { flex-direction: column; }
.ui-navbar-menu li a { padding: 10px 12px; font-size: 15px; }
@container ui-navbar (max-width: 720px) {
  .ui-navbar-in { gap: 12px; padding: 0 12px 0 16px; }
  .ui-navbar-nav { display: none; }
  .ui-navbar-menu { display: block; }
}


/* The page behind stays where it is: a modal dialog does not stop it scrolling on a phone. */
html:has(.ui-cartsh[open]) { overflow: hidden; }
.ui-cartsh {
  box-sizing: border-box; inset: auto 0 var(--ui-cartsh-kb, 0px) 0; width: 100%; max-width: 100vw; height: auto;
  max-height: calc(100dvh - var(--ui-cartsh-kb, 0px) - env(safe-area-inset-top, 0px) - 24px);
  margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0;
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 15px/1.45 var(--ui-font); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
  overscroll-behavior: contain;
}
.ui-cartsh::backdrop { background: var(--ui-overlay); }
.ui-cartsh[open] { display: flex; flex-direction: column; animation: ui-cartsh-up .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes ui-cartsh-up { from { transform: translateY(100%); } }
/* The top pulls the sheet down: nothing scrolls there, and no callout or selection starts. */
.ui-cartsh-grab { flex: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.ui-cartsh-grip { display: block; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 999px; background: var(--ui-strong); }
.ui-cartsh-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px 0 18px; border-bottom: 1px solid var(--ui-border); }
.ui-cartsh-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-cartsh-x {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: manipulation;
}
.ui-cartsh-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cartsh-x svg { width: 20px; height: 20px; }
.ui-cartsh-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px;
  container-type: inline-size; scroll-padding: 16px;
}
.ui-cartsh-foot {
  flex: none; display: grid; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ui-border); background: var(--ui-surface);
}
/* With the keyboard up the room goes to the field. */
.ui-cartsh[data-keyboard] .ui-cartsh-foot { display: none; }
@media (hover: hover) { .ui-cartsh-x:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
@media (min-width: 700px) {
  .ui-cartsh-grab { cursor: default; touch-action: auto; user-select: auto; -webkit-user-select: auto; }
  .ui-cartsh-grip { display: none; }
  .ui-cartsh-side {
    inset: 0 0 var(--ui-cartsh-kb, 0px) auto; width: min(440px, 100vw); max-height: none; height: auto; border: 0; border-left: 1px solid var(--ui-border);
    border-radius: calc(var(--ui-radius) + 8px) 0 0 calc(var(--ui-radius) + 8px);
  }
  .ui-cartsh-side[open] { animation-name: ui-cartsh-in; }
  .ui-cartsh-center {
    inset: 0 0 var(--ui-cartsh-kb, 0px) 0; width: min(680px, calc(100vw - 48px)); height: fit-content; max-height: min(calc(100dvh - var(--ui-cartsh-kb, 0px) - 48px), 860px);
    margin: auto; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px);
  }
  .ui-cartsh-center[open] { animation-name: ui-cartsh-fade; }
}
@keyframes ui-cartsh-in { from { transform: translateX(100%); } }
@keyframes ui-cartsh-fade { from { opacity: 0; transform: translateY(12px); } }

.ui-cartsh-host { display: contents; }
.ui-cartsh-foots { display: grid; gap: 10px; }
.ui-cartsh-open {
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 600 15px var(--ui-font); cursor: pointer;
  touch-action: manipulation;
}
.ui-cartsh-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cartsh-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; font-variant-numeric: tabular-nums;
}
.ui-cartsh-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-cartsh-row {
  position: relative; display: grid; grid-template-rows: 1fr; border-radius: var(--ui-radius); background: var(--ui-danger-soft);
  transition: grid-template-rows .17s ease, opacity .17s ease; overflow: hidden;
}
.ui-cartsh-row-in { min-height: 0; overflow: hidden; }
.ui-cartsh-leaving { grid-template-rows: 0fr; opacity: 0; }
.ui-cartsh-behind {
  position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; padding: 0 18px; color: var(--ui-danger); font-weight: 600;
}
/* Sideways is the swipe; up and down stay the list's own scrolling. */
.ui-cartsh-front {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 10px; background: var(--ui-subtle);
  border-radius: var(--ui-radius); touch-action: pan-y; transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ui-cartsh-swiping { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: none; }
.ui-cartsh-pic { grid-row: span 2; width: 56px; height: 56px; border-radius: var(--ui-radius-sm); object-fit: cover; background: var(--ui-border); }
.ui-cartsh-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-cartsh-option { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-cartsh-money { display: block; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-cartsh-nomoney { display: block; color: var(--ui-warning); font-size: 13px; }
.ui-cartsh-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; grid-column: 2; }
.ui-cartsh-qty { display: inline-flex; align-items: center; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-cartsh-step, .ui-cartsh-del {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ui-fg);
  font: 500 15px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-cartsh-step { font-size: 20px; }
.ui-cartsh-step:disabled { color: var(--ui-strong); cursor: default; }
.ui-cartsh-del { padding: 0 8px; color: var(--ui-danger); border-radius: var(--ui-radius-sm); }
.ui-cartsh-step:focus-visible, .ui-cartsh-del:focus-visible, .ui-cartsh-undo:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cartsh-n { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.ui-cartsh-empty { margin: 0; padding: 32px 0; text-align: center; color: var(--ui-muted); }
.ui-cartsh-note { display: grid; gap: 4px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-cartsh-got { color: var(--ui-success); font-weight: 600; }
.ui-cartsh-meter { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-cartsh-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .2s; }
.ui-cartsh-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; font-variant-numeric: tabular-nums; font-size: 14px; }
.ui-cartsh-sums dt { color: var(--ui-muted); }
.ui-cartsh-sums dd { margin: 0; text-align: right; }
.ui-cartsh-sums .ui-cartsh-grand { color: var(--ui-fg); font-size: 16px; font-weight: 700; }
.ui-cartsh-snack {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 4px 0 12px; border-radius: var(--ui-radius-sm);
  background: var(--ui-fg); color: var(--ui-bg); font-size: 14px;
}
.ui-cartsh-undo {
  min-width: 64px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit;
  font: 700 14px var(--ui-font); text-decoration: underline; cursor: pointer; touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) {
  .ui-cartsh, .ui-cartsh-front, .ui-cartsh-row, .ui-cartsh-meter span { transition: none; }
  .ui-cartsh[open] { animation: none; }
}


.ui-apptabs { display: block; width: 100%; height: 100%; min-height: 0; container-type: inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-apptabs-in { display: flex; flex-direction: column; width: 100%; height: 100%; }
.ui-apptabs-screens { position: relative; flex: 1; min-width: 0; min-height: 0; }
/* Hidden by visibility, as display: none loses a scroller's place on some engines. */
.ui-apptabs-panel { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; visibility: hidden; outline: none; }
.ui-apptabs-panel-on { visibility: visible; }
/* Literal markup in the branch: with a bare call there, each change to what the test reads would build the screen again. */
.ui-apptabs-built { display: contents; }
.ui-apptabs-bar {
  display: flex; flex: none; justify-content: space-around; box-sizing: border-box; width: 100%;
  padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  border-top: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-apptabs-kb .ui-apptabs-bar { display: none; }
.ui-apptabs-tab {
  position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 48px; max-width: 140px;
  padding: 4px 2px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: 500 11px/1.2 var(--ui-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ui-apptabs-tab[aria-selected="true"] { color: var(--ui-accent); }
.ui-apptabs-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-apptabs-icon { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 20px; line-height: 1; }
.ui-apptabs-icon svg { width: 24px; height: 24px; }
.ui-apptabs-badge {
  position: absolute; top: -3px; inset-inline-start: 62%; box-sizing: border-box; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--ui-danger); color: #fff;
  font: 700 10px/16px var(--ui-font); text-align: center;
}
.ui-apptabs-dot { top: 0; min-width: 9px; height: 9px; padding: 0; }
.ui-apptabs-text { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .ui-apptabs-tab:hover { color: var(--ui-fg); } .ui-apptabs-tab[aria-selected="true"]:hover { color: var(--ui-accent); } }
@container (min-width: 600px) {
  .ui-apptabs-in { flex-direction: row; }
  .ui-apptabs-bar {
    order: -1; flex-direction: column; justify-content: flex-start; gap: 4px; width: calc(84px + env(safe-area-inset-left)); height: 100%; overflow-y: auto;
    padding: max(12px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border-top: 0; border-inline-end: 1px solid var(--ui-border);
  }
  .ui-apptabs-tab { flex: none; min-height: 60px; max-width: none; font-size: 12px; }
  /* A rail is beside the keyboard, not on it, and going would move everything sideways. */
  .ui-apptabs-kb .ui-apptabs-bar { display: flex; }
}


.ui-jt { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-jt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; min-width: 0; }
.ui-jt-path ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-jt-path li { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ui-jt-path li + li::before { content: "›"; padding: 0 3px; color: var(--ui-muted); }
.ui-jt-path button { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border: 0;
  border-radius: 4px; background: none; color: var(--ui-accent); font: 500 13px/1.3 var(--ui-mono); cursor: pointer; }
.ui-jt-path button:hover { background: var(--ui-subtle); }
.ui-jt-path button[aria-current] { color: var(--ui-fg); cursor: default; }
.ui-jt-path button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jt-jq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border-radius: 4px;
  background: var(--ui-subtle); color: var(--ui-muted); font: 12px/1.4 var(--ui-mono); }
.ui-jt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-jt-search { flex: 0 1 280px; min-width: 160px; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: inherit; }
.ui-jt-search::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-jt-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-jt-count { flex: 1; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-jt-export { display: flex; gap: 6px; }
.ui-jt-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-jt-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-jt-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jt-btn svg { width: 13px; height: 13px; }
.ui-jt-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  overscroll-behavior: contain; container-type: inline-size; }
.ui-jt table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; outline: none; }
.ui-jt table:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-jt th, .ui-jt td { box-sizing: border-box; height: var(--ui-jt-rh); padding: 0 12px; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--ui-border); }
.ui-jt thead th { position: sticky; top: 0; z-index: 1; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.ui-jt-headcol { width: 64px; }
.ui-jt-entries .ui-jt-headcol { width: 30%; }
.ui-jt tbody th { color: var(--ui-muted); font: 12px/1 var(--ui-mono); font-weight: 400; }
.ui-jt-entries tbody th { color: var(--ui-accent); font-size: 13px; }
.ui-jt tbody tr:not(.ui-jt-pad):hover > * { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-jt table:focus-visible tr.ui-jt-active > * { background: var(--ui-subtle); }
.ui-jt table:focus-visible tr.ui-jt-active > :first-child { box-shadow: inset 3px 0 0 var(--ui-accent), inset 0 -1px 0 var(--ui-border); }
.ui-jt .ui-jt-pad td { height: auto; padding: 0; box-shadow: none; }
.ui-jt-empty td { color: var(--ui-muted); text-align: center; }
.ui-jt-string { color: var(--ui-fg); }
.ui-jt-number { color: var(--ui-info); font-variant-numeric: tabular-nums; }
.ui-jt-boolean { color: var(--ui-warning); }
.ui-jt-null, .ui-jt-none { color: var(--ui-muted); font-style: italic; }
.ui-jt mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--ui-warning) 35%, transparent); color: inherit; }
.ui-jt-cell { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 7px 2px 4px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-subtle); color: var(--ui-fg); font: 12px/1.3 var(--ui-mono); cursor: pointer; }
.ui-jt-cell:hover { border-color: var(--ui-strong); }
.ui-jt-cell[aria-expanded="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-jt-chev { flex: none; width: 10px; height: 10px; color: var(--ui-muted); transition: transform .15s; }
[aria-expanded="true"] > .ui-jt-chev, [aria-expanded="true"] .ui-jt-tog .ui-jt-chev { transform: rotate(90deg); }
.ui-jt-node td { padding: 0; background: color-mix(in srgb, var(--ui-subtle) 45%, transparent); }
.ui-jt-node[aria-expanded] { cursor: pointer; }
.ui-jt-line { position: sticky; left: 0; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100cqw; max-width: 100%;
  height: 100%; padding-right: 8px; font: 13px/1 var(--ui-mono); }
.ui-jt-tog { flex: none; display: inline-flex; justify-content: center; width: 14px; }
.ui-jt-key { flex: none; color: var(--ui-accent); }
.ui-jt-idx { flex: none; color: var(--ui-muted); }
.ui-jt-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-jt-size { flex: none; padding: 0 6px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font: 11px/1.6 var(--ui-font); }
.ui-jt-acts { display: flex; gap: 4px; margin-left: auto; opacity: .55; }
.ui-jt-node:hover .ui-jt-acts, .ui-jt-node.ui-jt-active .ui-jt-acts { opacity: 1; }
.ui-jt-acts .ui-jt-btn { height: 24px; padding: 0 8px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ui-jt-chev { transition: none; } }


.ui-card-input { display: grid; gap: 6px; min-width: 0; max-width: 420px; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-card-input-legend { padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 500; }
.ui-card-input-box { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-card-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-card-input-invalid .ui-card-input-box { border-color: var(--ui-danger); }
.ui-card-input-number { position: relative; grid-column: 1 / -1; border-bottom: 1px solid var(--ui-border); }
.ui-card-input-box input {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; background: transparent; color: var(--ui-fg);
  font: 15px var(--ui-font); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.ui-card-input-box input:focus { outline: none; }
.ui-card-input-box input:disabled { opacity: .55; cursor: not-allowed; }
.ui-card-input-number input { padding-right: 96px; }
.ui-card-input-expiry { border-right: 1px solid var(--ui-border); }
.ui-card-input-brand {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 2px 6px; border-radius: 4px;
  background: var(--ui-subtle); color: var(--ui-muted); font: 600 11px/1.4 var(--ui-font); text-transform: uppercase; letter-spacing: .04em;
}
.ui-card-input-brand-visa { background: #1a1f71; color: #fff; }
.ui-card-input-brand-mastercard { background: #eb001b; color: #fff; }
.ui-card-input-brand-amex { background: #2e77bc; color: #fff; }
.ui-card-input-brand-discover { background: #ff6000; color: #fff; }
.ui-card-input-hint, .ui-card-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-card-input-error { color: var(--ui-danger); }


.ui-hapbtn { display: inline-grid; gap: 4px; justify-items: stretch; font: 13px/1.4 var(--ui-font); }
.ui-hapbtn-full { display: grid; }
.ui-hapbtn-say { color: var(--ui-muted); text-align: center; }
.ui-hapbtn .ui-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.ui-hapbtn .ui-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .ui-hapbtn .ui-btn:active { transform: none; } }


.ui-rate-prompt-host { display: contents; }
.ui-rate-prompt {
  position: fixed; z-index: 55; inset: auto 12px calc(max(12px, env(safe-area-inset-bottom)) + var(--ui-rate-prompt-keyboard, 0px)) 12px; display: grid; gap: 10px; box-sizing: border-box; max-height: calc(100% - 24px); overflow: auto;
  overscroll-behavior: contain; padding: 16px; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 15px/1.45 var(--ui-font); animation: ui-rate-prompt-in .24s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ui-rate-prompt-in { from { transform: translateY(24px); opacity: 0; } }
.ui-rate-prompt h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.ui-rate-prompt p { margin: 0; color: var(--ui-muted); }
.ui-rate-prompt-stars { display: flex; justify-content: center; flex-wrap: wrap; }
.ui-rate-prompt-star { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-strong); cursor: pointer; }
.ui-rate-prompt-star svg { width: 32px; height: 32px; }
.ui-rate-prompt-star[aria-checked="true"], .ui-rate-prompt-star[data-lit] { color: var(--ui-warning); }
.ui-rate-prompt-star:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rate-prompt-acts { display: grid; gap: 6px; }
.ui-rate-prompt-pair { display: flex; flex-wrap: wrap; gap: 4px; justify-content: space-between; }
.ui-rate-prompt textarea {
  box-sizing: border-box; width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); resize: vertical;
  background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.4 var(--ui-font);
}
.ui-rate-prompt textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rate-prompt-bad { color: var(--ui-danger) !important; font-size: 14px; }
@media (min-width: 700px) { .ui-rate-prompt { inset: auto 24px calc(24px + var(--ui-rate-prompt-keyboard, 0px)) auto; width: 380px; } }
@media (prefers-reduced-motion: reduce) { .ui-rate-prompt { animation: none; } }


.ui-wish { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0;
  border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted);
  font: 500 13px/1 var(--ui-font); cursor: pointer; box-shadow: var(--ui-shadow); transition: color .15s, background .15s, transform .15s; }
.ui-wish-text { padding: 0 14px 0 10px; }
.ui-wish:hover { color: var(--ui-danger); }
.ui-wish:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-wish svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.ui-wish-on { color: var(--ui-danger); }
.ui-wish-on svg { animation: ui-wish-pop .3s ease-out; }
@keyframes ui-wish-pop { 40% { transform: scale(1.3); } }
.ui-wish-plain { border: 0; background: transparent; box-shadow: none; height: auto; min-width: 0; }
.ui-wish-plain.ui-wish-text { padding: 0; }
.ui-wish-sm { height: 30px; min-width: 30px; font-size: 12px; }
.ui-wish-sm svg { width: 15px; height: 15px; }
.ui-wish-lg { height: 44px; min-width: 44px; font-size: 14px; }
.ui-wish-lg svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .ui-wish, .ui-wish svg { transition: none; animation: none; } }


.ui-qtransfer { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-qtransfer-cols { display: grid; gap: 12px; min-width: 0; }
.ui-qtransfer-who { min-width: 0; }
.ui-qtransfer-who h3 { margin: 0 0 6px; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
/* The row scrolls by itself, sideways, and leaves the page's up and down alone. */
.ui-qtransfer-people {
  display: flex; gap: 6px; margin: 0; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; list-style: none; scrollbar-width: none; touch-action: pan-x pan-y;
}
.ui-qtransfer-people::-webkit-scrollbar { display: none; }
.ui-qtransfer-people li { flex: none; scroll-snap-align: start; }
.ui-qtransfer-person {
  display: grid; justify-items: center; gap: 4px; width: 76px; min-height: 84px; padding: 6px 2px; border: 2px solid transparent; border-radius: var(--ui-radius); background: transparent; color: var(--ui-fg);
  font: 12px/1.25 var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-qtransfer-person[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-qtransfer-person:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-qtransfer-face { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 15px; font-weight: 700; }
.ui-qtransfer-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-qtransfer-sub { display: none; color: var(--ui-muted); }
.ui-qtransfer-pay { display: grid; gap: 10px; min-width: 0; }
.ui-qtransfer-amount { margin: 0; font-size: min(40px, 11cqw); font-weight: 700; line-height: 1.15; text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-qtransfer-amount-none { color: var(--ui-muted); }
.ui-qtransfer-check { min-height: 20px; margin: 0; color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-qtransfer-check-bad { color: var(--ui-danger); }
.ui-qtransfer-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; outline: none; border-radius: var(--ui-radius); }
.ui-qtransfer-pad:focus-visible { box-shadow: var(--ui-focus); }
.ui-qtransfer-key {
  height: 54px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 600 22px/1 var(--ui-font);
  font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-qtransfer-key:active { background: var(--ui-subtle); }
.ui-qtransfer-key:disabled { opacity: .35; cursor: default; }
.ui-qtransfer-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* The slide: the fill shows how far it has come, the thumb is what the finger holds. */
.ui-qtransfer-slide {
  position: relative; height: 58px; overflow: hidden; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-fg);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-qtransfer-slide-off { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-qtransfer-fill { position: absolute; inset: 0; background: var(--ui-accent); opacity: .25; transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-qtransfer-words { position: absolute; inset: 0 12px 0 66px; display: grid; place-items: center; font-weight: 600; pointer-events: none; text-align: center; font-size: 14px; line-height: 1.2; }
.ui-qtransfer-thumb {
  position: absolute; top: 4px; left: 4px; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg); font: 700 22px/1 var(--ui-font);
  cursor: grab; touch-action: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ui-qtransfer-thumb:disabled { background: var(--ui-strong); cursor: default; }
.ui-qtransfer-thumb:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.ui-qtransfer-sliding .ui-qtransfer-thumb, .ui-qtransfer-sliding .ui-qtransfer-fill { transition: none; cursor: grabbing; }
.ui-qtransfer-other { display: grid; gap: 8px; justify-items: center; }
.ui-qtransfer-other p { margin: 0; text-align: center; }
.ui-qtransfer-other div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-qtransfer-done { display: grid; gap: 10px; justify-items: center; padding: 24px 12px; text-align: center; }
.ui-qtransfer-done h3 { margin: 0; color: var(--ui-success); font-size: 22px; }
.ui-qtransfer-done p { margin: 0; color: var(--ui-muted); }
.ui-qtransfer-fail { margin: 0; color: var(--ui-danger); text-align: center; }
.ui-qtransfer-empty { margin: 0; padding: 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@container (min-width: 600px) {
  .ui-qtransfer-cols { grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
  .ui-qtransfer-people { display: grid; gap: 4px; overflow: visible; max-height: 460px; overflow-y: auto; scroll-snap-type: none; }
  .ui-qtransfer-person { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 10px; width: 100%; min-height: 60px; padding: 6px 10px; font-size: 15px; text-align: left; }
  .ui-qtransfer-face { grid-row: span 2; }
  .ui-qtransfer-sub { display: block; font-size: 12px; }
  .ui-qtransfer-key { height: 62px; }
}
@media (hover: hover) {
  .ui-qtransfer-key:hover:not(:disabled) { background: var(--ui-subtle); }
  .ui-qtransfer-person:hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-qtransfer-thumb, .ui-qtransfer-fill { transition: none; } }


.ui-bsnote-text { container-type: inline-size; --ui-bsnote-w: 220px; --ui-bsnote-gap: 32px; }
.ui-bsnote { font-style: normal; }
.ui-bsnote-ref { display: inline-block; margin: 0 1px; padding: 0 3px; border-radius: 4px; color: var(--ui-accent); font: 700 .7em/1 var(--ui-font);
  vertical-align: super; cursor: pointer; }
.ui-bsnote-ref:hover { background: var(--ui-accent-soft); }
.ui-bsnote-mark { font-size: .8em; font-weight: 400; }
.ui-bsnote-toggle { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.ui-bsnote:has(.ui-bsnote-toggle:focus-visible) .ui-bsnote-ref { box-shadow: var(--ui-focus); }
.ui-bsnote-note { display: none; margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--ui-accent); border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
  background: var(--ui-subtle); color: var(--ui-muted); font: 13.5px/1.5 var(--ui-font); text-align: start; }
.ui-bsnote-toggle:checked ~ .ui-bsnote-note { display: block; }
.ui-bsnote-n { margin-right: 6px; color: var(--ui-accent); font-weight: 700; }
.ui-bsnote-note a { color: var(--ui-accent); }
@container (min-width: 640px) {
  .ui-bsnote-flow { padding-right: calc(var(--ui-bsnote-w) + var(--ui-bsnote-gap)); }
  .ui-bsnote-text .ui-bsnote .ui-bsnote-note { display: block; float: right; clear: right; position: relative; width: var(--ui-bsnote-w);
    margin: 4px calc(-1 * (var(--ui-bsnote-w) + var(--ui-bsnote-gap))) 10px 0; padding: 0 0 0 10px; border-left: 2px solid var(--ui-border);
    border-radius: 0; background: none; }
  .ui-bsnote-text .ui-bsnote-ref { padding: 0 1px; cursor: default; }
  .ui-bsnote-text .ui-bsnote-ref:hover { background: none; }
  .ui-bsnote-text .ui-bsnote-mark { display: none; }
  .ui-bsnote-text .ui-bsnote-toggle { display: none; }
}


.ui-paywall-sheet-host { display: contents; }
.ui-paywall-sheet {
  box-sizing: border-box; inset: auto 0 0 0; width: 100%; max-width: 100vw; max-height: calc(100dvh - env(safe-area-inset-top) - 16px); margin: 0 auto; padding: 0;
  overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0; border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.45 var(--ui-font);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.ui-paywall-sheet[open] { display: flex; flex-direction: column; animation: ui-paywall-sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
.ui-paywall-sheet::backdrop { background: var(--ui-overlay); }
.ui-paywall-sheet-held { transition: none; }
@keyframes ui-paywall-sheet-up { from { transform: translateY(100%); } }
.ui-paywall-sheet-top { position: relative; flex: none; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
.ui-paywall-sheet-grip {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-paywall-sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-paywall-sheet-grip:focus-visible { outline: none; }
.ui-paywall-sheet-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-paywall-sheet-top .ui-btn { position: relative; }
.ui-paywall-sheet-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 20px 12px; container: ui-paywall-sheet / inline-size; }
.ui-paywall-sheet-body h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.ui-paywall-sheet-good { display: grid; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; }
.ui-paywall-sheet-good li { display: flex; gap: 8px; }
.ui-paywall-sheet-good svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ui-success); }
.ui-paywall-sheet-plans { position: relative; display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.ui-paywall-sheet-plan {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; min-height: 64px; padding: 10px 12px; min-width: 0;
  border: 1.5px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); cursor: pointer;
}
.ui-paywall-sheet-plan:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-paywall-sheet-plan:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-paywall-sheet-plan input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }
.ui-paywall-sheet-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; font-weight: 600; }
.ui-paywall-sheet-badge { padding: 1px 7px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-paywall-sheet-costs { display: grid; justify-items: end; font-variant-numeric: tabular-nums; text-align: end; }
.ui-paywall-sheet-cost { font-weight: 600; }
.ui-paywall-sheet-other { color: var(--ui-muted); font-size: 13px; }
.ui-paywall-sheet-save { grid-column: 2 / -1; color: var(--ui-success); font-size: 13px; font-weight: 600; }
.ui-paywall-sheet-foot { flex: none; display: grid; gap: 6px; padding: 8px 20px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-paywall-sheet-wording { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-paywall-sheet-said { margin: 0; font-size: 14px; color: var(--ui-success); }
.ui-paywall-sheet-said[data-bad] { color: var(--ui-danger); }
.ui-paywall-sheet-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.ui-paywall-sheet-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: none; color: var(--ui-muted); font: 13px var(--ui-font); text-decoration: underline; cursor: pointer; }
.ui-paywall-sheet-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@container ui-paywall-sheet (min-width: 560px) {
  .ui-paywall-sheet-plans { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .ui-paywall-sheet-plan { grid-template-columns: 22px minmax(0, 1fr); align-content: start; }
  .ui-paywall-sheet-costs { grid-column: 1 / -1; justify-items: start; text-align: start; }
  .ui-paywall-sheet-save { grid-column: 1 / -1; }
}
/* The whole window, however wide it is: a dialog sits above any pane. */
@media (min-width: 700px) {
  .ui-paywall-sheet { inset: 0; width: min(760px, 92vw); max-height: min(88dvh, 720px); height: fit-content; margin: auto; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); }
  .ui-paywall-sheet-grip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-paywall-sheet { transition: none; } .ui-paywall-sheet[open] { animation: none; } }


.ui-bpub { display: grid; gap: 16px; min-width: 0; max-width: 340px; margin: 0; padding: 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-bpub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ui-bpub .ui-bpub-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-bpub-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ui-subtle);
  color: var(--ui-muted); font-size: 12px; font-weight: 650; }
.ui-bpub-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui-bpub-status-scheduled { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-bpub-status-published { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-bpub-group { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-bpub-group legend, .ui-bpub-label { margin-bottom: 6px; padding: 0; color: var(--ui-muted); font-size: 12px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; }
.ui-bpub-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 8px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.ui-bpub-choice:hover { border-color: var(--ui-strong); }
.ui-bpub-choice:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-bpub-choice:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-bpub-choice input { grid-row: span 2; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ui-accent); }
.ui-bpub-choice b { font-weight: 600; }
.ui-bpub-choice small { color: var(--ui-muted); font-size: 12px; }
.ui-bpub-when { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-bpub-when label { display: grid; place-items: center; height: 32px; border-radius: calc(var(--ui-radius-sm) - 2px); color: var(--ui-muted);
  font-weight: 600; cursor: pointer; }
.ui-bpub-when input { position: absolute; opacity: 0; pointer-events: none; }
.ui-bpub-when label:has(input:checked) { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ui-bpub-when label:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-bpub-input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-bpub-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bpub-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-bpub-hint { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-bpub-need { color: var(--ui-danger); }
.ui-bpub-url { display: flex; align-items: center; height: 36px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); }
.ui-bpub-url:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bpub-url span { flex: none; max-width: 55%; overflow: hidden; padding: 0 2px 0 10px; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap; }
.ui-bpub-url input { flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 0; border: 0; outline: none; background: var(--ui-surface);
  color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-bpub-url span + input { padding-left: 2px; }
.ui-bpub-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.ui-bpub-actions button { height: 38px; padding: 0 14px; border-radius: var(--ui-radius-sm); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-bpub-actions button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bpub-save { border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); }
.ui-bpub-save:hover { border-color: var(--ui-strong); }
.ui-bpub-go { border: 0; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-bpub-go:hover:not(:disabled) { filter: brightness(1.08); }
.ui-bpub-go:disabled { opacity: .45; cursor: not-allowed; }
.ui-bpub-actions .ui-bpub-unpublish { grid-column: 1 / -1; justify-self: center; height: auto; padding: 2px 6px; border: 0;
  background: none; color: var(--ui-danger); font-size: 13px; }
.ui-bpub-actions .ui-bpub-unpublish:hover { text-decoration: underline; }
.ui-bpub-foot { margin: -6px 0 0; color: var(--ui-muted); font-size: 12px; text-align: center; }
.ui-bpub-done { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-bpub-choice { transition: none; } }


.ui-feed-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; min-width: 0; padding: 14px 16px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-feed-item-body { display: grid; gap: 6px; min-width: 0; }
.ui-feed-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; }
.ui-feed-item-name { font-weight: 650; }
.ui-feed-item-tick { width: 15px; height: 15px; color: var(--ui-info); }
.ui-feed-item-handle, .ui-feed-item-head time, .ui-feed-item-head a { color: var(--ui-muted); text-decoration: none; }
.ui-feed-item-head a:hover { text-decoration: underline; }
.ui-feed-item-head a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-feed-item-head time::before { content: "·"; margin-right: 6px; }
.ui-feed-item-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ui-feed-item-media { margin-top: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; }
.ui-feed-item-slot:empty { display: none; }
.ui-feed-item-media img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.ui-feed-item-acts { display: flex; gap: 4px; margin: 4px 0 0 -8px; }
.ui-feed-item-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ui-muted); font: 500 13px/1 var(--ui-font); font-variant-numeric: tabular-nums; cursor: pointer; }
.ui-feed-item-act:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-feed-item-act:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-feed-item-act svg { width: 17px; height: 17px; }
.ui-feed-item-like:hover { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-feed-item-like[aria-pressed="true"] { color: var(--ui-danger); }
.ui-feed-item-like[aria-pressed="true"] svg { fill: currentColor; }
.ui-feed-item-comment:hover { color: var(--ui-info); background: var(--ui-info-soft); }
.ui-feed-item-share:hover { color: var(--ui-success); background: var(--ui-success-soft); }


.ui-keyboard-hud-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-keyboard-hud-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-keyboard-hud-open:hover { background: var(--ui-subtle); } }
.ui-keyboard-hud { box-sizing: border-box; position: fixed; inset: auto 0 calc(16px + env(safe-area-inset-bottom)) 0; width: min(880px, calc(100vw - 32px)); max-height: min(70dvh, 620px); margin: 0 auto; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); background: color-mix(in srgb, var(--ui-surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--ui-shadow-lg); color: var(--ui-fg); font: 14px/1.35 var(--ui-font); container-type: inline-size; }
.ui-keyboard-hud-on { display: block; animation: ui-keyboard-hud-in .14s ease-out; }
@keyframes ui-keyboard-hud-in { from { opacity: 0; transform: translateY(6px); } }
.ui-keyboard-hud-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ui-keyboard-hud-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ui-keyboard-hud-head span { color: var(--ui-muted); font-size: 13px; }
.ui-keyboard-hud-groups { display: grid; grid-template-columns: 1fr; gap: 14px 24px; }
@container (min-width: 560px) { .ui-keyboard-hud-groups { grid-template-columns: 1fr 1fr; } }
@container (min-width: 820px) { .ui-keyboard-hud-groups { grid-template-columns: 1fr 1fr 1fr; } }
.ui-keyboard-hud-group h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--ui-muted); }
.ui-keyboard-hud-group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-keyboard-hud-row { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; }
button.ui-keyboard-hud-row { cursor: pointer; }
button.ui-keyboard-hud-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { button.ui-keyboard-hud-row:hover { background: var(--ui-subtle); } }
.ui-keyboard-hud-off { color: var(--ui-muted); }
.ui-keyboard-hud-keys { display: inline-flex; flex: none; gap: 3px; }
.ui-keyboard-hud-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 24px; padding: 0 5px; box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: 5px; background: var(--ui-subtle); font: 500 13px/1 var(--ui-font); }
.ui-keyboard-hud-issues { display: grid; gap: 2px; margin: 12px 0 0; padding: 8px 10px; list-style: none; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-keyboard-hud-empty { margin: 0; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-keyboard-hud-on { animation: none; } }


.ui-batbadge-demo-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ui-accent); border-right-color: transparent; animation: ui-batbadge-demo-spin 1s linear infinite; }
html[data-go-easy] .ui-batbadge-demo-spin { animation: none; }
@keyframes ui-batbadge-demo-spin { to { transform: rotate(360deg); } }
.ui-batbadge-demo-range { width: 100%; height: 44px; margin: 0; accent-color: var(--ui-accent); }


.ui-keyword-extractor { display: grid; gap: 14px; min-width: 0; max-width: 760px; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-keyword-extractor-field { display: grid; gap: 5px; min-width: 0; }
.ui-keyword-extractor-field label { font-size: 13px; font-weight: 500; }
.ui-keyword-extractor-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 9px 12px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-keyword-extractor-field select { box-sizing: border-box; justify-self: start; height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-keyword-extractor-field textarea:hover, .ui-keyword-extractor-field select:hover { border-color: var(--ui-strong); }
.ui-keyword-extractor-field textarea:focus, .ui-keyword-extractor-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-keyword-extractor-said { margin: 0; font-weight: 600; }
.ui-keyword-extractor-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-keyword-extractor-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-keyword-extractor-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; min-width: 0; }
.ui-keyword-extractor-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-keyword-extractor-table caption { padding-bottom: 4px; font-size: 13px; font-weight: 600; text-align: left; }
.ui-keyword-extractor-table th { padding: 4px 6px; border-bottom: 1px solid var(--ui-strong); color: var(--ui-muted); font-size: 12px; font-weight: 500; text-align: right; }
.ui-keyword-extractor-table th:first-child { text-align: left; }
.ui-keyword-extractor-table td { padding: 5px 6px; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-keyword-extractor-table td:first-child { text-align: left; overflow-wrap: anywhere; }
.ui-keyword-extractor-table label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-keyword-extractor-table input { flex: none; margin: 0; accent-color: var(--ui-accent); }
.ui-keyword-extractor-table input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-keyword-extractor-over td { color: var(--ui-warning); font-weight: 600; }
.ui-keyword-extractor-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ui-keyword-extractor-tags code { flex: 1 1 200px; min-width: 0; padding: 6px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 13px/1.5 var(--ui-mono); overflow-wrap: anywhere; }
.ui-keyword-extractor-copy { height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-keyword-extractor-copy:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-keyword-extractor-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-sizeadv { display: grid; gap: 14px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-sizeadv .ui-sizeadv-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-sizeadv-controls { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ui-sizeadv-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; border: 0; }
.ui-sizeadv-choice legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-sizeadv-choice label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.ui-sizeadv-choice input { margin: 0; accent-color: var(--ui-accent); }
.ui-sizeadv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 12px; }
.ui-sizeadv-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.ui-sizeadv-field label { font-size: 13px; font-weight: 500; }
.ui-sizeadv-box { box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.ui-sizeadv-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sizeadv-box input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 14px var(--ui-font); text-align: right; font-variant-numeric: tabular-nums; }
.ui-sizeadv-box span { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-sizeadv-bad .ui-sizeadv-box { border-color: var(--ui-danger); }
.ui-sizeadv-error { margin: 0; color: var(--ui-danger); font-size: 12px; }
.ui-sizeadv-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-sizeadv-switch { padding: 3px 10px; border: 1px solid currentColor; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: 500 12px var(--ui-font); cursor: pointer; }
.ui-sizeadv-switch:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sizeadv-results { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-sizeadv-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-sizeadv-size { grid-row: span 3; display: grid; place-items: center; min-width: 52px; min-height: 52px; padding: 0 8px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 18px; font-weight: 700; }
.ui-sizeadv-none { background: var(--ui-surface); color: var(--ui-muted); }
.ui-sizeadv-garment { font-weight: 650; }
.ui-sizeadv-say { color: var(--ui-fg); font-size: 13px; }
.ui-sizeadv-fit { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ui-muted); }
.ui-sizeadv-tight { color: var(--ui-danger); }
.ui-sizeadv-loose { color: var(--ui-warning); }
.ui-sizeadv-good { color: var(--ui-success); }
.ui-sizeadv-problems { margin: 0; padding: 8px 12px 8px 26px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 12px; }
@media (max-width: 420px) { .ui-sizeadv { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .ui-sizeadv-box { transition: none; } }


.ui-readability-meter { display: grid; gap: 14px; min-width: 0; max-width: 720px; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-readability-meter-field { display: grid; gap: 5px; min-width: 0; }
.ui-readability-meter-field label { font-size: 13px; font-weight: 500; }
.ui-readability-meter-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 9px 12px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-readability-meter-field textarea:hover { border-color: var(--ui-strong); }
.ui-readability-meter-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-readability-meter-score { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); --k: var(--ui-muted); }
.ui-readability-meter-good { --k: var(--ui-success); }
.ui-readability-meter-mid { --k: var(--ui-warning); }
.ui-readability-meter-hard { --k: var(--ui-danger); }
.ui-readability-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.ui-readability-meter-ease { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--k); font-variant-numeric: tabular-nums; }
.ui-readability-meter-band { font-weight: 600; }
.ui-readability-meter-grade { color: var(--ui-muted); }
.ui-readability-meter-bar { height: 8px; overflow: hidden; border-radius: 4px; background: var(--ui-border); }
.ui-readability-meter-bar span { display: block; height: 100%; border-radius: 4px; background: var(--k); }
.ui-readability-meter-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-readability-meter-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 0; }
.ui-readability-meter-stats div { min-width: 0; }
.ui-readability-meter-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-readability-meter-stats dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-readability-meter-hardest { display: grid; gap: 6px; min-width: 0; }
.ui-readability-meter-hardest h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-readability-meter-hardest ol { display: grid; gap: 6px; margin: 0; padding: 0 0 0 20px; }
.ui-readability-meter-hardest li { overflow-wrap: anywhere; }
.ui-readability-meter-hardest small { display: block; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }


.ui-sleept-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 46px; padding: 0 14px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 600 14px/1.2 var(--ui-font); font-variant-numeric: tabular-nums;
  cursor: pointer; touch-action: manipulation;
}
.ui-sleept-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sleept-on { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-sleept-sheet {
  box-sizing: border-box; position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: min(88dvh, 620px); margin: 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 18px 18px 0 0; background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); box-shadow: var(--ui-shadow-lg);
}
.ui-sleept-sheet[open] { display: grid; gap: 12px; animation: ui-sleept-up .24s cubic-bezier(.2, .8, .2, 1); }
.ui-sleept-sheet::backdrop { background: var(--ui-overlay); }
@keyframes ui-sleept-up { from { transform: translateY(100%); } }
.ui-sleept-grip { position: sticky; top: 0; display: grid; place-items: center; height: 26px; margin: 0 -16px; background: var(--ui-surface); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ui-sleept-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-sleept-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-sleept-head h2 { margin: 0; font-size: 18px; font-weight: 650; }
.ui-sleept-close, .ui-sleept-step {
  display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 8px; border: 0; border-radius: 12px; background: var(--ui-subtle); color: var(--ui-fg);
  font: 600 16px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-sleept-close svg { width: 20px; height: 20px; }
.ui-sleept-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-sleept-choice, .ui-sleept-go, .ui-sleept-more, .ui-sleept-stop {
  min-height: 52px; padding: 6px 10px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); color: var(--ui-fg);
  font: 600 15px/1.2 var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-sleept-go, .ui-sleept-more { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-sleept-own { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; }
.ui-sleept-own output { text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sleept-fade { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.ui-sleept-fade input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ui-accent); }
.ui-sleept-left { margin: 8px 0 2px; text-align: center; font-size: 46px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ui-sleept-sub { margin: 0; text-align: center; color: var(--ui-muted); font-size: 13px; }
.ui-sleept-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ui-sleept-pick:not([hidden]) { display: grid; gap: 12px; }
.ui-sleept-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-sleept-sheet :focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) {
  .ui-sleept-choice:hover, .ui-sleept-stop:hover, .ui-sleept-open:hover { background: var(--ui-subtle); }
}
/* A whole window's width: a dialog in the middle, with room to lay the choices out, and no sheet to pull. */
@media (min-width: 640px) {
  .ui-sleept-sheet { inset: 0; width: 540px; height: fit-content; max-height: 90dvh; margin: auto; padding: 16px 20px 20px; border-radius: 18px; }
  .ui-sleept-sheet[open] { animation: none; }
  .ui-sleept-grip { display: none; }
  .ui-sleept-choices { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ui-sleept-sheet[open] { animation: none; } }


.ui-bb { --ui-bb-price: light-dark(#2a78d6, #3987e5); --ui-bb-band: light-dark(#6250d6, #9085e9);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-bb-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-bb-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-bb-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-bb-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.ui-bb-kb { height: 10px; width: 14px; border: 1px solid var(--ui-bb-band); background: color-mix(in srgb, var(--ui-bb-band) 14%, transparent); }
.ui-bb-cp { --c: var(--ui-bb-price); } .ui-bb-cb { --c: var(--ui-bb-band); }
.ui-bb-up { --k: var(--ui-success); } .ui-bb-down { --k: var(--ui-danger); }
.ui-bb-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-bb-plot, .ui-bb-y { position: relative; height: var(--h); }
.ui-bb-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-bb-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-bb-svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ui-bb-fill { fill: var(--ui-bb-band) !important; opacity: .1; }
.ui-bb-edge { stroke: var(--ui-bb-band); stroke-width: 1.25; }
.ui-bb-mid { stroke: var(--ui-bb-band); stroke-width: 1.25; stroke-dasharray: 4 3; }
.ui-bb-close { stroke: var(--ui-bb-price); stroke-width: 1.75; }
.ui-bb-cols { position: absolute; inset: 0; display: flex; }
.ui-bb-col { position: relative; flex: 1; min-width: 0; }
.ui-bb-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-bb-col:hover::before { opacity: .9; }
.ui-bb-wick { position: absolute; z-index: 2; left: 50%; width: 1px; margin-left: -.5px; background: var(--k); }
.ui-bb-body { position: absolute; z-index: 2; left: 18%; right: 18%; min-height: 1px; border-radius: 1px; background: var(--k); }
.ui-bb-out { position: absolute; z-index: 3; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid var(--k);
  border-radius: 50%; background: var(--ui-bg); }
.ui-bb-dot { position: absolute; z-index: 3; left: 50%; display: none; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--ui-bb-price); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-bb-col:hover .ui-bb-dot { display: block; }
.ui-bb-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-bb-flip .ui-bb-tip { left: auto; right: calc(50% + 10px); }
.ui-bb-col:hover .ui-bb-tip { display: block; }
.ui-bb-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-bb-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-bb-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-bb-tip em { color: var(--k); font-style: normal; font-weight: 600; }
.ui-bb-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bb-y .ui-bb-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--ui-bb-price); color: var(--ui-bg); font-weight: 600; }
.ui-bb-x { position: relative; height: 16px; margin-top: 6px; }
.ui-bb-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-bb-x .ui-bb-first { transform: none; }
.ui-bb-x .ui-bb-end { transform: translateX(-100%); }


.ui-approvals { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-approvals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ui-approvals-title { margin: 0; font-size: 18px; font-weight: 700; }
.ui-approvals-left { color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-approvals-bar { height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--ui-subtle); overflow: hidden; }
.ui-approvals-bar i { display: block; height: 100%; background: var(--ui-accent); transition: width .25s; }
.ui-approvals-body { display: grid; gap: 14px; }
.ui-approvals-side { display: none; }
.ui-approvals-main { min-width: 0; }
.ui-approvals-stack { position: relative; padding-bottom: 12px; overscroll-behavior-x: contain; }
.ui-approvals-peek { position: absolute; inset: 8px 10px 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-approvals-peek2 { inset: 16px 20px -4px; }
.ui-approvals-card { position: relative; display: grid; gap: 6px; min-height: 240px; padding: 16px; align-content: start; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); outline: none;
  touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .2s; -webkit-tap-highlight-color: transparent; }
.ui-approvals-card:focus-visible { box-shadow: var(--ui-focus); }
.ui-approvals-moving { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-approvals-still { transition: none; }
.ui-approvals-stamp { position: absolute; top: 14px; padding: 4px 10px; border: 2px solid currentColor; border-radius: var(--ui-radius-sm); font-weight: 700; opacity: 0; pointer-events: none; }
.ui-approvals-stamp-yes { left: 14px; color: var(--ui-success); }
.ui-approvals-stamp-no { right: 14px; color: var(--ui-danger); }
.ui-approvals-who { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-approvals-name { margin: 0; font-size: 20px; font-weight: 650; overflow-wrap: anywhere; }
.ui-approvals-amount { margin: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-approvals-detail { margin: 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-approvals-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 4px 0 0; font-size: 14px; }
.ui-approvals-fields dt { color: var(--ui-muted); }
.ui-approvals-fields dd { margin: 0; overflow-wrap: anywhere; }
.ui-approvals-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.ui-approvals-btn { min-height: 54px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 600 16px/1.1 var(--ui-font); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-approvals-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-approvals-btn:disabled { opacity: .5; cursor: default; }
.ui-approvals-yes { border-color: transparent; background: var(--ui-success); color: var(--ui-bg); }
.ui-approvals-no { border-color: transparent; background: var(--ui-danger); color: var(--ui-bg); }
.ui-approvals-undo { width: 100%; min-height: 46px; margin-top: 8px; font-weight: 500; font-size: 15px; }
.ui-approvals-done { padding: 28px 12px; text-align: center; }
.ui-approvals-done h3 { margin: 0 0 4px; font-size: 20px; }
.ui-approvals-done p { margin: 0; color: var(--ui-muted); }
.ui-approvals-sheet { width: 100%; max-width: none; max-height: calc(100dvh - var(--ui-approvals-kb, 0px) - 16px); margin: auto 0 var(--ui-approvals-kb, 0px); padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); overscroll-behavior: contain; box-sizing: border-box; }
.ui-approvals-sheet::backdrop { background: var(--ui-overlay); }
.ui-approvals-sheet h3 { margin: 0 0 8px; font-size: 18px; overflow-wrap: anywhere; }
.ui-approvals-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ui-approvals-chip { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-approvals-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-approvals-field { display: block; width: 100%; box-sizing: border-box; min-height: 88px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); resize: vertical; }
.ui-approvals-field:focus { outline: none; box-shadow: var(--ui-focus); }
.ui-approvals-field[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-approvals-err { margin: 4px 0 0; min-height: 20px; color: var(--ui-danger); font-size: 14px; }
.ui-approvals-sheet-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.ui-approvals-none { margin: 12px 0; color: var(--ui-muted); }
.ui-approvals-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-approvals-row[aria-current] { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; }
.ui-approvals-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-approvals-row:disabled { color: var(--ui-muted); cursor: default; }
.ui-approvals-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-approvals-row small { flex: none; }
@container (min-width: 620px) {
  .ui-approvals-body { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
  .ui-approvals-side { display: block; align-self: start; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
  .ui-approvals-card { min-height: 300px; }
}
/* A <dialog> stands over the whole window, so the window's width is the one to ask, Split View included. */
@media (min-width: 600px) {
  .ui-approvals-sheet { width: 440px; margin: auto; border-radius: calc(var(--ui-radius) + 6px); padding-bottom: 16px; }
}
@media (hover: hover) { .ui-approvals-btn:not(:disabled):not(.ui-approvals-yes):not(.ui-approvals-no):hover, .ui-approvals-chip:hover, .ui-approvals-row:not(:disabled):hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-approvals-card, .ui-approvals-bar i { transition: none; } }


.ui-sktext { display: grid; gap: 16px; --l: .85em; --g: 9px; font-size: 15px; }
.ui-sktext-sm { font-size: 13px; --g: 7px; }
.ui-sktext-lg { font-size: 18px; --g: 11px; }
.ui-sktext-p { display: grid; gap: var(--g); }
.ui-sktext-line, .ui-sktext-h { display: block; height: var(--l); border-radius: 4px;
  background: linear-gradient(90deg, var(--ui-subtle) 0%, color-mix(in srgb, var(--ui-subtle) 55%, var(--ui-strong)) 50%, var(--ui-subtle) 100%);
  background-size: 200% 100%; animation: ui-sktext-shine 1.4s ease-in-out infinite; }
.ui-sktext-h { height: 1.4em; width: 45%; border-radius: 6px; }
@keyframes ui-sktext-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-sktext-line, .ui-sktext-h { animation: none; background: var(--ui-subtle); } }


.ui-feature-grid { display: grid; gap: 28px; font: 15px/1.55 var(--ui-font); color: var(--ui-fg); }
.ui-feature-grid-head { display: grid; gap: 8px; max-width: 640px; margin: 0 auto 8px; text-align: center; }
.ui-feature-grid-title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ui-feature-grid-text { margin: 0; color: var(--ui-muted); font-size: 17px; }
.ui-feature-grid-items { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-feature-min, 260px), 100%), 1fr)); }
.ui-feature-grid-cols .ui-feature-grid-items { grid-template-columns: repeat(var(--ui-feature-cols), minmax(0, 1fr)); }
.ui-feature { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ui-feature-grid-center .ui-feature { justify-items: center; text-align: center; }
.ui-feature-grid-cards .ui-feature { padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 22px; line-height: 1; }
.ui-feature-icon svg { width: 22px; height: 22px; }
.ui-feature-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-feature-title a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-feature-title a:hover { color: var(--ui-accent); }
.ui-feature-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-feature-title a::after { content: " →"; color: var(--ui-accent); }
.ui-feature-text { margin: 0; color: var(--ui-muted); }
.ui-feature-text > :first-child { margin-top: 0; }
.ui-feature-text > :last-child { margin-bottom: 0; }
@media (max-width: 899px) { .ui-feature-grid-many .ui-feature-grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ui-feature-grid-cols .ui-feature-grid-items { grid-template-columns: minmax(0, 1fr); } }


.ui-confetti { display: contents; }
.ui-confetti-canvas { position: fixed; inset: 0; z-index: 90; width: 100vw; height: 100vh; pointer-events: none; }
.ui-confetti-canvas[hidden] { display: none; }
.ui-confetti-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-confetti-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-confetti-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-date-picker { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-date-picker-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-date-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-date-picker-box {
  display: flex; align-items: center; width: 200px; max-width: 100%; height: 38px; padding: 0 4px 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-date-picker-box:hover { border-color: var(--ui-strong); }
.ui-date-picker-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-date-picker-invalid .ui-date-picker-box { border-color: var(--ui-danger); }
.ui-date-picker-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-date-picker-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-date-picker-btn {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-date-picker-btn svg { width: 18px; height: 18px; }
.ui-date-picker-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-date-picker-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-date-picker-btn:disabled, .ui-date-picker-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.ui-date-picker-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; width: 300px; max-width: calc(100vw - 32px); margin-top: 4px; padding: 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-date-picker-pop[hidden] { display: none; }
.ui-date-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ui-date-picker-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.ui-date-picker-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-date-picker-grid th { padding: 4px 0; font-size: 12px; font-weight: 500; color: var(--ui-muted); text-align: center; }
.ui-date-picker-grid td { padding: 1px; text-align: center; }
.ui-date-picker-day {
  height: 36px; border-radius: var(--ui-radius-sm); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
  outline: none; transition: background .1s;
}
.ui-date-picker-day:hover { background: var(--ui-subtle); }
.ui-date-picker-day:focus-visible, .ui-date-picker-day:focus { box-shadow: var(--ui-focus); }
.ui-date-picker-today { font-weight: 700; color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-date-picker-day[aria-selected="true"] { background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-date-picker-day[aria-disabled="true"] { color: var(--ui-muted); opacity: .45; text-decoration: line-through; cursor: not-allowed; background: none; }
.ui-date-picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.ui-date-picker-link {
  padding: 4px 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent);
  font: 500 13px var(--ui-font); cursor: pointer;
}
.ui-date-picker-link:hover:not(:disabled) { background: var(--ui-accent-soft); }
.ui-date-picker-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-date-picker-link:disabled { color: var(--ui-muted); cursor: not-allowed; }
.ui-date-picker-keys { font-size: 12px; color: var(--ui-muted); }
.ui-date-picker-hint, .ui-date-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-date-picker-error { color: var(--ui-danger); }
.ui-date-picker-sm .ui-date-picker-box { height: 30px; width: 170px; }
.ui-date-picker-sm .ui-date-picker-box input { font-size: 13px; }
.ui-date-picker-sm .ui-date-picker-btn { width: 24px; height: 24px; }
.ui-date-picker-disabled .ui-date-picker-box { opacity: .55; }
@media (max-width: 420px) {
  .ui-date-picker-pop { right: 0; width: auto; max-width: 300px; }
  .ui-date-picker-day { height: 32px; }
  .ui-date-picker-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-date-picker-box, .ui-date-picker-day { transition: none; } }


.ui-pullquote { margin: 0 0 20px; padding: 6px 0; font: 500 22px/1.35 var(--ui-font); color: var(--ui-fg);
  letter-spacing: -.01em; overflow-wrap: anywhere; }
.ui-pullquote-left, .ui-pullquote-right { width: min(45%, 320px); }
.ui-pullquote-left { float: left; margin-right: 28px; border-right: 3px solid var(--ui-accent); padding-right: 20px; }
.ui-pullquote-right { float: right; margin-left: 28px; border-left: 3px solid var(--ui-accent); padding-left: 20px; }
.ui-pullquote-full { clear: both; margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border); font-size: 26px; text-align: center; }
.ui-pullquote-text { margin: 0; }
.ui-pullquote-text::before { content: "“"; }
.ui-pullquote-text::after { content: "”"; }
.ui-pullquote-by { margin: 8px 0 0; font: 14px/1.4 var(--ui-font); color: var(--ui-muted); letter-spacing: 0; }
.ui-pullquote-by::before { content: "— "; }
@media (max-width: 560px) {
  .ui-pullquote-left, .ui-pullquote-right { float: none; width: auto; margin: 20px 0; }
}


.ui-bshare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 14px/1 var(--ui-font); color: var(--ui-fg); --s: 38px; }
.ui-bshare-sm { --s: 32px; } .ui-bshare-lg { --s: 46px; }
.ui-bshare-label { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-bshare-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-bshare-list a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--s); height: var(--s); padding: 0;
  border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); text-decoration: none;
  transition: color .15s, background .15s, border-color .15s; }
.ui-bshare-list a:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-bshare-list a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bshare-list svg { flex: none; width: calc(var(--s) * .45); height: calc(var(--s) * .45); }
.ui-bshare-soft .ui-bshare-list a { border-color: transparent; background: var(--ui-subtle); }
.ui-bshare-soft .ui-bshare-list a:hover { background: var(--ui-accent-soft); }
.ui-bshare-ghost .ui-bshare-list a { border-color: transparent; background: none; color: var(--ui-muted); }
.ui-bshare-ghost .ui-bshare-list a:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-bshare-labels .ui-bshare-list a { padding: 0 14px 0 11px; font-weight: 500; }
.ui-bshare-column { flex-direction: column; align-items: flex-start; }
.ui-bshare-column .ui-bshare-list { flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .ui-bshare-list a { transition: none; } }


.ui-menu-bar { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-menu-bar-top {
  height: 30px; padding: 0 11px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg);
  font: inherit; cursor: pointer;
}
.ui-menu-bar-top:hover, .ui-menu-bar-top[aria-expanded="true"] { background: var(--ui-subtle); }
.ui-menu-bar-top:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-menu-bar-list {
  min-width: 200px; max-width: min(320px, calc(100vw - 16px)); margin: auto; padding: 5px; list-style: none;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-menu-bar-list:popover-open { animation: ui-menu-bar-in .1s ease-out; }
@keyframes ui-menu-bar-in { from { opacity: 0; transform: translateY(-3px); } }
@supports (position-area: bottom) {
  .ui-menu-bar-list { inset: auto; margin: 3px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }
}
@supports not (position-area: bottom) { .ui-menu-bar-list::backdrop { background: var(--ui-overlay); } }
.ui-menu-bar-item {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 7px 10px 7px 28px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; position: relative;
}
.ui-menu-bar-item > span:first-of-type { flex: 1; }
.ui-menu-bar-item:hover, .ui-menu-bar-item:focus { outline: none; background: var(--ui-subtle); }
.ui-menu-bar-item:focus-visible { box-shadow: var(--ui-focus); }
.ui-menu-bar-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-menu-bar-item[aria-disabled="true"]:hover { background: transparent; }
.ui-menu-bar-danger { color: var(--ui-danger); }
.ui-menu-bar-danger:hover, .ui-menu-bar-danger:focus { background: var(--ui-danger-soft); }
.ui-menu-bar-tick { position: absolute; left: 9px; width: 14px; height: 14px; }
.ui-menu-bar-key { color: var(--ui-muted); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.ui-menu-bar-sep { height: 1px; margin: 4px 6px; background: var(--ui-border); }
@media (prefers-reduced-motion: reduce) { .ui-menu-bar-list:popover-open { animation: none; } }


.ui-cheque { --ink: var(--ui-fg); position: relative; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; min-width: 0; max-width: 680px;
  padding: 20px 24px 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border)); border-radius: 6px;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--ui-accent) 5%, transparent) 7px 8px),
              linear-gradient(180deg, color-mix(in srgb, var(--ui-accent-soft) 55%, var(--ui-surface)), var(--ui-surface));
  color: var(--ink); font: 13px/1.35 var(--ui-font); }
.ui-cheque-drawer p { margin: 0; }
.ui-cheque-drawer-name { font-weight: 650; }
.ui-cheque-small { color: var(--ui-muted); font-size: 11px; }
.ui-cheque-corner { display: grid; justify-items: end; gap: 10px; }
.ui-cheque-no { margin: 0; font: 600 14px var(--ui-mono); letter-spacing: .05em; }
.ui-cheque-datebox { display: flex; align-items: baseline; gap: 8px; }
.ui-cheque-cap { color: var(--ui-muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.ui-cheque-line { flex: 1; min-width: 0; padding: 0 4px 1px; border-bottom: 1px solid var(--ink); font: 500 15px var(--ui-font); overflow-wrap: anywhere; }
.ui-cheque-datebox .ui-cheque-line { min-width: 120px; text-align: center; }
.ui-cheque-pay { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 14px; }
.ui-cheque-payto { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.ui-cheque-payto .ui-cheque-cap { width: 64px; white-space: normal; line-height: 1.2; }
.ui-cheque-figures { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 3px;
  background: var(--ui-surface); font: 600 16px var(--ui-mono); font-variant-numeric: tabular-nums; }
.ui-cheque-wordsrow { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.ui-cheque-words { flex: 1; min-width: 0; padding: 0 4px 1px; overflow: hidden; border-bottom: 1px solid var(--ink); font-size: 14px; font-style: italic; white-space: nowrap; }
.ui-cheque-words::after { content: " ———————————————————————————" / ""; color: var(--ui-muted); font-style: normal; letter-spacing: -.1em; }
.ui-cheque-unit { flex: none; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ui-cheque-bank { align-self: end; }
.ui-cheque-bank p { margin: 0; }
.ui-cheque-bank-name { font-weight: 650; }
.ui-cheque-memo { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; max-width: 300px; }
.ui-cheque-sign { align-self: end; display: grid; gap: 2px; width: 230px; max-width: 100%; }
.ui-cheque-signature { min-height: 30px; padding: 0 6px; border-bottom: 1px solid var(--ink); font: italic 24px/30px "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; overflow: hidden; white-space: nowrap; }
.ui-cheque-sign .ui-cheque-cap { text-align: center; }
.ui-cheque-micr { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 8px; font: 15px/1 "MICR E13B", "Apple Symbols", var(--ui-mono); letter-spacing: .14em; white-space: nowrap; overflow: hidden; }
.ui-cheque-void { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ui-cheque-void span { padding: 2px 28px; border: 4px solid var(--ui-danger); border-radius: 8px; color: var(--ui-danger); font: 800 56px/1.1 var(--ui-font);
  letter-spacing: .18em; opacity: .75; transform: rotate(-14deg); }
@media (max-width: 560px) { .ui-cheque { grid-template-columns: 1fr; padding: 16px; } .ui-cheque-corner { justify-items: start; } .ui-cheque-pay { flex-wrap: wrap; } }
@media print { .ui-cheque { border-color: #000; background: #fff; color: #000; --ink: #000; } }


.ui-id-card { --t: var(--ui-accent); --tf: var(--ui-accent-fg); position: relative; display: flex; flex-direction: column; width: 240px; max-width: 100%;
  min-width: 0; border-radius: 14px; background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.4 var(--ui-font); box-shadow: var(--ui-shadow);
  border: 1px solid var(--ui-border); overflow: hidden; }
.ui-id-card-success { --t: var(--ui-success); --tf: #fff; }
.ui-id-card-warning { --t: var(--ui-warning); --tf: #fff; }
.ui-id-card-danger { --t: var(--ui-danger); --tf: #fff; }
.ui-id-card-info { --t: var(--ui-info); --tf: #fff; }
.ui-id-card-neutral { --t: var(--ui-fg); --tf: var(--ui-bg); }
.ui-id-card-band { display: grid; justify-items: center; gap: 6px; padding: 10px 14px 12px; background: var(--t); color: var(--tf); }
.ui-id-card-hole { width: 36px; height: 7px; border-radius: 4px; background: var(--ui-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.ui-id-card-band-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.ui-id-card-org { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ui-id-card-logo { max-height: 20px; max-width: 80px; object-fit: contain; }
.ui-id-card-kind { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-id-card-body { display: grid; justify-items: center; gap: 4px; padding: 18px 16px 14px; text-align: center; }
.ui-id-card-photo { width: 96px; height: 96px; margin-bottom: 8px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px var(--ui-surface), 0 0 0 4px var(--ui-border); }
.ui-id-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-id-card-photo > .ui-id-card-initials { --s: 96px; }
.ui-id-card-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.ui-id-card-role { font-weight: 500; }
.ui-id-card-dept { color: var(--ui-muted); }
.ui-id-card-number { margin-top: 6px; font: 600 13px/1.3 var(--ui-mono); letter-spacing: .1em; }
.ui-id-card-dates { display: flex; justify-content: center; gap: 8px 18px; margin: 10px 0 0; }
.ui-id-card-dates div { display: grid; gap: 1px; }
.ui-id-card-dates dt { color: var(--ui-muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-id-card-dates dd { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-id-card-expired .ui-id-card-dates dd:last-of-type, .ui-id-card-expired .ui-id-card-stamp { color: var(--ui-danger); }
.ui-id-card-stamp { position: absolute; top: 46%; left: 50%; padding: 2px 10px; border: 3px solid currentColor; border-radius: 4px; color: var(--ui-danger);
  font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-18deg); opacity: .8; pointer-events: none; }
.ui-id-card-code { display: grid; justify-items: center; padding: 0 14px 14px; }
.ui-id-card-code:empty { display: none; }
.ui-id-card-landscape { width: 380px; }
.ui-id-card-landscape .ui-id-card-body { grid-template-columns: auto 1fr; justify-items: start; column-gap: 16px; text-align: left; }
.ui-id-card-landscape .ui-id-card-photo { grid-row: 1 / span 6; margin-bottom: 0; }
.ui-id-card-landscape .ui-id-card-dates { justify-content: flex-start; }
@media print { .ui-id-card { box-shadow: none; } .ui-id-card-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }


.ui-locbtn { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-locbtn-in { display: grid; gap: 10px; }
.ui-locbtn-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-locbtn-pin { width: 18px; height: 18px; flex: none; }
.ui-locbtn-place { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-locbtn-place[data-old] { opacity: .6; }
.ui-locbtn-coords { font: 500 15px/1.4 var(--ui-mono); overflow-wrap: anywhere; }
.ui-locbtn-near { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ui-muted); }
.ui-locbtn-grade { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ui-locbtn-grade-good { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-locbtn-grade-fair { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-locbtn-grade-poor, .ui-locbtn-grade-unknown { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-locbtn-say { margin: 0; color: var(--ui-muted); }
.ui-locbtn-say:empty { display: none; }
.ui-locbtn-say[data-bad] { color: var(--ui-fg); }
/* With room, the answer stands beside the button rather than under it. */
@container (min-width: 420px) {
  .ui-locbtn-in { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .ui-locbtn-bar { grid-row: 1 / span 2; flex-direction: column; align-items: stretch; }
}


.ui-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; min-width: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
}
.ui-toolbar-vertical { flex-direction: column; align-items: stretch; width: fit-content; }
.ui-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ui-toolbar-vertical :is(.ui-toolbar-group, .ui-toggle-group, .ui-button-group) { flex-direction: column; align-items: stretch; }
.ui-toolbar-sep { align-self: stretch; flex: none; width: 1px; min-height: 24px; margin: 2px 4px; background: var(--ui-border); }
.ui-toolbar-vertical .ui-toolbar-sep { width: auto; height: 1px; min-height: 0; margin: 4px 2px; }
.ui-toolbar-spacer { flex: 1 1 0; min-width: 0; }
.ui-toolbar :is(select, input:not([type=checkbox]):not([type=radio])) {
  height: 30px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1 var(--ui-font);
}
.ui-toolbar :is(select, input):focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }


.ui-menu { display: grid; gap: 4px; min-width: 0; padding: 4px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-menu-bordered { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-menu ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ui-menu-section + .ui-menu-section { margin-top: 6px; }
.ui-menu-title {
  margin: 0; padding: 6px 10px 4px; color: var(--ui-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.ui-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: inherit; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer; transition: background .12s, color .12s;
}
.ui-menu-item:hover { background: var(--ui-subtle); }
.ui-menu-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-menu-item[aria-current] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-menu-item[aria-disabled="true"], .ui-menu-item:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ui-menu-danger { color: var(--ui-danger); }
.ui-menu-danger:hover { background: var(--ui-danger-soft); }
.ui-menu-icon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; font-size: 16px; line-height: 1; }
.ui-menu-icon svg { width: 18px; height: 18px; }
.ui-menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-menu-key { flex: none; color: var(--ui-muted); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.ui-menu-item[aria-current] .ui-menu-key { color: inherit; opacity: .8; }
.ui-menu-badge {
  flex: none; min-width: 20px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--ui-border);
  background: var(--ui-surface); color: var(--ui-fg); font-size: 12px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ui-menu-item[aria-current] .ui-menu-badge { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-menu-sep { height: 1px; margin: 5px 6px; background: var(--ui-border); }
.ui-menu-sm .ui-menu-item { min-height: 30px; padding: 4px 8px; font-size: 13px; }
.ui-menu-sm .ui-menu-title { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ui-menu-item { transition: none; } }


.ui-form-row { display: flex; gap: var(--ui-form-row-gap, 12px); align-items: flex-start; min-width: 0; }
.ui-form-row > * { flex: 1 1 0; min-width: 0; }
.ui-form-row-cols { display: grid; grid-template-columns: var(--ui-form-row-cols); }
.ui-form-row-center { align-items: center; }
.ui-form-row-end { align-items: flex-end; }
@media (max-width: 559px) {
  .ui-form-row:not(.ui-form-row-keep) { flex-direction: column; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .ui-form-row:not(.ui-form-row-keep) > * { flex-basis: auto; }
}


.ui-schemainf { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-schemainf .ui-schemainf-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-schemainf-field { display: grid; gap: 4px; min-width: 0; }
.ui-schemainf-field label { font-size: 13px; font-weight: 500; }
.ui-schemainf-text { box-sizing: border-box; width: 100%; min-height: 150px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 12.5px/1.5 var(--ui-mono); resize: vertical; }
.ui-schemainf-text:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-schemainf-text[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-schemainf-error { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-schemainf-sum { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-schemainf-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-schemainf-scroll { overflow: auto; max-height: 360px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-schemainf-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-schemainf table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-schemainf th, .ui-schemainf td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); overflow-wrap: anywhere; }
.ui-schemainf thead th { position: sticky; top: 0; background: var(--ui-subtle); font-weight: 600; white-space: nowrap; }
.ui-schemainf tbody tr:last-child th, .ui-schemainf tbody tr:last-child td { border-bottom: 0; }
.ui-schemainf tbody th { font: 500 12.5px var(--ui-mono); }
.ui-schemainf-opt { color: var(--ui-muted); }
.ui-schemainf-tag { display: inline-block; margin: 0 4px 2px 0; padding: 0 6px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; }
.ui-schemainf-out { display: grid; gap: 4px; min-width: 0; margin: 0; }
.ui-schemainf-out figcaption { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-schemainf-out pre { max-height: 320px; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); font: 12px/1.5 var(--ui-mono); }
.ui-schemainf-out pre:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-link { display: inline; color: var(--ui-accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; border-radius: 3px; cursor: pointer; transition: color .15s, text-decoration-color .15s; }
.ui-link:hover { color: color-mix(in srgb, var(--ui-accent) 80%, var(--ui-fg)); text-decoration-thickness: 2px; }
.ui-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-link-inherit { color: inherit; }
.ui-link-inherit:hover { color: var(--ui-accent); }
.ui-link-muted { color: var(--ui-muted); }
.ui-link-muted:hover { color: var(--ui-fg); }
.ui-link-hover { text-decoration: none; }
.ui-link-hover:hover { text-decoration: underline; }
.ui-link-none, .ui-link-none:hover { text-decoration: none; }
.ui-link-medium { font-weight: 500; }
.ui-link-ext { display: inline-block; width: .8em; height: .8em; margin-left: .2em; vertical-align: -.02em; }
@media (prefers-reduced-motion: reduce) { .ui-link { transition: none; } }


.ui-milestone-list { display: grid; gap: 14px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-milestone-list-head { display: grid; gap: 6px; }
.ui-milestone-list-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-milestone-list-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-milestone-list-sum { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-milestone-list-bar { height: 6px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-milestone-list-fill { display: block; height: 100%; border-radius: inherit; background: var(--ui-success); }
.ui-milestone-list-items { margin: 0; padding: 0; list-style: none; }
.ui-milestone-list-item { --t: var(--ui-strong); position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-bottom: 18px; }
.ui-milestone-list-item:last-child { padding-bottom: 0; }
.ui-milestone-list-item::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--ui-border); }
.ui-milestone-list-item:last-child::before { display: none; }
.ui-milestone-list-done::before { background: var(--ui-success); }
.ui-milestone-list-done { --t: var(--ui-success); }
.ui-milestone-list-current { --t: var(--ui-accent); }
.ui-milestone-list-late { --t: var(--ui-danger); }
.ui-milestone-list-mark { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--t); border-radius: 50%; background: var(--ui-surface); color: #fff; }
.ui-milestone-list-mark svg { width: 12px; height: 12px; }
.ui-milestone-list-done .ui-milestone-list-mark { background: var(--ui-success); }
.ui-milestone-list-current .ui-milestone-list-mark { box-shadow: var(--ui-focus); }
.ui-milestone-list-current .ui-milestone-list-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); }
.ui-milestone-list-late .ui-milestone-list-mark { color: var(--ui-danger); font-size: 13px; font-weight: 800; line-height: 1; }
.ui-milestone-list-body { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.ui-milestone-list-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ui-milestone-list-name { margin: 0; font-size: 14px; font-weight: 600; }
.ui-milestone-list-name a { color: inherit; text-decoration: none; }
.ui-milestone-list-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-milestone-list-name a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-milestone-list-coming .ui-milestone-list-name { color: var(--ui-muted); font-weight: 500; }
.ui-milestone-list-when { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-milestone-list-late .ui-milestone-list-when { color: var(--ui-danger); font-weight: 600; }
.ui-milestone-list-text { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-milestone-list-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-milestone-list-progress .ui-milestone-list-bar { flex: 1; max-width: 240px; }
.ui-milestone-list-progress .ui-milestone-list-fill { background: var(--t); }


.ui-sortable-list { display: grid; gap: 8px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-sortable-list-label { margin: 0; font-size: 13px; font-weight: 500; }
.ui-sortable-list-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-sortable-list-item {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: grab; user-select: none; -webkit-user-select: none;
  transition: border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.ui-sortable-list-item:hover { border-color: var(--ui-strong); }
.ui-sortable-list-item:focus-visible { outline: none; box-shadow: var(--ui-focus); border-color: var(--ui-accent); }
.ui-sortable-list-lifted { border-color: var(--ui-accent); box-shadow: var(--ui-shadow), 0 0 0 2px var(--ui-accent); transform: scale(1.01); cursor: grabbing; }
.ui-sortable-list-dragging { opacity: .4; }
.ui-sortable-list-before::before, .ui-sortable-list-after::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--ui-accent);
}
.ui-sortable-list-before::before { top: -5px; }
.ui-sortable-list-after::after { bottom: -5px; }
.ui-sortable-list-grip { flex: none; display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; color: var(--ui-muted); }
.ui-sortable-list-grip i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ui-sortable-list-num { flex: none; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sortable-list-text { display: grid; gap: 1px; min-width: 0; }
.ui-sortable-list-hint-item { font-size: 13px; color: var(--ui-muted); }
.ui-sortable-list-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-sortable-list-item { transition: none; } .ui-sortable-list-lifted { transform: none; } }


.ui-waveform-view { --ui-waveform-view-p: 0; container-type: inline-size; display: grid; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-waveform-view-title { margin: 0; font-weight: 600; }
.ui-waveform-view-track {
  container-type: inline-size; position: relative; height: 88px; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-subtle);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none;
}
.ui-waveform-view-track:focus-visible { box-shadow: var(--ui-focus); }
.ui-waveform-view-track svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ui-waveform-view-all { fill: var(--ui-muted); opacity: .55; }
.ui-waveform-view-played svg { fill: var(--ui-accent); }
.ui-waveform-view-played { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ui-waveform-view-p) * 1%) 0 0); pointer-events: none; }
.ui-waveform-view-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ui-danger); transform: translateX(calc(var(--ui-waveform-view-p) * 1cqw - 1px)); pointer-events: none; }
.ui-waveform-view-tip {
  position: absolute; left: 50%; top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font: 600 13px/1.4 var(--ui-font);
  font-variant-numeric: tabular-nums; transform: translateX(-50%); opacity: 0; pointer-events: none;
}
/* An attribute, not a class: the root's class is rewritten when the reduced-motion setting changes, which would drop this in mid-scrub. */
.ui-waveform-view[data-scrubbing] .ui-waveform-view-tip { opacity: 1; }
.ui-waveform-view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-waveform-view-clock { margin-left: auto; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-waveform-view-say { margin: 0; color: var(--ui-muted); font-size: 13px; }
/* A tablet, or a wide pane: more height for a finger and for the shape of the sound. */
@container (min-width: 400px) { .ui-waveform-view-track { height: 132px; } }


.ui-colnav { display: grid; gap: 4px; min-width: 0; padding: 4px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-colnav ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ui-colnav-group { margin: 0; }
.ui-colnav-group + .ui-colnav-group { margin-top: 4px; }
.ui-colnav-title {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--ui-radius-sm); color: var(--ui-fg);
  font-weight: 600; cursor: pointer; list-style: none; user-select: none;
}
.ui-colnav-title::-webkit-details-marker { display: none; }
.ui-colnav-title:hover { background: var(--ui-subtle); }
.ui-colnav-title:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-colnav-chev { flex: none; width: 14px; height: 14px; color: var(--ui-muted); transition: transform .15s; }
.ui-colnav-group[open] > .ui-colnav-title .ui-colnav-chev { transform: rotate(90deg); }
.ui-colnav-title span { flex: 1; }
.ui-colnav-group > ul { margin: 2px 0 6px 16px; padding-left: 8px; border-left: 1px solid var(--ui-border); }
.ui-colnav-link {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--ui-radius-sm); color: var(--ui-muted);
  text-decoration: none; transition: color .12s, background .12s;
}
.ui-colnav-link:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-colnav-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-colnav-link[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); font-weight: 500; }
.ui-colnav-link span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-colnav-badge {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ui-subtle); border: 1px solid var(--ui-border);
  color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: center;
}
.ui-colnav-top > .ui-colnav-link { font-weight: 600; color: var(--ui-fg); }
@media (prefers-reduced-motion: reduce) { .ui-colnav-chev, .ui-colnav-link { transition: none; } }


.ui-mscore { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; max-width: 380px; padding: 14px 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.35 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-mscore-sm { gap: 6px; padding: 10px 12px; font-size: 13px; }
.ui-mscore-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ui-muted); font-size: 12px; }
.ui-mscore-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mscore-status { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px;
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ui-mscore-live .ui-mscore-status { background: var(--ui-danger); color: var(--ui-bg); }
.ui-mscore-live .ui-mscore-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: ui-mscore-pulse 1.4s ease-in-out infinite; }
@keyframes ui-mscore-pulse { 50% { opacity: .2; } }
.ui-mscore-halftime .ui-mscore-status { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-mscore-postponed .ui-mscore-status { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-mscore-teams { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-mscore-team { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; }
.ui-mscore-crest { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c, var(--ui-muted)); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; overflow: hidden; }
.ui-mscore-crest img { width: 100%; height: 100%; object-fit: contain; background: var(--ui-surface); }
.ui-mscore-sm .ui-mscore-crest { width: 22px; height: 22px; font-size: 8px; }
.ui-mscore-name { min-width: 0; font-size: 15px; font-weight: 600; }
.ui-mscore-sm .ui-mscore-name { font-size: 14px; }
.ui-mscore-name small { margin-left: 4px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-mscore-goals { font-size: 24px; line-height: 1; font-weight: 800; min-width: 1ch; text-align: right; }
.ui-mscore-sm .ui-mscore-goals { font-size: 17px; }
.ui-mscore-scorers { grid-column: 2 / -1; margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-mscore-final .ui-mscore-lost .ui-mscore-name, .ui-mscore-final .ui-mscore-lost .ui-mscore-goals { color: var(--ui-muted); font-weight: 500; }
.ui-mscore-final .ui-mscore-won .ui-mscore-name { font-weight: 800; }
.ui-mscore-kick { font-size: 15px; font-weight: 700; color: var(--ui-fg); }
.ui-mscore-note { margin: 0; padding-top: 8px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; }
.ui-mscore-link { position: absolute; inset: 0; border-radius: inherit; }
.ui-mscore-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mscore:has(.ui-mscore-link:hover) { border-color: var(--ui-strong); }
@media (prefers-reduced-motion: reduce) { .ui-mscore-live .ui-mscore-status::before { animation: none; } }


html:has(.ui-bottom-sheet[open]) { overflow: hidden; }
.ui-bottom-sheet-host { display: contents; }
.ui-bottom-sheet {
  position: fixed; inset: auto 0 var(--ui-bottom-sheet-kb, 0px) 0; box-sizing: border-box; flex-direction: column;
  width: min(var(--ui-bottom-sheet-w, 640px), 100vw); max-width: 100vw;
  height: calc(100dvh - var(--ui-bottom-sheet-kb, 0px) - max(12px, env(safe-area-inset-top))); max-height: none;
  margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0; overscroll-behavior: contain;
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; background: var(--ui-surface); color: var(--ui-fg);
  /* The shadow below is what shows when the sheet is pulled above its top stop. */
  box-shadow: var(--ui-shadow-lg), 0 160px 0 0 var(--ui-surface); font: 15px/1.5 var(--ui-font);
  transform: translateY(100%); will-change: transform;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), overlay .32s allow-discrete, display .32s allow-discrete;
}
.ui-bottom-sheet[open] { display: flex; transform: translateY(var(--ui-bottom-sheet-y, 50%)); }
@starting-style { .ui-bottom-sheet[open] { transform: translateY(100%); } }
.ui-bottom-sheet::backdrop { background: var(--ui-overlay); }
.ui-bottom-sheet-grip {
  display: grid; place-items: center; flex: none; width: 100%; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.ui-bottom-sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-bottom-sheet-grip:focus-visible { outline: none; }
.ui-bottom-sheet-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bottom-sheet-head {
  position: relative; display: flex; align-items: center; gap: 8px; flex: none; margin-top: -8px; padding: 0 8px 8px 20px;
  border-bottom: 1px solid var(--ui-border); touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.ui-bottom-sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-bottom-sheet-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
@media (hover: hover) { .ui-bottom-sheet-close:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-bottom-sheet-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bottom-sheet-close svg { width: 18px; height: 18px; }
.ui-bottom-sheet-body {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* --hide is the part of the sheet below the screen at this stop, so that the end of a list can still be reached. */
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom) + var(--ui-bottom-sheet-hide, 0px));
}
.ui-bottom-sheet-body > :first-child { margin-top: 0; }
.ui-bottom-sheet-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ui-bottom-sheet { transition: none; } }


.ui-footer { container: ui-footer / inline-size; color: var(--ui-fg); font: 14px/1.5 var(--ui-font); border-top: 1px solid var(--ui-border); }
.ui-footer-subtle { background: var(--ui-subtle); }
.ui-footer-in { max-width: 1140px; margin-inline: auto; padding: 40px 24px 24px; }
.ui-footer-top { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.ui-footer-brand { flex: 1 1 220px; max-width: 320px; }
.ui-footer-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-fg); font-size: 17px; font-weight: 650; text-decoration: none; border-radius: var(--ui-radius-sm); }
.ui-footer-name :is(img, svg) { height: 24px; width: auto; }
.ui-footer-tagline { margin: 8px 0 0; color: var(--ui-muted); }
.ui-footer-cols { display: flex; flex: 2 1 420px; flex-wrap: wrap; gap: 24px 40px; }
.ui-footer-col { flex: 1 1 120px; min-width: 0; }
.ui-footer-col h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-fg); }
.ui-footer-col ul, .ui-footer-links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-footer a { color: var(--ui-muted); text-decoration: none; border-radius: var(--ui-radius-sm); }
.ui-footer a:hover { color: var(--ui-fg); text-decoration: underline; }
.ui-footer a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 32px; padding-top: 18px;
  border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px;
}
.ui-footer-bottom p { margin: 0; }
.ui-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ui-footer-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ui-footer-end:empty { display: none; }
@container ui-footer (max-width: 640px) {
  .ui-footer-in { padding: 32px 16px 20px; }
  .ui-footer-cols { gap: 20px 24px; }
  .ui-footer-end { margin-left: 0; width: 100%; }
}


.ui-assetl { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-assetl h3 { margin: 0; font-size: 18px; }
.ui-assetl-cols { display: grid; gap: 12px; min-width: 0; }
.ui-assetl-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-assetl-recent { display: grid; gap: 4px; min-width: 0; }
.ui-assetl-recent h4 { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-assetl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-assetl-chip { min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 14px var(--ui-mono); cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
.ui-assetl-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-assetl-card { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-assetl-card h4 { margin: 0; font-size: 19px; overflow-wrap: anywhere; outline: none; }
.ui-assetl-tag { font: 600 14px var(--ui-mono); overflow-wrap: anywhere; }
.ui-assetl-state { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--ui-subtle); font: 700 13px var(--ui-font); }
.ui-assetl-state[data-status="in_service"] { background: var(--ui-success-soft); }
.ui-assetl-state[data-status="out_of_service"], .ui-assetl-state[data-status="missing"] { background: var(--ui-danger); color: #fff; }
.ui-assetl-todo { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-assetl-todo li { padding: 8px 12px; border-left: 6px solid var(--ui-success); border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); font-weight: 600; }
.ui-assetl-todo li[data-level="warn"] { border-color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-assetl-todo li[data-level="stop"] { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-assetl-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; }
.ui-assetl-facts dt { color: var(--ui-muted); }
.ui-assetl-facts dd { margin: 0; overflow-wrap: anywhere; }
.ui-assetl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-assetl-acts > * { flex: 1 1 140px; }
.ui-assetl-hist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-assetl-hist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-top: 1px solid var(--ui-border); }
.ui-assetl-hist time { color: var(--ui-muted); font: 13px var(--ui-mono); }
.ui-assetl-hist small { grid-column: 2; color: var(--ui-muted); }
.ui-assetl-more { min-height: 44px; }
.ui-assetl-more summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.ui-assetl-more summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-assetl-miss { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-warning); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-assetl-miss h4 { margin: 0; font-size: 17px; overflow-wrap: anywhere; outline: none; }
.ui-assetl-miss p { margin: 0; }
.ui-assetl-near { display: grid; gap: 6px; }
.ui-assetl-pick { display: grid; gap: 0; box-sizing: border-box; width: 100%; min-height: 52px; padding: 6px 12px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 600 15px var(--ui-font); text-align: left; cursor: pointer; }
.ui-assetl-pick small { color: var(--ui-muted); font: 500 13px var(--ui-mono); }
.ui-assetl-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-assetl-empty { margin: 0; padding: 20px 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
@container (min-width: 640px) {
  .ui-assetl-cols { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
}


.ui-miniplay-host { display: contents; }
.ui-miniplay {
  --ui-miniplay-bar: 64px; position: fixed; inset: 0; z-index: 40; pointer-events: none; color: var(--ui-fg); font: 14px/1.3 var(--ui-font); container: ui-miniplay / inline-size;
  transform: translateY(calc(100% - var(--ui-miniplay-bar) - var(--ui-miniplay-above, 56px) - env(safe-area-inset-bottom, 0px)));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
.ui-miniplay-open { transform: none; pointer-events: auto; }
:root:has(.ui-miniplay-open) { overflow: hidden; }
/* Sits at the top of the panel; what comes up behind it is the rest of the panel. */
.ui-miniplay-bar {
  position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 4px; height: var(--ui-miniplay-bar); margin: 0 8px; padding: 0 6px 0 4px; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: 14px; background: var(--ui-surface); box-shadow: var(--ui-shadow); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: opacity .2s;
}
.ui-miniplay-open .ui-miniplay-bar { opacity: 0; }
.ui-miniplay-main { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: none; }
.ui-miniplay-main:focus-visible, .ui-miniplay-play:focus-visible, .ui-miniplay-grip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-miniplay-art { flex: none; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 8px; background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 700; }
.ui-miniplay-art img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ui-miniplay-names { display: grid; flex: 1; min-width: 0; }
.ui-miniplay-names b, .ui-miniplay-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-miniplay-names b { font-weight: 600; }
.ui-miniplay-names span { color: var(--ui-muted); font-size: 12px; }
.ui-miniplay-play { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ui-fg); cursor: pointer; touch-action: manipulation; }
.ui-miniplay-play svg { width: 28px; height: 28px; }
.ui-miniplay-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ui-subtle); }
.ui-miniplay-line i { display: block; height: 100%; background: var(--ui-accent); transform-origin: 0 50%; transform: scaleX(var(--ui-miniplay-at, 0)); }
.ui-miniplay-seek { display: none; flex: 1.2; align-items: center; min-width: 0; }
.ui-miniplay-seek .ui-scrubbar { flex: 1; }
.ui-miniplay-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-bg); opacity: 0; visibility: hidden; overscroll-behavior: contain;
  transition: opacity .2s, visibility 0s .3s;
}
.ui-miniplay-open .ui-miniplay-body { opacity: 1; visibility: visible; transition: opacity .2s; }
.ui-miniplay-moving .ui-miniplay-body { visibility: visible; transition: none; pointer-events: none; }
.ui-miniplay-moving, .ui-miniplay-moving .ui-miniplay-bar { transition: none; }
.ui-miniplay-grip {
  flex: none; display: grid; place-items: center; width: 100%; height: 44px; margin-top: env(safe-area-inset-top, 0px); padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.ui-miniplay-grip span { width: 44px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-miniplay-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; --ui-nowp-height: 100%; }
.ui-miniplay-plain { display: grid; gap: 12px; justify-items: center; padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
.ui-miniplay-big { display: grid; place-items: center; width: min(100%, 52dvh, 420px); aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--ui-accent-soft); color: var(--ui-accent); font: 700 64px var(--ui-font); box-shadow: var(--ui-shadow-lg); }
.ui-miniplay-big img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-miniplay-plain h2 { margin: 0; font-size: 20px; font-weight: 650; text-align: center; }
.ui-miniplay-plain p { margin: 0; color: var(--ui-muted); text-align: center; }
.ui-miniplay-plain .ui-scrubbar { justify-self: stretch; }
.ui-miniplay-bigplay { display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg); cursor: pointer; touch-action: manipulation; }
.ui-miniplay-bigplay svg { width: 34px; height: 34px; }
.ui-miniplay-bigplay:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-miniplay-play:hover { background: var(--ui-subtle); } }
/* A tablet's bar has room for a seek bar, which keeps the bar's own gestures off it. */
@container ui-miniplay (min-width: 640px) {
  .ui-miniplay-bar { margin: 0 16px; padding: 0 12px 0 6px; gap: 12px; }
  .ui-miniplay-main { flex: 1; }
  .ui-miniplay-seek { display: flex; }
  .ui-miniplay-line { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-miniplay, .ui-miniplay-bar, .ui-miniplay-body { transition: none; } }


.ui-recipe-scale { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 640px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-recipe-scale .ui-recipe-scale-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-recipe-scale-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ui-recipe-scale-field { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-recipe-scale input, .ui-recipe-scale select, .ui-recipe-scale textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-recipe-scale input, .ui-recipe-scale select { height: 38px; }
.ui-recipe-scale textarea { min-height: 150px; padding: 8px 10px; resize: vertical; }
.ui-recipe-scale input:focus-visible, .ui-recipe-scale select:focus-visible, .ui-recipe-scale textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-recipe-scale input[aria-invalid] { border-color: var(--ui-danger); }
.ui-recipe-scale-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-recipe-scale-quick button { height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-recipe-scale-quick button:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-recipe-scale-quick button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-recipe-scale-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-recipe-scale-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-recipe-scale-out { display: grid; gap: 0; margin: 0; padding: 4px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); list-style: none; }
.ui-recipe-scale-out li { display: grid; gap: 1px; padding: 7px 0; border-bottom: 1px solid var(--ui-border); overflow-wrap: anywhere; }
.ui-recipe-scale-out li:last-child { border-bottom: 0; }
.ui-recipe-scale-line { font-weight: 550; font-variant-numeric: tabular-nums; }
.ui-recipe-scale-same .ui-recipe-scale-line { font-weight: 400; color: var(--ui-muted); }
.ui-recipe-scale-was { color: var(--ui-muted); font-size: 12px; }
@media (max-width: 480px) { .ui-recipe-scale-bar { grid-template-columns: minmax(0, 1fr); } }


.ui-radial {
  --ui-radial-1: light-dark(#2a78d6, #3987e5); --ui-radial-2: light-dark(#eb6834, #d95926);
  --ui-radial-3: light-dark(#1baf7a, #199e70); --ui-radial-4: light-dark(#eda100, #c98500);
  --ui-radial-5: light-dark(#e87ba4, #d55181); --ui-radial-6: light-dark(#008300, #008300);
  --ui-radial-7: light-dark(#6250d6, #9085e9); --ui-radial-8: light-dark(#e34948, #e66767);
  display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 16px 28px; min-width: 0; margin: 0;
  font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-radial-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-radial-s1 { --c: var(--ui-radial-1); } .ui-radial-s2 { --c: var(--ui-radial-2); } .ui-radial-s3 { --c: var(--ui-radial-3); }
.ui-radial-s4 { --c: var(--ui-radial-4); } .ui-radial-s5 { --c: var(--ui-radial-5); } .ui-radial-s6 { --c: var(--ui-radial-6); }
.ui-radial-s7 { --c: var(--ui-radial-7); } .ui-radial-s8 { --c: var(--ui-radial-8); }
.ui-radial-ring { flex: none; max-width: 100%; aspect-ratio: 1; }
.ui-radial-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-radial-track { fill: none; stroke: var(--ui-subtle); stroke-linecap: round; }
.ui-radial-arc { fill: none; stroke: var(--c); stroke-linecap: round; transition: opacity .15s ease, stroke-width .15s ease; }
.ui-radial-name { fill: var(--ui-muted); font-family: var(--ui-font); text-anchor: end; dominant-baseline: central; }
.ui-radial-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  flex: 1 1 180px; min-width: 0; max-width: 340px; margin: 0; padding: 0; list-style: none; }
.ui-radial-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; transition: opacity .15s ease; }
.ui-radial-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ui-radial-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-radial-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-radial:has(.ui-radial-p1:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p1),
.ui-radial:has(.ui-radial-p2:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p2),
.ui-radial:has(.ui-radial-p3:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p3),
.ui-radial:has(.ui-radial-p4:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p4),
.ui-radial:has(.ui-radial-p5:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p5),
.ui-radial:has(.ui-radial-p6:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p6),
.ui-radial:has(.ui-radial-p7:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p7),
.ui-radial:has(.ui-radial-p8:hover) :is(.ui-radial-arc, .ui-radial-legend li):not(.ui-radial-p8) { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .ui-radial-arc, .ui-radial-legend li { transition: none; } }


.ui-drop-cap { margin: 0; font: 16px/1.6 var(--ui-font); color: var(--ui-fg); overflow-wrap: anywhere; }
.ui-drop-cap::first-letter { float: left; margin: .08em .12em 0 0; font-size: 3.1em; line-height: .78; font-weight: 700;
  color: var(--ui-dc, var(--ui-fg)); }
.ui-drop-cap-2::first-letter { font-size: 2.1em; line-height: .8; margin-top: .1em; }
.ui-drop-cap-4::first-letter { font-size: 4.1em; line-height: .78; margin-top: .06em; }
.ui-drop-cap-accent { --ui-dc: var(--ui-accent); }
.ui-drop-cap-serif::first-letter { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }


.ui-brush {
  --ui-brush-1: light-dark(#2a78d6, #3987e5); --ui-brush-2: light-dark(#eb6834, #d95926);
  --ui-brush-3: light-dark(#1baf7a, #199e70); --ui-brush-4: light-dark(#eda100, #c98500);
  --ui-brush-5: light-dark(#e87ba4, #d55181); --ui-brush-6: light-dark(#008300, #008300);
  --ui-brush-7: light-dark(#6250d6, #9085e9); --ui-brush-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-brush-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-brush-s1 { --c: var(--ui-brush-1); } .ui-brush-s2 { --c: var(--ui-brush-2); } .ui-brush-s3 { --c: var(--ui-brush-3); }
.ui-brush-s4 { --c: var(--ui-brush-4); } .ui-brush-s5 { --c: var(--ui-brush-5); } .ui-brush-s6 { --c: var(--ui-brush-6); }
.ui-brush-s7 { --c: var(--ui-brush-7); } .ui-brush-s8 { --c: var(--ui-brush-8); }
.ui-brush-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-brush-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-brush-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-brush-frame { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-brush-y { position: relative; }
.ui-brush-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-brush-plot { position: relative; }
.ui-brush-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-brush-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-brush-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-brush-area { fill: var(--c); opacity: .1; }
.ui-brush-mini .ui-brush-line { stroke-width: 1.25; opacity: .8; }
.ui-brush-cols { position: absolute; inset: 0; display: flex; }
.ui-brush-col { position: relative; flex: 1; min-width: 0; --x: 50%; }
.ui-brush-col:first-child:not(:last-child) { flex: .5; --x: 0%; }
.ui-brush-col:last-child:not(:first-child) { flex: .5; --x: 100%; }
.ui-brush-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-brush-col:hover::before { opacity: 1; }
.ui-brush-dot { position: absolute; left: var(--x); display: none; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-brush-col:hover .ui-brush-dot, .ui-brush-col:hover .ui-brush-tip { display: block; }
.ui-brush-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-brush-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-brush-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-brush-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-brush-tip { top: 0; left: calc(var(--x) + 10px); }
.ui-brush-flip .ui-brush-tip { left: auto; right: calc(100% - var(--x) + 10px); }
.ui-brush-tip .ui-brush-key { width: 8px; height: 8px; border-radius: 50%; }
.ui-brush-x { position: relative; height: 16px; margin-top: 6px; }
.ui-brush-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-brush-x .ui-brush-first { transform: none; }
.ui-brush-x .ui-brush-last { transform: translateX(-100%); }
.ui-brush-mini { position: relative; margin-top: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-bg); cursor: crosshair; touch-action: none; user-select: none; }
.ui-brush-shade { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ui-muted) 16%, transparent); pointer-events: none; }
.ui-brush-win { position: absolute; top: -1px; bottom: -1px; border: 1.5px solid var(--ui-accent); border-radius: 4px; cursor: grab; }
.ui-brush-win:focus-visible, .ui-brush-edge:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-brush-edge { position: absolute; top: 50%; width: 10px; height: 26px; margin-left: -5px; border: 1px solid var(--ui-accent);
  border-radius: 3px; background: var(--ui-surface); cursor: ew-resize; transform: translateY(-50%); z-index: 2; }
.ui-brush-edge::before { content: ""; position: absolute; inset: 7px 3px; border-inline: 1px solid var(--ui-accent); }
.ui-brush-ends { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ui-muted); font-size: 11px; }


.ui-document-capture { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-document-capture-body { display: grid; gap: 12px; }
.ui-document-capture-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ui-document-capture-add {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; overflow: hidden;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 16px/1 var(--ui-font); cursor: pointer;
}
.ui-document-capture-add input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ui-document-capture-add:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-document-capture-add:has(input:disabled) { opacity: .55; }
.ui-document-capture-count { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-document-capture-why { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-document-capture-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-document-capture-page {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); transition: transform .18s ease-out;
}
/* An attribute, not a class: a row's class is rewritten when it reads something new, which would drop this in mid-drag. */
.ui-document-capture-page[data-lifted] { z-index: 2; box-shadow: var(--ui-shadow-lg); transition: none; }
.ui-document-capture-page-open { border-color: var(--ui-accent); }
.ui-document-capture-page img { display: block; width: 48px; height: 64px; object-fit: contain; border-radius: 3px; background: var(--ui-subtle); -webkit-user-drag: none; }
.ui-document-capture-page b { flex: 1 1 60px; min-width: 0; font-weight: 600; }
.ui-document-capture-page button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-document-capture-page button svg { width: 20px; height: 20px; }
.ui-document-capture-page button:disabled { opacity: .35; cursor: default; }
.ui-document-capture-page button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-document-capture-page .ui-document-capture-grip { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (hover: hover) { .ui-document-capture-page button:hover:not(:disabled) { background: var(--ui-subtle); } }
.ui-document-capture-crop { display: grid; gap: 10px; min-width: 0; }
.ui-document-capture-crop h3 { margin: 0; font: 600 15px/1.3 var(--ui-font); }
/* Room around the picture, so a handle at its edge is whole and on the page. */
.ui-document-capture-room { padding: 24px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overscroll-behavior: contain; }
.ui-document-capture-stage { --ui-dc-x0: 0; --ui-dc-y0: 0; --ui-dc-x1: 1; --ui-dc-y1: 0; --ui-dc-x2: 1; --ui-dc-y2: 1; --ui-dc-x3: 0; --ui-dc-y3: 1; position: relative; width: fit-content; max-width: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-document-capture-stage img { display: block; max-width: 100%; max-height: 56dvh; -webkit-user-drag: none; pointer-events: none; }
.ui-document-capture-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ui-document-capture-stage polygon { fill: color-mix(in srgb, var(--ui-accent) 14%, transparent); stroke: var(--ui-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui-document-capture-corner {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; touch-action: none; cursor: move; outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* Set by hand on the stage: a bound style here would be rewritten, and jump a corner home in mid-drag. */
.ui-document-capture-c0 { left: calc(var(--ui-dc-x0) * 100%); top: calc(var(--ui-dc-y0) * 100%); }
.ui-document-capture-c1 { left: calc(var(--ui-dc-x1) * 100%); top: calc(var(--ui-dc-y1) * 100%); }
.ui-document-capture-c2 { left: calc(var(--ui-dc-x2) * 100%); top: calc(var(--ui-dc-y2) * 100%); }
.ui-document-capture-c3 { left: calc(var(--ui-dc-x3) * 100%); top: calc(var(--ui-dc-y3) * 100%); }
.ui-document-capture-corner::after { content: ""; position: absolute; inset: 12px; border: 2px solid var(--ui-accent); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.ui-document-capture-corner-chosen::after { background: var(--ui-accent); border-color: #fff; }
.ui-document-capture-corner:focus-visible { box-shadow: var(--ui-focus); }
.ui-document-capture-nudge { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; justify-content: center; }
.ui-document-capture-nudge button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); cursor: pointer;
}
.ui-document-capture-nudge button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-document-capture-nudge svg { width: 20px; height: 20px; }
.ui-document-capture-up { grid-column: 2; }
.ui-document-capture-left { grid-column: 1; grid-row: 2; }
.ui-document-capture-down { grid-column: 2; grid-row: 2; }
.ui-document-capture-right { grid-column: 3; grid-row: 2; }
.ui-document-capture-note { margin: 0; color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-document-capture-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-document-capture-bar > * { flex: 1 1 auto; }
/* A tablet, or a wide pane: list beside crop. On a phone the crop takes the list's place. */
.ui-document-capture-open .ui-document-capture-side { display: none; }
@container (min-width: 440px) {
  .ui-document-capture-open .ui-document-capture-body { grid-template-columns: minmax(170px, 36%) minmax(0, 1fr); align-items: start; }
  .ui-document-capture-open .ui-document-capture-side { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .ui-document-capture-page { transition: none; } }


.ui-splash-screen-host { display: contents; }
.ui-splash-screen {
  position: absolute; inset: 0; z-index: 80; display: grid; align-content: center; justify-items: center; gap: 14px; color-scheme: light dark; container: ui-splash-screen / size;
  background: var(--ui-bg, Canvas); color: var(--ui-fg, CanvasText); font: 500 17px/1.3 var(--ui-font, system-ui, sans-serif);
  animation: ui-splash-screen-yield .18s linear var(--ui-splash-screen-max, 3s) forwards; transition: opacity .18s linear;
}
.ui-splash-screen-fixed { position: fixed; }
.ui-splash-screen-leaving { opacity: 0; pointer-events: none; }
@keyframes ui-splash-screen-yield { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.ui-splash-screen-mark { display: grid; place-items: center; width: min(32cqmin, 120px); aspect-ratio: 1; }
.ui-splash-screen-mark > *, .ui-splash-screen-mark > quillo-raw > * { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Past a second something is wrong enough to say so: a thin bar, and no sooner, as most starts are faster. */
.ui-splash-screen-slow { width: 72px; height: 3px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle, transparent); opacity: 0; animation: ui-splash-screen-show .2s linear 1s forwards; }
.ui-splash-screen-slow span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--ui-accent, currentColor); animation: ui-splash-screen-run 1s ease-in-out infinite alternate; }
@keyframes ui-splash-screen-show { to { opacity: 1; } }
@keyframes ui-splash-screen-run { to { transform: translateX(150%); } }
@container ui-splash-screen (min-width: 600px) { .ui-splash-screen-mark { width: min(40cqh, 180px); } }
@media (prefers-reduced-motion: reduce) {
  .ui-splash-screen { transition: none; }
  .ui-splash-screen-slow span { animation: none; width: 100%; }
}


.ui-progresslist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-progresslist-sm { gap: 10px; font-size: 13px; }
.ui-progresslist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; --t: var(--ui-accent); }
.ui-progresslist-neutral { --t: var(--ui-muted); }
.ui-progresslist-success { --t: var(--ui-success); }
.ui-progresslist-warning { --t: var(--ui-warning); }
.ui-progresslist-danger { --t: var(--ui-danger); }
.ui-progresslist-info { --t: var(--ui-info); }
.ui-progresslist-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ui-progresslist-desc { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; white-space: normal; }
.ui-progresslist-note { color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-progresslist-over .ui-progresslist-note { color: var(--ui-danger); font-weight: 600; }
.ui-progresslist-track { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-progresslist-sm .ui-progresslist-track { height: 5px; }
.ui-progresslist-fill { height: 100%; border-radius: inherit; background: var(--t); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .ui-progresslist-fill { transition: none; } }


.ui-subnav {
  display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg);
  color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
}
.ui-subnav-title { flex: none; padding: 0 0 0 4px; font-weight: 650; }
.ui-subnav ul {
  display: flex; flex: 1; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ui-subnav ul::-webkit-scrollbar { display: none; }
.ui-subnav-link {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px; border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
  color: var(--ui-muted); font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent;
  transition: color .12s, background .12s, box-shadow .12s;
}
.ui-subnav-link:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-subnav-link:focus-visible { outline: none; box-shadow: inset 0 -2px 0 transparent, var(--ui-focus); }
.ui-subnav-link[aria-current="page"] { color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-subnav-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 14px; line-height: 1; }
.ui-subnav-icon svg { width: 16px; height: 16px; }
.ui-subnav-badge {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ui-subtle); border: 1px solid var(--ui-border);
  color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
.ui-subnav-link[aria-current="page"] .ui-subnav-badge { color: var(--ui-fg); }
.ui-subnav-end { display: flex; flex: none; align-items: center; gap: 8px; padding-right: 4px; }
.ui-subnav-pill { border-bottom: 0; padding: 6px 0; }
.ui-subnav-pill ul { gap: 4px; }
.ui-subnav-pill .ui-subnav-link { height: 32px; border-radius: 999px; box-shadow: none; }
.ui-subnav-pill .ui-subnav-link:focus-visible { box-shadow: var(--ui-focus); }
.ui-subnav-pill .ui-subnav-link[aria-current="page"] { background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .ui-subnav-link { transition: none; } }


.ui-markup-overlay { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; min-height: 360px; container-type: inline-size;
  color: var(--ui-fg); background: var(--ui-subtle); font: 14px/1.4 var(--ui-font); }
.ui-markup-overlay-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: none; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-markup-overlay-btn { min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-markup-overlay-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-markup-overlay-btn:disabled { color: var(--ui-muted); opacity: .55; cursor: default; }
.ui-markup-overlay-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-markup-overlay-swatch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; cursor: pointer; }
.ui-markup-overlay-swatch[aria-pressed="true"] { border-color: var(--ui-accent); }
.ui-markup-overlay-swatch:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-markup-overlay-swatch span { width: 24px; height: 24px; border: 1px solid var(--ui-border); border-radius: 50%; }
.ui-markup-overlay-sep { width: 1px; height: 28px; margin: 0 2px; background: var(--ui-border); }
@media (hover: hover) { .ui-markup-overlay-btn:not(:disabled):hover, .ui-markup-overlay-swatch:hover { background: var(--ui-subtle); } }
.ui-markup-overlay-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ui-markup-overlay-stage { display: grid; place-items: center; flex: 1; min-height: 0; padding: 8px; container-type: size; }
.ui-markup-overlay-frame { position: relative; width: min(100cqw, calc(100cqh * var(--w) / var(--h))); aspect-ratio: var(--w) / var(--h); overflow: hidden; outline: none; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-markup-overlay-frame:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent); }
.ui-markup-overlay-frame img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.ui-markup-overlay-page { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; }
.ui-markup-overlay-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; touch-action: none; }
.ui-markup-overlay-pans { touch-action: pan-x pan-y pinch-zoom; }
.ui-markup-overlay-picking { cursor: default; }
.ui-markup-overlay-layer path, .ui-markup-overlay-layer line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ui-markup-overlay-high { mix-blend-mode: multiply; }
.ui-markup-overlay-picked { filter: drop-shadow(0 0 3px var(--ui-accent)); }
.ui-markup-overlay-text { font: 600 26px var(--ui-font); }
.ui-markup-overlay-field { position: absolute; box-sizing: border-box; width: 240px; max-width: 80%; height: 44px; padding: 0 10px; border: 2px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }
.ui-markup-overlay-field:focus { outline: none; box-shadow: var(--ui-focus); }
.ui-markup-overlay-off { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--ui-muted); pointer-events: none; }
.ui-markup-overlay-side { display: flex; flex-direction: column; flex: none; gap: 8px; max-height: 190px; overflow-y: auto; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-markup-overlay-side h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-markup-overlay-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-markup-overlay-row { display: flex; gap: 4px; }
.ui-markup-overlay-name { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 14px var(--ui-font); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ui-markup-overlay-name[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-markup-overlay-name:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-markup-overlay-note { display: flex; gap: 4px; }
.ui-markup-overlay-note input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }
.ui-markup-overlay-note input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
/* In the width of a turned tablet the list stands beside the picture and takes its height. */
@container (min-width: 900px) {
  .ui-markup-overlay-body { flex-direction: row; }
  .ui-markup-overlay-side { width: 260px; max-height: none; border-top: 0; border-left: 1px solid var(--ui-border); }
}


.ui-grade-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 640px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-grade-calc .ui-grade-calc-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-grade-calc-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-grade-calc-head, .ui-grade-calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px 32px; gap: 8px; align-items: center; }
.ui-grade-calc-head { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-grade-calc-row label { display: none; font-size: 12px; color: var(--ui-muted); }
.ui-grade-calc input { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-grade-calc input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-grade-calc input[aria-invalid] { border-color: var(--ui-danger); }
.ui-grade-calc-num input { text-align: right; font-variant-numeric: tabular-nums; }
.ui-grade-calc-remove { width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-muted); font: 16px/1 var(--ui-font); cursor: pointer; }
.ui-grade-calc-remove:hover { border-color: var(--ui-border); color: var(--ui-danger); }
.ui-grade-calc-remove:focus-visible, .ui-grade-calc-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-grade-calc-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; }
.ui-grade-calc-add { height: 34px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-grade-calc-add:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-grade-calc-goal { display: grid; gap: 4px; width: 130px; font-size: 13px; font-weight: 500; }
.ui-grade-calc-goal input { text-align: right; font-variant-numeric: tabular-nums; }
.ui-grade-calc-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-grade-calc-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-grade-calc-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-grade-calc-now div { display: grid; gap: 2px; min-width: 0; }
.ui-grade-calc-now dt { color: var(--ui-muted); font-size: 12px; }
.ui-grade-calc-now dd { margin: 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-grade-calc-goals { width: 100%; border-collapse: collapse; }
.ui-grade-calc-goals th, .ui-grade-calc-goals td { padding: 7px 6px; border-bottom: 1px solid var(--ui-border); text-align: left; font-variant-numeric: tabular-nums; }
.ui-grade-calc-goals thead th { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-grade-calc-goals tbody tr:last-child th, .ui-grade-calc-goals tbody tr:last-child td { border-bottom: 0; }
.ui-grade-calc-goals tbody th { font-weight: 600; }
.ui-grade-calc-state { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ui-subtle); }
.ui-grade-calc-secured, .ui-grade-calc-reached { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-grade-calc-open { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-grade-calc-out, .ui-grade-calc-missed { background: var(--ui-danger-soft); color: var(--ui-danger); }
@media (max-width: 480px) {
  .ui-grade-calc-head { display: none; }
  .ui-grade-calc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; padding-bottom: 8px; border-bottom: 1px solid var(--ui-border); }
  .ui-grade-calc-name { grid-column: 1 / -1; }
  .ui-grade-calc-row label { display: block; }
  .ui-grade-calc-now { grid-template-columns: minmax(0, 1fr); }
}


.ui-wlist { min-width: 0; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 13px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-wlist-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-wlist-table th, .ui-wlist-table td { padding: 8px 12px; text-align: right; white-space: nowrap; }
.ui-wlist-table thead th { padding: 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-wlist-table th:first-child, .ui-wlist-table td:first-child { text-align: left; }
.ui-wlist-sort { display: inline-flex; align-items: center; justify-content: inherit; gap: 4px; width: 100%; padding: 8px 12px; border: 0;
  background: none; color: var(--ui-muted); font: 600 11px/1 var(--ui-font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
th:not(:first-child) > .ui-wlist-sort { justify-content: flex-end; }
.ui-wlist-sort:hover { color: var(--ui-fg); }
.ui-wlist-sort:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-wlist-sort svg { width: 8px; height: 8px; fill: currentColor; opacity: .35; }
[aria-sort] > .ui-wlist-sort { color: var(--ui-fg); }
[aria-sort] > .ui-wlist-sort svg { opacity: 1; }
[aria-sort="descending"] > .ui-wlist-sort svg { transform: rotate(180deg); }
.ui-wlist-plain { padding: 8px 12px; color: var(--ui-muted); font: 600 11px/1 var(--ui-font); letter-spacing: .04em; text-transform: uppercase; }
.ui-wlist-row { cursor: pointer; }
.ui-wlist-row:not(:last-child) > * { border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-wlist-row:hover { background: var(--ui-subtle); }
.ui-wlist-row:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-wlist-row[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-wlist-row[aria-selected="true"] > :first-child { box-shadow: inset 3px 0 0 var(--ui-accent); }
.ui-wlist-sym b { display: block; font-weight: 650; }
.ui-wlist-sym { font-weight: 400; }
.ui-wlist-sym small { color: var(--ui-muted); font-size: 12px; }
.ui-wlist-up { --k: var(--ui-success); } .ui-wlist-down { --k: var(--ui-danger); } .ui-wlist-flat { --k: var(--ui-muted); }
.ui-wlist-chg { color: var(--k); font-weight: 600; }
.ui-wlist-pill { display: inline-block; min-width: 64px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--k) 14%, transparent);
  color: var(--k); font-weight: 600; text-align: right; }
.ui-wlist-price { display: inline-block; padding: 2px 4px; border-radius: 3px; font-weight: 600; }
.ui-wlist-tick-up { animation: ui-wlist-up 1s ease-out; } .ui-wlist-tick-down { animation: ui-wlist-down 1s ease-out; }
@keyframes ui-wlist-up { from { background: color-mix(in srgb, var(--ui-success) 40%, transparent); } }
@keyframes ui-wlist-down { from { background: color-mix(in srgb, var(--ui-danger) 40%, transparent); } }
.ui-wlist-spark { display: block; width: 88px; height: 26px; margin-left: auto; overflow: visible; }
.ui-wlist-spark path { fill: none; stroke: var(--k); stroke-width: 1.5; stroke-linejoin: round; }
.ui-wlist-spark line { stroke: var(--ui-strong); stroke-dasharray: 2 2; }
@media (prefers-reduced-motion: reduce) { .ui-wlist-tick-up, .ui-wlist-tick-down { animation: none; } }


.ui-tablet-side {
  position: relative; box-sizing: border-box; min-width: 0; height: 100%; overflow: hidden; container: ui-tablet-side / inline-size;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.4 var(--ui-font);
}
.ui-tablet-side-frame { position: relative; display: flex; height: 100%; min-height: 0; }
.ui-tablet-side-slot { position: relative; flex: 0 0 260px; min-width: 0; }
.ui-tablet-side-panel {
  position: absolute; inset: 0 auto 0 0; z-index: 3; display: flex; flex-direction: column; box-sizing: border-box; width: 260px; min-height: 0; overflow: hidden;
  padding-left: env(safe-area-inset-left); background: var(--ui-subtle); border-right: 1px solid var(--ui-border); touch-action: pan-y;
}
.ui-tablet-side-top { display: flex; align-items: center; gap: 2px; flex: none; min-height: 56px; box-sizing: border-box; padding: max(4px, env(safe-area-inset-top)) 6px 4px; }
.ui-tablet-side-top h2 { flex: 1; min-width: 0; margin: 0; padding: 0 8px; overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-tablet-side-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-tablet-side-btn[aria-pressed="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-tablet-side-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tablet-side-btn svg { width: 22px; height: 22px; }
.ui-tablet-side-menu, .ui-tablet-side-close { display: none; }
.ui-tablet-side-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
.ui-tablet-side-section { padding: 6px 0; }
.ui-tablet-side-section + .ui-tablet-side-section { border-top: 1px solid var(--ui-border); }
.ui-tablet-side-section h3 { margin: 6px 10px 4px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-tablet-side-item {
  position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: var(--ui-radius);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-tablet-side-item[aria-current] { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; }
.ui-tablet-side-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-tablet-side-item:hover, .ui-tablet-side-btn:hover { background: var(--ui-border); } }
.ui-tablet-side-icon { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; font-size: 19px; line-height: 1; }
.ui-tablet-side-icon svg { width: 24px; height: 24px; }
.ui-tablet-side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tablet-side-badge { flex: none; min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.ui-tablet-side-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.ui-tablet-side-bar { display: none; align-items: center; gap: 4px; flex: none; min-height: 52px; box-sizing: border-box; padding: 3px 6px; border-bottom: 1px solid var(--ui-border); }
.ui-tablet-side-bar b { font-weight: 600; }
.ui-tablet-side-page { flex: 1; min-height: 0; overflow: auto; }
.ui-tablet-side-scrim { display: none; position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: var(--ui-overlay); }
.ui-tablet-side-edge { display: none; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 16px; touch-action: pan-y; }
.ui-tablet-side-moving .ui-tablet-side-panel { transition: width .22s cubic-bezier(.2, .8, .2, 1), transform .24s cubic-bezier(.2, .8, .2, 1); }
@container ui-tablet-side (min-width: 600px) and (max-width: 839.98px) {
  .ui-tablet-side:not(.ui-tablet-side-pinned) .ui-tablet-side-slot { flex-basis: 76px; }
  .ui-tablet-side:not(.ui-tablet-side-pinned) .ui-tablet-side-panel { width: 76px; }
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-top { justify-content: center; }
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-top h2,
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-pin,
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-section h3 { display: none; }
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-list { padding-inline: 6px; }
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-item { justify-content: center; padding-inline: 4px; }
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-tablet-side:not(.ui-tablet-side-pinned):not(.ui-tablet-side-peek) .ui-tablet-side-badge { position: absolute; top: 2px; right: 6px; min-width: 18px; padding: 0 4px; font-size: 11px; line-height: 18px; }
  .ui-tablet-side:not(.ui-tablet-side-pinned) .ui-tablet-side-menu { display: grid; }
}
@container ui-tablet-side (max-width: 839.98px) {
  .ui-tablet-side-peek .ui-tablet-side-panel { width: 260px !important; box-shadow: var(--ui-shadow-lg); }
  .ui-tablet-side-peek .ui-tablet-side-menu { display: none !important; }
  .ui-tablet-side-peek .ui-tablet-side-close { display: grid; }
  .ui-tablet-side-peek .ui-tablet-side-scrim { display: block; }
}
@container ui-tablet-side (max-width: 599.98px) {
  .ui-tablet-side .ui-tablet-side-slot { flex-basis: 0; width: 0; }
  .ui-tablet-side .ui-tablet-side-panel { width: min(280px, 85vw) !important; transform: translateX(-105%); visibility: hidden; box-shadow: var(--ui-shadow-lg); }
  .ui-tablet-side.ui-tablet-side-peek .ui-tablet-side-panel, .ui-tablet-side-peeking .ui-tablet-side-panel { transform: none; visibility: visible; }
  .ui-tablet-side-peeking .ui-tablet-side-panel { transform: translateX(-105%); }
  .ui-tablet-side .ui-tablet-side-menu { display: none; }
  .ui-tablet-side-bar { display: flex; }
  .ui-tablet-side-bar .ui-tablet-side-menu { display: grid; }
  .ui-tablet-side-edge { display: block; }
  .ui-tablet-side .ui-tablet-side-pin { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-tablet-side-panel { transition: none !important; } }


.demo-rotation { display: flex; flex-direction: column; height: 100%; font: 14px/1.45 var(--ui-font); }
.demo-rotation-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.demo-rotation-body { flex: 1; min-height: 0; padding: 12px; }
.demo-rotation-photo { height: 100%; min-height: 120px; border-radius: var(--ui-radius); background: linear-gradient(135deg, #2b6f8f, #7ab77a 60%, #e0c56e); }
.demo-rotation-card { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.demo-rotation-card label { font-weight: 600; }
.demo-rotation-card input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }
.demo-rotation-stop { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
.demo-rotation-stops { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.demo-rotation-tip { padding: 12px; border-radius: var(--ui-radius); background: var(--ui-accent-soft); }
.demo-rotation-tile { display: grid; place-items: center; min-height: 40px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); }


.ui-carrent { position: relative; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; min-width: 0; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ui-carrent:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
.ui-carrent:has(.ui-carrent-title a:focus-visible) { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-carrent-media { position: relative; display: grid; place-items: center; padding: 16px; background: var(--ui-subtle); }
.ui-carrent-media img { display: block; width: 100%; max-height: 130px; object-fit: contain; }
.ui-carrent-media svg { width: 70%; color: var(--ui-strong); }
.ui-carrent-badge { position: absolute; top: 10px; left: 10px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ui-success);
  color: var(--ui-surface); font: 600 11px/22px var(--ui-font); letter-spacing: .03em; text-transform: uppercase; }
.ui-carrent-main { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px; }
.ui-carrent-cat { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-carrent .ui-carrent-title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; }
.ui-carrent-title a { color: inherit; text-decoration: none; }
.ui-carrent-title a::after { content: ""; position: absolute; inset: 0; }
.ui-carrent-title a:hover { color: var(--ui-accent); }
.ui-carrent-title a:focus-visible { outline: none; }
.ui-carrent-similar { color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-carrent-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-carrent-specs li { display: inline-flex; align-items: center; gap: 5px; }
.ui-carrent-specs svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-carrent-terms { color: var(--ui-muted); font-size: 12px; }
.ui-carrent-incl { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--ui-success); font-size: 12px; font-weight: 600; }
.ui-carrent-incl li::before { content: "✓ "; }
.ui-carrent-pickup { display: flex; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ui-border); font-size: 13px; }
.ui-carrent-pickup svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ui-muted); }
.ui-carrent-pickup small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-carrent-side { display: grid; align-content: space-between; justify-items: end; gap: 12px; min-width: 150px; padding: 14px 16px;
  border-left: 1px solid var(--ui-border); text-align: right; font-variant-numeric: tabular-nums; }
.ui-carrent-supplier { display: grid; justify-items: end; gap: 4px; font-size: 13px; font-weight: 600; }
.ui-carrent-supplier img { max-width: 90px; max-height: 24px; object-fit: contain; }
.ui-carrent-score { padding: 1px 6px; border-radius: 5px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 12px; font-weight: 700; }
.ui-carrent-price { display: grid; justify-items: end; gap: 1px; }
.ui-carrent-day { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.ui-carrent-day small { color: var(--ui-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ui-carrent-total { font-size: 13px; font-weight: 600; }
.ui-carrent-deposit { color: var(--ui-muted); font-size: 12px; }
.ui-carrent-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 34px; margin-top: 6px; padding: 0 14px;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; font-weight: 600; text-decoration: none; }
.ui-carrent-btn:hover { filter: brightness(1.08); }
@media (max-width: 680px) {
  .ui-carrent { grid-template-columns: 1fr; }
  .ui-carrent-side { grid-template-columns: 1fr auto; align-items: end; border-left: 0; border-top: 1px solid var(--ui-border); justify-items: start; text-align: left; }
  .ui-carrent-supplier, .ui-carrent-price { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .ui-carrent { transition: none; } }


.ui-widget { display: flex; flex-direction: column; min-width: 0; min-height: 100%; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-widget-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; }
.ui-widget-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ui-widget-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-widget-sub { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-widget-menu { display: flex; flex: none; align-items: center; gap: 6px; margin: -6px -8px -6px 0; }
.ui-widget-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.ui-widget-stripe::after { content: ""; position: absolute; width: 40%; height: 100%; background: var(--ui-accent); animation: ui-widget-slide 1.3s ease-in-out infinite; }
@keyframes ui-widget-slide { from { left: -40%; } to { left: 100%; } }
.ui-widget-body { flex: 1; padding: 4px 18px 18px; }
.ui-widget-head + .ui-widget-body:empty { display: none; }
.ui-widget-body > :first-child { margin-top: 0; }
.ui-widget-body > :last-child { margin-bottom: 0; }
.ui-widget-bare .ui-widget-body { padding: 0; }
.ui-widget-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px;
  border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; }
.ui-widget-foot > * { margin: 0; }
.ui-widget-link { margin-left: auto; color: var(--ui-accent); font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 3px; }
.ui-widget-link:hover { text-decoration: underline; }
.ui-widget-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-widget-stripe::after { left: 0; width: 100%; opacity: .45; animation: none; } }


.ui-timer { display: grid; gap: 14px; justify-items: center; min-width: 0; padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-timer-label { color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-timer-dial { position: relative; display: grid; place-items: center; width: 168px; height: 168px; }
.ui-timer-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-timer-dial circle { fill: none; stroke-width: 7; }
.ui-timer-track { stroke: var(--ui-subtle); }
.ui-timer-fill { stroke: var(--ui-accent); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ui-timer-time { font: 600 36px/1 var(--ui-mono); font-variant-numeric: tabular-nums; }
.ui-timer-done .ui-timer-fill { stroke: var(--ui-danger); }
.ui-timer-done .ui-timer-dial { animation: ui-timer-flash 1s ease-in-out 3; }
@keyframes ui-timer-flash { 50% { opacity: .35; } }
.ui-timer-alert { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 600; }
.ui-timer-alert:empty { display: none; }
.ui-timer-buttons { display: flex; gap: 10px; }
.ui-timer-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 38px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 600 14px/1 var(--ui-font); cursor: pointer;
}
.ui-timer-btn:hover { background: var(--ui-subtle); }
.ui-timer-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-timer-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-timer-go { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-timer-go:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-timer-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.ui-timer-set label { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 13px; }
.ui-timer-set input {
  width: 64px; height: 30px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1 var(--ui-font); text-align: right;
}
.ui-timer-set input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-timer-preset { height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: transparent; color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-timer-preset:hover { border-color: var(--ui-accent); }
.ui-timer-preset[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-timer-preset:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-timer-preset:disabled, .ui-timer-set input:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-timer-fill { transition: none; } .ui-timer-done .ui-timer-dial { animation: none; } }


.ui-recordcard { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 14px/1.45 var(--ui-font); color: var(--ui-fg); container-type: inline-size; }
.ui-recordcard-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-border); }
.ui-recordcard-pic { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden;
  border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 14px; font-weight: 600; }
.ui-recordcard-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-recordcard-titles { flex: 1; min-width: 0; }
.ui-recordcard-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ui-recordcard-title a { color: inherit; text-decoration: none; }
.ui-recordcard-title a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-recordcard-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-recordcard-sub { margin: 1px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-recordcard-status { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; --t: var(--ui-muted);
  color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); }
.ui-recordcard-accent { --t: var(--ui-accent); }
.ui-recordcard-success { --t: var(--ui-success); }
.ui-recordcard-warning { --t: var(--ui-warning); }
.ui-recordcard-danger { --t: var(--ui-danger); }
.ui-recordcard-info { --t: var(--ui-info); }
.ui-recordcard-fields { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px 24px; margin: 0; padding: 16px 18px; }
.ui-recordcard-one .ui-recordcard-fields { grid-template-columns: minmax(0, 1fr); }
.ui-recordcard-field { display: grid; gap: 2px; min-width: 0; }
.ui-recordcard-wide { grid-column: 1 / -1; }
.ui-recordcard-field dt { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-recordcard-field dd { margin: 0; overflow-wrap: anywhere; }
.ui-recordcard-field dd a { color: var(--ui-accent); text-decoration: none; }
.ui-recordcard-field dd a:hover { text-decoration: underline; }
.ui-recordcard-field dd a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-recordcard-mono { font: 13px/1.45 var(--ui-mono); }
.ui-recordcard-num { font-variant-numeric: tabular-nums; }
.ui-recordcard-none { color: var(--ui-muted); }
.ui-recordcard-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-subtle) 50%, var(--ui-surface)); border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
@container (max-width: 420px) { .ui-recordcard-fields { grid-template-columns: minmax(0, 1fr); } }


.ui-contact-form { display: grid; gap: 14px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-contact-form-title { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.25; }
.ui-contact-form-text { margin: -6px 0 0; color: var(--ui-muted); }
.ui-contact-form-fields { display: contents; }
.ui-contact-form-form { display: grid; gap: 14px; margin: 0; }
.ui-contact-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ui-contact-form-field { display: grid; gap: 6px; min-width: 0; }
.ui-contact-form-label { font-size: 13px; font-weight: 500; }
.ui-contact-form-opt { margin-left: 4px; color: var(--ui-muted); font-weight: 400; }
.ui-contact-form-input, .ui-contact-form-select, .ui-contact-form-area {
  box-sizing: border-box; width: 100%; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-contact-form-input, .ui-contact-form-select { height: 38px; }
.ui-contact-form-select { appearance: none; padding-right: 36px; cursor: pointer; }
.ui-contact-form-select-box { position: relative; }
.ui-contact-form-select-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-contact-form-area { padding: 8px 12px; resize: vertical; min-height: 80px; }
.ui-contact-form-input::placeholder, .ui-contact-form-area::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-contact-form-input:hover, .ui-contact-form-select:hover, .ui-contact-form-area:hover { border-color: var(--ui-strong); }
.ui-contact-form-input:focus, .ui-contact-form-select:focus, .ui-contact-form-area:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-contact-form [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-contact-form-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-contact-form-notice { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-info-soft); color: var(--ui-info); font-size: 13px; }
.ui-contact-form-actions { display: flex; align-items: center; gap: 12px; }
.ui-contact-form-button {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 0;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px var(--ui-font);
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.ui-contact-form-button:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-contact-form-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-contact-form-sent {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--ui-radius-sm);
  background: var(--ui-success-soft); color: var(--ui-success); font-weight: 500;
}
.ui-contact-form-sent svg { flex: none; width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .ui-contact-form-input, .ui-contact-form-select, .ui-contact-form-area, .ui-contact-form-button { transition: none; } }


.ui-swipe-deck { container-type: inline-size; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-swipe-deck-inner { display: grid; gap: 14px; }
.ui-swipe-deck-stack { position: relative; width: 100%; max-width: 420px; margin: 0 auto; touch-action: pan-y; outline: none; border-radius: calc(var(--ui-radius) + 4px); overscroll-behavior-x: contain; }
.ui-swipe-deck-stack:focus-visible { box-shadow: var(--ui-focus); }
/* The slot takes its place in the stack from markup, the card its movement from the finger: a style attribute is
   rewritten whole when what it reads changes, so on one element a card arriving would throw a held card home. */
.ui-swipe-deck-slot { position: absolute; inset: 0 0 20px 0; z-index: calc(3 - var(--i));
  transform: translateY(calc(var(--i) * 9px)) scale(calc(1 - var(--i) * .04)); transform-origin: 50% 100%; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.ui-swipe-deck-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: calc(var(--ui-radius) + 4px); background: var(--ui-surface); box-shadow: var(--ui-shadow);
  transform-origin: 50% 100%; transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-swipe-deck-moving .ui-swipe-deck-top { transition: none; }
.ui-swipe-deck-flying .ui-swipe-deck-top { transition: transform .22s ease-in; }
.ui-swipe-deck-top { cursor: grab; }
.ui-swipe-deck-moving .ui-swipe-deck-top { cursor: grabbing; }
.ui-swipe-deck-back-left { animation: ui-swipe-deck-back-left .26s cubic-bezier(.2, .8, .2, 1); }
.ui-swipe-deck-back-right { animation: ui-swipe-deck-back-right .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes ui-swipe-deck-back-left { from { transform: translateX(-120%) rotate(-12deg); } }
@keyframes ui-swipe-deck-back-right { from { transform: translateX(120%) rotate(12deg); } }
.ui-swipe-deck-pic { flex: 1; min-height: 0; background: var(--c, var(--ui-subtle)); }
.ui-swipe-deck-pic img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ui-swipe-deck-text { flex: none; padding: 12px 16px 14px; }
.ui-swipe-deck-text h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.ui-swipe-deck-text p { margin: 2px 0 0; color: var(--ui-muted); font-size: 14px; }
.ui-swipe-deck-stamp { position: absolute; top: 18px; padding: 2px 10px; border: 3px solid currentColor; border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  font-size: 20px; font-weight: 700; opacity: 0; pointer-events: none; }
.ui-swipe-deck-stamp-right { left: 16px; color: var(--ui-success); transform: rotate(-10deg); opacity: var(--right, 0); }
.ui-swipe-deck-stamp-left { right: 16px; color: var(--ui-danger); transform: rotate(10deg); opacity: var(--left, 0); }
.ui-swipe-deck-none { position: absolute; inset: 0 0 20px 0; display: grid; place-items: center; padding: 20px; border: 1px dashed var(--ui-border);
  border-radius: calc(var(--ui-radius) + 4px); color: var(--ui-muted); text-align: center; }
.ui-swipe-deck-bar { display: flex; justify-content: center; gap: 10px; }
.ui-swipe-deck-btn { min-width: 76px; min-height: 48px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 600 15px/1 var(--ui-font); cursor: pointer; }
.ui-swipe-deck-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-swipe-deck-btn[aria-disabled="true"] { color: var(--ui-muted); opacity: .6; cursor: default; }
.ui-swipe-deck-left { color: var(--ui-danger); }
.ui-swipe-deck-right { color: var(--ui-success); }
.ui-swipe-deck-count { margin: 0; color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-swipe-deck-side { display: none; }
.ui-swipe-deck-side h4 { margin: 0 0 4px; font-size: 13px; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .05em; }
.ui-swipe-deck-side ul { margin: 0 0 14px; padding: 0; list-style: none; }
.ui-swipe-deck-side li { padding: 3px 0; border-bottom: 1px solid var(--ui-border); }
@media (hover: hover) { .ui-swipe-deck-btn:not([aria-disabled="true"]):hover { background: var(--ui-subtle); } }
@container (min-width: 560px) {
  .ui-swipe-deck-inner { grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto auto auto; column-gap: 28px; }
  .ui-swipe-deck-side { display: block; grid-column: 2; grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-swipe-deck-slot, .ui-swipe-deck-card, .ui-swipe-deck-flying .ui-swipe-deck-top { transition: none; }
  .ui-swipe-deck-back-left, .ui-swipe-deck-back-right { animation: none; }
}


.ui-water { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-water-in { display: grid; gap: 14px; justify-items: center; }
.ui-water-glass { position: relative; display: block; width: 150px; height: 190px; padding: 0; border: 0; background: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; border-radius: var(--ui-radius); }
.ui-water-glass:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-water-glass svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-water-glass path { fill: none; stroke: var(--ui-strong); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The same shape as the outline, by percentages, so what fills it has its walls. */
.ui-water-inside { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(6% 0, 94% 0, 82% 100%, 18% 100%); background: var(--ui-subtle); }
.ui-water-fill { position: absolute; inset: 0; background: var(--ui-info); opacity: .85; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.ui-water-fill::before { content: ""; position: absolute; left: -10%; right: -10%; top: -6px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ui-info) 60%, #fff); }
.ui-water-dry::before { display: none; }
.ui-water-done .ui-water-fill { background: var(--ui-success); }
.ui-water-done .ui-water-fill::before { background: color-mix(in srgb, var(--ui-success) 60%, #fff); }
.ui-water-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ui-fg); }
.ui-water-side { display: grid; gap: 10px; width: 100%; min-width: 0; }
.ui-water-total { margin: 0; text-align: center; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-water-note { margin: 0; min-height: 21px; text-align: center; color: var(--ui-muted); font-size: 14px; }
.ui-water-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ui-water-add, .ui-water-undo { min-height: 52px; padding: 0 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  font: 600 16px/1.1 var(--ui-font); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-water-add { background: var(--ui-info-soft); border-color: transparent; color: var(--ui-info); }
.ui-water-undo { min-height: 46px; font-weight: 500; font-size: 15px; }
.ui-water-undo:disabled { opacity: .5; cursor: default; }
.ui-water-add:focus-visible, .ui-water-undo:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-water-undo:not(:disabled):hover { background: var(--ui-subtle); } }
@container (min-width: 480px) {
  .ui-water-in { grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
  .ui-water-glass { width: 180px; height: 228px; }
  .ui-water-total { text-align: left; font-size: 26px; }
  .ui-water-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ui-water-fill { transition: none; } }


.ui-routest { position: relative; box-sizing: border-box; height: 100%; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-routest-in { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
.ui-routest-main { flex: none; display: grid; gap: 10px; }
.ui-routest-card {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 2px 14px; min-height: 148px; padding: 14px 16px; border-radius: calc(var(--ui-radius) + 4px);
  background: var(--ui-accent); color: var(--ui-accent-fg); touch-action: pan-y; -webkit-touch-callout: none; user-select: none; will-change: transform; outline: none;
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.ui-routest-card:focus-visible { box-shadow: var(--ui-focus); }
.ui-routest-card[data-dragging] { transition: none; }
.ui-routest-arrow { grid-row: 1 / span 3; display: grid; place-items: center; width: 72px; height: 72px; }
.ui-routest-arrow svg { width: 64px; height: 64px; transition: transform .2s; }
.ui-routest-in-m { font-size: 34px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ui-routest-text { font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ui-routest-count { font-size: 13px; opacity: .85; }
.ui-routest-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-routest-fill { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .3s; }
.ui-routest-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; text-align: center; }
.ui-routest-stats div { min-width: 0; }
.ui-routest-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-routest-stats dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-routest-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-routest-btn {
  box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  font: 600 15px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-routest-btn:disabled { opacity: .45; cursor: default; }
.ui-routest-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-routest-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; list-style: none; -webkit-overflow-scrolling: touch; }
.ui-routest-step {
  box-sizing: border-box; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--ui-border);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-routest-step:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-routest-step svg { width: 22px; height: 22px; }
.ui-routest-step[data-state="done"] { color: var(--ui-muted); }
.ui-routest-step[aria-current="step"] { background: var(--ui-accent-soft); font-weight: 600; }
.ui-routest-far { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-routest-empty { padding: 24px 12px; color: var(--ui-muted); text-align: center; }
/* With the room, the step stays large on one side and the list runs down the other. */
@container (min-width: 620px) {
  .ui-routest-in { flex-direction: row; align-items: stretch; gap: 20px; padding: 20px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .ui-routest-main { flex: 0 0 56%; align-content: start; }
  .ui-routest-card { grid-template-columns: 110px minmax(0, 1fr); min-height: 220px; padding: 20px 22px; }
  .ui-routest-arrow { width: 110px; height: 110px; }
  .ui-routest-arrow svg { width: 96px; height: 96px; }
  .ui-routest-in-m { font-size: 46px; }
  .ui-routest-text { font-size: 24px; }
}
@media (hover: hover) { .ui-routest-step:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-routest-card, .ui-routest-arrow svg, .ui-routest-fill { transition: none; } }


.ui-password-input { display: grid; gap: 6px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-password-input-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-password-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-password-input-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-password-input-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-password-input-box { position: relative; display: flex; align-items: center; }
.ui-password-input-control {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 44px 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1 var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-password-input-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-password-input-control::-ms-reveal { display: none; }
.ui-password-input-control:hover { border-color: var(--ui-strong); }
.ui-password-input-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-password-input-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-password-input-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-password-input-toggle {
  position: absolute; right: 5px; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-muted); cursor: pointer;
}
.ui-password-input-toggle svg { width: 18px; height: 18px; }
.ui-password-input-toggle:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-password-input-toggle:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-password-input-toggle:disabled { opacity: .55; cursor: not-allowed; }
.ui-password-input-sm .ui-password-input-control { height: 30px; font-size: 13px; padding-right: 38px; }
.ui-password-input-sm .ui-password-input-toggle { right: 3px; height: 24px; width: 28px; }
.ui-password-input-sm .ui-password-input-toggle svg { width: 16px; height: 16px; }
.ui-password-input-meter { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-password-input-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: 1; max-width: 180px; }
.ui-password-input-bars span { height: 4px; border-radius: 2px; background: var(--ui-border); transition: background .2s; }
.ui-password-input-weak .ui-password-input-bars span:nth-child(-n+1) { background: var(--ui-danger); }
.ui-password-input-fair .ui-password-input-bars span:nth-child(-n+2) { background: var(--ui-warning); }
.ui-password-input-strong .ui-password-input-bars span { background: var(--ui-success); }
.ui-password-input-weak .ui-password-input-word { color: var(--ui-danger); }
.ui-password-input-fair .ui-password-input-word { color: var(--ui-warning); }
.ui-password-input-strong .ui-password-input-word { color: var(--ui-success); }
@media (prefers-reduced-motion: reduce) { .ui-password-input-control, .ui-password-input-bars span { transition: none; } }


.ui-icontabs { font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-icontabs-list { display: flex; gap: 4px; margin: 0; padding: 0; border-bottom: 1px solid var(--ui-border); }
.ui-icontabs-full .ui-icontabs-list .ui-icontabs-tab { flex: 1 1 0; }
.ui-icontabs-tab {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 72px; padding: 10px 12px 9px;
  margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
  background: transparent; color: var(--ui-muted); font: 500 13px/1 var(--ui-font); cursor: pointer; transition: color .12s, background .12s, border-color .12s;
}
.ui-icontabs-tab:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-icontabs-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-icontabs-tab[aria-selected="true"] { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.ui-icontabs-tab:disabled { opacity: .5; cursor: not-allowed; }
.ui-icontabs-icon { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: 22px; line-height: 1; }
.ui-icontabs-icon svg { width: 24px; height: 24px; }
.ui-icontabs-badge {
  position: absolute; top: -5px; left: 100%; margin-left: -10px; min-width: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--ui-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.ui-icontabs-sm .ui-icontabs-tab { min-width: 56px; padding: 7px 8px 6px; font-size: 12px; }
.ui-icontabs-sm .ui-icontabs-icon { width: 22px; height: 22px; font-size: 18px; }
.ui-icontabs-sm .ui-icontabs-icon svg { width: 20px; height: 20px; }
.ui-icontabs-panel { padding-top: 16px; }
.ui-icontabs-panel > :first-child { margin-top: 0; }
.ui-icontabs-panel > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ui-icontabs-tab { transition: none; } }


.ui-swipe-kanban { position: relative; container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); background: var(--ui-bg); }
.ui-swipe-kanban-tabs { display: flex; flex: none; gap: 2px; padding: env(safe-area-inset-top) 8px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 1px solid var(--ui-border); }
.ui-swipe-kanban-tabs::-webkit-scrollbar { display: none; }
.ui-swipe-kanban-tab { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ui-muted); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-swipe-kanban-seen { border-bottom-color: var(--ui-accent); color: var(--ui-fg); }
.ui-swipe-kanban-tab span { margin-left: 4px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-swipe-kanban-track { display: flex; flex: 1; gap: 10px; min-height: 0; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none; }
.ui-swipe-kanban-track::-webkit-scrollbar { display: none; }
.ui-swipe-kanban-col { display: flex; flex: 0 0 calc(100cqw - 44px); flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--ui-radius); background: var(--ui-subtle); scroll-snap-align: start; scroll-snap-stop: always; }
.ui-swipe-kanban-col h3 { flex: none; margin: 0; padding: 10px 12px 2px; font-size: 14px; font-weight: 600; }
.ui-swipe-kanban-list { display: grid; flex: 1; align-content: start; gap: 6px; min-height: 80px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior-y: contain; list-style: none; }
.ui-swipe-kanban-card { position: relative; display: flex; align-items: stretch; min-height: 60px; border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow); touch-action: pan-x pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ui-swipe-kanban-card[data-tone]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--ui-accent); }
.ui-swipe-kanban-card[data-tone="success"]::before { background: var(--ui-success); }
.ui-swipe-kanban-card[data-tone="warning"]::before { background: var(--ui-warning); }
.ui-swipe-kanban-card[data-tone="danger"]::before { background: var(--ui-danger); }
.ui-swipe-kanban-card[data-tone="info"]::before { background: var(--ui-info); }
.ui-swipe-kanban-pressed { background: var(--ui-accent-soft); }
.ui-swipe-kanban-lifted { opacity: .35; }
.ui-swipe-kanban-grip { display: grid; flex: none; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: grab; touch-action: none; }
.ui-swipe-kanban-grip svg { width: 18px; height: 18px; }
.ui-swipe-kanban-open { flex: 1; min-width: 0; min-height: 44px; padding: 8px 2px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-swipe-kanban-title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ui-swipe-kanban-note { display: block; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-swipe-kanban-more { display: grid; flex: none; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-swipe-kanban-more svg { width: 20px; height: 20px; }
.ui-swipe-kanban-none { padding: 14px 8px; color: var(--ui-muted); font-size: 14px; text-align: center; }
.ui-swipe-kanban-ghost { position: absolute; top: 0; left: 0; z-index: 6; min-height: 52px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); pointer-events: none; will-change: transform; }
.ui-swipe-kanban-ghost[hidden], .ui-swipe-kanban-line[hidden], .ui-swipe-kanban-edge[hidden] { display: none; }
.ui-swipe-kanban-line { position: absolute; top: 0; left: 0; z-index: 5; height: 3px; border-radius: 2px; background: var(--ui-accent); pointer-events: none; }
.ui-swipe-kanban-edge { position: absolute; top: 0; bottom: 0; z-index: 4; width: 44px; pointer-events: none; }
.ui-swipe-kanban-edge[data-side="left"] { left: 0; background: linear-gradient(to right, var(--ui-accent-soft), transparent); }
.ui-swipe-kanban-edge[data-side="right"] { right: 0; background: linear-gradient(to left, var(--ui-accent-soft), transparent); }
.ui-swipe-kanban-say { flex: none; margin: 0; padding: 0 14px 6px; color: var(--ui-muted); font-size: 13px; }
.ui-swipe-kanban-say:empty { display: none; }
.ui-swipe-kanban-say[data-bad] { color: var(--ui-danger); }
.ui-swipe-kanban-sheet { box-sizing: border-box; inset: auto 0 0 0; width: min(100vw, 560px); max-width: 100vw; max-height: 80dvh; margin: 0 auto; padding: 10px 14px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; border: 1px solid var(--ui-border); border-bottom: 0; border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.4 var(--ui-font); }
.ui-swipe-kanban-sheet[open] { display: grid; gap: 6px; animation: ui-swipe-kanban-up .22s cubic-bezier(.2, .8, .2, 1); }
.ui-swipe-kanban-sheet::backdrop { background: var(--ui-overlay); }
@keyframes ui-swipe-kanban-up { from { transform: translateY(100%); } }
.ui-swipe-kanban-sheet h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.ui-swipe-kanban-pick { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); text-align: left; cursor: pointer; }
.ui-swipe-kanban-pick:disabled { color: var(--ui-muted); cursor: default; }
.ui-swipe-kanban :is(.ui-swipe-kanban-tab, .ui-swipe-kanban-grip, .ui-swipe-kanban-open, .ui-swipe-kanban-more, .ui-swipe-kanban-pick):focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
/* A tablet stands columns side by side, as many as are readable, so a card goes across without turning. */
@container (min-width: 600px) {
  .ui-swipe-kanban-col { flex-basis: calc((100cqw - 34px) / 2); }
  .ui-swipe-kanban-sheet { inset: 0; width: 420px; height: fit-content; margin: auto; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); }
}
@container (min-width: 780px) {
  .ui-swipe-kanban-col { flex-basis: calc((100cqw - 44px) / 3); }
}
@media (hover: hover) {
  .ui-swipe-kanban-more:hover, .ui-swipe-kanban-grip:hover { color: var(--ui-fg); }
  .ui-swipe-kanban-pick:hover:not(:disabled) { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-swipe-kanban-sheet[open] { animation: none; } }


.ui-kpts { --t: var(--ui-accent); display: grid; gap: 10px; max-width: 680px; padding: 16px 20px 18px; border-radius: var(--ui-radius);
  border: 1px solid color-mix(in srgb, var(--t) 30%, var(--ui-border)); border-top: 4px solid var(--t);
  background: color-mix(in srgb, var(--t) 5%, var(--ui-surface)); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-kpts-info { --t: var(--ui-info); }
.ui-kpts-warning { --t: var(--ui-warning); }
.ui-kpts-danger { --t: var(--ui-danger); }
.ui-kpts-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ui-kpts .ui-kpts-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ui-kpts-head time { color: var(--ui-muted); font-size: 13px; }
.ui-kpts-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ui-kpts var(--s, 0); }
.ui-kpts-list li { position: relative; padding-left: 22px; counter-increment: ui-kpts; }
.ui-kpts-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--t); }
.ui-kpts-num .ui-kpts-list li { padding-left: 30px; }
.ui-kpts-num .ui-kpts-list li::before { content: counter(ui-kpts); top: .1em; left: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--t); color: var(--ui-bg); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.ui-kpts-list a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--t) 60%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ui-kpts-list a:hover { color: var(--t); }
.ui-kpts-list a:focus-visible, .ui-kpts-more summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-kpts-more > .ui-kpts-list { margin-top: 8px; }
.ui-kpts-more summary { display: inline-block; color: var(--t); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.ui-kpts-more summary::-webkit-details-marker { display: none; }
.ui-kpts-more summary::after { content: " ▾"; }
.ui-kpts-more[open] summary::after { content: " ▴"; }
.ui-kpts-more[open] .ui-kpts-show, .ui-kpts-more:not([open]) .ui-kpts-hide { display: none; }
.ui-kpts-note { margin: 0; color: var(--ui-muted); font-size: 12px; }


.ui-triptl { position: relative; container-type: inline-size; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-triptl-in { display: grid; gap: 14px; }
.ui-triptl-side { display: grid; gap: 8px; align-content: start; }
.ui-triptl-title { margin: 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.ui-triptl-next {
  margin: 0; padding: 12px 14px; border-radius: var(--ui-radius); background: var(--ui-accent-soft); color: var(--ui-fg); font-weight: 600;
}
.ui-triptl-next span { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-triptl-go {
  box-sizing: border-box; justify-self: start; min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-triptl-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-triptl-list { margin: 0; padding: 0; list-style: none; }
.ui-triptl-day { margin: 16px 0 6px; color: var(--ui-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.ui-triptl-item:first-child .ui-triptl-day { margin-top: 0; }
.ui-triptl-leg {
  box-sizing: border-box; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-margin: 12px; -webkit-tap-highlight-color: transparent;
}
.ui-triptl-leg:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-triptl-leg[data-mark="past"] { opacity: .62; }
.ui-triptl-leg[data-mark="now"] { border-color: var(--ui-success); box-shadow: inset 4px 0 0 var(--ui-success); }
.ui-triptl-leg[data-mark="next"] { border-color: var(--ui-accent); box-shadow: inset 4px 0 0 var(--ui-accent), 0 0 0 1px var(--ui-accent); }
.ui-triptl-icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-fg); }
.ui-triptl-icon svg { width: 20px; height: 20px; }
.ui-triptl-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-triptl-times { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-variant-numeric: tabular-nums; }
.ui-triptl-times b { font-size: 19px; font-weight: 700; }
.ui-triptl-where { color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-triptl-off { color: var(--ui-muted); font-size: 12px; }
.ui-triptl-more { grid-column: 2; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-triptl-gap { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 4px 0 4px 17px; padding: 6px 0 6px 18px; border-left: 2px dashed var(--ui-strong); color: var(--ui-muted); font-size: 13px; }
.ui-triptl-gap:empty { display: none; }
.ui-triptl-shift { color: var(--ui-fg); font-weight: 600; }
.ui-triptl-empty { padding: 20px 8px; color: var(--ui-muted); text-align: center; }
/* With the room, what is next stays in sight beside the whole trip. */
@container (min-width: 620px) {
  .ui-triptl-in { grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 24px; }
  .ui-triptl-side { position: sticky; top: 12px; }
}
@media (hover: hover) { .ui-triptl-leg:hover { border-color: var(--ui-strong); } }


.ui-coach-host { display: contents; }
.ui-coach { position: fixed; z-index: 65; width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 12px 14px;
  border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg); box-shadow: var(--ui-shadow-lg);
  font: 14px/1.45 var(--ui-font); animation: ui-coach-in .18s ease-out; }
.ui-coach::after { content: ""; position: absolute; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.ui-coach-bottom::after { top: -6px; left: calc(50% - 6px); }
.ui-coach-top::after { bottom: -6px; left: calc(50% - 6px); }
.ui-coach-left::after { right: -6px; top: calc(50% - 6px); }
.ui-coach-right::after { left: -6px; top: calc(50% - 6px); }
.ui-coach-step { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ui-coach-title { margin: 0 0 2px; font-weight: 600; }
.ui-coach-text { margin: 0; opacity: .92; }
.ui-coach-btn { display: inline-flex; align-items: center; height: 30px; margin-top: 10px; padding: 0 12px; border: 0;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent-fg); color: var(--ui-accent); font: 600 13px/1 var(--ui-font); cursor: pointer; }
.ui-coach-btn:hover { opacity: .9; }
.ui-coach-btn:focus-visible { outline: 2px solid var(--ui-accent-fg); outline-offset: 2px; }
.ui-coach-target { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: var(--ui-radius-sm); }
@keyframes ui-coach-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ui-coach { animation: none; } }


.ui-reactions { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 13px/1 var(--ui-font); color: var(--ui-fg); }
.ui-reactions-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 7px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ui-reactions-chip:hover { border-color: var(--ui-strong); }
.ui-reactions-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reactions-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-reactions-emoji { font-size: 15px; line-height: 1; }
.ui-reactions-count { font-variant-numeric: tabular-nums; }
.ui-reactions-add {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px dashed var(--ui-strong); border-radius: 999px;
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-reactions-add svg { width: 15px; height: 15px; }
.ui-reactions-add:hover, .ui-reactions-add[aria-expanded="true"] { border-style: solid; border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-reactions-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reactions-menu {
  position: absolute; z-index: 20; top: 100%; left: 0; display: flex; gap: 2px; margin-top: 6px; padding: 4px;
  border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.ui-reactions-menu[hidden] { display: none; }
.ui-reactions-pick {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  font-size: 18px; line-height: 1; cursor: pointer; transition: transform .1s;
}
.ui-reactions-pick:hover { background: var(--ui-subtle); transform: scale(1.2); }
.ui-reactions-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reactions-pick[aria-pressed="true"] { background: var(--ui-accent-soft); }
.ui-reactions-sm .ui-reactions-chip { height: 24px; padding: 0 7px 0 6px; font-size: 12px; }
.ui-reactions-sm .ui-reactions-emoji { font-size: 13px; }
.ui-reactions-sm .ui-reactions-add { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .ui-reactions-chip, .ui-reactions-pick { transition: none; } .ui-reactions-pick:hover { transform: none; } }


.ui-checkbox { display: grid; gap: 2px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-checkbox-label { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; width: fit-content; }
.ui-checkbox-label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-checkbox-box {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px;
  background: var(--ui-surface); border: 1px solid var(--ui-strong); border-radius: 4px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ui-checkbox-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--ui-accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform .12s;
}
.ui-checkbox-label:hover .ui-checkbox-box { border-color: var(--ui-accent); }
.ui-checkbox-label input:checked + .ui-checkbox-box,
.ui-checkbox-label input[data-indeterminate]:not(:checked) + .ui-checkbox-box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-checkbox-label input:checked + .ui-checkbox-box::after { transform: rotate(45deg) scale(1); }
.ui-checkbox-label input[data-indeterminate]:not(:checked) + .ui-checkbox-box::after {
  left: 3px; top: 7px; width: 10px; height: 0; border-width: 0 0 2px; transform: none;
}
.ui-checkbox-label input:focus-visible + .ui-checkbox-box { box-shadow: var(--ui-focus); }
.ui-checkbox-req { margin-left: 2px; color: var(--ui-danger); }
.ui-checkbox-hint, .ui-checkbox-error { margin: 0 0 0 28px; font-size: 13px; color: var(--ui-muted); }
.ui-checkbox-error { color: var(--ui-danger); }
.ui-checkbox-invalid .ui-checkbox-box { border-color: var(--ui-danger); }
.ui-checkbox-disabled { opacity: .55; }
.ui-checkbox-disabled .ui-checkbox-label { cursor: not-allowed; }
.ui-checkbox-disabled .ui-checkbox-label:hover .ui-checkbox-box { border-color: var(--ui-strong); }
.ui-checkbox-group { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-checkbox-group-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-checkbox-group-list { display: flex; flex-direction: column; gap: 10px; }
.ui-checkbox-group-row .ui-checkbox-group-list { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
.ui-checkbox-group-hint, .ui-checkbox-group-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-checkbox-group-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-checkbox-box, .ui-checkbox-box::after { transition: none; } }


.ui-comboc {
  --ui-comboc-1: light-dark(#2a78d6, #3987e5); --ui-comboc-2: light-dark(#eb6834, #d95926);
  --ui-comboc-3: light-dark(#1baf7a, #199e70); --ui-comboc-4: light-dark(#eda100, #c98500);
  --ui-comboc-5: light-dark(#e87ba4, #d55181); --ui-comboc-6: light-dark(#008300, #008300);
  --ui-comboc-7: light-dark(#6250d6, #9085e9); --ui-comboc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-comboc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-comboc-s1 { --c: var(--ui-comboc-1); } .ui-comboc-s2 { --c: var(--ui-comboc-2); } .ui-comboc-s3 { --c: var(--ui-comboc-3); }
.ui-comboc-s4 { --c: var(--ui-comboc-4); } .ui-comboc-s5 { --c: var(--ui-comboc-5); } .ui-comboc-s6 { --c: var(--ui-comboc-6); }
.ui-comboc-s7 { --c: var(--ui-comboc-7); } .ui-comboc-s8 { --c: var(--ui-comboc-8); }
.ui-comboc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-comboc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-comboc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-comboc-lkey { width: 14px; height: 3px; border-radius: 2px; }
.ui-comboc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
.ui-comboc-axis { text-align: right; color: var(--ui-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-comboc-raxis { text-align: left; }
.ui-comboc-y { position: relative; min-width: 24px; margin-top: 8px; }
.ui-comboc-y span { position: absolute; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-comboc-left span { right: 0; }
.ui-comboc-right span { left: 0; }
.ui-comboc-plot { position: relative; margin-top: 8px; }
.ui-comboc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-comboc-grid.ui-comboc-zero { background: var(--ui-strong); }
.ui-comboc-cols { position: absolute; inset: 0; display: flex; }
.ui-comboc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-comboc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-comboc-bars { position: absolute; inset: 0 18%; display: flex; justify-content: center; gap: 2px; }
.ui-comboc-slot { position: relative; flex: 1; max-width: 40px; }
.ui-comboc-bar { position: absolute; left: 0; right: 0; bottom: var(--a); height: var(--b); min-height: 1px;
  background: var(--c); border-radius: 4px 4px 0 0; }
.ui-comboc-neg { border-radius: 0 0 4px 4px; }
.ui-comboc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-comboc-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-comboc-pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-comboc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 130px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-comboc-col:first-child .ui-comboc-tip { left: 0; transform: translateY(-100%); }
.ui-comboc-col:last-child .ui-comboc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-comboc-col:hover .ui-comboc-tip { display: block; }
.ui-comboc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-comboc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-comboc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-comboc-x { display: flex; margin-top: 6px; }
.ui-comboc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }


.ui-chat-composer { display: flex; align-items: flex-end; gap: 8px; min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-chat-composer-before { display: flex; align-items: center; gap: 2px; align-self: flex-end; height: 38px; }
.ui-chat-composer-box {
  flex: 1; min-width: 0; min-height: 38px; max-height: calc(var(--ui-chat-composer-rows, 5) * 1.45em + 18px); margin: 0; padding: 8px 12px; resize: none;
  field-sizing: content; border: 1px solid transparent; border-radius: 19px; background: var(--ui-subtle); color: var(--ui-fg); font: 14px/1.45 var(--ui-font);
}
.ui-chat-composer-box::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-chat-composer-box:focus { outline: none; border-color: var(--ui-accent); background: var(--ui-surface); box-shadow: var(--ui-focus); }
.ui-chat-composer-box:disabled { opacity: .55; cursor: not-allowed; }
.ui-chat-composer-send {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); cursor: pointer; transition: background .15s, opacity .15s;
}
.ui-chat-composer-send svg { width: 18px; height: 18px; }
.ui-chat-composer-send:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-chat-composer-send:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chat-composer-send:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-chat-composer-send { transition: none; } }


.ui-walcard { display: grid; gap: 14px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); --ui-walcard-w: min(100cqw, 380px); --ui-walcard-h: calc(var(--ui-walcard-w) / 1.586); }
.ui-walcard-deck {
  position: relative; width: var(--ui-walcard-w); max-width: 100%; margin: 0 auto; padding: 0; list-style: none;
  height: calc(var(--ui-walcard-h) + (var(--ui-walcard-n) - 1) * 44px); transition: height .26s cubic-bezier(.2, .8, .2, 1);
}
.ui-walcard-apart { height: calc(var(--ui-walcard-n) * (var(--ui-walcard-h) + 12px)); }
.ui-walcard-lifted { height: calc(var(--ui-walcard-h) + 24px + (var(--ui-walcard-n) - 1) * 10px); }
.ui-walcard-item {
  position: absolute; inset: 0 0 auto 0; z-index: var(--ui-walcard-i); transform: translateY(calc(var(--ui-walcard-i) * 44px));
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.ui-walcard-apart .ui-walcard-item { transform: translateY(calc(var(--ui-walcard-i) * (var(--ui-walcard-h) + 12px))); }
/* The others go behind the one lifted, their edges showing under it; the row of buttons reaches them. */
.ui-walcard-lifted .ui-walcard-item { z-index: 1; transform: translateY(calc(24px + var(--ui-walcard-r) * 10px)) scale(.94); }
.ui-walcard-lifted .ui-walcard-chosen { z-index: 40; transform: translateY(0); }
.ui-walcard-face {
  box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; width: 100%; height: var(--ui-walcard-h); padding: 14px 16px; border: 0;
  border-radius: 14px; background: var(--ui-walcard-c, #2b2a3a); color: #fff; font: 14px/1.3 var(--ui-font); text-align: left; cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 14, 24, .28); touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%);
}
.ui-walcard-face:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.ui-walcard-chosen .ui-walcard-face { box-shadow: 0 12px 28px rgba(15, 14, 24, .4); }
.ui-walcard-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.ui-walcard-digits { align-self: center; font: 500 17px/1.2 var(--ui-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-walcard-low { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; opacity: .92; }
.ui-walcard-tag { padding: 0 6px; border-radius: 999px; background: #fff; color: #b42318; font-weight: 700; }
.ui-walcard-bar { display: flex; justify-content: center; }
.ui-walcard-detail { display: grid; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-walcard-detail h3 { margin: 0; font-size: 16px; }
.ui-walcard-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; }
.ui-walcard-facts dt { color: var(--ui-muted); }
.ui-walcard-facts dd { margin: 0; overflow-wrap: anywhere; }
.ui-walcard-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-walcard-time, .ui-walcard-bad { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-walcard-bad { color: var(--ui-danger); }
.ui-walcard-others { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-walcard-other {
  min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-walcard-other:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-walcard-choose { display: none; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-walcard-hint { margin: 0; color: var(--ui-muted); font-size: 13px; text-align: center; }
@container (min-width: 620px) {
  .ui-walcard-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .ui-walcard-deck, .ui-walcard-apart, .ui-walcard-lifted { display: grid; gap: 10px; width: 100%; height: auto; }
  .ui-walcard-item, .ui-walcard-apart .ui-walcard-item, .ui-walcard-lifted .ui-walcard-item, .ui-walcard-lifted .ui-walcard-chosen { position: static; transform: none; }
  .ui-walcard-face { height: 150px; }
  .ui-walcard-chosen .ui-walcard-face { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
  .ui-walcard-bar, .ui-walcard-hint, .ui-walcard-others { display: none; }
  .ui-walcard-choose { display: block; }
}
@media (prefers-reduced-motion: reduce) { .ui-walcard-deck, .ui-walcard-item { transition: none; } }


.ui-credit-score { container-type: inline-size; display: grid; gap: 18px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font);
  --ui-credit-score-c0: var(--ui-danger); --ui-credit-score-c1: var(--ui-warning);
  --ui-credit-score-c2: color-mix(in srgb, var(--ui-success) 55%, #c9b400);
  --ui-credit-score-c3: var(--ui-success); --ui-credit-score-c4: color-mix(in srgb, var(--ui-success) 70%, var(--ui-info)); }
.ui-credit-score-main { display: grid; gap: 18px; align-items: center; }
@container (min-width: 560px) { .ui-credit-score-main { grid-template-columns: minmax(220px, 300px) 1fr; } }
.ui-credit-score-dial { position: relative; justify-self: center; width: 100%; max-width: 300px; }
.ui-credit-score-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-credit-score-arc { fill: none; stroke-width: 16; stroke-linecap: butt; opacity: .28; }
.ui-credit-score-arc[data-current] { opacity: 1; }
.ui-credit-score-mark { fill: var(--ui-surface); stroke: var(--ui-fg); stroke-width: 3; }
.ui-credit-score-ends { fill: var(--ui-muted); font: 10px var(--ui-font); }
.ui-credit-score-read { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 0; text-align: center; }
.ui-credit-score-num { font-size: 40px; font-weight: 750; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-credit-score-band { margin-top: 4px; font-size: 14px; font-weight: 650; color: var(--ui-credit-score-tone); }
.ui-credit-score-change { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: var(--ui-subtle); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-credit-score-up { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-credit-score-down { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-credit-score-period { color: var(--ui-muted); font-size: 12px; }
.ui-credit-score-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-credit-score-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 5px 10px; border-radius: var(--ui-radius-sm); }
.ui-credit-score-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ui-credit-score-tone); }
.ui-credit-score-legend li[data-current] { background: var(--ui-subtle); font-weight: 650; }
.ui-credit-score-legend span:last-child { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-credit-score-factors h4 { margin: 0 0 8px; font-size: 13px; font-weight: 650; }
.ui-credit-score-factors ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-credit-score-factor { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--ui-border); }
.ui-credit-score-effect { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 13px; font-weight: 700; }
.ui-credit-score-good .ui-credit-score-effect { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-credit-score-bad .ui-credit-score-effect { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-credit-score-what b { display: block; font-weight: 600; }
.ui-credit-score-what small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-credit-score-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ui-credit-score-impact { display: block; color: var(--ui-muted); font-size: 11px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.ui-credit-score-foot { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-credit-score-t0 { --ui-credit-score-tone: var(--ui-credit-score-c0); }
.ui-credit-score-t1 { --ui-credit-score-tone: var(--ui-credit-score-c1); }
.ui-credit-score-t2 { --ui-credit-score-tone: var(--ui-credit-score-c2); }
.ui-credit-score-t3 { --ui-credit-score-tone: var(--ui-credit-score-c3); }
.ui-credit-score-t4 { --ui-credit-score-tone: var(--ui-credit-score-c4); }
.ui-credit-score-arc { stroke: var(--ui-credit-score-tone); }


.ui-auditlog { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-auditlog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-auditlog-bar select, .ui-auditlog-search { height: 34px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface); color: var(--ui-fg); font: 13px/1 var(--ui-font); }
.ui-auditlog-bar select { padding: 0 28px 0 10px; appearance: none; -webkit-appearance: none; background: var(--ui-surface) no-repeat right 9px center / 9px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.ui-auditlog-search { flex: 1 1 180px; max-width: 280px; padding: 0 10px; }
.ui-auditlog-bar select:focus, .ui-auditlog-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-auditlog-count { margin-left: auto; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-auditlog-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-auditlog table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-auditlog th, .ui-auditlog td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.ui-auditlog th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ui-auditlog tbody tr:last-child td { border-bottom: 0; }
.ui-auditlog tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-auditlog-when { white-space: nowrap; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-auditlog-who { font-weight: 500; }
.ui-auditlog-action { display: inline-block; padding: 1px 7px; border-radius: 4px; font: 500 12px/1.5 var(--ui-mono); white-space: nowrap;
  --t: var(--ui-muted); color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); }
.ui-auditlog-success { --t: var(--ui-success); }
.ui-auditlog-warning { --t: var(--ui-warning); }
.ui-auditlog-danger { --t: var(--ui-danger); }
.ui-auditlog-info { --t: var(--ui-info); }
.ui-auditlog-detail { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-auditlog-ip { font: 12px/1.6 var(--ui-mono); color: var(--ui-muted); white-space: nowrap; }
.ui-auditlog-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); }
.ui-auditlog-pages { display: flex; justify-content: flex-end; gap: 6px; }
.ui-auditlog-pages button { height: 30px; padding: 0 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-auditlog-pages button:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-auditlog-pages button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-auditlog-pages button:disabled { opacity: .5; cursor: not-allowed; }


.ui-poll { display: grid; gap: 12px; min-width: 0; max-width: 480px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-poll-question { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-poll-options { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-poll-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-poll-option:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-poll-option:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-poll-result { position: relative; display: grid; gap: 4px; padding: 8px 12px; border-radius: var(--ui-radius-sm); overflow: hidden; background: var(--ui-subtle); }
.ui-poll-result::before { content: ""; position: absolute; inset: 0; width: var(--p); background: var(--ui-accent-soft); transition: width .4s; }
.ui-poll-mine::before { background: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-accent-soft)); }
.ui-poll-mine { box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-poll-line { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-poll-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ui-poll-name svg { width: 14px; height: 14px; color: var(--ui-accent); }
.ui-poll-pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.ui-poll-count { position: relative; font-size: 12px; color: var(--ui-muted); }
.ui-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ui-muted); }
.ui-poll-change { padding: 0; border: 0; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; border-radius: 3px; }
.ui-poll-change:hover { text-decoration: underline; }
.ui-poll-change:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-poll-option, .ui-poll-result::before { transition: none; } }


.ui-navstack { display: block; width: 100%; height: 100%; min-height: 0; container-type: inline-size; background: var(--ui-subtle); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-navstack-in { position: relative; width: 100%; height: 100%; overflow: hidden; overscroll-behavior-x: contain; touch-action: pan-y pinch-zoom; }
.ui-navstack-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-bg); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  animation: ui-navstack-in .3s cubic-bezier(.2, .8, .2, 1);
}
.ui-navstack-screen:dir(rtl) { animation-name: ui-navstack-in-rtl; }
.ui-navstack-screen[data-at="0"], .ui-navstack-quiet .ui-navstack-screen { animation: none; }
@keyframes ui-navstack-in { from { transform: translate3d(100%, 0, 0); } }
@keyframes ui-navstack-in-rtl { from { transform: translate3d(-100%, 0, 0); } }
.ui-navstack-under { visibility: hidden; transform: translate3d(-30%, 0, 0); transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.ui-navstack-under:dir(rtl) { transform: translate3d(30%, 0, 0); }
.ui-navstack-gone { transform: translate3d(100%, 0, 0); }
.ui-navstack-gone:dir(rtl) { transform: translate3d(-100%, 0, 0); }
.ui-navstack-moving .ui-navstack-screen { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-navstack-moving .ui-navstack-top { box-shadow: var(--ui-shadow-lg); }
.ui-navstack-bar {
  display: flex; flex: none; align-items: center; gap: 2px; box-sizing: border-box; min-height: calc(48px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-navstack-title { flex: 1; min-width: 0; margin: 0; padding-inline-start: 8px; overflow: hidden; font-size: 17px; font-weight: 600; outline: none; text-overflow: ellipsis; white-space: nowrap; }
.ui-navstack-back {
  display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 44px; max-width: 45%; height: 44px; padding: 0 8px 0 2px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: inherit; cursor: pointer;
}
.ui-navstack-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-navstack-back svg { flex: none; width: 26px; height: 26px; }
.ui-navstack-back:dir(rtl) svg { transform: scaleX(-1); }
.ui-navstack-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-navstack-back:hover { background: var(--ui-subtle); } }
/* touch-action on the scroller itself: it stops counting at a scroller. */
.ui-navstack-body { flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.ui-navstack-empty { display: none; }
@container (min-width: 700px) {
  .ui-navstack-split .ui-navstack-screen { inset-inline-start: 320px; }
  .ui-navstack-split .ui-navstack-screen[data-at="0"] {
    z-index: 1; inset-inline: 0 auto; width: 320px; border-inline-end: 1px solid var(--ui-border); transform: none; visibility: visible; transition: none;
  }
  .ui-navstack-split .ui-navstack-screen[data-at="1"] .ui-navstack-back { display: none; }
  .ui-navstack-split .ui-navstack-empty { position: absolute; inset: 0 0 0 320px; display: grid; place-items: center; color: var(--ui-muted); }
  .ui-navstack-split .ui-navstack-empty:dir(rtl) { inset: 0 320px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-navstack-screen, .ui-navstack-under { transition: none; animation: none; }
}


.ui-newb { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px;
  vertical-align: middle; font: 700 10.5px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  --t: var(--ui-accent); --tf: var(--ui-accent-fg); --ts: var(--ui-accent-soft); }
.ui-newb-success { --t: var(--ui-success); --tf: #fff; --ts: var(--ui-success-soft); }
.ui-newb-info { --t: var(--ui-info); --tf: #fff; --ts: var(--ui-info-soft); }
.ui-newb-warning { --t: var(--ui-warning); --tf: #fff; --ts: var(--ui-warning-soft); }
.ui-newb-danger { --t: var(--ui-danger); --tf: #fff; --ts: var(--ui-danger-soft); }
.ui-newb-neutral { --t: var(--ui-muted); --tf: var(--ui-bg); --ts: var(--ui-subtle); }
.ui-newb-solid { background: var(--t); color: var(--tf); }
.ui-newb-soft { background: var(--ts); color: var(--t); }
.ui-newb-outline { border-color: color-mix(in srgb, var(--t) 55%, var(--ui-border)); color: var(--t); }
.ui-newb-sm { height: 15px; padding: 0 4px; font-size: 9px; }


.ui-perms { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-perms table { width: 100%; border-collapse: collapse; }
.ui-perms th, .ui-perms td { padding: 10px 12px; border-bottom: 1px solid var(--ui-border); text-align: center; vertical-align: middle; }
.ui-perms tbody tr:last-child td { border-bottom: 0; }
.ui-perms th:first-child, .ui-perms td:first-child { text-align: left; }
.ui-perms thead th { background: var(--ui-subtle); font-size: 13px; font-weight: 600; }
.ui-perms-role { display: grid; gap: 4px; justify-items: center; }
.ui-perms-count { color: var(--ui-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ui-perms-group th { padding: 8px 12px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.ui-perms-label { font-weight: 500; }
.ui-perms-hint { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-perms input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); vertical-align: middle; cursor: pointer; }
.ui-perms input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-perms input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }
.ui-perms-locked { color: var(--ui-muted); }
.ui-perms-locked svg { width: 12px; height: 12px; vertical-align: -1px; margin-left: 3px; }
.ui-perms tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 60%, transparent); }


.ui-load-more-button { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-load-more-button .ui-btn { gap: 8px; }
.ui-load-more-button-count { opacity: .7; font-weight: 400; }
.ui-load-more-button-count::before { content: "·"; margin-right: 8px; }
.ui-load-more-button-done { margin: 0; color: var(--ui-muted); font: 14px/1.4 var(--ui-font); }


.ui-chksh-host { display: contents; }
.ui-chksh-open {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--ui-radius);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 15px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-chksh-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chksh-form { display: grid; gap: 20px; min-width: 0; margin: 0; }
.ui-chksh-col { display: grid; gap: 20px; min-width: 0; align-content: start; }
.ui-chksh-part { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-chksh-part legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 0 6px; font-size: 16px; font-weight: 600; }
.ui-chksh-state { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-chksh-ok { color: var(--ui-success); }
.ui-chksh-field { display: grid; gap: 2px; min-width: 0; }
.ui-chksh-field label { color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-chksh-field input, .ui-chksh-field select {
  box-sizing: border-box; width: 100%; min-width: 0; height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font);
}
.ui-chksh-field input:focus, .ui-chksh-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-chksh-field input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-chksh-err { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-chksh-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-chksh-choice {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 52px; padding: 6px 12px; box-sizing: border-box;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer; touch-action: manipulation;
}
.ui-chksh-choice:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-chksh-choice:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-chksh-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }
.ui-chksh-choice small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-chksh-choice b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ui-chksh-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-chksh-sums div { display: contents; }
.ui-chksh-sums dt { color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-chksh-sums dd { margin: 0; text-align: right; }
.ui-chksh-sums .ui-chksh-grand { color: var(--ui-fg); font-size: 16px; font-weight: 700; }
.ui-chksh-foot { display: grid; gap: 8px; }
.ui-chksh-total { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-chksh-said { margin: 0; color: var(--ui-danger); font-size: 14px; }
.ui-chksh-need { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-chksh-done { display: grid; gap: 10px; padding: 24px 0; text-align: center; }
.ui-chksh-done h3 { margin: 0; color: var(--ui-success); font-size: 20px; }
.ui-chksh-done p { margin: 0; color: var(--ui-muted); }
/* The slide. The track shows how far it has gone; the thumb is what the finger holds. */
.ui-chksh-slide {
  position: relative; height: 56px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-chksh-fill { position: absolute; inset: 0; background: var(--ui-accent); opacity: .25; transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.ui-chksh-words { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px 0 60px; font-weight: 600; pointer-events: none; }
.ui-chksh-thumb {
  position: absolute; left: 4px; top: 4px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-accent);
  color: var(--ui-accent-fg); cursor: grab; touch-action: none; box-shadow: var(--ui-shadow); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ui-chksh-thumb svg { width: 22px; height: 22px; }
.ui-chksh-thumb:focus-visible { outline: 3px solid var(--ui-fg); outline-offset: 1px; }
.ui-chksh-sliding .ui-chksh-thumb, .ui-chksh-sliding .ui-chksh-fill { transition: none; }
.ui-chksh-locked .ui-chksh-thumb { background: var(--ui-strong); color: var(--ui-fg); }
.ui-chksh-locked .ui-chksh-words { color: var(--ui-muted); }
.ui-chksh-busy .ui-chksh-thumb { cursor: progress; }
@container (min-width: 560px) { .ui-chksh-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .ui-chksh-fill, .ui-chksh-thumb { transition: none; } }


.ui-feature-list { display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; font: 15px/1.55 var(--ui-font); color: var(--ui-fg); }
.ui-feature-row { display: grid; gap: 32px 48px; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-feature-row-flip .ui-feature-row-words { order: 2; }
.ui-feature-row-words { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.ui-feature-row-eyebrow { margin: 0; color: var(--ui-accent); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ui-feature-row-title { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ui-feature-row-text { margin: 0; color: var(--ui-muted); font-size: 16px; }
.ui-feature-row-points { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.ui-feature-row-points li { display: flex; gap: 8px; align-items: baseline; }
.ui-feature-row-points svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--ui-success); }
.ui-feature-row-link { margin-top: 4px; color: var(--ui-accent); font-weight: 600; text-decoration: none; border-radius: 3px; }
.ui-feature-row-link:hover { text-decoration: underline; }
.ui-feature-row-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-feature-row-side { min-width: 0; }
.ui-feature-row-side > img { display: block; width: 100%; height: auto; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); }
.ui-feature-row-side > :first-child { margin-top: 0; }
@media (max-width: 760px) {
  .ui-feature-list { gap: 40px; }
  .ui-feature-row { grid-template-columns: minmax(0, 1fr); }
  .ui-feature-row-flip .ui-feature-row-words { order: 0; }
}


.ui-csvtable { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-csvtable-cap { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-csvtable-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-csvtable-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-csvtable table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-csvtable th, .ui-csvtable td { padding: 8px 14px; text-align: left; white-space: pre-line; border-bottom: 1px solid var(--ui-border); }
.ui-csvtable th { position: sticky; top: 0; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ui-csvtable tbody tr:last-child td { border-bottom: 0; }
.ui-csvtable .ui-csvtable-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-csvtable-zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-csvtable-more { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-csvtable-empty { padding: 24px 14px; text-align: center; color: var(--ui-muted); }


.ui-mail-merge { display: grid; gap: 14px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-mail-merge-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-mail-merge-field { display: grid; align-content: start; gap: 4px; min-width: 0; }
.ui-mail-merge-field label { font-size: 13px; font-weight: 500; }
.ui-mail-merge-field small { color: var(--ui-muted); font-size: 12px; }
.ui-mail-merge-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 8px 10px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); }
.ui-mail-merge-field textarea:hover { border-color: var(--ui-strong); }
.ui-mail-merge-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-mail-merge-said { margin: 0; font-weight: 600; }
.ui-mail-merge-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-mail-merge-errors { display: grid; gap: 4px; margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-mail-merge-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-mail-merge-list { min-width: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-mail-merge-list h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.ui-mail-merge-list ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.ui-mail-merge-warn { border-color: var(--ui-warning); }
.ui-mail-merge-link { padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.ui-mail-merge-link:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 2px; }
.ui-mail-merge-preview { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-mail-merge-preview:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mail-merge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-mail-merge-where { flex: 1 1 auto; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-mail-merge-btn { height: 30px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-mail-merge-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-mail-merge-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mail-merge-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-mail-merge-send { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-mail-merge-send:hover:not(:disabled) { background: var(--ui-accent); filter: brightness(1.08); }
.ui-mail-merge-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-mail-merge-text mark { border-radius: 2px; color: inherit; background: var(--ui-accent-soft); }
.ui-mail-merge-text .ui-mail-merge-fallback { background: var(--ui-warning-soft); }
.ui-mail-merge-text .ui-mail-merge-empty { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-mail-merge-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-mail-merge-action label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ui-mail-merge-action input { margin: 0; accent-color: var(--ui-accent); }


.ui-file-drop { display: grid; gap: 6px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-file-drop-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-file-drop-req { margin-left: 2px; color: var(--ui-danger); }
.ui-file-drop-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-file-drop-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-file-drop-zone {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center;
  border: 1.5px dashed var(--ui-strong); border-radius: var(--ui-radius); background: var(--ui-subtle); color: var(--ui-muted);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-file-drop-zone input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-file-drop-zone:hover { border-color: var(--ui-accent); }
.ui-file-drop-zone:has(input:focus-visible) { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-file-drop-over { border-color: var(--ui-accent); border-style: solid; background: var(--ui-accent-soft); }
.ui-file-drop-zone svg { width: 28px; height: 28px; color: var(--ui-accent); }
.ui-file-drop-text { color: var(--ui-fg); font-weight: 500; }
.ui-file-drop-text u { color: var(--ui-accent); text-underline-offset: 3px; }
.ui-file-drop-sub { font-size: 13px; }
.ui-file-drop-invalid { border-color: var(--ui-danger); }
.ui-file-drop:has(input:disabled) .ui-file-drop-zone { opacity: .55; }
.ui-file-drop-zone:has(input:disabled), .ui-file-drop-zone input:disabled { cursor: not-allowed; border-color: var(--ui-strong); }
.ui-file-drop-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-file-drop-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-size: 13px;
}
.ui-file-drop-list svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-file-drop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-file-drop-size { flex: none; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-file-drop-zone { transition: none; } }


.ui-mobilenav-foot:empty { display: none; }
.ui-mobilenav-host { display: contents; }
.ui-mobilenav-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); cursor: pointer;
}
.ui-mobilenav-btn svg { width: 22px; height: 22px; }
.ui-mobilenav-btn:hover { background: var(--ui-subtle); }
.ui-mobilenav-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (min-width: 760px) { .ui-mobilenav-host:not(.ui-mobilenav-wide) .ui-mobilenav-btn { display: none; } }
.ui-mobilenav {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.5 var(--ui-font); overscroll-behavior: contain;
}
.ui-mobilenav::backdrop { background: transparent; }
.ui-mobilenav[open] { display: flex; flex-direction: column; animation: ui-mobilenav-in .2s ease-out; }
@keyframes ui-mobilenav-in { from { opacity: 0; transform: translateY(-8px); } }
.ui-mobilenav-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: 60px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--ui-border); }
.ui-mobilenav-brand { font-weight: 650; font-size: 17px; }
.ui-mobilenav-body { flex: 1; overflow: auto; padding: 12px 12px 20px; }
.ui-mobilenav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-mobilenav ul ul { margin: 2px 0 8px 12px; padding-left: 12px; border-left: 1px solid var(--ui-border); }
.ui-mobilenav-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 500 17px/1.3 var(--ui-font); text-align: left; text-decoration: none; cursor: pointer; list-style: none;
}
.ui-mobilenav-link::-webkit-details-marker { display: none; }
.ui-mobilenav-link:hover { background: var(--ui-subtle); }
.ui-mobilenav-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mobilenav-link[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-mobilenav-icon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; font-size: 20px; line-height: 1; }
.ui-mobilenav-icon svg { width: 22px; height: 22px; }
.ui-mobilenav-text { flex: 1; min-width: 0; }
.ui-mobilenav-badge { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; font-weight: 600; text-align: center; }
.ui-mobilenav-chev { flex: none; width: 18px; height: 18px; color: var(--ui-muted); transition: transform .15s; }
details[open] > .ui-mobilenav-link .ui-mobilenav-chev { transform: rotate(180deg); }
.ui-mobilenav-foot { flex: none; display: grid; gap: 8px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); }
@media (prefers-reduced-motion: reduce) { .ui-mobilenav[open] { animation: none; } .ui-mobilenav-chev { transition: none; } }


.ui-teambal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 720px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-teambal .ui-teambal-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-teambal-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ui-teambal-field { display: grid; gap: 5px; align-content: start; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-teambal textarea, .ui-teambal-count input { box-sizing: border-box; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-teambal textarea { min-height: 110px; padding: 8px 10px; resize: vertical; }
.ui-teambal-count { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ui-teambal-count label { display: grid; gap: 5px; width: 110px; font-size: 13px; font-weight: 500; }
.ui-teambal-count input { height: 36px; }
.ui-teambal textarea:focus-visible, .ui-teambal-count input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-teambal-count input[aria-invalid] { border-color: var(--ui-danger); }
.ui-teambal-shuffle { height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-teambal-shuffle:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-teambal-shuffle:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-teambal-shuffle:disabled { opacity: .5; cursor: not-allowed; }
.ui-teambal-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-warning); font-size: 13px; }
.ui-teambal-error { margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 500; }
.ui-teambal-summary { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-teambal-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-teambal-team { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-teambal-head { display: flex; justify-content: space-between; gap: 8px; }
.ui-teambal .ui-teambal-name { margin: 0; font-size: 14px; font-weight: 650; }
.ui-teambal-total { font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-teambal-members { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-teambal-members li { display: flex; justify-content: space-between; gap: 8px; }
.ui-teambal-members span:last-child { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ui-teambal-inputs { grid-template-columns: minmax(0, 1fr); } }


.ui-message-bubble { display: flex; align-items: flex-end; gap: 8px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-message-bubble-mine { flex-direction: row-reverse; }
.ui-message-bubble-avatar {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 650; user-select: none;
}
.ui-message-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-message-bubble-body { display: grid; justify-items: start; min-width: 0; max-width: min(75%, 560px); }
.ui-message-bubble-mine .ui-message-bubble-body { justify-items: end; }
.ui-message-bubble-name { margin: 0 0 2px 12px; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-message-bubble-text { padding: 8px 12px; border-radius: 16px; background: var(--ui-subtle); color: var(--ui-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-message-bubble-mine .ui-message-bubble-text { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-message-bubble-theirs.ui-message-bubble-joins-up .ui-message-bubble-text { border-top-left-radius: 5px; }
.ui-message-bubble-theirs.ui-message-bubble-joins-down .ui-message-bubble-text { border-bottom-left-radius: 5px; }
.ui-message-bubble-mine.ui-message-bubble-joins-up .ui-message-bubble-text { border-top-right-radius: 5px; }
.ui-message-bubble-mine.ui-message-bubble-joins-down .ui-message-bubble-text { border-bottom-right-radius: 5px; }
.ui-message-bubble-meta { display: inline-flex; align-items: center; gap: 4px; margin: 3px 12px 0; color: var(--ui-muted); font-size: 11px; }
.ui-message-bubble-ticks { width: 16px; height: 12px; }
.ui-message-bubble-read .ui-message-bubble-ticks { color: var(--ui-accent); }
.ui-message-bubble-failed .ui-message-bubble-meta { color: var(--ui-danger); }
.ui-message-bubble-system { justify-content: center; }
.ui-message-bubble-system .ui-message-bubble-body { justify-items: center; max-width: 100%; }
.ui-message-bubble-system .ui-message-bubble-text { padding: 3px 10px; border-radius: 999px; background: transparent; color: var(--ui-muted); font-size: 12px; }


.phone-shell-demo-list { margin: 0; padding: 0; list-style: none; }
.phone-shell-demo-row { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; }
.phone-shell-demo-form { display: grid; gap: 12px; padding: 16px; }
.phone-shell-demo-form input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }
.phone-shell-demo-key { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ui-accent); font: 600 15px var(--ui-font); }


.ui-alerts { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-alerts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ui-alerts-title { margin: 0; font-size: 18px; font-weight: 700; }
.ui-alerts-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--ui-danger); color: var(--ui-bg); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-alerts-badge[data-none] { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-alerts-tabs { display: flex; gap: 2px; padding: 2px; margin-bottom: 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-alerts-tab { flex: 1; min-height: 44px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--ui-muted); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-alerts-tab[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); }
.ui-alerts-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-alerts-body { display: grid; gap: 14px; }
.ui-alerts-list { min-width: 0; }
.ui-alerts-group { margin: 10px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-muted); }
.ui-alerts-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-alerts-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--ui-border); overscroll-behavior-x: contain; --s: var(--ui-info); }
.ui-alerts-row[data-sev="critical"] { --s: var(--ui-danger); }
.ui-alerts-row[data-sev="warning"] { --s: var(--ui-warning); }
.ui-alerts-under { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; visibility: hidden; font-weight: 600; color: var(--ui-bg); }
.ui-alerts-row[data-pull="right"] .ui-alerts-under { visibility: visible; background: var(--ui-success); }
.ui-alerts-row[data-pull="left"] .ui-alerts-under { visibility: visible; background: var(--ui-warning); justify-content: flex-end; }
.ui-alerts-row[data-pull="left"] .ui-alerts-under-ack, .ui-alerts-row[data-pull="right"] .ui-alerts-under-snz { display: none; }
.ui-alerts-front { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; align-content: center; min-height: 60px; padding: 8px 14px; background: var(--ui-surface); outline: none; cursor: pointer;
  touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.ui-alerts-front:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-alerts-moving { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-alerts-chosen { background: var(--ui-accent-soft); }
.ui-alerts-dot { align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--s); }
.ui-alerts-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-alerts-when { color: var(--ui-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-alerts-text { grid-column: 2 / -1; color: var(--ui-muted); font-size: 14px; overflow-wrap: anywhere; }
.ui-alerts-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 12px; background: var(--ui-subtle); }
.ui-alerts-act { flex: 1 1 auto; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-alerts-act:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-alerts-act-main { border-color: transparent; background: var(--ui-success); color: var(--ui-bg); }
.ui-alerts-panel { display: none; }
.ui-alerts-none { margin: 12px 0; color: var(--ui-muted); }
.ui-alerts-undo { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 4px 6px 4px 14px; border-radius: var(--ui-radius); background: var(--ui-fg); color: var(--ui-bg); font-size: 14px; }
.ui-alerts-undo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-alerts-undo-btn { flex: none; min-width: 64px; min-height: 44px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: 600 14px/1 var(--ui-font); text-decoration: underline; cursor: pointer; touch-action: manipulation; }
.ui-alerts-undo-btn:focus-visible { outline: 2px solid currentColor; }
@container (min-width: 620px) {
  .ui-alerts-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
  .ui-alerts-inline { display: none; }
  .ui-alerts-panel { display: block; align-self: start; position: sticky; top: 8px; padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
  .ui-alerts-panel h3 { margin: 0 0 4px; font-size: 16px; }
  .ui-alerts-panel p { margin: 0 0 10px; color: var(--ui-muted); font-size: 14px; }
  .ui-alerts-panel .ui-alerts-acts { flex-direction: column; padding: 0; background: none; }
}
@media (hover: hover) {
  .ui-alerts-act:not(.ui-alerts-act-main):hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-alerts-front { transition: none; } }


.ui-kpicard { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg);
  --t: var(--ui-accent); --c: var(--ui-muted); }
.ui-kpicard-neutral { --t: var(--ui-muted); }
.ui-kpicard-success { --t: var(--ui-success); }
.ui-kpicard-warning { --t: var(--ui-warning); }
.ui-kpicard-danger { --t: var(--ui-danger); }
.ui-kpicard-info { --t: var(--ui-info); }
.ui-kpicard-good { --c: var(--ui-success); }
.ui-kpicard-bad { --c: var(--ui-danger); }
.ui-kpicard-label { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-kpicard-value { margin: 0; font-size: 30px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-kpicard-change { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ui-muted); }
.ui-kpicard-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 5px; border-radius: 999px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ui-kpicard-trend { display: block; width: 100%; height: 44px; margin-top: 6px; overflow: visible; color: var(--t); }
.ui-kpicard-good .ui-kpicard-trend, .ui-kpicard-bad .ui-kpicard-trend { color: var(--c); }
.ui-kpicard-trend path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-kpicard-trend .ui-kpicard-fill { fill: currentColor; opacity: .12; stroke: none; }
.ui-kpicard-trend rect { fill: currentColor; opacity: .35; }
.ui-kpicard-trend rect:last-child { opacity: 1; }
.ui-kpicard-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ui-border);
  font-size: 13px; color: var(--ui-muted); }
.ui-kpicard-foot a { color: var(--ui-accent); font-weight: 500; text-decoration: none; }
.ui-kpicard-foot a:hover { text-decoration: underline; }
.ui-kpicard-foot a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }


.ui-violin {
  --ui-violin-1: light-dark(#2a78d6, #3987e5); --ui-violin-2: light-dark(#eb6834, #d95926);
  --ui-violin-3: light-dark(#1baf7a, #199e70); --ui-violin-4: light-dark(#eda100, #c98500);
  --ui-violin-5: light-dark(#e87ba4, #d55181); --ui-violin-6: light-dark(#008300, #008300);
  --ui-violin-7: light-dark(#6250d6, #9085e9); --ui-violin-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-violin-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-violin-s1 { --c: var(--ui-violin-1); } .ui-violin-s2 { --c: var(--ui-violin-2); } .ui-violin-s3 { --c: var(--ui-violin-3); }
.ui-violin-s4 { --c: var(--ui-violin-4); } .ui-violin-s5 { --c: var(--ui-violin-5); } .ui-violin-s6 { --c: var(--ui-violin-6); }
.ui-violin-s7 { --c: var(--ui-violin-7); } .ui-violin-s8 { --c: var(--ui-violin-8); }
.ui-violin-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-violin-y { position: relative; min-width: 24px; }
.ui-violin-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-violin-plot { position: relative; }
.ui-violin-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-violin-cols { position: absolute; inset: 0; display: flex; }
.ui-violin-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-violin-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-violin-shape { position: absolute; top: 0; bottom: 0; left: 50%; width: min(80%, 110px); height: 100%; overflow: visible; transform: translateX(-50%); }
.ui-violin-area { fill: color-mix(in srgb, var(--c) 30%, var(--ui-bg)); stroke: var(--c); stroke-width: 1.5; stroke-linejoin: round; }
.ui-violin-col:hover .ui-violin-area { fill: color-mix(in srgb, var(--c) 45%, var(--ui-bg)); }
.ui-violin-box { position: absolute; left: 50%; bottom: var(--a); height: var(--b); width: 6px; margin-left: -3px; min-height: 2px;
  border-radius: 3px; background: var(--ui-fg); opacity: .75; }
.ui-violin-whisker { position: absolute; left: 50%; bottom: var(--a); height: var(--b); width: 0; border-left: 1px solid var(--ui-fg); opacity: .6; }
.ui-violin-median { position: absolute; left: 50%; bottom: var(--a); width: 8px; height: 8px; margin: 0 0 -4px -4px;
  border-radius: 50%; background: var(--ui-bg); box-shadow: 0 0 0 1.5px var(--ui-fg); }
.ui-violin-dot { position: absolute; left: 50%; bottom: var(--a); width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: var(--c); }
.ui-violin-x { display: flex; margin-top: 6px; }
.ui-violin-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-violin-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-violin-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-violin-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-violin-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-violin-tip { top: 0; left: calc(50% + 50px); }
.ui-violin-flip .ui-violin-tip { left: auto; right: calc(50% + 50px); }
.ui-violin-col:hover .ui-violin-tip { display: block; }


.ui-lo { position: relative; min-width: 0; }
.ui-lo-content { transition: filter .2s, opacity .2s; }
.ui-lo-busy > .ui-lo-content { opacity: .6; }
.ui-lo-busy.ui-lo-blur > .ui-lo-content { filter: blur(2px); }
.ui-lo-cover {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 16px; border-radius: inherit; background: color-mix(in srgb, var(--ui-bg) 55%, transparent);
  font: 500 14px/1.4 var(--ui-font); color: var(--ui-fg); text-align: center;
}
.ui-lo-spin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
  border-top-color: var(--ui-accent); animation: ui-lo-turn .75s linear infinite;
}
@keyframes ui-lo-turn { to { transform: rotate(360deg); } }
@keyframes ui-lo-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .ui-lo-spin { animation: ui-lo-pulse 2s ease-in-out infinite; border-color: var(--ui-accent); }
  .ui-lo-content { transition: none; }
}


.ui-convlist { position: relative; container-type: inline-size; box-sizing: border-box; height: 100%; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-convlist-split { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.ui-convlist-list { position: relative; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; list-style: none; }
.ui-convlist-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--ui-border); }
/* pan-y: the page keeps the up and down scroll; only sideways comes to the handlers. */
.ui-convlist-front { position: relative; z-index: 1; display: flex; align-items: stretch; background: var(--ui-bg); touch-action: pan-y; transition: transform .24s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ui-convlist-dragging { transition: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ui-convlist-open > .ui-convlist-front { transform: translateX(-96px); }
.ui-convlist-open-chat { display: flex; align-items: center; flex: 1; gap: 12px; box-sizing: border-box; min-width: 0; min-height: 72px; padding: 8px 4px 8px max(16px, env(safe-area-inset-left)); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-convlist-open-chat:active { background: color-mix(in srgb, var(--ui-fg) 7%, transparent); }
.ui-convlist-front:has(> [aria-current="true"]) { background: var(--ui-accent-soft); }
.ui-convlist-open-chat:focus-visible, .ui-convlist-more:focus-visible, .ui-convlist-archive:focus-visible, .ui-convlist-undo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-convlist-body { flex: 1; min-width: 0; }
.ui-convlist-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ui-convlist-name { flex: 0 1 auto; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-convlist-fresh .ui-convlist-name { font-weight: 700; }
.ui-convlist-icon { flex: none; align-self: center; width: 14px; height: 14px; color: var(--ui-muted); }
.ui-convlist-time { flex: none; margin-left: auto; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-convlist-fresh .ui-convlist-time { color: var(--ui-accent); font-weight: 600; }
.ui-convlist-muted .ui-convlist-time { color: var(--ui-muted); font-weight: 400; }
.ui-convlist-last { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-convlist-fresh .ui-convlist-last { color: var(--ui-fg); }
.ui-convlist-typing { display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 0; color: var(--ui-accent); font-size: 14px; font-style: italic; }
.ui-convlist-dots { display: inline-flex; gap: 3px; }
.ui-convlist-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: ui-convlist-blink 1.2s infinite both; }
.ui-convlist-dots i:nth-child(2) { animation-delay: .2s; }
.ui-convlist-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ui-convlist-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ui-convlist-badge { flex: none; min-width: 22px; padding: 2px 6px; box-sizing: border-box; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 12px/18px var(--ui-font); text-align: center; font-variant-numeric: tabular-nums; }
.ui-convlist-muted .ui-convlist-badge { background: var(--ui-strong); color: var(--ui-fg); }
.ui-convlist-more { flex: none; align-self: stretch; width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: pan-y; }
.ui-convlist-more svg { width: 20px; height: 20px; }
.ui-convlist-back { position: absolute; inset: 0 0 0 auto; display: flex; visibility: hidden; }
.ui-convlist-open > .ui-convlist-back, .ui-convlist-dragging + .ui-convlist-back { visibility: visible; }
.ui-convlist-archive { width: 96px; min-height: 44px; padding: 0; border: 0; background: var(--ui-info); color: #fff; font: 600 14px/1 var(--ui-font); cursor: pointer; transition: width .16s; }
/* Past the point where letting go archives, the button says so by taking the whole row. */
.ui-convlist-back[data-armed] { left: 0; }
.ui-convlist-back[data-armed] .ui-convlist-archive { flex: 1; width: auto; background: var(--ui-success); text-align: right; padding-right: 24px; }
.ui-convlist-toast { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 14px; border-radius: var(--ui-radius); background: var(--ui-fg); color: var(--ui-bg); font-size: 15px; box-shadow: var(--ui-shadow-lg); }
.ui-convlist-toast span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-convlist-undo { flex: none; min-width: 60px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: inherit; font: 700 15px/1 var(--ui-font); cursor: pointer; }
.ui-convlist-none { margin: 40px 16px; color: var(--ui-muted); text-align: center; }
.ui-convlist-pane { display: none; }
@container (min-width: 640px) {
  .ui-convlist-split { grid-template-columns: 320px minmax(0, 1fr); }
  .ui-convlist-list { border-right: 1px solid var(--ui-border); }
  .ui-convlist-pane { display: block; min-width: 0; padding: 20px; overflow-y: auto; }
  .ui-convlist-pane h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--ui-font); }
  .ui-convlist-pane p { margin: 0; color: var(--ui-muted); }
  .ui-convlist-toast { right: auto; width: 296px; }
}
@media (hover: hover) { .ui-convlist-open-chat:hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .ui-convlist-front, .ui-convlist-archive { transition: none; }
  .ui-convlist-dots i { animation: none; opacity: .7; }
}


.ui-spark { display: inline-block; vertical-align: middle; overflow: visible; color: var(--ui-accent); }
.ui-spark-neutral { color: var(--ui-muted); }
.ui-spark-success { color: var(--ui-success); }
.ui-spark-warning { color: var(--ui-warning); }
.ui-spark-danger { color: var(--ui-danger); }
.ui-spark-info { color: var(--ui-info); }
.ui-spark-line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-spark-fill { fill: currentColor; opacity: .14; stroke: none; }
.ui-spark-none { fill: none; stroke: var(--ui-border); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ui-spark-dot { fill: currentColor; stroke: var(--ui-bg); stroke-width: 1.5; }
.ui-spark-bar { fill: currentColor; opacity: .85; }
.ui-spark-bar:last-child { opacity: 1; }


.ui-recurrence-picker { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-recurrence-picker-legend { padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 500; }
.ui-recurrence-picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-recurrence-picker-select-box { position: relative; display: inline-block; }
.ui-recurrence-picker-select-box::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-recurrence-picker select, .ui-recurrence-picker-num, .ui-recurrence-picker-date {
  height: 36px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-recurrence-picker select { appearance: none; padding-right: 30px; cursor: pointer; }
.ui-recurrence-picker-num { width: 70px; font-variant-numeric: tabular-nums; }
.ui-recurrence-picker select:hover, .ui-recurrence-picker-num:hover, .ui-recurrence-picker-date:hover { border-color: var(--ui-strong); }
.ui-recurrence-picker select:focus-visible, .ui-recurrence-picker-num:focus, .ui-recurrence-picker-date:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-recurrence-picker-num:disabled, .ui-recurrence-picker-date:disabled { opacity: .5; }
.ui-recurrence-picker-muted { color: var(--ui-muted); }
.ui-recurrence-picker-days { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-recurrence-picker-day {
  width: 38px; height: 34px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ui-recurrence-picker-day:hover { border-color: var(--ui-accent); }
.ui-recurrence-picker-day[aria-pressed="true"] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-recurrence-picker-day:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-recurrence-picker-choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-recurrence-picker-choices legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.ui-recurrence-picker-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.ui-recurrence-picker-choice input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-accent); cursor: pointer; }
.ui-recurrence-picker-choice input[type=radio]:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 50%; }
.ui-recurrence-picker-summary { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-fg); font-size: 13px; }
.ui-recurrence-picker-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-recurrence-picker select, .ui-recurrence-picker-num, .ui-recurrence-picker-date, .ui-recurrence-picker-day { transition: none; } }


.adaptive-dialog-demo-field { box-sizing: border-box; display: block; width: 100%; height: 46px; margin: 6px 0 12px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-edgedrawer-demo-list { margin: 0; padding: 8px; list-style: none; }
.ui-edgedrawer-demo-list a, .ui-edgedrawer-demo-list button {
  box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 15px var(--ui-font); text-align: start; text-decoration: none; cursor: pointer;
}
.ui-edgedrawer-demo-list [aria-current] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-edgedrawer-demo-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); }
.ui-edgedrawer-demo-top h3 { margin: 0; font-size: 17px; }


.ui-tboard { position: relative; container-type: inline-size; font: 15px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-tboard-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 8px; }
.ui-tboard-stop { margin: 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.ui-tboard-clock { font: 600 18px/1 var(--ui-mono); font-variant-numeric: tabular-nums; }
.ui-tboard-note { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-fg); font-size: 14px; }
.ui-tboard-note:empty { display: none; }
.ui-tboard-fresh { margin: 0 0 8px; color: var(--ui-muted); font-size: 13px; }
.ui-tboard-fresh:empty { display: none; }
.ui-tboard-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.ui-tboard-chip {
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-tboard-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-tboard-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tboard-refresh { margin-left: auto; }
.ui-tboard-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-tboard-row {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: 60px; padding: 8px 2px; border-bottom: 1px solid var(--ui-border);
}
.ui-tboard-line {
  grid-row: 1 / span 2; display: grid; place-items: center; min-height: 34px; padding: 2px 4px; border-radius: 6px; background: var(--c, var(--ui-fg)); color: var(--i, var(--ui-bg));
  font-weight: 700; font-size: 13px; overflow-wrap: anywhere; text-align: center;
}
.ui-tboard-to { font-weight: 600; overflow-wrap: anywhere; }
.ui-tboard-wait { grid-column: 3; grid-row: 1 / span 2; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ui-tboard-sub { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-tboard-sub-times { display: inline-flex; gap: 0 6px; }
.ui-tboard-sub s { opacity: .8; }
.ui-tboard-late { color: var(--ui-danger); font-weight: 600; }
.ui-tboard-row[data-state="due"] .ui-tboard-wait { color: var(--ui-success); }
.ui-tboard-row[data-state="cancelled"] .ui-tboard-to { text-decoration: line-through; color: var(--ui-muted); }
.ui-tboard-row[data-state="cancelled"] .ui-tboard-wait { color: var(--ui-danger); font-size: 15px; }
.ui-tboard-empty { padding: 20px 8px; color: var(--ui-muted); text-align: center; }
.ui-tboard-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* With the room it is a board: columns that line up, the platform on its own. */
@container (min-width: 620px) {
  .ui-tboard-row { grid-template-columns: 72px minmax(0, 1fr) 150px 110px; }
  .ui-tboard-line { grid-row: auto; }
  .ui-tboard-sub { display: contents; }
  .ui-tboard-sub-times { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--ui-muted); font-size: 14px; }
  .ui-tboard-sub-where { grid-column: 2; grid-row: 2; color: var(--ui-muted); font-size: 13px; }
  .ui-tboard-wait { grid-column: 4; grid-row: 1 / span 2; }
  .ui-tboard-to { grid-column: 2; grid-row: 1; font-size: 17px; }
  .ui-tboard-line { grid-column: 1; grid-row: 1 / span 2; }
}


.ui-pr { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; font: 13px/1.4 var(--ui-font);
  color: var(--ui-fg); --t: var(--ui-accent); --s: 48px; }
.ui-pr-neutral { --t: var(--ui-muted); }
.ui-pr-success { --t: var(--ui-success); }
.ui-pr-warning { --t: var(--ui-warning); }
.ui-pr-danger { --t: var(--ui-danger); }
.ui-pr-info { --t: var(--ui-info); }
.ui-pr-sm { --s: 32px; }
.ui-pr-lg { --s: 72px; }
.ui-pr-xl { --s: 112px; flex-direction: column; gap: 8px; }
.ui-pr-ring { position: relative; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); }
.ui-pr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-pr-ring circle { fill: none; }
.ui-pr-track { stroke: var(--ui-subtle); }
.ui-pr-arc { stroke: var(--t); stroke-linecap: round; transition: stroke-dasharray .35s ease; }
.ui-pr-busy svg { animation: ui-pr-turn 1s linear infinite; }
@keyframes ui-pr-turn { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.ui-pr-value { position: relative; font-size: calc(var(--s) * .22); font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-pr-sm .ui-pr-value { display: none; }
.ui-pr-xl .ui-pr-value { font-size: 26px; }
.ui-pr-label { color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) {
  .ui-pr-arc { transition: none; }
  .ui-pr-busy svg { animation: ui-pr-pulse 2s ease-in-out infinite; }
}
@keyframes ui-pr-pulse { 50% { opacity: .45; } }


.ui-sbb {
  position: fixed; inset: auto 0 var(--ui-sbb-above, 0px) 0; z-index: 40; box-sizing: border-box; container-type: inline-size;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.3 var(--ui-font);
  transform: translateY(calc(100% + 12px)); visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility .22s;
}
.ui-sbb-up { transform: none; visibility: visible; }
.ui-sbb-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 760px; margin: 0 auto; }
.ui-sbb-what { display: grid; min-width: 0; }
.ui-sbb-name { display: none; overflow: hidden; color: var(--ui-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ui-sbb-buy { flex: 1 1 auto; max-width: 240px; }
@container (min-width: 600px) { .ui-sbb-name { display: block; } }
@media (prefers-reduced-motion: reduce) { .ui-sbb { transition: none; } }


.ui-form-summary { display: grid; gap: 18px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-form-summary-section { display: grid; gap: 10px; }
.ui-form-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ui-border); }
.ui-form-summary-title { margin: 0; font-size: 15px; font-weight: 600; }
.ui-form-summary-edit {
  padding: 0; border: 0; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); text-decoration: none;
  cursor: pointer; border-radius: 3px;
}
.ui-form-summary-edit:hover { text-decoration: underline; }
.ui-form-summary-edit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-form-summary-list { display: grid; gap: 8px; margin: 0; }
.ui-form-summary-item { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 4px 16px; margin: 0; }
.ui-form-summary-one .ui-form-summary-item { grid-template-columns: 1fr; }
.ui-form-summary-item dt { color: var(--ui-muted); }
.ui-form-summary-item dd { margin: 0; overflow-wrap: anywhere; }
.ui-form-summary-empty { color: var(--ui-muted); }
@media (max-width: 480px) { .ui-form-summary-item { grid-template-columns: 1fr; } }


.ui-ibaninput { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-ibaninput-label { font-size: 13px; font-weight: 500; }
.ui-ibaninput-req { margin-left: 2px; color: var(--ui-danger); }
.ui-ibaninput-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-mono); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.ui-ibaninput-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-ibaninput-control:hover { border-color: var(--ui-strong); }
.ui-ibaninput-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-ibaninput-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-ibaninput-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-ibaninput-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-ibaninput-out { display: grid; gap: 4px; min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-ibaninput-out p { margin: 0; }
.ui-ibaninput-good { color: var(--ui-success); }
.ui-ibaninput-bad { color: var(--ui-danger); }
.ui-ibaninput-fix { justify-self: start; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--ui-accent); font: 600 13px var(--ui-mono);
  cursor: pointer; text-align: left; text-decoration: underline; overflow-wrap: anywhere; }
.ui-ibaninput-fix:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-ibaninput-control { transition: none; } }


.ui-scatc {
  --ui-scatc-1: light-dark(#2a78d6, #3987e5); --ui-scatc-2: light-dark(#eb6834, #d95926);
  --ui-scatc-3: light-dark(#1baf7a, #199e70); --ui-scatc-4: light-dark(#eda100, #c98500);
  --ui-scatc-5: light-dark(#e87ba4, #d55181); --ui-scatc-6: light-dark(#008300, #008300);
  --ui-scatc-7: light-dark(#6250d6, #9085e9); --ui-scatc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-scatc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-scatc-s1 { --c: var(--ui-scatc-1); } .ui-scatc-s2 { --c: var(--ui-scatc-2); } .ui-scatc-s3 { --c: var(--ui-scatc-3); }
.ui-scatc-s4 { --c: var(--ui-scatc-4); } .ui-scatc-s5 { --c: var(--ui-scatc-5); } .ui-scatc-s6 { --c: var(--ui-scatc-6); }
.ui-scatc-s7 { --c: var(--ui-scatc-7); } .ui-scatc-s8 { --c: var(--ui-scatc-8); }
.ui-scatc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-scatc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-scatc-key { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ui-scatc-tkey { width: 16px; border-top: 1.5px dashed var(--ui-muted); }
.ui-scatc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.ui-scatc-ylabel { grid-column: 1 / -1; margin-bottom: 8px; color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-scatc-y { position: relative; min-width: 24px; }
.ui-scatc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-scatc-plot { position: relative; }
.ui-scatc-grid { position: absolute; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-scatc-h { left: 0; right: 0; height: 1px; }
.ui-scatc-v { top: 0; bottom: 0; width: 1px; }
.ui-scatc-zero { background: var(--ui-strong); }
.ui-scatc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-scatc-trend { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ui-scatc-pt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 80%, transparent); box-shadow: 0 0 0 1.5px var(--ui-bg); transition: box-shadow .12s ease; }
.ui-scatc-pt::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.ui-scatc-pt:hover { z-index: 10; background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--c); }
.ui-scatc-tip { position: absolute; z-index: 20; bottom: 14px; left: 50%; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translateX(-50%); pointer-events: none; }
.ui-scatc-pt:hover .ui-scatc-tip { display: block; }
.ui-scatc-left .ui-scatc-tip { left: 0; transform: none; }
.ui-scatc-right .ui-scatc-tip { left: auto; right: 0; transform: none; }
.ui-scatc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-scatc-tip p { display: flex; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-scatc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-scatc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-scatc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-scatc-x span:first-child { transform: none; }
.ui-scatc-x span:last-child { transform: translateX(-100%); }
.ui-scatc-xlabel { grid-column: 2; margin-top: 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ui-scatc-pt { transition: none; } }


.ui-selectable { display: grid; gap: 8px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-selectable-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-selectable table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-selectable th, .ui-selectable td { padding: 8px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-selectable thead th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-selectable tbody tr:last-child td { border-bottom: 0; }
.ui-selectable tbody tr { cursor: pointer; }
.ui-selectable tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-selectable tbody tr[aria-selected="true"] td { background: var(--ui-accent-soft); }
.ui-selectable-zebra tbody tr:nth-child(even):not([aria-selected="true"]) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-selectable .ui-selectable-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-selectable-box { width: 1%; padding-right: 4px; }
.ui-selectable input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--ui-accent); cursor: pointer; }
.ui-selectable input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-selectable input:disabled { cursor: not-allowed; opacity: .5; }
.ui-selectable-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 24px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-selectable-count b { color: var(--ui-fg); font-weight: 600; }
.ui-selectable-clear { height: 24px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-selectable-clear:hover { background: var(--ui-accent-soft); }
.ui-selectable-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-selectable-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); cursor: default; }


.ui-stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; min-width: 0; padding: 16px 18px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); }
.ui-stat-bare { padding: 0; border: 0; background: none; }
.ui-stat-label { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ui-stat-value { flex: none; margin: 0; font-size: 28px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.ui-stat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ui-muted); }
.ui-stat-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 5px; border-radius: 999px;
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); }
.ui-stat-good { --t: var(--ui-success); }
.ui-stat-bad { --t: var(--ui-danger); }
.ui-stat-flat { --t: var(--ui-muted); }
.ui-stat-trend { flex: 1 1 0; min-width: 28px; max-width: 72px; height: 28px; margin-bottom: 4px; overflow: visible; color: var(--t); }
.ui-stat-trend path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }


.ui-rk { --ui-rk-up: var(--ui-success); --ui-rk-down: var(--ui-danger);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-rk-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-rk-meta { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-rk-up { --k: var(--ui-rk-up); } .ui-rk-down { --k: var(--ui-rk-down); }
.ui-rk-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-rk-plot { position: relative; height: var(--h); }
.ui-rk-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-rk-last { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); opacity: .75; pointer-events: none; }
.ui-rk-cols { position: absolute; inset: 0; display: flex; }
.ui-rk-col { position: relative; flex: 1; min-width: 0; }
.ui-rk-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-rk-brick { position: absolute; left: 6%; right: 6%; min-height: 2px; border: 1px solid var(--k); border-radius: 2px;
  background: color-mix(in srgb, var(--k) 70%, transparent); }
.ui-rk-down .ui-rk-brick { background: color-mix(in srgb, var(--k) 18%, transparent); }
.ui-rk-col:hover .ui-rk-brick { background: var(--k); }
.ui-rk-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 12px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-rk-flip .ui-rk-tip { left: auto; right: calc(50% + 12px); }
.ui-rk-col:hover .ui-rk-tip { display: block; }
.ui-rk-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; color: var(--k); }
.ui-rk-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-rk-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-rk-y { position: relative; height: var(--h); }
.ui-rk-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-rk-y .ui-rk-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--k); color: var(--ui-bg); font-weight: 600; }
.ui-rk-x { position: relative; height: 16px; margin-top: 6px; }
.ui-rk-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-rk-x .ui-rk-first { transform: none; }
.ui-rk-x .ui-rk-end { transform: translateX(-100%); }
.ui-rk-empty { display: grid; place-items: center; height: var(--h); border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); }


.ui-defect { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-defect h3 { margin: 0; font-size: 18px; }
.ui-defect h4 { margin: 0; font-size: 15px; }
.ui-defect-cols { display: grid; gap: 14px; min-width: 0; }
.ui-defect-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ui-defect-part { display: grid; gap: 6px; min-width: 0; }
.ui-defect-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-defect-level { position: relative; display: grid; align-content: center; min-height: 64px; padding: 6px 10px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-weight: 700; cursor: pointer; touch-action: manipulation; }
.ui-defect-level small { color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-defect-level input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-defect-level:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-defect-level:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-defect-level:has(input[value="critical"]:checked) { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-defect-label { display: grid; gap: 2px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-defect-label input, .ui-defect-label textarea, .ui-defect-label select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }
.ui-defect-label input:focus, .ui-defect-label textarea:focus, .ui-defect-label select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-defect-plans { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.ui-defect-plan { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); font-weight: 600; cursor: pointer; }
.ui-defect-plan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-defect-plan:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-defect-plan:has(input:focus-visible) { box-shadow: var(--ui-focus); }
/* The page scrolls past the drawing, and so does the drawing when zoomed: a finger that
   moves is scrolling, and the browser says so with pointercancel. */
.ui-defect-view { position: relative; overflow: auto; max-height: 62dvh; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: #fff; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.ui-defect-sheet { position: relative; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui-defect-sheet img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
/* The place is on this wrapper and the drag's transform on the pin inside it. An element
   with style={...} in its markup has the whole attribute written again on a state change,
   which would wipe the transform and send a held pin home. */
.ui-defect-spot { position: absolute; width: 0; height: 0; }
.ui-defect-pin { position: absolute; left: -22px; top: -44px; display: grid; place-items: end center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ui-danger); cursor: grab; touch-action: none; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.ui-defect-pin[data-drag] { cursor: grabbing; transition: none; }
.ui-defect-pin svg { display: block; width: 36px; height: 36px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.ui-defect-pin:focus-visible { outline: none; }
.ui-defect-pin:focus-visible svg { outline: 3px solid var(--ui-accent); outline-offset: 1px; border-radius: 50%; }
.ui-defect-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-defect-where { flex: 1 1 100%; margin: 0; font-weight: 600; }
.ui-defect-tools > .ui-btn { flex: 1 1 96px; }
.ui-defect-sum { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 14px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-defect-said { margin: 0; font-weight: 600; }
.ui-defect-said:empty { display: none; }
.ui-defect-open { margin: 0; padding: 0 0 0 18px; color: var(--ui-danger); font-weight: 600; }
.ui-defect-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-defect-acts > * { flex: 1 1 130px; }
.ui-defect-note { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 14px; }
@container (min-width: 640px) {
  .ui-defect-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
  .ui-defect-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ui-defect-pin { transition: none; } }


.ui-drag { position: absolute; z-index: 1; touch-action: none; user-select: none; border-radius: var(--ui-radius-sm); outline: none; }
.ui-drag:not(.ui-drag-handled):not(.ui-drag-off) { cursor: grab; }
.ui-drag:focus-visible { box-shadow: var(--ui-focus); }
.ui-drag-on { z-index: 2; cursor: grabbing !important; box-shadow: var(--ui-shadow-lg); }
.ui-drag-grip { display: flex; justify-content: center; align-items: center; height: 16px; cursor: grab; color: var(--ui-muted);
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; background: var(--ui-subtle); }
.ui-drag-grip::before { content: ""; width: 24px; height: 4px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.ui-drag-on .ui-drag-grip { cursor: grabbing; }


.ui-profile-screen { position: relative; container-type: size; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); --ui-profile-screen-bar: calc(52px + env(safe-area-inset-top)); }
.ui-profile-screen-scroll { box-sizing: border-box; width: 100%; height: 100%; overflow-y: auto; overflow-anchor: none; overscroll-behavior-y: contain; }
.ui-profile-screen-scroll:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
/* On a phone this column is no box at all, so that the cover can stick for the whole page. */
.ui-profile-screen-aside { display: contents; }
/* What scrolling changes by hand is kept here, whose attributes are fixed: the outer element's are written again whenever a prop they read changes. */
.ui-profile-screen-in { position: relative; width: 100%; height: 100%; }
.ui-profile-screen-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 4px; box-sizing: border-box; height: var(--ui-profile-screen-bar); padding: env(safe-area-inset-top) 12px 0 4px; color: #fff; pointer-events: none; }
.ui-profile-screen-bar button { pointer-events: auto; }
.ui-profile-screen-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 14, 24, .35); color: #fff; cursor: pointer; }
.ui-profile-screen-back svg { width: 22px; height: 22px; }
.ui-profile-screen-back:focus-visible { outline: 2px solid #fff; }
.ui-profile-screen-title { min-width: 0; padding-left: 10px; overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .16s, transform .16s; }
.ui-profile-screen-titled .ui-profile-screen-title { opacity: 1; transform: none; }
.ui-profile-screen-cover {
  position: sticky; top: calc(var(--ui-profile-screen-bar) - var(--ui-profile-screen-h)); z-index: 3; height: var(--ui-profile-screen-h); overflow: hidden;
  background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 55%, #000));
}
.ui-profile-screen-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; }
.ui-profile-screen-cover::after { content: ""; position: absolute; inset: 0; background: rgba(15, 14, 24, calc(.5 * var(--ui-profile-screen-p, 0))); }
.ui-profile-screen-who { position: relative; padding: 0 16px 12px; }
.ui-profile-screen-face {
  position: relative; z-index: 3; display: grid; place-items: center; box-sizing: border-box; width: 84px; height: 84px; margin-top: -42px; overflow: hidden; border: 3px solid var(--ui-bg); border-radius: 50%;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 28px; font-weight: 650; transform: scale(calc(1 - .45 * var(--ui-profile-screen-p, 0))); transform-origin: 0 100%;
}
.ui-profile-screen-face img { width: 100%; height: 100%; object-fit: cover; }
.ui-profile-screen-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 6px; }
.ui-profile-screen-names { min-width: 0; }
.ui-profile-screen-who h2 { margin: 0; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.ui-profile-screen-handle { margin: 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-profile-screen-bio { margin: 8px 0 0; overflow-wrap: anywhere; }
.ui-profile-screen-action { flex: none; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-profile-screen-action[aria-pressed="true"] { border-color: var(--ui-border); background: transparent; color: var(--ui-fg); }
.ui-profile-screen-action:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-profile-screen-stats { display: flex; gap: 20px; margin: 10px 0 0; padding: 0; }
.ui-profile-screen-stats div { display: flex; flex-direction: column-reverse; min-width: 0; }
.ui-profile-screen-stats dt { color: var(--ui-muted); font-size: 13px; }
.ui-profile-screen-stats dd { margin: 0; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-profile-screen-tabs {
  position: sticky; top: var(--ui-profile-screen-bar); z-index: 2; display: flex; overflow-x: auto; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg); overscroll-behavior-x: contain; scrollbar-width: none;
}
.ui-profile-screen-tabs::-webkit-scrollbar { display: none; }
.ui-profile-screen-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 88px; min-height: 48px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ui-muted); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-profile-screen-tab[aria-selected="true"] { border-bottom-color: var(--ui-accent); color: var(--ui-fg); }
.ui-profile-screen-tab:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-profile-screen-tab small { color: var(--ui-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Tall enough that a short tab can keep the tabs at the top. */
.ui-profile-screen-panels { min-height: calc(100cqh - 100px); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.ui-profile-screen-panels:not([data-ready]) > :not(:first-child) { display: none; }
.ui-profile-screen-panels > [hidden] { display: none; }
/* A tablet keeps the person in sight: their column stays, and only the tabs' side scrolls. */
@container (min-width: 720px) {
  .ui-profile-screen-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  .ui-profile-screen-aside { display: block; position: sticky; top: 0; max-height: 100cqh; overflow-y: auto; border-right: 1px solid var(--ui-border); }
  .ui-profile-screen-cover { position: relative; top: 0; }
  .ui-profile-screen-face { transform: none; }
  .ui-profile-screen-tabs { top: 0; }
  .ui-profile-screen-panels { min-height: calc(100cqh - 50px); }
  .ui-profile-screen-cover::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-profile-screen-title { transition: none; } }


.ui-jump {
  display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--ui-bg); color: var(--ui-fg);
  font: 14px/1.4 var(--ui-font);
}
.ui-jump-sticky { position: sticky; top: var(--ui-jump-top, 0); z-index: 5; border-bottom: 1px solid var(--ui-border); }
.ui-jump-title { flex: none; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-jump ul {
  display: flex; flex: 1; gap: 4px; min-width: 0; margin: 0; padding: 4px 0; list-style: none; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.ui-jump ul::-webkit-scrollbar { display: none; }
.ui-jump li { scroll-snap-align: start; }
.ui-jump-link {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  color: var(--ui-muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .12s, background .12s;
}
.ui-jump-link:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-jump-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jump-link[aria-current] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-jump-badge { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-jump-link[aria-current] .ui-jump-badge { color: inherit; opacity: .8; }
.ui-jump-underline ul { gap: 0; padding: 0; }
.ui-jump-underline .ui-jump-link { height: 42px; border-radius: 0; padding: 0 12px; box-shadow: inset 0 -2px 0 transparent; }
.ui-jump-underline .ui-jump-link:hover { background: transparent; }
.ui-jump-underline .ui-jump-link[aria-current] { background: transparent; color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-jump-link { transition: none; } }


.ui-keepawake { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-keepawake-in { display: grid; gap: 6px; }
.ui-keepawake-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-keepawake-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-keepawake-sun { flex: none; width: 22px; height: 22px; color: var(--ui-muted); }
.ui-keepawake-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ui-keepawake-label { font-weight: 500; }
.ui-keepawake-hint { color: var(--ui-muted); font-size: 13px; }
.ui-keepawake-track { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--ui-strong); transition: background .15s; }
.ui-keepawake-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.ui-keepawake-row[aria-checked="true"] .ui-keepawake-track { background: var(--ui-accent); }
.ui-keepawake-row[aria-checked="true"] .ui-keepawake-track::after { transform: translateX(18px); }
.ui-keepawake-row[aria-checked="true"] .ui-keepawake-sun { color: var(--ui-accent); }
.ui-keepawake-say { margin: 0; padding: 0 2px; font-size: 13px; color: var(--ui-muted); }
.ui-keepawake-say:empty { display: none; }
.ui-keepawake-say[data-bad] { color: var(--ui-danger); }
/* A switch that runs across a tablet is a long way from its words: what it says goes beside it. */
@container (min-width: 600px) {
  .ui-keepawake-in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ui-keepawake-track, .ui-keepawake-track::after { transition: none; } }


.ui-swipe-reply { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; }
.ui-swipe-reply-mine { flex-direction: row-reverse; }
.ui-swipe-reply-cue {
  position: absolute; top: 50%; left: 6px; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); opacity: 0; transform: scale(.6); pointer-events: none;
}
.ui-swipe-reply-mine .ui-swipe-reply-cue { left: auto; right: 6px; }
:dir(rtl).ui-swipe-reply .ui-swipe-reply-cue { left: auto; right: 6px; }
:dir(rtl).ui-swipe-reply-mine .ui-swipe-reply-cue { left: 6px; right: auto; }
.ui-swipe-reply-cue svg { width: 18px; height: 18px; }
.ui-swipe-reply-cue.ui-swipe-reply-ready { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-swipe-reply-body {
  position: relative; flex: 1; min-width: 0; touch-action: pan-y; background: transparent;
  transition: transform .28s cubic-bezier(.2, 1.3, .4, 1);
}
.ui-swipe-reply-body.ui-swipe-reply-on { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-swipe-reply-more {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-swipe-reply-more svg { width: 20px; height: 20px; }
.ui-swipe-reply-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-swipe-reply-more:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-swipe-reply-menu {
  position: fixed; inset: auto; min-width: 180px; max-width: calc(100vw - 16px); margin: 0; padding: 6px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 16px/1.3 var(--ui-font);
}
.ui-swipe-reply-item {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ui-swipe-reply-item:focus-visible { outline: none; background: var(--ui-accent-soft); }
@media (hover: hover) { .ui-swipe-reply-item:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-swipe-reply-body { transition: none; } }


.ui-dropdown-btn svg { width: 16px; height: 16px; margin-right: -4px; transition: transform .15s; }
.ui-dropdown-btn:has(+ :popover-open) svg { transform: rotate(180deg); }
.ui-dropdown {
  min-width: 190px; max-width: min(320px, calc(100vw - 16px)); margin: auto; padding: 5px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-dropdown ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ui-dropdown-item {
  display: flex; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-dropdown-item:hover, .ui-dropdown-item:focus-visible { outline: none; background: var(--ui-subtle); }
.ui-dropdown-item:focus-visible { box-shadow: var(--ui-focus); }
.ui-dropdown-item[disabled], .ui-dropdown-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ui-dropdown-danger { color: var(--ui-danger); }
.ui-dropdown-danger:hover, .ui-dropdown-danger:focus-visible { background: var(--ui-danger-soft); }
.ui-dropdown-sep { height: 1px; margin: 4px 6px; background: var(--ui-border); }
.ui-dropdown[popover]:popover-open { animation: ui-dropdown-in .12s ease-out; }
@keyframes ui-dropdown-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-dropdown { inset: auto; margin: 4px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }
  .ui-dropdown-end { position-area: bottom span-left; }
}
@supports not (position-area: bottom) { .ui-dropdown::backdrop { background: var(--ui-overlay); } }
@media (prefers-reduced-motion: reduce) { .ui-dropdown[popover]:popover-open { animation: none; } .ui-dropdown-btn svg { transition: none; } }


.ui-stk { --ui-stk-1: light-dark(#2a78d6, #3987e5); --ui-stk-2: light-dark(#eb6834, #d95926);
  --ui-stk-3: light-dark(#1baf7a, #199e70); --ui-stk-7: light-dark(#6250d6, #9085e9);
  display: grid; gap: 10px; min-width: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-stk-up { --k: var(--ui-success); } .ui-stk-down { --k: var(--ui-danger); }
.ui-stk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ui-stk-name { margin: 0; font-size: 15px; font-weight: 650; }
.ui-stk-last { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-stk-move { color: var(--k); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-stk-span { color: var(--ui-muted); font-size: 12px; }
.ui-stk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-stk-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-stk-group button { height: 26px; min-width: 34px; padding: 0 9px; border: 0; border-radius: 4px; background: none; color: var(--ui-muted);
  font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-stk-group button:hover:not(:disabled) { color: var(--ui-fg); }
.ui-stk-group button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ui-stk-group button:disabled { opacity: .4; cursor: not-allowed; }
.ui-stk-group button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stk-ind button[aria-pressed="true"] { color: var(--c, var(--ui-fg)); }
.ui-stk-chart { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
.ui-stk-panes { position: relative; touch-action: none; cursor: crosshair; user-select: none; border-radius: 2px; }
.ui-stk-panes:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stk-dragging { cursor: grabbing; }
.ui-stk-pane { position: relative; height: var(--ph); border-bottom: 1px solid var(--ui-border); }
.ui-stk-pane + .ui-stk-pane { border-top: 0; }
.ui-stk-pname { position: absolute; z-index: 3; left: 6px; top: 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; pointer-events: none; }
.ui-stk-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 65%, transparent); }
.ui-stk-zero { background: var(--ui-strong); }
.ui-stk-level { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ui-strong); }
.ui-stk-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-stk-svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ui-stk-svg .ui-stk-body { fill: var(--k); stroke: none; }
.ui-stk-svg .ui-stk-wick { stroke: var(--k); stroke-width: 1; }
.ui-stk-svg .ui-stk-vol { fill: var(--k); stroke: none; opacity: .28; }
.ui-stk-svg .ui-stk-close { stroke: var(--ui-stk-1); stroke-width: 2; }
.ui-stk-svg .ui-stk-fill { fill: var(--ui-stk-1); opacity: .1; stroke: none; }
.ui-stk-svg .ui-stk-sma { stroke: var(--ui-stk-2); stroke-width: 1.5; }
.ui-stk-svg .ui-stk-ema { stroke: var(--ui-stk-7); stroke-width: 1.5; }
.ui-stk-svg .ui-stk-bb { stroke: var(--ui-stk-3); stroke-width: 1.25; }
.ui-stk-svg .ui-stk-bbmid { stroke: var(--ui-stk-3); stroke-width: 1; stroke-dasharray: 4 3; }
.ui-stk-svg .ui-stk-band { fill: var(--ui-stk-3); opacity: .09; stroke: none; }
.ui-stk-svg .ui-stk-rsi { stroke: var(--ui-stk-7); stroke-width: 1.5; }
.ui-stk-svg .ui-stk-macd { stroke: var(--ui-stk-1); stroke-width: 1.5; }
.ui-stk-svg .ui-stk-signal { stroke: var(--ui-stk-2); stroke-width: 1.5; }
.ui-stk-svg .ui-stk-hist { fill: var(--k); stroke: none; opacity: .55; }
.ui-stk-band-rsi { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--ui-stk-7) 8%, transparent); }
.ui-stk-lastline { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); opacity: .8; pointer-events: none; }
.ui-stk-vline { position: absolute; z-index: 4; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ui-muted); pointer-events: none; }
.ui-stk-hline { position: absolute; z-index: 4; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ui-muted); pointer-events: none; }
.ui-stk-read { position: absolute; z-index: 5; top: 6px; left: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; pointer-events: none;
  color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-stk-read > span { padding: 1px 0; background: color-mix(in srgb, var(--ui-bg) 75%, transparent); white-space: nowrap; }
.ui-stk-read b { color: var(--ui-fg); font-weight: 600; }
.ui-stk-read .ui-stk-up b, .ui-stk-read .ui-stk-down b { color: var(--k); }
.ui-stk-read .ui-stk-when { color: var(--ui-fg); font-weight: 600; }
.ui-stk-axis { position: relative; }
.ui-stk-ax { position: relative; height: var(--ph); }
.ui-stk-ax span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-stk-ax .ui-stk-tag { z-index: 2; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--k); color: var(--ui-bg); font-weight: 600; }
.ui-stk-ax .ui-stk-cross { z-index: 3; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--ui-fg); color: var(--ui-bg); font-weight: 600; }
.ui-stk-x { position: relative; height: 18px; margin-top: 4px; }
.ui-stk-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-stk-x .ui-stk-first { transform: none; }
.ui-stk-x .ui-stk-end { transform: translateX(-100%); }
.ui-stk-x .ui-stk-cross { z-index: 2; padding: 1px 5px; border-radius: 3px; background: var(--ui-fg); color: var(--ui-bg); font-weight: 600; }
.ui-stk-help { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-stk-help kbd { padding: 0 4px; border: 1px solid var(--ui-border); border-radius: 3px; background: var(--ui-subtle); font: 11px/1.4 var(--ui-mono); }


.ui-switch { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-switch-track {
  flex: none; position: relative; width: 38px; height: 22px; margin-top: -1px; border-radius: 999px;
  background: var(--ui-strong); transition: background .15s;
}
.ui-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.ui-switch input:checked + .ui-switch-track { background: var(--ui-accent); }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(16px); }
.ui-switch input:focus-visible + .ui-switch-track { box-shadow: var(--ui-focus); }
.ui-switch input:disabled + .ui-switch-track { opacity: .5; }
.ui-switch:has(input:disabled) { cursor: not-allowed; color: var(--ui-muted); }
.ui-switch-sm .ui-switch-track { width: 30px; height: 18px; }
.ui-switch-sm .ui-switch-track::after { width: 12px; height: 12px; }
.ui-switch-sm input:checked + .ui-switch-track::after { transform: translateX(12px); }
.ui-switch-text { display: grid; gap: 2px; }
.ui-switch-hint { color: var(--ui-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-switch-track, .ui-switch-track::after { transition: none; } }


.ui-dl { margin: 0; container-type: inline-size; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-dl-item { display: grid; gap: 2px; padding: 10px 0; }
.ui-dl-item:first-child { padding-top: 0; }
.ui-dl-item:last-child { padding-bottom: 0; }
.ui-dl-lines .ui-dl-item + .ui-dl-item { border-top: 1px solid var(--ui-border); }
.ui-dl dt { color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ui-dl-columns .ui-dl-item { grid-template-columns: minmax(120px, 1fr) 2fr; gap: 16px; align-items: baseline; }
.ui-dl-columns dt { font-size: 14px; }
@container (max-width: 440px) {
  .ui-dl-columns .ui-dl-item { grid-template-columns: 1fr; gap: 2px; }
  .ui-dl-columns dt { font-size: 13px; }
}


.ui-url-input { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-url-input-label { font-size: 13px; font-weight: 500; }
.ui-url-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-url-input-box {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-url-input-box:hover { border-color: var(--ui-strong); }
.ui-url-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-url-input-box:has(input:user-invalid) { border-color: var(--ui-danger); }
.ui-url-input-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font);
}
.ui-url-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-url-input-protocol { flex: none; color: var(--ui-muted); user-select: none; font-variant-numeric: tabular-nums; }
.ui-url-input-globe { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-url-input-ok { flex: none; width: 16px; height: 16px; color: var(--ui-success); opacity: 0; transition: opacity .15s; }
.ui-url-input-box:has(input:valid:not(:placeholder-shown)) .ui-url-input-ok { opacity: 1; }
.ui-url-input-sm .ui-url-input-box { height: 30px; padding: 0 10px; }
.ui-url-input-sm .ui-url-input-box input { font-size: 13px; }
.ui-url-input-invalid .ui-url-input-box, .ui-url-input-invalid .ui-url-input-box:hover { border-color: var(--ui-danger); }
.ui-url-input-hint, .ui-url-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-url-input-error { color: var(--ui-danger); }
.ui-url-input-disabled { opacity: .55; }
.ui-url-input-disabled input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-url-input-box, .ui-url-input-ok { transition: none; } }


.ui-footernav { font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-footernav-cols { display: grid; grid-template-columns: repeat(var(--ui-footernav-cols, 4), minmax(0, 1fr)); gap: 28px 24px; }
.ui-footernav-title { margin: 0 0 10px; font-size: 13px; font-weight: 650; letter-spacing: .02em; }
.ui-footernav ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-footernav-link {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; color: var(--ui-muted); text-decoration: none;
  transition: color .12s;
}
.ui-footernav-link:hover { color: var(--ui-fg); text-decoration: underline; text-underline-offset: 3px; }
.ui-footernav-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-footernav-link[aria-current="page"] { color: var(--ui-fg); font-weight: 500; }
.ui-footernav-link svg { width: 12px; height: 12px; flex: none; }
.ui-footernav-badge {
  padding: 0 6px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 11px; font-weight: 600; line-height: 18px;
}
@media (max-width: 760px) { .ui-footernav-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .ui-footernav-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-footernav-link { transition: none; } }


.ui-bupd { margin: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle);
  font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-bupd-fix { border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border)); }
.ui-bupd summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 14px; cursor: pointer; list-style: none;
  border-radius: var(--ui-radius); }
.ui-bupd summary::-webkit-details-marker { display: none; }
.ui-bupd summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bupd-icon { flex: none; width: 18px; height: 18px; color: var(--ui-info); }
.ui-bupd-fix .ui-bupd-icon { color: var(--ui-danger); }
.ui-bupd-head { font-weight: 650; }
.ui-bupd-sub { color: var(--ui-muted); }
.ui-bupd-more { margin-left: auto; color: var(--ui-accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ui-bupd-more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 2px 7px; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.ui-bupd details[open] .ui-bupd-more::after { transform: translateY(3px) rotate(-135deg); }
.ui-bupd-shut { display: inline; } .ui-bupd-opened { display: none; }
.ui-bupd details[open] .ui-bupd-shut { display: none; } .ui-bupd details[open] .ui-bupd-opened { display: inline; }
.ui-bupd-list { display: grid; gap: 0; margin: 0; padding: 0 14px 6px; list-style: none; }
.ui-bupd-item { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--ui-border); }
.ui-bupd-item time { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bupd-kind { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 999px; background: var(--ui-info-soft); color: var(--ui-info);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 18px; text-transform: uppercase; vertical-align: 1px; }
.ui-bupd-correction .ui-bupd-kind { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-bupd-addition .ui-bupd-kind { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-bupd-text a { color: var(--ui-accent); }
.ui-bupd-text code { font-family: var(--ui-mono); font-size: .92em; }
@media (max-width: 480px) { .ui-bupd-item { grid-template-columns: 1fr; } .ui-bupd-more { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-bupd-more::after { transition: none; } }


.ui-assembly-notice { display: grid; gap: 20px; min-width: 0; max-width: 720px; padding: 26px 28px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-assembly-notice-head { display: grid; gap: 4px; text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
.ui-assembly-notice-coop { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-assembly-notice-kind { margin: 0; color: var(--ui-accent); font-size: 13px; font-weight: 600; }
.ui-assembly-notice .ui-assembly-notice-title { display: block; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.ui-assembly-notice-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; }
.ui-assembly-notice-facts div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-assembly-notice-facts dt { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-assembly-notice-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-assembly-notice-facts .ui-assembly-notice-sub { display: block; color: var(--ui-muted); font-weight: 400; font-size: 13px; }
.ui-assembly-notice-facts a { color: var(--ui-accent); font-weight: 600; }
.ui-assembly-notice-facts a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-assembly-notice h4 { margin: 0 0 8px; font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.ui-assembly-notice-agenda { margin: 0; padding-left: 26px; display: grid; gap: 6px; }
.ui-assembly-notice-agenda li { padding-left: 4px; }
.ui-assembly-notice-agenda li::marker { color: var(--ui-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-assembly-notice-detail { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-assembly-notice-text { margin: 0; color: var(--ui-muted); }
.ui-assembly-notice-by { margin: 0; display: grid; gap: 0; }
.ui-assembly-notice-by b { font-weight: 600; }
.ui-assembly-notice-by span { color: var(--ui-muted); font-size: 13px; }
.ui-assembly-notice-rsvp { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-assembly-notice-rsvp h4 { margin: 0; }
.ui-assembly-notice-due { margin: -8px 0 0; color: var(--ui-muted); font-size: 13px; }
.ui-assembly-notice-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.ui-assembly-notice-field { display: grid; gap: 5px; min-width: 0; }
.ui-assembly-notice-field label, .ui-assembly-notice-choice legend { font-size: 13px; font-weight: 500; }
.ui-assembly-notice-req { margin-left: 2px; color: var(--ui-danger); }
.ui-assembly-notice-input { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
textarea.ui-assembly-notice-input { height: auto; padding: 8px 12px; resize: vertical; }
.ui-assembly-notice-input:hover { border-color: var(--ui-strong); }
.ui-assembly-notice-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-assembly-notice-choice { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-assembly-notice-choice legend { width: 100%; margin-bottom: 6px; padding: 0; }
.ui-assembly-notice-choice label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-assembly-notice-choice input { margin: 0; accent-color: var(--ui-accent); }
.ui-assembly-notice-send { justify-self: start; height: 40px; padding: 0 20px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-assembly-notice-send:hover { filter: brightness(1.08); }
.ui-assembly-notice-send:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 560px) { .ui-assembly-notice { padding: 20px 16px; } .ui-assembly-notice-row { grid-template-columns: 1fr; } }
@media print { .ui-assembly-notice { border: 0; padding: 0; background: #fff; color: #000; } .ui-assembly-notice-rsvp { display: none; } }


.ui-entryreq { --ui-entryreq-k: var(--ui-success); --ui-entryreq-ks: var(--ui-success-soft); display: grid; gap: 16px; min-width: 0; max-width: 560px;
  padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px/1.45 var(--ui-font); }
.ui-entryreq-info { --ui-entryreq-k: var(--ui-info); --ui-entryreq-ks: var(--ui-info-soft); }
.ui-entryreq-warning { --ui-entryreq-k: var(--ui-warning); --ui-entryreq-ks: var(--ui-warning-soft); }
.ui-entryreq-danger { --ui-entryreq-k: var(--ui-danger); --ui-entryreq-ks: var(--ui-danger-soft); }
.ui-entryreq-head { display: grid; gap: 2px; }
.ui-entryreq .ui-entryreq-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 700; }
.ui-entryreq-flag { font-size: 22px; line-height: 1; }
.ui-entryreq-for { color: var(--ui-muted); font-size: 13px; }
.ui-entryreq-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px;
  border-left: 4px solid var(--ui-entryreq-k); border-radius: var(--ui-radius-sm); background: var(--ui-entryreq-ks); }
.ui-entryreq-icon { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-entryreq-k);
  color: var(--ui-surface); }
.ui-entryreq-icon svg { width: 18px; height: 18px; }
.ui-entryreq-verdict b { font-size: 16px; font-weight: 700; }
.ui-entryreq-verdict p { margin: 0; font-size: 13px; }
.ui-entryreq-verdict a { color: var(--ui-fg); font-weight: 600; }
.ui-entryreq-verdict a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ui-focus); }
.ui-entryreq-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.ui-entryreq-facts div { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-entryreq-facts dt { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-entryreq-facts dd { margin: 0; font-weight: 600; }
.ui-entryreq-part { display: grid; gap: 6px; }
.ui-entryreq .ui-entryreq-sub { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-entryreq-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ui-entryreq-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 8px 0;
  border-bottom: 1px solid var(--ui-border); }
.ui-entryreq-item:last-child { border-bottom: 0; }
.ui-entryreq-item svg { width: 18px; height: 18px; margin-top: 1px; color: var(--ui-muted); }
.ui-entryreq-must svg { color: var(--ui-danger); }
.ui-entryreq-item a { color: var(--ui-accent); }
.ui-entryreq-item small { grid-column: 2; color: var(--ui-muted); font-size: 12px; }
.ui-entryreq-tag { grid-column: 3; grid-row: 1; padding: 1px 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px;
  font-weight: 600; white-space: nowrap; }
.ui-entryreq-must .ui-entryreq-tag { background: var(--ui-danger-soft); color: var(--ui-fg); }
.ui-entryreq-warn { margin: 0; padding: 10px 14px 10px 32px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 13px; }
.ui-entryreq-warn li + li { margin-top: 4px; }
.ui-entryreq-foot { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-entryreq-foot a { color: inherit; }


.ui-caption { display: block; margin: 6px 0 0; font: 13px/1.5 var(--ui-font); color: var(--ui-muted); overflow-wrap: anywhere; }
caption.ui-caption { display: table-caption; caption-side: bottom; padding: 6px 0 0; }
span.ui-caption { display: inline; margin: 0; }
.ui-caption-center { text-align: center; }
.ui-caption-end { text-align: end; }
.ui-caption-fg { color: var(--ui-fg); }
.ui-caption-xs { font-size: 12px; }
.ui-caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


.ui-month-picker { position: relative; display: grid; gap: 6px; min-width: 0; width: fit-content; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-month-picker-label { font-size: 13px; font-weight: 500; }
.ui-month-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-month-picker-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-width: 190px; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ui-month-picker-trigger:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-month-picker-trigger:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-month-picker-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ui-month-picker-trigger svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-month-picker-trigger span { flex: 1; }
.ui-month-picker-empty { color: var(--ui-muted); }
.ui-month-picker-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; width: 280px; max-width: calc(100vw - 32px); margin-top: 4px; padding: 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-month-picker-pop[hidden] { display: none; }
.ui-month-picker-inline .ui-month-picker-pop { position: static; margin: 0; box-shadow: none; }
.ui-month-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ui-month-picker-head h2 { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-month-picker-nav {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-month-picker-nav svg { width: 16px; height: 16px; }
.ui-month-picker-nav:hover:not([aria-disabled="true"]) { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-month-picker-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-month-picker-nav[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.ui-month-picker-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.ui-month-picker-cell {
  height: 40px; border-radius: var(--ui-radius-sm); text-align: center; font-size: 13px; cursor: pointer; outline: none; transition: background .1s;
}
.ui-month-picker-cell:hover { background: var(--ui-subtle); }
.ui-month-picker-cell:focus-visible, .ui-month-picker-cell:focus { box-shadow: var(--ui-focus); }
.ui-month-picker-now { color: var(--ui-accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-month-picker-cell[aria-selected="true"] { background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-month-picker-cell[aria-disabled="true"] { color: var(--ui-muted); opacity: .45; cursor: not-allowed; background: none; }
.ui-month-picker-sm .ui-month-picker-trigger { height: 30px; min-width: 160px; font-size: 13px; }
.ui-month-picker-invalid .ui-month-picker-trigger { border-color: var(--ui-danger); }
.ui-month-picker-hint, .ui-month-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-month-picker-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-month-picker-trigger, .ui-month-picker-cell { transition: none; } }


.ui-eyebrow { display: block; margin: 0 0 6px; font: 600 12px/1.4 var(--ui-font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ui-muted); --e: var(--ui-muted); }
span.ui-eyebrow { display: inline-flex; margin: 0; }
.ui-eyebrow-accent { color: var(--ui-accent); --e: var(--ui-accent); }
.ui-eyebrow-success { color: var(--ui-success); --e: var(--ui-success); }
.ui-eyebrow-warning { color: var(--ui-warning); --e: var(--ui-warning); }
.ui-eyebrow-danger { color: var(--ui-danger); --e: var(--ui-danger); }
.ui-eyebrow-info { color: var(--ui-info); --e: var(--ui-info); }
.ui-eyebrow-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%;
  background: var(--e); vertical-align: middle; }
.ui-eyebrow-center { text-align: center; }
.ui-eyebrow-end { text-align: end; }


.ui-flres { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
  font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.ui-flres:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
.ui-flres-tagged { border-color: var(--ui-flres-tag, var(--ui-accent)); }
.ui-flres-main { display: grid; gap: 12px; min-width: 0; padding: 16px 18px; }
.ui-flres-tag { position: absolute; top: -10px; left: 16px; height: 20px; padding: 0 9px; border-radius: 999px; background: var(--ui-flres-tag, var(--ui-accent));
  color: var(--ui-accent-fg); font: 600 11px/20px var(--ui-font); letter-spacing: .03em; text-transform: uppercase; }
.ui-flres-tag-success { --ui-flres-tag: var(--ui-success); }
.ui-flres-tag-warning { --ui-flres-tag: var(--ui-warning); }
.ui-flres-tag-success .ui-flres-tag, .ui-flres-tag-warning .ui-flres-tag { color: var(--ui-surface); }
.ui-flres-airline { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
.ui-flres-logo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 6px; background: var(--ui-accent-soft);
  color: var(--ui-accent); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ui-flres-logo img { width: 100%; height: 100%; object-fit: contain; }
.ui-flres-airline b { color: var(--ui-fg); font-weight: 600; }
.ui-flres-route { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 14px; }
.ui-flres-end { display: grid; gap: 1px; }
.ui-flres-end:last-child { text-align: right; }
.ui-flres-time { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.ui-flres-days { margin-left: 2px; vertical-align: super; color: var(--ui-danger); font-size: 11px; font-weight: 700; }
.ui-flres-code { color: var(--ui-muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.ui-flres-path { display: grid; gap: 4px; justify-items: center; min-width: 0; color: var(--ui-muted); font-size: 12px; text-align: center; }
.ui-flres-line { position: relative; display: flex; align-items: center; justify-content: space-evenly; width: 100%; height: 10px; }
.ui-flres-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ui-strong); }
.ui-flres-line::after { content: ""; position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: solid var(--ui-strong);
  border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.ui-flres-stop { position: relative; width: 9px; height: 9px; border: 2px solid var(--ui-warning); border-radius: 50%; background: var(--ui-surface); }
.ui-flres-stops { font-weight: 600; color: var(--ui-warning); }
.ui-flres-nonstop .ui-flres-stops { color: var(--ui-success); }
.ui-flres-via { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.ui-flres-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-flres-meta li { display: inline-flex; align-items: center; gap: 5px; }
.ui-flres-meta svg { width: 15px; height: 15px; }
.ui-flres-meta .ui-flres-no { color: var(--ui-muted); opacity: .7; text-decoration: line-through; }
.ui-flres-side { display: grid; align-content: center; justify-items: end; gap: 4px; min-width: 150px; padding: 16px 18px; border-left: 1px dashed var(--ui-border);
  text-align: right; }
.ui-flres-price { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.ui-flres-old { color: var(--ui-muted); font-size: 13px; text-decoration: line-through; }
.ui-flres-per { color: var(--ui-muted); font-size: 12px; }
.ui-flres-left { color: var(--ui-danger); font-size: 12px; font-weight: 600; }
.ui-flres-form { margin: 4px 0 0; }
.ui-flres-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; margin-top: 4px; padding: 0 18px; border: 0;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 14px var(--ui-font); text-decoration: none;
  cursor: pointer; }
.ui-flres-form .ui-flres-btn { margin-top: 0; }
.ui-flres-btn:hover { filter: brightness(1.08); }
.ui-flres-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 560px) {
  .ui-flres { grid-template-columns: 1fr; }
  .ui-flres-side { grid-template-columns: 1fr auto; align-items: center; justify-items: start; border-left: 0; border-top: 1px dashed var(--ui-border); text-align: left; }
  .ui-flres-side .ui-flres-btn, .ui-flres-side .ui-flres-form { grid-column: 2; grid-row: 1 / span 4; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .ui-flres { transition: none; } }


.ui-boxplot {
  --ui-boxplot-1: light-dark(#2a78d6, #3987e5); --ui-boxplot-2: light-dark(#eb6834, #d95926);
  --ui-boxplot-3: light-dark(#1baf7a, #199e70); --ui-boxplot-4: light-dark(#eda100, #c98500);
  --ui-boxplot-5: light-dark(#e87ba4, #d55181); --ui-boxplot-6: light-dark(#008300, #008300);
  --ui-boxplot-7: light-dark(#6250d6, #9085e9); --ui-boxplot-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-boxplot-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-boxplot-s1 { --c: var(--ui-boxplot-1); } .ui-boxplot-s2 { --c: var(--ui-boxplot-2); } .ui-boxplot-s3 { --c: var(--ui-boxplot-3); }
.ui-boxplot-s4 { --c: var(--ui-boxplot-4); } .ui-boxplot-s5 { --c: var(--ui-boxplot-5); } .ui-boxplot-s6 { --c: var(--ui-boxplot-6); }
.ui-boxplot-s7 { --c: var(--ui-boxplot-7); } .ui-boxplot-s8 { --c: var(--ui-boxplot-8); }
.ui-boxplot-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-boxplot-y { position: relative; min-width: 24px; }
.ui-boxplot-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-boxplot-plot { position: relative; }
.ui-boxplot-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-boxplot-cols { position: absolute; inset: 0; display: flex; }
.ui-boxplot-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-boxplot-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-boxplot-whisker { position: absolute; left: 50%; bottom: var(--a); height: var(--b); width: 0; border-left: 1.5px solid var(--c); }
.ui-boxplot-cap { position: absolute; left: 50%; bottom: var(--a); width: min(20%, 20px); height: 0;
  border-top: 1.5px solid var(--c); transform: translate(-50%, 50%); }
.ui-boxplot-box { position: absolute; left: 50%; bottom: var(--a); height: var(--b); width: min(44%, 56px); min-height: 2px;
  border: 1.5px solid var(--c); border-radius: 3px; background: color-mix(in srgb, var(--c) 18%, var(--ui-bg)); transform: translateX(-50%); }
.ui-boxplot-median { position: absolute; left: 50%; bottom: var(--a); width: min(44%, 56px); height: 0;
  border-top: 2.5px solid var(--c); transform: translate(-50%, 50%); }
.ui-boxplot-mean { position: absolute; left: 50%; bottom: var(--a); width: 8px; height: 8px; margin: 0 0 -4px -4px;
  background: var(--ui-bg); border: 1.5px solid var(--ui-fg); transform: rotate(45deg); }
.ui-boxplot-out { position: absolute; left: 50%; bottom: var(--a); width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px;
  border: 1.5px solid var(--c); border-radius: 50%; background: var(--ui-bg); }
.ui-boxplot-pt { position: absolute; left: calc(50% + var(--j)); bottom: var(--a); width: 4px; height: 4px; margin: 0 0 -2px -2px;
  border-radius: 50%; background: var(--ui-fg); opacity: .45; }
.ui-boxplot-x { display: flex; margin-top: 6px; }
.ui-boxplot-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-boxplot-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-boxplot-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-boxplot-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-boxplot-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-boxplot-tip { top: 0; left: calc(50% + 34px); }
.ui-boxplot-flip .ui-boxplot-tip { left: auto; right: calc(50% + 34px); }
.ui-boxplot-col:hover .ui-boxplot-tip { display: block; }


.ui-follow-button {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 96px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px; background: var(--ui-fg); color: var(--ui-bg);
  font: 600 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ui-follow-button:hover { background: color-mix(in srgb, var(--ui-fg) 85%, var(--ui-bg)); }
.ui-follow-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-follow-button:disabled { opacity: .55; cursor: not-allowed; }
.ui-follow-button-on { background: transparent; color: var(--ui-fg); border-color: var(--ui-border); }
.ui-follow-button-on:hover, .ui-follow-button-on:focus-visible { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 40%, var(--ui-border)); }
.ui-follow-button-labels { display: inline-grid; }
.ui-follow-button-labels > span { grid-area: 1 / 1; text-align: center; }
.ui-follow-button-un { visibility: hidden; }
.ui-follow-button-on:hover .ui-follow-button-un, .ui-follow-button-on:focus-visible .ui-follow-button-un { visibility: visible; }
.ui-follow-button-on:hover .ui-follow-button-text, .ui-follow-button-on:focus-visible .ui-follow-button-text { visibility: hidden; }
.ui-follow-button-sm { height: 28px; min-width: 80px; padding: 0 12px; font-size: 13px; }
.ui-follow-button-lg { height: 42px; min-width: 120px; padding: 0 22px; font-size: 15px; }
.ui-follow-button-full { display: flex; width: 100%; }
@media (prefers-reduced-motion: reduce) { .ui-follow-button { transition: none; } }


.ui-fb { display: grid; gap: 10px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-fb-search { position: relative; display: flex; flex: 1 1 220px; align-items: center; min-width: 0; }
.ui-fb-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ui-muted); pointer-events: none; }
.ui-fb-search input {
  box-sizing: border-box; width: 100%; height: 36px; margin: 0; padding: 0 12px 0 34px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font); appearance: none;
}
.ui-fb-search input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-fb-search input:hover { border-color: var(--ui-strong); }
.ui-fb-search input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font);
  white-space: nowrap; cursor: pointer;
}
.ui-fb-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-fb-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fb-btn svg { width: 14px; height: 14px; color: var(--ui-muted); }
.ui-fb-on { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-fb-n { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 11px; text-align: center; }
.ui-fb-apply { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-fb-apply:hover { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-fb-menu {
  min-width: 200px; max-width: min(300px, calc(100vw - 16px)); max-height: min(360px, calc(100dvh - 16px)); margin: auto;
  padding: 6px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-fb-menu fieldset { display: grid; gap: 1px; margin: 0; padding: 0; border: 0; }
.ui-fb-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--ui-radius-sm); cursor: pointer; }
.ui-fb-opt:hover { background: var(--ui-subtle); }
.ui-fb-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-fb-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-accent); }
.ui-fb-opt span:first-of-type { flex: 1; }
.ui-fb-count { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
@supports (position-area: bottom) {
  .ui-fb-menu { inset: auto; margin: 4px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }
}
@supports not (position-area: bottom) { .ui-fb-menu::backdrop { background: var(--ui-overlay); } }
.ui-fb-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.ui-fb-chips legend { float: left; margin-right: 2px; padding: 0; color: var(--ui-muted); font-size: 13px; line-height: 30px; }
.ui-fb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font-size: 13px; font-weight: 500; cursor: pointer;
}
.ui-fb-chip:hover { border-color: var(--ui-strong); }
.ui-fb-chip:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-fb-chip:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-fb-chip .ui-fb-count { color: inherit; opacity: .75; }
.ui-fb-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-fb-pill {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px;
  background: var(--ui-subtle); color: var(--ui-fg); font-size: 13px;
}
.ui-fb-pill b { font-weight: 500; color: var(--ui-muted); }
.ui-fb-pill button {
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-fb-pill button:hover { background: var(--ui-strong); color: var(--ui-fg); }
.ui-fb-pill button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fb-pill svg { width: 12px; height: 12px; }
.ui-fb-clear { height: 26px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-accent); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-fb-clear:hover { text-decoration: underline; }
.ui-fb-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-datagrid { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-datagrid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-datagrid-search, .ui-datagrid-filter { height: 36px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: inherit; }
.ui-datagrid-search { width: min(100%, 260px); padding: 0 12px 0 34px; background: var(--ui-surface) no-repeat 11px 50% / 15px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.ui-datagrid-filter { padding: 0 30px 0 10px; appearance: none; -webkit-appearance: none; background: var(--ui-surface) no-repeat right 10px center / 10px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.ui-datagrid-search:focus, .ui-datagrid-filter:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-datagrid-filter.ui-datagrid-on { border-color: var(--ui-accent); color: var(--ui-accent); background-color: var(--ui-accent-soft); }
.ui-datagrid-clear { height: 36px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-datagrid-clear:hover { background: var(--ui-accent-soft); }
.ui-datagrid-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-datagrid-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-datagrid table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-datagrid th, .ui-datagrid td { padding: 8px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-datagrid tbody tr:last-child td { border-bottom: 0; }
.ui-datagrid th { position: sticky; top: 0; z-index: 1; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-datagrid .ui-datagrid-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-datagrid-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0;
  border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ui-datagrid-sort:hover { color: var(--ui-fg); }
.ui-datagrid-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-datagrid-right .ui-datagrid-sort { flex-direction: row-reverse; }
.ui-datagrid-arrow { width: 12px; height: 12px; opacity: .35; }
[aria-sort] .ui-datagrid-sort { color: var(--ui-fg); }
[aria-sort] .ui-datagrid-arrow { opacity: 1; color: var(--ui-accent); }
.ui-datagrid-box { width: 1%; padding-right: 4px; }
.ui-datagrid input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--ui-accent); cursor: pointer; }
.ui-datagrid input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-datagrid tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-datagrid tbody tr[aria-selected="true"] td { background: var(--ui-accent-soft); }
.ui-datagrid-zebra tbody tr:nth-child(even):not([aria-selected="true"]) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-datagrid-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); white-space: normal; }
.ui-datagrid-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-datagrid-foot > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-datagrid-picked { color: var(--ui-fg); font-weight: 500; }
.ui-datagrid-size { height: 30px; padding: 0 26px 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  appearance: none; -webkit-appearance: none; color: var(--ui-fg); font: 13px/1 var(--ui-font); background: var(--ui-surface) no-repeat right 8px center / 9px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.ui-datagrid-size:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-datagrid-pages { display: flex; gap: 6px; }
.ui-datagrid-pages button { height: 30px; padding: 0 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-datagrid-pages button:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-datagrid-pages button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-datagrid-pages button:disabled { opacity: .5; cursor: not-allowed; }


.ui-plan { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-plan-hi { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent), var(--ui-shadow); }
.ui-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 11px/1.6 var(--ui-font); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ui-plan-head { display: grid; gap: 2px; }
.ui-plan-name { margin: 0; font-size: 18px; font-weight: 600; }
.ui-plan-desc { margin: 0; color: var(--ui-muted); }
.ui-plan-features { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-plan-feature { display: flex; align-items: flex-start; gap: 8px; }
.ui-plan-feature svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ui-success); }
.ui-plan-feature-no { color: var(--ui-muted); }
.ui-plan-feature-no svg { color: var(--ui-strong); }
.ui-plan-hint { display: block; font-size: 12px; color: var(--ui-muted); }
.ui-plan-form { display: contents; }
.ui-plan-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 600 14px/1 var(--ui-font); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.ui-plan-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-plan-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-plan-hi .ui-plan-btn { background: var(--ui-accent); color: var(--ui-accent-fg); border-color: transparent; }
.ui-plan-hi .ui-plan-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-plan-btn[disabled], .ui-plan-btn[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; }
.ui-plan-foot { margin: 0; font-size: 12px; color: var(--ui-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ui-plan-btn { transition: none; } }


.ui-jobcard { --tap: 56px; display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-jobcard-gloves { --tap: 64px; }
.ui-jobcard-head { display: grid; gap: 4px; min-width: 0; padding: 12px; border-left: 6px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-jobcard-head[data-priority="urgent"] { border-color: var(--ui-danger); }
.ui-jobcard-head[data-priority="high"] { border-color: var(--ui-warning); }
.ui-jobcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ui-jobcard-no { font: 600 14px var(--ui-mono); }
.ui-jobcard-tag { padding: 1px 8px; border-radius: 999px; background: var(--ui-bg); font-size: 13px; font-weight: 700; }
.ui-jobcard-tag[data-priority="urgent"] { background: var(--ui-danger); color: #fff; }
.ui-jobcard-tag[data-priority="high"] { background: var(--ui-warning-soft); }
.ui-jobcard-tag[data-status] { border: 1px solid var(--ui-strong); }
.ui-jobcard-head h3 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.ui-jobcard-head p { margin: 0; overflow-wrap: anywhere; }
.ui-jobcard-go { display: grid; place-items: center; width: 100%; min-height: calc(var(--tap) + 24px); padding: 0 12px; border: 2px solid transparent; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg); font: 700 22px/1.2 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-jobcard-go[data-armed] { background: var(--ui-danger); color: #fff; }
.ui-jobcard-go:focus-visible, .ui-jobcard-side:focus-visible, .ui-jobcard-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jobcard-go:disabled { opacity: .55; cursor: default; }
.ui-jobcard-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ui-jobcard-side { display: grid; place-items: center; box-sizing: border-box; min-height: var(--tap); padding: 0 10px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 700 16px/1.2 var(--ui-font); text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation; }
.ui-jobcard-side:disabled { opacity: .5; cursor: default; }
.ui-jobcard-said { min-height: 22px; margin: 0; font-weight: 600; }
.ui-jobcard-said:empty { display: none; }
.ui-jobcard-said[data-bad] { color: var(--ui-danger); }
.ui-jobcard-cols { display: grid; gap: 14px; min-width: 0; }
.ui-jobcard-col { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ui-jobcard-col h4 { margin: 0; font-size: 16px; }
.ui-jobcard-tick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 12px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-weight: 600; cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
.ui-jobcard-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-jobcard-tick:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-jobcard-box { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ui-strong); border-radius: 6px; font-size: 20px; font-weight: 700; line-height: 1; }
.ui-jobcard-tick:has(input:checked) { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-jobcard-tick:has(input:checked) .ui-jobcard-box { border-color: var(--ui-success); background: var(--ui-success); color: #fff; }
.ui-jobcard-tick:has(input:disabled) { opacity: .7; cursor: default; }
.ui-jobcard-req { color: var(--ui-danger); font-size: 13px; font-weight: 700; }
.ui-jobcard-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-jobcard-part-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-jobcard-part-name small { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-jobcard-qty { display: inline-flex; align-items: center; gap: 2px; }
.ui-jobcard-step { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 700 26px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-jobcard-step:disabled { opacity: .4; cursor: default; }
.ui-jobcard-n { min-width: 36px; text-align: center; font: 700 18px var(--ui-mono); }
.ui-jobcard-label { display: grid; gap: 2px; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-jobcard-label textarea { box-sizing: border-box; width: 100%; min-height: 80px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }
.ui-jobcard-label textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-jobcard-hold { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-warning); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-jobcard-hold p { margin: 0; font-weight: 600; }
.ui-jobcard-log { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 14px; }
.ui-jobcard-log b { color: var(--ui-fg); font-family: var(--ui-mono); }
@container (min-width: 640px) {
  .ui-jobcard-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}


.ui-relative-time { color: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-relative-time[title] { text-decoration: underline dotted color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: help; }


.ui-password-strength { display: grid; gap: 8px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-password-strength-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-password-strength-req { margin-left: 2px; color: var(--ui-danger); }
.ui-password-strength-box { position: relative; display: flex; align-items: center; }
.ui-password-strength-control {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 44px 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
.ui-password-strength-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-password-strength-control::-ms-reveal { display: none; }
.ui-password-strength-control:hover { border-color: var(--ui-strong); }
.ui-password-strength-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-password-strength-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-password-strength-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-password-strength-toggle {
  position: absolute; right: 5px; display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-password-strength-toggle svg { width: 18px; height: 18px; }
.ui-password-strength-toggle:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-password-strength-toggle:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-password-strength-meter { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-password-strength-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; flex: 1; max-width: 220px; }
.ui-password-strength-bars span { height: 5px; border-radius: 3px; background: var(--ui-border); transition: background .2s; }
.ui-password-strength-weak .ui-password-strength-bars span:nth-child(-n+1) { background: var(--ui-danger); }
.ui-password-strength-fair .ui-password-strength-bars span:nth-child(-n+2) { background: var(--ui-warning); }
.ui-password-strength-good .ui-password-strength-bars span:nth-child(-n+3) { background: var(--ui-info); }
.ui-password-strength-strong .ui-password-strength-bars span { background: var(--ui-success); }
.ui-password-strength-weak .ui-password-strength-word { color: var(--ui-danger); }
.ui-password-strength-fair .ui-password-strength-word { color: var(--ui-warning); }
.ui-password-strength-good .ui-password-strength-word { color: var(--ui-info); }
.ui-password-strength-strong .ui-password-strength-word { color: var(--ui-success); }
.ui-password-strength-rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ui-muted); }
.ui-password-strength-rule { display: flex; align-items: center; gap: 8px; }
.ui-password-strength-rule svg { flex: none; width: 14px; height: 14px; }
.ui-password-strength-met { color: var(--ui-success); }
.ui-password-strength-sm .ui-password-strength-control { height: 30px; font-size: 13px; padding-right: 38px; }
.ui-password-strength-sm .ui-password-strength-toggle { right: 3px; height: 24px; width: 28px; }
.ui-password-strength-hint, .ui-password-strength-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-password-strength-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-password-strength-control, .ui-password-strength-bars span { transition: none; } }


.ui-min-max-input { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-min-max-input-legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-min-max-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-min-max-input-row { display: flex; align-items: center; gap: 10px; }
.ui-min-max-input-box {
  display: flex; align-items: center; gap: 6px; width: 140px; height: 38px; padding: 0 12px; background: var(--ui-surface);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); transition: border-color .15s, box-shadow .15s;
}
.ui-min-max-input-box:hover { border-color: var(--ui-strong); }
.ui-min-max-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-min-max-input-box input {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-min-max-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-min-max-input-unit { flex: none; color: var(--ui-muted); user-select: none; }
.ui-min-max-input-dash { color: var(--ui-muted); }
.ui-min-max-input-sm .ui-min-max-input-box { height: 30px; width: 110px; padding: 0 10px; }
.ui-min-max-input-sm .ui-min-max-input-box input { font-size: 13px; }
.ui-min-max-input-invalid .ui-min-max-input-box { border-color: var(--ui-danger); }
.ui-min-max-input-hint, .ui-min-max-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-min-max-input-error { color: var(--ui-danger); }
.ui-min-max-input-disabled { opacity: .55; }
.ui-min-max-input-disabled input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-min-max-input-box { transition: none; } }


.ui-announce-log { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); font: 13px/1.45 var(--ui-mono); color: var(--ui-fg); list-style: none; }
.ui-announce-log:empty::before { content: "Nothing announced yet"; color: var(--ui-muted); font-family: var(--ui-font); }
.ui-announce-assertive { color: var(--ui-danger); }


.ui-scorecard { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; min-width: 0; padding: 18px 20px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); --s: 96px; }
.ui-scorecard-bare { padding: 0; border: 0; background: none; }
.ui-scorecard-success { --t: var(--ui-success); }
.ui-scorecard-warning { --t: var(--ui-warning); }
.ui-scorecard-danger { --t: var(--ui-danger); }
.ui-scorecard-lg { --s: 128px; }
.ui-scorecard-main { display: flex; align-items: center; gap: 16px; }
.ui-scorecard-ring { position: relative; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); }
.ui-scorecard-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-scorecard-ring circle { fill: none; stroke-width: 9; }
.ui-scorecard-track { stroke: var(--ui-subtle); }
.ui-scorecard-arc { stroke: var(--t); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.ui-scorecard-num { display: grid; justify-items: center; line-height: 1; }
.ui-scorecard-num b { font-size: calc(var(--s) * .3); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ui-scorecard-num span { margin-top: 3px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-scorecard-text { display: grid; gap: 3px; }
.ui-scorecard-label { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-scorecard-grade { display: flex; align-items: center; gap: 8px; margin: 0; }
.ui-scorecard-letter { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--t) 15%, transparent); color: var(--t); font-size: 18px; font-weight: 700; }
.ui-scorecard-verdict { font-size: 16px; font-weight: 600; }
.ui-scorecard-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-scorecard-items { flex: 1 1 200px; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-scorecard-item { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 13px; }
.ui-scorecard-item span:last-child { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-scorecard-bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-scorecard-bar i { display: block; height: 100%; border-radius: inherit; background: var(--t); }
@media (prefers-reduced-motion: reduce) { .ui-scorecard-arc { transition: none; } }


.ui-pos-register { position: relative; box-sizing: border-box; display: flex; width: 100%; height: 100%; min-height: 420px; container-type: inline-size; color: var(--ui-fg); background: var(--ui-subtle); font: 15px/1.3 var(--ui-font); }
.ui-pos-register-main { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.ui-pos-register-shop { display: flex; flex-direction: column; flex: 1 1 44%; min-width: 0; min-height: 0; }
.ui-pos-register-cats { display: flex; flex: none; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px max(8px, env(safe-area-inset-left)); scrollbar-width: none; }
.ui-pos-register-cat { flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-pos-register-cat[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-pos-register-cat:focus-visible, .ui-pos-register-item:focus-visible, .ui-pos-register-key:focus-visible, .ui-pos-register-btn:focus-visible, .ui-pos-register-line-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pos-register-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); grid-auto-rows: 84px; gap: 8px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px max(8px, env(safe-area-inset-left)); }
.ui-pos-register-item { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-pos-register-item:active { background: var(--ui-accent-soft); }
.ui-pos-register-item b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-pos-register-item span { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-pos-register-ticket { display: flex; flex-direction: column; flex: 1 1 56%; min-width: 0; min-height: 0; border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-pos-register-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; min-height: 48px; padding: 2px 12px; border-bottom: 1px solid var(--ui-border); }
.ui-pos-register-head h3 { margin: 0; font-size: 16px; }
.ui-pos-register-split { display: flex; flex: 1; min-height: 0; }
.ui-pos-register-lines { flex: 1; min-width: 0; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.ui-pos-register-empty { padding: 24px 12px; color: var(--ui-muted); text-align: center; }
.ui-pos-register-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 4px; border-radius: var(--ui-radius-sm); }
.ui-pos-register-line-on { background: var(--ui-accent-soft); }
.ui-pos-register-line-pick { flex: 1 1 120px; min-width: 0; min-height: 44px; padding: 2px 4px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-pos-register-line-pick b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-pos-register-line-pick small { color: var(--ui-muted); font-size: 12px; }
.ui-pos-register-qty { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-pos-register-net { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ui-pos-register-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-pos-register-btn:disabled { opacity: .5; cursor: default; }
.ui-pos-register-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-pos-register-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-pos-register-side { display: flex; flex-direction: column; flex: 0 0 min(300px, 44%); min-height: 0; overflow-y: auto; border-left: 1px solid var(--ui-border); }
.ui-pos-register-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; padding: 8px 12px; font-variant-numeric: tabular-nums; }
.ui-pos-register-sums dt { color: var(--ui-muted); }
.ui-pos-register-sums dd { margin: 0; text-align: right; }
.ui-pos-register-total { padding-top: 4px; color: var(--ui-fg) !important; font-size: 20px; font-weight: 700; }
.ui-pos-register-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); }
.ui-pos-register-wide { grid-column: 1 / -1; }
.ui-pos-register-panel { display: grid; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); outline: none; }
.ui-pos-register-panel h4 { margin: 0; font-size: 15px; }
.ui-pos-register-entry { min-height: 44px; padding: 6px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 600 22px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-pos-register-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-pos-register-key { min-height: 52px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-fg); font: 600 19px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-pos-register-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ui-pos-register-msg { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-pos-register-bad { color: var(--ui-danger); }
.ui-pos-register-change { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
/* With the width of a turned tablet the ticket stands beside the grid and the sums under the lines. */
@container (min-width: 960px) {
  .ui-pos-register-main { flex-direction: row; }
  .ui-pos-register-shop { flex: 1 1 56%; }
  .ui-pos-register-ticket { flex: 0 0 440px; border-top: 0; border-left: 1px solid var(--ui-border); }
  .ui-pos-register-split { flex-direction: column; }
  .ui-pos-register-side { flex: 0 1 auto; max-height: 72%; border-top: 1px solid var(--ui-border); border-left: 0; }
}


.ui-filtsh-host { display: contents; }
.ui-filtsh-open {
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 600 15px var(--ui-font); cursor: pointer;
  touch-action: manipulation;
}
.ui-filtsh-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-filtsh-on { border-color: var(--ui-accent); }
.ui-filtsh-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 13px; font-variant-numeric: tabular-nums;
}
.ui-filtsh-facets { display: grid; gap: 18px; }
.ui-filtsh-facet { min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-filtsh-facet legend { padding: 0 0 4px; font-weight: 600; }
.ui-filtsh-opt {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border-radius: var(--ui-radius-sm); cursor: pointer;
  touch-action: manipulation;
}
.ui-filtsh-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }
.ui-filtsh-opt span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-filtsh-n { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-filtsh-off { color: var(--ui-muted); cursor: default; }
.ui-filtsh-opt:focus-within { box-shadow: var(--ui-focus); }
.ui-filtsh-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-filtsh-range label { display: grid; gap: 2px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-filtsh-range input {
  box-sizing: border-box; width: 100%; min-width: 0; height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font);
}
.ui-filtsh-range input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-filtsh-bad { grid-column: 1 / -1; margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-filtsh-acts { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.ui-filtsh-saved { margin: 0; color: var(--ui-muted); font-size: 13px; }
@container (min-width: 520px) { .ui-filtsh-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px 28px; } }


.ui-diff { min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.4 var(--ui-font); overflow: hidden; }
.ui-diff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-diff-names { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font: 500 13px/1.4 var(--ui-mono); overflow-wrap: anywhere; }
.ui-diff-names span[aria-hidden] { color: var(--ui-muted); }
.ui-diff-stat { display: flex; gap: 8px; font: 600 13px/1 var(--ui-mono); font-variant-numeric: tabular-nums; }
.ui-diff-stat-add { color: var(--ui-success); }
.ui-diff-stat-del { color: var(--ui-danger); }
.ui-diff-scroll { overflow: auto; }
.ui-diff-scroll:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-diff table { width: 100%; border-collapse: collapse; font: 13px/1.6 var(--ui-mono); }
.ui-diff td { padding: 0 10px; vertical-align: top; white-space: pre; }
.ui-diff .ui-diff-n { width: 1%; min-width: 3ch; padding: 0 8px; text-align: right; color: var(--ui-muted);
  user-select: none; -webkit-user-select: none; font-variant-numeric: tabular-nums; }
.ui-diff .ui-diff-sign { width: 1%; padding: 0 2px 0 6px; color: var(--ui-muted); user-select: none; -webkit-user-select: none; }
.ui-diff ins, .ui-diff del { text-decoration: none; color: inherit; }
.ui-diff-add { background: color-mix(in srgb, var(--ui-success) 12%, transparent); }
.ui-diff-add .ui-diff-n, .ui-diff-add .ui-diff-sign { background: color-mix(in srgb, var(--ui-success) 18%, transparent); color: var(--ui-success); }
.ui-diff-del { background: color-mix(in srgb, var(--ui-danger) 11%, transparent); }
.ui-diff-del .ui-diff-n, .ui-diff-del .ui-diff-sign { background: color-mix(in srgb, var(--ui-danger) 17%, transparent); color: var(--ui-danger); }
.ui-diff-none { background: var(--ui-subtle); }
.ui-diff-split td.ui-diff-n:nth-child(3) { border-left: 1px solid var(--ui-border); }
.ui-diff-split .ui-diff-text { width: 50%; }
.ui-diff-fold td { padding: 3px 12px; background: var(--ui-subtle); color: var(--ui-muted); font: 12px/1.6 var(--ui-font);
  border-block: 1px solid var(--ui-border); }
.ui-diff-empty { padding: 18px 14px; color: var(--ui-muted); text-align: center; }


.ui-fxalert { display: grid; gap: 14px; min-width: 0; max-width: 520px; margin: 0; padding: 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-fxalert .ui-fxalert-title { margin: 0; font-size: 15px; font-weight: 650; }
.ui-fxalert-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.ui-fxalert-field { display: grid; gap: 6px; min-width: 0; }
.ui-fxalert-label { font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-fxalert-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s; }
.ui-fxalert-control:hover { border-color: var(--ui-strong); }
.ui-fxalert-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fxalert-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-fxalert-add { height: 38px; padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px var(--ui-font); cursor: pointer; }
.ui-fxalert-add:hover:not(:disabled) { filter: brightness(1.08); }
.ui-fxalert-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fxalert-add:disabled { opacity: .45; cursor: not-allowed; }
.ui-fxalert-now { margin: -6px 0 0; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-fxalert-msg { margin: -6px 0 0; font-size: 13px; }
.ui-fxalert-error { color: var(--ui-danger); }
.ui-fxalert-warn { color: var(--ui-warning); }
.ui-fxalert-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-fxalert-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); font-variant-numeric: tabular-nums; }
.ui-fxalert-dir { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 700; }
.ui-fxalert-above .ui-fxalert-dir { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-fxalert-below .ui-fxalert-dir { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-fxalert-what b { font-weight: 650; }
.ui-fxalert-what small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-fxalert-state { padding: 2px 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-fxalert-hit .ui-fxalert-state { background: var(--ui-warning-soft); color: var(--ui-fg); font-weight: 600; }
.ui-fxalert-remove { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-fxalert-remove svg { width: 14px; height: 14px; }
.ui-fxalert-remove:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-fxalert-remove:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fxalert-empty { margin: 0; padding: 14px 0 2px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; }
@media (max-width: 520px) { .ui-fxalert-form { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-fxalert-control { transition: none; } }


.ui-billrem { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-billrem-sum { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-billrem-sum strong { color: var(--ui-fg); }
.ui-billrem-cols { display: grid; gap: 14px; min-width: 0; }
.ui-billrem-group { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ui-billrem-group h3 { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-billrem-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-billrem-item { position: relative; min-width: 0; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-subtle); }
/* What a swipe is coming to, under the row as it moves. */
.ui-billrem-under { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; color: var(--ui-muted); font-size: 14px; font-weight: 600; }
.ui-billrem-face {
  position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ui-billrem-moving { transition: none; user-select: none; -webkit-user-select: none; }
.ui-billrem-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-billrem-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-billrem-mark { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--ui-muted); }
.ui-billrem-tag { padding: 1px 8px; border-radius: 999px; background: var(--ui-subtle); font-weight: 600; }
.ui-billrem-late .ui-billrem-tag { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-billrem-today .ui-billrem-tag, .ui-billrem-soon .ui-billrem-tag { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-billrem-late .ui-billrem-face { border-color: var(--ui-danger); }
.ui-billrem-short { font-style: italic; }
.ui-billrem-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ui-billrem-ask { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ui-border); }
.ui-billrem-ask p { margin: 0; }
.ui-billrem-pick { box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
.ui-billrem-pick span { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-billrem-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-billrem-err { margin: 0; color: var(--ui-danger); font-size: 14px; }
.ui-billrem-said { margin: 0; min-height: 20px; color: var(--ui-success); font-size: 14px; }
.ui-billrem-none { margin: 0; padding: 18px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@container (min-width: 640px) {
  .ui-billrem-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
}
@media (hover: hover) { .ui-billrem-pick:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-billrem-face { transition: none; } }


.ui-tag-input { display: grid; gap: 6px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-tag-input-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-tag-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-tag-input-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-tag-input-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-tag-input-box {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 6px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.ui-tag-input-box:hover { border-color: var(--ui-strong); }
.ui-tag-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-tag-input-invalid { border-color: var(--ui-danger); }
.ui-tag-input-tag {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 2px 0 9px; border-radius: 4px;
  background: var(--ui-accent-soft); color: var(--ui-accent); font: 500 13px/1 var(--ui-font); white-space: nowrap;
}
.ui-tag-input-x {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0;
  border-radius: 3px; background: transparent; color: inherit; cursor: pointer; opacity: .75;
}
.ui-tag-input-x svg { width: 10px; height: 10px; }
.ui-tag-input-x:hover { opacity: 1; background: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-tag-input-x:focus-visible { outline: none; opacity: 1; box-shadow: var(--ui-focus); }
.ui-tag-input-text {
  flex: 1 0 80px; min-width: 0; height: 28px; margin: 0; padding: 0 6px; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px/1 var(--ui-font);
}
.ui-tag-input-text::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-tag-input-text::-webkit-calendar-picker-indicator { display: none !important; }
.ui-tag-input-sm .ui-tag-input-box { min-height: 30px; padding: 2px 4px; gap: 4px; }
.ui-tag-input-sm .ui-tag-input-tag { height: 22px; font-size: 12px; }
.ui-tag-input-sm .ui-tag-input-text { height: 24px; font-size: 13px; }
.ui-tag-input:has(.ui-tag-input-text:disabled) .ui-tag-input-box { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-tag-input-box { transition: none; } }


.ui-spaced-rep { display: grid; gap: 14px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-spaced-rep .ui-spaced-rep-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-spaced-rep-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-spaced-rep-left, .ui-spaced-rep-reviews, .ui-spaced-rep-new { white-space: nowrap; }
.ui-spaced-rep-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-spaced-rep-card { display: grid; gap: 10px; min-height: 120px; padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); text-align: center; }
.ui-spaced-rep-card:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-spaced-rep-face { display: grid; gap: 10px; min-width: 0; }
.ui-spaced-rep-kind { color: var(--ui-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ui-spaced-rep-front { margin: 0; font-size: 20px; font-weight: 650; overflow-wrap: anywhere; }
.ui-spaced-rep-back { margin: 0; padding-top: 10px; border-top: 1px dashed var(--ui-strong); font-size: 17px; overflow-wrap: anywhere; }
.ui-spaced-rep-show, .ui-spaced-rep-grade { padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1.3 var(--ui-font); cursor: pointer; }
.ui-spaced-rep-show { justify-self: center; border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-spaced-rep-show:focus-visible, .ui-spaced-rep-grade:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-spaced-rep-grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.ui-spaced-rep-grade { display: grid; gap: 1px; text-align: left; }
.ui-spaced-rep-grade:hover { border-color: var(--ui-accent); }
.ui-spaced-rep-grade small { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-spaced-rep-low { border-left: 3px solid var(--ui-danger); }
.ui-spaced-rep-said { min-height: 1.4em; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-spaced-rep-empty { margin: 0; font-size: 15px; font-weight: 600; }
.ui-spaced-rep-data { font-size: 13px; }
.ui-spaced-rep-data summary { cursor: pointer; color: var(--ui-muted); }
.ui-spaced-rep-data summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-spaced-rep-wrap { overflow-x: auto; margin-top: 6px; }
.ui-spaced-rep-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-spaced-rep-table th, .ui-spaced-rep-table td { padding: 4px 8px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-spaced-rep-table th:first-child, .ui-spaced-rep-table td:first-child { text-align: left; }


.ui-lbc { --ui-lbc-up: var(--ui-success); --ui-lbc-down: var(--ui-danger);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-lbc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-lbc-meta { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-lbc-up { --k: var(--ui-lbc-up); } .ui-lbc-down { --k: var(--ui-lbc-down); }
.ui-lbc-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-lbc-plot { position: relative; height: var(--h); }
.ui-lbc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-lbc-last { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); opacity: .75; pointer-events: none; }
.ui-lbc-cols { position: absolute; inset: 0; display: flex; }
.ui-lbc-col { position: relative; flex: 1; min-width: 0; }
.ui-lbc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-lbc-box { position: absolute; left: 8%; right: 8%; min-height: 2px; border: 1px solid var(--k); border-radius: 2px;
  background: color-mix(in srgb, var(--k) 70%, transparent); }
.ui-lbc-down .ui-lbc-box { background: color-mix(in srgb, var(--k) 18%, transparent); }
.ui-lbc-col:hover .ui-lbc-box { background: var(--k); }
.ui-lbc-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 12px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-lbc-flip .ui-lbc-tip { left: auto; right: calc(50% + 12px); }
.ui-lbc-col:hover .ui-lbc-tip { display: block; }
.ui-lbc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; color: var(--k); }
.ui-lbc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-lbc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-lbc-y { position: relative; height: var(--h); }
.ui-lbc-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lbc-y .ui-lbc-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--k); color: var(--ui-bg); font-weight: 600; }
.ui-lbc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-lbc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-lbc-x .ui-lbc-first { transform: none; }
.ui-lbc-x .ui-lbc-end { transform: translateX(-100%); }
.ui-lbc-empty { display: grid; place-items: center; height: var(--h); border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); }


.ui-apptabs-demo { padding: 12px 16px; }
.ui-apptabs-demo p { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
.ui-apptabs-demo input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ui-form-actions-gap, 10px); min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-form-actions-start { justify-content: flex-start; }
.ui-form-actions-center { justify-content: center; }
.ui-form-actions-between { justify-content: space-between; }
.ui-form-actions-between > :first-child { margin-right: auto; }
.ui-form-actions-divider { padding-top: 16px; border-top: 1px solid var(--ui-border); }
.ui-form-actions-sticky { position: sticky; bottom: 0; z-index: 5; padding-bottom: 12px; background: var(--ui-bg); }
.ui-form-actions-sticky.ui-form-actions-divider { padding-top: 12px; }
.ui-form-actions-note { margin-right: auto; color: var(--ui-muted); font-size: 13px; }
.ui-form-actions-start .ui-form-actions-note { margin: 0 0 0 auto; }
.ui-form-actions-center .ui-form-actions-note, .ui-form-actions-between .ui-form-actions-note { margin: 0 auto; }
@media (max-width: 479px) {
  .ui-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .ui-form-actions-between > :first-child { margin-right: 0; }
  .ui-form-actions > .ui-btn { display: flex; width: 100%; }
  .ui-form-actions-note { margin: 0; text-align: center; }
}


.ui-image-crop { display: grid; gap: 8px; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-image-crop-frame { position: relative; overflow: hidden; width: 100%; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); touch-action: none; user-select: none; }
.ui-image-crop-frame img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.ui-image-crop-box {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 1.5px solid #fff; cursor: move; outline: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}
.ui-image-crop-box:focus-visible { border-color: var(--ui-accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5), var(--ui-focus); }
.ui-image-crop-box::before, .ui-image-crop-box::after { content: ""; position: absolute; pointer-events: none; border: 0 solid rgba(255, 255, 255, .45); }
.ui-image-crop-box::before { inset: 0 33.33%; border-width: 0 1px; }
.ui-image-crop-box::after { inset: 33.33% 0; border-width: 1px 0; }
.ui-image-crop-handle { position: absolute; z-index: 1; width: 16px; height: 16px; border: 2px solid var(--ui-accent); border-radius: 3px; background: #fff; }
.ui-image-crop-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.ui-image-crop-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.ui-image-crop-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ui-image-crop-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ui-image-crop-size { color: var(--ui-muted); font-variant-numeric: tabular-nums; }


.ui-swipe-dismiss { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-swipe-dismiss-inner { display: grid; gap: 10px; }
.ui-swipe-dismiss-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-swipe-dismiss-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s cubic-bezier(.2, .8, .2, 1); }
.ui-swipe-dismiss-gone { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .22s cubic-bezier(.2, .8, .2, 1) .12s, visibility 0s .34s; }
.ui-swipe-dismiss-clip { position: relative; min-height: 0; overflow: hidden; }
.ui-swipe-dismiss-under { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px; background: var(--ui-danger); color: #fff; font-weight: 600; }
.ui-swipe-dismiss-under[data-way="left"] { justify-content: flex-end; }
.ui-swipe-dismiss-front { position: relative; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
  touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-swipe-dismiss-moving { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-swipe-dismiss-text { flex: 1; min-width: 0; }
.ui-swipe-dismiss-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-swipe-dismiss-sub { display: block; color: var(--ui-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-swipe-dismiss-x { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-swipe-dismiss-x svg { width: 18px; height: 18px; }
.ui-swipe-dismiss-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-swipe-dismiss-none { padding: 24px 16px; color: var(--ui-muted); text-align: center; }
.ui-swipe-dismiss-clear { justify-self: end; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-swipe-dismiss-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* On a phone the newest batch alone shows, above the safe area when the list is a screen; sticky keeps it in sight. */
.ui-swipe-dismiss-bar { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ui-swipe-dismiss-batch { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 6px 4px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); box-shadow: var(--ui-shadow); }
.ui-swipe-dismiss-batch:not(:first-child) { display: none; }
.ui-swipe-dismiss-batch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-swipe-dismiss-undo { min-width: 64px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: 700 14px/1 var(--ui-font); text-decoration: underline; cursor: pointer; }
.ui-swipe-dismiss-undo:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
@media (hover: hover) {
  .ui-swipe-dismiss-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
  .ui-swipe-dismiss-clear:hover { background: var(--ui-subtle); }
}
@container (min-width: 560px) {
  .ui-swipe-dismiss-inner { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
  .ui-swipe-dismiss-clear { grid-column: 1 / -1; }
  .ui-swipe-dismiss-bar { position: static; }
  .ui-swipe-dismiss-batch:not(:first-child) { display: flex; opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-swipe-dismiss-row, .ui-swipe-dismiss-gone, .ui-swipe-dismiss-front { transition: none; }
}


.ui-year-calendar { display: grid; gap: 14px; min-width: 0; font: 12px/1.2 var(--ui-font); color: var(--ui-fg); }
.ui-year-calendar-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 22px; }
.ui-year-calendar-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-year-calendar-month caption { padding: 0 0 6px 4px; font-size: 13px; font-weight: 600; text-align: left; }
.ui-year-calendar-month th { padding: 2px 0; color: var(--ui-muted); font-size: 10px; font-weight: 600; text-align: center; }
.ui-year-calendar-month td { padding: 1px; text-align: center; }
.ui-year-calendar-day { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 26px; margin: auto; border-radius: 50%; color: inherit; font-variant-numeric: tabular-nums; text-decoration: none; --t: var(--ui-accent); }
a.ui-year-calendar-day:hover { background: var(--ui-subtle); }
a.ui-year-calendar-day:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-year-calendar-weekend { color: var(--ui-muted); }
.ui-year-calendar-marked { background: color-mix(in srgb, var(--t) 22%, transparent); color: var(--ui-fg); font-weight: 600; }
a.ui-year-calendar-marked:hover { background: color-mix(in srgb, var(--t) 36%, transparent); }
.ui-year-calendar-today { box-shadow: inset 0 0 0 2px var(--ui-accent); font-weight: 700; }
.ui-year-calendar-success { --t: var(--ui-success); }
.ui-year-calendar-warning { --t: var(--ui-warning); }
.ui-year-calendar-danger { --t: var(--ui-danger); }
.ui-year-calendar-info { --t: var(--ui-info); }
.ui-year-calendar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-year-calendar-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-year-calendar-legend i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--t) 40%, transparent); --t: var(--ui-accent); }


.ui-edgedrawer { display: block; width: 100%; height: 100%; min-height: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-edgedrawer-in { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; overscroll-behavior-x: contain; touch-action: pan-y pinch-zoom; background: var(--ui-bg); }
.ui-edgedrawer-main { flex: 1; min-width: 0; height: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.ui-edgedrawer-panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 3; display: flex; flex-direction: column; box-sizing: border-box;
  width: min(var(--ui-edgedrawer-w, 300px), 85%); padding-top: env(safe-area-inset-top); padding-inline-start: env(safe-area-inset-left);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); outline: none; visibility: hidden; transform: translate3d(-100%, 0, 0);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s .26s; touch-action: pan-y pinch-zoom; overscroll-behavior: contain;
}
.ui-edgedrawer-panel:dir(rtl) { transform: translate3d(100%, 0, 0); }
.ui-edgedrawer-open .ui-edgedrawer-panel { visibility: visible; transform: none; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.ui-edgedrawer-moving .ui-edgedrawer-panel { visibility: visible; transition: none; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-edgedrawer-scrim {
  position: absolute; inset: 0; z-index: 2; background: var(--ui-overlay); opacity: 0; visibility: hidden; touch-action: none;
  transition: opacity .26s cubic-bezier(.2, .8, .2, 1), visibility 0s .26s;
}
.ui-edgedrawer-open .ui-edgedrawer-scrim { opacity: 1; visibility: visible; transition: opacity .26s cubic-bezier(.2, .8, .2, 1); }
.ui-edgedrawer-moving .ui-edgedrawer-scrim { visibility: visible; transition: none; }
.ui-edgedrawer-head { display: flex; flex: none; align-items: center; gap: 8px; min-height: 52px; padding-inline: 16px 4px; border-bottom: 1px solid var(--ui-border); }
.ui-edgedrawer-head h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-edgedrawer-close {
  display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-edgedrawer-close svg { width: 22px; height: 22px; }
.ui-edgedrawer-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-edgedrawer-close:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-edgedrawer-menu { flex: none; }
/* touch-action stops counting at a scroller, so the one on the panel does not reach what is in this. */
.ui-edgedrawer-body { flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
@container (min-width: 700px) {
  .ui-edgedrawer-dock .ui-edgedrawer-panel {
    position: static; flex: none; order: -1; width: min(var(--ui-edgedrawer-w, 300px), 40%); border-inline-end: 1px solid var(--ui-border);
    box-shadow: none; visibility: visible; transform: none; transition: none;
  }
  .ui-edgedrawer-dock .ui-edgedrawer-scrim, .ui-edgedrawer-dock .ui-edgedrawer-close, .ui-edgedrawer-dock .ui-edgedrawer-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-edgedrawer-panel, .ui-edgedrawer-scrim, .ui-edgedrawer-open .ui-edgedrawer-panel, .ui-edgedrawer-open .ui-edgedrawer-scrim { transition: none; }
}


.ui-skeleton { display: block; border-radius: var(--ui-radius-sm);
  background: linear-gradient(90deg, var(--ui-subtle) 0%, color-mix(in srgb, var(--ui-subtle) 55%, var(--ui-strong)) 50%, var(--ui-subtle) 100%);
  background-size: 200% 100%; animation: ui-skeleton-shine 1.4s ease-in-out infinite; }
.ui-skeleton-lines { display: grid; gap: 8px; }
.ui-skeleton-line { height: .8em; border-radius: 4px; font-size: 15px; }
.ui-skeleton-line:last-child:not(:first-child) { width: 62%; }
.ui-skeleton-rect { width: 100%; height: 120px; }
.ui-skeleton-circle { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.ui-skeleton-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-skeleton-card-head { display: flex; align-items: center; gap: 12px; }
.ui-skeleton-card-head > :last-child { flex: 1; }
@keyframes ui-skeleton-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none; background: var(--ui-subtle); } }


.ui-accordion { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 15px/1.5 var(--ui-font); color: var(--ui-fg); interpolate-size: allow-keywords; }
.ui-accordion-flush { border-width: 1px 0 0; border-radius: 0; background: transparent; }
.ui-accordion-item + .ui-accordion-item, .ui-accordion-flush .ui-accordion-item { border-top: 1px solid var(--ui-border); }
.ui-accordion-flush .ui-accordion-item:first-child { border-top: 0; }
.ui-accordion-flush { border-bottom: 1px solid var(--ui-border); }
.ui-accordion-item > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 500; border-radius: var(--ui-radius);
}
.ui-accordion-flush .ui-accordion-item > summary { padding-left: 2px; padding-right: 2px; }
.ui-accordion-item > summary::-webkit-details-marker { display: none; }
.ui-accordion-item > summary:hover { color: var(--ui-accent); }
.ui-accordion-item > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-accordion-title { flex: 1; display: grid; gap: 1px; }
.ui-accordion-hint { color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-accordion-chev {
  flex: none; width: 8px; height: 8px; margin: -4px 4px 0; border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform .2s;
}
.ui-accordion-item[open] > summary .ui-accordion-chev { transform: translateY(3px) rotate(-135deg); }
.ui-accordion-body { padding: 0 16px 16px; color: var(--ui-muted); }
.ui-accordion-flush .ui-accordion-body { padding-left: 2px; padding-right: 2px; }
.ui-accordion-body > :first-child { margin-top: 0; }
.ui-accordion-body > :last-child { margin-bottom: 0; }
.ui-accordion-item::details-content { block-size: 0; overflow: hidden; transition: block-size .2s, content-visibility .2s allow-discrete; }
.ui-accordion-item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .ui-accordion-chev, .ui-accordion-item::details-content { transition: none; }
}


.ui-masked-input { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-masked-input-label { font-size: 13px; font-weight: 500; }
.ui-masked-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-masked-input-box {
  display: flex; align-items: center; gap: 8px; width: 220px; max-width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-masked-input-box:hover { border-color: var(--ui-strong); }
.ui-masked-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-masked-input-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-mono); letter-spacing: .04em;
}
.ui-masked-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-masked-input-ok { flex: none; width: 16px; height: 16px; color: var(--ui-success); opacity: 0; transition: opacity .15s; }
.ui-masked-input-done .ui-masked-input-ok { opacity: 1; }
.ui-masked-input-sm .ui-masked-input-box { height: 30px; width: 180px; padding: 0 10px; }
.ui-masked-input-sm .ui-masked-input-box input { font-size: 13px; }
.ui-masked-input-invalid .ui-masked-input-box, .ui-masked-input-invalid .ui-masked-input-box:hover { border-color: var(--ui-danger); }
.ui-masked-input-hint, .ui-masked-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-masked-input-error { color: var(--ui-danger); }
.ui-masked-input-disabled { opacity: .55; }
.ui-masked-input-disabled input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-masked-input-box, .ui-masked-input-ok { transition: none; } }


.ui-sl { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-sl-label { font-size: 13px; font-weight: 500; }
.ui-sl-box { position: relative; display: flex; align-items: center; }
.ui-sl-box svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ui-muted); pointer-events: none; }
.ui-sl-input {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px 0 35px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1 var(--ui-font);
  appearance: none; transition: border-color .15s, box-shadow .15s;
}
.ui-sl-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-sl-input:hover { border-color: var(--ui-strong); }
.ui-sl-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sl-facets { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-sl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-sl-chip:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-sl-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sl-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-sl-chip:disabled { opacity: .5; cursor: not-allowed; }
.ui-sl-chip span { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-sl-chip[aria-pressed="true"] span { color: inherit; }
.ui-sl-count { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-sl-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-sl-hit {
  display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-sl-hit:hover { background: var(--ui-subtle); }
.ui-sl-hit:focus-visible { outline: none; background: var(--ui-subtle); box-shadow: var(--ui-focus); }
.ui-sl-title { font-weight: 600; color: var(--ui-fg); }
a.ui-sl-hit .ui-sl-title { color: var(--ui-accent); }
.ui-sl-text { color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-sl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ui-sl-tag { padding: 1px 7px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; }
.ui-sl-hit:hover .ui-sl-tag, .ui-sl-hit:focus-visible .ui-sl-tag { background: var(--ui-bg); }
.ui-sl-empty { padding: 26px 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-sl-empty b { color: var(--ui-fg); }
@media (prefers-reduced-motion: reduce) { .ui-sl-input { transition: none; } }


.ui-contact-card { display: grid; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); font-style: normal; }
.ui-contact-card-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ui-contact-card-name { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.ui-contact-card-role { color: var(--ui-muted); font-size: 13px; }
.ui-contact-card-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-contact-card-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ui-contact-card-row svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ui-muted); }
.ui-contact-card-row a, .ui-contact-card-row span { min-width: 0; overflow-wrap: anywhere; }
.ui-contact-card-row a { color: var(--ui-fg); text-decoration: none; }
.ui-contact-card-row a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-contact-card-row a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-contact-card-acts:empty { display: none; }
.ui-contact-card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-contact-card-save { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); color: var(--ui-accent); font: 500 13px/1 var(--ui-font); text-decoration: none; }
.ui-contact-card-save:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-contact-card-save:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-contact-card-save svg { width: 14px; height: 14px; }


.ui-ch { display: grid; gap: 8px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); }
.ui-ch-success { --t: var(--ui-success); }
.ui-ch-info { --t: var(--ui-info); }
.ui-ch-warning { --t: var(--ui-warning); }
.ui-ch-danger { --t: var(--ui-danger); }
.ui-ch-total { margin: 0; font-size: 14px; }
.ui-ch-scroll { overflow-x: auto; overflow-y: hidden; direction: rtl; }
.ui-ch-scroll:focus-visible { outline: none; border-radius: var(--ui-radius-sm); box-shadow: var(--ui-focus); }
.ui-ch-svg { display: block; width: 100%; height: auto; margin-right: auto; direction: ltr; }
.ui-ch-svg text { fill: var(--ui-muted); font: 9px var(--ui-font); }
.ui-ch-day { stroke: transparent; stroke-width: 1; }
.ui-ch-day:hover { stroke: var(--ui-fg); }
.ui-ch-l0 { fill: color-mix(in srgb, var(--ui-border) 55%, var(--ui-subtle)); }
.ui-ch-l1 { fill: color-mix(in srgb, var(--t) 30%, var(--ui-subtle)); }
.ui-ch-l2 { fill: color-mix(in srgb, var(--t) 52%, var(--ui-subtle)); }
.ui-ch-l3 { fill: color-mix(in srgb, var(--t) 76%, var(--ui-subtle)); }
.ui-ch-l4 { fill: var(--t); }
.ui-ch-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--ui-muted); }
.ui-ch-legend svg { width: 10px; height: 10px; }
.ui-ch-legend span:first-child { margin-right: 4px; }
.ui-ch-legend span:last-child { margin-left: 4px; }


.ui-wafflec {
  --ui-wafflec-1: light-dark(#2a78d6, #3987e5); --ui-wafflec-2: light-dark(#eb6834, #d95926);
  --ui-wafflec-3: light-dark(#1baf7a, #199e70); --ui-wafflec-4: light-dark(#eda100, #c98500);
  --ui-wafflec-5: light-dark(#e87ba4, #d55181); --ui-wafflec-6: light-dark(#008300, #008300);
  --ui-wafflec-7: light-dark(#6250d6, #9085e9); --ui-wafflec-8: light-dark(#e34948, #e66767);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-width: 0; margin: 0; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-wafflec-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-wafflec-s1 { --c: var(--ui-wafflec-1); } .ui-wafflec-s2 { --c: var(--ui-wafflec-2); } .ui-wafflec-s3 { --c: var(--ui-wafflec-3); }
.ui-wafflec-s4 { --c: var(--ui-wafflec-4); } .ui-wafflec-s5 { --c: var(--ui-wafflec-5); } .ui-wafflec-s6 { --c: var(--ui-wafflec-6); }
.ui-wafflec-s7 { --c: var(--ui-wafflec-7); } .ui-wafflec-s8 { --c: var(--ui-wafflec-8); }
.ui-wafflec-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; flex: none; max-width: 100%; aspect-ratio: 1; }
.ui-wafflec-cell { border-radius: 2px; background: var(--c, color-mix(in srgb, var(--ui-border) 75%, transparent)); transition: opacity .15s ease; }
.ui-wafflec-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center;
  flex: 1 1 200px; min-width: 0; max-width: 340px; margin: 0; padding: 0; list-style: none; }
.ui-wafflec-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; transition: opacity .15s ease; }
.ui-wafflec-key { width: 10px; height: 10px; border-radius: 2px; background: var(--c, color-mix(in srgb, var(--ui-border) 75%, transparent)); }
.ui-wafflec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-wafflec-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-wafflec-pct { min-width: 3.2em; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ui-wafflec:has(.ui-wafflec-p1:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p1),
.ui-wafflec:has(.ui-wafflec-p2:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p2),
.ui-wafflec:has(.ui-wafflec-p3:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p3),
.ui-wafflec:has(.ui-wafflec-p4:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p4),
.ui-wafflec:has(.ui-wafflec-p5:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p5),
.ui-wafflec:has(.ui-wafflec-p6:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p6),
.ui-wafflec:has(.ui-wafflec-p7:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p7),
.ui-wafflec:has(.ui-wafflec-p8:hover) :is(.ui-wafflec-cell, .ui-wafflec-legend li):not(.ui-wafflec-p8) { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .ui-wafflec-cell, .ui-wafflec-legend li { transition: none; } }


.ui-cash-count { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-cash-count .ui-cash-count-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-cash-count-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.ui-cash-count-row { display: grid; grid-template-columns: minmax(60px, 1fr) 70px minmax(70px, 1fr); gap: 8px; align-items: center; min-width: 0; }
.ui-cash-count-row label { font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-cash-count-line { text-align: right; color: var(--ui-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-cash-count input { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-cash-count-row input { text-align: right; }
.ui-cash-count input:hover { border-color: var(--ui-strong); }
.ui-cash-count input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-cash-count input[aria-invalid] { border-color: var(--ui-danger); }
.ui-cash-count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
.ui-cash-count-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-cash-count-field label { font-size: 13px; font-weight: 500; }
.ui-cash-count-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-cash-count-out { display: grid; gap: 10px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-cash-count-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; }
.ui-cash-count-sums dt { color: var(--ui-muted); }
.ui-cash-count-sums dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-cash-count-total { color: var(--ui-fg) !important; font-size: 16px; font-weight: 700; }
.ui-cash-count-status { margin: 0; padding: 6px 10px; border-radius: var(--ui-radius-sm); font-weight: 600; }
.ui-cash-count-balanced { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-cash-count-over { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-cash-count-short { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-cash-count-change { margin: 0; }
.ui-cash-count-pieces { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.ui-cash-count-note { margin: 0; color: var(--ui-muted); font-size: 13px; }


/* set elsewhere: leaflet- (Leaflet's script sets them) */
.ui-mapsheet { position: relative; isolation: isolate; box-sizing: border-box; height: 100%; min-height: 320px; overflow: hidden; container-type: size; container-name: ui-mapsheet; background: var(--ui-subtle); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-mapsheet-map { position: absolute; inset: 0; z-index: 0; }
.ui-mapsheet .leaflet-container { background: var(--ui-subtle); font: 11px/1.4 var(--ui-font); }
.ui-mapsheet-pin { background: none; border: 0; }
.ui-mapsheet-pin > span {
  position: absolute; left: 7px; top: 7px; box-sizing: border-box; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 700 13px/1 var(--ui-font); box-shadow: 0 1px 4px rgb(0 0 0 / .45); transition: transform .12s;
}
.ui-mapsheet-pin.ui-mapsheet-on > span { background: var(--ui-fg); color: var(--ui-bg); transform: scale(1.25); }
.ui-mapsheet-pin:focus-visible { outline: none; }
.ui-mapsheet-pin:focus-visible > span { box-shadow: var(--ui-focus); }
.ui-mapsheet-tools { position: absolute; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); z-index: 5; display: grid; gap: 6px; }
.ui-mapsheet-tool {
  box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 600 20px/1 var(--ui-font); cursor: pointer; box-shadow: var(--ui-shadow); -webkit-tap-highlight-color: transparent;
}
.ui-mapsheet-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mapsheet-nomap { position: absolute; left: 12px; right: 64px; top: 12px; z-index: 5; margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font-size: 14px; box-shadow: var(--ui-shadow); }
.ui-mapsheet-sheet {
  position: absolute; inset: 12px 0 0 0; z-index: 10; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0; background: var(--ui-surface);
  border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; box-shadow: var(--ui-shadow-lg), 0 160px 0 0 var(--ui-surface); will-change: transform; transform: translateY(var(--ui-mapsheet-y));
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.ui-mapsheet-grip {
  display: grid; place-items: center; flex: none; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.ui-mapsheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-mapsheet-grip:focus-visible { outline: none; }
.ui-mapsheet-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-mapsheet-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: -8px; padding: 0 16px 8px; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.ui-mapsheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-mapsheet-count { color: var(--ui-muted); font-size: 13px; white-space: nowrap; }
.ui-mapsheet-body { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 8px calc(16px + env(safe-area-inset-bottom) + var(--ui-mapsheet-hide, 0px)); }
.ui-mapsheet-list { margin: 0; padding: 0; list-style: none; }
.ui-mapsheet-row {
  box-sizing: border-box; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 0 10px; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-mapsheet-row:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-mapsheet-row[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-mapsheet-row[data-seen="no"] { opacity: .55; }
.ui-mapsheet-num { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ui-subtle); font-size: 12px; font-weight: 700; }
.ui-mapsheet-row[aria-current="true"] .ui-mapsheet-num { background: var(--ui-fg); color: var(--ui-bg); }
.ui-mapsheet-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-mapsheet-note { color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-mapsheet-empty { padding: 20px 8px; color: var(--ui-muted); text-align: center; }
/* With the room, a card down the side, at its full height: nothing to drag. */
@container ui-mapsheet (min-width: 600px) {
  .ui-mapsheet-sheet { inset: 12px auto 12px max(12px, env(safe-area-inset-left)); width: 340px; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px); box-shadow: var(--ui-shadow-lg); transform: none; transition: none; }
  .ui-mapsheet-grip { display: none; }
  .ui-mapsheet-head { margin-top: 0; padding-top: 12px; touch-action: auto; }
  .ui-mapsheet-body { --ui-mapsheet-hide: 0px; }
}
@media (hover: hover) { .ui-mapsheet-row:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-mapsheet-sheet, .ui-mapsheet-pin > span { transition: none; } }


.ui-stepper-row { container-type: inline-size; min-width: 0; font: 16px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-stepper-row-body { display: flex; align-items: center; gap: 12px; min-height: 60px; min-width: 0; }
.ui-stepper-row-words { flex: 1; display: grid; min-width: 0; }
.ui-stepper-row-label { font-weight: 500; }
.ui-stepper-row-hint { font-size: 13px; color: var(--ui-muted); }
.ui-stepper-row-box { flex: none; display: flex; align-items: center; gap: 4px; }
.ui-stepper-row-btn {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-accent); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-stepper-row-btn svg { width: 22px; height: 22px; }
.ui-stepper-row-btn:active { background: var(--ui-subtle); }
.ui-stepper-row-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stepper-row-btn[aria-disabled="true"] { color: var(--ui-muted); opacity: .5; cursor: not-allowed; }
.ui-stepper-row-value {
  box-sizing: border-box; width: 72px; height: 48px; margin: 0; padding: 0 2px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 600 18px var(--ui-font); text-align: center; font-variant-numeric: tabular-nums;
}
.ui-stepper-row-value:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-stepper-row-value[readonly] { cursor: default; }
/* The unit sits inside the number's own width, so rows with and without one line up. */
.ui-stepper-row-num { position: relative; display: block; }
.ui-stepper-row-unit { position: absolute; inset: auto 0 1px; font-size: 11px; line-height: 1; text-align: center; color: var(--ui-muted); pointer-events: none; }
.ui-stepper-row-united .ui-stepper-row-value { padding-bottom: 9px; }
@media (hover: hover) { .ui-stepper-row-btn:hover:not([aria-disabled="true"]) { border-color: var(--ui-accent); } }
@container (min-width: 440px) {
  .ui-stepper-row-words { display: flex; align-items: baseline; gap: 14px; }
  .ui-stepper-row-value { width: 96px; }
}


.ui-fxticket { display: grid; gap: 14px; min-width: 0; max-width: 380px; margin: 0; padding: 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg);
  font-variant-numeric: tabular-nums; }
.ui-fxticket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-fxticket .ui-fxticket-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-fxticket-quote-no { color: var(--ui-muted); font-size: 12px; }
.ui-fxticket-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 3px; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); }
.ui-fxticket-sides legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-fxticket-side { position: relative; display: grid; gap: 1px; padding: 7px 10px; border-radius: calc(var(--ui-radius-sm) - 2px); cursor: pointer;
  text-align: center; color: var(--ui-muted); transition: background .15s, color .15s; }
.ui-fxticket-side input { position: absolute; opacity: 0; pointer-events: none; }
.ui-fxticket-side b { font-size: 13px; font-weight: 650; }
.ui-fxticket-side span { font-size: 15px; font-weight: 600; }
.ui-fxticket-side:has(input:checked) { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ui-fxticket-side:has(input[value="buy"]:checked) b { color: var(--ui-success); }
.ui-fxticket-side:has(input[value="sell"]:checked) b { color: var(--ui-danger); }
.ui-fxticket-side:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-fxticket-field { display: grid; gap: 6px; }
.ui-fxticket-label { font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-fxticket-box { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.ui-fxticket-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fxticket-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 600 16px var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-fxticket-box small { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-fxticket-invalid .ui-fxticket-box { border-color: var(--ui-danger); }
.ui-fxticket-rate { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px;
  border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-fxticket-rate dt { color: var(--ui-muted); font-size: 12px; }
.ui-fxticket-rate dd { margin: 0; text-align: right; font-weight: 600; }
.ui-fxticket-price { font-size: 20px; }
.ui-fxticket-counter { font-size: 18px; }
.ui-fxticket-timer { display: grid; gap: 6px; }
.ui-fxticket-timer-text { display: flex; justify-content: space-between; color: var(--ui-muted); font-size: 12px; }
.ui-fxticket-timer-text b { color: var(--ui-fg); font-weight: 600; }
.ui-fxticket-bar { height: 4px; overflow: hidden; border-radius: 2px; background: var(--ui-border); }
.ui-fxticket-bar span { display: block; height: 100%; background: var(--ui-accent); transition: width 1s linear; }
.ui-fxticket-late .ui-fxticket-bar span { background: var(--ui-warning); }
.ui-fxticket-expired .ui-fxticket-price, .ui-fxticket-expired .ui-fxticket-counter { color: var(--ui-muted); text-decoration: line-through; }
.ui-fxticket-gone { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-fg); font-size: 13px; }
.ui-fxticket-gone a { color: var(--ui-accent); font-weight: 600; }
.ui-fxticket-confirm { height: 42px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 15px var(--ui-font); cursor: pointer; }
.ui-fxticket-confirm:hover:not(:disabled) { filter: brightness(1.08); }
.ui-fxticket-confirm:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fxticket-confirm:disabled { opacity: .45; cursor: not-allowed; }
.ui-fxticket-done { display: grid; gap: 10px; padding: 14px; border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); }
.ui-fxticket-done p { margin: 0; }
.ui-fxticket-done button { justify-self: start; padding: 6px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-fxticket-done button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-fxticket-bar span, .ui-fxticket-side, .ui-fxticket-box { transition: none; } }


.ui-lyrics { position: relative; min-width: 0; height: var(--ui-lyrics-height, 60dvh); container: ui-lyrics / inline-size; color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }
.ui-lyrics-in { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: 100%; }
.ui-lyrics-side { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 12px; color: var(--ui-muted); font-size: 13px; }
.ui-lyrics-side:empty { display: none; }
.ui-lyrics-side strong { overflow: hidden; color: var(--ui-fg); text-overflow: ellipsis; white-space: nowrap; }
.ui-lyrics-wrap { position: relative; min-width: 0; min-height: 0; }
.ui-lyrics-scroll {
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; container-type: size; outline: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.ui-lyrics-scroll::-webkit-scrollbar { display: none; }
/* Half a box of room at each end, so the first and last lines can stand in the middle too. */
.ui-lyrics-list { display: grid; gap: 2px; margin: 0; padding: 50cqh 12px; list-style: none; }
.ui-lyrics-line {
  display: block; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: var(--ui-muted); text-align: center;
  font: 650 22px/1.3 var(--ui-font); cursor: pointer; touch-action: pan-y; transition: color .25s, transform .25s; -webkit-tap-highlight-color: transparent;
}
.ui-lyrics-line[aria-current="true"] { color: var(--ui-fg); transform: scale(1.06); }
.ui-lyrics-gap { color: var(--ui-strong); letter-spacing: .3em; }
.ui-lyrics-line:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-lyrics-back {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px var(--ui-font); cursor: pointer; transform: translateX(-50%); box-shadow: var(--ui-shadow); touch-action: manipulation; z-index: 1;
}
.ui-lyrics-back:focus-visible { outline: 2px solid var(--ui-fg); outline-offset: 2px; }
.ui-lyrics-empty, .ui-lyrics-plain { margin: 0; padding: 16px; color: var(--ui-muted); text-align: center; }
.ui-lyrics-plain { overflow-y: auto; color: var(--ui-fg); white-space: pre-line; }
@media (hover: hover) { .ui-lyrics-line:hover { color: var(--ui-fg); } }
/* A wide box: the song beside the words, which get larger and start from the left. */
@container ui-lyrics (min-width: 640px) {
  .ui-lyrics-both { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 20px; }
  .ui-lyrics-side { flex-direction: column; justify-content: center; gap: 4px; padding: 16px; font-size: 15px; }
  .ui-lyrics-side strong { white-space: normal; font-size: 22px; }
  .ui-lyrics-line { padding: 10px 12px; text-align: left; font-size: 32px; transform-origin: 0 50%; }
}
@media (prefers-reduced-motion: reduce) { .ui-lyrics-line { transition: none; } }


.ui-secfr { container-type: inline-size; min-width: 0; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-secfr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding-top: 10px;
  border-top: 3px solid var(--ui-fg); }
.ui-secfr .ui-secfr-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ui-secfr-title a { color: inherit; text-decoration: none; }
.ui-secfr-title a::after { content: " ›"; color: var(--ui-accent); }
.ui-secfr-title a:hover { color: var(--ui-accent); }
.ui-secfr a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-secfr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ui-secfr-story { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; }
.ui-secfr-pic { margin: 0 0 4px; }
.ui-secfr-pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-secfr-credit { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 11px; text-align: right; }
.ui-secfr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ui-accent); }
.ui-secfr-label { color: var(--ui-muted); }
.ui-secfr-live { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-danger); }
.ui-secfr-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ui-secfr-pulse 1.6s ease-in-out infinite; }
@keyframes ui-secfr-pulse { 50% { opacity: .25; } }
.ui-secfr .ui-secfr-hl { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.ui-secfr-hl a { color: inherit; text-decoration: none; }
.ui-secfr-hl a::after { content: ""; position: absolute; inset: 0; }
.ui-secfr-story:hover .ui-secfr-hl a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ui-secfr-dek { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-secfr-meta { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-secfr-meta > * + *::before { content: "·"; margin: 0 6px; }
.ui-secfr-lead .ui-secfr-hl { font-size: clamp(22px, 3.4cqi, 30px); line-height: 1.15; font-weight: 800; }
.ui-secfr-lead .ui-secfr-dek { font-size: 16px; }
.ui-secfr-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.ui-secfr-rest .ui-secfr-story + .ui-secfr-story { border: 0; }
.ui-secfr-more { min-width: 0; }
.ui-secfr-more h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-secfr-list { margin: 0; padding: 0; list-style: none; }
.ui-secfr-list li { position: relative; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
.ui-secfr-list a { color: var(--ui-fg); font-weight: 600; text-decoration: none; line-height: 1.3; }
.ui-secfr-list a::after { content: ""; position: absolute; inset: 0; }
.ui-secfr-list li:hover a { color: var(--ui-accent); }
.ui-secfr-list .ui-secfr-meta { margin-top: 2px; }
.ui-secfr-all { display: inline-block; margin-top: 10px; color: var(--ui-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.ui-secfr-all:hover { text-decoration: underline; }
@container (min-width: 640px) {
  .ui-secfr-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ui-secfr-lead { grid-row: span 2; }
  .ui-secfr-grid:not(:has(.ui-secfr-more)) { grid-template-columns: minmax(0, 1fr); }
  .ui-secfr-rest { grid-column: 1; }
  .ui-secfr-more { grid-column: 2; grid-row: 1 / span 2; padding-left: 20px; border-left: 1px solid var(--ui-border); }
}
@container (min-width: 900px) {
  .ui-secfr-grid:has(.ui-secfr-more) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr); }
  .ui-secfr-grid:has(.ui-secfr-more) .ui-secfr-lead { grid-row: auto; }
  .ui-secfr-grid:has(.ui-secfr-more) .ui-secfr-rest { grid-column: 2; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ui-secfr-grid:has(.ui-secfr-more) .ui-secfr-rest .ui-secfr-story + .ui-secfr-story { padding-top: 16px; border-top: 1px solid var(--ui-border); }
  .ui-secfr-grid:has(.ui-secfr-more) .ui-secfr-rest .ui-secfr-pic { display: none; }
  .ui-secfr-grid:has(.ui-secfr-more) .ui-secfr-rest .ui-secfr-story:first-child .ui-secfr-pic { display: block; }
  .ui-secfr-more { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .ui-secfr-live::before { animation: none; } }


.ui-task-row { position: relative; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); background: var(--ui-surface); }
.ui-task-row-clip { position: relative; overflow: hidden; }
.ui-task-row-under { position: absolute; top: 0; bottom: 0; display: flex; visibility: hidden; }
.ui-task-row-under-due { left: 0; }
.ui-task-row-under-del { right: 0; }
.ui-task-row[data-way="due"] .ui-task-row-under-due, .ui-task-row[data-way="del"] .ui-task-row-under-del { visibility: visible; }
.ui-task-row-act { display: grid; place-items: center; min-width: 64px; min-height: 44px; padding: 0 6px; border: 0; background: var(--ui-info); color: #fff; font: 600 13px/1.2 var(--ui-font); cursor: pointer; }
.ui-task-row-act + .ui-task-row-act { background: color-mix(in srgb, var(--ui-info) 82%, #000); }
.ui-task-row-act + .ui-task-row-act + .ui-task-row-act { background: color-mix(in srgb, var(--ui-info) 66%, #000); }
.ui-task-row-act-del { min-width: 88px; background: var(--ui-danger); }
.ui-task-row-act:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.ui-task-row-front { position: relative; display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 4px 4px 4px 6px; background: var(--ui-surface);
  touch-action: pan-y; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-task-row-moving { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-task-row-check { position: relative; display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-task-row-check:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-task-row-check[data-priority="high"] { color: var(--ui-danger); }
.ui-task-row-check[data-priority="medium"] { color: var(--ui-warning); }
.ui-task-row-check[data-priority="low"] { color: var(--ui-info); }
.ui-task-row-ring { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--ui-success) calc(var(--done, 0) * 1turn), currentColor 0); transition: transform .18s; }
.ui-task-row-ring::before { content: ""; grid-area: 1 / 1; width: 21px; height: 21px; border-radius: 50%; background: var(--ui-surface); transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .15s; }
.ui-task-row-ring svg { grid-area: 1 / 1; z-index: 1; width: 16px; height: 16px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .12s, transform .2s cubic-bezier(.2, 1.4, .4, 1); }
.ui-task-row-check[aria-checked="true"] .ui-task-row-ring { background: var(--ui-success); }
.ui-task-row-check[aria-checked="true"] .ui-task-row-ring::before { background: var(--ui-success); }
.ui-task-row-check[aria-checked="true"] svg { opacity: 1; transform: none; }
.ui-task-row-text { flex: 1; min-width: 0; padding: 4px 0; }
/* Inline, so the line through it stops where the words do. */
.ui-task-row-title { overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(currentColor, currentColor) 0 56% / 0 1px no-repeat; transition: background-size .24s, color .2s; }
.ui-task-row-done .ui-task-row-title { background-size: 100% 1px; color: var(--ui-muted); }
.ui-task-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--ui-muted); font-size: 13px; }
.ui-task-row-due[data-tone="late"] { color: var(--ui-danger); font-weight: 600; }
.ui-task-row-due[data-tone="today"] { color: var(--ui-success); font-weight: 600; }
.ui-task-row-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-task-row-icon svg { width: 20px; height: 20px; transition: transform .18s; }
.ui-task-row-icon[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-task-row-icon:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-task-row-count { flex: none; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-task-row-count:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-task-row-more { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 12px 50px; }
.ui-task-row-more button, .ui-task-row-date { min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-task-row-date { min-width: 44px; max-width: 100%; }
.ui-task-row-more button[data-tone="danger"] { border-color: transparent; background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-task-row-more :focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-task-row-subs { margin: 0; padding: 0 10px 8px 50px; list-style: none; }
.ui-task-row-sub { display: flex; align-items: center; gap: 2px; min-height: 44px; }
.ui-task-row-sub .ui-task-row-ring { width: 22px; height: 22px; }
.ui-task-row-sub .ui-task-row-ring::before { width: 18px; height: 18px; }
.ui-task-row-sub .ui-task-row-ring svg { width: 13px; height: 13px; }
.ui-task-row-sub-done { color: var(--ui-muted); text-decoration: line-through; }
.ui-task-row-gone { max-height: 0; opacity: 0; overflow: hidden; }

.ui-task-rows { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-task-rows-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.ui-task-rows-item { min-width: 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-task-rows-head { padding: 14px 6px 6px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font: 600 13px/1.3 var(--ui-font); background: transparent; }
.ui-task-rows-head[data-part="open"] { display: none; }
.ui-task-rows-none { padding: 22px 12px; color: var(--ui-muted); text-align: center; }
.ui-task-rows-bar { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 52px; margin-top: 10px; padding: 4px 6px 4px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); box-shadow: var(--ui-shadow); }
.ui-task-rows-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-task-rows-undo { min-width: 64px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: inherit; font: 700 14px/1 var(--ui-font); text-decoration: underline; cursor: pointer; }
.ui-task-rows-undo:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* On a tablet the finished ones stand in their own column, so a row crosses over. */
@container (min-width: 640px) {
  .ui-task-rows-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 24px; align-items: start; }
  .ui-task-rows-item[data-part="open"], .ui-task-rows-head[data-part="open"], .ui-task-rows-none { grid-column: 1; }
  .ui-task-rows-item[data-part="done"], .ui-task-rows-head[data-part="done"] { grid-column: 2; }
  .ui-task-rows-head[data-part="open"] { display: block; }
}
@media (hover: hover) {
  .ui-task-row-icon:hover, .ui-task-row-count:hover { background: var(--ui-subtle); color: var(--ui-fg); }
  .ui-task-row-more button:hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-task-row-front, .ui-task-row-title, .ui-task-row-ring, .ui-task-row-ring::before, .ui-task-row-ring svg, .ui-task-row-icon svg { transition: none; }
}


.ui-trend-forecast { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-trend-forecast .ui-trend-forecast-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-trend-forecast-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; max-width: 520px; }
.ui-trend-forecast-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.ui-trend-forecast-field input, .ui-trend-forecast-field select { box-sizing: border-box; width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-trend-forecast-field input:focus, .ui-trend-forecast-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-trend-forecast-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-trend-forecast-chart { display: block; width: 100%; max-width: 640px; height: auto; }
.ui-trend-forecast-band { fill: var(--ui-accent); opacity: .16; }
.ui-trend-forecast-history { fill: none; stroke: var(--ui-fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-trend-forecast-ahead { fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-trend-forecast-now { stroke: var(--ui-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-trend-forecast-axis { display: flex; justify-content: space-between; gap: 12px; max-width: 640px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-trend-forecast-live { display: grid; gap: 8px; min-width: 0; }
.ui-trend-forecast-say { margin: 0; font-weight: 600; }
.ui-trend-forecast-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ui-trend-forecast-facts div { min-width: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-trend-forecast-facts dt { color: var(--ui-muted); font-size: 12px; }
.ui-trend-forecast-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-trend-forecast-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-trend-forecast-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-trend-forecast-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-trend-forecast-scroll { max-height: 240px; min-width: 0; overflow: auto; }
.ui-trend-forecast-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-trend-forecast-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-trend-forecast-table th { position: sticky; top: 0; padding: 5px 8px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-trend-forecast-table td { padding: 5px 8px; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-trend-forecast-table th:first-child, .ui-trend-forecast-table td:first-child { text-align: left; }
.ui-trend-forecast-data summary { color: var(--ui-muted); font-size: 13px; cursor: pointer; }
.ui-trend-forecast-data summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-trend-forecast-box { box-sizing: border-box; width: 100%; min-height: 120px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.4 var(--ui-mono); resize: vertical; }
.ui-trend-forecast-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
@media (max-width: 520px) { .ui-trend-forecast-controls, .ui-trend-forecast-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-trend-forecast-table th, .ui-trend-forecast-table td { padding: 5px 4px; } }


.ui-emailtypo { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-emailtypo-label { font-size: 13px; font-weight: 500; }
.ui-emailtypo-req { margin-left: 2px; color: var(--ui-danger); }
.ui-emailtypo-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ui-emailtypo-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-emailtypo-control:hover { border-color: var(--ui-strong); }
.ui-emailtypo-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-emailtypo-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-emailtypo-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-emailtypo-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-emailtypo-out { display: grid; gap: 4px; min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-emailtypo-out p { margin: 0; }
.ui-emailtypo-bad { color: var(--ui-danger); }
.ui-emailtypo-warn { color: var(--ui-warning); }
.ui-emailtypo-good { color: var(--ui-success); }
.ui-emailtypo-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ui-fg); }
.ui-emailtypo-fix, .ui-emailtypo-keep { padding: 0; border: 0; border-radius: 3px; background: none; font: inherit; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.ui-emailtypo-fix { color: var(--ui-accent); font-weight: 600; text-decoration: underline; }
.ui-emailtypo-keep { color: var(--ui-muted); font-size: 12px; }
.ui-emailtypo-fix:focus-visible, .ui-emailtypo-keep:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-emailtypo-control { transition: none; } }


.ui-mention-input { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-mention-input-label { font-size: 13px; font-weight: 500; }
.ui-mention-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-mention-input-box { position: relative; }
.ui-mention-input-box textarea {
  display: block; box-sizing: border-box; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; resize: vertical;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px/1.5 var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-mention-input-box textarea::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-mention-input-box textarea:hover { border-color: var(--ui-strong); }
.ui-mention-input-box textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-mention-input-box textarea:disabled { opacity: .55; cursor: not-allowed; }
.ui-mention-input-pop {
  position: absolute; z-index: 20; top: 100%; left: 0; width: 280px; max-width: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 240px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.ui-mention-input-pop[hidden] { display: none; }
.ui-mention-input-opt { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.ui-mention-input-opt[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-mention-input-avatar {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background: var(--ui-subtle); color: var(--ui-muted); font: 600 11px var(--ui-font); text-transform: uppercase;
}
.ui-mention-input-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-mention-input-who { display: grid; min-width: 0; line-height: 1.25; }
.ui-mention-input-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mention-input-who span { font-size: 12px; color: var(--ui-muted); }
.ui-mention-input-opt[aria-selected="true"] .ui-mention-input-who span { color: var(--ui-accent); }
.ui-mention-input-invalid .ui-mention-input-box textarea { border-color: var(--ui-danger); }
.ui-mention-input-hint, .ui-mention-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-mention-input-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-mention-input-box textarea { transition: none; } }


.ui-spacer { display: block; flex: none; height: var(--ui-spacer, 16px); }
.ui-spacer-h { display: inline-block; width: var(--ui-spacer, 16px); height: auto; align-self: stretch; }
.ui-spacer-grow { flex: 1 1 auto; }


.ui-tree { margin: 0; padding: 4px; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); outline: none; }
.ui-tree-item { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 calc(var(--ui-tree-level) * 18px - 10px);
  border-radius: var(--ui-radius-sm); cursor: pointer; user-select: none; -webkit-user-select: none; outline: none; }
.ui-tree-item:hover { background: var(--ui-subtle); }
.ui-tree-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-tree-item[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 500; }
.ui-tree-chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--ui-muted); }
.ui-tree-chev svg { width: 12px; height: 12px; transition: transform .15s; }
[aria-expanded="true"] > .ui-tree-chev svg { transform: rotate(90deg); }
.ui-tree-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1.5px solid var(--ui-strong); border-radius: 4px; background: var(--ui-surface); color: var(--ui-accent-fg); }
.ui-tree-check svg { width: 10px; height: 10px; }
[aria-checked="true"] > .ui-tree-check, [aria-checked="mixed"] > .ui-tree-check { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tree-meta { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-tree-chev svg { transition: none; } }


.ui-dguard { display: grid; gap: 14px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-dguard-field { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-dguard-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-dguard-mark { margin-left: 6px; color: var(--ui-warning); font-size: 12px; font-weight: 600; }
.ui-dguard-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
textarea.ui-dguard-input { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.ui-dguard-input:hover { border-color: var(--ui-strong); }
.ui-dguard-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-dguard-changed .ui-dguard-input { border-color: var(--ui-warning); }
.ui-dguard-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ui-dguard-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-dguard-check input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dguard-choices { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ui-dguard-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-dguard-panel { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-dguard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ui-dguard-count { margin: 0; font-weight: 600; font-size: 13px; }
.ui-dguard-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-dguard-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ui-dguard-name { font-weight: 600; }
.ui-dguard-was { color: var(--ui-muted); text-decoration: line-through; overflow-wrap: anywhere; }
.ui-dguard-now { overflow-wrap: anywhere; }
.ui-dguard-back { color: var(--ui-muted); font-size: 12px; }
.ui-dguard-grow { flex: 1 1 auto; }
.ui-dguard-btn { height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-dguard-btn:hover { border-color: var(--ui-strong); }
.ui-dguard-btn:focus-visible, .ui-dguard-save:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dguard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-dguard-save { height: 38px; padding: 0 16px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px/1 var(--ui-font); cursor: pointer; }
.ui-dguard-save:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-dguard-said { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-dguard-input { transition: none; } }


.ui-contlist { position: relative; container-type: inline-size; box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-contlist-search { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; box-sizing: border-box; height: 60px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: var(--ui-bg); }
.ui-contlist-field { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 10px; border-radius: var(--ui-radius); background: color-mix(in srgb, var(--ui-fg) 8%, transparent); color: var(--ui-muted); }
.ui-contlist-field:focus-within { box-shadow: var(--ui-focus); }
.ui-contlist-field svg { flex: none; width: 18px; height: 18px; }
/* 16 px: iOS zooms the page into any field with a smaller font. */
.ui-contlist-input { flex: 1; width: 0; min-height: 44px; padding: 0 6px; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }
.ui-contlist-input::-webkit-search-cancel-button { display: none; }
.ui-contlist-clear { flex: none; min-width: 60px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ui-accent); font: 500 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-contlist-found { margin: 0; padding: 0 16px 4px; color: var(--ui-muted); font-size: 13px; }
.ui-contlist-note { position: sticky; top: 60px; z-index: 3; margin: 0 12px 6px; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-info-soft); color: var(--ui-fg); font-size: 14px; }
/* A letter's section makes no box, so the letters stick to the whole list and stack: the next
   slides over the last, and one always stands under the search, where a letter held by its own
   section would be pushed out first and leave a gap at each change of letter. */
.ui-contlist-section { display: contents; }
.ui-contlist-letter { position: sticky; top: 60px; z-index: 2; margin: 0; padding: 3px 16px; background: var(--ui-subtle); color: var(--ui-muted); font: 600 13px/1.4 var(--ui-font); }
.ui-contlist-bare .ui-contlist-letter { top: 0; }
.ui-contlist-rows { margin: 0; padding: 0; list-style: none; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.ui-contlist-row { display: flex; align-items: center; gap: 2px; min-height: 60px; padding: 0 8px 0 0; border-bottom: 1px solid var(--ui-border); }
.ui-contlist-who { display: flex; align-items: center; flex: 1; gap: 12px; box-sizing: border-box; min-width: 0; min-height: 60px; padding: 8px 8px 8px max(16px, env(safe-area-inset-left)); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button.ui-contlist-who { cursor: pointer; }
button.ui-contlist-who:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
.ui-contlist-who:focus-visible, .ui-contlist-act:focus-visible, .ui-contlist-all:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-contlist-text { flex: 1; min-width: 0; }
.ui-contlist-name, .ui-contlist-num { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-contlist-name { font-weight: 500; }
.ui-contlist-num { color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-contlist-act { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; color: var(--ui-accent); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-contlist-act:active { background: var(--ui-accent-soft); }
.ui-contlist-act svg { width: 22px; height: 22px; }
.ui-contlist-all { display: block; min-height: 46px; margin: 12px auto; padding: 0 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-accent); font: 500 15px/1 var(--ui-font); cursor: pointer; }
.ui-contlist-none { margin: 40px 16px; color: var(--ui-muted); text-align: center; }
.ui-contlist-end { height: env(safe-area-inset-bottom); }
@container (min-width: 640px) {
  .ui-contlist-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; padding: 0 8px; }
}
@media (hover: hover) { button.ui-contlist-who:hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } .ui-contlist-act:hover { background: var(--ui-accent-soft); } }


.ui-histc { --ui-histc-1: light-dark(#2a78d6, #3987e5);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-histc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-histc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-histc-y { position: relative; min-width: 24px; }
.ui-histc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-histc-plot { position: relative; }
.ui-histc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-histc-grid.ui-histc-zero { background: var(--ui-strong); }
.ui-histc-bin { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); }
.ui-histc-bin:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-histc-bar { position: absolute; left: 1px; right: 1px; bottom: 0; height: var(--b); background: var(--ui-histc-1); border-radius: 3px 3px 0 0; }
.ui-histc-bin:hover .ui-histc-bar { filter: brightness(1.12); }
.ui-histc-mean { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1.5px dashed var(--ui-fg); pointer-events: none; }
.ui-histc-mean span { position: absolute; top: -2px; left: 5px; padding: 1px 4px; border-radius: 4px; background: var(--ui-bg);
  color: var(--ui-fg); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-histc-tip { position: absolute; z-index: 20; bottom: calc(var(--b) + 6px); left: 50%; display: none; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-muted); font-size: 12px; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.ui-histc-tip strong { display: block; margin-bottom: 3px; color: var(--ui-fg); font-weight: 600; }
.ui-histc-tip b { padding-left: 10px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-histc-tip i { padding-left: 6px; font-style: normal; }
.ui-histc-first .ui-histc-tip { left: 0; transform: none; }
.ui-histc-last .ui-histc-tip { left: auto; right: 0; transform: none; }
.ui-histc-bin:hover .ui-histc-tip { display: block; }
.ui-histc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-histc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-histc-x span:first-child { transform: none; }
.ui-histc-x .ui-histc-end { transform: translateX(-100%); }


.demo-three-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-three-frame { width: 100%; height: 100%; margin: 0 auto; }


.ui-bottomnav {
  display: flex; justify-content: space-around; align-items: stretch; width: 100%; min-height: 56px;
  padding: 4px 8px max(4px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-bg);
  color: var(--ui-fg); font: 11px/1.2 var(--ui-font);
}
.ui-bottomnav-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-shadow: var(--ui-shadow); }
.ui-bottomnav-item {
  position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  max-width: 120px; min-width: 48px; padding: 6px 4px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-muted); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: color .12s;
}
.ui-bottomnav-item:hover { color: var(--ui-fg); }
.ui-bottomnav-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bottomnav-item[aria-current="page"] { color: var(--ui-accent); }
.ui-bottomnav-icon { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: 20px; line-height: 1; border-radius: 999px; transition: background .12s; }
.ui-bottomnav-icon svg { width: 24px; height: 24px; }
.ui-bottomnav-item[aria-current="page"] .ui-bottomnav-icon { background: var(--ui-accent-soft); }
.ui-bottomnav-badge {
  position: absolute; top: -4px; left: 100%; margin-left: -10px; min-width: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--ui-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.ui-bottomnav-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bottomnav-bare .ui-bottomnav-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (min-width: 720px) { .ui-bottomnav-fixed:not(.ui-bottomnav-wide) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-bottomnav-item, .ui-bottomnav-icon { transition: none; } }


.ui-break-even { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 640px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-break-even .ui-break-even-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-break-even-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 14px; }
.ui-break-even-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-break-even-field label { font-size: 13px; font-weight: 500; }
.ui-break-even-field input { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-break-even-field input:hover { border-color: var(--ui-strong); }
.ui-break-even-field input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-break-even-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-break-even-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-break-even-out { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-break-even-never { margin: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-weight: 600; }
.ui-break-even-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; }
.ui-break-even-sums dt { color: var(--ui-muted); }
.ui-break-even-sums dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-break-even-main { color: var(--ui-fg) !important; font-size: 16px; font-weight: 700; }
.ui-break-even-note { margin: 0; font-size: 13px; }
.ui-break-even-chart { display: block; width: 100%; height: auto; max-height: 220px; }
.ui-break-even-axis { stroke: var(--ui-strong); stroke-width: 1; }
.ui-break-even-revenue { fill: none; stroke: var(--ui-accent); stroke-width: 2; }
.ui-break-even-cost { fill: none; stroke: var(--ui-warning); stroke-width: 2; }
.ui-break-even-fixed { fill: none; stroke: var(--ui-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.ui-break-even-dot { fill: var(--ui-fg); }
.ui-break-even-plan { stroke: var(--ui-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.ui-break-even-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-break-even-key li { display: inline-flex; align-items: center; gap: 6px; }
.ui-break-even-key i { width: 14px; height: 0; border-top: 2px solid var(--ui-accent); }
.ui-break-even-key li + li i { border-top-color: var(--ui-warning); }


.ui-quantity-input { display: grid; gap: 6px; min-width: 0; width: fit-content; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-quantity-input-label { font-size: 13px; font-weight: 500; }
.ui-quantity-input-box {
  display: inline-flex; align-items: center; height: 36px; padding: 2px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); transition: border-color .15s, box-shadow .15s;
}
.ui-quantity-input-box:hover { border-color: var(--ui-strong); }
.ui-quantity-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-quantity-input-btn {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-subtle); color: var(--ui-fg); cursor: pointer; transition: background .15s, color .15s;
}
.ui-quantity-input-btn svg { width: 12px; height: 12px; }
.ui-quantity-input-btn:hover:not(:disabled) { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-quantity-input-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-quantity-input-btn:disabled { opacity: .4; cursor: not-allowed; }
.ui-quantity-input-box input {
  width: 3.2em; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; text-align: center;
  color: var(--ui-fg); font: 600 15px var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-quantity-input-sm .ui-quantity-input-box { height: 28px; }
.ui-quantity-input-sm .ui-quantity-input-btn { width: 22px; height: 22px; }
.ui-quantity-input-sm .ui-quantity-input-box input { width: 2.6em; font-size: 13px; }
.ui-quantity-input-lg .ui-quantity-input-box { height: 46px; padding: 3px; }
.ui-quantity-input-lg .ui-quantity-input-btn { width: 38px; height: 38px; }
.ui-quantity-input-lg .ui-quantity-input-box input { width: 3.6em; font-size: 18px; }
.ui-quantity-input-invalid .ui-quantity-input-box { border-color: var(--ui-danger); }
.ui-quantity-input-disabled { opacity: .55; }
.ui-quantity-input-hint, .ui-quantity-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-quantity-input-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-quantity-input-box, .ui-quantity-input-btn { transition: none; } }


.ui-autocomplete { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-autocomplete-label { font-size: 13px; font-weight: 500; }
.ui-autocomplete-req { margin-left: 2px; color: var(--ui-danger); }
.ui-autocomplete-box { position: relative; }
.ui-autocomplete-box input {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
.ui-autocomplete-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-autocomplete-box input:hover { border-color: var(--ui-strong); }
.ui-autocomplete-box input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-autocomplete-box input:disabled { opacity: .55; cursor: not-allowed; }
.ui-autocomplete-pop {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 240px; overflow: auto;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.ui-autocomplete-pop[hidden] { display: none; }
.ui-autocomplete-opt { padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.ui-autocomplete-opt[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-autocomplete-opt mark { background: none; color: inherit; font-weight: 600; }
.ui-autocomplete-sm .ui-autocomplete-box input { height: 30px; padding: 0 10px; font-size: 13px; }
.ui-autocomplete-sm .ui-autocomplete-opt { padding: 5px 8px; font-size: 13px; }
.ui-autocomplete-invalid .ui-autocomplete-box input { border-color: var(--ui-danger); }
.ui-autocomplete-hint, .ui-autocomplete-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-autocomplete-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-autocomplete-box input { transition: none; } }


.ui-risk-matrix { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-risk-matrix .ui-risk-matrix-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-risk-matrix-grid { width: 100%; max-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.ui-risk-matrix-grid th { padding: 2px 4px; color: var(--ui-muted); font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.ui-risk-matrix-grid thead th { text-align: center; vertical-align: bottom; }
.ui-risk-matrix-grid tbody th { width: 62px; text-align: right; }
.ui-risk-matrix-short { display: none; }
.ui-risk-matrix-cell { position: relative; height: 58px; padding: 16px 3px 3px; border-radius: var(--ui-radius-sm); vertical-align: top; cursor: pointer; }
.ui-risk-matrix-cell:focus { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-risk-matrix-cell[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--ui-fg); }
.ui-risk-matrix-b0 { background: var(--ui-success-soft); }
.ui-risk-matrix-b1 { background: var(--ui-warning-soft); }
.ui-risk-matrix-b2 { background: color-mix(in srgb, var(--ui-warning) 22%, var(--ui-warning-soft)); }
.ui-risk-matrix-b3 { background: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-danger-soft)); }
.ui-risk-matrix-corner { position: absolute; top: 2px; right: 5px; color: var(--ui-fg); font-size: 10px; font-variant-numeric: tabular-nums; }
.ui-risk-matrix-chips { display: flex; flex-wrap: wrap; gap: 2px; }
.ui-risk-matrix-chip { padding: 0 4px; border: 1px solid var(--ui-fg); border-radius: 4px; background: var(--ui-fg); color: var(--ui-bg); font-size: 11px; font-weight: 600; line-height: 16px; }
.ui-risk-matrix-after { background: transparent; color: var(--ui-fg); border-style: dashed; }
.ui-risk-matrix-held { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-risk-matrix-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-risk-matrix-key li { display: inline-flex; align-items: center; gap: 6px; }
.ui-risk-matrix-live { display: grid; gap: 6px; min-width: 0; }
.ui-risk-matrix-say { margin: 0; color: var(--ui-muted); font-size: 13px; min-height: 19px; }
.ui-risk-matrix-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-risk-matrix-scroll { position: relative; min-width: 0; overflow-x: auto; }
.ui-risk-matrix-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-risk-matrix-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.ui-risk-matrix-table th { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.ui-risk-matrix-table td { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-risk-matrix-band { padding: 0 6px; border-radius: 4px; color: var(--ui-fg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ui-risk-matrix-worse { display: block; color: var(--ui-danger); font-size: 12px; }
.ui-risk-matrix-muted { color: var(--ui-muted); }
.ui-risk-matrix-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-risk-matrix-button { min-height: 28px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 12px var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-risk-matrix-button:hover { border-color: var(--ui-strong); }
.ui-risk-matrix-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-risk-matrix-button[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-risk-matrix-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 480px) { .ui-risk-matrix-grid tbody th { width: 16px; } .ui-risk-matrix-cell { height: 48px; }
  .ui-risk-matrix-long { display: none; } .ui-risk-matrix-short { display: inline; } }


.ui-compound-calc { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 720px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-compound-calc .ui-compound-calc-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-compound-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
.ui-compound-calc-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-compound-calc-field label { font-size: 13px; font-weight: 500; }
.ui-compound-calc-field input, .ui-compound-calc-field select { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-compound-calc-field input:hover, .ui-compound-calc-field select:hover { border-color: var(--ui-strong); }
.ui-compound-calc-field input:focus, .ui-compound-calc-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-compound-calc-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-compound-calc-timing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.ui-compound-calc-timing legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-compound-calc-timing label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-compound-calc-timing input { margin: 0; accent-color: var(--ui-accent); }
.ui-compound-calc-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-compound-calc-out { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-compound-calc-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 0; }
.ui-compound-calc-sums dt { color: var(--ui-muted); font-size: 12px; }
.ui-compound-calc-sums dd { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-compound-calc-needed, .ui-compound-calc-note { margin: 0; font-size: 13px; }
.ui-compound-calc-note { color: var(--ui-warning); }
.ui-compound-calc-scroll { max-height: 320px; overflow: auto; }
.ui-compound-calc-scroll:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-compound-calc-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-compound-calc-table th { position: sticky; top: 0; padding: 4px 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-compound-calc-table td { padding: 4px 0; border-bottom: 1px solid var(--ui-border); text-align: right; }
.ui-compound-calc-table th + th, .ui-compound-calc-table td + td { padding-left: 10px; }
.ui-compound-calc-table th:first-child, .ui-compound-calc-table td:first-child { text-align: left; }
.ui-compound-calc-table td:nth-child(4) { font-weight: 600; }


.ui-permission-checklist { position: relative; display: grid; gap: 14px; min-width: 0; container: ui-permission-checklist / inline-size; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-permission-checklist-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-permission-checklist-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 14px; min-width: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
}
.ui-permission-checklist-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-permission-checklist-icon svg { width: 24px; height: 24px; }
.ui-permission-checklist-row[data-state="allowed"] .ui-permission-checklist-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-permission-checklist-row[data-state="refused"] .ui-permission-checklist-icon { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-permission-checklist-row[data-state="none"] .ui-permission-checklist-icon { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-permission-checklist-text { min-width: 0; }
.ui-permission-checklist-text h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 16px; line-height: 1.3; }
.ui-permission-checklist-state { color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-permission-checklist-row[data-state="allowed"] .ui-permission-checklist-state { color: var(--ui-success); }
.ui-permission-checklist-row[data-state="refused"] .ui-permission-checklist-state { color: var(--ui-danger); }
.ui-permission-checklist-reason, .ui-permission-checklist-help { margin: 3px 0 0; color: var(--ui-muted); font-size: 14px; overflow-wrap: anywhere; }
.ui-permission-checklist-needed { color: var(--ui-warning); font-size: 12px; font-weight: 600; }
.ui-permission-checklist-act { grid-column: 2; min-width: 0; }
.ui-permission-checklist-foot { display: grid; gap: 8px; }
.ui-permission-checklist-count, .ui-permission-checklist-missing { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-permission-checklist-missing { color: var(--ui-warning); }
@container ui-permission-checklist (min-width: 560px) {
  .ui-permission-checklist-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-permission-checklist-foot { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); align-items: center; }
}


.ui-svfeed { position: relative; height: var(--ui-svfeed-height, 100dvh); min-width: 0; overflow: hidden; container: ui-svfeed / size; background: #000; color: #fff; font: 14px/1.35 var(--ui-font); }
/* The browser does the swipe: stop on every clip, and leave the page out of it. */
.ui-svfeed-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; touch-action: pan-y; }
.ui-svfeed-scroll::-webkit-scrollbar { display: none; }
.ui-svfeed-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-svfeed-slide { position: relative; display: flex; justify-content: center; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.ui-svfeed-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ui-svfeed-stage video, .ui-svfeed-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ui-svfeed-cap {
  position: absolute; left: 0; right: 64px; bottom: 0; padding: 40px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); pointer-events: none;
}
.ui-svfeed-cap h3, .ui-svfeed-info h3 { margin: 0; font-size: 16px; font-weight: 650; }
.ui-svfeed-cap p, .ui-svfeed-info p { margin: 2px 0 0; opacity: .85; }
.ui-svfeed-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); pointer-events: none; }
.ui-svfeed-line i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.ui-svfeed-big {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 600 14px var(--ui-font); transform: translate(-50%, -50%); cursor: pointer; touch-action: manipulation;
}
.ui-svfeed-big svg { width: 38px; height: 38px; }
.ui-svfeed-big:focus-visible, .ui-svfeed-tool:focus-visible, .ui-svfeed-chip:focus-visible, .ui-svfeed-up:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ui-svfeed-heart { position: absolute; top: 50%; left: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: #fff; opacity: 0; pointer-events: none; }
.ui-svfeed-beat { animation: ui-svfeed-beat .7s ease-out; }
@keyframes ui-svfeed-beat { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .95; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1); } }
.ui-svfeed-bad { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; justify-items: center; padding: 24px; background: rgba(0, 0, 0, .7); text-align: center; }
.ui-svfeed-bad p { margin: 0; }
.ui-svfeed-busy { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: ui-svfeed-spin .9s linear infinite; pointer-events: none; }
@keyframes ui-svfeed-spin { to { transform: rotate(360deg); } }
.ui-svfeed-rail {
  position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; justify-items: center; z-index: 2;
}
.ui-svfeed-tool {
  display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font: 600 11px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-svfeed-tool:disabled { opacity: .4; cursor: default; }
.ui-svfeed-tool svg { width: 24px; height: 24px; }
.ui-svfeed-tool[aria-pressed="true"] svg { color: #ff5c7a; }
.ui-svfeed-count { margin-top: -4px; font-size: 12px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.ui-svfeed-chip { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font: 600 13px var(--ui-font); transform: translateX(-50%); cursor: pointer; z-index: 2; white-space: nowrap; }
.ui-svfeed-info { display: none; }
@media (hover: hover) { .ui-svfeed-tool:hover:not(:disabled) { background: rgba(0, 0, 0, .7); } }
/* A wide box: the clip keeps its upright shape, and the room beside it says what comes next. */
@container ui-svfeed (min-width: 640px) {
  .ui-svfeed-slide { align-items: center; gap: 24px; padding: 0 16px; box-sizing: border-box; }
  .ui-svfeed-stage { flex: none; width: min(58cqw, 56.25cqh); height: auto; aspect-ratio: 9 / 16; border-radius: 14px; }
  .ui-svfeed-cap { display: none; }
  .ui-svfeed-info { display: grid; align-content: center; flex: 0 1 300px; gap: 12px; min-width: 0; padding-right: 64px; }
  .ui-svfeed-next { display: grid; gap: 6px; }
  .ui-svfeed-next b { font-size: 13px; opacity: .7; }
}
.ui-svfeed-up { display: block; width: 100%; min-height: 48px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { .ui-svfeed-beat { animation: none; } .ui-svfeed-busy { animation: none; } }


.ui-pod { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-pod h3 { margin: 0; font-size: 18px; }
.ui-pod-head { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overflow-wrap: anywhere; }
.ui-pod-head b { font-size: 16px; }
.ui-pod-head small { color: var(--ui-muted); font-size: 14px; }
.ui-pod-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-pod-dots li { flex: 1; height: 6px; border-radius: 999px; background: var(--ui-subtle); }
.ui-pod-dots li[data-done] { background: var(--ui-accent); }
.ui-pod-flow { display: grid; gap: 12px; min-width: 0; }
.ui-pod-step { display: none; gap: 10px; min-width: 0; align-content: start; }
.ui-pod-step[data-now] { display: grid; }
.ui-pod-step h4 { margin: 0; font-size: 17px; outline: none; }
.ui-pod-why { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-pod-opts { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-pod-opt { position: relative; display: grid; align-content: center; min-height: 60px; padding: 6px 14px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-weight: 600; cursor: pointer; touch-action: manipulation; }
.ui-pod-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-pod-opt:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-pod-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-pod-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-pod-chips .ui-pod-opt { min-height: 46px; padding: 0 14px; }
.ui-pod-label { display: grid; gap: 2px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
/* 16 px: anything smaller and iOS zooms the page when the field is touched. */
.ui-pod-label input, .ui-pod-label textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }
.ui-pod-label input:focus, .ui-pod-label textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
/* The pad's own controls are made for a mouse, and here a finger has them. */
.ui-pod .ui-signature-pad { width: 100%; }
.ui-pod .ui-signature-pad-btn, .ui-pod .ui-signature-pad-link { min-width: 44px; min-height: 44px; }
.ui-pod .ui-signature-pad-typed { height: 44px; font-size: 16px; }
.ui-pod-place { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 14px/1.4 var(--ui-mono); overflow-wrap: anywhere; }
.ui-pod-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-weight: 600; }
.ui-pod-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-pod-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-pod-list li[data-open] { background: var(--ui-danger-soft); font-weight: 600; }
.ui-pod-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; position: sticky; bottom: 0; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: var(--ui-bg); }
.ui-pod-receipt { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
.ui-pod-receipt h4 { margin: 0; font-size: 18px; }
.ui-pod-ref { margin: 0; font: 700 17px var(--ui-mono); overflow-wrap: anywhere; }
.ui-pod-receipt pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 var(--ui-mono); }
.ui-pod-receipt img.ui-pod-sign { display: block; max-width: 100%; max-height: 140px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: #fff; }
.ui-pod-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-pod-acts > * { flex: 1 1 140px; }
.ui-pod-said { margin: 0; font-weight: 600; }
.ui-pod-said:empty { display: none; }
@container (min-width: 700px) {
  .ui-pod-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
  .ui-pod-step[data-on] { display: grid; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
  .ui-pod-step[data-kind="review"] { grid-column: 1 / -1; }
  .ui-pod-dots, .ui-pod-nav { display: none; }
}


.ui-loan-eligibility { container-type: inline-size; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-loan-eligibility-grid { display: grid; }
@container (min-width: 640px) { .ui-loan-eligibility-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ui-loan-eligibility-form { display: grid; gap: 14px; align-content: start; padding: 20px 22px; }
.ui-loan-eligibility-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-loan-eligibility-field { display: grid; gap: 6px; }
.ui-loan-eligibility-field label { font-size: 13px; font-weight: 500; }
.ui-loan-eligibility-field small { color: var(--ui-muted); font-size: 12px; }
.ui-loan-eligibility-box { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-bg); transition: border-color .15s, box-shadow .15s; }
.ui-loan-eligibility-box:hover { border-color: var(--ui-strong); }
.ui-loan-eligibility-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-loan-eligibility-box span { color: var(--ui-muted); font-size: 13px; }
.ui-loan-eligibility-box input, .ui-loan-eligibility-box select { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
  background: transparent; color: var(--ui-fg); font: 500 15px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-loan-eligibility-box select { cursor: pointer; }
.ui-loan-eligibility-result { display: grid; gap: 14px; align-content: start; padding: 20px 22px; border-top: 1px solid var(--ui-border);
  background: var(--ui-subtle); border-radius: 0 0 var(--ui-radius) var(--ui-radius); --ui-loan-eligibility-tone: var(--ui-muted); }
@container (min-width: 640px) { .ui-loan-eligibility-result { border-top: 0; border-left: 1px solid var(--ui-border); border-radius: 0 var(--ui-radius) var(--ui-radius) 0; } }
.ui-loan-eligibility-likely { --ui-loan-eligibility-tone: var(--ui-success); }
.ui-loan-eligibility-maybe { --ui-loan-eligibility-tone: var(--ui-warning); }
.ui-loan-eligibility-unlikely { --ui-loan-eligibility-tone: var(--ui-danger); }
.ui-loan-eligibility-verdict { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.ui-loan-eligibility-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 15px;
  background: color-mix(in srgb, var(--ui-loan-eligibility-tone) 16%, transparent); color: var(--ui-loan-eligibility-tone); }
.ui-loan-eligibility-reach { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; padding: 12px 14px; border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); border: 1px solid var(--ui-border); }
.ui-loan-eligibility-reach dt { color: var(--ui-muted); }
.ui-loan-eligibility-reach dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-loan-eligibility-reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-loan-eligibility-reasons li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.ui-loan-eligibility-reasons li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--ui-success-soft); color: var(--ui-success); font-size: 11px; font-weight: 700; }
.ui-loan-eligibility-reasons li[data-good="false"]::before { content: "!"; background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-loan-eligibility-empty { margin: 0; color: var(--ui-muted); }
.ui-loan-eligibility-note { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-loan-eligibility-apply { justify-self: start; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; text-decoration: none; }
.ui-loan-eligibility-apply:hover { filter: brightness(1.08); }
.ui-loan-eligibility-apply:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-scroll {
  position: relative; max-height: var(--ui-scroll-h, none); max-width: var(--ui-scroll-w, none); min-width: 0;
  overflow: hidden auto; overscroll-behavior: contain; padding: var(--ui-scroll-pad, 0); outline: none;
  border-radius: var(--ui-radius-sm); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-scroll-x { overflow: auto hidden; }
.ui-scroll-both { overflow: auto; }
.ui-scroll-thin { scrollbar-width: thin; scrollbar-color: var(--ui-strong) transparent; }
.ui-scroll:focus-visible { box-shadow: var(--ui-focus); }
.ui-scroll-fade { position: sticky; z-index: 1; display: block; pointer-events: none; opacity: 0; }
.ui-scroll-top, .ui-scroll-bottom { left: 0; right: 0; height: 0; }
.ui-scroll-top { top: 0; }
.ui-scroll-bottom { bottom: 0; }
.ui-scroll-top::before, .ui-scroll-bottom::before { content: ""; position: absolute; left: 0; right: 0; height: 28px; }
.ui-scroll-top::before { top: 0; background: linear-gradient(var(--ui-scroll-bg, var(--ui-bg)), transparent); }
.ui-scroll-bottom::before { bottom: 0; background: linear-gradient(transparent, var(--ui-scroll-bg, var(--ui-bg))); }
.ui-scroll-start, .ui-scroll-end { top: 0; bottom: 0; width: 0; height: 0; float: left; }
.ui-scroll-start { left: 0; }
.ui-scroll-end { right: 0; float: right; }
.ui-scroll-start::before, .ui-scroll-end::before { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; }
.ui-scroll-start::before { left: 0; background: linear-gradient(to right, var(--ui-scroll-bg, var(--ui-bg)), transparent); }
.ui-scroll-end::before { right: 0; background: linear-gradient(to left, var(--ui-scroll-bg, var(--ui-bg)), transparent); }
@supports (animation-timeline: scroll()) {
  .ui-scroll-top { animation: ui-scroll-show linear both; animation-timeline: scroll(nearest block); animation-range: 0 40px; }
  .ui-scroll-bottom { animation: ui-scroll-hide linear both; animation-timeline: scroll(nearest block); animation-range: calc(100% - 40px) 100%; }
  .ui-scroll-start { animation: ui-scroll-show linear both; animation-timeline: scroll(nearest inline); animation-range: 0 40px; }
  .ui-scroll-end { animation: ui-scroll-hide linear both; animation-timeline: scroll(nearest inline); animation-range: calc(100% - 40px) 100%; }
}
@keyframes ui-scroll-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-scroll-hide { from { opacity: 1; } to { opacity: 0; } }


.ui-contactpaste { display: grid; gap: 12px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-contactpaste-label { font-size: 13px; font-weight: 500; }
.ui-contactpaste-source { display: grid; gap: 6px; min-width: 0; }
.ui-contactpaste-box { box-sizing: border-box; width: 100%; min-height: 120px; margin: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-font); resize: vertical; transition: border-color .15s, box-shadow .15s; }
.ui-contactpaste-box::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-contactpaste-box:hover { border-color: var(--ui-strong); }
.ui-contactpaste-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-contactpaste-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-contactpaste-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-contactpaste-again { padding: 0; border: 0; border-radius: 3px; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; text-decoration: underline; }
.ui-contactpaste-again:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-contactpaste-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 14px; }
.ui-contactpaste-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.ui-contactpaste-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.ui-contactpaste-tag { font-size: 11px; font-weight: 600; color: var(--ui-muted); }
.ui-contactpaste-tag[data-sure="high"] { color: var(--ui-success); }
.ui-contactpaste-tag[data-sure="medium"] { color: var(--ui-info); }
.ui-contactpaste-tag[data-sure="low"] { color: var(--ui-warning); }
.ui-contactpaste-control { box-sizing: border-box; width: 100%; height: 36px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font); transition: border-color .15s, box-shadow .15s; }
.ui-contactpaste-control:hover { border-color: var(--ui-strong); }
.ui-contactpaste-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-contactpaste-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-contactpaste-low .ui-contactpaste-control { border-style: dashed; }
.ui-contactpaste-why { margin: 0; font-size: 12px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-contactpaste-use { padding: 0; border: 0; border-radius: 3px; background: none; color: var(--ui-accent); font: 500 12px var(--ui-font); text-align: left; cursor: pointer;
  text-decoration: underline; overflow-wrap: anywhere; }
.ui-contactpaste-use:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-contactpaste-box, .ui-contactpaste-control { transition: none; } }


.ui-checkout-steps { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font: 14px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-checkout-step { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-checkout-step a { display: inherit; align-items: inherit; gap: inherit; color: inherit; text-decoration: none; border-radius: var(--ui-radius-sm); }
.ui-checkout-step a:hover .ui-checkout-label { color: var(--ui-accent); text-decoration: underline; }
.ui-checkout-step a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-checkout-mark { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ui-border);
  background: var(--ui-surface); color: var(--ui-muted); font: 600 12px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-checkout-mark svg { width: 13px; height: 13px; }
.ui-checkout-done .ui-checkout-mark { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-checkout-current .ui-checkout-mark { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-checkout-label { font-weight: 500; white-space: nowrap; }
.ui-checkout-coming .ui-checkout-label { color: var(--ui-muted); font-weight: 400; }
.ui-checkout-current .ui-checkout-label { color: var(--ui-accent); }
.ui-checkout-sep { flex: 1 1 24px; min-width: 16px; height: 2px; margin: 0 10px; border-radius: 2px; background: var(--ui-border); }
.ui-checkout-sep-done { background: var(--ui-accent); }
.ui-checkout-dots .ui-checkout-mark { width: 12px; height: 12px; border-width: 2px; font-size: 0; }
.ui-checkout-dots .ui-checkout-mark svg { display: none; }
@media (max-width: 600px) { .ui-checkout-step:not(.ui-checkout-current) .ui-checkout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }


.ui-stream {
  --ui-stream-1: light-dark(#2a78d6, #3987e5); --ui-stream-2: light-dark(#eb6834, #d95926);
  --ui-stream-3: light-dark(#1baf7a, #199e70); --ui-stream-4: light-dark(#eda100, #c98500);
  --ui-stream-5: light-dark(#e87ba4, #d55181); --ui-stream-6: light-dark(#008300, #008300);
  --ui-stream-7: light-dark(#6250d6, #9085e9); --ui-stream-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg);
  container-type: inline-size; }
.ui-stream-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-stream-s1 { --c: var(--ui-stream-1); } .ui-stream-s2 { --c: var(--ui-stream-2); } .ui-stream-s3 { --c: var(--ui-stream-3); }
.ui-stream-s4 { --c: var(--ui-stream-4); } .ui-stream-s5 { --c: var(--ui-stream-5); } .ui-stream-s6 { --c: var(--ui-stream-6); }
.ui-stream-s7 { --c: var(--ui-stream-7); } .ui-stream-s8 { --c: var(--ui-stream-8); }
.ui-stream-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-stream-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-stream-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-stream-plot { position: relative; margin-top: 4px; }
.ui-stream-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-stream-layer { fill: var(--c); fill-opacity: .85; stroke: var(--ui-bg); stroke-width: .75; transition: fill-opacity .15s ease; }
.ui-stream-centre { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ui-bg); opacity: .7; }
.ui-stream-cols { position: absolute; inset: 0; display: flex; }
.ui-stream-col { position: relative; flex: 1; min-width: 0; }
.ui-stream-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; background: var(--ui-fg); opacity: 0; }
.ui-stream-col:first-child:not(:last-child) { flex: .5; --x: 0%; }
.ui-stream-col:last-child:not(:first-child) { flex: .5; --x: 100%; }
.ui-stream-col:hover::before { opacity: .5; }
.ui-stream-col:hover .ui-stream-tip { display: block; }
.ui-stream-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-stream-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-stream-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-stream-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-stream-tip { top: 0; left: calc(var(--x, 50%) + 10px); }
.ui-stream-flip .ui-stream-tip { left: auto; right: calc(100% - var(--x, 50%) + 10px); }
.ui-stream-tip .ui-stream-key { width: 8px; height: 8px; }
.ui-stream-tip .ui-stream-sum { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ui-border); }
.ui-stream-x { position: relative; height: 16px; margin-top: 6px; }
.ui-stream-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-stream-x .ui-stream-first { transform: none; }
.ui-stream-x .ui-stream-last { transform: translateX(-100%); }
@container (max-width: 520px) { .ui-stream-x .ui-stream-alt { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-stream-layer { transition: none; } }


.ui-chat-widget { position: fixed; z-index: 45; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font: 14px/1.45 var(--ui-font); }
.ui-chat-widget-bottom-left { right: auto; left: max(20px, env(safe-area-inset-left)); align-items: flex-start; }
.ui-chat-widget-inline { position: absolute; z-index: 2; right: 16px; bottom: 16px; }
.ui-chat-widget-inline.ui-chat-widget-bottom-left { right: auto; left: 16px; }
.ui-chat-widget-bubble {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); box-shadow: var(--ui-shadow-lg); cursor: pointer; transition: transform .15s;
}
.ui-chat-widget-bubble:hover { transform: translateY(-1px); }
.ui-chat-widget-bubble:focus-visible { outline: none; box-shadow: var(--ui-shadow-lg), var(--ui-focus); }
.ui-chat-widget-bubble svg { width: 26px; height: 26px; }
.ui-chat-widget-count {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border: 2px solid var(--ui-bg);
  border-radius: 999px; background: var(--ui-danger); color: #fff; font: 700 11px/16px var(--ui-font);
}
.ui-chat-widget-panel {
  display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); height: min(480px, calc(100dvh - 120px));
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); animation: ui-chat-widget-in .16s ease-out;
}
.ui-chat-widget-panel[hidden] { display: none; }
@keyframes ui-chat-widget-in { from { opacity: 0; transform: translateY(8px); } }
.ui-chat-widget-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 12px 10px 12px 16px; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-chat-widget-who { flex: 1; min-width: 0; }
.ui-chat-widget-who h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-chat-widget-who p { margin: 0; font-size: 12px; opacity: .85; }
.ui-chat-widget-x {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: inherit; cursor: pointer;
}
.ui-chat-widget-x:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.ui-chat-widget-x:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ui-chat-widget-x svg { width: 18px; height: 18px; }
.ui-chat-widget-log { display: flex; flex-direction: column-reverse; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ui-chat-widget-list { display: grid; gap: 6px; margin: 0; padding: 14px; list-style: none; }
.ui-chat-widget-msg { display: grid; justify-items: start; }
.ui-chat-widget-mine { justify-items: end; }
.ui-chat-widget-from { margin: 0 0 2px 10px; color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-chat-widget-text {
  max-width: 82%; padding: 7px 12px; border-radius: 16px; background: var(--ui-subtle); color: var(--ui-fg);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ui-chat-widget-mine .ui-chat-widget-text { border-bottom-right-radius: 5px; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-chat-widget-msg:not(.ui-chat-widget-mine) .ui-chat-widget-text { border-bottom-left-radius: 5px; }
.ui-chat-widget-typing { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 16px; background: var(--ui-subtle); }
.ui-chat-widget-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-muted); animation: ui-chat-widget-dot 1s infinite ease-in-out; }
.ui-chat-widget-typing span:nth-child(2) { animation-delay: .15s; }
.ui-chat-widget-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ui-chat-widget-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.ui-chat-widget-form { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 10px; border-top: 1px solid var(--ui-border); }
.ui-chat-widget-input {
  flex: 1; min-width: 0; max-height: 120px; margin: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 18px;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); resize: none; field-sizing: content;
}
.ui-chat-widget-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-chat-widget-send {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); cursor: pointer;
}
.ui-chat-widget-send:disabled { opacity: .45; cursor: not-allowed; }
.ui-chat-widget-send:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chat-widget-send svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .ui-chat-widget-panel, .ui-chat-widget-typing span { animation: none; } .ui-chat-widget-bubble { transition: none; }
}


.ui-vtabs { display: grid; grid-template-columns: var(--ui-vtabs-w, 220px) minmax(0, 1fr); gap: 28px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-vtabs-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border-right: 1px solid var(--ui-border); }
.ui-vtabs-tab {
  display: flex; align-items: center; gap: 10px; margin-right: -1px; padding: 9px 12px; border: 0; border-right: 2px solid transparent;
  border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: inherit;
  text-align: left; cursor: pointer; transition: color .12s, background .12s, border-color .12s;
}
.ui-vtabs-tab:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-vtabs-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-vtabs-tab[aria-selected="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); border-right-color: var(--ui-accent); }
.ui-vtabs-tab:disabled { opacity: .5; cursor: not-allowed; }
.ui-vtabs-icon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; font-size: 18px; line-height: 1; }
.ui-vtabs-icon svg { width: 20px; height: 20px; }
.ui-vtabs-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ui-vtabs-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-vtabs-hint { color: var(--ui-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-vtabs-badge {
  flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ui-subtle); border: 1px solid var(--ui-border);
  color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: center;
}
.ui-vtabs-tab[aria-selected="true"] .ui-vtabs-badge { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-vtabs-panel { min-width: 0; }
.ui-vtabs-panel > :first-child { margin-top: 0; }
.ui-vtabs-panel > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .ui-vtabs { grid-template-columns: 1fr; gap: 16px; }
  .ui-vtabs-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-border); scrollbar-width: none; }
  .ui-vtabs-list::-webkit-scrollbar { display: none; }
  .ui-vtabs-tab { flex: none; margin: 0 0 -1px; border-right: 0; border-bottom: 2px solid transparent; border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; }
  .ui-vtabs-tab[aria-selected="true"] { border-bottom-color: var(--ui-accent); }
  .ui-vtabs-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-vtabs-tab { transition: none; } }


.ui-cohort-table { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-cohort-table .ui-cohort-table-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-cohort-table-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.ui-cohort-table-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.ui-cohort-table-group legend { float: left; margin-right: 6px; padding: 0; color: var(--ui-muted); }
.ui-cohort-table-group label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ui-cohort-table-group input { margin: 0; accent-color: var(--ui-accent); }
.ui-cohort-table-scroll { position: relative; min-width: 0; overflow-x: auto; }
.ui-cohort-table-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cohort-table-table { border-collapse: separate; border-spacing: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-cohort-table-table th { padding: 5px 8px; color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.ui-cohort-table-table th:first-child { position: sticky; left: 0; background: var(--ui-surface); text-align: left; }
.ui-cohort-table-table td { min-width: 52px; padding: 5px 8px; border-radius: 4px; text-align: right; white-space: nowrap; }
.ui-cohort-table-size { color: var(--ui-muted); }
.ui-cohort-table-open { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--ui-border) 45%, transparent) 4px 5px); }
.ui-cohort-table-average th, .ui-cohort-table-average td { border-top: 1px solid var(--ui-strong); font-weight: 600; }
.ui-cohort-table-say { margin: 0; font-size: 13px; }
.ui-cohort-table-note { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-cohort-table-warn { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }


.ui-radarc {
  --ui-radarc-1: light-dark(#2a78d6, #3987e5); --ui-radarc-2: light-dark(#eb6834, #d95926);
  --ui-radarc-3: light-dark(#1baf7a, #199e70); --ui-radarc-4: light-dark(#eda100, #c98500);
  --ui-radarc-5: light-dark(#e87ba4, #d55181); --ui-radarc-6: light-dark(#008300, #008300);
  --ui-radarc-7: light-dark(#6250d6, #9085e9); --ui-radarc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; justify-items: center; min-width: 0; margin: 0;
  font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-radarc-title { justify-self: start; margin: 0; font-size: 14px; font-weight: 600; }
.ui-radarc-s1 { --c: var(--ui-radarc-1); } .ui-radarc-s2 { --c: var(--ui-radarc-2); } .ui-radarc-s3 { --c: var(--ui-radarc-3); }
.ui-radarc-s4 { --c: var(--ui-radarc-4); } .ui-radarc-s5 { --c: var(--ui-radarc-5); } .ui-radarc-s6 { --c: var(--ui-radarc-6); }
.ui-radarc-s7 { --c: var(--ui-radarc-7); } .ui-radarc-s8 { --c: var(--ui-radarc-8); }
.ui-radarc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-radarc-legend li { display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s ease; }
.ui-radarc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-radarc-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ui-radarc-ring { fill: none; stroke: color-mix(in srgb, var(--ui-border) 80%, transparent); stroke-width: 1; }
.ui-radarc-ring.ui-radarc-rim { stroke: var(--ui-strong); }
.ui-radarc-spoke { stroke: color-mix(in srgb, var(--ui-border) 80%, transparent); stroke-width: 1; }
.ui-radarc-axis { fill: var(--ui-fg); font-size: 12px; }
.ui-radarc-tick { fill: var(--ui-muted); font-size: 10px; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--ui-bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ui-radarc-shape { fill: var(--c); fill-opacity: .14; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.ui-radarc-nofill .ui-radarc-shape { fill-opacity: 0; }
.ui-radarc-series { transition: opacity .15s ease; }
.ui-radarc-series:hover .ui-radarc-shape { fill-opacity: .3; }
.ui-radarc-pt { fill: var(--c); stroke: var(--ui-bg); stroke-width: 1.5; }
.ui-radarc-pt:hover { stroke: var(--c); stroke-width: 5; stroke-opacity: .35; }
.ui-radarc:has(.ui-radarc-p1:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p1),
.ui-radarc:has(.ui-radarc-p2:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p2),
.ui-radarc:has(.ui-radarc-p3:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p3),
.ui-radarc:has(.ui-radarc-p4:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p4),
.ui-radarc:has(.ui-radarc-p5:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p5),
.ui-radarc:has(.ui-radarc-p6:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p6),
.ui-radarc:has(.ui-radarc-p7:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p7),
.ui-radarc:has(.ui-radarc-p8:hover) :is(.ui-radarc-series, .ui-radarc-legend li):not(.ui-radarc-p8) { opacity: .2; }
@media (prefers-reduced-motion: reduce) { .ui-radarc-series, .ui-radarc-legend li { transition: none; } }


.empty-screen-demo-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.empty-screen-demo-q { box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-dock {
  position: fixed; z-index: 30; display: flex; gap: 2px; width: fit-content; padding: 6px; border: 1px solid var(--ui-border);
  border-radius: calc(var(--ui-radius) + 6px); background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  backdrop-filter: blur(12px); box-shadow: var(--ui-shadow-lg); color: var(--ui-fg); font: 500 11px/1.2 var(--ui-font);
}
.ui-dock-bottom { left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.ui-dock-top { left: 50%; top: 12px; transform: translateX(-50%); }
.ui-dock-left { top: 50%; left: 12px; flex-direction: column; transform: translateY(-50%); }
.ui-dock-right { top: 50%; right: 12px; flex-direction: column; transform: translateY(-50%); }
.ui-dock-inline { position: relative; inset: auto; transform: none; box-shadow: var(--ui-shadow); }
.ui-dock-item {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 58px; height: 52px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--ui-radius); background: transparent;
  color: var(--ui-muted); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.ui-dock-item:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-dock-item[aria-current] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-dock-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dock-item:disabled, .ui-dock-item[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ui-dock-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 20px; line-height: 1; }
.ui-dock-icon svg { width: 22px; height: 22px; }
.ui-dock-badge {
  position: absolute; top: 4px; left: 50%; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 999px;
  background: var(--ui-danger); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.ui-dock-nolabels .ui-dock-item { min-width: 44px; height: 44px; padding: 0; }
.ui-dock-nolabels .ui-dock-badge { top: 2px; }
@media (prefers-reduced-motion: reduce) { .ui-dock-item { transition: none; } }


.ui-stock { display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.3 var(--ui-font); color: var(--ui-fg); --t: var(--ui-success); }
.ui-stock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 20%, transparent); }
.ui-stock-in { --t: var(--ui-success); }
.ui-stock-low { --t: var(--ui-warning); }
.ui-stock-out { --t: var(--ui-danger); }
.ui-stock-preorder, .ui-stock-backorder { --t: var(--ui-info); }
.ui-stock-low .ui-stock-text, .ui-stock-out .ui-stock-text { color: var(--t); }
.ui-stock-hint { font-weight: 400; color: var(--ui-muted); }
.ui-stock-sm { font-size: 13px; gap: 6px; }
.ui-stock-sm .ui-stock-dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--t) 20%, transparent); }


.ui-bulked { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-bulked .ui-bulked-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-bulked-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; min-width: 0; }
.ui-bulked-field { display: grid; gap: 3px; min-width: 0; }
.ui-bulked-field label { font-size: 12px; font-weight: 500; color: var(--ui-muted); }
.ui-bulked select, .ui-bulked-input { box-sizing: border-box; max-width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-bulked-input { width: 160px; }
.ui-bulked select:focus-visible, .ui-bulked-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bulked-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-bulked-case { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 13px; cursor: pointer; }
.ui-bulked input[type="checkbox"] { margin: 0; accent-color: var(--ui-accent); }
.ui-bulked input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bulked-btn { height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-bulked-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-bulked-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bulked-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-bulked-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-bulked-go:hover:not(:disabled) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-bulked-sum { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bulked-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-bulked-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-bulked-empty { margin: 0; padding: 20px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-bulked-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-bulked-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bulked table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-bulked th, .ui-bulked td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--ui-border); overflow-wrap: anywhere; }
.ui-bulked thead th { position: sticky; top: 0; z-index: 1; background: var(--ui-subtle); font-weight: 600; white-space: nowrap; }
.ui-bulked tbody tr:last-child th, .ui-bulked tbody tr:last-child td { border-bottom: 0; }
.ui-bulked-on { background: var(--ui-accent-soft); }
.ui-bulked del { color: var(--ui-danger); }
.ui-bulked ins { color: var(--ui-success); text-decoration: none; font-weight: 600; }
.ui-bulked-blank { color: var(--ui-muted); font-style: italic; }
.ui-bulked-said { color: var(--ui-muted); font-size: 13px; }


.ui-icon-picker { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-icon-picker-legend { padding: 0; font-size: 13px; font-weight: 500; }
.ui-icon-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-icon-picker-panel { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-icon-picker-search {
  box-sizing: border-box; width: 100%; height: 34px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font);
}
.ui-icon-picker-search::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-icon-picker-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-icon-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; max-height: 220px; overflow: auto;
  max-width: calc(var(--cols) * 44px); padding: 2px;
}
.ui-icon-picker-opt { position: relative; display: grid; place-items: center; height: 40px; border-radius: var(--ui-radius-sm); color: var(--ui-fg); cursor: pointer; }
.ui-icon-picker-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-icon-picker-opt svg { width: 20px; height: 20px; }
.ui-icon-picker-opt:hover { background: var(--ui-subtle); }
.ui-icon-picker-opt:has(input:checked) { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-icon-picker-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-icon-picker-empty { padding: 14px 4px; color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-icon-picker-status { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ui-muted); }
.ui-icon-picker-status b { color: var(--ui-fg); font-weight: 500; }
.ui-icon-picker-sm .ui-icon-picker-opt { height: 32px; }
.ui-icon-picker-sm .ui-icon-picker-opt svg { width: 16px; height: 16px; }
.ui-icon-picker-sm .ui-icon-picker-grid { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); max-width: calc(var(--cols) * 36px); }
.ui-icon-picker-invalid .ui-icon-picker-panel { border-color: var(--ui-danger); }
.ui-icon-picker-hint, .ui-icon-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-icon-picker-error { color: var(--ui-danger); }


.ui-slider { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-slider-label { font-size: 13px; font-weight: 500; }
.ui-slider-value { font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-slider input {
  --ui-slider-track: var(--ui-subtle);
  appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.ui-slider input:focus { outline: none; }
.ui-slider input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ui-border);
  background: linear-gradient(to right, var(--ui-accent) var(--ui-slider-fill, 0%), var(--ui-slider-track) var(--ui-slider-fill, 0%));
}
.ui-slider input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ui-slider-track); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-slider input::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ui-accent); }
.ui-slider input::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--ui-surface); border: 2px solid var(--ui-accent); box-shadow: var(--ui-shadow);
  transition: transform .12s, box-shadow .15s;
}
.ui-slider input::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--ui-surface);
  border: 2px solid var(--ui-accent); box-shadow: var(--ui-shadow);
}
.ui-slider input:hover::-webkit-slider-thumb { transform: scale(1.1); }
.ui-slider input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ui-focus); }
.ui-slider input:focus-visible::-moz-range-thumb { box-shadow: var(--ui-focus); }
.ui-slider-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-slider-disabled { opacity: .55; }
.ui-slider-disabled input { cursor: not-allowed; }
.ui-slider-disabled input:hover::-webkit-slider-thumb { transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-slider input::-webkit-slider-thumb { transition: none; } }


.ui-like-button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid transparent;
  border-radius: 999px; background: transparent; color: var(--ui-muted); font: 500 14px/1 var(--ui-font);
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ui-like-button:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-like-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-like-button:disabled { opacity: .55; cursor: not-allowed; }
.ui-like-button-outline { border-color: var(--ui-border); }
.ui-like-button-soft { background: var(--ui-subtle); }
.ui-like-button-on { color: var(--ui-danger); }
.ui-like-button svg { flex: none; width: 20px; height: 20px; fill: none; transition: fill .15s, transform .15s; }
.ui-like-button-on svg { fill: currentColor; animation: ui-like-button-pop .3s ease-out; }
@keyframes ui-like-button-pop { 30% { transform: scale(1.3); } 60% { transform: scale(.95); } }
.ui-like-button-sm { height: 28px; padding: 0 8px; font-size: 13px; }
.ui-like-button-sm svg { width: 16px; height: 16px; }
.ui-like-button-lg { height: 42px; padding: 0 14px; font-size: 16px; }
.ui-like-button-lg svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .ui-like-button-on svg { animation: none; } .ui-like-button, .ui-like-button svg { transition: none; } }


.ui-center { box-sizing: content-box; max-width: var(--ui-center-max, none); min-width: 0; margin-inline: auto; padding-inline: var(--ui-center-gutter, 0); }
.ui-center-text { text-align: center; }
.ui-center-intrinsic { display: flex; flex-direction: column; align-items: center; }


.ui-cloud-cost { display: grid; gap: 16px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-cloud-cost .ui-cloud-cost-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-cloud-cost-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-cloud-cost-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cloud-cost table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-cloud-cost th, .ui-cloud-cost td { padding: 8px 10px; border-bottom: 1px solid var(--ui-border); text-align: right; vertical-align: top; }
.ui-cloud-cost th:first-child, .ui-cloud-cost td:first-child { min-width: 170px; text-align: left; }
.ui-cloud-cost thead th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ui-cloud-cost tfoot th, .ui-cloud-cost tfoot td { border-bottom: 0; font-size: 15px; font-weight: 700; }
.ui-cloud-cost-input { box-sizing: border-box; width: 92px; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-cloud-cost-input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-cloud-cost-input[aria-invalid] { border-color: var(--ui-danger); }
.ui-cloud-cost-check { width: 16px; height: 16px; margin: 8px 0 0; accent-color: var(--ui-accent); }
.ui-cloud-cost-check:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cloud-cost-unit { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-cloud-cost-parts summary { color: var(--ui-muted); font-size: 12px; cursor: pointer; }
.ui-cloud-cost-parts summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-cloud-cost-parts ul { margin: 4px 0 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-cloud-cost-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.ui-cloud-cost-sum > div { padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-cloud-cost-sum dt { color: var(--ui-muted); font-size: 12px; }
.ui-cloud-cost-sum dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-cloud-cost-say { display: grid; gap: 6px; }
.ui-cloud-cost-say h4 { margin: 0; font-size: 14px; }
.ui-cloud-cost-say p { margin: 0; }
.ui-cloud-cost-drivers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-cloud-cost-driver { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.ui-cloud-cost-bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-cloud-cost-bar span { display: block; height: 100%; background: var(--ui-accent); }
.ui-cloud-cost-advice { display: grid; gap: 4px; margin: 0; padding: 0 0 0 18px; font-size: 13px; }
.ui-cloud-cost-error { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-cloud-cost-warn { margin: 0; color: var(--ui-warning); font-size: 13px; }


.ui-boxpack { display: grid; gap: 14px; min-width: 0; max-width: 760px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-boxpack .ui-boxpack-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-boxpack-sizes { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-boxpack-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-boxpack-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: 4px 10px; align-items: end; }
.ui-boxpack-cell { display: grid; gap: 3px; min-width: 0; }
.ui-boxpack-cell label { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-boxpack-cell input { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
.ui-boxpack-cell input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-boxpack-cell input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-boxpack-short { max-width: 150px; }
.ui-boxpack-btn { min-height: 36px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-boxpack-btn:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-boxpack-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-boxpack-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-boxpack-rowerror { grid-column: 1 / -1; margin: 0; color: var(--ui-danger); font-size: 12px; }
.ui-boxpack-verdict { margin: 0; font-size: 15px; font-weight: 650; color: var(--ui-success); }
.ui-boxpack-ship { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-boxpack-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-boxpack-name { font-weight: 650; overflow-wrap: anywhere; }
.ui-boxpack-bill { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-boxpack-what { grid-column: 1 / -1; font-size: 13px; overflow-wrap: anywhere; }
.ui-boxpack-how { grid-column: 1 / -1; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-boxpack-unfit { margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-boxpack-problems { margin: 0; padding: 8px 12px 8px 26px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 12px; }
.ui-boxpack-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 560px) { .ui-boxpack { padding: 16px; } .ui-boxpack-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ui-boxpack-row > :first-child, .ui-boxpack-row > :nth-child(2) { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ui-boxpack-cell input { transition: none; } }


.ui-swipev {
  box-sizing: border-box; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: #fff;
  font: 14px/1.4 var(--ui-font); overscroll-behavior: none;
}
.ui-swipev[open] { display: flex; flex-direction: column; }
.ui-swipev::backdrop { background: transparent; }
/* What dims with a pull: the black behind the photo. */
.ui-swipev-black { position: absolute; inset: 0; background: #000; opacity: var(--ui-swipev-dim, 1); }
.ui-swipev-top, .ui-swipev-tools { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ui-swipev-top { padding: calc(4px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px)); }
.ui-swipev-tools { padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.ui-swipev-where, .ui-swipev-level { font-variant-numeric: tabular-nums; }
.ui-swipev-level { min-width: 52px; text-align: center; }
.ui-swipev-tool { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: #fff; font: 600 20px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-swipev-tool:disabled { color: rgba(255, 255, 255, .35); cursor: default; }
.ui-swipev-tool svg { width: 22px; height: 22px; }
.ui-swipev-tool:focus-visible, .ui-swipev-thumb:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* Everything a finger does here is ours: the page must neither scroll nor zoom behind it. */
.ui-swipev-stage { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.ui-swipev-track { position: absolute; inset: 0; will-change: transform; }
.ui-swipev-slide { position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden; }
.ui-swipev-slide img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.ui-swipev-caption { position: relative; z-index: 1; margin: 0; padding: 6px 14px 0; text-align: center; }
.ui-swipev-caption:empty { display: none; }
.ui-swipev-strip { display: none; }
.ui-swipev-thumb { flex: none; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #222; cursor: pointer; opacity: .65; touch-action: manipulation; }
.ui-swipev-thumb[aria-current="true"] { border-color: #fff; opacity: 1; }
.ui-swipev-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (hover: hover) { .ui-swipev-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .14); } }
/* It covers the whole window, so the window's width is the one that counts, in Split View too. */
@media (min-width: 700px) {
  .ui-swipev-strip { position: relative; z-index: 1; display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ui-swipev-caption { font-size: 16px; }
}


.ui-file-preview { display: grid; grid-template-rows: auto auto; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-file-preview-view { display: grid; place-items: center; height: var(--ui-file-preview-h, 220px); overflow: hidden; background: var(--ui-subtle); }
.ui-file-preview-view img { width: 100%; height: 100%; object-fit: contain; }
.ui-file-preview-view object, .ui-file-preview-view video { width: 100%; height: 100%; border: 0; }
.ui-file-preview-view audio { width: calc(100% - 32px); }
.ui-file-preview-fallback { display: grid; place-items: center; gap: 8px; height: 100%; padding: 16px; color: var(--ui-muted); text-align: center; }
.ui-file-preview-text { align-self: stretch; justify-self: stretch; margin: 0; padding: 12px 14px; overflow: hidden; background: var(--ui-surface);
  color: var(--ui-fg); font: 12px/1.55 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }
.ui-file-preview-icon { --k: var(--ui-muted); position: relative; display: grid; place-items: end center; width: 72px; height: 90px; padding-bottom: 12px;
  border-radius: 6px 22px 6px 6px; background: color-mix(in srgb, var(--k) 16%, var(--ui-surface)); color: var(--k); font: 800 14px/1 var(--ui-font); letter-spacing: .03em; }
.ui-file-preview-icon::before { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-radius: 0 0 0 6px;
  background: color-mix(in srgb, var(--k) 32%, var(--ui-surface)); }
.ui-file-preview-k-image { --k: var(--ui-success); } .ui-file-preview-k-pdf { --k: var(--ui-danger); } .ui-file-preview-k-text { --k: var(--ui-info); }
.ui-file-preview-k-video, .ui-file-preview-k-audio { --k: var(--ui-accent); } .ui-file-preview-k-archive { --k: var(--ui-warning); }
.ui-file-preview-foot { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-top: 1px solid var(--ui-border); }
.ui-file-preview-info { flex: 1; display: grid; min-width: 0; }
.ui-file-preview-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-file-preview-meta { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-file-preview-dl { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-radius-sm); color: var(--ui-muted); }
.ui-file-preview-dl:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-file-preview-dl:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-file-preview-dl svg { width: 18px; height: 18px; }
.ui-file-preview-open { color: var(--ui-accent); }


.ui-newsletter-form { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-newsletter-form-title { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.25; }
.ui-newsletter-form-text { margin: 0; color: var(--ui-muted); }
.ui-newsletter-form-fields { display: contents; }
.ui-newsletter-form-form { display: flex; gap: 8px; margin: 0; min-width: 0; }
.ui-newsletter-form-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-newsletter-form-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-newsletter-form-input:hover { border-color: var(--ui-strong); }
.ui-newsletter-form-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-newsletter-form-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-newsletter-form-button {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 0;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 14px var(--ui-font);
  white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s;
}
.ui-newsletter-form-button:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-newsletter-form-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-newsletter-form-sm .ui-newsletter-form-input, .ui-newsletter-form-sm .ui-newsletter-form-button { height: 32px; font-size: 13px; }
.ui-newsletter-form-sm .ui-newsletter-form-button { padding: 0 12px; }
.ui-newsletter-form-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-newsletter-form-done {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm);
  background: var(--ui-success-soft); color: var(--ui-success); font-weight: 500;
}
.ui-newsletter-form-done svg { flex: none; width: 18px; height: 18px; }
@media (max-width: 420px) { .ui-newsletter-form-form { flex-direction: column; } .ui-newsletter-form-button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ui-newsletter-form-input, .ui-newsletter-form-button { transition: none; } }


.ui-qr-code { display: inline-grid; justify-items: center; gap: 6px; margin: 0; color: var(--ui-fg); font: 12px/1.3 var(--ui-mono); }
.ui-qr-code svg { display: block; background: var(--ui-surface); border-radius: 4px; }
.ui-qr-code figcaption { color: var(--ui-muted); letter-spacing: .04em; overflow-wrap: anywhere; text-align: center; }
.ui-qr-code-error { display: grid; place-items: center; padding: 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm);
  color: var(--ui-danger); font: 13px/1.4 var(--ui-font); text-align: center; }


.ui-banner-host { display: contents; }
.ui-banner { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px;
  font: 14px/1.45 var(--ui-font); --t: var(--ui-accent); --ts: var(--ui-accent-soft); --tf: var(--ui-accent-fg); }
.ui-banner-neutral { --t: var(--ui-fg); --ts: var(--ui-subtle); --tf: var(--ui-bg); }
.ui-banner-info { --t: var(--ui-info); --ts: var(--ui-info-soft); --tf: var(--ui-bg); }
.ui-banner-success { --t: var(--ui-success); --ts: var(--ui-success-soft); --tf: var(--ui-bg); }
.ui-banner-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); --tf: var(--ui-bg); }
.ui-banner-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); --tf: var(--ui-bg); }
.ui-banner-solid { background: var(--t); color: var(--tf); }
.ui-banner-soft { background: var(--ts); color: var(--ui-fg); border-bottom: 1px solid color-mix(in srgb, var(--t) 25%, transparent); }
.ui-banner-sticky { position: sticky; top: 0; z-index: 40; }
.ui-banner-body { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 14px;
  min-width: 0; text-align: center; }
.ui-banner-text { margin: 0; }
.ui-banner-text strong { margin-right: 6px; font-weight: 650; }
.ui-banner-link { flex: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; white-space: nowrap; border-radius: 3px; }
.ui-banner-soft .ui-banner-link { color: var(--t); }
.ui-banner-neutral.ui-banner-soft .ui-banner-link { color: var(--ui-fg); }
.ui-banner-link:hover { text-decoration-thickness: 2px; }
.ui-banner-link:focus-visible, .ui-banner-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ui-banner-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0;
  border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font-size: 20px; line-height: 1;
  opacity: .75; cursor: pointer; }
.ui-banner-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.ui-banner-pad { flex: none; width: 22px; }


.ui-video-player { position: relative; overflow: hidden; width: 100%; border-radius: var(--ui-radius); background: #000; color: #fff; font: 13px/1 var(--ui-font); outline: none; }
.ui-video-player:focus-visible { box-shadow: var(--ui-focus); }
.ui-video-player video { display: block; width: 100%; aspect-ratio: var(--r, 16/9); object-fit: contain; background: #000; }
.ui-video-player:fullscreen video { height: 100%; aspect-ratio: auto; }
.ui-video-player-big {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; padding: 0; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; transition: background .15s, transform .15s;
}
.ui-video-player-big:hover { background: var(--ui-accent); transform: translate(-50%, -50%) scale(1.06); }
.ui-video-player-big:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff; }
.ui-video-player-big svg { width: 32px; height: 32px; margin-left: 4px; }
.ui-video-player-started .ui-video-player-big { display: none; }
.ui-video-player-bar {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 6px; padding: 24px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); transition: opacity .25s;
}
.ui-video-player-started.ui-video-player-playing:not(:hover):not(:focus-within) .ui-video-player-bar { opacity: 0; }
.ui-video-player-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: #fff; cursor: pointer; }
.ui-video-player-btn:hover { background: rgba(255, 255, 255, .18); }
.ui-video-player-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
.ui-video-player-btn svg { width: 20px; height: 20px; }
.ui-video-player-time { flex: none; min-width: 84px; padding: 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-video-player-seek, .ui-video-player-vol { appearance: none; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.ui-video-player-seek { flex: 1; min-width: 60px; }
.ui-video-player-vol { width: 70px; }
.ui-video-player-seek::-webkit-slider-runnable-track, .ui-video-player-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, #fff var(--f, 0%), rgba(255, 255, 255, .35) var(--f, 0%)); }
.ui-video-player-seek::-moz-range-track, .ui-video-player-vol::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .35); }
.ui-video-player-seek::-moz-range-progress, .ui-video-player-vol::-moz-range-progress { height: 4px; border-radius: 999px; background: #fff; }
.ui-video-player-seek::-webkit-slider-thumb, .ui-video-player-vol::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; }
.ui-video-player-seek::-moz-range-thumb, .ui-video-player-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.ui-video-player-seek:focus-visible, .ui-video-player-vol:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; border-radius: 999px; }
.ui-video-player-vol-box { display: flex; align-items: center; }
@media (max-width: 480px) { .ui-video-player-vol { display: none; } .ui-video-player-time { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-video-player-big, .ui-video-player-bar { transition: none; } }


.ui-acard { --t: var(--ui-accent); position: relative; display: grid; gap: 14px; min-width: 0; padding: 18px 18px 14px; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-acard::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--t); }
.ui-acard-success { --t: var(--ui-success); }
.ui-acard-info { --t: var(--ui-info); }
.ui-acard-warning { --t: var(--ui-warning); }
.ui-acard-danger { --t: var(--ui-danger); }
.ui-acard-neutral { --t: var(--ui-strong); }
.ui-acard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ui-acard-kind { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ui-acard-name { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-acard-name a { color: inherit; text-decoration: none; }
.ui-acard-name a:hover { color: var(--ui-accent); }
.ui-acard-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-acard-number { margin: 2px 0 0; color: var(--ui-muted); font: 13px var(--ui-mono); letter-spacing: .04em; }
.ui-acard-currency { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.ui-acard-money { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 22px; margin: 0; }
.ui-acard-money > div { display: grid; gap: 1px; }
.ui-acard-money > div:first-child { flex-basis: 100%; }
.ui-acard-money dt { color: var(--ui-muted); font-size: 12px; }
.ui-acard-money dd { margin: 0; font-variant-numeric: tabular-nums; }
.ui-acard-balance { font-size: 28px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em; }
.ui-acard-negative .ui-acard-balance { color: var(--ui-danger); }
.ui-acard-avail dd { font-weight: 600; }
.ui-acard-hold dd { color: var(--ui-warning); font-weight: 500; }
.ui-acard-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ui-border); list-style: none; }
.ui-acard-actions a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.ui-acard-actions a:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-acard-actions a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-acard-actions svg { width: 14px; height: 14px; flex: none; }
.ui-acard-note { margin: 0; color: var(--ui-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-acard-actions a { transition: none; } }


.ui-pivot { min-width: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-pivot table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-pivot th, .ui-pivot td { padding: 9px 14px; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-pivot td { text-align: right; font-variant-numeric: tabular-nums; }
.ui-pivot thead th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; text-align: right; }
.ui-pivot thead th:first-child, .ui-pivot tbody th { text-align: left; }
.ui-pivot tbody th { font-weight: 500; background: color-mix(in srgb, var(--ui-subtle) 50%, transparent); }
.ui-pivot tbody tr:last-child td, .ui-pivot tbody tr:last-child th { border-bottom: 0; }
.ui-pivot tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-pivot-empty { color: var(--ui-muted); }
.ui-pivot .ui-pivot-total { font-weight: 600; background: color-mix(in srgb, var(--ui-accent-soft) 45%, var(--ui-surface)); }
.ui-pivot tr.ui-pivot-total th, .ui-pivot tr.ui-pivot-total td { border-top: 2px solid var(--ui-strong); border-bottom: 0; }
.ui-pivot-none { padding: 28px 14px; text-align: center; color: var(--ui-muted); }


.ui-spirit { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-spirit-in { display: grid; gap: 12px; justify-items: center; }
.ui-spirit-dial { position: relative; width: min(100%, 260px); aspect-ratio: 1; border: 2px solid var(--ui-strong); border-radius: 50%; background: var(--ui-subtle); overflow: hidden; }
.ui-spirit-dial::before, .ui-spirit-dial::after { content: ""; position: absolute; background: var(--ui-strong); }
.ui-spirit-dial::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ui-spirit-dial::after { top: 50%; left: 0; right: 0; height: 1px; }
/* A fixed size, not a share of the dial: it marks the bubble being home, and the bubble does not grow. */
.ui-spirit-ring { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border: 2px solid var(--ui-muted); border-radius: 50%; }
.ui-spirit-tube { position: relative; width: min(100%, 300px); height: 64px; border: 2px solid var(--ui-strong); border-radius: 32px; background: var(--ui-subtle); overflow: hidden; }
.ui-spirit-tube::before, .ui-spirit-tube::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ui-muted); }
.ui-spirit-tube::before { left: calc(50% - 30px); }
.ui-spirit-tube::after { left: calc(50% + 30px); }
.ui-spirit-bubble { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; will-change: transform;
  background: color-mix(in srgb, var(--ui-warning) 55%, transparent); border: 2px solid var(--ui-warning); }
.ui-spirit[data-level] .ui-spirit-bubble { background: color-mix(in srgb, var(--ui-success) 55%, transparent); border-color: var(--ui-success); }
.ui-spirit-side { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.ui-spirit-read { display: grid; gap: 2px; justify-items: center; text-align: center; }
.ui-spirit-big { font: 600 28px/1.15 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-spirit-say { margin: 0; color: var(--ui-muted); }
.ui-spirit-say:empty { display: none; }
.ui-spirit-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* With room, the readings stand beside the dial, not under it. */
@container (min-width: 420px) {
  .ui-spirit-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 20px; }
  /* A bigger dial reads finer: the same degree moves the bubble further. Held to the height, for a phone on its side. */
  .ui-spirit-dial { width: min(100%, 420px, 70dvh); }
  .ui-spirit-tube { width: 100%; }
}


.ui-review-card { display: grid; gap: 8px; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-review-card:first-child { padding-top: 0; }
.ui-review-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ui-review-card-stars { display: inline-flex; gap: 1px; color: var(--ui-warning); }
.ui-review-card-stars svg { width: 15px; height: 15px; }
.ui-review-card-star-off { color: var(--ui-border); }
.ui-review-card-star-half { clip-path: inset(0 50% 0 0); }
.ui-review-card-title { margin: 0; font-size: 15px; font-weight: 600; }
.ui-review-card-verified { display: inline-flex; align-items: center; gap: 3px; color: var(--ui-success); font-size: 12px; font-weight: 500; }
.ui-review-card-verified svg { width: 13px; height: 13px; }
.ui-review-card-who { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13px; }
.ui-review-card-name { color: var(--ui-fg); font-weight: 500; }
.ui-review-card-text { margin: 0; white-space: pre-line; }
.ui-review-card-images { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-review-card-images img { display: block; width: 64px; height: 64px; border-radius: var(--ui-radius-sm); object-fit: cover; }
.ui-review-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ui-muted); font-size: 13px; }
.ui-review-card-vote { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-review-card-vote:hover { border-color: var(--ui-strong); }
.ui-review-card-vote:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-review-card-vote[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-review-card-vote svg { width: 14px; height: 14px; }
.ui-review-card-reply { display: grid; gap: 4px; margin-top: 4px; padding: 10px 12px; border-left: 3px solid var(--ui-border); background: var(--ui-subtle);
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-review-card-reply-who { font-size: 13px; color: var(--ui-muted); }
.ui-review-card-reply-who b { color: var(--ui-fg); font-weight: 600; }
.ui-review-card-reply p { margin: 0; }


.ui-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
  width: var(--s); height: var(--s); border-radius: 50%; --s: 40px; --h: #6e56cf;
  background: color-mix(in srgb, var(--h) 24%, var(--ui-bg)); color: color-mix(in srgb, var(--h) 70%, var(--ui-fg));
  font: 600 calc(var(--s) * .38)/1 var(--ui-font); letter-spacing: .02em; user-select: none;
}
.ui-avatar-square { border-radius: calc(var(--s) * .22); }
.ui-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; color: transparent; font-size: 0; }
.ui-avatar img::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: inherit; background: color-mix(in srgb, var(--h) 24%, var(--ui-bg));
  color: color-mix(in srgb, var(--h) 70%, var(--ui-fg)); font: 600 calc(var(--s) * .38)/1 var(--ui-font); }
.ui-avatar-xs { --s: 24px; }
.ui-avatar-sm { --s: 32px; }
.ui-avatar-lg { --s: 56px; }
.ui-avatar-xl { --s: 72px; }
.ui-avatar-c0 { --h: #e5484d; } .ui-avatar-c1 { --h: #f76b15; } .ui-avatar-c2 { --h: #ad7f00; }
.ui-avatar-c3 { --h: #30a46c; } .ui-avatar-c4 { --h: #12a594; } .ui-avatar-c5 { --h: #0090ff; }
.ui-avatar-c6 { --h: #6e56cf; } .ui-avatar-c7 { --h: #d6409f; }
.ui-avatar-status { position: absolute; right: 0; bottom: 0; width: max(8px, calc(var(--s) * .27));
  height: max(8px, calc(var(--s) * .27)); border-radius: 50%; border: 2px solid var(--ui-bg); background: var(--ui-strong); }
.ui-avatar-online { background: var(--ui-success); }
.ui-avatar-away { background: var(--ui-warning); }
.ui-avatar-busy { background: var(--ui-danger); }
.ui-avatar-group { display: inline-flex; align-items: center; }
.ui-avatar-group > .ui-avatar { box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-avatar-group > .ui-avatar + .ui-avatar { margin-left: calc(var(--s) * -.28); }
.ui-avatar-more { background: var(--ui-subtle); color: var(--ui-muted); font-size: calc(var(--s) * .32); }


.ui-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.ui-container-sm { max-width: 640px; }
.ui-container-md { max-width: 860px; }
.ui-container-full { max-width: none; }
.ui-container-flush { padding-inline: 0; }
@media (min-width: 640px) { .ui-container:not(.ui-container-flush) { padding-inline: 24px; } }


.ui-reaction-bar { position: relative; display: grid; gap: 2px; min-width: 0; font: 14px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-reaction-bar-target { min-width: 0; touch-action: pan-y; -webkit-touch-callout: none; border-radius: var(--ui-radius); transition: transform .16s; }
.ui-reaction-bar-pressing { user-select: none; -webkit-user-select: none; transform: scale(.985); }
.ui-reaction-bar-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.ui-reaction-bar-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ui-reaction-bar-chip span {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.ui-reaction-bar-chip[aria-pressed="true"] span { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-reaction-bar-chip:focus-visible { outline: none; }
.ui-reaction-bar-chip:focus-visible span { box-shadow: var(--ui-focus); }
.ui-reaction-bar-add svg { width: 18px; height: 18px; color: var(--ui-muted); }
.ui-reaction-bar-add span { width: 34px; justify-content: center; padding: 0; border-style: dashed; }
.ui-reaction-bar-pop {
  position: fixed; inset: auto; margin: 0; padding: 4px; border: 1px solid var(--ui-border); border-radius: 999px; overflow: visible;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.ui-reaction-bar-pop:popover-open { display: flex; animation: ui-reaction-bar-rise .18s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ui-reaction-bar-rise { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.ui-reaction-bar-item {
  position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; font-size: 26px; line-height: 1; cursor: pointer; transition: transform .12s;
}
.ui-reaction-bar-item[aria-checked="true"] { background: var(--ui-accent-soft); }
.ui-reaction-bar-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-reaction-bar-on { transform: translateY(-10px) scale(1.3); }
.ui-reaction-bar-on::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; margin-bottom: 2px; padding: 1px 7px; border-radius: 999px; transform: translateX(-50%) scale(.77);
  background: var(--ui-fg); color: var(--ui-bg); font: 600 12px/18px var(--ui-font); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .ui-reaction-bar-target, .ui-reaction-bar-item { transition: none; }
  .ui-reaction-bar-pop:popover-open { animation: none; }
}


.keyboard-avoider-demo-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; }
.keyboard-avoider-demo-form { display: grid; gap: 14px; padding: 16px; }
.keyboard-avoider-demo-form label { display: grid; gap: 4px; color: var(--ui-muted); font: 500 13px/1.3 var(--ui-font); }
.keyboard-avoider-demo-form input, .keyboard-avoider-demo-form textarea {
  box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font);
}
.keyboard-avoider-demo-status { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }


.ui-bubc {
  --ui-bubc-1: light-dark(#2a78d6, #3987e5); --ui-bubc-2: light-dark(#eb6834, #d95926);
  --ui-bubc-3: light-dark(#1baf7a, #199e70); --ui-bubc-4: light-dark(#eda100, #c98500);
  --ui-bubc-5: light-dark(#e87ba4, #d55181); --ui-bubc-6: light-dark(#008300, #008300);
  --ui-bubc-7: light-dark(#6250d6, #9085e9); --ui-bubc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-bubc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-bubc-s1 { --c: var(--ui-bubc-1); } .ui-bubc-s2 { --c: var(--ui-bubc-2); } .ui-bubc-s3 { --c: var(--ui-bubc-3); }
.ui-bubc-s4 { --c: var(--ui-bubc-4); } .ui-bubc-s5 { --c: var(--ui-bubc-5); } .ui-bubc-s6 { --c: var(--ui-bubc-6); }
.ui-bubc-s7 { --c: var(--ui-bubc-7); } .ui-bubc-s8 { --c: var(--ui-bubc-8); }
.ui-bubc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-bubc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-bubc-key { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ui-bubc-skey { width: 12px; height: 12px; border: 1.5px solid var(--ui-muted); border-radius: 50%; flex: none; }
.ui-bubc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.ui-bubc-ylabel { grid-column: 1 / -1; margin-bottom: 8px; color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-bubc-y { position: relative; min-width: 24px; }
.ui-bubc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bubc-plot { position: relative; }
.ui-bubc-grid { position: absolute; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-bubc-h { left: 0; right: 0; height: 1px; }
.ui-bubc-v { top: 0; bottom: 0; width: 1px; }
.ui-bubc-zero { background: var(--ui-strong); }
.ui-bubc-pt { position: absolute; display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%;
  background: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 1px var(--ui-bg);
  transform: translate(-50%, -50%); transition: background-color .12s ease; }
.ui-bubc-pt:hover { z-index: 10; background: var(--c); }
.ui-bubc-name { max-width: 100%; overflow: hidden; color: var(--ui-fg); font-size: 11px; font-weight: 600; text-overflow: clip; white-space: nowrap; pointer-events: none; }
.ui-bubc-tip { position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 50%; display: none; min-width: 130px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translateX(-50%); pointer-events: none; }
.ui-bubc-pt:hover .ui-bubc-tip { display: block; }
.ui-bubc-left .ui-bubc-tip { left: 0; transform: none; }
.ui-bubc-right .ui-bubc-tip { left: auto; right: 0; transform: none; }
.ui-bubc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-bubc-tip p { display: flex; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-bubc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-bubc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-bubc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bubc-x span:first-child { transform: none; }
.ui-bubc-x span:last-child { transform: translateX(-100%); }
.ui-bubc-xlabel { grid-column: 2; margin-top: 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ui-bubc-pt { transition: none; } }


.ui-bump {
  --ui-bump-1: light-dark(#2a78d6, #3987e5); --ui-bump-2: light-dark(#eb6834, #d95926);
  --ui-bump-3: light-dark(#1baf7a, #199e70); --ui-bump-4: light-dark(#eda100, #c98500);
  --ui-bump-5: light-dark(#e87ba4, #d55181); --ui-bump-6: light-dark(#008300, #008300);
  --ui-bump-7: light-dark(#6250d6, #9085e9); --ui-bump-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-bump-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-bump-s1 { --c: var(--ui-bump-1); } .ui-bump-s2 { --c: var(--ui-bump-2); } .ui-bump-s3 { --c: var(--ui-bump-3); }
.ui-bump-s4 { --c: var(--ui-bump-4); } .ui-bump-s5 { --c: var(--ui-bump-5); } .ui-bump-s6 { --c: var(--ui-bump-6); }
.ui-bump-s7 { --c: var(--ui-bump-7); } .ui-bump-s8 { --c: var(--ui-bump-8); }
.ui-bump-wrap { padding: 0 clamp(70px, 18%, 130px); }
.ui-bump-heads { position: relative; height: 16px; margin-bottom: 4px; color: var(--ui-muted); font-weight: 600; }
.ui-bump-heads span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ui-bump-plot { position: relative; }
.ui-bump-row { position: absolute; left: -12px; right: -12px; height: 1px; background: color-mix(in srgb, var(--ui-border) 50%, transparent); }
.ui-bump-item { position: absolute; inset: 0; pointer-events: none; transition: opacity .15s ease; }
.ui-bump-plot:has(.ui-bump-item:hover) .ui-bump-item:not(:hover) { opacity: .15; }
.ui-bump-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-bump-line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; }
.ui-bump-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.ui-bump-pt { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); color: #fff; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; pointer-events: auto; }
.ui-bump-pt i { position: absolute; bottom: calc(100% + 6px); left: 50%; display: none; padding: 3px 7px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--ui-fg);
  font-style: normal; font-weight: 600; transform: translateX(-50%); white-space: nowrap; }
.ui-bump-pt:hover i { display: block; }
.ui-bump-name { position: absolute; max-width: clamp(60px, 16vw, 120px); overflow: hidden; color: var(--ui-fg); font-weight: 500;
  text-overflow: ellipsis; transform: translateY(-50%); white-space: nowrap; pointer-events: auto; }
.ui-bump-name.ui-bump-l { right: calc(100% + 16px); text-align: right; }
.ui-bump-name.ui-bump-r { left: calc(100% + 16px); }
.ui-bump-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--c); }
.ui-bump-l::before { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-bump-item { transition: none; } }


.ui-sub { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-sub-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.ui-sub-plan { display: flex; align-items: center; gap: 10px; }
.ui-sub-name { margin: 0; font-size: 18px; font-weight: 600; }
.ui-sub-status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 12px/1 var(--ui-font); --t: var(--ui-success); --ts: var(--ui-success-soft);
  color: var(--t); background: var(--ts); }
.ui-sub-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.ui-sub-trialing { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-sub-past_due { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-sub-paused { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-sub-cancelled { --t: var(--ui-muted); --ts: var(--ui-subtle); }
.ui-sub-price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-sub-price span { font-size: 13px; font-weight: 400; color: var(--ui-muted); }
.ui-sub-meta { display: grid; gap: 2px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-sub-meta b { font-weight: 500; color: var(--ui-fg); }
.ui-sub-usage { display: grid; gap: 10px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ui-border); list-style: none; }
.ui-sub-line { display: grid; gap: 5px; }
.ui-sub-line-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ui-sub-line-head span:last-child { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-sub-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-sub-fill { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .3s; }
.ui-sub-near .ui-sub-fill { background: var(--ui-warning); }
.ui-sub-full .ui-sub-fill { background: var(--ui-danger); }
.ui-sub-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 12px; border-top: 1px solid var(--ui-border); font-size: 13px; }
.ui-sub-links a, .ui-sub-links button { padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: 3px; }
.ui-sub-links a:hover, .ui-sub-links button:hover { text-decoration: underline; }
.ui-sub-links a:focus-visible, .ui-sub-links button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sub-links .ui-sub-cancel { color: var(--ui-danger); margin-left: auto; }
.ui-sub-note { margin: 0; font-size: 12px; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-sub-fill { transition: none; } }


.ui-testimonials { display: grid; gap: 24px; font: 15px/1.55 var(--ui-font); color: var(--ui-fg); }
.ui-testimonials-title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; text-align: center; }
.ui-testimonials-items { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ui-testimonials-row .ui-testimonials-items { grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
.ui-testimonials-row .ui-testimonial { scroll-snap-align: start; }
.ui-testimonials-grid .ui-testimonials-items { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.ui-testimonial { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; }
.ui-testimonials-cards .ui-testimonial { padding: 22px 24px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-testimonial-stars { display: inline-flex; gap: 2px; color: var(--ui-warning); }
.ui-testimonial-stars svg { width: 16px; height: 16px; }
.ui-testimonial-quote { flex: 1; margin: 0; font-size: 16px; }
.ui-testimonial-quote p { margin: 0; }
.ui-testimonial-quote p::before { content: "“"; }
.ui-testimonial-quote p::after { content: "”"; }
.ui-testimonial-who { display: flex; align-items: center; gap: 12px; }
.ui-testimonial-name { display: block; font-weight: 600; }
.ui-testimonial-role { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-testimonial-role a { color: inherit; }


.ui-lang-btn svg { width: 16px; height: 16px; flex: none; }
.ui-lang-btn .ui-lang-chev { width: 14px; height: 14px; margin-right: -4px; transition: transform .15s; }
.ui-lang-btn:has(+ :popover-open) .ui-lang-chev { transform: rotate(180deg); }
.ui-lang-flag { font-size: 16px; line-height: 1; }
.ui-lang {
  min-width: 180px; max-width: min(300px, calc(100vw - 16px)); margin: auto; padding: 5px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-lang ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ui-lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-lang-item:hover, .ui-lang-item:focus-visible { outline: none; background: var(--ui-subtle); }
.ui-lang-item:focus-visible { box-shadow: var(--ui-focus); }
.ui-lang-item[aria-current] { color: var(--ui-accent); font-weight: 500; }
.ui-lang-item span:nth-child(2), .ui-lang-item > span:only-child { flex: 1; }
.ui-lang-code { color: var(--ui-muted); font-size: 12px; text-transform: uppercase; }
.ui-lang-item svg { width: 14px; height: 14px; flex: none; color: var(--ui-accent); }
.ui-lang[popover]:popover-open { animation: ui-lang-in .12s ease-out; }
@keyframes ui-lang-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-lang { inset: auto; margin: 4px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }
  .ui-lang-end { position-area: bottom span-left; }
}
@supports not (position-area: bottom) { .ui-lang::backdrop { background: var(--ui-overlay); } }
@media (prefers-reduced-motion: reduce) { .ui-lang[popover]:popover-open { animation: none; } .ui-lang-btn .ui-lang-chev { transition: none; } }


.ui-refinance-calc { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-refinance-calc .ui-refinance-calc-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-refinance-calc-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ui-refinance-calc-side { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-refinance-calc-side legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.ui-refinance-calc-field { display: grid; gap: 4px; min-width: 0; }
.ui-refinance-calc-field label { font-size: 13px; font-weight: 500; }
.ui-refinance-calc-field input { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-refinance-calc-field input:hover { border-color: var(--ui-strong); }
.ui-refinance-calc-field input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-refinance-calc-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-refinance-calc-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.ui-refinance-calc-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-refinance-calc-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-refinance-calc-out { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-refinance-calc-verdict { margin: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm); font-weight: 600; }
.ui-refinance-calc-good { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-refinance-calc-poor { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-refinance-calc-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; }
.ui-refinance-calc-sums dt { color: var(--ui-muted); }
.ui-refinance-calc-sums dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-refinance-calc-note { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-ccontrast { display: grid; gap: 16px; min-width: 0; max-width: 640px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-ccontrast .ui-ccontrast-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-ccontrast-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; }
.ui-ccontrast-field { display: grid; gap: 5px; min-width: 0; }
.ui-ccontrast-field label { font-size: 13px; font-weight: 500; }
.ui-ccontrast-box { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.ui-ccontrast-box:hover { border-color: var(--ui-strong); }
.ui-ccontrast-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-ccontrast-box input[type=text] { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 13px var(--ui-mono); }
.ui-ccontrast-box input[type=color] { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--ui-border); border-radius: 4px; background: none; cursor: pointer; }
.ui-ccontrast-box input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ui-ccontrast-box input[type=color]::-webkit-color-swatch { border: 0; }
.ui-ccontrast-bad .ui-ccontrast-box { border-color: var(--ui-danger); }
.ui-ccontrast-why { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-ccontrast-swap { align-self: start; margin-top: 24px; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-ccontrast-swap:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-ccontrast-swap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ccontrast-sample { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); overflow-wrap: anywhere; }
.ui-ccontrast-sample p { margin: 0; }
.ui-ccontrast-sample-large { font-size: 24px; line-height: 1.25; }
.ui-ccontrast-ratio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-ccontrast-ratio strong { color: var(--ui-fg); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-ccontrast-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-ccontrast-level { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 12px; }
.ui-ccontrast-level b { font-size: 13px; }
.ui-ccontrast-pass { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-ccontrast-fixes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-ccontrast-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.ui-ccontrast-chip { flex: none; width: 16px; height: 16px; border: 1px solid var(--ui-border); border-radius: 4px; }
.ui-ccontrast-fix code { font: 13px var(--ui-mono); }
.ui-ccontrast-fix small { color: var(--ui-muted); font-size: 12px; }
.ui-ccontrast-use { height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-ccontrast-use:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-ccontrast-use:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ccontrast-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 480px) { .ui-ccontrast-fields { grid-template-columns: minmax(0, 1fr); } .ui-ccontrast-swap { margin-top: 0; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .ui-ccontrast-box { transition: none; } }


.ui-sheet-host { display: contents; }
.ui-sheet {
  box-sizing: border-box; inset: auto 0 0 0; width: min(var(--w, 640px), 100vw); max-width: 100vw; height: var(--h); max-height: 100dvh;
  margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0;
  border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font); transition: height .22s cubic-bezier(.2, .8, .2, 1);
  --h: 50dvh;
}
.ui-sheet-full { --h: calc(100dvh - 16px); }
.ui-sheet-dragging { transition: none; }
.ui-sheet::backdrop { background: var(--ui-overlay); }
.ui-sheet[open] { display: flex; flex-direction: column; animation: ui-sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes ui-sheet-up { from { transform: translateY(100%); } }
.ui-sheet-grip {
  display: grid; place-items: center; flex: none; width: 100%; height: 22px; padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none;
}
.ui-sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); transition: background .15s, width .15s; }
.ui-sheet-grip:hover span { width: 48px; background: var(--ui-muted); }
.ui-sheet-grip:focus-visible { outline: none; }
.ui-sheet-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sheet-dragging .ui-sheet-grip { cursor: grabbing; }
.ui-sheet-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 12px 10px 20px; border-bottom: 1px solid var(--ui-border); }
.ui-sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-sheet-btn {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-sheet-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-sheet-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sheet-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.ui-sheet-full .ui-sheet-size svg { transform: rotate(180deg); }
.ui-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.ui-sheet-body > :first-child { margin-top: 0; }
.ui-sheet-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ui-sheet, .ui-sheet-btn svg { transition: none; } .ui-sheet[open] { animation: none; } }


.ui-twallet { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-twallet-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.ui-twallet-net { margin: 0 0 12px; color: var(--ui-muted); font-size: 13px; }
.ui-twallet-net[data-off] { color: var(--ui-fg); font-weight: 600; }
.ui-twallet-groups { display: grid; gap: 16px; }
.ui-twallet-day { margin: 0 0 6px; color: var(--ui-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.ui-twallet-stack { margin: 0; padding: 0; list-style: none; }
/* Each card lies on the one before, with its head showing: what the eye reads in a wallet. */
.ui-twallet-stack > li + li { margin-top: -40px; }
.ui-twallet-card {
  position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 0 10px; width: 100%; height: 116px; padding: 12px 14px;
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 -3px 10px rgb(0 0 0 / .1); -webkit-tap-highlight-color: transparent;
}
.ui-twallet-card:focus-visible { outline: none; box-shadow: var(--ui-focus); z-index: 1; }
.ui-twallet-card-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-twallet-card-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-twallet-card-where { grid-column: 1 / -1; color: var(--ui-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-twallet-card-show { grid-column: 1 / -1; align-self: end; margin-top: 18px; color: var(--ui-accent); font-size: 13px; font-weight: 600; }
.ui-twallet-past .ui-twallet-card-show { display: none; }
.ui-twallet-past { margin-top: 18px; border-top: 1px solid var(--ui-border); padding-top: 4px; }
.ui-twallet-past summary { display: flex; align-items: center; min-height: 44px; color: var(--ui-muted); font-weight: 600; cursor: pointer; }
.ui-twallet-past .ui-twallet-card { height: auto; min-height: 64px; box-shadow: none; opacity: .75; }
.ui-twallet-past .ui-twallet-stack { display: grid; gap: 6px; }
.ui-twallet-past .ui-twallet-stack > li + li { margin-top: 0; }
.ui-twallet-empty { padding: 20px; color: var(--ui-muted); text-align: center; }
/* The code's page: light whatever the theme, since a scanner reads dark on light. */
.ui-twallet-full {
  box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  overflow: hidden; border: 0; background: #fff; color: #111; font: 15px/1.35 var(--ui-font); overscroll-behavior: contain;
}
.ui-twallet-full[open] { display: flex; flex-direction: column; gap: 10px; }
.ui-twallet-full::backdrop { background: #fff; }
.ui-twallet-sheet {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; touch-action: pan-y; user-select: none; -webkit-touch-callout: none; will-change: transform; outline: none;
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.ui-twallet-sheet[data-dragging] { transition: none; }
.ui-twallet-code { display: grid; place-items: center; width: 100%; min-height: 0; }
.ui-twallet-code svg { display: block; width: min(90vw, 58dvh); height: auto; max-width: 100%; }
.ui-twallet-code .ui-barcode svg { width: 100%; height: 26dvh; }
.ui-twallet-code .ui-barcode { width: 100%; }
.ui-twallet-none { margin: 0; padding: 24px; color: #444; }
.ui-twallet-full-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
.ui-twallet-full-line { margin: 0; color: #333; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: center; }
.ui-twallet-full-line:empty { display: none; }
.ui-twallet-gone { margin: 0; padding: 2px 10px; border-radius: 999px; background: #8a1c1c; color: #fff; font-size: 13px; font-weight: 700; }
.ui-twallet-say { margin: 0; color: #444; font-size: 14px; text-align: center; }
.ui-twallet-say:empty { display: none; }
.ui-twallet-bar { flex: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ui-twallet-btn { box-sizing: border-box; min-height: 48px; padding: 0 8px; border: 1px solid #111; border-radius: 12px; background: #fff; color: #111; font: 600 15px/1 var(--ui-font); cursor: pointer; }
.ui-twallet-btn:disabled { opacity: .4; cursor: default; }
.ui-twallet-btn:focus-visible { outline: 3px solid #0a66ff; outline-offset: 2px; }
.ui-twallet-done { background: #111; color: #fff; }
/* With the room, days stand side by side, and a code stands by its details. */
@container (min-width: 620px) {
  .ui-twallet-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ui-twallet-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; justify-items: center; column-gap: 24px; }
  .ui-twallet-code { grid-column: 2; grid-row: 1 / span 5; }
  .ui-twallet-code svg { width: min(46vw, 70dvh); }
  .ui-twallet-bar { width: min(520px, 100%); margin: 0 auto; }
}
@media (hover: hover) { .ui-twallet-card:hover { border-color: var(--ui-strong); } }
@media (prefers-reduced-motion: reduce) { .ui-twallet-sheet { transition: none; } }


.ui-searchhead-demo-list { margin: 0; padding: 0; list-style: none; }
.ui-searchhead-demo-list li { border-bottom: 1px solid var(--ui-border); }
.ui-searchhead-demo-list a { box-sizing: border-box; display: flex; align-items: center; min-height: 48px; padding: 0 16px; color: var(--ui-accent); font: 15px var(--ui-font); text-decoration: none; }
.ui-searchhead-demo-list button { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--ui-fg); font: 15px var(--ui-font); text-align: start; cursor: pointer; }


.ui-geofence { position: relative; container-type: inline-size; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-geofence-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ui-geofence-bar h3 { margin: 0; font-size: 18px; font-weight: 700; }
.ui-geofence-btn {
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-geofence-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-geofence-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-geofence-say { margin: 0 0 10px; color: var(--ui-muted); font-size: 14px; }
.ui-geofence-say:empty { display: none; }
.ui-geofence-body { display: grid; gap: 12px; }
.ui-geofence-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-geofence-area {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; border: 1px solid var(--ui-border); border-left: 5px solid var(--t);
  border-radius: var(--ui-radius); background: var(--ui-surface); --t: var(--ui-strong);
}
.ui-geofence-area[data-state="inside"] { --t: var(--ui-success); }
.ui-geofence-area[data-state="outside"] { --t: var(--ui-muted); }
.ui-geofence-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-geofence-state { font-weight: 700; color: var(--t); }
.ui-geofence-far { grid-column: 1 / -1; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-geofence-log { margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-geofence-log li { padding: 4px 0; border-top: 1px solid var(--ui-border); }
.ui-geofence-log li:first-child { border-top: 0; }
/* With the room, the areas beside what has happened. */
@container (min-width: 620px) {
  .ui-geofence-body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}


.ui-qset { position: relative; color: var(--ui-fg); font: 15px/1.3 var(--ui-font); }
.ui-qset-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ui-qset-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-qset-edit { min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-qset-edit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-qset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 96px; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-qset-tile { position: relative; min-width: 0; border-radius: var(--ui-radius); background: var(--ui-subtle); color: var(--ui-fg); outline: none;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .15s, box-shadow .15s; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ui-qset-on { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-qset-off-limits { opacity: .62; }
.ui-qset-main { display: grid; align-content: space-between; justify-items: start; width: 100%; height: 100%; padding: 12px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-qset-main:focus-visible, .ui-qset-tile:focus-visible, .ui-qset-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-qset-name { display: block; width: 100%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-qset-state { display: block; width: 100%; font-size: 13px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-qset-more { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius); background: none; color: inherit; cursor: pointer; touch-action: manipulation; }
.ui-qset-moves { position: absolute; inset: auto 6px 6px 6px; display: none; gap: 6px; }
.ui-qset-move { flex: 1; min-height: 44px; min-width: 44px; padding: 0 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-qset-move:disabled { opacity: .5; cursor: default; }
.ui-qset-move:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* In Edit a tile is for dragging: its own surface takes the finger. */
.ui-qset-editing .ui-qset-tile { touch-action: none; cursor: grab; outline: 1px dashed var(--ui-strong); outline-offset: -1px; }
.ui-qset-editing .ui-qset-main { pointer-events: none; }
.ui-qset-editing .ui-qset-state, .ui-qset-editing .ui-qset-more, .ui-qset-editing .ui-qset-main svg { display: none; }
.ui-qset-editing .ui-qset-moves { display: flex; }
.ui-qset-pressing { transform: scale(.97); }
.ui-qset-lifted { z-index: 3; transition: background .15s, box-shadow .15s; box-shadow: var(--ui-shadow-lg); cursor: grabbing; }
.ui-qset-still .ui-qset-tile { transition: none; }
.ui-qset-dlg { width: 100%; max-width: none; max-height: 80dvh; margin: auto 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); overscroll-behavior: contain; }
.ui-qset-dlg::backdrop { background: var(--ui-overlay); }
.ui-qset-dlg h3 { margin: 0 0 4px; font-size: 18px; }
.ui-qset-dlg p { margin: 0 0 10px; color: var(--ui-muted); font-size: 14px; }
.ui-qset-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; margin-bottom: 6px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 15px/1.2 var(--ui-font); text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-qset-row[aria-pressed="true"], .ui-qset-row[aria-checked="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-qset-row:disabled { opacity: .55; cursor: default; }
.ui-qset-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-qset-close { justify-content: center; margin: 6px 0 0; }
/* A <dialog> stands over the whole window, so the window's width is the one to ask, Split View included. */
@media (min-width: 600px) {
  .ui-qset-dlg { inset: var(--ui-qset-top, 50%) auto auto var(--ui-qset-left, 50%); width: 320px; margin: 0; border-radius: calc(var(--ui-radius) + 6px); padding-bottom: 16px; }
  .ui-qset-dlg::backdrop { background: transparent; }
}
@media (hover: hover) {
  .ui-qset-edit:hover, .ui-qset-move:not(:disabled):hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-qset-tile { transition: none; } }


.ui-playlist { display: grid; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); overflow: hidden; }
.ui-playlist-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-playlist-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.ui-playlist-total { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-playlist-play { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg); cursor: pointer; }
.ui-playlist-play:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-playlist-play svg { width: 16px; height: 16px; }
.ui-playlist-list { margin: 0; padding: 4px; list-style: none; }
.ui-playlist-track {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ui-playlist-track:hover { background: var(--ui-subtle); }
.ui-playlist-track:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-playlist-track[aria-current="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-playlist-n { color: var(--ui-muted); font-variant-numeric: tabular-nums; text-align: center; }
.ui-playlist-track[aria-current="true"] .ui-playlist-n { color: inherit; }
.ui-playlist-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ui-playlist-bars i { width: 3px; height: 40%; background: currentColor; border-radius: 1px; }
.ui-playlist-on .ui-playlist-bars i { animation: ui-playlist-bar .8s ease-in-out infinite alternate; }
.ui-playlist-on .ui-playlist-bars i:nth-child(2) { animation-delay: .2s; }
.ui-playlist-on .ui-playlist-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes ui-playlist-bar { from { height: 25%; } to { height: 100%; } }
.ui-playlist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-playlist-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); font-size: 12px; }
.ui-playlist-track[aria-current="true"] .ui-playlist-artist { color: inherit; opacity: .8; }
.ui-playlist-len { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-playlist-track[aria-current="true"] .ui-playlist-len { color: inherit; }
@media (prefers-reduced-motion: reduce) { .ui-playlist-on .ui-playlist-bars i { animation: none; height: 70%; } }


.ui-farecal { display: grid; gap: 10px; min-width: 0; max-width: 520px; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.3 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-farecal-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ui-farecal-title { display: grid; justify-items: center; text-align: center; }
.ui-farecal .ui-farecal-month { margin: 0; font-size: 16px; font-weight: 650; }
.ui-farecal-from { color: var(--ui-muted); font-size: 12px; }
.ui-farecal-from b { color: var(--ui-success); font-weight: 650; }
.ui-farecal-nav { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); cursor: pointer; }
.ui-farecal-nav svg { width: 16px; height: 16px; }
.ui-farecal-nav:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-farecal-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-farecal-nav:disabled { opacity: .35; cursor: not-allowed; }
.ui-farecal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ui-farecal-wd { padding: 2px 0 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.ui-farecal-day { --ui-farecal-k: var(--ui-fg); position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 0; height: 54px;
  padding: 2px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.1 var(--ui-font);
  cursor: pointer; transition: border-color .12s, background .12s; }
.ui-farecal-day b { font-weight: 600; }
.ui-farecal-day span { overflow: hidden; max-width: 100%; color: var(--ui-farecal-k); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-farecal-low { --ui-farecal-k: var(--ui-success); }
.ui-farecal-high { --ui-farecal-k: var(--ui-danger); }
.ui-farecal-mid { --ui-farecal-k: var(--ui-muted); }
.ui-farecal-best { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-farecal-best::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-success); }
.ui-farecal-day:hover:not([aria-disabled="true"]) { border-color: var(--ui-accent); }
.ui-farecal-day:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-farecal-day[aria-disabled="true"] { border-color: transparent; background: var(--ui-subtle); color: var(--ui-muted); cursor: not-allowed; }
.ui-farecal-day[aria-disabled="true"] span { color: var(--ui-muted); font-weight: 400; }
.ui-farecal-day[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-farecal-day[aria-pressed="true"] span { color: var(--ui-accent-fg); }
.ui-farecal-day[aria-pressed="true"]::after { background: var(--ui-accent-fg); }
.ui-farecal-today b { text-decoration: underline; text-underline-offset: 2px; }
.ui-farecal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.ui-farecal-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-farecal-key li { display: inline-flex; align-items: center; gap: 5px; }
.ui-farecal-key li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-farecal-k); }
.ui-farecal-picked { font-size: 13px; font-weight: 600; }
@media (max-width: 420px) { .ui-farecal { padding: 12px 8px; } .ui-farecal-day { height: 48px; } .ui-farecal-day span { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .ui-farecal-day { transition: none; } }


.ui-voice-notes { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-voice-notes-inner { display: grid; gap: 12px; }
.ui-voice-notes-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; }
.ui-voice-notes-row { position: relative; display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 4px 8px 4px 6px; }
.ui-voice-notes-row + .ui-voice-notes-row { border-top: 1px solid var(--ui-border); }
.ui-voice-notes-row[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-voice-notes-play { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-accent); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-voice-notes-play:disabled { color: var(--ui-strong); cursor: default; }
.ui-voice-notes-play svg { width: 26px; height: 26px; }
.ui-voice-notes-play .ui-voice-notes-pause { display: none; }
.ui-voice-notes-play[aria-pressed="true"] .ui-voice-notes-pause { display: block; }
.ui-voice-notes-play[aria-pressed="true"] .ui-voice-notes-tri { display: none; }
.ui-voice-notes-open { flex: 1; min-width: 0; min-height: 48px; padding: 4px 6px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-voice-notes-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-voice-notes-meta { display: block; color: var(--ui-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-voice-notes-len { flex: none; color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-voice-notes-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ui-accent); transform-origin: left; }
.ui-voice-notes-none { padding: 26px 16px; color: var(--ui-muted); text-align: center; }
.ui-voice-notes-player { position: sticky; bottom: max(0px, env(safe-area-inset-bottom)); z-index: 2; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-voice-notes-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ui-voice-notes-name { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-voice-notes-btn { display: grid; flex: none; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-voice-notes-btn svg { width: 22px; height: 22px; }
.ui-voice-notes-field { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }
/* The whole 44 px is the bar to a finger; only the middle is drawn. Sideways is the bar's, up and down the page's. */
.ui-voice-notes-scrub { position: relative; height: 44px; outline: none; cursor: pointer; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ui-voice-notes-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--ui-border); }
/* The share is a variable on the bar, as a handler moves these two: a style= here would be rewritten under the finger. */
.ui-voice-notes-fill { position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--ui-accent); transform: scaleX(var(--share, 0)); transform-origin: left; }
.ui-voice-notes-thumb { position: absolute; top: 14px; left: calc(var(--share, 0) * 100%); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ui-accent); box-shadow: var(--ui-shadow); transition: transform .12s; }
.ui-voice-notes-scrub:focus-visible .ui-voice-notes-thumb { box-shadow: var(--ui-focus); }
.ui-voice-notes-held .ui-voice-notes-thumb { transform: scale(1.4); }
.ui-voice-notes-scrub[aria-disabled="true"] { cursor: default; opacity: .5; }
.ui-voice-notes-times { display: flex; justify-content: space-between; margin-top: -8px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-voice-notes-keys { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ui-voice-notes-keys .ui-voice-notes-play { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-voice-notes-script { display: grid; gap: 2px; max-height: 26dvh; overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; border-top: 1px solid var(--ui-border); }
.ui-voice-notes-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-voice-notes-seg { display: flex; gap: 8px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-voice-notes-seg[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-voice-notes-seg span:first-child { flex: none; width: 40px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.ui-voice-notes-ask { min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-voice-notes-say { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-voice-notes-say:empty { display: none; }
.ui-voice-notes-say[data-bad] { color: var(--ui-danger); }
.ui-voice-notes :is(.ui-voice-notes-play, .ui-voice-notes-open, .ui-voice-notes-btn, .ui-voice-notes-seg, .ui-voice-notes-ask):focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* A tablet reads and listens at once: the player beside the list, the transcript as long as it likes. */
@container (min-width: 640px) {
  .ui-voice-notes-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 16px; }
  .ui-voice-notes-player { position: sticky; top: 8px; bottom: auto; }
  .ui-voice-notes-script { max-height: 60dvh; }
}
@media (hover: hover) {
  .ui-voice-notes-btn:hover, .ui-voice-notes-seg:hover, .ui-voice-notes-open:hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-voice-notes-thumb { transition: none; } }


.ui-sktable { width: 100%; border-collapse: collapse; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  overflow: hidden; --h: 44px; }
.ui-sktable-sm { --h: 36px; }
.ui-sktable-lg { --h: 54px; }
.ui-sktable table { width: 100%; border-collapse: collapse; }
.ui-sktable th, .ui-sktable td { height: var(--h); padding: 0 14px; border-bottom: 1px solid var(--ui-border); text-align: left; }
.ui-sktable tr:last-child td { border-bottom: 0; }
.ui-sktable th { background: var(--ui-subtle); }
.ui-sktable-striped tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ui-subtle) 50%, transparent); }
.ui-sktable-bar { display: block; height: .8em; border-radius: 4px; font-size: 15px;
  background: linear-gradient(90deg, var(--ui-subtle) 0%, color-mix(in srgb, var(--ui-subtle) 55%, var(--ui-strong)) 50%, var(--ui-subtle) 100%);
  background-size: 200% 100%; animation: ui-sktable-shine 1.4s ease-in-out infinite; }
.ui-sktable th .ui-sktable-bar { height: .7em; background: linear-gradient(90deg, var(--ui-strong) 0%, color-mix(in srgb, var(--ui-strong) 60%, var(--ui-subtle)) 50%, var(--ui-strong) 100%);
  background-size: 200% 100%; opacity: .6; }
@keyframes ui-sktable-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-sktable-bar { animation: none; background: var(--ui-subtle); } }


html.ui-phone-shell-locked, html.ui-phone-shell-locked body { overflow: hidden; overscroll-behavior: none; }
/* Moved by hand as the keyboard comes and goes, so it has no style attribute in its markup: one would be written again on any change. */
.ui-phone-shell { position: fixed; inset: 0; z-index: 20; container-type: inline-size; box-sizing: border-box; overflow: hidden; overscroll-behavior: none; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-phone-shell-frame { display: grid; grid-template: "head" auto "main" minmax(0, 1fr) "tabs" auto / minmax(0, 1fr); height: 100%; min-height: 0; }
.ui-phone-shell-head {
  grid-area: head; display: flex; align-items: center; gap: 4px; box-sizing: content-box; min-height: 52px; min-width: 0;
  padding: var(--ui-safe-top, env(safe-area-inset-top, 0px)) max(8px, var(--ui-safe-right, env(safe-area-inset-right, 0px))) 0 max(8px, var(--ui-safe-left, env(safe-area-inset-left, 0px)));
  border-bottom: 1px solid transparent; background: var(--ui-surface); transition: border-color .15s;
}
.ui-phone-shell-scrolled { border-bottom-color: var(--ui-border); }
.ui-phone-shell-back {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); cursor: pointer;
}
.ui-phone-shell-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-phone-shell-back svg { width: 24px; height: 24px; }
.ui-phone-shell-words { flex: 1; min-width: 0; padding: 0 8px; }
.ui-phone-shell-words h1 { margin: 0; overflow: hidden; font-size: 18px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ui-phone-shell-words p { margin: 0; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-phone-shell-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.ui-phone-shell-scroll {
  grid-area: main; box-sizing: border-box; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0 var(--ui-safe-right, env(safe-area-inset-right, 0px)) 0 var(--ui-safe-left, env(safe-area-inset-left, 0px));
}
.ui-phone-shell-scroll:focus { outline: none; }
.ui-phone-shell-tabs {
  grid-area: tabs; display: flex; justify-content: space-around; gap: 2px; min-width: 0;
  padding: 4px max(4px, var(--ui-safe-right, env(safe-area-inset-right, 0px))) max(4px, var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px))) max(4px, var(--ui-safe-left, env(safe-area-inset-left, 0px)));
  border-top: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-phone-shell-typing .ui-phone-shell-tabs { display: none; }
.ui-phone-shell-tab {
  position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; max-width: 120px; min-height: 50px; padding: 4px 2px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: 500 11px/1.2 var(--ui-font); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-phone-shell-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-phone-shell-tab[aria-current="page"] { color: var(--ui-accent); }
.ui-phone-shell-icon { position: relative; display: inline-grid; place-items: center; width: 28px; height: 26px; font-size: 20px; line-height: 1; }
.ui-phone-shell-icon svg { width: 24px; height: 24px; }
.ui-phone-shell-badge { position: absolute; left: 60%; top: -4px; min-width: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--ui-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.ui-phone-shell-dot { width: 10px; min-width: 0; height: 10px; padding: 0; top: -1px; }
.ui-phone-shell-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (min-width: 700px) {
  .ui-phone-shell-frame { grid-template: "tabs head" auto "tabs main" minmax(0, 1fr) / auto minmax(0, 1fr); }
  .ui-phone-shell-tabs, .ui-phone-shell-typing .ui-phone-shell-tabs {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; width: 84px; box-sizing: content-box; overflow-y: auto;
    padding: max(10px, var(--ui-safe-top, env(safe-area-inset-top, 0px))) 6px max(10px, var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px))) max(6px, var(--ui-safe-left, env(safe-area-inset-left, 0px)));
    border-top: 0; border-right: 1px solid var(--ui-border);
  }
  .ui-phone-shell-tab { flex: none; max-width: none; min-height: 60px; font-size: 12px; }
  .ui-phone-shell-tab[aria-current="page"] { background: var(--ui-accent-soft); }
  .ui-phone-shell-railed .ui-phone-shell-head { padding-left: 12px; }
  .ui-phone-shell-railed .ui-phone-shell-scroll { padding-left: 0; padding-bottom: var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px)); }
}
@media (hover: hover) { .ui-phone-shell-tab:hover { color: var(--ui-fg); } }
@media (prefers-reduced-motion: reduce) { .ui-phone-shell-head { transition: none; } }


.ui-bullets { margin: 0; padding: 0; list-style: none; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); --ui-bullet: "•"; --ui-bullet-color: var(--ui-muted); }
.ui-bullets li { position: relative; padding-left: 1.5em; margin: .35em 0; overflow-wrap: anywhere; }
.ui-bullets li::before { content: var(--ui-bullet); position: absolute; left: .1em; top: 0; width: 1em; text-align: center;
  color: var(--ui-bullet-color); font-weight: 600; }
.ui-bullets-check { --ui-bullet: "✓"; }
.ui-bullets-arrow { --ui-bullet: "→"; }
.ui-bullets-star { --ui-bullet: "★"; }
.ui-bullets-dash { --ui-bullet: "–"; }
.ui-bullets-none { --ui-bullet: ""; }
.ui-bullets-none li { padding-left: 0; }
.ui-bullets-accent { --ui-bullet-color: var(--ui-accent); }
.ui-bullets-success { --ui-bullet-color: var(--ui-success); }
.ui-bullets-warning { --ui-bullet-color: var(--ui-warning); }
.ui-bullets-danger { --ui-bullet-color: var(--ui-danger); }
.ui-bullets-fg { --ui-bullet-color: var(--ui-fg); }
.ui-bullets-tight li { margin: .1em 0; }
.ui-bullets-loose li { margin: .75em 0; }
.ui-bullets-sm { font-size: 13px; }
.ui-bullets-lg { font-size: 17px; }
.ui-bullets li > .ui-bullets { margin-top: .35em; }


html:has(.ui-adaptive-dialog[open]) { overflow: hidden; }
.ui-adaptive-dialog-host { display: contents; }
.ui-adaptive-dialog {
  position: fixed; inset: 0 0 var(--ui-adaptive-dialog-kb, 0px) 0; box-sizing: border-box; flex-direction: column;
  width: min(var(--ui-adaptive-dialog-w, 520px), calc(100vw - 32px)); max-width: none; height: fit-content; max-height: calc(100dvh - var(--ui-adaptive-dialog-kb, 0px) - 32px);
  margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font); overscroll-behavior: contain;
  opacity: 0; transform: scale(.96);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .18s, overlay .24s allow-discrete, display .24s allow-discrete;
}
.ui-adaptive-dialog[open] { display: flex; opacity: 1; transform: none; }
@starting-style { .ui-adaptive-dialog[open] { opacity: 0; transform: scale(.96); } }
.ui-adaptive-dialog::backdrop { background: var(--ui-overlay); }
.ui-adaptive-dialog-sheet {
  inset: auto 0 var(--ui-adaptive-dialog-kb, 0px) 0; width: 100%; max-height: calc(100dvh - var(--ui-adaptive-dialog-kb, 0px) - max(12px, env(safe-area-inset-top)));
  margin: 0; border-width: 1px 0 0; border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0;
  box-shadow: var(--ui-shadow-lg), 0 120px 0 0 var(--ui-surface); opacity: 1; transform: translateY(100%);
}
.ui-adaptive-dialog-sheet[open] { transform: translateY(0); }
@starting-style { .ui-adaptive-dialog-sheet[open] { opacity: 1; transform: translateY(100%); } }
.ui-adaptive-dialog-grip { display: none; flex: none; align-items: center; justify-content: center; height: 24px; touch-action: none; }
.ui-adaptive-dialog-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-adaptive-dialog-sheet .ui-adaptive-dialog-grip { display: flex; }
.ui-adaptive-dialog-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--ui-border); }
.ui-adaptive-dialog-sheet .ui-adaptive-dialog-head { padding-top: 0; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.ui-adaptive-dialog-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-adaptive-dialog-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
@media (hover: hover) { .ui-adaptive-dialog-close:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-adaptive-dialog-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-adaptive-dialog-close svg { width: 18px; height: 18px; }
.ui-adaptive-dialog-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 20px; }
.ui-adaptive-dialog-body > :first-child { margin-top: 0; }
.ui-adaptive-dialog-body > :last-child { margin-bottom: 0; }
.ui-adaptive-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex: none; padding: 12px 20px; border-top: 1px solid var(--ui-border); }
.ui-adaptive-dialog-sheet .ui-adaptive-dialog-foot, .ui-adaptive-dialog-sheet .ui-adaptive-dialog-body:last-child { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .ui-adaptive-dialog { transition: none; } }


.ui-fullscreen-modal-host { display: contents; }
.ui-fullscreen-modal {
  box-sizing: border-box; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-fullscreen-modal[open] { display: flex; flex-direction: column; animation: ui-fullscreen-modal-in .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes ui-fullscreen-modal-in { from { opacity: 0; transform: translateY(24px); } }
.ui-fullscreen-modal::backdrop { background: var(--ui-overlay); }
:root:has(.ui-fullscreen-modal[open]) { overflow: hidden; }
.ui-fullscreen-modal-bar {
  display: flex; align-items: center; gap: 10px; flex: none; min-height: 56px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
}
.ui-fullscreen-modal-bar h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ui-fullscreen-modal-x {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); cursor: pointer;
}
.ui-fullscreen-modal-x:hover { background: var(--ui-subtle); }
.ui-fullscreen-modal-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fullscreen-modal-x svg { width: 20px; height: 20px; }
.ui-fullscreen-modal-done {
  flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 14px/1 var(--ui-font); cursor: pointer;
}
.ui-fullscreen-modal-done:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-fullscreen-modal-done:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fullscreen-modal-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ui-fullscreen-modal-inner { box-sizing: border-box; width: min(100%, var(--w, 720px)); margin: 0 auto; padding: 24px 20px 40px; }
.ui-fullscreen-modal-inner > :first-child { margin-top: 0; }
.ui-fullscreen-modal-inner > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ui-fullscreen-modal[open] { animation: none; } }


.ui-article-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); container-type: inline-size; }
.ui-article-card-img { flex: none; aspect-ratio: 16 / 9; background: var(--ui-subtle); overflow: hidden; }
.ui-article-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ui-article-card:hover .ui-article-card-img img { transform: scale(1.03); }
.ui-article-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.ui-article-card-cat { align-self: flex-start; color: var(--ui-accent); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
a.ui-article-card-cat:hover { text-decoration: underline; }
.ui-article-card-title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; }
.ui-article-card-title a { color: inherit; text-decoration: none; }
.ui-article-card-title a::after { content: ""; position: absolute; inset: 0; }
.ui-article-card:hover .ui-article-card-title { color: var(--ui-accent); }
.ui-article-card:has(.ui-article-card-title a:focus-visible) { box-shadow: var(--ui-focus); border-color: var(--ui-accent); }
.ui-article-card-title a:focus-visible { outline: none; }
.ui-article-card-excerpt { margin: 0; color: var(--ui-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ui-article-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.ui-article-card-tags li { padding: 1px 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; }
.ui-article-card-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; color: var(--ui-muted); font-size: 13px; }
.ui-article-card-meta > .ui-article-card-pic { --s: 26px; }
.ui-article-card-author { color: var(--ui-fg); font-weight: 500; }
.ui-article-card-when { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-article-card-when span + span::before { content: "·"; margin-right: 4px; }
.ui-article-card-horizontal { flex-direction: row; }
.ui-article-card-horizontal .ui-article-card-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 160px; }
@container (max-width: 480px) { .ui-article-card-horizontal { flex-direction: column; } .ui-article-card-horizontal .ui-article-card-img { flex: none; aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .ui-article-card-img img { transition: none; } }


.ui-news-list { margin: 0; padding: 0; list-style: none; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); counter-reset: ui-news; }
.ui-news-list-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
.ui-news-list-item:last-child { border-bottom: 0; }
.ui-news-list-dense .ui-news-list-item { padding: 6px 0; gap: 10px; }
.ui-news-list-rank { flex: none; width: 1.6em; color: var(--ui-muted); font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-news-list-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ui-news-list-title { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.35; }
.ui-news-list-title a { color: inherit; text-decoration: none; }
.ui-news-list-title a::after { content: ""; position: absolute; inset: 0; }
.ui-news-list-item:hover .ui-news-list-title { color: var(--ui-accent); }
.ui-news-list-item:has(a:focus-visible) { box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-news-list-title a:focus-visible { outline: none; }
.ui-news-list-meta { display: flex; flex-wrap: wrap; gap: 4px; color: var(--ui-muted); font-size: 12px; }
.ui-news-list-meta span + span::before, .ui-news-list-meta span + time::before { content: "·"; margin-right: 4px; }
.ui-news-list-pic { flex: none; width: 64px; height: 48px; border-radius: var(--ui-radius-sm); object-fit: cover; background: var(--ui-subtle); }
.ui-news-list-dense .ui-news-list-pic { width: 48px; height: 36px; }


.ui-paretoc {
  --ui-paretoc-1: light-dark(#2a78d6, #3987e5); --ui-paretoc-2: light-dark(#eb6834, #d95926);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-paretoc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-paretoc-s1 { --c: var(--ui-paretoc-1); } .ui-paretoc-s2 { --c: var(--ui-paretoc-2); }
.ui-paretoc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-paretoc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-paretoc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-paretoc-lkey { width: 14px; height: 3px; border-radius: 2px; }
.ui-paretoc-tkey { width: 14px; height: 0; border-top: 1.5px dashed var(--ui-muted); }
.ui-paretoc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-paretoc-y { position: relative; min-width: 24px; }
.ui-paretoc-y span { position: absolute; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-paretoc-left span { right: 0; }
.ui-paretoc-right span { left: 0; }
.ui-paretoc-plot { position: relative; }
.ui-paretoc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-paretoc-grid.ui-paretoc-zero { background: var(--ui-strong); }
.ui-paretoc-cut { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ui-muted); pointer-events: none; }
.ui-paretoc-cut span { position: absolute; right: 4px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: var(--ui-bg);
  color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-paretoc-cols { position: absolute; inset: 0; display: flex; }
.ui-paretoc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-paretoc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-paretoc-bar { position: absolute; left: 50%; bottom: 0; width: min(44px, 70%); height: var(--b); min-height: 1px;
  background: var(--ui-paretoc-1); border-radius: 4px 4px 0 0; transform: translateX(-50%); }
.ui-paretoc-few { background: var(--ui-paretoc-1); }
.ui-paretoc-many { background: color-mix(in srgb, var(--ui-paretoc-1) 38%, var(--ui-bg)); }
.ui-paretoc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-paretoc-line { fill: none; stroke: var(--ui-paretoc-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-paretoc-pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--ui-paretoc-2); box-shadow: 0 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-paretoc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 140px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-paretoc-col:first-child .ui-paretoc-tip { left: 0; transform: translateY(-100%); }
.ui-paretoc-col:last-child .ui-paretoc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-paretoc-col:hover .ui-paretoc-tip { display: block; }
.ui-paretoc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-paretoc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-paretoc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-paretoc-x { display: flex; margin-top: 6px; }
.ui-paretoc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }


.ui-rich-text-editor { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-rich-text-editor-label { font-size: 13px; font-weight: 500; }
.ui-rich-text-editor-req { margin-left: 2px; color: var(--ui-danger); }
.ui-rich-text-editor-frame { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ui-rich-text-editor-frame:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rich-text-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-rich-text-editor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--ui-border); }
.ui-rich-text-editor-tool {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 600 13px/1 var(--ui-font); cursor: pointer;
}
.ui-rich-text-editor-tool:hover { background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-border); }
.ui-rich-text-editor-tool[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-rich-text-editor-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rich-text-editor-tool:disabled { opacity: .45; cursor: not-allowed; }
.ui-rich-text-editor-tool svg { width: 16px; height: 16px; }
.ui-rich-text-editor-tool i { font-style: italic; font-family: Georgia, serif; font-size: 15px; }
.ui-rich-text-editor-tool u { text-decoration: underline; }
.ui-rich-text-editor-tool s { text-decoration: line-through; }
.ui-rich-text-editor-area {
  position: relative; min-height: var(--ui-rich-text-editor-h, 120px); padding: 10px 12px; outline: none; line-height: 1.6; overflow-wrap: anywhere;
}
.ui-rich-text-editor-area:empty::before, .ui-rich-text-editor-area:has(> br:only-child)::before { content: attr(data-placeholder); color: var(--ui-muted); pointer-events: none; position: absolute; }
.ui-rich-text-editor-area > :first-child { margin-top: 0; }
.ui-rich-text-editor-area > :last-child { margin-bottom: 0; }
.ui-rich-text-editor-area h1, .ui-rich-text-editor-area h2, .ui-rich-text-editor-area h3 { margin: .8em 0 .4em; line-height: 1.25; }
.ui-rich-text-editor-area blockquote { margin: .6em 0; padding: 0 0 0 12px; border-left: 3px solid var(--ui-border); color: var(--ui-muted); }
.ui-rich-text-editor-area a { color: var(--ui-accent); }
.ui-rich-text-editor-area[contenteditable="false"] { opacity: .55; cursor: not-allowed; }
.ui-rich-text-editor-invalid .ui-rich-text-editor-frame { border-color: var(--ui-danger); }
.ui-rich-text-editor-hint, .ui-rich-text-editor-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-rich-text-editor-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-rich-text-editor-frame { transition: none; } }


.ui-emoji-picker { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-emoji-picker-legend { padding: 0; font-size: 13px; font-weight: 500; }
.ui-emoji-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-emoji-picker-panel { display: grid; gap: 8px; width: 100%; max-width: 360px; padding: 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-emoji-picker-search {
  box-sizing: border-box; width: 100%; height: 34px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font);
}
.ui-emoji-picker-search::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-emoji-picker-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-emoji-picker-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ui-border); }
.ui-emoji-picker-tab {
  flex: 1; display: grid; place-items: center; height: 32px; padding: 0; border: 0; border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
  background: none; font-size: 17px; line-height: 1; cursor: pointer; opacity: .6; transition: opacity .15s, background .15s;
}
.ui-emoji-picker-tab:hover { opacity: 1; background: var(--ui-subtle); }
.ui-emoji-picker-tab[aria-selected="true"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-emoji-picker-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-emoji-picker-heading { margin: 0; font-size: 12px; font-weight: 600; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .05em; }
.ui-emoji-picker-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; max-height: 210px; overflow: auto; padding: 2px; }
.ui-emoji-picker-opt { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--ui-radius-sm); font-size: 22px; line-height: 1; cursor: pointer; }
.ui-emoji-picker-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-emoji-picker-opt:hover { background: var(--ui-subtle); }
.ui-emoji-picker-opt:has(input:checked) { background: var(--ui-accent-soft); box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-emoji-picker-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-emoji-picker-empty { grid-column: 1 / -1; padding: 14px 4px; color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-emoji-picker-status { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12px; color: var(--ui-muted); }
.ui-emoji-picker-status b { font-size: 20px; font-weight: 400; line-height: 1; }
.ui-emoji-picker-invalid .ui-emoji-picker-panel { border-color: var(--ui-danger); }
.ui-emoji-picker-hint, .ui-emoji-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-emoji-picker-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-emoji-picker-tab { transition: none; } }


.ui-url-insp { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-url-insp .ui-url-insp-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-url-insp-field { display: grid; gap: 5px; min-width: 0; }
.ui-url-insp-field label { font-size: 13px; font-weight: 500; }
.ui-url-insp-input { box-sizing: border-box; width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 13px var(--ui-mono); }
.ui-url-insp-input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-url-insp-input[aria-invalid] { border-color: var(--ui-danger); }
.ui-url-insp-kind { margin: 0; font-weight: 600; }
.ui-url-insp-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-url-insp-list li { padding: 6px 10px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); overflow-wrap: anywhere; }
.ui-url-insp-list.ui-url-insp-bad li { border-left-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-url-insp-parts { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.ui-url-insp-part { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.ui-url-insp-parts dt { color: var(--ui-muted); }
.ui-url-insp-parts dd { margin: 0; font-family: var(--ui-mono); overflow-wrap: anywhere; }
.ui-url-insp-scroll { position: relative; overflow-x: auto; }
.ui-url-insp-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-url-insp table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-url-insp caption { padding: 0 0 6px; text-align: left; font-weight: 600; }
.ui-url-insp th, .ui-url-insp td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: middle; }
.ui-url-insp thead th { color: var(--ui-muted); font-weight: 500; }
.ui-url-insp td .ui-url-insp-input { min-width: 110px; }
.ui-url-insp-flag { display: inline-block; margin: 1px 4px 1px 0; padding: 0 6px; border-radius: 999px; background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-url-insp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-url-insp-btn { height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-url-insp-btn:hover { background: var(--ui-subtle); }
.ui-url-insp-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-url-insp-out { margin: 0; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 13px/1.5 var(--ui-mono); overflow-wrap: anywhere; }
.ui-url-insp-note { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-image-hotspots { position: relative; display: inline-block; width: fit-content; max-width: 100%; overflow: visible; border-radius: var(--ui-radius); font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-image-hotspots img { display: block; max-width: 100%; height: auto; border-radius: var(--ui-radius); }
.ui-image-hotspots-points { margin: 0; padding: 0; list-style: none; }
.ui-image-hotspots-pin-at { position: absolute; width: 0; height: 0; }
.ui-image-hotspots-pin {
  position: absolute; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; transform: translate(-50%, -50%);
  border: 2px solid #fff; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 700 12px/1 var(--ui-font); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 35%, transparent), var(--ui-shadow);
  cursor: pointer; transition: transform .15s;
}
.ui-image-hotspots-pin:hover, .ui-image-hotspots-pin:focus { transform: translate(-50%, -50%) scale(1.15); }
.ui-image-hotspots-pin:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ui-bg), 0 0 0 7px var(--ui-accent); }
.ui-image-hotspots-pin-note {
  position: absolute; z-index: 2; bottom: 20px; left: 50%; width: max-content; max-width: 240px; padding: 8px 12px;
  transform: translateX(-50%); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); text-align: left; visibility: hidden; opacity: 0; transition: opacity .15s;
}
.ui-image-hotspots-pin-note strong { display: block; font-weight: 600; }
.ui-image-hotspots-pin-note span { color: var(--ui-muted); }
.ui-image-hotspots-pin-at:hover .ui-image-hotspots-pin-note, .ui-image-hotspots-pin:focus + .ui-image-hotspots-pin-note { visibility: visible; opacity: 1; }
.ui-image-hotspots-pin-below .ui-image-hotspots-pin-note { bottom: auto; top: 20px; }
.ui-image-hotspots-pin-left .ui-image-hotspots-pin-note { left: auto; right: -14px; transform: none; }
.ui-image-hotspots-pin-right .ui-image-hotspots-pin-note { left: -14px; transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-image-hotspots-pin, .ui-image-hotspots-pin-note { transition: none; } }


.ui-time-wheels { container-type: inline-size; min-width: 0; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-time-wheels-body { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ui-time-wheels-set { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.ui-time-wheels-out { display: block; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-time-wheels-next { margin-left: 6px; font-weight: 500; color: var(--ui-muted); }
@container (min-width: 440px) {
  .ui-time-wheels-body { grid-template-columns: minmax(150px, 220px) minmax(0, 320px); justify-content: center; align-items: center; gap: 16px; }
  .ui-time-wheels-out { padding: 18px 12px; border-radius: var(--ui-radius); background: var(--ui-subtle); font-size: 26px; font-weight: 700; }
  .ui-time-wheels-next { display: block; margin: 0; font-size: 14px; }
}


.ui-anomaly-finder { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-anomaly-finder .ui-anomaly-finder-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-anomaly-finder-chart { display: block; width: 100%; max-width: 640px; height: auto; }
.ui-anomaly-finder-line { fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-anomaly-finder-gap { fill: var(--ui-subtle); }
.ui-anomaly-finder-shift { stroke: var(--ui-warning); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ui-anomaly-finder-dot { fill: var(--ui-danger); stroke: var(--ui-surface); stroke-width: 2; }
.ui-anomaly-finder-mark { fill: var(--ui-fg); font: 600 12px var(--ui-font); text-anchor: middle; paint-order: stroke; stroke: var(--ui-surface); stroke-width: 4px; }
.ui-anomaly-finder-axis { display: flex; justify-content: space-between; gap: 12px; max-width: 640px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-anomaly-finder-control { display: grid; gap: 4px; font-size: 13px; }
.ui-anomaly-finder-control input { width: 100%; max-width: 320px; margin: 0; accent-color: var(--ui-accent); }
.ui-anomaly-finder-live { display: grid; gap: 6px; min-width: 0; }
.ui-anomaly-finder-say { margin: 0; font-weight: 600; }
.ui-anomaly-finder-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-anomaly-finder-list li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ui-border); }
.ui-anomaly-finder-list li:last-child { border-bottom: 0; }
.ui-anomaly-finder-num { flex: none; min-width: 20px; color: var(--ui-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-anomaly-finder-kind { flex: none; min-width: 58px; font-weight: 600; }
.ui-anomaly-finder-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-anomaly-finder-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-anomaly-finder-data summary { color: var(--ui-muted); font-size: 13px; cursor: pointer; }
.ui-anomaly-finder-data summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-anomaly-finder-box { box-sizing: border-box; width: 100%; min-height: 120px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.4 var(--ui-mono); resize: vertical; }
.ui-anomaly-finder-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }


.ui-shell { container: ui-shell / inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-shell-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: var(--ui-shell-height, 100vh); }
.ui-shell-side {
  position: sticky; top: 0; inset-inline: auto; bottom: auto; display: flex; flex-direction: column; gap: 4px;
  width: auto; height: var(--ui-shell-height, 100vh); margin: 0; padding: 14px 12px; overflow: auto;
  border: 0; border-right: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-fg);
}
.ui-shell-brand { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 8px 10px; }
.ui-shell-brand a { color: var(--ui-fg); font-weight: 650; font-size: 16px; text-decoration: none; border-radius: var(--ui-radius-sm); }
.ui-shell-side ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-shell-side li a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--ui-radius-sm);
  color: var(--ui-muted); font-size: 14px; font-weight: 500; text-decoration: none;
}
.ui-shell-side li a:hover { color: var(--ui-fg); background: color-mix(in srgb, var(--ui-fg) 6%, transparent); }
.ui-shell-side li a[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-shell-icon { display: inline-grid; place-items: center; width: 18px; flex: none; }
.ui-shell-icon svg { width: 18px; height: 18px; }
.ui-shell-main { display: flex; flex-direction: column; min-width: 0; }
.ui-shell-header {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg);
}
.ui-shell-bar { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ui-shell-hbrand { display: none; color: var(--ui-fg); font-weight: 650; text-decoration: none; }
.ui-shell-content { flex: 1; padding: 24px; }
.ui-shell-btn {
  display: none; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); cursor: pointer;
}
.ui-shell-btn:hover { background: var(--ui-subtle); }
.ui-shell a:focus-visible, .ui-shell-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@container ui-shell (max-width: 760px) {
  .ui-shell-in { grid-template-columns: minmax(0, 1fr); }
  .ui-shell-btn, .ui-shell-hbrand { display: inline-grid; }
  .ui-shell-header { padding: 0 12px; }
  .ui-shell-content { padding: 18px 16px; }
  .ui-shell-side:not(:popover-open) { display: none; }
  .ui-shell-side:popover-open {
    position: fixed; inset: 0 auto 0 0; width: min(290px, 85vw); height: 100%; max-height: none;
    box-shadow: var(--ui-shadow-lg); animation: ui-shell-in .2s ease-out;
  }
  .ui-shell-side::backdrop { background: var(--ui-overlay); }
}
@keyframes ui-shell-in { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ui-shell-side:popover-open { animation: none; } }


:where(.q-backdrop) {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: var(--ui-overlay); opacity: 0; transition: opacity .15s;
}
:where(.q-backdrop.q-open) { opacity: 1; }
:where(.q-dialog) {
  box-sizing: border-box; width: min(420px, 100%); padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg);
  font: 15px/1.5 var(--ui-font); transform: translateY(8px) scale(.98); transition: transform .15s;
}
:where(.q-open .q-dialog) { transform: none; }
:where(.q-dialog .q-title) { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3; }
:where(.q-dialog .q-message) { margin: 0 0 20px; color: var(--ui-muted); }
:where(.q-dialog .q-actions) { display: flex; justify-content: flex-end; gap: 8px; }
:where(.q-dialog .q-actions button) {
  height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer;
}
:where(.q-dialog .q-actions button:hover) { background: var(--ui-subtle); }
:where(.q-dialog .q-actions .q-ok) { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
:where(.q-dialog.q-danger .q-actions .q-ok) { background: var(--ui-danger); color: #fff; }
:where(.q-dialog .q-actions .q-ok:hover) { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
:where(.q-dialog.q-danger .q-actions .q-ok:hover) { background: color-mix(in srgb, var(--ui-danger) 88%, var(--ui-fg)); }
:where(.q-dialog .q-actions button:focus-visible) { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { :where(.q-backdrop, .q-dialog) { transition: none; } }


.ui-mh-mark {
  padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--ui-warning) 26%, transparent); color: inherit;
}
@media (forced-colors: active) { .ui-mh-mark { background: Mark; color: MarkText; } }


.ui-lollic { --ui-lollic-1: light-dark(#2a78d6, #3987e5);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-lollic-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-lollic-v { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 10px; }
.ui-lollic-y { position: relative; min-width: 24px; }
.ui-lollic-y span, .ui-lollic-hx span { position: absolute; color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lollic-y span { right: 0; transform: translateY(50%); }
.ui-lollic-plot { position: relative; }
.ui-lollic-grid { position: absolute; left: 0; right: 0; bottom: var(--a); height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-lollic-zero { background: var(--ui-strong); }
.ui-lollic-cols { position: absolute; inset: 0; display: flex; }
.ui-lollic-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-lollic-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-lollic-stem { position: absolute; left: 50%; bottom: var(--a); width: 2px; height: var(--b); margin-left: -1px; background: var(--ui-lollic-1); }
.ui-lollic-dot { position: absolute; left: 50%; bottom: var(--e); width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%;
  background: var(--ui-lollic-1); box-shadow: 0 0 0 2px var(--ui-bg); transition: transform .12s ease; }
.ui-lollic-col:hover .ui-lollic-dot, .ui-lollic-row:hover .ui-lollic-dot { transform: scale(1.3); }
.ui-lollic-val { position: absolute; left: 50%; bottom: calc(var(--e) + 10px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lollic-val.ui-lollic-under { bottom: auto; top: calc(100% - var(--e) + 10px); }
.ui-lollic-x { display: flex; margin-top: 6px; }
.ui-lollic-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-lollic-tip { position: absolute; z-index: 20; display: none; padding: 6px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-muted); font-size: 12px; white-space: nowrap; pointer-events: none; }
.ui-lollic-tip b { padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-lollic-col .ui-lollic-tip { top: 0; left: 50%; transform: translate(-50%, -100%); }
.ui-lollic-col:first-child .ui-lollic-tip { left: 0; transform: translateY(-100%); }
.ui-lollic-col:last-child .ui-lollic-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-lollic-col:hover .ui-lollic-tip, .ui-lollic-row:hover .ui-lollic-tip { display: block; }
.ui-lollic-h { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 10px; align-items: center; }
.ui-lollic-vals { padding-right: 52px; }
.ui-lollic-rl { max-width: 16em; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ui-lollic-hgrid { position: relative; grid-column: 2; align-self: stretch; }
.ui-lollic-hgrid .ui-lollic-grid { top: 0; bottom: 0; left: var(--a); right: auto; width: 1px; height: auto; }
.ui-lollic-row { position: relative; grid-column: 2; height: 26px; border-radius: 4px; }
.ui-lollic-row:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-lollic-row .ui-lollic-stem { top: 50%; bottom: auto; left: var(--a); width: var(--b); height: 2px; margin: -1px 0 0; }
.ui-lollic-row .ui-lollic-dot { top: 50%; bottom: auto; left: var(--e); margin: -6px 0 0 -6px; }
.ui-lollic-row .ui-lollic-val { top: 50%; bottom: auto; left: calc(var(--e) + 12px); transform: translateY(-50%); }
.ui-lollic-row .ui-lollic-val.ui-lollic-under { left: auto; right: calc(100% - var(--e) + 12px); }
.ui-lollic-row .ui-lollic-tip { bottom: calc(100% + 2px); right: 0; }
.ui-lollic-hx { position: relative; grid-column: 2; height: 16px; margin-top: 4px; }
.ui-lollic-hx span { top: 0; transform: translateX(-50%); }
.ui-lollic-hx span:first-child { transform: none; }
.ui-lollic-hx span:last-child:not(:first-child) { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .ui-lollic-dot { transition: none; } }


.ui-lvb { display: grid; gap: 16px; min-width: 0; max-width: 720px; color: var(--ui-fg); font: 15px/1.55 var(--ui-font); }
.ui-lvb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ui-muted); font-size: 13px; }
.ui-lvb-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 4px; background: var(--ui-danger);
  color: var(--ui-bg); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ui-lvb-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ui-lvb-pulse 1.4s ease-in-out infinite; }
@keyframes ui-lvb-pulse { 50% { opacity: .2; } }
.ui-lvb-ended .ui-lvb-status { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-lvb-ended .ui-lvb-status::before { display: none; }
.ui-lvb-keys { padding: 12px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-lvb-keys h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-lvb-keys ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-lvb-keys a { display: grid; grid-template-columns: 52px 1fr; gap: 8px; color: var(--ui-fg); text-decoration: none; font-size: 14px; }
.ui-lvb-keys a span { color: var(--ui-danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-lvb-keys a:hover b { color: var(--ui-accent); text-decoration: underline; }
.ui-lvb-keys b { font-weight: 550; }
.ui-lvb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ui-lvb-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ui-subtle); }
.ui-lvb-seg button, .ui-lvb-order { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted);
  font: 600 13px var(--ui-font); cursor: pointer; }
.ui-lvb-seg button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.ui-lvb-order { border: 1px solid var(--ui-border); }
.ui-lvb-order:hover, .ui-lvb-seg button:hover { color: var(--ui-fg); }
.ui-lvb button:focus-visible, .ui-lvb a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-lvb-feed { margin: 0; padding: 0; list-style: none; }
.ui-lvb-entry { position: relative; display: grid; gap: 6px; padding: 16px 0 18px 22px; border-top: 1px solid var(--ui-border); scroll-margin-top: 80px; }
.ui-lvb-entry::before { content: ""; position: absolute; left: 0; top: 23px; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-strong); }
.ui-lvb-entry:focus { outline: none; }
.ui-lvb-entry:focus-visible { box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-lvb-key::before { background: var(--ui-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 25%, transparent); }
.ui-lvb-pinned { padding: 14px 16px 16px; border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-accent); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); }
.ui-lvb-pinned::before { display: none; }
.ui-lvb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; }
.ui-lvb-time { color: var(--ui-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-lvb-flag { padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ui-lvb-flag-key { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-lvb-flag-pin { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-lvb-tag { color: var(--ui-muted); }
.ui-lvb .ui-lvb-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.ui-lvb-entry > p:not(.ui-lvb-top):not(.ui-lvb-by) { margin: 0; }
.ui-lvb-by { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-lvb-empty { padding: 16px 0; color: var(--ui-muted); border-top: 1px solid var(--ui-border); }
.ui-lvb-more { justify-self: center; height: 38px; padding: 0 20px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface);
  color: var(--ui-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-lvb-more:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-lvb-status::before { animation: none; } }


.ui-danger { border: 1px solid color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-danger-head { padding: 16px 20px 12px; border-bottom: 1px solid color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)); }
.ui-danger-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ui-danger); font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-danger-title svg { width: 18px; height: 18px; }
.ui-danger-desc { margin: 3px 0 0; color: var(--ui-muted); }
.ui-danger-rows { margin: 0; padding: 0; list-style: none; }
.ui-danger-row + .ui-danger-row { border-top: 1px solid var(--ui-border); }
.ui-danger-row > form, .ui-danger-row > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0; padding: 14px 20px; }
.ui-danger-what { flex: 1 1 260px; min-width: 0; }
.ui-danger-row-title { margin: 0; font-weight: 600; }
.ui-danger-text { margin: 2px 0 0; color: var(--ui-muted); }


.ui-http-req { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-http-req .ui-http-req-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-http-req-line { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.ui-http-req-field { display: grid; gap: 4px; min-width: 0; }
.ui-http-req-field label, .ui-http-req-label { font-size: 13px; font-weight: 500; }
.ui-http-req-input { box-sizing: border-box; width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 13px var(--ui-mono); }
textarea.ui-http-req-input { height: auto; padding: 8px; line-height: 1.5; resize: vertical; }
.ui-http-req-input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-http-req-input[aria-invalid] { border-color: var(--ui-danger); }
.ui-http-req-rows { display: grid; gap: 4px; min-width: 0; }
.ui-http-req-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; }
.ui-http-req-btn { height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-http-req-btn:hover { background: var(--ui-subtle); }
.ui-http-req-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-http-req-add { justify-self: start; }
.ui-http-req-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-http-req-list li { padding: 6px 10px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); overflow-wrap: anywhere; }
.ui-http-req-list.ui-http-req-bad li { border-left-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-http-req-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ui-http-req-tabs { display: inline-flex; gap: 2px; border-bottom: 1px solid var(--ui-border); }
.ui-http-req-tab { height: 32px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ui-muted); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-http-req-tab[aria-selected="true"] { border-bottom-color: var(--ui-accent); color: var(--ui-fg); }
.ui-http-req-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-http-req-code { max-height: 340px; margin: 0; padding: 10px 12px; overflow: auto; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 13px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-http-req-code:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-http-req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-http-req-note { color: var(--ui-muted); font-size: 13px; }
@media (max-width: 480px) { .ui-http-req-line { grid-template-columns: 1fr; } .ui-http-req-row { grid-template-columns: 1fr 1fr auto; } }


.ui-folder-grid { display: grid; gap: 8px; min-width: 0; font: 13px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-folder-grid-bar { display: flex; justify-content: space-between; gap: 8px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-folder-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0; padding: 4px; list-style: none; outline: none; }
.ui-folder-grid-tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px 10px; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); cursor: default; user-select: none; -webkit-user-select: none; text-align: center; outline: none; }
.ui-folder-grid-tile:hover { background: var(--ui-subtle); }
.ui-folder-grid-tile:focus-visible { box-shadow: var(--ui-focus); border-color: var(--ui-accent); }
.ui-folder-grid-tile[aria-selected="true"] { border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); background: var(--ui-accent-soft); }
.ui-folder-grid-check { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  border: 1.5px solid var(--ui-strong); border-radius: 50%; background: var(--ui-surface); color: var(--ui-accent-fg); cursor: pointer; opacity: 0; }
.ui-folder-grid-tile:hover .ui-folder-grid-check, .ui-folder-grid-tile[aria-selected="true"] .ui-folder-grid-check { opacity: 1; }
.ui-folder-grid-tile[aria-selected="true"] .ui-folder-grid-check { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-folder-grid-check svg { width: 10px; height: 10px; }
@media (hover: none) { .ui-folder-grid-check { opacity: 1; } }
.ui-folder-grid-folder { width: 56px; height: 44px; color: var(--ui-accent); }
.ui-folder-grid-file { --k: var(--ui-muted); position: relative; display: grid; place-items: end center; width: 38px; height: 48px; padding-bottom: 6px;
  border-radius: 3px 12px 3px 3px; background: color-mix(in srgb, var(--k) 16%, var(--ui-surface)); color: var(--k); font: 700 9px/1 var(--ui-font); }
.ui-folder-grid-file::before { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 0 0 0 3px;
  background: color-mix(in srgb, var(--k) 32%, var(--ui-surface)); }
.ui-folder-grid-k-image { --k: var(--ui-success); } .ui-folder-grid-k-pdf { --k: var(--ui-danger); } .ui-folder-grid-k-doc { --k: var(--ui-info); }
.ui-folder-grid-k-sheet { --k: var(--ui-success); } .ui-folder-grid-k-archive { --k: var(--ui-warning); } .ui-folder-grid-k-media { --k: var(--ui-accent); }
.ui-folder-grid-name { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font-weight: 500; }
.ui-folder-grid-meta { color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-folder-grid-empty { padding: 28px 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }


.ui-read-more { display: grid; gap: 6px; justify-items: start; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-read-more-btn { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none;
  border-radius: 3px; color: var(--ui-accent); font: 500 14px/1.4 var(--ui-font); cursor: pointer; }
.ui-read-more-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-read-more-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-read-more-btn svg { width: 12px; height: 12px; transition: transform .15s; }
.ui-read-more-open .ui-read-more-btn svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ui-read-more-btn svg { transition: none; } }


.ui-segmented {
  display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: calc(var(--ui-radius-sm) + 3px);
  background: var(--ui-subtle); border: 1px solid var(--ui-border); font: 500 14px/1 var(--ui-font); color: var(--ui-muted);
}
.ui-segmented-full { display: flex; justify-self: stretch; }
.ui-segmented-full .ui-segmented-opt { flex: 1 1 0; }
.ui-segmented-opt { position: relative; display: flex; cursor: pointer; }
.ui-segmented-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-segmented-opt span {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px;
  border-radius: var(--ui-radius-sm); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.ui-segmented-opt:hover span { color: var(--ui-fg); }
.ui-segmented-opt input:checked + span { background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); }
.ui-segmented-opt input:focus-visible + span { box-shadow: var(--ui-focus); }
.ui-segmented-opt input:checked:focus-visible + span { box-shadow: var(--ui-shadow), var(--ui-focus); }
.ui-segmented-sm .ui-segmented-opt span { height: 24px; padding: 0 10px; font-size: 13px; }
.ui-segmented:has(input:disabled) { opacity: .55; }
.ui-segmented:has(input:disabled) .ui-segmented-opt { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-segmented-opt span { transition: none; } }


.ui-phone-input { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-phone-input-label { font-size: 13px; font-weight: 500; }
.ui-phone-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-phone-input-box {
  display: flex; align-items: stretch; width: 300px; max-width: 100%; height: 38px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-phone-input-box:hover { border-color: var(--ui-strong); }
.ui-phone-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-phone-input-country { position: relative; flex: none; display: flex; align-items: center; border-right: 1px solid var(--ui-border); }
.ui-phone-input-country select {
  appearance: none; height: 100%; margin: 0; padding: 0 24px 0 10px; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); cursor: pointer; border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm);
}
.ui-phone-input-country select:focus-visible { background: var(--ui-subtle); }
.ui-phone-input-country::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-phone-input-country option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-phone-input-code { flex: none; align-self: center; padding: 0 2px 0 10px; color: var(--ui-muted); font-variant-numeric: tabular-nums; user-select: none; }
.ui-phone-input-box input {
  flex: 1; min-width: 0; padding: 0 12px 0 6px; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-phone-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-phone-input-sm .ui-phone-input-box { height: 30px; width: 250px; }
.ui-phone-input-sm .ui-phone-input-box input, .ui-phone-input-sm .ui-phone-input-country select { font-size: 13px; }
.ui-phone-input-invalid .ui-phone-input-box, .ui-phone-input-invalid .ui-phone-input-box:hover { border-color: var(--ui-danger); }
.ui-phone-input-hint, .ui-phone-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-phone-input-error { color: var(--ui-danger); }
.ui-phone-input-disabled { opacity: .55; }
.ui-phone-input-disabled input, .ui-phone-input-disabled select { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-phone-input-box { transition: none; } }


.ui-headline-analyzer { display: grid; gap: 14px; min-width: 0; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-headline-analyzer-fields { display: grid; gap: 8px; min-width: 0; }
.ui-headline-analyzer-row { display: grid; gap: 4px; min-width: 0; }
.ui-headline-analyzer-row label { font-size: 13px; font-weight: 500; }
.ui-headline-analyzer-entry { display: flex; gap: 6px; min-width: 0; }
.ui-headline-analyzer-entry input { box-sizing: border-box; flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-headline-analyzer-entry input:hover { border-color: var(--ui-strong); }
.ui-headline-analyzer-entry input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-headline-analyzer-btn { flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-headline-analyzer-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-headline-analyzer-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-headline-analyzer-add { justify-self: start; }
.ui-headline-analyzer-said { margin: 0; font-weight: 600; }
.ui-headline-analyzer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; min-width: 0; }
.ui-headline-analyzer-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); --k: var(--ui-muted); }
.ui-headline-analyzer-strong { --k: var(--ui-success); }
.ui-headline-analyzer-okay { --k: var(--ui-warning); }
.ui-headline-analyzer-weak { --k: var(--ui-danger); }
.ui-headline-analyzer-best { border-color: var(--ui-success); }
.ui-headline-analyzer-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.ui-headline-analyzer-score { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--k); font-variant-numeric: tabular-nums; }
.ui-headline-analyzer-grade { font-weight: 600; }
.ui-headline-analyzer-flag { padding: 1px 7px; border-radius: 999px; background: var(--ui-success-soft); color: var(--ui-success); font-size: 12px; font-weight: 600; }
.ui-headline-analyzer-name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-headline-analyzer-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-headline-analyzer-checks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-headline-analyzer-checks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ui-headline-analyzer-checks b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-headline-analyzer-checks span { overflow-wrap: anywhere; }
.ui-headline-analyzer-lost b { color: var(--ui-danger); }
.ui-headline-analyzer-view { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 13px; }
.ui-headline-analyzer-view small { color: var(--ui-muted); font-size: 12px; }
.ui-headline-analyzer-cutoff { color: var(--ui-info); overflow-wrap: anywhere; }


.ui-card {
  --ui-card-pad: 20px;
  display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-card-elevated { border-color: transparent; box-shadow: var(--ui-shadow); }
.ui-card-subtle { background: var(--ui-subtle); border-color: transparent; }
.ui-card-pad-none { --ui-card-pad: 0; }
.ui-card-pad-sm { --ui-card-pad: 12px; }
.ui-card-pad-lg { --ui-card-pad: 28px; }
.ui-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: var(--ui-card-pad) var(--ui-card-pad) 0; }
.ui-card-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.ui-card-sub { margin: 2px 0 0; color: var(--ui-muted); font-size: 14px; }
.ui-card-body { flex: 1; padding: var(--ui-card-pad); }
.ui-card-head + .ui-card-body { padding-top: 10px; }
.ui-card-body:empty { display: none; }
.ui-card-body > :first-child { margin-top: 0; }
.ui-card-body > :last-child { margin-bottom: 0; }
.ui-card-head:has(+ .ui-card-body:empty) { padding-bottom: var(--ui-card-pad); }
.ui-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px var(--ui-card-pad); border-top: 1px solid var(--ui-border);
}
.ui-card-pad-none .ui-card-foot { padding: 12px; }
a.ui-card { text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.ui-card:hover { border-color: var(--ui-strong); box-shadow: var(--ui-shadow); }
a.ui-card:hover .ui-card-title { color: var(--ui-accent); }
a.ui-card:focus-visible { outline: none; box-shadow: var(--ui-focus); border-color: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { a.ui-card { transition: none; } }


.ui-critical-path { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-critical-path .ui-critical-path-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-critical-path-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 18px; }
.ui-critical-path-field { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-critical-path-field input, .ui-critical-path-field textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-critical-path-field textarea { font: 13px/1.5 var(--ui-mono); resize: vertical; }
.ui-critical-path-field input:focus-visible, .ui-critical-path-field textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-critical-path-field [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-critical-path-check { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 8px; cursor: pointer; }
.ui-critical-path-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-critical-path-problems { display: grid; gap: 3px; margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; list-style: none; }
.ui-critical-path-sum { display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-critical-path-finish { margin: 0; font-size: 18px; font-weight: 700; color: var(--ui-accent); overflow-wrap: anywhere; }
.ui-critical-path-route { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.ui-critical-path-wrap { position: relative; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-critical-path-wrap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-critical-path-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-critical-path-table th, .ui-critical-path-table td { padding: 6px 10px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-critical-path-table th:nth-child(-n+2), .ui-critical-path-table td:nth-child(-n+2) { text-align: left; }
.ui-critical-path-table thead th { background: var(--ui-subtle); font-weight: 600; }
.ui-critical-path-table tbody tr:last-child th, .ui-critical-path-table tbody tr:last-child td { border-bottom: 0; }
.ui-critical-path-hot th, .ui-critical-path-hot td { background: var(--ui-danger-soft); }
.ui-critical-path-hot .ui-critical-path-slack { color: var(--ui-danger); font-weight: 700; }
.ui-critical-path-slack { font-weight: 600; }
.ui-critical-path-more { margin: 0; color: var(--ui-muted); font-size: 12px; }


.ui-pagedots { position: relative; display: block; width: 100%; container-type: inline-size; color: var(--ui-fg); font: 13px/1.4 var(--ui-font); }
.ui-pagedots-row {
  position: relative; display: block; box-sizing: content-box; height: 8px; margin: 0 auto; padding: 18px 0; overflow: hidden; border-radius: var(--ui-radius-sm);
  outline: none; touch-action: manipulation;
}
.ui-pagedots-row[role="slider"] { cursor: pointer; }
.ui-pagedots-row:focus-visible { box-shadow: var(--ui-focus); }
.ui-pagedots-strip { position: absolute; top: 18px; left: 0; height: 8px; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-pagedots-dot {
  position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-strong); transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s;
}
.ui-pagedots-dot[data-size="mid"] { transform: scale(.66); }
.ui-pagedots-dot[data-size="far"] { transform: scale(.4); }
.ui-pagedots-dot[data-size="gone"] { transform: scale(0); opacity: 0; }
.ui-pagedots-mark { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); will-change: transform; }
.ui-pagedots-mark-off { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-pagedots-strip, .ui-pagedots-dot { transition: none; } }


.ui-habit-tracker { display: grid; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-habit-tracker .ui-habit-tracker-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-habit-tracker-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-habit-tracker-wrap { overflow-x: auto; }
.ui-habit-tracker-wrap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-habit-tracker-grid { border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-habit-tracker-grid th { font-weight: 500; color: var(--ui-muted); text-align: center; padding: 0 0 2px; }
.ui-habit-tracker-grid th span { display: block; font-size: 10px; }
.ui-habit-tracker-grid .ui-habit-tracker-name { position: sticky; left: 0; z-index: 1; min-width: 96px; max-width: 160px; padding-right: 10px; background: var(--ui-surface);
  color: var(--ui-fg); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-habit-tracker-grid td { padding: 0; }
.ui-habit-tracker-cell { display: block; width: 22px; height: 22px; padding: 0; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-surface); color: var(--ui-accent-fg); font: 700 11px/1 var(--ui-font); cursor: pointer; }
.ui-habit-tracker-cell:hover { border-color: var(--ui-accent); }
.ui-habit-tracker-cell:focus-visible { outline: none; box-shadow: var(--ui-focus); position: relative; z-index: 2; }
.ui-habit-tracker-done { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-habit-tracker-extra { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-habit-tracker-grace { border-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-habit-tracker-missed { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-habit-tracker-off, .ui-habit-tracker-before { border-style: dashed; background: var(--ui-subtle); color: var(--ui-muted); }
.ui-habit-tracker-pending { border: 2px solid var(--ui-accent); }
.ui-habit-tracker-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-habit-tracker-card { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 13px; }
.ui-habit-tracker-card b { overflow-wrap: anywhere; }
.ui-habit-tracker-figures { display: flex; flex-wrap: wrap; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.ui-habit-tracker-current, .ui-habit-tracker-longest, .ui-habit-tracker-rate { font-weight: 500; }
.ui-habit-tracker-note { color: var(--ui-muted); font-size: 12px; overflow-wrap: anywhere; }
.ui-habit-tracker-said { min-height: 1.4em; margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-loan-steps { container-type: inline-size; display: grid; gap: 18px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font);
  --ui-loan-steps-on: var(--ui-accent); }
.ui-loan-steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ui-loan-steps-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-loan-steps-ref { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-loan-steps-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ui-loan-steps-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; padding-bottom: 18px; }
.ui-loan-steps-step:last-child { padding-bottom: 0; }
.ui-loan-steps-step::before { content: ""; position: absolute; top: 30px; bottom: 2px; left: 13px; width: 2px; border-radius: 1px; background: var(--ui-border); }
.ui-loan-steps-step:last-child::before { display: none; }
.ui-loan-steps-done::before { background: var(--ui-loan-steps-on); }
.ui-loan-steps-dot { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-loan-steps-dot svg { width: 14px; height: 14px; }
.ui-loan-steps-done .ui-loan-steps-dot { border-color: var(--ui-loan-steps-on); background: var(--ui-loan-steps-on); color: var(--ui-accent-fg); }
.ui-loan-steps-current .ui-loan-steps-dot { border-color: var(--ui-loan-steps-on); color: var(--ui-loan-steps-on);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-loan-steps-on) 18%, transparent); }
.ui-loan-steps-failed .ui-loan-steps-dot { border-color: var(--ui-danger); background: var(--ui-danger); color: #fff; box-shadow: none; }
.ui-loan-steps-text { display: grid; gap: 1px; padding-top: 3px; min-width: 0; }
.ui-loan-steps-label { font-weight: 600; }
.ui-loan-steps-todo .ui-loan-steps-label, .ui-loan-steps-skipped .ui-loan-steps-label { color: var(--ui-muted); font-weight: 500; }
.ui-loan-steps-skipped .ui-loan-steps-label { text-decoration: line-through; }
.ui-loan-steps-when { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-loan-steps-current .ui-loan-steps-when { color: var(--ui-loan-steps-on); font-weight: 600; }
.ui-loan-steps-failed .ui-loan-steps-when { color: var(--ui-danger); }
.ui-loan-steps-detail { color: var(--ui-muted); font-size: 13px; }
@container (min-width: 640px) {
  .ui-loan-steps-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ui-loan-steps-step { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 0 6px; text-align: center; }
  .ui-loan-steps-step::before { top: 13px; bottom: auto; left: calc(50% + 20px); right: calc(-50% + 20px); width: auto; height: 2px; }
  .ui-loan-steps-text { padding-top: 0; }
}
.ui-loan-steps-next { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-loan-steps-failed-note { background: var(--ui-danger-soft); }
.ui-loan-steps-next h4 { margin: 0; font-size: 13px; font-weight: 650; }
.ui-loan-steps-note { margin: 0; }
.ui-loan-steps-needs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-loan-steps-needs li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.ui-loan-steps-check { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--ui-strong); border-radius: 4px; }
.ui-loan-steps-check svg { width: 11px; height: 11px; }
.ui-loan-steps-got .ui-loan-steps-check { border-color: var(--ui-success); background: var(--ui-success); color: #fff; }
.ui-loan-steps-got .ui-loan-steps-need { color: var(--ui-muted); text-decoration: line-through; }
.ui-loan-steps-need small { display: block; color: var(--ui-muted); font-size: 12px; text-decoration: none; }
.ui-loan-steps-action { justify-self: start; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; text-decoration: none; }
.ui-loan-steps-action:hover { filter: brightness(1.08); }
.ui-loan-steps-action:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-extractive-summary { display: grid; gap: 14px; min-width: 0; max-width: 760px; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-extractive-summary-field { display: grid; gap: 5px; min-width: 0; }
.ui-extractive-summary-field label { font-size: 13px; font-weight: 500; }
.ui-extractive-summary-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 9px 12px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-extractive-summary-field textarea:hover { border-color: var(--ui-strong); }
.ui-extractive-summary-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-extractive-summary-field input[type=range] { width: 100%; margin: 0; accent-color: var(--ui-accent); }
.ui-extractive-summary-field input[type=range]:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-extractive-summary-said { margin: 0; font-weight: 600; }
.ui-extractive-summary-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-extractive-summary-out { display: grid; gap: 8px; padding: 12px 14px; border-left: 3px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-extractive-summary-out h4, .ui-extractive-summary-source h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-extractive-summary-text { margin: 0; overflow-wrap: anywhere; }
.ui-extractive-summary-copy { justify-self: start; height: 30px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-extractive-summary-copy:hover { border-color: var(--ui-strong); }
.ui-extractive-summary-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-extractive-summary-source { display: grid; gap: 6px; min-width: 0; }
.ui-extractive-summary-marked { max-height: 260px; overflow: auto; margin: 0; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ui-muted); }
.ui-extractive-summary-marked:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-extractive-summary-marked mark { border-radius: 2px; background: var(--ui-accent-soft); color: var(--ui-fg); }


.ui-remitq { display: grid; gap: 14px; min-width: 0; max-width: 440px; padding: 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg);
  font-variant-numeric: tabular-nums; }
.ui-remitq-row { display: grid; gap: 6px; }
.ui-remitq-label { font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-remitq-box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.ui-remitq-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-remitq-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 650 20px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-remitq-box b { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--ui-subtle); font-size: 13px; font-weight: 650; }
.ui-remitq-out { background: var(--ui-subtle); }
.ui-remitq-out output { flex: 1; min-width: 0; font-size: 20px; font-weight: 650; overflow-wrap: anywhere; }
.ui-remitq-out b { background: var(--ui-surface); }
.ui-remitq-invalid .ui-remitq-box:first-of-type { border-color: var(--ui-danger); }
.ui-remitq-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-remitq-lines { display: grid; gap: 6px; margin: 0 0 0 10px; padding: 2px 0 2px 16px; border-left: 2px solid var(--ui-border); font-size: 13px; }
.ui-remitq-lines div { display: flex; justify-content: space-between; gap: 12px; }
.ui-remitq-lines dt { color: var(--ui-muted); }
.ui-remitq-lines dd { margin: 0; text-align: right; font-weight: 500; }
.ui-remitq-lines .ui-remitq-total dd, .ui-remitq-lines .ui-remitq-total dt { color: var(--ui-fg); font-weight: 650; }
.ui-remitq-markup { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-remitq-methods { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.ui-remitq-methods legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-remitq-method { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; padding: 10px 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.ui-remitq-method:hover { border-color: var(--ui-strong); }
.ui-remitq-method input { grid-row: span 2; margin: 0; accent-color: var(--ui-accent); }
.ui-remitq-method b { font-weight: 600; }
.ui-remitq-method small { grid-column: 2; color: var(--ui-muted); font-size: 12px; }
.ui-remitq-method span { grid-row: span 2; color: var(--ui-muted); font-size: 12px; text-align: right; }
.ui-remitq-method:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-remitq-method:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-remitq-eta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.ui-remitq-eta svg { flex: none; width: 16px; height: 16px; color: var(--ui-success); }
.ui-remitq-cost { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-remitq-cta { height: 44px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 15px var(--ui-font); cursor: pointer; }
.ui-remitq-cta:hover:not(:disabled) { filter: brightness(1.08); }
.ui-remitq-cta:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-remitq-cta:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-remitq-box, .ui-remitq-method { transition: none; } }


.ui-select { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-select-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-select-req { margin-left: 2px; color: var(--ui-danger); }
.ui-select-box { position: relative; display: block; }
.ui-select-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-select select {
  appearance: none; display: block; width: 100%; height: 38px; padding: 0 36px 0 12px;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-select select:hover { border-color: var(--ui-strong); }
.ui-select select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-select select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-select option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-select option:disabled { color: var(--ui-muted); }
.ui-select-multi .ui-select-box::after { display: none; }
.ui-select-multi select { height: auto; padding: 4px; }
.ui-select-multi option { padding: 5px 8px; border-radius: 4px; }
.ui-select-multi option:checked { background: var(--ui-accent-soft); color: var(--ui-fg); }
.ui-select-sm select { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-select-sm .ui-select-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
.ui-select-invalid select, .ui-select-invalid select:hover { border-color: var(--ui-danger); }
.ui-select-invalid select:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.ui-select-hint, .ui-select-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-select-error { color: var(--ui-danger); }
.ui-select-disabled { opacity: .55; }
.ui-select-disabled select { cursor: not-allowed; }
.ui-select-disabled select:hover { border-color: var(--ui-border); }
@media (prefers-reduced-motion: reduce) { .ui-select select { transition: none; } }


.ui-quick-view { position: relative; display: block; }
.ui-quick-view-open {
  position: absolute; left: 50%; bottom: 14px; z-index: 2; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow); font: 500 13px/1 var(--ui-font); white-space: nowrap; cursor: pointer;
  opacity: 0; transition: opacity .15s, translate .15s;
}
.ui-quick-view-open svg { width: 16px; height: 16px; }
.ui-quick-view:hover .ui-quick-view-open, .ui-quick-view:focus-within .ui-quick-view-open { opacity: 1; translate: -50% -2px; }
.ui-quick-view-open:hover { background: var(--ui-subtle); }
.ui-quick-view-open:focus-visible { outline: none; box-shadow: var(--ui-shadow), var(--ui-focus); }
@media (hover: none) { .ui-quick-view-open { opacity: 1; } }
.ui-quick-view-dialog {
  width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow: auto; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font);
}
.ui-quick-view-dialog[open] { animation: ui-quick-view-in .18s ease-out; }
.ui-quick-view-dialog::backdrop { background: var(--ui-overlay); }
@keyframes ui-quick-view-in { from { opacity: 0; transform: scale(.97); } }
.ui-quick-view-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-quick-view-box.ui-quick-view-plain { grid-template-columns: minmax(0, 1fr); }
.ui-quick-view-img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; background: var(--ui-subtle); }
.ui-quick-view-info { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 24px; }
.ui-quick-view-info h2 { margin: 0; padding-right: 30px; font-size: 22px; font-weight: 650; line-height: 1.25; }
.ui-quick-view-meta { margin: 0; font-size: 18px; font-weight: 600; color: var(--ui-accent); }
.ui-quick-view-text { margin: 0; color: var(--ui-muted); }
.ui-quick-view-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; }
.ui-quick-view-act {
  height: 40px; padding: 0 18px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 14px/1 var(--ui-font); cursor: pointer;
}
.ui-quick-view-act:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-quick-view-link { color: var(--ui-accent); font-weight: 500; text-underline-offset: 3px; }
.ui-quick-view-x {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: 50%; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); cursor: pointer;
}
.ui-quick-view-x:hover { background: var(--ui-subtle); }
.ui-quick-view-x svg { width: 18px; height: 18px; }
.ui-quick-view-act:focus-visible, .ui-quick-view-x:focus-visible, .ui-quick-view-link:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
@media (max-width: 640px) {
  .ui-quick-view-box { grid-template-columns: minmax(0, 1fr); }
  .ui-quick-view-img { min-height: 0; height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .ui-quick-view-dialog[open] { animation: none; } .ui-quick-view-open { transition: none; } }


.ui-spendring { display: grid; gap: 14px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-spendring-lay { display: grid; gap: 14px; min-width: 0; }
.ui-spendring-ring { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; }
.ui-spendring-ring svg { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-spendring-part { fill: none; stroke: var(--ui-spendring-c); transition: stroke-width .15s, opacity .15s; }
.ui-spendring-faded .ui-spendring-part { opacity: .35; }
.ui-spendring-faded .ui-spendring-part-on { opacity: 1; }
.ui-spendring-mid { position: absolute; inset: 24%; display: grid; margin: 0; place-content: center; gap: 2px; text-align: center; pointer-events: none; }
.ui-spendring-mid span { color: var(--ui-muted); font-size: 12px; overflow-wrap: anywhere; }
.ui-spendring-mid strong { font-size: min(22px, 6.4cqw); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.ui-spendring-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-spendring-line {
  box-sizing: border-box; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; width: 100%; min-height: 52px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--ui-radius); background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.ui-spendring-line[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-spendring-line:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-spendring-dot { grid-row: span 2; width: 14px; height: 14px; border-radius: 4px; background: var(--ui-spendring-c); }
.ui-spendring-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-spendring-amt { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-spendring-sub { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-spendring-vs { grid-column: 3; justify-self: end; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-spendring-cmp { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-spendring-cmp h3 { margin: 0; font-size: 14px; }
.ui-spendring-cmp > div { display: grid; gap: 8px; }
.ui-spendring-bar { display: grid; gap: 2px; }
.ui-spendring-bar p { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-spendring-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-spendring-track span { display: block; height: 100%; border-radius: 999px; background: var(--ui-accent); transition: width .2s; }
.ui-spendring-then .ui-spendring-track span { background: var(--ui-strong); }
.ui-spendring-word { margin: 0; font-weight: 600; }
.ui-spendring-up { color: var(--ui-danger); }
.ui-spendring-down { color: var(--ui-success); }
.ui-spendring-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-spendring-none { margin: 0; padding: 20px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@container (min-width: 600px) {
  .ui-spendring-lay { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); align-items: center; gap: 28px; }
}
@media (hover: hover) { .ui-spendring-line:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-spendring-part, .ui-spendring-track span { transition: none; } }


.ui-vote-buttons { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; font: 600 14px/1 var(--ui-font); }
.ui-vote-buttons-horizontal { flex-direction: row; gap: 4px; padding: 2px; border: 1px solid var(--ui-border); border-radius: 999px; }
.ui-vote-buttons-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--ui-muted); cursor: pointer; transition: background .15s, color .15s;
}
.ui-vote-buttons-btn svg { width: 18px; height: 18px; }
.ui-vote-buttons-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-vote-buttons-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-vote-buttons-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-vote-buttons-up[aria-pressed="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-vote-buttons-down[aria-pressed="true"] { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-vote-buttons-score { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--ui-fg); }
.ui-vote-buttons-plus .ui-vote-buttons-score { color: var(--ui-accent); }
.ui-vote-buttons-minus .ui-vote-buttons-score { color: var(--ui-danger); }
.ui-vote-buttons-sm { font-size: 13px; }
.ui-vote-buttons-sm .ui-vote-buttons-btn { width: 26px; height: 26px; }
.ui-vote-buttons-sm .ui-vote-buttons-btn svg { width: 16px; height: 16px; }
.ui-vote-buttons-lg { font-size: 16px; }
.ui-vote-buttons-lg .ui-vote-buttons-btn { width: 36px; height: 36px; }
.ui-vote-buttons-lg .ui-vote-buttons-btn svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .ui-vote-buttons-btn { transition: none; } }


.ui-character-counter { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-character-counter-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-character-counter-req { margin-left: 2px; color: var(--ui-danger); }
.ui-character-counter-control {
  box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font);
  transition: border-color .15s, box-shadow .15s;
}
input.ui-character-counter-control { height: 38px; }
textarea.ui-character-counter-control { padding: 8px 12px; resize: vertical; min-height: 38px; }
.ui-character-counter-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-character-counter-control:hover { border-color: var(--ui-strong); }
.ui-character-counter-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-character-counter-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-character-counter-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-character-counter-sm input.ui-character-counter-control { height: 30px; font-size: 13px; }
.ui-character-counter-sm textarea.ui-character-counter-control { padding: 5px 10px; font-size: 13px; }
.ui-character-counter-foot { display: flex; align-items: baseline; gap: 12px; }
.ui-character-counter-foot > div { flex: 1; display: grid; gap: 4px; }
.ui-character-counter-hint, .ui-character-counter-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-character-counter-error { color: var(--ui-danger); }
.ui-character-counter-count { flex: none; margin-left: auto; font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-character-counter-near { color: var(--ui-warning); }
.ui-character-counter-full, .ui-character-counter-over { color: var(--ui-danger); font-weight: 500; }
.ui-character-counter-bar { height: 3px; border-radius: 2px; background: var(--ui-subtle); overflow: hidden; }
.ui-character-counter-bar span { display: block; height: 100%; width: var(--p); background: var(--ui-accent); transition: width .15s, background .15s; }
.ui-character-counter-near .ui-character-counter-bar span { background: var(--ui-warning); }
.ui-character-counter-full .ui-character-counter-bar span, .ui-character-counter-over .ui-character-counter-bar span { background: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-character-counter-control, .ui-character-counter-bar span { transition: none; } }


.ui-mini-cart-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); cursor: pointer; transition: background .15s; }
.ui-mini-cart-btn:hover { background: var(--ui-subtle); }
.ui-mini-cart-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mini-cart-btn svg { width: 22px; height: 22px; }
.ui-mini-cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 700 11px/18px var(--ui-font); text-align: center; font-variant-numeric: tabular-nums; }
.ui-mini-cart { width: min(340px, calc(100vw - 16px)); margin: auto; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font); }
.ui-mini-cart-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ui-border); font-weight: 600; }
.ui-mini-cart-head span { font-weight: 400; color: var(--ui-muted); font-size: 13px; }
.ui-mini-cart-list { max-height: 300px; margin: 0; padding: 6px 0; overflow: auto; list-style: none; }
.ui-mini-cart-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; }
.ui-mini-cart-item img, .ui-mini-cart-ph { display: block; width: 44px; height: 44px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); object-fit: cover; }
.ui-mini-cart-text { display: grid; gap: 1px; min-width: 0; }
.ui-mini-cart-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mini-cart-meta { font-size: 12px; color: var(--ui-muted); }
.ui-mini-cart-right { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ui-mini-cart-x { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.ui-mini-cart-x:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-mini-cart-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mini-cart-empty { padding: 28px 16px; text-align: center; color: var(--ui-muted); }
.ui-mini-cart-foot { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--ui-border); }
.ui-mini-cart-sub { display: flex; justify-content: space-between; font-weight: 600; }
.ui-mini-cart-sub span:first-child { color: var(--ui-muted); font-weight: 400; }
.ui-mini-cart-go { display: flex; align-items: center; justify-content: center; height: 38px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); text-decoration: none; }
.ui-mini-cart-go:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-mini-cart-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-mini-cart-go.ui-mini-cart-main { background: var(--ui-accent); color: var(--ui-accent-fg); border-color: transparent; }
.ui-mini-cart-go.ui-mini-cart-main:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-mini-cart[popover]:popover-open { animation: ui-mini-cart-in .12s ease-out; }
@keyframes ui-mini-cart-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-mini-cart { inset: auto; margin: 6px 0; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline; }
  .ui-mini-cart-start { position-area: bottom span-right; }
}
@supports not (position-area: bottom) { .ui-mini-cart::backdrop { background: var(--ui-overlay); } }
@media (prefers-reduced-motion: reduce) { .ui-mini-cart[popover]:popover-open { animation: none; } .ui-mini-cart-btn { transition: none; } }


.ui-meter { display: grid; gap: 6px; min-width: 0; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); }
.ui-meter-neutral { --t: var(--ui-muted); }
.ui-meter-success, .ui-meter-good { --t: var(--ui-success); }
.ui-meter-warning, .ui-meter-fair { --t: var(--ui-warning); }
.ui-meter-danger, .ui-meter-poor { --t: var(--ui-danger); }
.ui-meter-info { --t: var(--ui-info); }
.ui-meter-head { display: flex; justify-content: space-between; gap: 12px; }
.ui-meter-value { color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-meter-good .ui-meter-value, .ui-meter-fair .ui-meter-value, .ui-meter-poor .ui-meter-value { color: var(--t); font-weight: 600; }
.ui-meter-track { position: relative; display: flex; gap: 3px; height: 8px; }
.ui-meter-sm .ui-meter-track { height: 4px; }
.ui-meter-lg .ui-meter-track { height: 12px; }
.ui-meter-seg { position: relative; flex: 1; overflow: hidden; border-radius: 999px; background: var(--ui-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--t); transition: width .3s ease; }
.ui-meter-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ui-bg); }
@media (prefers-reduced-motion: reduce) { .ui-meter-fill { transition: none; } }


.ui-dsave { container-type: inline-size; min-width: 0; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-dsave-in { display: grid; gap: 12px; }
.ui-dsave-set { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-dsave-set legend { padding: 0 0 8px; font-size: 16px; font-weight: 600; }
.ui-dsave-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-dsave-opt { position: relative; display: grid; place-items: center; min-height: 48px; padding: 4px 6px; border-left: 1px solid var(--ui-border); background: var(--ui-surface); text-align: center; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; touch-action: manipulation; }
.ui-dsave-opt:first-child { border-left: 0; }
.ui-dsave-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-dsave-opt:has(input:checked) { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-dsave-opt:has(input:focus-visible) { box-shadow: inset var(--ui-focus); }
.ui-dsave-status { margin: 0; }
.ui-dsave-lasts { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-dsave-what { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ui-dsave-what h4 { margin: 0; font-size: 14px; color: var(--ui-muted); font-weight: 500; }
.ui-dsave-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-dsave-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-dsave-item b { font-weight: 500; }
.ui-dsave-value { color: var(--ui-muted); }
.ui-dsave-in[data-active] .ui-dsave-value { color: var(--ui-success); }
.ui-dsave-count { margin: 0; color: var(--ui-muted); font-size: 13px; }
@container (min-width: 600px) {
  .ui-dsave-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}


.ui-mkthm { --ui-mkthm-up: light-dark(#1f8a4c, #2b9a59); --ui-mkthm-down: light-dark(#cf3a3a, #c43c3c);
  --ui-mkthm-zero: light-dark(#7a788c, #46445a);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.25 var(--ui-font); color: var(--ui-fg); }
.ui-mkthm-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-mkthm-up { --k: var(--ui-mkthm-up); } .ui-mkthm-down { --k: var(--ui-mkthm-down); } .ui-mkthm-flat { --k: var(--ui-mkthm-zero); }
.ui-mkthm-map { position: relative; width: 100%; border-radius: var(--ui-radius-sm); background: var(--ui-bg); }
.ui-mkthm-sector { position: absolute; box-shadow: inset 0 0 0 1px var(--ui-bg); }
.ui-mkthm-head { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; padding: 0 6px; overflow: hidden;
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px var(--ui-bg); }
.ui-mkthm-tile { position: absolute; display: grid; place-content: center; justify-items: center; gap: 2px; overflow: visible;
  background: color-mix(in srgb, var(--k) var(--p), var(--ui-mkthm-zero)); box-shadow: inset 0 0 0 1px var(--ui-bg);
  color: #fff; text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); cursor: default; }
.ui-mkthm-tile:hover { z-index: 5; box-shadow: inset 0 0 0 2px var(--ui-fg); }
.ui-mkthm-sym, .ui-mkthm-chg { display: none; max-width: 100%; overflow: hidden; white-space: nowrap; }
.ui-mkthm-sym { font-weight: 700; }
.ui-mkthm-chg { font-variant-numeric: tabular-nums; opacity: .92; }
.ui-mkthm-l .ui-mkthm-sym { display: block; font-size: 20px; } .ui-mkthm-l .ui-mkthm-chg { display: block; font-size: 13px; }
.ui-mkthm-m .ui-mkthm-sym { display: block; font-size: 13px; } .ui-mkthm-m .ui-mkthm-chg { display: block; font-size: 11px; }
.ui-mkthm-s .ui-mkthm-sym { display: block; font-size: 10px; }
.ui-mkthm-tip { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: none; min-width: 170px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow);
  color: var(--ui-fg); font-size: 12px; text-align: left; text-shadow: none; pointer-events: none; }
.ui-mkthm-right .ui-mkthm-tip { left: auto; right: 0; }
.ui-mkthm-low .ui-mkthm-tip { top: auto; bottom: calc(100% + 6px); }
.ui-mkthm-tile:hover .ui-mkthm-tip { display: block; }
.ui-mkthm-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-mkthm-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-mkthm-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-mkthm-tip .ui-mkthm-c b { color: color-mix(in srgb, var(--k) 80%, var(--ui-fg)); }
.ui-mkthm-legend { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-mkthm-scale { display: flex; gap: 1px; }
.ui-mkthm-scale span { display: grid; place-items: center; min-width: 46px; height: 20px; padding: 0 4px;
  background: color-mix(in srgb, var(--k) var(--p), var(--ui-mkthm-zero)); color: #fff; font-size: 11px; }
.ui-mkthm-scale span:first-child { border-radius: 3px 0 0 3px; } .ui-mkthm-scale span:last-child { border-radius: 0 3px 3px 0; }


.ui-prognav ol { display: flex; margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-prognav-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.ui-prognav-item:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: calc(100% - 50% + 22px); right: calc(-50% + 22px); height: 2px;
  border-radius: 2px; background: var(--ui-border);
}
.ui-prognav-done:not(:last-child)::after { background: var(--ui-accent); }
.ui-prognav-step {
  display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0 4px 2px;
  border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; text-decoration: none;
}
a.ui-prognav-step:hover .ui-prognav-label { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.ui-prognav-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-prognav-mark {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted);
  font: 600 13px/1 var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-prognav-mark svg { width: 15px; height: 15px; }
.ui-prognav-done .ui-prognav-mark { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-prognav-current .ui-prognav-mark { border-color: var(--ui-accent); color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-prognav-current .ui-prognav-step { color: var(--ui-fg); }
.ui-prognav-label { font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-prognav-current .ui-prognav-label { font-weight: 600; }
.ui-prognav-hint { color: var(--ui-muted); font-size: 12px; }
.ui-prognav-vertical ol { flex-direction: column; }
.ui-prognav-vertical .ui-prognav-item { flex: none; }
.ui-prognav-vertical .ui-prognav-item:not(:last-child)::after { top: 38px; bottom: -4px; left: 15px; right: auto; width: 2px; height: auto; }
.ui-prognav-vertical .ui-prognav-step { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 20px; text-align: left; }
.ui-prognav-vertical .ui-prognav-item:last-child .ui-prognav-step { padding-bottom: 0; }
.ui-prognav-vertical .ui-prognav-mark { flex: none; }
.ui-prognav-vertical .ui-prognav-text { padding-top: 6px; }
@media (max-width: 600px) {
  .ui-prognav:not(.ui-prognav-vertical) .ui-prognav-hint { display: none; }
  .ui-prognav:not(.ui-prognav-vertical) .ui-prognav-label { font-size: 12px; }
}


.ui-availability-grid { display: grid; gap: 10px; min-width: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); user-select: none; }
.ui-availability-grid-table { display: grid; grid-template-columns: 52px repeat(var(--ag-days), minmax(36px, 1fr)); gap: 2px; overflow-x: auto; }
.ui-availability-grid-head { display: grid; justify-items: center; align-content: end; gap: 1px; padding: 2px 0 4px; color: var(--ui-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ui-availability-grid-head b { color: var(--ui-fg); font-size: 14px; letter-spacing: 0; }
.ui-availability-grid-hour { align-self: start; padding: 3px 6px 0 0; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ui-availability-grid-cell {
  height: 28px; margin: 0; padding: 0; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-surface); cursor: pointer;
  transition: background .1s, border-color .1s;
}
.ui-availability-grid-cell:hover { border-color: var(--ui-accent); }
.ui-availability-grid-cell:focus-visible { outline: none; box-shadow: var(--ui-focus); position: relative; z-index: 1; }
.ui-availability-grid-cell[aria-pressed="true"] { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-availability-grid-cell:disabled { cursor: not-allowed; opacity: .6; }
.ui-availability-grid-half .ui-availability-grid-cell { height: 18px; }
.ui-availability-grid-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--ui-muted); }
.ui-availability-grid-key { display: inline-flex; align-items: center; gap: 6px; }
.ui-availability-grid-key i { width: 14px; height: 14px; border: 1px solid var(--ui-border); border-radius: 3px; background: var(--ui-surface); }
.ui-availability-grid-key i.ui-availability-grid-on { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-availability-grid-count { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .ui-availability-grid-cell { transition: none; } }


.ui-bills { display: grid; gap: 10px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-bills-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ui-bills-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-bills-total { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bills-total b { color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-bills-total .ui-bills-late { color: var(--ui-danger); font-weight: 600; }
.ui-bills-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; }
.ui-bills-item { --s: var(--ui-border); display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 11px; border-left: 3px solid var(--s); }
.ui-bills-item + .ui-bills-item { border-top: 1px solid var(--ui-border); }
.ui-bills-overdue { --s: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger-soft) 45%, var(--ui-surface)); }
.ui-bills-today, .ui-bills-soon { --s: var(--ui-warning); }
.ui-bills-paid { --s: var(--ui-success); }
.ui-bills-cal { flex: none; display: grid; justify-items: center; width: 42px; padding: 3px 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); line-height: 1.1; }
.ui-bills-cal small { color: var(--ui-muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ui-bills-cal b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ui-bills-what { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ui-bills-payee { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bills-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ui-muted); font-size: 12px; }
.ui-bills-when { font-weight: 500; }
.ui-bills-overdue .ui-bills-when { color: var(--ui-danger); }
.ui-bills-today .ui-bills-when, .ui-bills-soon .ui-bills-when { color: var(--ui-warning); }
.ui-bills-paid .ui-bills-when { color: var(--ui-success); }
.ui-bills-auto { padding: 0 7px; border-radius: 999px; background: var(--ui-subtle); font-size: 11px; font-weight: 500; line-height: 18px; }
.ui-bills-auto-on { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-bills-amount { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-bills-paid .ui-bills-amount { color: var(--ui-muted); text-decoration: line-through; font-weight: 500; }
.ui-bills-pay { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 13px var(--ui-font); text-decoration: none; cursor: pointer; }
.ui-bills-pay:hover { background: color-mix(in srgb, var(--ui-accent) 88%, #000); }
.ui-bills-pay:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bills-pay-soft { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); }
.ui-bills-pay-soft:hover { border-color: var(--ui-strong); background: var(--ui-surface); }
.ui-bills-done { flex: none; width: 58px; color: var(--ui-success); font-size: 13px; font-weight: 600; text-align: center; }
.ui-bills-empty { margin: 0; padding: 24px 14px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); text-align: center; }
@media (max-width: 480px) { .ui-bills-cal { display: none; } }


.ui-qrpay { display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); text-align: center; }
.ui-qrpay-cols { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.ui-qrpay-side { display: grid; gap: 10px; justify-items: center; width: 100%; min-width: 0; }
.ui-qrpay-sum { margin: 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-qrpay-sum strong { display: block; color: var(--ui-fg); font-size: min(32px, 9cqw); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ui-qrpay-code { box-sizing: border-box; display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 1; padding: 8px; border-radius: var(--ui-radius); background: #fff; color: #000; }
.ui-qrpay-code figure { display: block; width: 100%; margin: 0; }
.ui-qrpay-code svg { display: block; width: 100%; height: auto; }
.ui-qrpay-off { border: 1px dashed var(--ui-border); background: var(--ui-subtle); color: var(--ui-muted); }
.ui-qrpay-off p { margin: 0; padding: 12px; font-size: 15px; }
.ui-qrpay-paid { background: var(--ui-success-soft); color: var(--ui-success); border: 0; }
.ui-qrpay-paid p { font-size: 22px; font-weight: 700; }
.ui-qrpay-bad { background: var(--ui-danger-soft); color: var(--ui-danger); border: 0; }
.ui-qrpay-ref { margin: 0; color: var(--ui-muted); font: 13px/1.3 var(--ui-mono); overflow-wrap: anywhere; }
.ui-qrpay-clock { position: relative; width: min(100%, 300px); }
.ui-qrpay-clock p { margin: 0 0 4px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-qrpay-left { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-qrpay-left span { display: block; height: 100%; background: var(--ui-accent); transition: width .9s linear; }
.ui-qrpay-soon p { color: var(--ui-warning); font-weight: 600; }
.ui-qrpay-soon .ui-qrpay-left span { background: var(--ui-warning); }
.ui-qrpay-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.ui-qrpay-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ui-qrpay-st-waiting { color: var(--ui-info); }
.ui-qrpay-st-paid { color: var(--ui-success); }
.ui-qrpay-st-failed, .ui-qrpay-st-expired { color: var(--ui-danger); }
.ui-qrpay-st-cancelled { color: var(--ui-muted); }
.ui-qrpay-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-qrpay-note { margin: 0; max-width: 34em; color: var(--ui-muted); font-size: 13px; }
.ui-qrpay-err { color: var(--ui-danger); }
.ui-qrpay-copy { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-qrpay-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (min-width: 560px) {
  .ui-qrpay-cols { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 28px; text-align: left; }
  .ui-qrpay-side { justify-items: start; }
  .ui-qrpay-acts { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ui-qrpay-left span { transition: none; } }


.ui-masonry { columns: var(--ui-masonry-min, 220px) var(--ui-masonry-cols, 3); column-gap: var(--ui-masonry-gap, 16px); min-width: 0; }
.ui-masonry > *, .ui-masonry > quillo-raw > * { display: block; break-inside: avoid; margin: 0 0 var(--ui-masonry-gap, 16px); width: 100%; }
.ui-masonry > img, .ui-masonry > quillo-raw > img { height: auto; }


.ui-chat-screen { display: flex; container-type: inline-size; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-chat-screen-fill { position: fixed; inset: 0; z-index: 30; height: auto; max-height: 100dvh; overscroll-behavior: none; }
.ui-chat-screen-side { display: none; flex: none; width: 260px; overflow-y: auto; border-right: 1px solid var(--ui-border); background: var(--ui-subtle); overscroll-behavior: contain; }
.ui-chat-screen-thread {
  display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--ui-border);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ui-chat-screen-thread[aria-current="true"] { background: var(--ui-accent-soft); }
.ui-chat-screen-thread:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-chat-screen-thread b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-chat-screen-thread small { grid-column: 1; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-chat-screen-thread i { grid-row: 1 / 3; grid-column: 2; align-self: center; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 12px/22px var(--ui-font); text-align: center; }
.ui-chat-screen-main { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding-bottom: var(--ui-chat-screen-lift, 0px); }
.ui-chat-screen-bar { flex: none; padding: max(10px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-chat-screen-bar h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-chat-screen-bar p { margin: 0; color: var(--ui-muted); font-size: 13px; }
/* Reversed so that the bottom is where a scroll starts from: on both engines, what is added above does not move
   what is on screen, and a screen at the bottom stays there. overflow-anchor is off so that only this rule applies. */
.ui-chat-screen-scroll { flex: 1; display: flex; flex-direction: column-reverse; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ui-chat-screen-scroll:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-chat-screen-list { position: relative; display: flow-root; padding: 8px 12px; }
.ui-chat-screen-row { padding-top: 2px; }
.ui-chat-screen-row-first { padding-top: 10px; }
.ui-chat-screen-day { position: sticky; top: 6px; z-index: 2; display: flex; justify-content: center; padding: 8px 0 4px; pointer-events: none; }
.ui-chat-screen-day span { min-width: 104px; padding: 2px 12px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; box-shadow: 0 0 0 1px var(--ui-border); }
.ui-chat-screen-older {
  display: block; margin: 4px auto 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer;
}
.ui-chat-screen-older:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chat-screen-typing { margin: 6px 0 2px 4px; color: var(--ui-muted); font-size: 13px; }
.ui-chat-screen-foot { flex: none; position: relative; }
.ui-chat-screen-jump {
  position: absolute; right: 12px; bottom: calc(100% + 12px); z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); font: 600 13px var(--ui-font); cursor: pointer;
}
.ui-chat-screen-jump svg { width: 18px; height: 18px; }
.ui-chat-screen-jump:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@container (min-width: 640px) {
  .ui-chat-screen-side { display: block; }
  .ui-chat-screen-list { padding: 8px 24px; }
  .ui-chat-screen-bar { padding-left: 24px; padding-right: 24px; }
}


.ui-largetitle {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; container-type: inline-size;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); --ui-largetitle-p: 0; --ui-largetitle-g: 1;
}
.ui-largetitle-bar {
  position: relative; z-index: 1; display: grid; flex: none; grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr); align-items: center; box-sizing: border-box;
  min-height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
  border-bottom: 1px solid transparent; background: var(--ui-bg); transition: border-color .15s, background-color .15s;
}
.ui-largetitle-done .ui-largetitle-bar { border-bottom-color: var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 88%, transparent); }
.ui-largetitle-small {
  min-width: 0; overflow: hidden; font-size: 17px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap;
  opacity: calc((var(--ui-largetitle-p) - .6) * 2.5); transform: translate3d(0, calc((1 - var(--ui-largetitle-p)) * 8px), 0);
}
.ui-largetitle-start { justify-self: start; min-width: 0; }
.ui-largetitle-end { display: flex; justify-self: end; align-items: center; min-width: 0; }
.ui-largetitle-back, .ui-largetitle-end button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: inherit; cursor: pointer;
}
.ui-largetitle-back { max-width: 100%; padding-inline-start: 2px; }
.ui-largetitle-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-largetitle-back svg { flex: none; width: 26px; height: 26px; }
.ui-largetitle-back:dir(rtl) svg { transform: scaleX(-1); }
.ui-largetitle-back:focus-visible, .ui-largetitle-end button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-largetitle-back:hover, .ui-largetitle-end button:hover { background: var(--ui-subtle); } }
.ui-largetitle-scroll { flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); overflow: auto; overscroll-behavior-x: contain; outline: none; }
.ui-largetitle-scroll:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-largetitle-big {
  margin: 0; padding: 2px 16px 10px; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere;
  transform: scale(calc(var(--ui-largetitle-g) * (1 - var(--ui-largetitle-p) * .25))); transform-origin: 0 100%;
  opacity: calc(1 - var(--ui-largetitle-p) * 1.4); will-change: transform, opacity;
}
.ui-largetitle-big:dir(rtl) { transform-origin: 100% 100%; }
@container (min-width: 600px) { .ui-largetitle-big { padding-inline: 24px; font-size: 40px; } .ui-largetitle-bar { padding-inline: 12px; } }
@media (max-height: 430px) {
  .ui-largetitle-big { display: none; }
  .ui-largetitle-small { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-largetitle-bar { transition: none; } .ui-largetitle-small { transform: none; } }


.responsive-split-demo-note { box-sizing: border-box; display: block; width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }


.ui-changelog { display: grid; gap: 0; font: 14px/1.55 var(--ui-font); color: var(--ui-fg); }
.ui-changelog-rel { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 28px; padding: 22px 0; scroll-margin-top: 16px; }
.ui-changelog-rel + .ui-changelog-rel { border-top: 1px solid var(--ui-border); }
.ui-changelog-rel:first-child { padding-top: 0; }
.ui-changelog-side { color: var(--ui-muted); font-size: 13px; padding-top: 4px; }
.ui-changelog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 20px; font-weight: 650; line-height: 1.3; }
.ui-changelog-head a { color: inherit; text-decoration: none; }
.ui-changelog-head a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-changelog-head a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-changelog-title { color: var(--ui-muted); font-weight: 500; }
.ui-changelog-tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; --t: var(--ui-accent); color: var(--t);
  background: color-mix(in srgb, var(--t) 13%, transparent); }
.ui-changelog-tag-success { --t: var(--ui-success); }
.ui-changelog-tag-warning { --t: var(--ui-warning); }
.ui-changelog-tag-danger { --t: var(--ui-danger); }
.ui-changelog-tag-info { --t: var(--ui-info); }
.ui-changelog-tag-neutral { --t: var(--ui-muted); }
.ui-changelog-summary { margin: 6px 0 0; color: var(--ui-muted); }
.ui-changelog-main { min-width: 0; }
.ui-changelog-group { margin-top: 14px; }
.ui-changelog-kind { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border-radius: var(--ui-radius-sm); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; --t: var(--ui-muted); color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); }
.ui-changelog-added { --t: var(--ui-success); }
.ui-changelog-changed { --t: var(--ui-info); }
.ui-changelog-deprecated { --t: var(--ui-warning); }
.ui-changelog-removed { --t: var(--ui-danger); }
.ui-changelog-fixed { --t: var(--ui-accent); }
.ui-changelog-security { --t: var(--ui-danger); }
.ui-changelog ul { margin: 0; padding-left: 20px; }
.ui-changelog li + li { margin-top: 3px; }
@media (max-width: 560px) { .ui-changelog-rel { grid-template-columns: 1fr; } .ui-changelog-side { order: 2; padding: 0; } }


.ui-story-ring { display: flex; gap: 14px; margin: 0; padding: 4px 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); --s: 64px; }
.ui-story-ring li { flex: none; width: calc(var(--s) + 12px); }
.ui-story-ring-item { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.ui-story-ring-item:focus-visible { outline: none; }
.ui-story-ring-item:focus-visible .ui-story-ring-circle { box-shadow: var(--ui-focus); }
.ui-story-ring-circle {
  position: relative; display: grid; place-items: center; width: calc(var(--s) + 8px); height: calc(var(--s) + 8px); border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 40%, var(--ui-danger)), var(--ui-warning), var(--ui-accent));
  transition: transform .15s;
}
.ui-story-ring-item:hover .ui-story-ring-circle { transform: scale(1.04); }
.ui-story-ring-seen .ui-story-ring-circle { background: var(--ui-strong); }
.ui-story-ring-you .ui-story-ring-circle { background: transparent; border: 2px dashed var(--ui-strong); padding: 2px; }
.ui-story-ring-avatar {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid var(--ui-bg);
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: calc(var(--s) * .32); font-weight: 650; user-select: none;
}
.ui-story-ring-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-story-ring-plus {
  position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--ui-bg); background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 16px; font-weight: 700; line-height: 1;
}
.ui-story-ring-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-story-ring-seen .ui-story-ring-name { color: var(--ui-muted); }
.ui-story-ring-sm { --s: 48px; gap: 10px; font-size: 11px; }
.ui-story-ring-lg { --s: 80px; gap: 18px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-story-ring-circle { transition: none; } }


.ui-discount {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); font: 700 12px/1 var(--ui-font); letter-spacing: .01em; white-space: nowrap;
  font-variant-numeric: tabular-nums; --t: var(--ui-danger); --ts: var(--ui-danger-soft);
}
.ui-discount-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }
.ui-discount-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-discount-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-discount-neutral { --t: var(--ui-fg); --ts: var(--ui-subtle); }
.ui-discount-solid { background: var(--t); color: var(--ui-bg); }
.ui-discount-soft { background: var(--ts); color: var(--t); }
.ui-discount-outline { border-color: var(--t); color: var(--t); background: var(--ui-surface); }
.ui-discount-sm { height: 20px; padding: 0 7px; font-size: 11px; }
.ui-discount-corner { position: absolute; z-index: 1; }
.ui-discount-top-left { top: 8px; left: 8px; }
.ui-discount-top-right { top: 8px; right: 8px; }
.ui-discount-bottom-left { bottom: 8px; left: 8px; }
.ui-discount-bottom-right { bottom: 8px; right: 8px; }


.keyboard-hud-demo-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); }


.ui-onboard-host { display: contents; }
.ui-onboard { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-onboard-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-onboard-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-onboard-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-onboard-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-onboard-fill { height: 100%; border-radius: inherit; background: var(--ui-success); transition: width .3s ease; }
.ui-onboard-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-onboard-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 6px; border-radius: var(--ui-radius-sm); }
.ui-onboard-step:hover { background: var(--ui-subtle); }
.ui-onboard-tick { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.ui-onboard-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-onboard-box { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--ui-strong); border-radius: 50%; color: transparent; transition: background .15s, border-color .15s; }
.ui-onboard-box svg { width: 12px; height: 12px; }
.ui-onboard-tick input:checked + .ui-onboard-box { border-color: var(--ui-success); background: var(--ui-success); color: #fff; }
.ui-onboard-tick input:focus-visible + .ui-onboard-box { box-shadow: var(--ui-focus); }
.ui-onboard-what { min-width: 0; }
.ui-onboard-step-title { font-weight: 500; }
.ui-onboard-done .ui-onboard-step-title { color: var(--ui-muted); text-decoration: line-through; }
.ui-onboard-text { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-onboard-link { color: var(--ui-accent); font-weight: 500; font-size: 13px; text-decoration: none; white-space: nowrap; border-radius: 3px; }
.ui-onboard-link:hover { text-decoration: underline; }
.ui-onboard-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-onboard-done .ui-onboard-link { visibility: hidden; }
.ui-onboard-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px;
  border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); color: var(--ui-success); font-weight: 500; }
.ui-onboard-hide { height: 30px; padding: 0 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-onboard-hide:hover { background: var(--ui-subtle); }
.ui-onboard-hide:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-onboard-fill, .ui-onboard-box { transition: none; } }


.ui-icon-grid { display: grid; gap: 12px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-icon-grid-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-icon-grid-head label { font-size: 13px; font-weight: 500; }
.ui-icon-grid-search {
  flex: 1 1 200px; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
}
.ui-icon-grid-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-icon-grid-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-icon-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w, 96px), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-icon-grid-tile {
  display: grid; justify-items: center; gap: 8px; width: 100%; padding: 14px 6px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 12px/1.2 var(--ui-font);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ui-icon-grid-tile:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-icon-grid-tile:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-icon-grid-tile[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-icon-grid-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); }
.ui-icon-grid-tile[aria-pressed="true"] .ui-icon-grid-name { color: inherit; }
.ui-icon-grid-empty { padding: 20px; text-align: center; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-icon-grid-tile { transition: none; } }


.ui-elx { display: grid; gap: 12px; min-width: 0; max-width: 520px; padding: 16px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-elx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-elx .ui-elx-race { margin: 0; font-size: 17px; font-weight: 750; }
.ui-elx-race a { color: inherit; text-decoration: none; }
.ui-elx-race a:hover { color: var(--ui-accent); }
.ui-elx-race a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-elx-call { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--ui-subtle); color: var(--ui-muted); white-space: nowrap; }
.ui-elx-called .ui-elx-call { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-elx-table { width: 100%; border-collapse: collapse; }
.ui-elx-table th { padding: 0 0 6px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: right; }
.ui-elx-table th:first-child { text-align: left; }
.ui-elx-table td { padding: 8px 0 10px; border-top: 1px solid var(--ui-border); vertical-align: top; text-align: right; white-space: nowrap; }
.ui-elx-table td:first-child { width: 100%; text-align: left; white-space: normal; }
.ui-elx-table td + td { padding-left: 14px; }
.ui-elx-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 600; }
.ui-elx-party { padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 11px; font-weight: 700; }
.ui-elx-inc { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-elx-win { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-success); color: var(--ui-bg);
  font-size: 11px; font-weight: 800; }
.ui-elx-bar { display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--ui-subtle); overflow: hidden; }
.ui-elx-bar span { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.ui-elx-lost .ui-elx-bar span { opacity: .45; }
.ui-elx-pct { font-size: 16px; font-weight: 700; }
.ui-elx-votes { color: var(--ui-muted); }
.ui-elx-winner .ui-elx-pct { color: var(--ui-fg); }
.ui-elx-c-dem { --c: var(--ui-info); }
.ui-elx-c-rep { --c: var(--ui-danger); }
.ui-elx-c-grn { --c: var(--ui-success); }
.ui-elx-c-lib { --c: var(--ui-warning); }
.ui-elx-c-other { --c: var(--ui-muted); }
.ui-elx-foot { display: grid; gap: 6px; color: var(--ui-muted); font-size: 12px; }
.ui-elx-count { display: flex; justify-content: space-between; gap: 8px; }
.ui-elx-count b { color: var(--ui-fg); font-weight: 650; }
.ui-elx-meter { height: 4px; border-radius: 2px; background: var(--ui-border); overflow: hidden; }
.ui-elx-meter span { display: block; height: 100%; background: var(--ui-fg); }
.ui-elx-margin { margin: 0; }
.ui-elx-margin b { color: var(--ui-fg); font-weight: 650; }


.ui-prodconf { display: grid; gap: 16px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-prodconf .ui-prodconf-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-prodconf-group { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-prodconf-group legend { padding: 0 0 4px; font-size: 13px; font-weight: 600; }
.ui-prodconf-limit { color: var(--ui-muted); font-weight: 400; }
.ui-prodconf-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ui-prodconf-option:hover { border-color: var(--ui-strong); }
.ui-prodconf-option:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-prodconf-option input { margin: 0; accent-color: var(--ui-accent); }
.ui-prodconf-on { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-prodconf-off { cursor: not-allowed; background: var(--ui-subtle); color: var(--ui-muted); }
.ui-prodconf-off:hover { border-color: var(--ui-border); }
.ui-prodconf-name { min-width: 0; overflow-wrap: anywhere; }
.ui-prodconf-cost { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.ui-prodconf-why { grid-column: 2 / -1; font-size: 12px; color: var(--ui-muted); }
.ui-prodconf-notes { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-prodconf-notes ul { margin: 0; padding-left: 18px; }
.ui-prodconf-undo { justify-self: start; padding: 4px 10px; border: 1px solid currentColor; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: 500 12px var(--ui-font); cursor: pointer; }
.ui-prodconf-undo:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-prodconf-problems { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-prodconf-sum { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-prodconf-lines { display: grid; gap: 3px; margin: 0; padding: 0 0 8px; border-bottom: 1px solid var(--ui-border); list-style: none; font-size: 13px; }
.ui-prodconf-lines li { display: flex; justify-content: space-between; gap: 12px; }
.ui-prodconf-lines span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-prodconf-total { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 700; }
.ui-prodconf-total span:last-child { color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.ui-prodconf-valid { margin: 0; color: var(--ui-success); font-size: 13px; font-weight: 600; }
.ui-prodconf-missing { margin: 0; padding-left: 18px; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 420px) { .ui-prodconf { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .ui-prodconf-option { transition: none; } }


.ui-tl { display: grid; gap: 8px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-tl-label { margin: 0; font-size: 13px; font-weight: 500; }
.ui-tl-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-tl-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.ui-tl-side { display: grid; grid-template-rows: auto auto 1fr; min-width: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); overflow: hidden; align-self: stretch; }
.ui-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-tl-title { margin: 0; font-size: 13px; font-weight: 600; }
.ui-tl-count { font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-tl-filter { box-sizing: border-box; width: calc(100% - 16px); height: 30px; margin: 8px 8px 0; padding: 0 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 13px/1 var(--ui-font); }
.ui-tl-filter::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-tl-filter:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-tl-list { margin: 0; padding: 6px; list-style: none; overflow: auto; min-height: 120px; outline: none; }
.ui-tl-list:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-tl-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
  user-select: none; -webkit-user-select: none; }
.ui-tl-opt:hover { background: var(--ui-subtle); }
.ui-tl-opt[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-tl-list:focus-visible .ui-tl-active { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-tl-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1.5px solid var(--ui-strong); border-radius: 4px; background: var(--ui-surface); }
.ui-tl-box svg { width: 10px; height: 10px; opacity: 0; }
[aria-selected="true"] > .ui-tl-box { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
[aria-selected="true"] > .ui-tl-box svg { opacity: 1; }
.ui-tl-none { padding: 14px 8px; color: var(--ui-muted); font-size: 13px; text-align: center; }
.ui-tl-moves { display: grid; gap: 6px; }
.ui-tl-moves button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; padding: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); cursor: pointer; }
.ui-tl-moves button:hover:not(:disabled) { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-tl-moves button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tl-moves button:disabled { opacity: .45; cursor: not-allowed; }
.ui-tl-moves svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .ui-tl-body { grid-template-columns: minmax(0, 1fr); }
  .ui-tl-moves { grid-auto-flow: column; justify-content: center; }
  .ui-tl-moves svg { transform: rotate(90deg); }
}


.ui-folder-browser { container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); background: var(--ui-bg); }
.ui-folder-browser-frame { display: flex; flex: 1; min-height: 0; }
.ui-folder-browser-tree { display: none; }
.ui-folder-browser-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.ui-folder-browser-bar { display: flex; flex: none; align-items: center; gap: 2px; min-height: 48px; padding: env(safe-area-inset-top) 4px 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-folder-browser-back { display: flex; flex: none; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 15px/1 var(--ui-font); cursor: pointer; }
.ui-folder-browser-back:disabled { color: var(--ui-strong); cursor: default; }
.ui-folder-browser-back svg { width: 22px; height: 22px; }
.ui-folder-browser-crumbs { flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ui-folder-browser-crumbs::-webkit-scrollbar { display: none; }
.ui-folder-browser-crumbs ol { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; }
.ui-folder-browser-crumbs li { display: flex; align-items: center; }
.ui-folder-browser-crumbs li + li::before { content: "/"; color: var(--ui-strong); }
.ui-folder-browser-crumb { min-width: 44px; min-height: 44px; max-width: 180px; padding: 0 8px; overflow: hidden; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 14px/1 var(--ui-font); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ui-folder-browser-crumb[aria-current="page"] { color: var(--ui-fg); font-weight: 600; }
.ui-folder-browser-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); outline: none; }
.ui-folder-browser-list { margin: 0; padding: 0; list-style: none; }
.ui-folder-browser-row { display: flex; align-items: center; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-folder-browser-go { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 6px 4px 6px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-folder-browser-icon { flex: none; width: 26px; height: 26px; color: var(--ui-muted); }
.ui-folder-browser-go[data-kind="folder"] .ui-folder-browser-icon { color: var(--ui-accent); }
.ui-folder-browser-text { flex: 1; min-width: 0; }
.ui-folder-browser-name { display: block; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-folder-browser-note { display: block; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-folder-browser-more { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-folder-browser-more svg { width: 22px; height: 22px; }
.ui-folder-browser-none { padding: 40px 16px; color: var(--ui-muted); text-align: center; }
.ui-folder-browser-say { flex: none; margin: 0; padding: 6px 14px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 13px; }
.ui-folder-browser-say[data-bad] { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-folder-browser-say:empty { display: none; }
.ui-folder-browser-sheet { box-sizing: border-box; inset: auto 0 var(--ui-folder-browser-kb, 0px) 0; width: min(100vw, 640px); max-width: 100vw; max-height: 86dvh; margin: 0 auto; padding: 0 0 max(12px, env(safe-area-inset-bottom)); overflow: hidden; border: 1px solid var(--ui-border); border-bottom: 0; border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.4 var(--ui-font); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-folder-browser-sheet[open] { display: flex; flex-direction: column; animation: ui-folder-browser-up .24s cubic-bezier(.2, .8, .2, 1); }
.ui-folder-browser-sheet::backdrop { background: var(--ui-overlay); }
@keyframes ui-folder-browser-up { from { transform: translateY(100%); } }
.ui-folder-browser-dragging { transition: none; }
.ui-folder-browser-sheethead { display: flex; flex: none; align-items: center; gap: 4px; padding: 0 6px 0 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ui-folder-browser-grip { display: grid; flex: none; place-items: center; width: 100%; height: 44px; margin-bottom: -16px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.ui-folder-browser-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-folder-browser-sheethead h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-folder-browser-close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-folder-browser-close svg { width: 18px; height: 18px; }
.ui-folder-browser-part { display: grid; flex: 1; gap: 10px; min-height: 0; padding: 8px 16px 4px; overflow-y: auto; overscroll-behavior: contain; }
.ui-folder-browser-part[hidden] { display: none; }
.ui-folder-browser-action { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); text-align: left; cursor: pointer; }
.ui-folder-browser-field { box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.2 var(--ui-font); }
.ui-folder-browser-field[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-folder-browser-why { min-height: 18px; margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-folder-browser-do { min-height: 46px; padding: 0 16px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 15px/1 var(--ui-font); cursor: pointer; }
.ui-folder-browser-do:disabled { background: var(--ui-subtle); color: var(--ui-muted); cursor: default; }
.ui-folder-browser-where { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.ui-folder-browser-where span { flex: 1; min-width: 0; overflow: hidden; color: var(--ui-muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ui-folder-browser-folders { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-folder-browser-none-small { margin: 0; padding: 10px 2px; color: var(--ui-muted); }
.ui-folder-browser :is(.ui-folder-browser-back, .ui-folder-browser-crumb, .ui-folder-browser-go, .ui-folder-browser-more, .ui-folder-browser-grip, .ui-folder-browser-close, .ui-folder-browser-action, .ui-folder-browser-do, .ui-folder-browser-branch):focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-folder-browser-field:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
/* A tablet shows the whole tree beside the folder, and the sheet stands in the middle. */
@container (min-width: 640px) {
  .ui-folder-browser-tree { display: block; flex: 0 0 min(34%, 300px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px; border-right: 1px solid var(--ui-border); background: var(--ui-subtle); }
  .ui-folder-browser-tree ul { margin: 0; padding: 0; list-style: none; }
  .ui-folder-browser-branch { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 8px 0 calc(8px + var(--depth, 0) * 16px); overflow: hidden; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1.2 var(--ui-font); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .ui-folder-browser-branch[aria-current="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
  .ui-folder-browser-sheet { inset: 0; width: 440px; max-height: 70dvh; height: fit-content; margin: auto; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); }
  .ui-folder-browser-grip { display: none; }
  .ui-folder-browser-sheethead { padding-top: 8px; }
}
@media (hover: hover) {
  .ui-folder-browser-go:hover, .ui-folder-browser-more:hover, .ui-folder-browser-action:hover, .ui-folder-browser-branch:hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-folder-browser-sheet { transition: none; }
  .ui-folder-browser-sheet[open] { animation: none; }
}


.ui-expandable { min-width: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-expandable table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-expandable th, .ui-expandable td { padding: 8px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.ui-expandable thead th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-expandable tbody tr:last-child td { border-bottom: 0; }
.ui-expandable .ui-expandable-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-expandable-btn-cell { width: 1%; padding-right: 0; }
.ui-expandable-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-muted); cursor: pointer; }
.ui-expandable-btn:hover { border-color: var(--ui-strong); color: var(--ui-fg); }
.ui-expandable-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-expandable-btn svg { width: 12px; height: 12px; transition: transform .15s; }
.ui-expandable-btn[aria-expanded="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-expandable-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.ui-expandable-open td { background: color-mix(in srgb, var(--ui-accent-soft) 40%, var(--ui-surface)); border-bottom-color: transparent; }
.ui-expandable-zebra tbody tr.ui-expandable-row:nth-of-type(even) td { background: color-mix(in srgb, var(--ui-subtle) 55%, transparent); }
.ui-expandable tbody tr.ui-expandable-row:hover td { background: var(--ui-subtle); }
.ui-expandable-panel td { padding: 4px 14px 16px 54px; white-space: normal; background: color-mix(in srgb, var(--ui-accent-soft) 40%, var(--ui-surface)); }
.ui-expandable-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: 8px 28px; margin: 0; }
.ui-expandable-fields div { display: grid; gap: 1px; }
.ui-expandable-fields dt { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-expandable-fields dd { margin: 0; }
.ui-expandable-text { margin: 0; max-width: 64ch; color: var(--ui-fg); }
.ui-expandable-fields + .ui-expandable-text { margin-top: 10px; }
.ui-expandable-empty td { padding: 28px 14px; text-align: center; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .ui-expandable-btn svg { transition: none; } }


.ui-stepc {
  --ui-stepc-1: light-dark(#2a78d6, #3987e5); --ui-stepc-2: light-dark(#eb6834, #d95926);
  --ui-stepc-3: light-dark(#1baf7a, #199e70); --ui-stepc-4: light-dark(#eda100, #c98500);
  --ui-stepc-5: light-dark(#e87ba4, #d55181); --ui-stepc-6: light-dark(#008300, #008300);
  --ui-stepc-7: light-dark(#6250d6, #9085e9); --ui-stepc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg);
  container-type: inline-size; }
.ui-stepc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-stepc-s1 { --c: var(--ui-stepc-1); } .ui-stepc-s2 { --c: var(--ui-stepc-2); } .ui-stepc-s3 { --c: var(--ui-stepc-3); }
.ui-stepc-s4 { --c: var(--ui-stepc-4); } .ui-stepc-s5 { --c: var(--ui-stepc-5); } .ui-stepc-s6 { --c: var(--ui-stepc-6); }
.ui-stepc-s7 { --c: var(--ui-stepc-7); } .ui-stepc-s8 { --c: var(--ui-stepc-8); }
.ui-stepc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-stepc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-stepc-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-stepc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-stepc-y { position: relative; min-width: 24px; }
.ui-stepc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-stepc-plot { position: relative; }
.ui-stepc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-stepc-grid.ui-stepc-zero { background: var(--ui-strong); }
.ui-stepc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-stepc-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.ui-stepc-area { fill: var(--c); opacity: .14; stroke: none; }
.ui-stepc-cols { position: absolute; inset: 0; display: flex; }
.ui-stepc-col { position: relative; flex: 1; min-width: 0; }
.ui-stepc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 60%, transparent); }
.ui-stepc-dot { position: absolute; left: 50%; display: none; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-stepc-col:hover .ui-stepc-dot, .ui-stepc-col:hover .ui-stepc-tip { display: block; }
.ui-stepc-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-stepc-flip .ui-stepc-tip { left: auto; right: calc(50% + 10px); }
.ui-stepc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-stepc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-stepc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-stepc-x { display: flex; margin-top: 6px; }
.ui-stepc-x span { flex: 1; min-width: 0; overflow: visible; color: var(--ui-muted); text-align: center; white-space: nowrap; }
@container (max-width: 520px) { .ui-stepc-x .ui-stepc-alt { visibility: hidden; } }


.ui-unitprice { display: grid; gap: 14px; min-width: 0; max-width: 720px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-unitprice .ui-unitprice-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-unitprice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ui-unitprice-per { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.ui-unitprice-per select, .ui-unitprice-cell input { box-sizing: border-box; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
.ui-unitprice-per select:focus-visible, .ui-unitprice-cell input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-unitprice-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-unitprice-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 4px 10px; align-items: end; }
.ui-unitprice-cell { display: grid; gap: 3px; min-width: 0; }
.ui-unitprice-cell label { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-unitprice-cell input { width: 100%; }
.ui-unitprice-cell input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-unitprice-btn { min-height: 36px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-unitprice-btn:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-unitprice-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-unitprice-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-unitprice-rowerror { grid-column: 1 / -1; margin: 0; color: var(--ui-danger); font-size: 12px; }
.ui-unitprice-flag { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; font-weight: 500; }
.ui-unitprice-kind { display: grid; gap: 6px; }
.ui-unitprice-kind h4 { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-unitprice-rank { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-unitprice-rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; padding: 7px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-unitprice-rank .ui-unitprice-best { background: var(--ui-success-soft); }
.ui-unitprice-place { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-unitprice-who { overflow-wrap: anywhere; }
.ui-unitprice-each { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-unitprice-note { grid-column: 2 / -1; color: var(--ui-muted); font-size: 12px; }
.ui-unitprice-best .ui-unitprice-note { color: var(--ui-success); font-weight: 600; }
.ui-unitprice-empty { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 520px) { .ui-unitprice { padding: 16px; } .ui-unitprice-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ui-unitprice-row > :first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ui-unitprice-per select, .ui-unitprice-cell input { transition: none; } }


.ui-scrolltabs { font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-scrolltabs-row { position: relative; display: flex; align-items: stretch; }
.ui-scrolltabs-list {
  display: flex; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth; scroll-padding-inline: 36px;
}
.ui-scrolltabs-list::-webkit-scrollbar { display: none; }
.ui-scrolltabs-tab {
  flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 0; background: none;
  color: var(--ui-muted); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
}
.ui-scrolltabs-tab:hover { color: var(--ui-fg); }
.ui-scrolltabs-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-scrolltabs-line .ui-scrolltabs-list { border-bottom: 1px solid var(--ui-border); }
.ui-scrolltabs-line .ui-scrolltabs-tab { border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; margin-bottom: -1px; border-bottom: 1px solid var(--ui-border); }
.ui-scrolltabs-line .ui-scrolltabs-tab[aria-selected="true"] { color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-accent); }
.ui-scrolltabs-line .ui-scrolltabs-tab[aria-selected="true"]:focus-visible { box-shadow: inset 0 -2px 0 var(--ui-accent), var(--ui-focus); }
.ui-scrolltabs-pill .ui-scrolltabs-list { gap: 4px; }
.ui-scrolltabs-pill .ui-scrolltabs-tab { height: 32px; border-radius: 999px; }
.ui-scrolltabs-pill .ui-scrolltabs-tab:hover { background: var(--ui-subtle); }
.ui-scrolltabs-pill .ui-scrolltabs-tab[aria-selected="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-scrolltabs-arrow {
  position: absolute; top: 0; bottom: 0; z-index: 1; display: none; align-items: center; justify-content: center; width: 36px; padding: 0;
  border: 0; background: var(--ui-bg); color: var(--ui-muted); cursor: pointer;
}
.ui-scrolltabs-arrow svg { width: 16px; height: 16px; }
.ui-scrolltabs-arrow:hover { color: var(--ui-fg); }
.ui-scrolltabs-arrow:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-scrolltabs-left { left: 0; box-shadow: 8px 0 8px -6px rgba(0, 0, 0, .12); }
.ui-scrolltabs-right { right: 0; box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .12); }
.ui-scrolltabs-line .ui-scrolltabs-arrow { bottom: 1px; }
.ui-scrolltabs-more-left .ui-scrolltabs-left, .ui-scrolltabs-more-right .ui-scrolltabs-right { display: inline-flex; }
.ui-scrolltabs-panel { padding-top: 16px; }
.ui-scrolltabs-panel > :first-child { margin-top: 0; }
.ui-scrolltabs-panel > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ui-scrolltabs-tab { transition: none; } .ui-scrolltabs-list { scroll-behavior: auto; } }


.ui-et { display: grid; gap: 10px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-et-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-et table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-et th, .ui-et td { box-sizing: border-box; height: 38px; padding: 0 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--ui-border); }
.ui-et td + td, .ui-et th + th { border-left: 1px solid var(--ui-border); }
.ui-et tbody tr:last-child td { border-bottom: 0; }
.ui-et th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-et-req { margin-left: 2px; color: var(--ui-danger); }
.ui-et .ui-et-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-et .ui-et-center { text-align: center; }
.ui-et-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ui-et-sort:hover { color: var(--ui-fg); }
.ui-et-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-et-right .ui-et-sort { flex-direction: row-reverse; }
.ui-et-arrow { width: 12px; height: 12px; opacity: .35; }
[aria-sort] .ui-et-sort { color: var(--ui-fg); }
[aria-sort] .ui-et-arrow { opacity: 1; color: var(--ui-accent); }
.ui-et td { position: relative; cursor: cell; outline: none; }
.ui-et td[aria-readonly="true"] { color: var(--ui-muted); cursor: default; }
.ui-et td:focus { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-et-dirty::after { content: ""; position: absolute; top: 0; right: 0; border: 5px solid transparent;
  border-top-color: var(--ui-warning); border-right-color: var(--ui-warning); }
.ui-et-new td:first-child { box-shadow: inset 3px 0 0 var(--ui-success); }
.ui-et-new td:first-child:focus { box-shadow: inset 3px 0 0 var(--ui-success), inset 0 0 0 2px var(--ui-accent); }
.ui-et-empty-val { color: var(--ui-muted); }
.ui-et td.ui-et-editing { padding: 0; box-shadow: inset 0 0 0 2px var(--ui-accent); background: var(--ui-surface); }
.ui-et td.ui-et-editing.ui-et-bad { box-shadow: inset 0 0 0 2px var(--ui-danger); }
.ui-et-input { box-sizing: border-box; width: 100%; min-width: 80px; height: 36px; margin: 0; padding: 0 11px; border: 0; outline: none;
  background: transparent; color: var(--ui-fg); font: inherit; }
.ui-et-right .ui-et-input { text-align: right; }
.ui-et-err { position: absolute; z-index: 3; top: 100%; left: -1px; margin-top: 2px; padding: 4px 8px; border-radius: 4px;
  background: var(--ui-danger); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: var(--ui-shadow); }
.ui-et-err-up { top: auto; bottom: 100%; margin: 0 0 2px; }
.ui-et-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; vertical-align: middle;
  border: 1.5px solid var(--ui-strong); border-radius: 4px; background: var(--ui-surface); color: var(--ui-accent-fg); }
.ui-et-check[aria-checked="true"] { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-et-check svg { width: 10px; height: 10px; }
.ui-et-act { width: 1%; text-align: center !important; }
.ui-et-del { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 4px; background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-et-del:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-et-del svg { width: 12px; height: 12px; }
.ui-et-none td { height: 64px; color: var(--ui-muted); text-align: center; cursor: default; }
.ui-et-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  color: var(--ui-muted); font-size: 13px; }
.ui-et-add { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px dashed var(--ui-strong);
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-et-add:hover { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-et-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-et-add svg { width: 12px; height: 12px; }


.ui-qr-scanner { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-qr-scanner-body { display: grid; gap: 12px; }
.ui-qr-scanner-frame {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; max-height: 70dvh; width: 100%; margin: 0 auto;
  border-radius: var(--ui-radius); background: #111; color: #eee; text-align: center;
}
.ui-qr-scanner-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-qr-scanner-frame video[hidden] { display: none; }
.ui-qr-scanner-msg { z-index: 1; max-width: 80%; margin: 0; padding: 12px; }
/* The finder: a square of clear picture, the rest dimmed by its own shadow. */
.ui-qr-scanner-finder { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); pointer-events: none; }
.ui-qr-scanner-finder i { position: absolute; width: 28px; height: 28px; border: 0 solid #fff; }
.ui-qr-scanner-finder i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-top-left-radius: 12px; }
.ui-qr-scanner-finder i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-top-right-radius: 12px; }
.ui-qr-scanner-finder i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 12px; }
.ui-qr-scanner-finder i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 12px; }
.ui-qr-scanner-finder b { position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; background: var(--ui-accent); animation: ui-qr-scanner-sweep 2.4s ease-in-out infinite alternate; }
@keyframes ui-qr-scanner-sweep { to { top: calc(100% - 10px); } }
.ui-qr-scanner-side { display: grid; gap: 10px; align-content: start; }
.ui-qr-scanner-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-qr-scanner-bar > * { flex: 1 1 auto; }
.ui-qr-scanner-found { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-qr-scanner-kind { color: var(--ui-muted); font-size: 12px; }
.ui-qr-scanner-text { overflow-wrap: anywhere; font-weight: 500; }
.ui-qr-scanner-entry { display: grid; gap: 6px; }
.ui-qr-scanner-entry label { font-size: 13px; font-weight: 500; }
.ui-qr-scanner-row { display: flex; gap: 8px; }
.ui-qr-scanner-row input {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 16px/1.2 var(--ui-font);
}
.ui-qr-scanner-row input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-qr-scanner-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-qr-scanner-why { margin: 0; color: var(--ui-danger); font-size: 13px; }
@container (min-width: 440px) {
  .ui-qr-scanner-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ui-qr-scanner-finder b { animation: none; top: 50%; } }


.ui-loan-summary { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-loan-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ui-loan-summary-name { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.ui-loan-summary-who { margin: 2px 0 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-loan-summary-status { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize;
  background: var(--ui-subtle); color: var(--ui-muted); }
.ui-loan-summary-current { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-loan-summary-paid { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-loan-summary-late { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-loan-summary-owed { margin: 0; }
.ui-loan-summary-owed span { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-loan-summary-owed strong { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-loan-summary-owed small { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-loan-summary-progress { display: grid; gap: 6px; }
.ui-loan-summary-progress-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-loan-summary-progress-head span:last-child { color: var(--ui-muted); }
.ui-loan-summary-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-loan-summary-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); }
.ui-loan-summary-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 16px; margin: 0; padding-top: 14px;
  border-top: 1px solid var(--ui-border); }
.ui-loan-summary-facts dt { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-loan-summary-facts dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-loan-summary-facts dd small { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-loan-summary-facts .ui-loan-summary-overdue small { color: var(--ui-danger); font-weight: 600; }
.ui-loan-summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ui-loan-summary-pay { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; text-decoration: none; }
.ui-loan-summary-pay:hover { filter: brightness(1.08); }
.ui-loan-summary-link { color: var(--ui-accent); font-weight: 500; text-decoration: none; }
.ui-loan-summary-link:hover { text-decoration: underline; }
.ui-loan-summary-pay:focus-visible, .ui-loan-summary-link:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }


.ui-fsmeter { display: grid; gap: 12px; min-width: 0; max-width: 560px; padding: 16px 18px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-fsmeter .ui-fsmeter-title { display: block; margin: 0; font-size: 15px; font-weight: 650; }
.ui-fsmeter-say { margin: 0; font-weight: 600; }
.ui-fsmeter-done { color: var(--ui-success); }
.ui-fsmeter-track { position: relative; height: 10px; border-radius: 999px; background: var(--ui-subtle); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-fsmeter-fill { position: absolute; inset: 0 auto 0 0; min-width: 0; border-radius: 999px; background: var(--ui-accent); transition: width .25s; }
.ui-fsmeter-full .ui-fsmeter-fill { background: var(--ui-success); }
.ui-fsmeter-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ui-strong); }
.ui-fsmeter-tiers { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-fsmeter-tiers li { display: flex; justify-content: space-between; gap: 12px; color: var(--ui-muted); }
.ui-fsmeter-tiers .ui-fsmeter-got { color: var(--ui-success); font-weight: 600; }
.ui-fsmeter-tiers span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-fsmeter-offer { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
.ui-fsmeter-offer h4 { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-fsmeter-why { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-fsmeter-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-fsmeter-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-fsmeter-btn { flex: none; min-height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-fsmeter-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-fsmeter-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fsmeter-problems { margin: 0; padding: 8px 12px 8px 26px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 12px; }
.ui-fsmeter-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-fsmeter-fill { transition: none; } }


.ui-icon-btn {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  --b: var(--ui-fg); --bf: var(--ui-bg); --bs: var(--ui-subtle);
}
.ui-icon-btn svg { width: 18px; height: 18px; }
.ui-icon-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-icon-btn[disabled], .ui-icon-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ui-icon-btn-accent { --b: var(--ui-accent); --bf: var(--ui-accent-fg); --bs: var(--ui-accent-soft); }
.ui-icon-btn-danger { --b: var(--ui-danger); --bf: #fff; --bs: var(--ui-danger-soft); }
.ui-icon-btn-ghost { background: transparent; color: var(--b); }
.ui-icon-btn-ghost.ui-icon-btn-neutral { color: var(--ui-muted); }
.ui-icon-btn-ghost:hover { background: var(--bs); color: var(--b); }
.ui-icon-btn-soft { background: var(--bs); color: var(--b); }
.ui-icon-btn-soft:hover { background: color-mix(in srgb, var(--bs) 80%, var(--b)); }
.ui-icon-btn-outline { background: transparent; color: var(--b); border-color: var(--ui-border); }
.ui-icon-btn-outline:hover { border-color: var(--b); background: var(--bs); }
.ui-icon-btn-solid { background: var(--b); color: var(--bf); }
.ui-icon-btn-solid:hover { background: color-mix(in srgb, var(--b) 88%, var(--ui-fg)); }
.ui-icon-btn[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: transparent; }
.ui-icon-btn-sm { width: 30px; height: 30px; }
.ui-icon-btn-sm svg { width: 16px; height: 16px; }
.ui-icon-btn-lg { width: 46px; height: 46px; }
.ui-icon-btn-lg svg { width: 22px; height: 22px; }
.ui-icon-btn-round { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .ui-icon-btn { transition: none; } }


.ui-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none;
  font: 14px/1.4 var(--ui-font); color: var(--ui-muted); }
.ui-breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.ui-breadcrumbs li + li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 10px 0 7px;
  border: solid var(--ui-strong); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
}
.ui-breadcrumbs a, .ui-breadcrumbs-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch;
  border-radius: 4px; color: var(--ui-muted); text-decoration: none;
}
.ui-breadcrumbs a:hover { color: var(--ui-fg); text-decoration: underline; text-underline-offset: 3px; }
.ui-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-breadcrumbs [aria-current="page"] { color: var(--ui-fg); font-weight: 500; }
@media (max-width: 600px) {
  .ui-breadcrumbs li:not(:first-child):not(:last-child) a,
  .ui-breadcrumbs li:not(:first-child):not(:last-child) .ui-breadcrumbs-text { max-width: 9ch; }
  .ui-breadcrumbs li:last-child > * { max-width: 20ch; }
}


.ui-volume-control { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-fg); font: 13px/1 var(--ui-font); }
.ui-volume-control-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; cursor: pointer; }
.ui-volume-control-btn:hover { background: var(--ui-subtle); }
.ui-volume-control-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-volume-control-btn svg { width: 20px; height: 20px; }
.ui-volume-control-btn[aria-pressed="true"] { color: var(--ui-muted); }
.ui-volume-control input { appearance: none; width: 100px; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.ui-volume-control input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right, var(--ui-accent) var(--f, 0%), var(--ui-subtle) var(--f, 0%)); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-volume-control input::-moz-range-track { height: 5px; border-radius: 999px; background: var(--ui-subtle); }
.ui-volume-control input::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--ui-accent); }
.ui-volume-control input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4.5px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-accent); box-shadow: var(--ui-shadow); }
.ui-volume-control input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-accent); }
.ui-volume-control input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 999px; }
.ui-volume-control-sm .ui-volume-control-btn { width: 28px; height: 28px; }
.ui-volume-control-sm .ui-volume-control-btn svg { width: 16px; height: 16px; }
.ui-volume-control-sm input { width: 72px; }
.ui-volume-control-vertical { flex-direction: column-reverse; }
.ui-volume-control-vertical input { writing-mode: vertical-lr; direction: rtl; width: 20px; height: 100px; }
.ui-volume-control-vertical input::-webkit-slider-runnable-track { width: 5px; height: auto; background: linear-gradient(to top, var(--ui-accent) var(--f, 0%), var(--ui-subtle) var(--f, 0%)); }
.ui-volume-control-vertical input::-webkit-slider-thumb { margin-top: 0; margin-left: -4.5px; }


.ui-modal-host { display: contents; }
.ui-modal {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font);
}
.ui-modal-sm { width: min(380px, calc(100vw - 32px)); }
.ui-modal-lg { width: min(760px, calc(100vw - 32px)); }
.ui-modal::backdrop { background: var(--ui-overlay); }
.ui-modal[open] { animation: ui-modal-in .16s ease-out; }
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-modal-box { padding: 20px 22px 22px; }
.ui-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.ui-modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ui-modal-x {
  flex: none; width: 30px; height: 30px; margin: -4px -6px 0 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.ui-modal-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-modal-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-modal-body > :first-child { margin-top: 0; }
.ui-modal-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ui-modal[open] { animation: none; } }


.ui-infeed { position: relative; box-sizing: border-box; overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.35 var(--ui-font); }
.ui-infeed-scroll { position: relative; box-sizing: border-box; height: 100%; overflow-y: auto; overflow-anchor: none; overscroll-behavior-y: contain; outline: none; }
.ui-infeed-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-infeed-rows { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.ui-infeed-item { min-width: 0; }
.ui-infeed-row { display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; width: 100%; height: 100%; min-height: 56px; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.ui-infeed-row { cursor: pointer; }
button.ui-infeed-row:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
.ui-infeed-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-infeed-title { display: block; font-weight: 600; }
.ui-infeed-text { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 15px; overflow-wrap: anywhere; }
.ui-infeed-meta { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 13px; }
.ui-infeed-foot { display: grid; justify-items: center; gap: 8px; min-height: 72px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; color: var(--ui-muted); font-size: 14px; text-align: center; }
.ui-infeed-spin { width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--ui-accent) 22%, transparent); border-top-color: var(--ui-accent); border-radius: 50%; animation: ui-infeed-turn .75s linear infinite; }
.ui-infeed-retry { min-height: 46px; padding: 0 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-accent); font: 600 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-infeed-retry:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@keyframes ui-infeed-turn { to { transform: rotate(360deg); } }
@media (hover: hover) { button.ui-infeed-row:hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ui-infeed-spin { animation: none; border-color: var(--ui-accent); } }


.ui-image-gallery-grid { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 520px) { .ui-image-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-image-gallery-thumb {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); aspect-ratio: var(--r, 1); cursor: zoom-in;
}
.ui-image-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ui-image-gallery-thumb:hover img { transform: scale(1.04); }
.ui-image-gallery-thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 5px var(--ui-accent); }
.ui-image-gallery-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; font: 600 22px/1 var(--ui-font); }
.ui-image-gallery-dlg {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-image-gallery-dlg[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; animation: ui-image-gallery-in .18s ease-out; }
.ui-image-gallery-dlg::backdrop { background: var(--ui-overlay); }
@keyframes ui-image-gallery-in { from { opacity: 0; transform: scale(.98); } }
.ui-image-gallery-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--ui-border); }
.ui-image-gallery-count { margin: 0; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-image-gallery-stage { position: relative; display: grid; place-items: center; min-height: 0; height: min(62dvh, 560px); background: var(--ui-subtle); }
.ui-image-gallery-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.ui-image-gallery-cap { margin: 0; padding: 10px 16px; text-align: center; }
.ui-image-gallery-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); cursor: pointer;
}
.ui-image-gallery-btn:hover { background: var(--ui-subtle); }
.ui-image-gallery-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-image-gallery-btn svg { width: 18px; height: 18px; }
.ui-image-gallery-x { box-shadow: none; border-color: transparent; }
.ui-image-gallery-prev, .ui-image-gallery-next { position: absolute; top: 50%; transform: translateY(-50%); }
.ui-image-gallery-prev { left: 12px; }
.ui-image-gallery-next { right: 12px; }
.ui-image-gallery-strip { display: flex; gap: 6px; margin: 0; padding: 8px 12px 12px; overflow-x: auto; list-style: none; }
.ui-image-gallery-strip button { flex: none; width: 64px; height: 48px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: var(--ui-subtle); cursor: pointer; opacity: .65; }
.ui-image-gallery-strip button[aria-current="true"] { border-color: var(--ui-accent); opacity: 1; }
.ui-image-gallery-strip button:hover { opacity: 1; }
.ui-image-gallery-strip button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-image-gallery-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .ui-image-gallery-dlg[open] { animation: none; } .ui-image-gallery-thumb img { transition: none; } }


.demo-bar { display: flex; flex-direction: column; height: 100%; font: 15px/1.6 var(--ui-font); }
.demo-bar-page { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }
.demo-bar-page h4 { margin: 0 0 6px; font-size: 20px; }
.demo-bar-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-bar-swatch { width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer; }


.ui-bundlebuild { display: grid; gap: 16px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-bundlebuild .ui-bundlebuild-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-bundlebuild-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-bundlebuild-tiers li { padding: 3px 10px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-bundlebuild-tiers .ui-bundlebuild-reached { border-color: var(--ui-success); color: var(--ui-success); }
.ui-bundlebuild-tiers .ui-bundlebuild-now { border-color: var(--ui-success); background: var(--ui-success-soft); color: var(--ui-success); font-weight: 650; }
.ui-bundlebuild-group { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-bundlebuild-group legend { display: block; width: 100%; padding: 0 0 4px; font-size: 13px; font-weight: 600; }
.ui-bundlebuild-rule { color: var(--ui-muted); font-weight: 400; }
.ui-bundlebuild-short .ui-bundlebuild-rule { color: var(--ui-danger); }
.ui-bundlebuild-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ui-bundlebuild-item:hover { border-color: var(--ui-strong); }
.ui-bundlebuild-item:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bundlebuild-item input { margin: 0; accent-color: var(--ui-accent); }
.ui-bundlebuild-on { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-bundlebuild-full { cursor: not-allowed; background: var(--ui-subtle); color: var(--ui-muted); }
.ui-bundlebuild-full:hover { border-color: var(--ui-border); }
.ui-bundlebuild-name { min-width: 0; overflow-wrap: anywhere; }
.ui-bundlebuild-price { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bundlebuild-why { grid-column: 2 / -1; color: var(--ui-muted); font-size: 12px; }
.ui-bundlebuild-hint { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-info-soft); color: var(--ui-info); font-size: 13px; }
.ui-bundlebuild-problems { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-bundlebuild-sum { display: grid; gap: 4px; margin: 0; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-bundlebuild-sum div { display: flex; justify-content: space-between; gap: 16px; }
.ui-bundlebuild-sum dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ui-bundlebuild-total { padding-top: 6px; border-top: 1px solid var(--ui-border); font-size: 16px; font-weight: 700; }
.ui-bundlebuild-total dd { color: var(--ui-accent); font-weight: 700; }
.ui-bundlebuild-saving { color: var(--ui-success); }
.ui-bundlebuild-state { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-success); }
.ui-bundlebuild-missing { margin: 0; padding-left: 18px; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 420px) { .ui-bundlebuild { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .ui-bundlebuild-item { transition: none; } }


.ui-ranking { margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-ranking-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; }
.ui-ranking-row + .ui-ranking-row { border-top: 1px solid var(--ui-border); }
.ui-ranking-num { flex: none; width: 28px; text-align: right; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ui-fg); }
.ui-ranking-move { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 42px; height: 22px;
  padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; --t: var(--ui-muted);
  color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); }
.ui-ranking-up { --t: var(--ui-success); }
.ui-ranking-down { --t: var(--ui-danger); }
.ui-ranking-new { --t: var(--ui-accent); letter-spacing: .04em; }
.ui-ranking-same { background: none; }
.ui-ranking-move svg { width: 9px; height: 9px; }
.ui-ranking-what { flex: 1; min-width: 0; display: grid; }
.ui-ranking-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: inherit; text-decoration: none; }
a.ui-ranking-label:hover { color: var(--ui-accent); text-decoration: underline; }
a.ui-ranking-label:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-ranking-meta { color: var(--ui-muted); font-size: 12px; }
.ui-ranking-value { flex: none; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }


.ui-coop-ballot { display: grid; gap: 16px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-coop-ballot-head { display: grid; gap: 3px; }
.ui-coop-ballot .ui-coop-ballot-title { display: block; margin: 0; font-size: 18px; font-weight: 650; }
.ui-coop-ballot-text, .ui-coop-ballot-closes { margin: 0; color: var(--ui-muted); }
.ui-coop-ballot-closes { font-size: 13px; }
.ui-coop-ballot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-coop-ballot-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 4px 12px; padding: 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, opacity .15s; }
.ui-coop-ballot-card:hover { border-color: var(--ui-strong); }
.ui-coop-ballot-card:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-coop-ballot-on { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface)); }
.ui-coop-ballot-off { opacity: .55; cursor: not-allowed; }
.ui-coop-ballot-off:hover { border-color: var(--ui-border); }
.ui-coop-ballot-photo, .ui-coop-ballot-initials { width: 44px; height: 44px; border-radius: 50%; }
.ui-coop-ballot-photo { object-fit: cover; background: var(--ui-subtle); }
.ui-coop-ballot-initials { display: grid; place-items: center; background: var(--ui-subtle); color: var(--ui-muted); font-weight: 650; }
.ui-coop-ballot-on .ui-coop-ballot-initials { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-coop-ballot-who { display: grid; gap: 1px; min-width: 0; }
.ui-coop-ballot-name { font-weight: 600; font-size: 15px; }
.ui-coop-ballot-note { color: var(--ui-muted); font-size: 12px; }
.ui-coop-ballot-check { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ui-accent); cursor: inherit; }
.ui-coop-ballot-check:focus-visible { outline: none; }
.ui-coop-ballot-statement { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ui-fg); font-size: 13px; }
.ui-coop-ballot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-top: 14px; border-top: 1px solid var(--ui-border); }
.ui-coop-ballot-count { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-coop-ballot-full { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-coop-ballot-submit { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-coop-ballot-submit:hover:not(:disabled) { filter: brightness(1.08); }
.ui-coop-ballot-submit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-coop-ballot-submit:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-coop-ballot-card { transition: none; } }


.ui-shipping { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-shipping-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-shipping-list { display: grid; gap: 8px; }
.ui-shipping-opt { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.ui-shipping-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-shipping-dot { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ui-strong); background: var(--ui-surface); transition: border-color .15s; }
.ui-shipping-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ui-accent); transform: scale(0); transition: transform .12s; }
.ui-shipping-opt:hover { border-color: var(--ui-strong); }
.ui-shipping-opt:has(input:checked) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface)); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-shipping-opt input:checked + .ui-shipping-dot { border-color: var(--ui-accent); border-width: 1.5px; }
.ui-shipping-opt input:checked + .ui-shipping-dot::after { transform: scale(1); }
.ui-shipping-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-shipping-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-shipping-text { display: grid; gap: 1px; min-width: 0; }
.ui-shipping-name { font-weight: 500; }
.ui-shipping-time, .ui-shipping-hint { font-size: 13px; color: var(--ui-muted); }
.ui-shipping-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-shipping-free { color: var(--ui-success); }
.ui-shipping-invalid .ui-shipping-opt { border-color: var(--ui-danger); }
.ui-shipping-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-shipping-opt, .ui-shipping-dot, .ui-shipping-dot::after { transition: none; } }


.ui-cover {
  display: flex; flex-direction: column; min-height: var(--ui-cover-h, 100vh); min-width: 0;
  padding: var(--ui-cover-pad, 24px); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-cover-subtle { background: var(--ui-subtle); border-radius: var(--ui-radius); }
.ui-cover-top, .ui-cover-bottom { flex: none; }
.ui-cover-main { margin-block: auto; padding-block: var(--ui-cover-pad, 24px); }
.ui-cover-main > :first-child { margin-top: 0; }
.ui-cover-main > :last-child { margin-bottom: 0; }
.ui-cover-text .ui-cover-main { text-align: center; }


.ui-tz-overlap { display: grid; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-tz-overlap .ui-tz-overlap-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-tz-overlap-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-tz-overlap-sum { margin: 0; font-weight: 600; }
.ui-tz-overlap-note { margin: 0; padding: 6px 10px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-tz-overlap-plot { display: grid; grid-template-columns: minmax(84px, 130px) minmax(0, 1fr); gap: 10px; min-width: 0; }
.ui-tz-overlap-names, .ui-tz-overlap-rows { display: grid; gap: 4px; min-width: 0; }
.ui-tz-overlap-rows { position: relative; user-select: none; touch-action: none; }
.ui-tz-overlap-city { height: 30px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tz-overlap-city small { display: block; color: var(--ui-muted); font-size: 11px; font-weight: 400; }
.ui-tz-overlap-track { position: relative; height: 30px; overflow: hidden; border-radius: 4px; background: var(--ui-subtle); }
.ui-tz-overlap-work { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-surface)); }
.ui-tz-overlap-hour { position: absolute; top: 8px; color: var(--ui-muted); font-size: 10px; font-variant-numeric: tabular-nums; pointer-events: none; }
.ui-tz-overlap-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ui-success) 26%, transparent); border-inline: 1px solid var(--ui-success); pointer-events: none; }
.ui-tz-overlap-window { position: absolute; top: -2px; bottom: -2px; z-index: 1; box-sizing: border-box; border: 2px solid var(--ui-accent); border-radius: 4px; background: color-mix(in srgb, var(--ui-accent) 14%, transparent); cursor: grab; touch-action: none; }
.ui-tz-overlap-window:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tz-overlap-means { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-tz-overlap-mean { display: grid; gap: 1px; padding: 6px 10px; border-left: 3px solid var(--ui-strong); background: var(--ui-subtle); border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-tz-overlap-mean b { font-variant-numeric: tabular-nums; }
.ui-tz-overlap-at-work { border-left-color: var(--ui-success); }
.ui-tz-overlap-at-early, .ui-tz-overlap-at-evening { border-left-color: var(--ui-warning); }
.ui-tz-overlap-at-night { border-left-color: var(--ui-danger); }
.ui-tz-overlap-btn { justify-self: start; padding: 5px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1.2 var(--ui-font); cursor: pointer; }
.ui-tz-overlap-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 480px) { .ui-tz-overlap-hour { display: none; } }


.ui-cd { display: inline-grid; gap: 6px; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-cd-label { color: var(--ui-muted); }
.ui-cd-units { display: flex; gap: 8px; }
.ui-cd-unit { display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 8px 6px 6px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-cd-num { font-size: 24px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-cd-name { color: var(--ui-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ui-cd-sm .ui-cd-unit { min-width: 44px; padding: 5px 4px 4px; }
.ui-cd-sm .ui-cd-num { font-size: 17px; }
.ui-cd-sm .ui-cd-name { font-size: 10px; }
.ui-cd-lg .ui-cd-unit { min-width: 76px; padding: 12px 8px 8px; }
.ui-cd-lg .ui-cd-num { font-size: 34px; }
.ui-cd-inline { display: inline-flex; align-items: baseline; gap: 6px; font-size: inherit; }
.ui-cd-clock { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-cd-ended { font-weight: 600; color: var(--ui-muted); }


.ui-ab-test-calc { display: grid; gap: 16px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-ab-test-calc .ui-ab-test-calc-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-ab-test-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ui-ab-test-calc-arm { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-ab-test-calc-arm legend { padding: 0 0 6px; font-weight: 600; }
.ui-ab-test-calc-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.ui-ab-test-calc-field input, .ui-ab-test-calc-field select { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-ab-test-calc-field input:hover, .ui-ab-test-calc-field select:hover { border-color: var(--ui-strong); }
.ui-ab-test-calc-field input:focus, .ui-ab-test-calc-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-ab-test-calc-field input[aria-invalid] { border-color: var(--ui-danger); }
.ui-ab-test-calc-level { max-width: 180px; }
.ui-ab-test-calc-live { display: grid; gap: 12px; min-width: 0; }
.ui-ab-test-calc-verdict { margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-weight: 600; }
.ui-ab-test-calc-win { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-ab-test-calc-early { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-ab-test-calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0; }
.ui-ab-test-calc-out div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 6px; border-bottom: 1px solid var(--ui-border); }
.ui-ab-test-calc-out dt { color: var(--ui-muted); }
.ui-ab-test-calc-out dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ui-ab-test-calc-wide { grid-column: 1 / -1; }
.ui-ab-test-calc-notes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-ab-test-calc-notes li { padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-ab-test-calc-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-ab-test-calc-errors { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 520px) { .ui-ab-test-calc-grid, .ui-ab-test-calc-out { grid-template-columns: minmax(0, 1fr); } }


.ui-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ui-clamp, 3); overflow: hidden;
  overflow-wrap: anywhere; }
.ui-clamp > :first-child { margin-top: 0; }
.ui-clamp > :last-child { margin-bottom: 0; }
p.ui-clamp { margin: 0; }


.ui-pwgen { display: grid; gap: 14px; min-width: 0; max-width: 560px; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-pwgen .ui-pwgen-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-pwgen-out { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-pwgen-value { box-sizing: border-box; flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 14px var(--ui-mono); }
.ui-pwgen-value:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-pwgen-btn { height: 40px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-pwgen-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-pwgen-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pwgen-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-pwgen-strength { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-pwgen-strength b { color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-pwgen-said { color: var(--ui-muted); font-size: 13px; }
.ui-pwgen-reasons { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 13px; }
.ui-pwgen-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ui-pwgen-field { display: grid; gap: 5px; min-width: 0; }
.ui-pwgen-field label { font-size: 13px; font-weight: 500; }
.ui-pwgen-input { box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-pwgen-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-pwgen-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-pwgen-ticks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.ui-pwgen-ticks legend { padding: 0 0 4px; font-size: 13px; font-weight: 500; }
.ui-pwgen-tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-pwgen-tick input { margin: 0; accent-color: var(--ui-accent); }
.ui-pwgen-tick input:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-day-view { display: grid; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 13px/1.3 var(--ui-font); color: var(--ui-fg); overflow: hidden; --dv-h: 56px; }
.ui-day-view-head { padding: 10px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-day-view-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ui-day-view-head h3 span { color: var(--ui-muted); font-weight: 400; }
.ui-day-view-allday { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 6px 58px; border-bottom: 1px solid var(--ui-border); }
.ui-day-view-scroll { display: grid; grid-template-columns: 56px minmax(0, 1fr); max-height: 600px; overflow-y: auto; }
.ui-day-view-hours { position: relative; height: calc(var(--dv-hours) * var(--dv-h)); }
.ui-day-view-hour { position: absolute; right: 8px; transform: translateY(-50%); color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-day-view-body { position: relative; height: calc(var(--dv-hours) * var(--dv-h)); border-left: 1px solid var(--ui-border); background-image: linear-gradient(var(--ui-border) 1px, transparent 1px); background-size: 100% var(--dv-h); }
.ui-day-view-event {
  position: absolute; display: grid; align-content: start; gap: 2px; overflow: hidden; margin: 1px 4px; padding: 4px 8px; border: 0; border-left: 3px solid var(--t);
  border-radius: 5px; background: color-mix(in srgb, var(--t) 16%, var(--ui-surface)); color: var(--ui-fg); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; --t: var(--ui-accent);
}
.ui-day-view-event:hover { background: color-mix(in srgb, var(--t) 28%, var(--ui-surface)); }
.ui-day-view-event:focus-visible { outline: none; box-shadow: var(--ui-focus); z-index: 2; }
.ui-day-view-event b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-day-view-event span { color: var(--ui-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-day-view-success { --t: var(--ui-success); }
.ui-day-view-warning { --t: var(--ui-warning); }
.ui-day-view-danger { --t: var(--ui-danger); }
.ui-day-view-info { --t: var(--ui-info); }
.ui-day-view-neutral { --t: var(--ui-strong); }
.ui-day-view-allday .ui-day-view-event { position: static; margin: 0; padding: 3px 8px; }
.ui-day-view-now { position: absolute; left: 0; right: 0; z-index: 1; height: 2px; background: var(--ui-danger); pointer-events: none; }
.ui-day-view-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-danger); }
.ui-day-view-empty { padding: 14px; color: var(--ui-muted); }


.ui-bstmt { display: grid; gap: 24px; min-width: 0; padding: 32px 36px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-font); }
.ui-bstmt-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-bottom: 18px; border-bottom: 2px solid var(--ui-fg); }
.ui-bstmt-bank { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ui-bstmt-dim { margin: 0; color: var(--ui-muted); }
.ui-bstmt-title { margin: 0; font-size: 22px; font-weight: 700; text-align: right; }
.ui-bstmt-period { margin: 2px 0 0; text-align: right; font-weight: 500; }
.ui-bstmt-meta { margin: 0; color: var(--ui-muted); text-align: right; }
.ui-bstmt-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 28px; }
.ui-bstmt-parties address { font-style: normal; }
.ui-bstmt-parties h4, .ui-bstmt-sum h4 { margin: 0 0 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-bstmt-parties p { margin: 0; }
.ui-bstmt-strong { font-weight: 600; }
.ui-bstmt-acct dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 0; }
.ui-bstmt-acct dt { color: var(--ui-muted); }
.ui-bstmt-acct dd { margin: 0; font-family: var(--ui-mono); font-size: 12px; line-height: 1.7; }
.ui-bstmt-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-border); overflow: hidden; }
.ui-bstmt-sum > div { padding: 10px 14px; background: var(--ui-surface); }
.ui-bstmt-sum p { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-bstmt-sum .ui-bstmt-in p { color: var(--ui-success); }
.ui-bstmt-scroll { overflow-x: auto; }
.ui-bstmt table { width: 100%; border-collapse: collapse; }
.ui-bstmt th { padding: 7px 8px; border-bottom: 1px solid var(--ui-fg); color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: left; }
.ui-bstmt td { padding: 7px 8px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-bstmt .ui-bstmt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-bstmt-date { white-space: nowrap; color: var(--ui-muted); }
.ui-bstmt-ref { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-bstmt-edge td { background: var(--ui-subtle); font-weight: 600; }
.ui-bstmt-neg { color: var(--ui-danger); }
.ui-bstmt-foot { margin: 0; color: var(--ui-muted); font-size: 11px; }
@media (max-width: 560px) { .ui-bstmt { padding: 20px 16px; } .ui-bstmt-title, .ui-bstmt-period, .ui-bstmt-meta { text-align: left; } }
@media print {
  .ui-bstmt { padding: 0; border: 0; border-radius: 0; background: #fff; color: #000; }
  .ui-bstmt-scroll { overflow: visible; }
  .ui-bstmt tr { break-inside: avoid; }
  .ui-bstmt thead { display: table-header-group; }
  .ui-bstmt-edge td, .ui-bstmt-sum > div { background: #fff; }
}


.ui-price-tag { display: inline-grid; gap: 2px; justify-items: start; font: 14px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-price-tag-center { justify-items: center; text-align: center; }
.ui-price-tag-prefix { font-size: 13px; color: var(--ui-muted); }
.ui-price-tag-line { display: inline-flex; align-items: baseline; gap: 6px; }
.ui-price-tag-amount { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ui-price-tag-old { font-size: 16px; color: var(--ui-muted); text-decoration: line-through; }
.ui-price-tag-period { font-size: 14px; color: var(--ui-muted); }
.ui-price-tag-note { font-size: 13px; color: var(--ui-muted); }
.ui-price-tag-sm .ui-price-tag-amount { font-size: 22px; }
.ui-price-tag-sm .ui-price-tag-old { font-size: 13px; }
.ui-price-tag-sm .ui-price-tag-period, .ui-price-tag-sm .ui-price-tag-note { font-size: 12px; }
.ui-price-tag-lg .ui-price-tag-amount { font-size: 42px; }
.ui-price-tag-xl .ui-price-tag-amount { font-size: 56px; }
.ui-price-tag-xl .ui-price-tag-period { font-size: 16px; }


.ui-cmdk-host { display: contents; }
.ui-cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px; width: min(100%, 280px); height: 38px; padding: 0 8px 0 11px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-muted); font: 14px/1 var(--ui-font); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ui-cmdk-trigger:hover { border-color: var(--ui-strong); }
.ui-cmdk-trigger:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-cmdk-trigger svg { flex: none; width: 16px; height: 16px; }
.ui-cmdk-trigger span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-cmdk kbd, .ui-cmdk-trigger kbd {
  display: inline-block; min-width: 20px; padding: 2px 5px; border: 1px solid var(--ui-border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--ui-subtle); color: var(--ui-muted); font: 500 11px/1.3 var(--ui-font); text-align: center;
}
.ui-cmdk {
  width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 24px)); margin: 12vh auto auto; padding: 0;
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-cmdk[open] { display: flex; flex-direction: column; animation: ui-cmdk-in .14s ease-out; }
.ui-cmdk::backdrop { background: var(--ui-overlay); }
@keyframes ui-cmdk-in { from { opacity: 0; transform: scale(.98); } }
.ui-cmdk-search { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--ui-border); }
.ui-cmdk-search svg { flex: none; width: 18px; height: 18px; color: var(--ui-muted); }
.ui-cmdk-input {
  flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--ui-fg);
  font: 16px/1 var(--ui-font); outline: none;
}
.ui-cmdk-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-cmdk-list { flex: 1; min-height: 0; margin: 0; padding: 6px; overflow: auto; list-style: none; overscroll-behavior: contain; }
.ui-cmdk-list ul { margin: 0; padding: 0; list-style: none; }
.ui-cmdk-group { padding: 10px 10px 4px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.ui-cmdk-opt {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: var(--ui-radius-sm);
  color: var(--ui-fg); cursor: pointer; scroll-margin: 6px;
}
.ui-cmdk-opt[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-cmdk-opt[aria-selected="true"] .ui-cmdk-go { opacity: 1; }
.ui-cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-cmdk-label mark { background: none; color: var(--ui-accent); font-weight: 650; }
.ui-cmdk-keys { display: inline-flex; flex: none; gap: 3px; }
.ui-cmdk-go { flex: none; width: 14px; height: 14px; color: var(--ui-muted); opacity: 0; }
.ui-cmdk-empty { margin: 0; padding: 28px 16px; color: var(--ui-muted); text-align: center; }
.ui-cmdk-foot {
  display: flex; flex-wrap: wrap; gap: 14px; flex: none; padding: 8px 14px; border-top: 1px solid var(--ui-border);
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px;
}
.ui-cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 520px) { .ui-cmdk { margin-top: 12px; } .ui-cmdk-foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-cmdk[open] { animation: none; } .ui-cmdk-trigger { transition: none; } }


.ui-sendflow {
  box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: min(560px, 100%); min-width: 0; container-type: inline-size; padding-bottom: var(--ui-sendflow-kb, 0px); color: var(--ui-fg); background: var(--ui-bg);
  font: 15px/1.45 var(--ui-font);
}
.ui-sendflow-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: max(6px, env(safe-area-inset-top)) 8px 6px; border-bottom: 1px solid var(--ui-border); }
.ui-sendflow-head p { display: grid; place-items: center; min-height: 44px; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-sendflow-back { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-fg); font: 24px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-sendflow-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sendflow-bar { height: 3px; background: var(--ui-subtle); grid-column: 1 / -1; margin-top: 6px; }
.ui-sendflow-bar span { display: block; height: 100%; background: var(--ui-accent); transition: width .2s; }
.ui-sendflow-mid { display: grid; min-height: 0; min-width: 0; }
.ui-sendflow-scroll { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px; }
.ui-sendflow-step { display: grid; gap: 12px; min-width: 0; }
.ui-sendflow-step[hidden] { display: none; }
.ui-sendflow-step h2 { margin: 0; font-size: 21px; line-height: 1.25; outline: none; }
.ui-sendflow-field { display: grid; gap: 4px; min-width: 0; }
.ui-sendflow-field label { color: var(--ui-muted); font-size: 13px; font-weight: 600; }
/* 16 px and up, or iOS zooms the page when one is focused. */
.ui-sendflow-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-sendflow-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sendflow-input[aria-invalid="true"] { border-color: var(--ui-danger); }
textarea.ui-sendflow-input { min-height: 96px; resize: vertical; }
.ui-sendflow-big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-sendflow-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-sendflow-err { margin: 0; color: var(--ui-danger); font-size: 14px; }
.ui-sendflow-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-sendflow-payee { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 6px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-sendflow-payee[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-sendflow-payee:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sendflow-payee small { color: var(--ui-muted); font-size: 13px; }
.ui-sendflow-payee b { font-weight: 600; overflow-wrap: anywhere; }
.ui-sendflow-mark { color: var(--ui-accent); font-weight: 700; }
.ui-sendflow-new { display: grid; gap: 10px; padding-top: 4px; }
.ui-sendflow-new h3 { margin: 0; font-size: 15px; }
.ui-sendflow-limits { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.ui-sendflow-limits li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--ui-border); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-sendflow-limits li:first-child { border-top: 0; }
.ui-sendflow-limits span { color: var(--ui-muted); }
.ui-sendflow-over { background: var(--ui-danger-soft); }
.ui-sendflow-over span, .ui-sendflow-over b { color: var(--ui-danger); }
.ui-sendflow-sum { display: grid; gap: 0; margin: 0; }
.ui-sendflow-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; min-height: 52px; padding: 4px 0; border-top: 1px solid var(--ui-border); }
.ui-sendflow-row:first-child { border-top: 0; }
.ui-sendflow-row dt { color: var(--ui-muted); font-size: 13px; }
.ui-sendflow-row dd { grid-column: 1; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; white-space: pre-wrap; }
.ui-sendflow-change { grid-column: 2; grid-row: 1 / span 2; min-width: 64px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-sendflow-change:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sendflow-total dd { font-size: 20px; }
.ui-sendflow-done h2 { color: var(--ui-success); }
.ui-sendflow-foot { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-bg); }
.ui-sendflow-foot .ui-btn { width: 100%; }
.ui-sendflow-side { display: none; }
@container (min-width: 640px) {
  .ui-sendflow-mid { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
  .ui-sendflow-scroll { padding: 22px 28px; }
  .ui-sendflow-side { display: block; min-height: 0; overflow-y: auto; padding: 22px 20px; border-left: 1px solid var(--ui-border); background: var(--ui-subtle); }
  .ui-sendflow-side h3 { margin: 0 0 8px; font-size: 13px; color: var(--ui-muted); }
  .ui-sendflow-foot { display: flex; justify-content: flex-end; padding-inline: 28px; }
  .ui-sendflow-foot .ui-btn { width: auto; min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .ui-sendflow-bar span { transition: none; } }


.ui-business-days { display: grid; gap: 16px; min-width: 0; max-width: 640px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-business-days .ui-business-days-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-business-days-modes, .ui-business-days-weekend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-business-days-modes legend, .ui-business-days-weekend legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-business-days-modes label, .ui-business-days-weekend label, .ui-business-days-first { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-business-days input[type=radio], .ui-business-days input[type=checkbox] { margin: 0; accent-color: var(--ui-accent); }
.ui-business-days-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
.ui-business-days-field { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-business-days-field input, .ui-business-days-field textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-business-days-field textarea { font: 13px/1.5 var(--ui-mono); resize: vertical; }
.ui-business-days-field input:focus-visible, .ui-business-days-field textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-business-days-field [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-business-days-error { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-business-days-out { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-business-days-answer { margin: 0; font-size: 22px; font-weight: 700; color: var(--ui-accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-business-days-sum { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-business-days-skipped { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; max-height: 220px; overflow: auto; margin: 0; padding: 0; list-style: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-business-days-holiday { color: var(--ui-warning); font-weight: 600; }


.ui-timezone-picker { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-timezone-picker-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-timezone-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-timezone-picker-box { position: relative; display: block; }
.ui-timezone-picker-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-timezone-picker select {
  appearance: none; display: block; width: 100%; height: 38px; padding: 0 36px 0 12px;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-timezone-picker select:hover { border-color: var(--ui-strong); }
.ui-timezone-picker select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-timezone-picker select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-timezone-picker option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-timezone-picker-sm select { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-timezone-picker-sm .ui-timezone-picker-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
.ui-timezone-picker-invalid select, .ui-timezone-picker-invalid select:hover { border-color: var(--ui-danger); }
.ui-timezone-picker-hint, .ui-timezone-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-timezone-picker-error { color: var(--ui-danger); }
.ui-timezone-picker-disabled { opacity: .55; }
.ui-timezone-picker-disabled select { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-timezone-picker select { transition: none; } }


.ui-jsonq { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-jsonq .ui-jsonq-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-jsonq-field { display: grid; gap: 4px; min-width: 0; }
.ui-jsonq-field label { font-size: 13px; font-weight: 500; }
.ui-jsonq-text, .ui-jsonq-path { box-sizing: border-box; width: 100%; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 12.5px/1.5 var(--ui-mono); }
.ui-jsonq-text { min-height: 140px; padding: 8px 10px; resize: vertical; }
.ui-jsonq-path { height: 36px; padding: 0 10px; font-size: 13.5px; }
.ui-jsonq-text:focus, .ui-jsonq-path:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-jsonq-text[aria-invalid="true"], .ui-jsonq-path[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-jsonq-tries { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ui-muted); font-size: 12px; }
.ui-jsonq-try { padding: 1px 7px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 12px var(--ui-mono); cursor: pointer; }
.ui-jsonq-try:hover { border-color: var(--ui-accent); }
.ui-jsonq-try:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jsonq-error { display: grid; gap: 2px; margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-jsonq-mark { margin: 0; overflow: auto; color: var(--ui-fg); font: 12.5px/1.4 var(--ui-mono); white-space: pre; }
.ui-jsonq-sum { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-jsonq-note { margin: 0; color: var(--ui-warning); font-size: 13px; overflow-wrap: anywhere; }
.ui-jsonq-list { display: grid; max-height: 340px; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); list-style: none; }
.ui-jsonq-list:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-jsonq-list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2px 12px; padding: 6px 10px; border-bottom: 1px solid var(--ui-border); font: 12.5px/1.5 var(--ui-mono); }
.ui-jsonq-list li:last-child { border-bottom: 0; }
.ui-jsonq-where { color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-jsonq-value { overflow-wrap: anywhere; }
@media (max-width: 480px) { .ui-jsonq-list li { grid-template-columns: minmax(0, 1fr); } }


.ui-announce-host { display: contents; }
.ui-announce { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px;
  font: 13px/1.4 var(--ui-font); --t: var(--ui-accent); --tf: var(--ui-accent-fg); background: var(--t); color: var(--tf); }
.ui-announce-neutral { --t: var(--ui-fg); --tf: var(--ui-bg); }
.ui-announce-info { --t: var(--ui-info); --tf: #fff; }
.ui-announce-success { --t: var(--ui-success); --tf: #fff; }
.ui-announce-warning { --t: var(--ui-warning); --tf: #fff; }
.ui-announce-danger { --t: var(--ui-danger); --tf: #fff; }
.ui-announce-sticky { position: sticky; top: 0; z-index: 40; }
.ui-announce-body { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-width: 0; text-align: center; }
.ui-announce-badge { flex: none; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tf) 22%, transparent);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui-announce-text { margin: 0; }
.ui-announce-link { flex: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; border-radius: 3px; }
.ui-announce-link:hover { text-decoration-thickness: 2px; }
.ui-announce-link:focus-visible, .ui-announce-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ui-announce-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -4px -2px 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font-size: 18px; line-height: 1; opacity: .8; cursor: pointer; }
.ui-announce-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.ui-announce-pad { flex: none; width: 20px; }


.ui-scrollspy { min-width: 0; background: var(--ui-bg); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-scrollspy-sticky { position: sticky; top: var(--ui-scrollspy-top, 0); z-index: 5; }
.ui-scrollspy ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--ui-border); }
.ui-scrollspy-link {
  display: block; margin-left: -2px; padding: 5px 12px; border-left: 2px solid transparent; color: var(--ui-muted);
  text-decoration: none; transition: color .15s, border-color .15s; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
}
.ui-scrollspy-link:hover { color: var(--ui-fg); }
.ui-scrollspy-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-scrollspy-link[aria-current] { border-left-color: var(--ui-accent); color: var(--ui-accent); font-weight: 500; }
.ui-scrollspy-horizontal ul { display: flex; gap: 4px; border-left: 0; border-bottom: 1px solid var(--ui-border); overflow-x: auto; scrollbar-width: none; }
.ui-scrollspy-horizontal ul::-webkit-scrollbar { display: none; }
.ui-scrollspy-horizontal .ui-scrollspy-link {
  margin: 0 0 -1px; padding: 10px 12px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap;
}
.ui-scrollspy-horizontal .ui-scrollspy-link[aria-current] { border-bottom-color: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-scrollspy-link { transition: none; } }


.ui-hiw { display: grid; gap: 28px; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-hiw-head { display: grid; gap: 8px; max-width: 640px; margin: 0 auto 4px; text-align: center; }
.ui-hiw-title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ui-hiw-text { margin: 0; color: var(--ui-muted); font-size: 17px; }
.ui-hiw-steps { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ui-hiw-row .ui-hiw-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ui-hiw-step { position: relative; display: grid; gap: 6px; min-width: 0; }
.ui-hiw-row .ui-hiw-step { justify-items: center; text-align: center; }
.ui-hiw-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px;
  border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 18px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 4px var(--ui-bg); }
.ui-hiw-mark svg { width: 22px; height: 22px; }
.ui-hiw-icon { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-hiw-row .ui-hiw-step:not(:last-child)::before { content: ""; position: absolute; top: 24px; left: 50%; width: 100%; height: 2px; background: var(--ui-border); }
.ui-hiw-column .ui-hiw-step { grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; }
.ui-hiw-column .ui-hiw-step > :not(.ui-hiw-mark) { grid-column: 2; }
.ui-hiw-column .ui-hiw-mark { grid-row: 1 / span 3; margin: 0; }
.ui-hiw-column .ui-hiw-step:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: -24px; left: 23px; width: 2px; background: var(--ui-border); }
.ui-hiw-step-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-hiw-column .ui-hiw-step-title { margin-top: 12px; }
.ui-hiw-step-text { margin: 0; color: var(--ui-muted); }
@media (max-width: 760px) {
  .ui-hiw-row .ui-hiw-steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .ui-hiw-row .ui-hiw-step { grid-template-columns: 48px 1fr; column-gap: 16px; justify-items: start; text-align: left; align-items: start; }
  .ui-hiw-row .ui-hiw-step > :not(.ui-hiw-mark) { grid-column: 2; }
  .ui-hiw-row .ui-hiw-mark { grid-row: 1 / span 3; margin: 0; }
  .ui-hiw-row .ui-hiw-step-title { margin-top: 12px; }
  .ui-hiw-row .ui-hiw-step:not(:last-child)::before { top: 48px; bottom: -24px; left: 23px; width: 2px; height: auto; }
}


.ui-youtube-embed { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r, 16/9); border-radius: var(--ui-radius); background: #000; }
.ui-youtube-embed-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.ui-youtube-embed-poster img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.ui-youtube-embed-poster:hover img { opacity: 1; }
.ui-youtube-embed-poster:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-youtube-embed-play {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px;
  background: rgba(20, 20, 20, .8); color: #fff; transition: background .15s;
}
.ui-youtube-embed-poster:hover .ui-youtube-embed-play { background: #f00; }
.ui-youtube-embed-play svg { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; }
.ui-youtube-embed-title { position: absolute; inset: 0 0 auto 0; padding: 12px 16px; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); color: #fff; font: 500 15px/1.3 var(--ui-font); text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ui-youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .ui-youtube-embed-poster img, .ui-youtube-embed-play { transition: none; } }


.ui-chips { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-chips-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-chips-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-chip { position: relative; display: inline-flex; cursor: pointer; }
.ui-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ui-chip-face {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font-weight: 500; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ui-chip:hover .ui-chip-face { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-chip-check { display: none; width: 14px; height: 14px; margin-left: -4px; flex: none; }
.ui-chip-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: center;
}
.ui-chip input:checked + .ui-chip-face { border-color: color-mix(in srgb, var(--ui-accent) 50%, var(--ui-border)); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-chip input:checked + .ui-chip-face .ui-chip-check { display: block; }
.ui-chip input:checked + .ui-chip-face .ui-chip-count { background: var(--ui-surface); color: var(--ui-accent); }
.ui-chip input:focus-visible + .ui-chip-face { box-shadow: var(--ui-focus); }
.ui-chip input:disabled + .ui-chip-face { opacity: .5; }
.ui-chip:has(input:disabled) { cursor: not-allowed; }
.ui-chips-sm .ui-chip-face { height: 26px; padding: 0 10px; font-size: 13px; gap: 5px; }
.ui-chips-sm .ui-chip-count { min-width: 18px; padding: 0 5px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ui-chip-face { transition: none; } }


.ui-pendup { position: relative; container-type: inline-size; display: grid; gap: 10px; min-width: 0; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-pendup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-pendup-sum { flex: 1 1 180px; margin: 0; font-weight: 600; }
.ui-pendup-rule { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; touch-action: manipulation; }
.ui-pendup-rule input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-pendup-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--ui-strong); transition: background .15s; }
.ui-pendup-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.ui-pendup-rule input:checked + .ui-pendup-track { background: var(--ui-accent); }
.ui-pendup-rule input:checked + .ui-pendup-track::after { transform: translateX(18px); }
.ui-pendup-rule input:focus-visible + .ui-pendup-track { box-shadow: var(--ui-focus); }
.ui-pendup-gate { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); }
.ui-pendup-gate p { margin: 0; }
.ui-pendup-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-pendup-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); min-width: 0; }
.ui-pendup-row[data-status="failed"], .ui-pendup-row[data-status="lost"] { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); }
.ui-pendup-name { overflow-wrap: anywhere; font-weight: 500; }
.ui-pendup-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-pendup-row[data-status="failed"] .ui-pendup-word, .ui-pendup-row[data-status="lost"] .ui-pendup-word { color: var(--ui-danger); }
.ui-pendup-row[data-status="done"] .ui-pendup-word { color: var(--ui-success); }
.ui-pendup-track2 { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-pendup-fill { height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .2s ease; }
.ui-pendup-row[data-status="done"] .ui-pendup-fill { background: var(--ui-success); }
.ui-pendup-row[data-status="failed"] .ui-pendup-fill { background: var(--ui-danger); }
.ui-pendup-row[data-status="paused"] .ui-pendup-fill { background: var(--ui-strong); }
.ui-pendup-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-pendup-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 78px; min-height: 46px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-pendup-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
/* The real field lies over its label, so a finger presses the field itself. */
.ui-pendup-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ui-pendup-btn:focus-visible, .ui-pendup-btn:focus-within { outline: none; box-shadow: var(--ui-focus); }
.ui-pendup-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-pendup-said { flex: 1 1 200px; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-pendup-said[data-bad] { color: var(--ui-danger); }
.ui-pendup-lasts { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (hover: hover) { .ui-pendup-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); } .ui-pendup-go:hover { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); } }
@media (prefers-reduced-motion: reduce) { .ui-pendup-fill, .ui-pendup-track, .ui-pendup-track::after { transition: none; } }
@container (min-width: 560px) {
  .ui-pendup-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ui-pendup-name, .ui-pendup-line, .ui-pendup-track2 { grid-column: 1; }
  .ui-pendup-acts { grid-column: 2; grid-row: 1 / 4; }
  .ui-pendup-gate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}


.ui-dupfind { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-dupfind .ui-dupfind-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-dupfind-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ui-dupfind-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-dupfind-fields legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-dupfind-fields label, .ui-dupfind-skip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ui-dupfind input[type="checkbox"], .ui-dupfind input[type="radio"] { margin: 0; accent-color: var(--ui-accent); }
.ui-dupfind input[type="checkbox"]:focus-visible, .ui-dupfind input[type="radio"]:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dupfind-level { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.ui-dupfind-level label { font-weight: 500; }
.ui-dupfind-level input { width: 160px; max-width: 100%; accent-color: var(--ui-accent); }
.ui-dupfind-level input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-dupfind-level output { min-width: 3em; font-variant-numeric: tabular-nums; font-weight: 600; }
.ui-dupfind-sum { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-dupfind-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-dupfind-group { min-width: 0; margin: 0; padding: 8px 12px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-dupfind-group legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.ui-dupfind-off { opacity: .7; }
.ui-dupfind-scroll { overflow: auto; }
.ui-dupfind-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dupfind table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-dupfind th, .ui-dupfind td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--ui-border); overflow-wrap: anywhere; }
.ui-dupfind thead th { color: var(--ui-muted); font-weight: 600; white-space: nowrap; }
.ui-dupfind tbody tr:last-child th, .ui-dupfind tbody tr:last-child td { border-bottom: 0; }
.ui-dupfind-kept { background: var(--ui-success-soft); }
.ui-dupfind-gone td { color: var(--ui-muted); text-decoration: line-through; }
.ui-dupfind mark { padding: 0 3px; border-radius: 3px; background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-dupfind-skip { margin-top: 8px; }
.ui-dupfind-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-dupfind-go { height: 36px; padding: 0 16px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-dupfind-go:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-dupfind-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dupfind-go:disabled { opacity: .5; cursor: not-allowed; }
.ui-dupfind-said { color: var(--ui-muted); font-size: 13px; }


.ui-tchart { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-tchart-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-tchart-span { margin: 0 0 8px; color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-tchart-body { display: grid; gap: 10px; }
.ui-tchart-main { min-width: 0; }
.ui-tchart-plot { position: relative; height: 240px; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); outline: none; cursor: crosshair;
  touch-action: pan-y; overscroll-behavior-x: contain; -webkit-tap-highlight-color: transparent; }
.ui-tchart-plot:focus-visible { box-shadow: var(--ui-focus); }
.ui-tchart-busy { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-tchart-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform-origin: 0 0; }
.ui-tchart-line { fill: none; stroke: var(--ui-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-tchart-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--ui-border); pointer-events: none; }
.ui-tchart-grid span { position: absolute; left: 4px; top: 1px; color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* As wide as the plot, the line at its left edge, so a percentage of its own width is a place on the plot at any size. */
.ui-tchart-cross { position: absolute; inset: 0; pointer-events: none; }
.ui-tchart-cross::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: var(--ui-fg); }
.ui-tchart-pt { position: absolute; left: -7px; width: 14px; height: 14px; margin-top: -7px; border: 3px solid var(--ui-surface); border-radius: 50%; background: var(--ui-accent); }
/* left: X% with translateX(-X%) keeps the label inside the plot at both ends, at any size. */
.ui-tchart-tip { position: absolute; top: 6px; max-width: 70%; padding: 4px 8px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; overflow: hidden; text-overflow: ellipsis; }
.ui-tchart-pinching .ui-tchart-cross, .ui-tchart-pinching .ui-tchart-tip { visibility: hidden; }
.ui-tchart-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-tchart-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ui-tchart-key { flex: 1 1 auto; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.ui-tchart-key[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-tchart-key:disabled { opacity: .45; cursor: default; }
.ui-tchart-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tchart-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ui-tchart-stats div { min-width: 0; }
.ui-tchart-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-tchart-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-tchart-none { margin: 0; color: var(--ui-muted); }
@container (min-width: 620px) {
  .ui-tchart-body { grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; }
  .ui-tchart-plot { height: 340px; }
  .ui-tchart-stats { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
  .ui-tchart-stats dd { font-size: 20px; }
}
@media (hover: hover) { .ui-tchart-key:not(:disabled):hover { background: var(--ui-subtle); } }


.ui-cs { --ui-cs-1: light-dark(#2a78d6, #3987e5); --ui-cs-2: light-dark(#eb6834, #d95926);
  --ui-cs-3: light-dark(#1baf7a, #199e70); --ui-cs-4: light-dark(#eda100, #c98500);
  --ui-cs-5: light-dark(#e87ba4, #d55181); --ui-cs-6: light-dark(#008300, #008300);
  --ui-cs-7: light-dark(#6250d6, #9085e9); --ui-cs-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-cs-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-cs-s1 { --c: var(--ui-cs-1); } .ui-cs-s2 { --c: var(--ui-cs-2); } .ui-cs-s3 { --c: var(--ui-cs-3); }
.ui-cs-s4 { --c: var(--ui-cs-4); } .ui-cs-s5 { --c: var(--ui-cs-5); } .ui-cs-s6 { --c: var(--ui-cs-6); }
.ui-cs-s7 { --c: var(--ui-cs-7); } .ui-cs-s8 { --c: var(--ui-cs-8); }
.ui-cs-up { --k: var(--ui-success); } .ui-cs-down { --k: var(--ui-danger); }
.ui-cs-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-cs-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-cs-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-cs-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-cs-plot { position: relative; }
.ui-cs-pane, .ui-cs-cp { position: relative; height: var(--h); }
.ui-cs-vpane, .ui-cs-cv { position: relative; height: var(--vh); margin-top: 16px; }
.ui-cs-vpane { border-top: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-cs-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-cs-svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-cs-ma { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-cs-last { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); opacity: .75; pointer-events: none; }
.ui-cs-cols { position: absolute; inset: 0; display: flex; }
.ui-cs-col { position: relative; flex: 1; min-width: 0; }
.ui-cs-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-cs-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-cs-col:hover::before { opacity: .8; }
.ui-cs-wick { position: absolute; left: 50%; width: 1px; margin-left: -.5px; background: var(--k); }
.ui-cs-body { position: absolute; left: 16%; right: 16%; min-height: 1px; border-radius: 1px; background: var(--k); }
.ui-cs-vol { position: absolute; bottom: 0; left: 16%; right: 16%; min-height: 1px; border-radius: 1px 1px 0 0; background: var(--k); opacity: .35; }
.ui-cs-col:hover .ui-cs-vol { opacity: .7; }
.ui-cs-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-cs-flip .ui-cs-tip { left: auto; right: calc(50% + 10px); }
.ui-cs-col:hover .ui-cs-tip { display: block; }
.ui-cs-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-cs-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-cs-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-cs-tip .ui-cs-chg b { color: var(--k); }
.ui-cs-y { position: relative; }
.ui-cs-y > div { position: relative; }
.ui-cs-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-cs-y .ui-cs-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--k); color: var(--ui-bg); font-weight: 600; }
.ui-cs-x { position: relative; height: 16px; margin-top: 6px; }
.ui-cs-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-cs-x .ui-cs-first { transform: none; }
.ui-cs-x .ui-cs-end { transform: translateX(-100%); }


.ui-focus-timer { container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-focus-timer-inner { display: grid; gap: 16px; justify-items: center; }
.ui-focus-timer-main { display: grid; gap: 12px; justify-items: center; width: 100%; min-width: 0; }
.ui-focus-timer-ring { position: relative; display: grid; place-items: center; width: min(72cqw, 280px); aspect-ratio: 1; }
.ui-focus-timer-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-focus-timer-track, .ui-focus-timer-arc { fill: none; stroke-width: 7; }
.ui-focus-timer-track { stroke: var(--ui-border); }
.ui-focus-timer-arc { stroke: var(--ui-accent); stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.ui-focus-timer[data-phase="break"] .ui-focus-timer-arc, .ui-focus-timer[data-phase="long"] .ui-focus-timer-arc { stroke: var(--ui-success); }
.ui-focus-timer-mid { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.ui-focus-timer-phase { color: var(--ui-muted); font-size: 14px; font-weight: 600; }
.ui-focus-timer-time { font-size: clamp(40px, 15cqw, 60px); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ui-focus-timer-round { color: var(--ui-muted); font-size: 13px; }
.ui-focus-timer-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.ui-focus-timer-go, .ui-focus-timer-off { min-width: 120px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 16px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-focus-timer-off { min-width: 88px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); }
.ui-focus-timer-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ui-focus-timer-time-btn { min-width: 52px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-focus-timer-time-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-focus-timer-say { width: 100%; margin: 0; color: var(--ui-muted); text-align: center; overflow-wrap: anywhere; }
.ui-focus-timer-say:empty { display: none; }
.ui-focus-timer-say[data-done] { padding: 10px 12px; border-radius: var(--ui-radius); background: var(--ui-success-soft); color: var(--ui-success); font-weight: 600; }
.ui-focus-timer-side { display: grid; gap: 12px; width: 100%; min-width: 0; }
.ui-focus-timer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ui-focus-timer-stat { padding: 8px; border-radius: var(--ui-radius); background: var(--ui-subtle); text-align: center; }
.ui-focus-timer-stat dt { color: var(--ui-muted); font-size: 12px; }
.ui-focus-timer-stat dd { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-focus-timer-week { display: none; }
.ui-focus-timer-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-focus-timer-row span:first-child { flex: 1; min-width: 0; }
.ui-focus-timer-note { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-focus-timer-note[data-bad] { color: var(--ui-danger); }
.ui-focus-timer-track-sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--ui-strong); transition: background .15s; }
.ui-focus-timer-track-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.ui-focus-timer-row[aria-checked="true"] .ui-focus-timer-track-sw { background: var(--ui-accent); }
.ui-focus-timer-row[aria-checked="true"] .ui-focus-timer-track-sw::after { transform: translateX(18px); }
.ui-focus-timer-link { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent); font: 600 14px/1 var(--ui-font); cursor: pointer; }
.ui-focus-timer-line { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ui-focus-timer-line .ui-focus-timer-note { flex: 1; min-width: 0; }
.ui-focus-timer :is(.ui-focus-timer-go, .ui-focus-timer-off, .ui-focus-timer-time-btn, .ui-focus-timer-row, .ui-focus-timer-link):focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* With the width, on a tablet or a phone on its side, the ring stands beside the figures, and the week shows. */
@container (min-width: 560px) {
  .ui-focus-timer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
  .ui-focus-timer-ring { width: min(38cqw, 300px); }
  .ui-focus-timer-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 96px; margin: 0; padding: 0; list-style: none; }
  .ui-focus-timer-day { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; color: var(--ui-muted); font-size: 12px; text-align: center; }
  .ui-focus-timer-bar { align-self: end; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--ui-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-focus-timer-arc, .ui-focus-timer-track-sw, .ui-focus-timer-track-sw::after { transition: none; }
}


.demo-inspect-stage { position: relative; min-height: 420px; height: 100%; box-sizing: border-box; background: var(--ui-subtle); }
.demo-inspect-tools { position: absolute; left: 10px; top: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.demo-inspect-shape { position: absolute; display: grid; place-items: center; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0; border: 2px solid transparent; color: #fff; font: 600 13px/1.2 var(--ui-font); cursor: pointer; }
.demo-inspect-shape[aria-pressed="true"] { border-color: var(--ui-fg); box-shadow: var(--ui-focus); }
.demo-inspect-out { margin: 0; }


.ui-heading { margin: 0; font-family: var(--ui-font); font-weight: 650; line-height: 1.2; letter-spacing: -.015em;
  color: var(--ui-fg); overflow-wrap: anywhere; }
.ui-heading.ui-heading-1 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.ui-heading.ui-heading-2 { font-size: 26px; }
.ui-heading.ui-heading-3 { font-size: 21px; }
.ui-heading.ui-heading-4 { font-size: 17px; }
.ui-heading.ui-heading-5 { font-size: 15px; }
.ui-heading.ui-heading-6 { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-heading-muted { color: var(--ui-muted); }
.ui-heading-center { text-align: center; }
.ui-heading-end { text-align: end; }
.ui-heading-group { margin: 0; }
.ui-heading-sub { margin: 4px 0 0; font: 15px/1.5 var(--ui-font); color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-heading.ui-heading-1 + .ui-heading-sub { font-size: 17px; }
.ui-heading-anchor { margin-left: .4em; border-radius: 4px; color: var(--ui-muted); font-weight: 400; text-decoration: none;
  opacity: 0; transition: opacity .15s, color .15s; }
.ui-heading:hover .ui-heading-anchor, .ui-heading-anchor:focus { opacity: 1; }
.ui-heading-anchor:hover { color: var(--ui-accent); }
.ui-heading-anchor:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-heading-anchor { transition: none; } }


html:has(.ui-fullscreen-picker[open]) { overflow: hidden; }
.ui-fullscreen-picker-host { display: contents; }
.ui-fullscreen-picker {
  position: fixed; inset: var(--ui-fullscreen-picker-top, 0px) 0 auto 0; box-sizing: border-box; flex-direction: column; width: 100%; max-width: none;
  height: var(--ui-fullscreen-picker-h, 100dvh); max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0;
  background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); overscroll-behavior: contain;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.22, 1, .36, 1), overlay .3s allow-discrete, display .3s allow-discrete;
}
.ui-fullscreen-picker[open] { display: flex; transform: none; }
@starting-style { .ui-fullscreen-picker[open] { transform: translateY(100%); } }
.ui-fullscreen-picker::backdrop { background: var(--ui-overlay); }
.ui-fullscreen-picker-head {
  display: flex; align-items: center; gap: 4px; flex: none; padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--ui-border);
}
.ui-fullscreen-picker-head h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ui-fullscreen-picker-word {
  flex: none; min-width: 64px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-accent); font: 16px var(--ui-font); cursor: pointer;
}
.ui-fullscreen-picker-done { font-weight: 600; }
.ui-fullscreen-picker-word:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fullscreen-picker-search { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); }
/* 16px, or iOS zooms the page when the box takes focus. */
.ui-fullscreen-picker-input {
  box-sizing: border-box; display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 16px var(--ui-font);
}
.ui-fullscreen-picker-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fullscreen-picker-list { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.ui-fullscreen-picker-row {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 6px 16px; border: 0; border-bottom: 1px solid var(--ui-border);
  background: transparent; color: var(--ui-fg); font: 16px/1.3 var(--ui-font); text-align: left; cursor: pointer;
}
.ui-fullscreen-picker-row:disabled { color: var(--ui-muted); opacity: .6; cursor: not-allowed; }
.ui-fullscreen-picker-row:active:not(:disabled), .ui-fullscreen-picker-active { background: var(--ui-subtle); }
@media (hover: hover) { .ui-fullscreen-picker-row:hover:not(:disabled) { background: var(--ui-subtle); } }
.ui-fullscreen-picker-row:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-fullscreen-picker-label { flex: 1; min-width: 0; }
.ui-fullscreen-picker-hint { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-fullscreen-picker-tick { flex: none; width: 20px; height: 20px; color: var(--ui-accent); opacity: 0; }
.ui-fullscreen-picker-row[aria-selected="true"] .ui-fullscreen-picker-tick { opacity: 1; }
.ui-fullscreen-picker-note { margin: 0; padding: 20px 16px; color: var(--ui-muted); text-align: center; }
/* A <dialog> sits over the whole window, so the window's width is the right one to ask, Split View included. */
@media (min-width: 600px) {
  .ui-fullscreen-picker {
    inset: 0 0 var(--ui-fullscreen-picker-kb, 0px) 0; width: 560px; height: min(720px, calc(100dvh - 48px - var(--ui-fullscreen-picker-kb, 0px))); margin: auto;
    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); box-shadow: var(--ui-shadow-lg);
    transform: translateY(24px); opacity: 0; transition: transform .2s, opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete;
  }
  .ui-fullscreen-picker[open] { opacity: 1; }
  @starting-style { .ui-fullscreen-picker[open] { transform: translateY(24px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .ui-fullscreen-picker { transition: none; } }


.ui-adslot { display: grid; justify-items: center; gap: 4px; min-width: 0; margin: 0; color: var(--ui-muted); font: 11px/1.3 var(--ui-font); }
.ui-adslot-start { justify-items: start; }
.ui-adslot-sticky { position: sticky; top: 16px; align-self: start; }
.ui-adslot-label { letter-spacing: .1em; text-transform: uppercase; }
.ui-adslot-box { position: relative; display: grid; place-items: center; width: min(var(--w), 100%); height: var(--h); overflow: hidden;
  background: var(--ui-subtle); }
.ui-adslot-box > :is(iframe, img, ins, a, div) { display: block; width: 100%; height: 100%; border: 0; }
.ui-adslot-box > a > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-adslot-empty { border: 1px dashed var(--ui-border); background: repeating-linear-gradient(-45deg, transparent 0 8px,
  color-mix(in srgb, var(--ui-border) 45%, transparent) 8px 9px), var(--ui-subtle); }
.ui-adslot-blank { border: 0; background: transparent; }
.ui-adslot-size { padding: 2px 8px; border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted); font-size: 12px;
  font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .ui-adslot-mobile .ui-adslot-box { width: min(var(--mw), 100%); height: var(--mh); }
  .ui-adslot-mobile .ui-adslot-wide { display: none; }
}
@media (min-width: 761px) { .ui-adslot-narrow { display: none; } }


.ui-inset { min-width: 0; padding: var(--ui-inset-t, 0) var(--ui-inset-r, 0) var(--ui-inset-b, 0) var(--ui-inset-l, 0); }
.ui-inset > :first-child { margin-top: 0; }
.ui-inset > :last-child { margin-bottom: 0; }


.ui-proration { display: grid; gap: 16px; min-width: 0; max-width: 600px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-proration .ui-proration-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-proration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ui-proration-field { display: grid; gap: 5px; min-width: 0; }
.ui-proration-field label { font-size: 13px; font-weight: 500; }
.ui-proration-field select, .ui-proration-field input { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
.ui-proration-field select:hover, .ui-proration-field input:hover { border-color: var(--ui-strong); }
.ui-proration-field select:focus-visible, .ui-proration-field input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-proration-field [aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-proration-out { display: grid; margin: 0; padding: 4px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-proration-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--ui-border); }
.ui-proration-line:last-child { border-bottom: 0; }
.ui-proration-line dt { font-weight: 500; }
.ui-proration-line dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-proration-how { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-proration-total dt, .ui-proration-total dd { font-size: 16px; font-weight: 700; }
.ui-proration-total dd { color: var(--ui-accent); }
.ui-proration-next { margin: 0; font-size: 13px; }
.ui-proration-skipped { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-proration-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 480px) { .ui-proration { padding: 16px; } .ui-proration-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-proration-field select, .ui-proration-field input { transition: none; } }


.ui-tripitin { display: grid; gap: 14px; min-width: 0; max-width: 680px; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-tripitin-head { display: grid; gap: 2px; }
.ui-tripitin .ui-tripitin-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ui-tripitin-counts { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-tripitin-days { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ui-tripitin-day { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; }
.ui-tripitin-today { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.ui-tripitin-past { opacity: .62; }
.ui-tripitin-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 16px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-subtle); }
.ui-tripitin .ui-tripitin-dayname { margin: 0; font-size: 15px; font-weight: 650; }
.ui-tripitin-date { color: var(--ui-muted); font-size: 13px; }
.ui-tripitin-place { margin-left: auto; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-tripitin-now { padding: 1px 8px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.ui-tripitin-items { margin: 0; padding: 4px 0; list-style: none; }
.ui-tripitin-item { --ui-tripitin-k: var(--ui-accent); display: grid; grid-template-columns: 74px 34px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start;
  padding: 10px 16px; }
.ui-tripitin-item + .ui-tripitin-item { border-top: 1px dashed var(--ui-border); }
.ui-tripitin-k-hotel { --ui-tripitin-k: var(--ui-success); }
.ui-tripitin-k-activity { --ui-tripitin-k: var(--ui-warning); }
.ui-tripitin-k-food { --ui-tripitin-k: var(--ui-danger); }
.ui-tripitin-k-train, .ui-tripitin-k-bus, .ui-tripitin-k-ferry, .ui-tripitin-k-car { --ui-tripitin-k: var(--ui-info); }
.ui-tripitin-k-note { --ui-tripitin-k: var(--ui-muted); }
.ui-tripitin-time { padding-top: 6px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-tripitin-time small { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-tripitin-any { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
.ui-tripitin-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ui-tripitin-k);
  background: color-mix(in srgb, var(--ui-tripitin-k) 14%, transparent); }
.ui-tripitin-icon svg { width: 18px; height: 18px; }
.ui-tripitin-what { display: grid; gap: 1px; min-width: 0; padding-top: 2px; }
.ui-tripitin-what b { font-weight: 600; }
.ui-tripitin-what a { color: inherit; text-decoration: none; }
.ui-tripitin-what a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-tripitin-what a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ui-focus); }
.ui-tripitin-what span { color: var(--ui-muted); font-size: 13px; }
.ui-tripitin-ref { justify-self: start; margin-top: 3px; padding: 1px 6px; border: 1px dashed var(--ui-strong); border-radius: 4px; color: var(--ui-fg);
  font: 600 12px var(--ui-mono); letter-spacing: .04em; user-select: all; }
.ui-tripitin-status { align-self: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ui-tripitin-confirmed { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-tripitin-pending { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-tripitin-cancelled { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-tripitin-off .ui-tripitin-what b { text-decoration: line-through; color: var(--ui-muted); }
.ui-tripitin-empty { margin: 0; padding: 12px 16px; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 520px) {
  .ui-tripitin-item { grid-template-columns: 34px minmax(0, 1fr); }
  .ui-tripitin-time { grid-column: 2; padding-top: 0; }
  .ui-tripitin-icon { grid-row: 1 / span 3; grid-column: 1; }
  .ui-tripitin-status { grid-column: 2; justify-self: start; }
}


.ui-text-size-setting { container-type: inline-size; box-sizing: border-box; width: 100%; min-width: 0; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-text-size-setting-grid { display: grid; gap: 14px; }
.ui-text-size-setting-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-text-size-setting-head label { font-weight: 600; }
.ui-text-size-setting-head output { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-text-size-setting-row { display: flex; align-items: center; gap: 6px; }
.ui-text-size-setting-key {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); font-family: var(--ui-font); font-weight: 600; cursor: pointer;
}
.ui-text-size-setting-key:disabled { color: var(--ui-strong); cursor: default; }
.ui-text-size-setting-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-text-size-setting-less { font-size: 13px; }
.ui-text-size-setting-more { font-size: 20px; }
.ui-text-size-setting-track { position: relative; flex: 1; min-width: 0; height: 44px; }
.ui-text-size-setting-mark { position: absolute; top: 50%; left: var(--ui-text-size-setting-at); width: 2px; height: 16px; margin: -8px 0 0 -1px; background: var(--ui-strong); pointer-events: none; }
.ui-text-size-setting-track input {
  position: relative; display: block; box-sizing: border-box; width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--ui-accent); cursor: pointer;
  /* Up and down stays the page's, so a slider in a long settings screen can be scrolled past. */
  touch-action: pan-y;
}
.ui-text-size-setting-track input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-text-size-setting-preview { box-sizing: border-box; min-width: 0; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-text-size-setting-preview h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.ui-text-size-setting-preview p { margin: 0; font-size: 15px; }
.ui-text-size-setting-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
/* Asks the browser two things and is never seen. Held to its own size, as the page's scale would otherwise count twice. */
.ui-text-size-setting-probe { position: absolute; visibility: hidden; pointer-events: none; }
.ui-text-size-setting-probe-system { font: -apple-system-body; -webkit-text-size-adjust: none; text-size-adjust: none; }
.ui-text-size-setting-probe-adjust { font-size: 20px; -webkit-text-size-adjust: 200%; text-size-adjust: 200%; }
@container (min-width: 640px) {
  .ui-text-size-setting-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 14px 24px; }
  .ui-text-size-setting-preview { grid-column: 2; grid-row: 1 / span 4; }
}


.error-screen-demo-keys { display: flex; flex-wrap: wrap; gap: 8px; }


.ui-pwm { color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-pwm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 760px; padding: 10px 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-pwm-dots { display: inline-flex; gap: 5px; flex: none; }
.ui-pwm-dot { width: 10px; height: 10px; border: 2px solid var(--ui-accent); border-radius: 50%; }
.ui-pwm-dot-on { background: var(--ui-accent); }
.ui-pwm-last .ui-pwm-dot { border-color: var(--ui-warning); }
.ui-pwm-last .ui-pwm-dot-on { background: var(--ui-warning); }
.ui-pwm-text { flex: 1 1 220px; margin: 0; }
.ui-pwm-text b { font-weight: 700; }
.ui-pwm-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ui-pwm-sub { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 650; text-decoration: none; white-space: nowrap; }
.ui-pwm-sub:hover { filter: brightness(1.08); }
.ui-pwm-in { color: var(--ui-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-strong); }
.ui-pwm-in:hover { color: var(--ui-accent); }
.ui-pwm a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pwm-gate { position: relative; display: grid; justify-items: center; gap: 12px; max-width: 560px; padding: 28px 28px 24px; text-align: center;
  border: 1px solid var(--ui-border); border-top: 4px solid var(--ui-accent); border-radius: var(--ui-radius); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg); }
.ui-pwm-gate::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ui-bg)); margin-bottom: 4px; }
.ui-pwm-gate .ui-pwm-dots { margin-bottom: 2px; }
.ui-pwm .ui-pwm-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 750; text-wrap: balance; }
.ui-pwm-offer { margin: 0; color: var(--ui-muted); font-size: 16px; }
.ui-pwm-offer b { color: var(--ui-fg); }
.ui-pwm-list { display: grid; gap: 6px; margin: 4px 0; padding: 0; list-style: none; text-align: left; }
.ui-pwm-list li { display: flex; gap: 8px; }
.ui-pwm-list li::before { content: "✓"; color: var(--ui-success); font-weight: 800; }
.ui-pwm-gate .ui-pwm-sub { height: 44px; min-width: 220px; font-size: 16px; }
.ui-pwm-note { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-photo-capture { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-photo-capture-body { display: grid; gap: 10px; }
.ui-photo-capture-frame {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; max-height: 60dvh; width: 100%;
  border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); color: var(--ui-muted); text-align: center;
}
.ui-photo-capture-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ui-photo-capture-ready .ui-photo-capture-frame { border-style: solid; }
.ui-photo-capture-frame svg { width: 36px; height: 36px; }
.ui-photo-capture-side { display: grid; gap: 8px; align-content: start; }
.ui-photo-capture-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-photo-capture-take {
  position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; overflow: hidden;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 16px/1 var(--ui-font); cursor: pointer;
}
.ui-photo-capture-ready .ui-photo-capture-take { background: var(--ui-accent-soft); color: var(--ui-accent); }
/* The input itself covers the button: a tap lands on the real field, and it keeps its size for a finger. */
.ui-photo-capture-take input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ui-photo-capture-take:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-photo-capture-take:has(input:disabled) { opacity: .55; }
.ui-photo-capture-meta, .ui-photo-capture-hint { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-photo-capture-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
/* A tablet, or a wide pane: the picture beside its buttons, not a phone's column stretched. */
@container (min-width: 440px) {
  .ui-photo-capture-body { grid-template-columns: minmax(0, 1fr) 180px; align-items: start; gap: 16px; }
  .ui-photo-capture-bar { flex-direction: column; }
  .ui-photo-capture-take { flex: none; }
}


.ui-plan-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-subtle);
  font: 500 14px/1 var(--ui-font); color: var(--ui-muted); }
.ui-plan-toggle-opt { position: relative; display: flex; cursor: pointer; }
.ui-plan-toggle-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-plan-toggle-text { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s; }
.ui-plan-toggle-opt:hover .ui-plan-toggle-text { color: var(--ui-fg); }
.ui-plan-toggle-opt input:checked + .ui-plan-toggle-text { background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); }
.ui-plan-toggle-opt input:focus-visible + .ui-plan-toggle-text { box-shadow: var(--ui-focus); }
.ui-plan-toggle-opt input:checked:focus-visible + .ui-plan-toggle-text { box-shadow: var(--ui-shadow), var(--ui-focus); }
.ui-plan-toggle-save { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--ui-success-soft); color: var(--ui-success); font: 600 11px/1 var(--ui-font); }
.ui-plan-toggle-sm .ui-plan-toggle-text { height: 26px; padding: 0 12px; font-size: 13px; }
.ui-plan-toggle-sm .ui-plan-toggle-save { height: 18px; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .ui-plan-toggle-text { transition: none; } }


.ui-layover { display: grid; gap: 14px; min-width: 0; max-width: 560px; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-layover-head { display: grid; gap: 2px; }
.ui-layover .ui-layover-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-layover-sum { color: var(--ui-muted); font-size: 13px; }
.ui-layover-list { margin: 0; padding: 0; list-style: none; }
.ui-layover-point, .ui-layover-leg, .ui-layover-wait { position: relative; display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); column-gap: 10px; }
.ui-layover-at { padding-top: 1px; font-weight: 700; text-align: right; white-space: nowrap; }
.ui-layover-day { display: block; color: var(--ui-muted); font-size: 11px; font-weight: 500; }
.ui-layover-rail { position: relative; display: flex; justify-content: center; }
.ui-layover-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--ui-strong); transform: translateX(-1px); }
.ui-layover-point:first-child .ui-layover-rail::before { top: 9px; }
.ui-layover-point:last-child .ui-layover-rail::before { bottom: calc(100% - 9px); }
.ui-layover-dot { position: relative; width: 12px; height: 12px; margin-top: 4px; border: 2px solid var(--ui-accent); border-radius: 50%; background: var(--ui-surface); }
.ui-layover-point:first-child .ui-layover-dot, .ui-layover-point:last-child .ui-layover-dot { background: var(--ui-accent); }
.ui-layover-place { display: grid; padding-bottom: 2px; }
.ui-layover-place b { font-weight: 650; }
.ui-layover-place span { color: var(--ui-muted); font-size: 12px; }
.ui-layover-leg .ui-layover-body { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0; padding: 8px 12px; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; }
.ui-layover-leg .ui-layover-body b { color: var(--ui-fg); font-weight: 600; }
.ui-layover-leg .ui-layover-at { align-self: center; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-layover-wait .ui-layover-rail::before { border-left-style: dashed; border-left-color: var(--ui-border); }
.ui-layover-wait .ui-layover-body { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-layover-wait-text { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ui-layover-wait-text svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-layover-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-layover-flag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--ui-warning-soft); color: var(--ui-fg); }
.ui-layover-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-warning); }
.ui-layover-flag-danger { background: var(--ui-danger-soft); }
.ui-layover-flag-danger::before { background: var(--ui-danger); }
.ui-layover-flag-info { background: var(--ui-info-soft); }
.ui-layover-flag-info::before { background: var(--ui-info); }
.ui-layover-tight .ui-layover-wait-text { color: var(--ui-danger); }


.ui-fxpos { min-width: 0; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 13px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-fxpos-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-fxpos-table caption { padding: 12px 14px; text-align: left; font-size: 14px; font-weight: 650; }
.ui-fxpos-table caption small { margin-left: 8px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-fxpos-table th, .ui-fxpos-table td { padding: 9px 14px; text-align: right; white-space: nowrap; }
.ui-fxpos-table thead th { border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle);
  color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-fxpos-table th:first-child, .ui-fxpos-table td:first-child { text-align: left; }
.ui-fxpos-table tbody tr:not(:last-child) > * { border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-fxpos-table tbody tr:hover { background: var(--ui-subtle); }
.ui-fxpos-table tbody th { font-weight: 650; }
.ui-fxpos-table tbody th a { color: inherit; text-decoration: none; }
.ui-fxpos-table tbody th a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-fxpos-table tbody th a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-fxpos-side { display: inline-block; min-width: 40px; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 650;
  letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.ui-fxpos-buy { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-fxpos-sell { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-fxpos-size small { margin-left: 4px; color: var(--ui-muted); font-size: 11px; }
.ui-fxpos-gain { --k: var(--ui-success); } .ui-fxpos-loss { --k: var(--ui-danger); } .ui-fxpos-even { --k: var(--ui-muted); }
.ui-fxpos-pl { color: var(--k); font-weight: 650; }
.ui-fxpos-none { color: var(--ui-muted); }
.ui-fxpos-table tfoot th, .ui-fxpos-table tfoot td { border-top: 2px solid var(--ui-border); font-size: 14px; font-weight: 650; }
.ui-fxpos-table tfoot small { display: block; color: var(--ui-muted); font-size: 11px; font-weight: 400; }


.ui-flyout { position: relative; display: inline-block; vertical-align: middle; }
.ui-flyout-btn svg { width: 16px; height: 16px; margin-right: -4px; transition: transform .15s; }
.ui-flyout-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-flyout-panel {
  position: absolute; z-index: 30; box-sizing: border-box; width: min(var(--w, 280px), calc(100vw - 24px)); padding: 14px 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 14px/1.5 var(--ui-font); text-align: left; animation: ui-flyout-in .12s ease-out;
}
.ui-flyout-panel[hidden] { display: none; }
@keyframes ui-flyout-in { from { opacity: 0; } }
.ui-flyout-panel > :first-child { margin-top: 0; }
.ui-flyout-panel > :last-child { margin-bottom: 0; }
.ui-flyout-panel h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-flyout-bottom > .ui-flyout-panel { top: calc(100% + 8px); }
.ui-flyout-top > .ui-flyout-panel { bottom: calc(100% + 8px); }
.ui-flyout-right > .ui-flyout-panel { left: calc(100% + 8px); }
.ui-flyout-left > .ui-flyout-panel { right: calc(100% + 8px); }
.ui-flyout-bottom.ui-flyout-start > .ui-flyout-panel, .ui-flyout-top.ui-flyout-start > .ui-flyout-panel { left: 0; }
.ui-flyout-bottom.ui-flyout-end > .ui-flyout-panel, .ui-flyout-top.ui-flyout-end > .ui-flyout-panel { right: 0; }
.ui-flyout-bottom.ui-flyout-center > .ui-flyout-panel, .ui-flyout-top.ui-flyout-center > .ui-flyout-panel { left: 50%; translate: -50% 0; }
.ui-flyout-right.ui-flyout-start > .ui-flyout-panel, .ui-flyout-left.ui-flyout-start > .ui-flyout-panel { top: 0; }
.ui-flyout-right.ui-flyout-end > .ui-flyout-panel, .ui-flyout-left.ui-flyout-end > .ui-flyout-panel { bottom: 0; }
.ui-flyout-right.ui-flyout-center > .ui-flyout-panel, .ui-flyout-left.ui-flyout-center > .ui-flyout-panel { top: 50%; translate: 0 -50%; }
@media (prefers-reduced-motion: reduce) { .ui-flyout-panel { animation: none; } .ui-flyout-btn svg { transition: none; } }


.ui-mark { padding: 0 .2em; border-radius: 3px; background: color-mix(in srgb, var(--m) 30%, transparent); color: inherit;
  --m: #f5c518; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ui-mark-accent { --m: var(--ui-accent); }
.ui-mark-success { --m: var(--ui-success); }
.ui-mark-warning { --m: var(--ui-warning); }
.ui-mark-danger { --m: var(--ui-danger); }
.ui-mark-info { --m: var(--ui-info); }
.ui-mark-neutral { --m: var(--ui-strong); }
.ui-mark-underline { padding: 0; border-radius: 0; background: none;
  text-decoration: underline; text-decoration-color: var(--m); text-decoration-thickness: .3em; text-underline-offset: -.1em;
  text-decoration-skip-ink: none; }
@media (forced-colors: active) { .ui-mark { background: Mark; color: MarkText; } }


.ui-csv-imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-csv-imp .ui-csv-imp-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-csv-imp-drop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; padding: 10px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); }
.ui-csv-imp-over { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-csv-imp-drop label, .ui-csv-imp-opt label { font-size: 13px; font-weight: 500; }
.ui-csv-imp-text { box-sizing: border-box; width: 100%; min-height: 120px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 12.5px/1.5 var(--ui-mono); resize: vertical; white-space: pre; overflow: auto; }
.ui-csv-imp-text:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-csv-imp-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-csv-imp-hint input { max-width: 100%; font: inherit; color: inherit; }
.ui-csv-imp-hint input:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-csv-imp-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.ui-csv-imp-opt { display: grid; gap: 4px; min-width: 0; }
.ui-csv-imp select { box-sizing: border-box; max-width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-csv-imp select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-csv-imp-found { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-csv-imp-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-csv-imp-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-csv-imp-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-csv-imp-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-csv-imp table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-csv-imp caption { padding: 8px 10px 4px; text-align: left; font-weight: 600; }
.ui-csv-imp th, .ui-csv-imp td { padding: 6px 10px; text-align: left; border-top: 1px solid var(--ui-border); vertical-align: middle; }
.ui-csv-imp thead th { background: var(--ui-subtle); font-weight: 600; white-space: nowrap; }
.ui-csv-imp-kind { color: var(--ui-muted); font-size: 12px; }
.ui-csv-imp-req { color: var(--ui-danger); }
.ui-csv-imp-sample { color: var(--ui-muted); font-family: var(--ui-mono); font-size: 12px; overflow-wrap: anywhere; }
.ui-csv-imp-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-weight: 600; }
.ui-csv-imp-good { color: var(--ui-success); }
.ui-csv-imp-badcount { color: var(--ui-danger); }
.ui-csv-imp-bad { display: grid; gap: 4px; max-height: 200px; margin: 0; padding: 8px 10px 8px 12px; overflow: auto; border-left: 3px solid var(--ui-danger);
  background: var(--ui-danger-soft); list-style: none; font-size: 13px; }
.ui-csv-imp-bad:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-csv-imp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-csv-imp-go { height: 36px; padding: 0 16px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent);
  color: var(--ui-accent-fg); font: 600 14px var(--ui-font); cursor: pointer; }
.ui-csv-imp-go:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-csv-imp-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-csv-imp-go:disabled { opacity: .5; cursor: not-allowed; }
.ui-csv-imp-said { color: var(--ui-muted); font-size: 13px; }


.ui-keyboard-avoider { box-sizing: border-box; min-width: 0; }


.ui-toast-host {
  position: fixed; z-index: 1100; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px));
  margin: 0; padding: 0; list-style: none; pointer-events: none; font: 14px/1.45 var(--ui-font);
}
.ui-toast-host > li { pointer-events: auto; }
.ui-toast-bottom-right { right: 16px; bottom: 16px; flex-direction: column-reverse; }
.ui-toast-bottom-left { left: 16px; bottom: 16px; flex-direction: column-reverse; }
.ui-toast-bottom-center { left: 50%; bottom: 16px; translate: -50% 0; flex-direction: column-reverse; }
.ui-toast-top-right { right: 16px; top: 16px; }
.ui-toast-top-left { left: 16px; top: 16px; }
.ui-toast-top-center { left: 50%; top: 16px; translate: -50% 0; }
.ui-toast-inline { position: absolute; z-index: 5; }
.ui-toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 14px; border: 1px solid var(--ui-border);
  border-left: 3px solid var(--t); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); animation: ui-toast-in .2s ease-out;
  --t: var(--ui-strong);
}
.ui-toast-info { --t: var(--ui-info); }
.ui-toast-success { --t: var(--ui-success); }
.ui-toast-warning { --t: var(--ui-warning); }
.ui-toast-danger { --t: var(--ui-danger); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-toast-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--t); }
.ui-toast-neutral .ui-toast-icon { color: var(--ui-muted); }
.ui-toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-toast-title { display: block; font-weight: 600; }
.ui-toast-msg { color: var(--ui-fg); }
.ui-toast-title + .ui-toast-msg { display: block; color: var(--ui-muted); }
.ui-toast-action {
  flex: none; align-self: center; height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: 600 13px/1 var(--ui-font); cursor: pointer;
}
.ui-toast-action:hover { background: var(--ui-accent-soft); }
.ui-toast-x {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: -3px 0 -3px -2px; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-toast-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-toast-x svg { width: 16px; height: 16px; }
.ui-toast-action:focus-visible, .ui-toast-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 520px) {
  .ui-toast-host:not(.ui-toast-inline) { left: 12px; right: 12px; width: auto; translate: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } }


.ui-share-button svg { flex: none; width: 16px; height: 16px; }
.ui-share-button-labels { display: inline-grid; }
.ui-share-button-labels > span { grid-area: 1 / 1; text-align: center; }
.ui-share-button:not(.ui-share-button-ok) .ui-share-button-done, .ui-share-button:not(.ui-share-button-copied) .ui-share-button-copy,
.ui-share-button:not(.ui-share-button-bad) .ui-share-button-fail, .ui-share-button-ok .ui-share-button-label, .ui-share-button-copied .ui-share-button-label,
.ui-share-button-bad .ui-share-button-label { visibility: hidden; }
.ui-share-button-ok svg, .ui-share-button-copied svg { color: var(--ui-success); }


.ui-seatmap { display: grid; gap: 14px; min-width: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-seatmap-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-seatmap-tab { display: grid; gap: 1px; min-width: 120px; padding: 7px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.3 var(--ui-font); text-align: left; cursor: pointer; }
.ui-seatmap-tab b { font-weight: 600; }
.ui-seatmap-tab span { color: var(--ui-muted); font-size: 12px; }
.ui-seatmap-tab:hover { border-color: var(--ui-strong); }
.ui-seatmap-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-seatmap-tab[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-seatmap-tab[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-focus); }
.ui-seatmap-plane { justify-self: start; max-width: 100%; overflow-x: auto; padding: 28px 36px 22px; border: 1px solid var(--ui-border);
  border-radius: 90px 90px var(--ui-radius) var(--ui-radius); background: var(--ui-surface); }
.ui-seatmap-cabin { display: grid; gap: 6px; }
.ui-seatmap-row { position: relative; display: flex; align-items: center; gap: 6px; }
.ui-seatmap-head { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-seatmap-head span { width: 34px; text-align: center; }
.ui-seatmap-aisle { width: 26px; color: var(--ui-muted); font-size: 11px; font-weight: 600; text-align: center; }
.ui-seatmap-exit::before, .ui-seatmap-exit::after { content: "EXIT"; position: absolute; top: 50%; color: var(--ui-danger); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; transform: translateY(-50%); }
.ui-seatmap-exit::before { right: calc(100% + 6px); }
.ui-seatmap-exit::after { left: calc(100% + 6px); }
.ui-seatmap-extra { margin-top: 6px; }
.ui-seatmap-seat { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ui-strong);
  border-radius: 8px 8px 5px 5px; background: var(--ui-surface); color: var(--ui-fg); font: 600 11px var(--ui-font); cursor: pointer;
  transition: background .12s, border-color .12s; }
.ui-seatmap-seat::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--ui-border); }
.ui-seatmap-seat:hover:not([aria-disabled="true"]) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-seatmap-seat:focus-visible { outline: none; box-shadow: var(--ui-focus); z-index: 1; }
.ui-seatmap-xl { border-color: var(--ui-info); background: var(--ui-info-soft); }
.ui-seatmap-fr { border-color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-seatmap-seat[aria-disabled="true"] { border-color: var(--ui-border); background: var(--ui-subtle); color: var(--ui-muted); cursor: not-allowed; }
.ui-seatmap-seat[aria-disabled="true"]::before { content: ""; width: 12px; height: 12px;
  background: linear-gradient(45deg, transparent 45%, var(--ui-strong) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--ui-strong) 45% 55%, transparent 55%); }
.ui-seatmap-seat[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-seatmap-seat[aria-pressed="true"]::after { background: color-mix(in srgb, var(--ui-accent-fg) 40%, transparent); }
.ui-seatmap-now { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-accent); }
.ui-seatmap-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-seatmap-key li { display: inline-flex; align-items: center; gap: 6px; }
.ui-seatmap-key i { width: 14px; height: 14px; border: 1px solid var(--ui-strong); border-radius: 4px 4px 3px 3px; background: var(--ui-surface); }
.ui-seatmap-key .ui-seatmap-k-xl { border-color: var(--ui-info); background: var(--ui-info-soft); }
.ui-seatmap-key .ui-seatmap-k-fr { border-color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-seatmap-key .ui-seatmap-k-taken { border-color: var(--ui-border); background: var(--ui-subtle); }
.ui-seatmap-key .ui-seatmap-k-mine { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-seatmap-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 12px 14px;
  border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-seatmap-sum output { font-size: 18px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ui-seatmap-seat { transition: none; } }


.ui-icon {
  display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: -.22em;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.ui-icon-xs { width: 12px; height: 12px; }
.ui-icon-sm { width: 16px; height: 16px; }
.ui-icon-lg { width: 24px; height: 24px; }
.ui-icon-xl { width: 32px; height: 32px; }


.ui-idle-host { display: contents; }
.ui-idle { position: fixed; z-index: 75; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); padding: 14px 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 14px/1.5 var(--ui-font); animation: ui-idle-in .2s ease-out; }
.ui-idle-title { margin: 0 0 4px; font-weight: 600; }
.ui-idle-text { margin: 0; color: var(--ui-muted); }
.ui-idle-text b { color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-idle-bar { height: 4px; margin: 10px 0; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-idle-fill { height: 100%; background: var(--ui-warning); transition: width 1s linear; }
.ui-idle-btn { height: 34px; padding: 0 14px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-idle-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-idle-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@keyframes ui-idle-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ui-idle { animation: none; } .ui-idle-fill { transition: none; } }


.ui-collapsible { min-width: 0; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); interpolate-size: allow-keywords; }
.ui-collapsible > summary {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--ui-radius-sm); font-weight: 500; cursor: pointer; list-style: none; user-select: none;
}
.ui-collapsible > summary::-webkit-details-marker { display: none; }
.ui-collapsible > summary:hover { color: var(--ui-accent); }
.ui-collapsible > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-collapsible-chev { flex: none; width: 16px; height: 16px; transition: transform .2s; }
.ui-collapsible[open] > summary .ui-collapsible-chev { transform: rotate(90deg); }
.ui-collapsible-hint { color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.ui-collapsible-body { padding: 8px 0 4px; }
.ui-collapsible-body > :first-child { margin-top: 0; }
.ui-collapsible-body > :last-child { margin-bottom: 0; }
.ui-collapsible-box { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-collapsible-box > summary { width: auto; margin: 0; padding: 12px 16px; border-radius: var(--ui-radius); }
.ui-collapsible-box > .ui-collapsible-body { padding: 0 16px 16px; }
.ui-collapsible-button > summary {
  margin: 0; padding: 0 14px; height: 36px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font-size: 14px;
}
.ui-collapsible-button > summary:hover { border-color: var(--ui-strong); background: var(--ui-subtle); color: var(--ui-fg); }
.ui-collapsible-button > .ui-collapsible-body { padding-top: 12px; }
.ui-collapsible::details-content { block-size: 0; overflow: hidden; transition: block-size .2s, content-visibility .2s allow-discrete; }
.ui-collapsible[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .ui-collapsible-chev, .ui-collapsible::details-content { transition: none; } }


.ui-infscroll { display: grid; gap: 0; }
.ui-infscroll-end { display: grid; justify-items: center; gap: 8px; padding: 14px; font: 13px/1.4 var(--ui-font); color: var(--ui-muted); text-align: center; }
.ui-infscroll-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
  border-top-color: var(--ui-accent); animation: ui-infscroll-turn .75s linear infinite; }
.ui-infscroll-btn { height: 32px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-accent); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-infscroll-btn:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-infscroll-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@keyframes ui-infscroll-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-infscroll-spin { animation: none; border-color: var(--ui-accent); } }


.ui-cardctl { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 28px; align-items: start; min-width: 0;
  font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
@media (max-width: 640px) { .ui-cardctl { grid-template-columns: minmax(0, 1fr); } }
.ui-cardctl-face { --f: var(--ui-accent); position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; aspect-ratio: 1.586;
  max-width: 300px; padding: 18px 20px; border-radius: 14px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--f) 92%, #fff) 0%, var(--f) 45%, color-mix(in srgb, var(--f) 60%, #000) 100%);
  box-shadow: var(--ui-shadow); transition: filter .2s; }
.ui-cardctl-dark .ui-cardctl-face { --f: #23262e; }
.ui-cardctl-green .ui-cardctl-face { --f: #0f7a55; }
.ui-cardctl-face::after { content: ""; position: absolute; right: -40px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.ui-cardctl-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-cardctl-brand { font-size: 16px; font-style: italic; font-weight: 800; letter-spacing: .02em; text-transform: none; }
.ui-cardctl-chip { width: 36px; height: 27px; align-self: center; }
.ui-cardctl-pan { font: 500 16px var(--ui-mono); letter-spacing: .12em; white-space: nowrap; }
.ui-cardctl-bottom { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ui-cardctl-bottom small { display: block; font-size: 9px; opacity: .75; }
.ui-cardctl-ice { position: absolute; inset: 0; z-index: 1; display: none; place-content: center; justify-items: center; gap: 4px;
  background: rgba(200, 222, 255, .35); backdrop-filter: blur(1.5px); color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.ui-cardctl-ice svg { width: 30px; height: 30px; }
.ui-cardctl-frozen .ui-cardctl-face { filter: grayscale(.85); }
.ui-cardctl-frozen .ui-cardctl-ice { display: grid; }
.ui-cardctl-panel { display: grid; gap: 14px; min-width: 0; }
.ui-cardctl-group { display: grid; margin: 0; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-cardctl-legend { float: left; width: 100%; padding: 10px 14px 0; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-cardctl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; cursor: pointer; }
.ui-cardctl-row + .ui-cardctl-row { border-top: 1px solid var(--ui-border); }
.ui-cardctl-text { display: grid; gap: 1px; }
.ui-cardctl-name { font-weight: 500; }
.ui-cardctl-hint { color: var(--ui-muted); font-size: 12px; }
.ui-cardctl-row input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-cardctl-track { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--ui-strong); transition: background .15s; }
.ui-cardctl-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.ui-cardctl-row input:checked + .ui-cardctl-track { background: var(--ui-accent); }
.ui-cardctl-row input:checked + .ui-cardctl-track::after { transform: translateX(16px); }
.ui-cardctl-row input:focus-visible + .ui-cardctl-track { box-shadow: var(--ui-focus); }
.ui-cardctl-freeze input:checked + .ui-cardctl-track { background: var(--ui-info); }
.ui-cardctl-limit { display: grid; gap: 6px; padding: 11px 14px; }
.ui-cardctl-limit + .ui-cardctl-limit { border-top: 1px solid var(--ui-border); }
.ui-cardctl-limit-head { display: flex; justify-content: space-between; gap: 10px; }
.ui-cardctl-limit output { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-cardctl-limit input[type=range] { width: 100%; margin: 0; accent-color: var(--ui-accent); }
.ui-cardctl-scale { display: flex; justify-content: space-between; color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-cardctl-uses { transition: opacity .15s; }
.ui-cardctl-frozen .ui-cardctl-uses { opacity: .6; }
.ui-cardctl-summary { margin: 0; padding: 9px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-muted); font-size: 13px; }
.ui-cardctl-frozen .ui-cardctl-summary { background: var(--ui-info-soft); color: var(--ui-info); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ui-cardctl-face, .ui-cardctl-track, .ui-cardctl-track::after, .ui-cardctl-uses { transition: none; } }


.ui-kv { display: grid; gap: 8px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-kv-label { margin: 0; font-size: 13px; font-weight: 500; }
.ui-kv-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-kv-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-kv-head, .ui-kv-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 34px; gap: 6px; align-items: start; }
.ui-kv-head { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ui-muted); }
.ui-kv-head span { padding-left: 2px; }
.ui-kv-input { box-sizing: border-box; width: 100%; height: 34px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px/1 var(--ui-mono);
  transition: border-color .15s, box-shadow .15s; }
.ui-kv-input::placeholder { color: var(--ui-muted); opacity: 1; font-family: var(--ui-font); }
.ui-kv-input:hover { border-color: var(--ui-strong); }
.ui-kv-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-kv-input[aria-invalid="true"] { border-color: var(--ui-warning); background: color-mix(in srgb, var(--ui-warning) 7%, var(--ui-surface)); }
.ui-kv-warn { grid-column: 1 / -1; margin: -2px 0 2px; font-size: 12px; color: var(--ui-warning); }
.ui-kv-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-kv-x:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-kv-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-kv-x svg { width: 14px; height: 14px; }
.ui-kv-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-kv-add:hover:not(:disabled) { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-kv-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-kv-add:disabled { opacity: .55; cursor: not-allowed; }
.ui-kv-add svg { width: 12px; height: 12px; }
.ui-kv-empty { margin: 0; padding: 10px 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm);
  color: var(--ui-muted); font-size: 13px; }
@media (max-width: 480px) { .ui-kv-head, .ui-kv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; } }
@media (prefers-reduced-motion: reduce) { .ui-kv-input { transition: none; } }


.ui-json-fmt { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-json-fmt .ui-json-fmt-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-json-fmt-field { display: grid; gap: 5px; min-width: 0; }
.ui-json-fmt-field > label, .ui-json-fmt-label { font-size: 13px; font-weight: 500; }
.ui-json-fmt-field textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.5 var(--ui-mono); resize: vertical; }
.ui-json-fmt-field textarea:focus-visible, .ui-json-fmt-bar select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-json-fmt-field textarea[aria-invalid] { border-color: var(--ui-danger); }
.ui-json-fmt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-json-fmt-seg { display: inline-flex; gap: 0; }
.ui-json-fmt-btn { height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-json-fmt-seg .ui-json-fmt-btn:first-child { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
.ui-json-fmt-seg .ui-json-fmt-btn:last-child { margin-left: -1px; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-json-fmt-btn:hover { background: var(--ui-subtle); }
.ui-json-fmt-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); position: relative; }
.ui-json-fmt-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-json-fmt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ui-json-fmt-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-json-fmt-check input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-json-fmt-bar select { height: 32px; padding: 0 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-json-fmt-indent { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ui-json-fmt-error { display: grid; gap: 6px; padding: 10px 12px; border-left: 4px solid var(--ui-danger); border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); }
.ui-json-fmt-where { margin: 0; font-weight: 600; color: var(--ui-danger); }
.ui-json-fmt-why { margin: 0; overflow-wrap: anywhere; }
.ui-json-fmt-excerpt { margin: 0; padding: 6px 8px; overflow-x: auto; border-radius: 4px; background: var(--ui-surface); font: 12px/1.5 var(--ui-mono); white-space: pre; }
.ui-json-fmt-excerpt:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-json-fmt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-json-fmt-output { max-height: 360px; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle);
  font: 13px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-json-fmt-output:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-json-fmt-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-json-fmt-warn { margin: 0; color: var(--ui-warning); font-size: 13px; overflow-wrap: anywhere; }


.ui-log-explorer { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-log-explorer .ui-log-explorer-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-log-explorer-field { display: grid; gap: 5px; min-width: 0; }
.ui-log-explorer-field label, .ui-log-explorer-source summary { font-size: 13px; font-weight: 500; }
.ui-log-explorer-source summary { cursor: pointer; }
.ui-log-explorer-source summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-log-explorer-field input, .ui-log-explorer-source textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.45 var(--ui-mono); }
.ui-log-explorer-source textarea { margin-top: 6px; resize: vertical; }
.ui-log-explorer-field input:focus-visible, .ui-log-explorer-source textarea:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-log-explorer-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-log-explorer-level { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-log-explorer-level:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-log-explorer-level[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-log-explorer-level b { font-variant-numeric: tabular-nums; }
.ui-log-explorer-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-log-explorer-problem { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-log-explorer-list { display: grid; gap: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-log-explorer-entry + .ui-log-explorer-entry { border-top: 1px solid var(--ui-border); }
.ui-log-explorer-anchor { background: var(--ui-accent-soft); }
.ui-log-explorer-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 6px 10px; border: 0; background: none; color: inherit;
  font: 13px/1.45 var(--ui-font); text-align: left; cursor: pointer; }
.ui-log-explorer-row:hover { background: var(--ui-subtle); }
.ui-log-explorer-row:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-log-explorer-time { color: var(--ui-muted); font: 12px/1.6 var(--ui-mono); white-space: nowrap; }
.ui-log-explorer-tag { min-width: 44px; font: 600 11px/1.7 var(--ui-font); text-transform: uppercase; color: var(--ui-muted); }
.ui-log-explorer-tag-error, .ui-log-explorer-tag-fatal { color: var(--ui-danger); }
.ui-log-explorer-tag-warn { color: var(--ui-warning); }
.ui-log-explorer-tag-info { color: var(--ui-info); }
.ui-log-explorer-msg { min-width: 0; overflow-wrap: anywhere; font-family: var(--ui-mono); font-size: 12px; line-height: 1.6; }
.ui-log-explorer-msg mark { border-radius: 2px; background: var(--ui-warning-soft); color: inherit; }
.ui-log-explorer-more { color: var(--ui-muted); }
.ui-log-explorer-body { display: grid; gap: 8px; padding: 6px 10px 10px; border-top: 1px dashed var(--ui-border); font-size: 13px; }
.ui-log-explorer-fields { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.ui-log-explorer-chip { padding: 1px 6px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-surface); color: var(--ui-fg); font: 12px/1.5 var(--ui-mono); overflow-wrap: anywhere; text-align: left; cursor: pointer; }
.ui-log-explorer-chip:hover { border-color: var(--ui-accent); }
.ui-log-explorer-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-log-explorer-trace { margin: 0; max-height: 240px; padding: 8px 10px; overflow: auto; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 12px/1.5 var(--ui-mono); white-space: pre; }
.ui-log-explorer-trace:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-log-explorer-btn { justify-self: start; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-log-explorer-btn:hover { background: var(--ui-subtle); }
.ui-log-explorer-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-log-explorer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 520px) { .ui-log-explorer-row { grid-template-columns: auto minmax(0, 1fr); } .ui-log-explorer-msg { grid-column: 1 / -1; } }


.ui-sleepc { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-sleepc-head { margin-bottom: 10px; }
.ui-sleepc-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-sleepc-total { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-sleepc-span { margin: 0; color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-sleepc-body { display: grid; gap: 14px; }
.ui-sleepc-chart { min-width: 0; }
.ui-sleepc-read { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-sleepc-clear { flex: none; min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-sleepc-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sleepc-grid { display: grid; grid-template-columns: 46px 1fr; column-gap: 6px; }
.ui-sleepc-rows { display: grid; grid-template-rows: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 12px; }
.ui-sleepc-rows li { display: flex; align-items: center; }
.ui-sleepc-plot { position: relative; height: 200px; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); outline: none; cursor: crosshair;
  touch-action: pan-y; overscroll-behavior-x: contain; -webkit-tap-highlight-color: transparent; }
.ui-sleepc-plot:focus-visible { box-shadow: var(--ui-focus); }
.ui-sleepc-busy { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-sleepc-plot svg { display: block; width: 100%; height: 100%; }
.ui-sleepc-bar-awake { fill: var(--ui-warning); }
.ui-sleepc-bar-rem { fill: var(--ui-info); }
.ui-sleepc-bar-light { fill: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-surface)); }
.ui-sleepc-bar-deep { fill: var(--ui-accent); }
.ui-sleepc-steps { fill: none; stroke: var(--ui-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-sleepc-midnight { position: absolute; inset: 0 auto 0 0; width: 0; border-left: 1px dashed var(--ui-muted); pointer-events: none; }
/* As wide as the plot, the line at its left edge, so a percentage of its own width is a place on the plot, at any size. */
.ui-sleepc-cross { position: absolute; inset: 0; pointer-events: none; }
.ui-sleepc-cross::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: var(--ui-fg); }
.ui-sleepc-axis { position: relative; grid-column: 2; height: 20px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-sleepc-tick { position: absolute; top: 2px; white-space: nowrap; }
.ui-sleepc-sums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; align-content: start; }
.ui-sleepc-sum { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 2px 6px; font-size: 14px; }
.ui-sleepc-sum i { width: 12px; height: 12px; border-radius: 3px; background: var(--ui-strong); }
.ui-sleepc-sum b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sleepc-sum small { grid-column: 2 / -1; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-sleepc-dot-awake { background: var(--ui-warning) !important; }
.ui-sleepc-dot-rem { background: var(--ui-info) !important; }
.ui-sleepc-dot-light { background: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-surface)) !important; }
.ui-sleepc-dot-deep { background: var(--ui-accent) !important; }
.ui-sleepc-none { margin: 0; color: var(--ui-muted); }
@container (min-width: 620px) {
  .ui-sleepc-body { grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; }
  .ui-sleepc-plot { height: 280px; }
  .ui-sleepc-sums { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ui-sleepc-sum { font-size: 15px; }
}
@media (hover: hover) { .ui-sleepc-clear:hover { background: var(--ui-subtle); } }


.ui-welcome-carousel-host { display: contents; }
.ui-welcome-carousel {
  position: relative; z-index: 60; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.5 var(--ui-font); container: ui-welcome-carousel / size; overscroll-behavior: contain;
}
.ui-welcome-carousel-fixed { position: fixed; inset: 0; width: auto; height: auto; }
.ui-welcome-carousel-top { display: flex; justify-content: flex-end; flex: none; min-height: 46px; padding: 8px 8px 0; }
.ui-welcome-carousel-off { visibility: hidden; }
.ui-welcome-carousel-view { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; outline: none; }
.ui-welcome-carousel-view:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
/* The place at rest comes from the box around it, not a style on the track: a drag writes the track's style by hand, and an
   attribute written from state would be put back whole whenever what it reads changed. */
.ui-welcome-carousel-track { display: flex; height: 100%; transform: translateX(var(--ui-welcome-carousel-at, 0%)); transition: transform .32s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ui-welcome-carousel-held .ui-welcome-carousel-track { transition: none; }
.ui-welcome-carousel-held { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.ui-welcome-carousel-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; box-sizing: border-box; flex: 0 0 100%; min-width: 0; height: 100%;
  padding: 16px 24px; overflow: auto; text-align: center; touch-action: pan-y; /* Not inherited, and a scroller inside would otherwise take a sideways pan. */
}
.ui-welcome-carousel-art {
  display: grid; place-items: center; flex: none; width: 112px; height: 112px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 52px; line-height: 1; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.ui-welcome-carousel-art svg { width: 54px; height: 54px; }
.ui-welcome-carousel-pic { display: block; flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 46cqh; border-radius: var(--ui-radius); object-fit: contain; -webkit-touch-callout: none; -webkit-user-drag: none; }
.ui-welcome-carousel-words { min-width: 0; max-width: 34em; }
.ui-welcome-carousel-words h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.ui-welcome-carousel-words p { margin: 0; color: var(--ui-muted); }
.ui-welcome-carousel-foot { display: grid; gap: 8px; flex: none; padding: 0 20px 16px; }
.ui-welcome-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; }
.ui-welcome-carousel-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ui-welcome-carousel-dot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ui-strong); transition: width .2s, background .2s; }
.ui-welcome-carousel-dot[aria-current="true"]::before { width: 22px; background: var(--ui-accent); }
.ui-welcome-carousel-dot:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-welcome-carousel-dot:hover::before { background: var(--ui-muted); } }
/* A tablet, or a phone on its side: the picture beside the words, not a long way above them. */
@container ui-welcome-carousel (min-width: 600px) {
  .ui-welcome-carousel-page { flex-direction: row; gap: 48px; padding: 16px 64px; text-align: start; }
  .ui-welcome-carousel-art { width: 180px; height: 180px; font-size: 84px; }
  .ui-welcome-carousel-art svg { width: 86px; height: 86px; }
  .ui-welcome-carousel-pic { max-width: 48%; max-height: 80cqh; }
  .ui-welcome-carousel-words h2 { font-size: 30px; }
  .ui-welcome-carousel-foot { grid-template-columns: 1fr minmax(220px, 300px); align-items: center; padding: 0 64px 20px; }
  .ui-welcome-carousel-dots { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ui-welcome-carousel-track, .ui-welcome-carousel-dot::before { transition: none; } }


.ui-faqf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-faqf .ui-faqf-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-faqf-field { display: grid; gap: 5px; font-size: 13px; font-weight: 500; }
.ui-faqf-field input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 15px var(--ui-font); }
.ui-faqf-field input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-faqf-count { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-faqf-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-warning); font-size: 13px; }
.ui-faqf-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-faqf-item { min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); overflow-wrap: anywhere; }
.ui-faqf-item summary { display: grid; gap: 2px; padding: 9px 12px; font-weight: 600; cursor: pointer; border-radius: var(--ui-radius-sm); }
.ui-faqf-item summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-faqf-why { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-faqf-answer { margin: 0; padding: 0 12px 10px; white-space: pre-line; }
.ui-faqf-tag { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-faqf-none { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-faqf-none p { margin: 0; }
.ui-faqf-offers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-faqf-offer { height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); cursor: pointer; }
.ui-faqf-offer:hover { border-color: var(--ui-accent); }
.ui-faqf-offer:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-faqf-contact { color: var(--ui-accent); font-weight: 600; }
.ui-faqf-contact:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 2px; }
.ui-faqf .ui-faqf-heading { margin: 0; font-size: 13px; font-weight: 650; color: var(--ui-muted); }


.ui-stopwatch { display: grid; gap: 12px; justify-items: center; min-width: 0; padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-stopwatch:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stopwatch-label { color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-stopwatch-time { font: 600 44px/1 var(--ui-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ui-stopwatch-time small { font-size: .55em; color: var(--ui-muted); }
.ui-stopwatch-sm .ui-stopwatch-time { font-size: 30px; }
.ui-stopwatch-lg .ui-stopwatch-time { font-size: 60px; }
.ui-stopwatch-buttons { display: flex; gap: 10px; }
.ui-stopwatch-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 38px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 600 14px/1 var(--ui-font); cursor: pointer; transition: background .15s;
}
.ui-stopwatch-btn:hover { background: var(--ui-subtle); }
.ui-stopwatch-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-stopwatch-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-stopwatch-go { border-color: transparent; background: var(--ui-success); color: #fff; }
.ui-stopwatch-go:hover { background: color-mix(in srgb, var(--ui-success) 88%, var(--ui-fg)); }
.ui-stopwatch-stop { border-color: transparent; background: var(--ui-danger); color: #fff; }
.ui-stopwatch-stop:hover { background: color-mix(in srgb, var(--ui-danger) 88%, var(--ui-fg)); }
.ui-stopwatch-laps { width: 100%; max-height: 220px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-stopwatch-lap { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--ui-border); font-variant-numeric: tabular-nums; }
.ui-stopwatch-lap span:first-child { color: var(--ui-muted); }
.ui-stopwatch-lap span:nth-child(2) { font-family: var(--ui-mono); }
.ui-stopwatch-lap span:last-child { color: var(--ui-muted); font-family: var(--ui-mono); }
.ui-stopwatch-fast span:nth-child(2) { color: var(--ui-success); }
.ui-stopwatch-slow span:nth-child(2) { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-stopwatch-btn { transition: none; } }


.ui-ticket { --t: var(--ui-accent); --tf: var(--ui-accent-fg); position: relative; display: flex; width: 100%; max-width: 560px; min-width: 0; margin: 0;
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); box-shadow: var(--ui-shadow);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .04)); }
.ui-ticket-success { --t: var(--ui-success); --tf: #fff; }
.ui-ticket-warning { --t: var(--ui-warning); --tf: #fff; }
.ui-ticket-danger { --t: var(--ui-danger); --tf: #fff; }
.ui-ticket-info { --t: var(--ui-info); --tf: #fff; }
.ui-ticket-main { flex: 1; min-width: 0; display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--ui-radius) 0 0 var(--ui-radius); overflow: hidden; }
.ui-ticket-top { position: relative; margin: -18px -20px 0; padding: 18px 20px 14px; background: var(--t); color: var(--tf); }
.ui-ticket-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.ui-ticket-top > * { position: relative; }
.ui-ticket-kind { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ui-ticket-event { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.ui-ticket-when { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ui-muted); font-size: 13px; }
.ui-ticket-when b { color: var(--ui-fg); font-weight: 600; }
.ui-ticket-place { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.ui-ticket-place div { display: grid; gap: 1px; }
.ui-ticket-place dt { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-ticket-place dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-ticket-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; color: var(--ui-muted); font-size: 13px; }
.ui-ticket-foot b { color: var(--ui-fg); font-weight: 500; }
.ui-ticket-stub { position: relative; flex: 0 0 150px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px 14px;
  border-left: 2px dashed var(--ui-strong); border-radius: 0 var(--ui-radius) var(--ui-radius) 0; text-align: center; }
.ui-ticket-stub::before, .ui-ticket-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-bg); }
.ui-ticket-stub::before { top: -10px; }
.ui-ticket-stub::after { bottom: -10px; }
.ui-ticket-stub-event { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.ui-ticket-stub-seat { color: var(--ui-muted); font-size: 12px; }
.ui-ticket-code { font: 12px/1.3 var(--ui-mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.ui-ticket-slot:empty { display: none; }
@media (max-width: 440px) {
  .ui-ticket { flex-direction: column; }
  .ui-ticket-main { border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
  .ui-ticket-stub { flex: none; border-left: 0; border-top: 2px dashed var(--ui-strong); border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
  .ui-ticket-stub::before, .ui-ticket-stub::after { top: -11px; bottom: auto; }
  .ui-ticket-stub::before { left: -10px; }
  .ui-ticket-stub::after { left: auto; right: -10px; }
}
@media print { .ui-ticket { box-shadow: none; filter: none; border: 1px solid #000; } .ui-ticket-top { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }


.ui-json { min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.4 var(--ui-font); overflow: hidden; }
.ui-json-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-subtle); }
.ui-json-bar button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-json-bar button:hover { border-color: var(--ui-strong); }
.ui-json-bar button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-json-bar svg { width: 13px; height: 13px; }
.ui-json-path { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ui-json-path code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px;
  border-radius: 4px; background: var(--ui-surface); color: var(--ui-muted); font: 12px/1.4 var(--ui-mono); }
.ui-json-copied { color: var(--ui-success) !important; }
.ui-json-tree { margin: 0; padding: 6px 0; list-style: none; overflow: auto; font: 13px/1.5 var(--ui-mono); outline: none; }
.ui-json-row { display: flex; align-items: baseline; gap: 4px; min-height: 22px; padding: 1px 12px 1px calc(var(--ui-json-depth) * 18px + 8px);
  white-space: nowrap; outline: none; }
.ui-json-row[role="treeitem"] { cursor: default; }
.ui-json-row[aria-expanded] { cursor: pointer; }
.ui-json-row[role="treeitem"]:hover { background: var(--ui-subtle); }
.ui-json-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-json-row.ui-json-on { background: var(--ui-accent-soft); }
.ui-json-tog { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  align-self: center; color: var(--ui-muted); }
.ui-json-tog svg { width: 10px; height: 10px; transition: transform .15s; }
[aria-expanded="true"] > .ui-json-tog svg { transform: rotate(90deg); }
.ui-json-key { color: var(--ui-accent); }
.ui-json-idx { color: var(--ui-muted); }
.ui-json-punct { color: var(--ui-muted); }
.ui-json-comma { margin-left: -4px; }
.ui-json-string { color: var(--ui-success); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-json-number { color: var(--ui-info); }
.ui-json-boolean { color: var(--ui-warning); }
.ui-json-null { color: var(--ui-muted); font-style: italic; }
.ui-json-size { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted);
  font: 11px/1.6 var(--ui-font); }
@media (prefers-reduced-motion: reduce) { .ui-json-tog svg { transition: none; } }


.ui-print-button svg { flex: none; width: 16px; height: 16px; }
@media print {
  .ui-print-button { display: none !important; }
  .ui-print-button-printing body * { visibility: hidden; }
  .ui-print-button-printing .ui-print-button-target, .ui-print-button-printing .ui-print-button-target * { visibility: visible; }
  .ui-print-button-printing .ui-print-button-target { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
}


.ui-week-strip { container-type: inline-size; color: var(--ui-fg); font: 15px/1.3 var(--ui-font); }
.ui-week-strip-head { display: flex; align-items: center; gap: 2px; min-height: 46px; }
.ui-week-strip-jump { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border-radius: var(--ui-radius-sm); font-weight: 600; }
.ui-week-strip-jump span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-week-strip-jump svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
/* The field lies over the title, unseen: a tap on it is a tap on the system's own picker. */
.ui-week-strip-date { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ui-week-strip-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; cursor: pointer; }
.ui-week-strip-jump:focus-within { box-shadow: var(--ui-focus); }
.ui-week-strip-btn { display: grid; flex: none; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-week-strip-btn:disabled { color: var(--ui-strong); cursor: default; }
.ui-week-strip-btn svg { width: 20px; height: 20px; }
.ui-week-strip-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-week-strip-view { overflow: hidden; touch-action: pan-y; -webkit-touch-callout: none; }
.ui-week-strip-track { display: flex; width: 300%; transform: translateX(-33.3333%); will-change: transform; }
.ui-week-strip-moving { user-select: none; -webkit-user-select: none; }
.ui-week-strip-page { display: grid; flex: 1 1 0; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.ui-week-strip-day { display: grid; justify-items: center; align-content: start; gap: 1px; min-width: 0; min-height: 68px; padding: 6px 0 4px; border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--ui-fg); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-week-strip-name { color: var(--ui-muted); font-size: 12px; }
.ui-week-strip-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; font-weight: 500; }
.ui-week-strip-day[aria-current="date"] .ui-week-strip-num { color: var(--ui-accent); font-weight: 700; }
.ui-week-strip-day[aria-pressed="true"] .ui-week-strip-num { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-week-strip-day:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-week-strip-dots { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 10px; }
.ui-week-strip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); }
.ui-week-strip-dot[data-tone="success"] { background: var(--ui-success); }
.ui-week-strip-dot[data-tone="warning"] { background: var(--ui-warning); }
.ui-week-strip-dot[data-tone="danger"] { background: var(--ui-danger); }
.ui-week-strip-dot[data-tone="info"] { background: var(--ui-info); }
.ui-week-strip-plus { color: var(--ui-muted); font-size: 10px; line-height: 10px; }
.ui-week-strip-titles { display: none; }
.ui-week-strip-say { min-height: 0; margin: 2px 0 0; color: var(--ui-danger); font-size: 13px; text-align: center; }
.ui-week-strip-say:empty { display: none; }
/* A tablet's days have room, so they say what is on them. */
@container (min-width: 600px) {
  .ui-week-strip-day { min-height: 128px; padding: 8px 6px; justify-items: stretch; text-align: left; background: var(--ui-subtle); }
  .ui-week-strip-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ui-accent); }
  .ui-week-strip-name { font-size: 13px; }
  .ui-week-strip-num { font-size: 18px; }
  .ui-week-strip-dots { justify-content: flex-start; }
  .ui-week-strip-titles { display: grid; gap: 2px; margin-top: 4px; font-size: 12px; }
  .ui-week-strip-titles span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (hover: hover) {
  .ui-week-strip-btn:hover:not(:disabled) { background: var(--ui-subtle); }
  .ui-week-strip-day:hover { background: var(--ui-subtle); }
}


.ui-user-badge {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 10px 0 3px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); text-decoration: none;
  vertical-align: middle; white-space: nowrap; --s: 24px; --h: #6e56cf;
}
a.ui-user-badge:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
a.ui-user-badge:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-user-badge-accent { border-color: transparent; background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-user-badge-plain { height: auto; padding: 0; border: 0; background: none; }
.ui-user-badge-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: color-mix(in srgb, var(--h) 24%, var(--ui-bg)); color: color-mix(in srgb, var(--h) 70%, var(--ui-fg));
  font: 600 calc(var(--s) * .4)/1 var(--ui-font); user-select: none;
}
.ui-user-badge-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ui-user-badge-c0 { --h: #e5484d; } .ui-user-badge-c1 { --h: #f76b15; } .ui-user-badge-c2 { --h: #ad7f00; }
.ui-user-badge-c3 { --h: #30a46c; } .ui-user-badge-c4 { --h: #12a594; } .ui-user-badge-c5 { --h: #0090ff; }
.ui-user-badge-c6 { --h: #6e56cf; } .ui-user-badge-c7 { --h: #d6409f; }
.ui-user-badge-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ui-surface); background: var(--ui-strong); }
.ui-user-badge-online { background: var(--ui-success); }
.ui-user-badge-away { background: var(--ui-warning); }
.ui-user-badge-busy { background: var(--ui-danger); }
.ui-user-badge-name { overflow: hidden; text-overflow: ellipsis; }
.ui-user-badge-role { padding: 2px 6px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-user-badge-accent .ui-user-badge-role { background: color-mix(in srgb, var(--ui-accent) 15%, transparent); color: var(--ui-accent); }
.ui-user-badge-tick { flex: none; width: 14px; height: 14px; color: var(--ui-info); }
.ui-user-badge-sm { height: 24px; padding: 0 8px 0 2px; gap: 5px; font-size: 12px; --s: 20px; }
.ui-user-badge-sm .ui-user-badge-role { padding: 1px 5px; font-size: 10px; }
.ui-user-badge-sm .ui-user-badge-tick { width: 12px; height: 12px; }
.ui-user-badge-plain.ui-user-badge-sm { height: auto; padding: 0; }


.ui-ndot { position: relative; display: inline-flex; vertical-align: middle; }
.ui-ndot-mark { position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: var(--d); height: var(--d); padding: 0; border-radius: 999px; background: var(--t); color: #fff;
  font: 600 11px/1 var(--ui-font); font-variant-numeric: tabular-nums; --t: var(--ui-danger); --d: 10px; }
.ui-ndot-count { --d: 18px; padding: 0 5px; }
.ui-ndot-outline .ui-ndot-mark { box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-ndot-sm .ui-ndot-mark { --d: 8px; font-size: 10px; }
.ui-ndot-sm .ui-ndot-count { --d: 16px; padding: 0 4px; }
.ui-ndot-lg .ui-ndot-mark { --d: 12px; font-size: 12px; }
.ui-ndot-lg .ui-ndot-count { --d: 20px; padding: 0 6px; }
.ui-ndot-accent .ui-ndot-mark { --t: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-ndot-success .ui-ndot-mark { --t: var(--ui-success); }
.ui-ndot-warning .ui-ndot-mark { --t: var(--ui-warning); }
.ui-ndot-info .ui-ndot-mark { --t: var(--ui-info); }
.ui-ndot-neutral .ui-ndot-mark { --t: var(--ui-muted); }
.ui-ndot-top-right .ui-ndot-mark { top: 0; right: 0; transform: translate(40%, -40%); }
.ui-ndot-top-left .ui-ndot-mark { top: 0; left: 0; transform: translate(-40%, -40%); }
.ui-ndot-bottom-right .ui-ndot-mark { bottom: 0; right: 0; transform: translate(40%, 40%); }
.ui-ndot-bottom-left .ui-ndot-mark { bottom: 0; left: 0; transform: translate(-40%, 40%); }
.ui-ndot-pulse .ui-ndot-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--t);
  animation: ui-ndot-pulse 1.6s ease-out infinite; }
@keyframes ui-ndot-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-ndot-pulse .ui-ndot-mark::after { animation: none; transform: scale(1.8); opacity: .25; } }


.ui-form { display: grid; gap: var(--ui-form-gap, 16px); min-width: 0; margin: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; }
.ui-form-inline > * { flex: 1 1 160px; min-width: 0; }
.ui-form-inline > .ui-form-submit { flex: 0 0 auto; }
.ui-form-grid { grid-template-columns: repeat(var(--ui-form-cols, 2), minmax(0, 1fr)); }
.ui-form-grid > .ui-form-errors, .ui-form-grid > .ui-form-submit, .ui-form-grid > .ui-form-field-full,
.ui-form-grid > .ui-form-actions, .ui-form-grid > .ui-form-row { grid-column: 1 / -1; }
.ui-form-errors {
  padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ui-danger) 35%, transparent);
  border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-danger); outline: none;
}
.ui-form-errors h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.ui-form-errors ul { margin: 0; padding-left: 18px; }
.ui-form-errors a { color: inherit; font-weight: 500; }
.ui-form-errors a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; }
.ui-form-submit-start { justify-content: flex-start; }
.ui-form-submit-center { justify-content: center; }
.ui-form-submit-between { justify-content: space-between; }
.ui-form-cancel { color: var(--ui-muted); text-decoration: none; font-weight: 500; padding: 0 6px; border-radius: 3px; }
.ui-form-cancel:hover { color: var(--ui-fg); text-decoration: underline; }
.ui-form-cancel:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 559px) {
  .ui-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ui-form-inline > * { flex-basis: 100%; }
}


.ui-wgrid { position: relative; --ui-wgrid-gap: 10px; --ui-wgrid-cols: 4; container-type: inline-size; color: var(--ui-fg); font: 15px/1.3 var(--ui-font); }
.ui-wgrid-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ui-wgrid-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-wgrid-edit, .ui-wgrid-tool, .ui-wgrid-back { min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-wgrid-edit:focus-visible, .ui-wgrid-tool:focus-visible, .ui-wgrid-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-wgrid-tool:disabled { opacity: .5; cursor: default; }
.ui-wgrid-grid { --ui-wgrid-cell: calc((100cqw - (var(--ui-wgrid-cols) - 1) * var(--ui-wgrid-gap)) / var(--ui-wgrid-cols)); display: grid; position: relative;
  grid-template-columns: repeat(var(--ui-wgrid-cols), minmax(0, 1fr)); grid-auto-rows: var(--ui-wgrid-cell); grid-auto-flow: dense; gap: var(--ui-wgrid-gap); margin: 0; padding: 0; list-style: none; }
.ui-wgrid-slot { min-width: 0; min-height: 0; }
.ui-wgrid-tile { position: relative; width: 100%; height: 100%; border-radius: var(--ui-radius); background: var(--ui-subtle); --t: var(--ui-fg); color: var(--ui-fg);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .15s; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ui-wgrid-tone-accent { --t: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-wgrid-tone-success { --t: var(--ui-success); background: var(--ui-success-soft); }
.ui-wgrid-tone-warning { --t: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-wgrid-tone-danger { --t: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-wgrid-tone-info { --t: var(--ui-info); background: var(--ui-info-soft); }
.ui-wgrid-open { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 10px; overflow: hidden; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: inherit; }
.ui-wgrid-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-wgrid-face { display: flex; flex: 1; flex-direction: column; justify-content: space-between; min-height: 0; gap: 2px; }
.ui-wgrid-name { font-size: 13px; font-weight: 600; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-wgrid-value { font-size: 20px; font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-wgrid-tall .ui-wgrid-value { font-size: 30px; }
.ui-wgrid-note { font-size: 12px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-wgrid-pressing { transform: scale(.97); }
.ui-wgrid-editing .ui-wgrid-tile { touch-action: none; cursor: grab; }
.ui-wgrid-editing .ui-wgrid-open { pointer-events: none; }
.ui-wgrid-picked { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-wgrid-lifted { z-index: 3; transition: box-shadow .15s; box-shadow: var(--ui-shadow-lg); cursor: grabbing; }
.ui-wgrid-still .ui-wgrid-tile { transition: none; }
.ui-wgrid-tile:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-wgrid-tools { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: var(--ui-bg); }
.ui-wgrid-tool { flex: 1 1 auto; }
.ui-wgrid-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--ui-muted); font-size: 13px; }
.ui-wgrid-none { margin: 0; color: var(--ui-muted); }
@container (min-width: 620px) {
  .ui-wgrid-grid { --ui-wgrid-cols: 8; }
}
@media (hover: hover) {
  .ui-wgrid-edit:hover, .ui-wgrid-back:hover, .ui-wgrid-tool:not(:disabled):hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) { .ui-wgrid-tile { transition: none; } }


.ui-mekko {
  --ui-mekko-1: light-dark(#2a78d6, #3987e5); --ui-mekko-2: light-dark(#eb6834, #d95926);
  --ui-mekko-3: light-dark(#1baf7a, #199e70); --ui-mekko-4: light-dark(#eda100, #c98500);
  --ui-mekko-5: light-dark(#e87ba4, #d55181); --ui-mekko-6: light-dark(#008300, #008300);
  --ui-mekko-7: light-dark(#6250d6, #9085e9); --ui-mekko-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-mekko-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-mekko-s1 { --c: var(--ui-mekko-1); } .ui-mekko-s2 { --c: var(--ui-mekko-2); } .ui-mekko-s3 { --c: var(--ui-mekko-3); }
.ui-mekko-s4 { --c: var(--ui-mekko-4); } .ui-mekko-s5 { --c: var(--ui-mekko-5); } .ui-mekko-s6 { --c: var(--ui-mekko-6); }
.ui-mekko-s7 { --c: var(--ui-mekko-7); } .ui-mekko-s8 { --c: var(--ui-mekko-8); }
.ui-mekko-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-mekko-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-mekko-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-mekko-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-mekko-y { position: relative; min-width: 24px; }
.ui-mekko-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-mekko-plot { position: relative; }
.ui-mekko-col { position: absolute; top: 0; bottom: 0; }
.ui-mekko-part { position: absolute; left: 0; right: 0; bottom: var(--a); height: var(--b); border: 1px solid var(--ui-bg);
  border-radius: 3px; background: var(--c); color: #fff; container-type: size; }
.ui-mekko-part:hover { z-index: 5; filter: brightness(1.08); outline: 2px solid var(--ui-fg); outline-offset: -1px; }
.ui-mekko-in { display: grid; place-items: center; height: 100%; overflow: hidden; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 34px) or (max-height: 18px) { .ui-mekko-in { display: none; } }
.ui-mekko-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-mekko-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-mekko-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-mekko-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-mekko-tip { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.ui-mekko-first .ui-mekko-tip { left: 0; transform: none; }
.ui-mekko-last .ui-mekko-tip { left: auto; right: 0; transform: none; }
.ui-mekko-part:hover .ui-mekko-tip { display: block; }
.ui-mekko-x { position: relative; height: 32px; margin-top: 6px; }
.ui-mekko-x span { position: absolute; top: 0; display: grid; overflow: hidden; color: var(--ui-muted); text-align: center; }
.ui-mekko-x b { overflow: hidden; color: var(--ui-fg); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-mekko-x small { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }


.ui-profile-header { min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); overflow: hidden; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-profile-header-cover { height: 140px; background: linear-gradient(120deg, var(--ui-accent-soft), var(--ui-accent)); }
.ui-profile-header-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-profile-header-body { padding: 0 20px 18px; }
.ui-profile-header-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -40px; }
.ui-profile-header-avatar {
  display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--ui-surface); background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 28px; font-weight: 650; user-select: none;
}
.ui-profile-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-profile-header-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.ui-profile-header-follow {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 14px/1 var(--ui-font); text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ui-profile-header-follow:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-profile-header-follow:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-profile-header-follow[aria-pressed="true"] { background: transparent; border-color: var(--ui-border); color: var(--ui-fg); }
.ui-profile-header-follow[aria-pressed="true"]:hover { border-color: var(--ui-danger); color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-profile-header-follow svg { width: 15px; height: 15px; }
.ui-profile-header-name { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.ui-profile-header-name svg { width: 18px; height: 18px; color: var(--ui-info); }
.ui-profile-header-handle { color: var(--ui-muted); }
.ui-profile-header-bio { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-profile-header-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-profile-header-meta li { display: inline-flex; align-items: center; gap: 5px; }
.ui-profile-header-meta svg { width: 15px; height: 15px; }
.ui-profile-header-meta a { color: var(--ui-accent); text-decoration: none; }
.ui-profile-header-meta a:hover { text-decoration: underline; }
.ui-profile-header-stats { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.ui-profile-header-stats li, .ui-profile-header-stats a { display: inline-flex; align-items: baseline; gap: 5px; color: inherit; text-decoration: none; }
.ui-profile-header-stats a:hover { text-decoration: underline; }
.ui-profile-header-stats b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-profile-header-stats span { color: var(--ui-muted); }
@media (max-width: 520px) { .ui-profile-header-cover { height: 100px; } .ui-profile-header-avatar { width: 72px; height: 72px; font-size: 22px; } .ui-profile-header-top { margin-top: -32px; } }
@media (prefers-reduced-motion: reduce) { .ui-profile-header-follow { transition: none; } }


.ui-auto-insights { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-auto-insights .ui-auto-insights-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-auto-insights-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.ui-auto-insights-field { display: grid; gap: 4px; font-size: 13px; }
.ui-auto-insights-field select { height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-auto-insights-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-auto-insights-seen { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-auto-insights-live { display: grid; gap: 8px; min-width: 0; }
.ui-auto-insights-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-auto-insights-item { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 4px 14px; align-items: center; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-auto-insights-strength { display: grid; gap: 3px; color: var(--ui-muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-auto-insights-track { display: block; height: 4px; border-radius: 2px; background: var(--ui-border); overflow: hidden; }
.ui-auto-insights-fill { display: block; height: 100%; background: var(--ui-accent); }
.ui-auto-insights-none { margin: 0; color: var(--ui-muted); }
.ui-auto-insights-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-auto-insights-data summary { color: var(--ui-muted); font-size: 13px; cursor: pointer; }
.ui-auto-insights-data summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-auto-insights-box { box-sizing: border-box; width: 100%; min-height: 120px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.4 var(--ui-mono); resize: vertical; }
.ui-auto-insights-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }


.ui-dependent-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; min-width: 0;
  margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-dependent-select-legend { grid-column: 1 / -1; padding: 0; font-size: 13px; font-weight: 500; }
.ui-dependent-select-req { margin-left: 2px; color: var(--ui-danger); }
.ui-dependent-select-field { display: grid; gap: 6px; min-width: 0; }
.ui-dependent-select-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-dependent-select-box { position: relative; display: block; }
.ui-dependent-select-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-dependent-select select {
  appearance: none; display: block; width: 100%; height: 38px; padding: 0 36px 0 12px; background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-dependent-select select:hover { border-color: var(--ui-strong); }
.ui-dependent-select select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-dependent-select select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-dependent-select select:disabled { opacity: .55; cursor: not-allowed; }
.ui-dependent-select option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-dependent-select-sm select { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-dependent-select-sm .ui-dependent-select-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
.ui-dependent-select-invalid select { border-color: var(--ui-danger); }
.ui-dependent-select-hint, .ui-dependent-select-error { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-dependent-select-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-dependent-select select { transition: none; } }


.ui-cover-image {
  position: relative; display: grid; align-items: end; overflow: hidden; width: 100%; height: var(--h, 320px);
  border-radius: var(--ui-radius); background: var(--ui-subtle); color: #fff; font: 15px/1.5 var(--ui-font);
}
.ui-cover-image-sm { --h: 220px; }
.ui-cover-image-lg { --h: 440px; }
.ui-cover-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ui-cover-image-top img { object-position: top; }
.ui-cover-image-bottom img { object-position: bottom; }
.ui-cover-image-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, var(--shade, .7)) 0%, rgba(0, 0, 0, calc(var(--shade, .7) * .4)) 45%, transparent 80%); }
.ui-cover-image-text { position: relative; display: grid; gap: 6px; padding: 28px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.ui-cover-image-center .ui-cover-image-text { justify-items: center; text-align: center; }
.ui-cover-image-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ui-cover-image-title { margin: 0; font-size: clamp(22px, 4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.ui-cover-image-subtitle { margin: 0; font-size: 16px; opacity: .92; }
.ui-cover-image-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ui-cover-image-sm .ui-cover-image-text { padding: 20px; }
.ui-cover-image-sm .ui-cover-image-title { font-size: 22px; }


.ui-spotlight-tour-host { display: contents; }
.ui-spotlight-tour {
  box-sizing: border-box; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: transparent; color: var(--ui-fg); font: 14px/1.5 var(--ui-font);
}
.ui-spotlight-tour::backdrop { background: transparent; }
.ui-spotlight-tour-hole {
  position: fixed; border-radius: var(--ui-radius); pointer-events: none;
  box-shadow: 0 0 0 3px var(--ui-accent), 0 0 0 200vmax var(--ui-overlay);
  transition: left .25s, top .25s, width .25s, height .25s;
}
.ui-spotlight-tour-hole-none { left: 50%; top: 50%; width: 0; height: 0; box-shadow: 0 0 0 200vmax var(--ui-overlay); }
.ui-spotlight-tour-card {
  position: fixed; box-sizing: border-box; width: min(320px, calc(100vw - 24px)); padding: 16px 18px 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
  animation: ui-spotlight-tour-in .18s ease-out;
}
.ui-spotlight-tour-card-mid { left: 50%; top: 50%; translate: -50% -50%; }
@keyframes ui-spotlight-tour-in { from { opacity: 0; } }
.ui-spotlight-tour-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ui-spotlight-tour-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-spotlight-tour-card p { margin: 0; color: var(--ui-muted); }
.ui-spotlight-tour-x {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: -4px -8px 0 0; padding: 0; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-spotlight-tour-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-spotlight-tour-x svg { width: 16px; height: 16px; }
.ui-spotlight-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ui-spotlight-tour-count { flex: 1; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-spotlight-tour-dots { display: flex; gap: 4px; margin-right: 6px; }
.ui-spotlight-tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-strong); }
.ui-spotlight-tour-dots .ui-spotlight-tour-dot-on { background: var(--ui-accent); }
.ui-spotlight-tour-btn {
  height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-spotlight-tour-btn:hover { background: var(--ui-subtle); }
.ui-spotlight-tour-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-spotlight-tour-next { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-spotlight-tour-next:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-spotlight-tour-btn:focus-visible, .ui-spotlight-tour-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-spotlight-tour-hole { transition: none; } .ui-spotlight-tour-card { animation: none; } }


.ui-slide-over-root { display: contents; }
.ui-slide-over-open {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 46px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1.2 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-slide-over-open[aria-expanded="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-slide-over-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-slide-over { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; font: 15px/1.5 var(--ui-font); }
.ui-slide-over-panel {
  position: absolute; top: max(12px, env(safe-area-inset-top)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--ui-slide-over-kb, 0px));
  left: calc(100% - var(--ui-slide-over-w) - 12px - env(safe-area-inset-right)); display: flex; flex-direction: column; box-sizing: border-box; width: var(--ui-slide-over-w);
  overflow: hidden; pointer-events: auto; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg);
  transition: left .26s cubic-bezier(.2, .8, .2, 1), transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s, bottom .2s;
}
.ui-slide-over-panel[data-edge="left"] { left: calc(12px + env(safe-area-inset-left)); }
.ui-slide-over-panel[data-away="true"] { transform: translateX(calc(100% + 24px)); visibility: hidden; transition: left .26s cubic-bezier(.2, .8, .2, 1), transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
.ui-slide-over-panel[data-edge="left"][data-away="true"] { transform: translateX(calc(-100% - 24px)); }
.ui-slide-over-dragging { transition: none !important; box-shadow: 0 20px 60px rgba(15, 14, 24, .3); }
.ui-slide-over-top {
  display: flex; align-items: center; gap: 2px; flex: none; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 14px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-subtle); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ui-slide-over-dragging .ui-slide-over-top { cursor: grabbing; }
.ui-slide-over-top h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.ui-slide-over-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-slide-over-btn svg { width: 20px; height: 20px; transition: transform .2s; }
.ui-slide-over-panel[data-edge="left"] .ui-slide-over-across svg { transform: rotate(180deg); }
.ui-slide-over-btn:focus-visible, .ui-slide-over-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-slide-over-btn:hover { background: var(--ui-border); color: var(--ui-fg); } }
.ui-slide-over-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ui-slide-over-tab {
  position: absolute; top: 40%; right: 0; display: none; place-items: center; box-sizing: border-box; width: 44px; height: 88px; padding: 0 0 0 6px; border: 1px solid var(--ui-border); border-right: 0;
  border-radius: 14px 0 0 14px; background: var(--ui-surface); color: var(--ui-muted); box-shadow: var(--ui-shadow); pointer-events: auto; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.ui-slide-over-tab[data-edge="left"] { right: auto; left: 0; padding: 0 6px 0 0; border-width: 1px 1px 1px 0; border-radius: 0 14px 14px 0; }
.ui-slide-over-tab[data-away="true"] { display: grid; }
.ui-slide-over-tab span { width: 5px; height: 40px; border-radius: 999px; background: var(--ui-strong); }
@media (prefers-reduced-motion: reduce) { .ui-slide-over-panel, .ui-slide-over-panel[data-away="true"] { transition: none; } .ui-slide-over-btn svg { transition: none; } }


.ui-cflct-open { min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-warning); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-fg); font: 600 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-cflct-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* The page behind stays where it is: a modal dialog does not stop it scrolling on a phone. */
html:has(.ui-cflct[open]) { overflow: hidden; }
.ui-cflct { position: fixed; inset: auto 0 0 0; box-sizing: border-box; width: 100%; max-width: none; max-height: 92dvh; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: 16px 16px 0 0; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.4 var(--ui-font); transition: transform .2s ease; }
.ui-cflct[open] { display: flex; flex-direction: column; animation: ui-cflct-in .22s ease-out; }
.ui-cflct::backdrop { background: var(--ui-overlay); }
@keyframes ui-cflct-in { from { transform: translateY(100%); } }
.ui-cflct-grab { flex: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; border-bottom: 1px solid var(--ui-border); }
.ui-cflct-grip { display: block; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 999px; background: var(--ui-strong); }
.ui-cflct-head { display: flex; align-items: center; gap: 8px; padding: 2px 8px 4px 16px; }
.ui-cflct-head h2 { flex: 1; margin: 0; font-size: 17px; }
.ui-cflct-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-cflct-x svg { width: 22px; height: 22px; }
.ui-cflct-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cflct-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 14px; align-content: start; padding: 14px 16px; container-type: inline-size; }
.ui-cflct-intro { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-cflct-row { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-cflct-row legend { padding: 0; font-weight: 600; }
.ui-cflct-why { margin: 2px 0 0; color: var(--ui-muted); font-size: 14px; }
.ui-cflct-opts { display: grid; gap: 8px; min-width: 0; }
.ui-cflct-opt { position: relative; display: grid; gap: 2px; min-height: 48px; padding: 10px 12px 10px 42px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer; touch-action: manipulation; }
.ui-cflct-opt:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-cflct-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-cflct-opt input { position: absolute; left: 12px; top: 13px; width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }
.ui-cflct-side { color: var(--ui-muted); font-size: 13px; }
.ui-cflct-value { overflow-wrap: anywhere; white-space: pre-wrap; }
.ui-cflct-value mark { border-radius: 2px; background: var(--ui-warning-soft); color: inherit; }
.ui-cflct-none { color: var(--ui-muted); font-style: italic; }
.ui-cflct-auto { color: var(--ui-muted); font-size: 14px; }
/* A list item, or it loses the arrow that says it opens. */
.ui-cflct-auto summary { box-sizing: border-box; min-height: 44px; padding: 12px 0; cursor: pointer; }
.ui-cflct-auto ul { margin: 0; padding: 0 0 0 18px; }
.ui-cflct-foot { flex: none; display: grid; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ui-border); }
.ui-cflct-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ui-cflct-btn { min-height: 46px; padding: 4px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1.2 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-cflct-save { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 15px; font-weight: 600; }
.ui-cflct-save[aria-disabled="true"] { opacity: .6; }
.ui-cflct-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cflct-note { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-cflct-note[data-bad] { color: var(--ui-danger); }
@media (hover: hover) { .ui-cflct-btn:hover, .ui-cflct-x:hover { background: var(--ui-subtle); } .ui-cflct-save:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); } }
@container (min-width: 520px) {
  .ui-cflct-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .ui-cflct { inset: 0; width: min(760px, 92vw); max-height: 86dvh; margin: auto; padding: 0; border-radius: var(--ui-radius); }
  .ui-cflct[open] { animation: none; }
  .ui-cflct-grab { touch-action: auto; cursor: auto; }
  .ui-cflct-grip { display: none; }
  .ui-cflct-head { padding-top: 6px; }
  .ui-cflct-foot { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .ui-cflct-all { grid-template-columns: repeat(2, auto); }
}
@media (prefers-reduced-motion: reduce) { .ui-cflct { transition: none; } .ui-cflct[open] { animation: none; } }


.ui-upgp-wrap { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); pointer-events: none; }
.ui-upgp-wrap[data-place="top"] { top: 0; bottom: auto; padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
.ui-upgp-wrap[data-place="inline"] { position: relative; padding: 0; }
.ui-upgp { container-type: inline-size; box-sizing: border-box; width: 100%; max-width: 520px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.4 var(--ui-font); pointer-events: auto; animation: ui-upgp-in .2s ease-out; }
.ui-upgp-wrap[data-place="inline"] .ui-upgp { box-shadow: none; animation: none; }
.ui-upgp-in { display: grid; gap: 10px; padding: 12px; }
.ui-upgp-title { margin: 0; font-weight: 600; }
.ui-upgp-text { margin: 2px 0 0; color: var(--ui-muted); font-size: 14px; }
.ui-upgp-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ui-upgp-btn { min-width: 84px; min-height: 46px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-upgp-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-upgp-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-upgp-back { margin: 0; color: var(--ui-muted); font: 14px/1.4 var(--ui-font); }
@keyframes ui-upgp-in { from { transform: translateY(12px); opacity: 0; } }
@media (hover: hover) { .ui-upgp-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); } .ui-upgp-go:hover { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); } }
@media (prefers-reduced-motion: reduce) { .ui-upgp { animation: none; } }
@container (min-width: 440px) {
  .ui-upgp-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}


.ui-dash { display: grid; gap: var(--ui-dash-gap, 16px); grid-template-columns: repeat(var(--ui-dash-cols, 12), minmax(0, 1fr)); grid-auto-rows: auto; }
.ui-dash-cell { display: grid; min-width: 0; grid-column: span min(var(--c, 4), var(--ui-dash-cols, 12)); grid-row: span var(--r, 1); }
.ui-dash-cell > * { min-width: 0; }
@media (max-width: 899px) {
  .ui-dash { grid-template-columns: repeat(max(1, calc(var(--ui-dash-cols, 12) / 2)), minmax(0, 1fr)); }
  .ui-dash-cell { grid-column: span max(1, min(round(var(--c, 4) / 2), calc(var(--ui-dash-cols, 12) / 2))); }
}
@media (max-width: 599px) {
  .ui-dash { grid-template-columns: minmax(0, 1fr); }
  .ui-dash-cell { grid-column: 1 / -1; grid-row: auto; }
}


.ui-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
span.ui-truncate { display: inline-block; vertical-align: bottom; }
.ui-truncate-mid { display: flex; }
span.ui-truncate-mid { display: inline-flex; }
.ui-truncate-head { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-truncate-tail { flex: none; white-space: nowrap; }


.ui-number-input { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-number-input-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-number-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-number-input-box {
  display: flex; align-items: stretch; height: 38px; width: 180px; max-width: 100%;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.ui-number-input-box:hover { border-color: var(--ui-strong); }
.ui-number-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-number-input-box input {
  flex: 1; min-width: 0; padding: 0 8px; border: 0; outline: none; background: transparent;
  color: var(--ui-fg); font: 14px var(--ui-font); text-align: center; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.ui-number-input-box input::-webkit-inner-spin-button, .ui-number-input-box input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ui-number-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-number-input-step {
  flex: none; width: 36px; border: 0; background: var(--ui-subtle); color: var(--ui-fg);
  font: 500 16px/1 var(--ui-font); cursor: pointer; transition: background .15s, color .15s;
}
.ui-number-input-step:first-child { border-right: 1px solid var(--ui-border); }
.ui-number-input-step:last-child { border-left: 1px solid var(--ui-border); }
.ui-number-input-step:hover:not(:disabled) { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-number-input-step:disabled { color: var(--ui-muted); opacity: .5; cursor: not-allowed; }
.ui-number-input-sm .ui-number-input-box { height: 30px; width: 140px; }
.ui-number-input-sm .ui-number-input-box input { font-size: 13px; }
.ui-number-input-sm .ui-number-input-step { width: 28px; font-size: 14px; }
.ui-number-input-invalid .ui-number-input-box, .ui-number-input-invalid .ui-number-input-box:hover { border-color: var(--ui-danger); }
.ui-number-input-invalid .ui-number-input-box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.ui-number-input-hint, .ui-number-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-number-input-error { color: var(--ui-danger); }
.ui-number-input-disabled { opacity: .55; }
.ui-number-input-disabled .ui-number-input-box:hover { border-color: var(--ui-border); }
.ui-number-input-disabled input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-number-input-box, .ui-number-input-step { transition: none; } }


.ui-fab {
  position: fixed; z-index: 40; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 999px; background: var(--b); color: var(--bf);
  box-shadow: var(--ui-shadow-lg); font: 600 15px/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  --b: var(--ui-accent); --bf: var(--ui-accent-fg);
}
.ui-fab-bottom-right { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
.ui-fab-bottom-left { left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); }
.ui-fab-top-right { right: max(20px, env(safe-area-inset-right)); top: max(20px, env(safe-area-inset-top)); }
.ui-fab-top-left { left: max(20px, env(safe-area-inset-left)); top: max(20px, env(safe-area-inset-top)); }
.ui-fab-inline { position: absolute; z-index: 2; }
.ui-fab-inline.ui-fab-bottom-right { right: 16px; bottom: 16px; }
.ui-fab-inline.ui-fab-bottom-left { left: 16px; bottom: 16px; }
.ui-fab-inline.ui-fab-top-right { right: 16px; top: 16px; }
.ui-fab-inline.ui-fab-top-left { left: 16px; top: 16px; }
.ui-fab-neutral { --b: var(--ui-fg); --bf: var(--ui-bg); }
.ui-fab-danger { --b: var(--ui-danger); --bf: #fff; }
.ui-fab:hover { background: color-mix(in srgb, var(--b) 88%, var(--ui-fg)); transform: translateY(-1px); }
.ui-fab:active { transform: none; }
.ui-fab:focus-visible { outline: none; box-shadow: var(--ui-shadow-lg), var(--ui-focus); }
.ui-fab[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ui-fab svg { flex: none; width: 24px; height: 24px; }
.ui-fab-extended { width: auto; padding: 0 20px 0 16px; }
.ui-fab-sm { width: 44px; height: 44px; font-size: 14px; }
.ui-fab-sm svg { width: 20px; height: 20px; }
.ui-fab-sm.ui-fab-extended { padding: 0 16px 0 12px; }
.ui-fab-lg { width: 68px; height: 68px; font-size: 16px; }
.ui-fab-lg svg { width: 28px; height: 28px; }
.ui-fab-lg.ui-fab-extended { padding: 0 26px 0 20px; }
@media (prefers-reduced-motion: reduce) { .ui-fab { transition: none; } .ui-fab:hover { transform: none; } }


.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  font: 500 14px/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  --b: var(--ui-accent); --bf: var(--ui-accent-fg); --bs: var(--ui-accent-soft);
}
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ui-btn-neutral { --b: var(--ui-fg); --bf: var(--ui-bg); --bs: var(--ui-subtle); }
.ui-btn-danger { --b: var(--ui-danger); --bf: #fff; --bs: var(--ui-danger-soft); }
.ui-btn-solid { background: var(--b); color: var(--bf); }
.ui-btn-solid:hover { background: color-mix(in srgb, var(--b) 88%, var(--ui-fg)); }
.ui-btn-soft { background: var(--bs); color: var(--b); }
.ui-btn-soft:hover { background: color-mix(in srgb, var(--bs) 80%, var(--b)); }
.ui-btn-outline { background: transparent; color: var(--b); border-color: var(--ui-border); }
.ui-btn-outline:hover { border-color: var(--b); background: var(--bs); }
.ui-btn-ghost { background: transparent; color: var(--b); }
.ui-btn-ghost:hover { background: var(--bs); }
.ui-btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }
.ui-btn-lg { height: 46px; padding: 0 22px; font-size: 16px; }
.ui-btn-full { display: flex; width: 100%; }
.ui-btn-spin { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-btn-spin .7s linear infinite; }
@keyframes ui-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-btn-spin { animation-duration: 2s; } }


.ui-obook { display: grid; gap: 8px; min-width: 0; font: 13px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-obook-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 12px; }
.ui-obook-name { margin-right: auto; font-weight: 600; color: var(--ui-fg); font-size: 13px; }
.ui-obook-steps { display: inline-flex; padding: 2px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-obook-steps button { height: 24px; min-width: 38px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--ui-muted);
  font: 500 12px/1 var(--ui-font); font-variant-numeric: tabular-nums; cursor: pointer; }
.ui-obook-steps button:hover { color: var(--ui-fg); }
.ui-obook-steps button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ui-obook-steps button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-obook-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--ui-border); background: var(--ui-surface); font-variant-numeric: tabular-nums; }
.ui-obook-table th, .ui-obook-table td { padding: 3px 10px; text-align: right; white-space: nowrap; }
.ui-obook-table thead th { padding: 6px 10px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; }
.ui-obook-table th:first-child, .ui-obook-table td:first-child { text-align: left; }
.ui-obook-ask { --k: var(--ui-danger); } .ui-obook-bid { --k: var(--ui-success); }
/* The total's bar runs from the right across the three equal columns: each cell draws its part. */
.ui-obook-row > * { --f: color-mix(in srgb, var(--k) 14%, transparent);
  background: linear-gradient(to left, var(--f) var(--p), transparent var(--p)); }
.ui-obook-row > :nth-child(3) { --p: clamp(0%, calc(var(--w) * 3), 100%); }
.ui-obook-row > :nth-child(2) { --p: clamp(0%, calc(var(--w) * 3 - 100%), 100%); }
.ui-obook-row > :nth-child(1) { --p: clamp(0%, calc(var(--w) * 3 - 200%), 100%); }
.ui-obook-row th { color: var(--k); font-weight: 600; }
.ui-obook-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent); }
.ui-obook-total { color: var(--ui-muted); }
.ui-obook-mid td { padding: 7px 10px; border-block: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-obook-mid b { font-size: 15px; font-weight: 650; }
.ui-obook-mid span { margin-left: 10px; color: var(--ui-muted); font-size: 12px; }
.ui-obook-grew td, .ui-obook-grew th { animation: ui-obook-grew .9s ease-out; }
.ui-obook-shrank td, .ui-obook-shrank th { animation: ui-obook-shrank .9s ease-out; }
@keyframes ui-obook-grew { from { background: color-mix(in srgb, var(--ui-success) 35%, transparent); } }
@keyframes ui-obook-shrank { from { background: color-mix(in srgb, var(--ui-danger) 35%, transparent); } }
.ui-obook-empty td { color: var(--ui-muted); text-align: center !important; }
@media (prefers-reduced-motion: reduce) { .ui-obook-grew td, .ui-obook-grew th, .ui-obook-shrank td, .ui-obook-shrank th { animation: none; } }


.ui-status-tint { display: contents; }
.ui-status-tint-probe { background-color: var(--ui-bg); }
.ui-status-tint-note { display: block; margin: 0; color: var(--ui-muted); font: 13px/1.5 var(--ui-font); }


.ui-pinstep-host { display: contents; }
.ui-pinstep {
  box-sizing: border-box; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: max(10px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom)); border: 0;
  overflow: hidden; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); overscroll-behavior: contain;
}
.ui-pinstep[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.ui-pinstep::backdrop { background: var(--ui-overlay); }
html:has(.ui-pinstep[open]) { overflow: hidden; }
.ui-pinstep-top { display: grid; align-content: start; gap: 6px; min-height: 0; }
.ui-pinstep-top h2 { margin: 0; font-size: 19px; line-height: 1.25; text-align: center; outline: none; }
.ui-pinstep-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-pinstep-facts dt { color: var(--ui-muted); }
.ui-pinstep-facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-pinstep-warn { margin: 0; color: var(--ui-warning); font-size: 13px; text-align: center; }
.ui-pinstep-mid { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 0; }
.ui-pinstep-dots { display: flex; gap: 12px; padding: 6px; }
.ui-pinstep-dots i { width: 14px; height: 14px; border: 2px solid var(--ui-strong); border-radius: 50%; }
.ui-pinstep-dots i.ui-pinstep-dot-on { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-pinstep-wrong .ui-pinstep-dots { animation: ui-pinstep-shake .3s; }
@keyframes ui-pinstep-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.ui-pinstep-said { min-height: 20px; margin: 0; color: var(--ui-muted); font-size: 14px; text-align: center; }
.ui-pinstep-bad { color: var(--ui-danger); font-weight: 600; }
.ui-pinstep-clock { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.ui-pinstep-low { color: var(--ui-warning); font-weight: 600; }
.ui-pinstep-end { display: grid; justify-items: center; gap: 10px; text-align: center; }
.ui-pinstep-end h3 { margin: 0; font-size: 19px; }
.ui-pinstep-end p { margin: 0; color: var(--ui-muted); }
.ui-pinstep-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); justify-content: center; gap: 8px 14px; margin: 0 auto; width: 100%; }
.ui-pinstep-pad[hidden] { display: none; }
.ui-pinstep-key {
  height: clamp(44px, 9.5dvh, 68px); padding: 0; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 600 24px/1 var(--ui-font); font-variant-numeric: tabular-nums;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-pinstep-key:active { background: var(--ui-accent-soft); }
.ui-pinstep-key:disabled { opacity: .4; cursor: default; }
.ui-pinstep-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pinstep-del { border-color: transparent; background: transparent; }
.ui-pinstep-foot { display: flex; justify-content: center; }
/* Sideways on a phone there is no height for a pad under the rest: they stand side by side. */
@media (orientation: landscape) and (max-height: 520px) {
  .ui-pinstep[open] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; }
  .ui-pinstep-top { overflow-y: auto; }
  .ui-pinstep-mid { grid-column: 1; grid-row: 2; }
  .ui-pinstep-pad { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ui-pinstep-key { height: clamp(44px, 20dvh, 56px); }
  .ui-pinstep-foot { grid-column: 1; }
}
/* A tablet's screen is not filled: it is a dialog in the middle. */
@media (min-width: 600px) and (min-height: 600px) {
  .ui-pinstep { inset: 0; width: min(440px, 92vw); height: auto; max-height: min(92dvh, 760px); margin: auto; padding: 22px 26px; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px); box-shadow: var(--ui-shadow-lg); }
  .ui-pinstep[open] { grid-template-rows: auto auto auto; gap: 14px; }
}
@media (hover: hover) { .ui-pinstep-key:hover:not(:disabled) { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-pinstep-wrong .ui-pinstep-dots { animation: none; } }


.ui-story-viewer-host { display: contents; }
.ui-story-viewer-open {
  min-height: 46px; padding: 0 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 15px var(--ui-font); cursor: pointer;
}
.ui-story-viewer-open:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-story-viewer-open:disabled { opacity: .55; cursor: default; }
.ui-story-viewer {
  position: fixed; inset: 0; z-index: 40; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0;
  background: rgba(0, 0, 0, var(--ui-story-viewer-dim, 1)); color: #fff; font: 15px/1.4 var(--ui-font); container-type: size; overscroll-behavior: contain;
}
.ui-story-viewer::backdrop { background: #000; }
.ui-story-viewer[open] { display: grid; grid-template-columns: 1fr; place-items: center; }
.ui-story-viewer-stage {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; touch-action: none; background: #111; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1);
}
.ui-story-viewer-dragging { transition: none; }
.ui-story-viewer-media { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ui-story-viewer-bg, #111); }
.ui-story-viewer-media img, .ui-story-viewer-media video { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.ui-story-viewer-words { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.ui-story-viewer-broken { padding: 20px; text-align: center; }
.ui-story-viewer-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: max(10px, env(safe-area-inset-top)) 10px 18px; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent); transition: opacity .15s .22s;
}
.ui-story-viewer-held .ui-story-viewer-top { opacity: 0; }
.ui-story-viewer-bars { display: flex; gap: 3px; }
.ui-story-viewer-seg { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .38); }
.ui-story-viewer-seg i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
:dir(rtl).ui-story-viewer-seg i { transform-origin: 100% 50%; }
.ui-story-viewer-seg-done i { transform: scaleX(1) !important; }
.ui-story-viewer-seg-todo i { transform: scaleX(0) !important; }
.ui-story-viewer-who { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; }
.ui-story-viewer-who img, .ui-story-viewer-who > i { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .25); font: 600 13px/34px var(--ui-font); text-align: center; }
.ui-story-viewer-who b { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-story-viewer-who small { flex: none; opacity: .8; font-size: 13px; }
.ui-story-viewer-who span { flex: 1; }
.ui-story-viewer-btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; pointer-events: auto;
}
.ui-story-viewer-btn svg { width: 24px; height: 24px; }
.ui-story-viewer-btn:focus-visible { outline: 2px solid #fff; }
.ui-story-viewer-zone { position: absolute; top: 0; bottom: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-story-viewer-zone:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -4px; }
.ui-story-viewer-back { inset-inline-start: 0; width: 33%; }
.ui-story-viewer-next { inset-inline-end: 0; width: 67%; }
.ui-story-viewer-ahead { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.ui-story-viewer-arrow { display: none; }
/* A tablet shows a story at its own shape, with the next and last person's arrows in the room beside it. */
@container (min-width: 600px) {
  .ui-story-viewer-stage { width: min(100cqw - 140px, 56.25cqh); height: min(100cqh, (100cqw - 140px) * 1.778); border-radius: 12px; }
  .ui-story-viewer-arrow { position: absolute; top: 50%; z-index: 4; display: grid; margin-top: -22px; }
  .ui-story-viewer-arrow-back { inset-inline-start: 12px; }
  .ui-story-viewer-arrow-next { inset-inline-end: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ui-story-viewer-stage, .ui-story-viewer-top { transition: none; } }


.ui-rcptshare { display: grid; gap: 14px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-rcptshare-lay { display: grid; gap: 14px; min-width: 0; }
.ui-rcptshare-paper { box-sizing: border-box; display: grid; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-rcptshare-paper h3 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.ui-rcptshare-status { margin: 0; color: var(--ui-success); font-weight: 600; }
.ui-rcptshare-facts, .ui-rcptshare-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; margin: 0; }
.ui-rcptshare-facts dt { color: var(--ui-muted); }
.ui-rcptshare-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.ui-rcptshare-lines { padding-top: 8px; border-top: 1px solid var(--ui-border); }
.ui-rcptshare-lines dt { overflow-wrap: anywhere; }
.ui-rcptshare-lines dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.ui-rcptshare-total { display: flex; justify-content: space-between; gap: 14px; margin: 0; padding-top: 8px; border-top: 2px solid var(--ui-fg); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-rcptshare-warn { margin: 0; color: var(--ui-danger); font-weight: 600; }
.ui-rcptshare-pic { display: none; min-width: 0; margin: 0; }
.ui-rcptshare-pic-on { display: block; }
.ui-rcptshare-pic img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); -webkit-touch-callout: default; }
.ui-rcptshare-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-rcptshare-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-rcptshare-copy { box-sizing: border-box; width: 100%; min-height: 150px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.35 var(--ui-font); }
.ui-rcptshare-save { display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; color: var(--ui-accent); font-weight: 600; }
.ui-rcptshare-canvas { display: none; }
@container (min-width: 600px) {
  .ui-rcptshare-lay { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; gap: 24px; }
  .ui-rcptshare-pic { display: block; }
  .ui-rcptshare-eye { display: none; }
}


.ui-bq { margin: 0; font: 16px/1.6 var(--ui-font); color: var(--ui-fg); }
.ui-bq blockquote { margin: 0; overflow-wrap: anywhere; }
.ui-bq blockquote > :first-child { margin-top: 0; }
.ui-bq blockquote > :last-child { margin-bottom: 0; }
.ui-bq-bar blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--ui-accent); }
.ui-bq-bar .ui-bq-by { padding-left: 19px; }
.ui-bq-marks { position: relative; padding-left: 36px; }
.ui-bq-marks::before { content: "“"; position: absolute; top: -.1em; left: 0; font-size: 3.2em; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; color: var(--ui-accent); opacity: .7; }
.ui-bq-plain blockquote { font-style: italic; }
.ui-bq-lg { font-size: 19px; line-height: 1.5; }
.ui-bq-by { margin: 8px 0 0; font-size: 14px; color: var(--ui-muted); }
.ui-bq-by::before { content: "— "; }
.ui-bq-by cite { font-style: normal; }
.ui-bq-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ui-bq-by a:hover { color: var(--ui-accent); }
.ui-bq-by a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }


.ui-image {
  position: relative; display: block; overflow: hidden; width: 100%; background: var(--ui-image-color, var(--ui-subtle));
  border-radius: var(--ui-radius); color: var(--ui-muted); font: 13px/1.4 var(--ui-font);
}
.ui-image-ratio { aspect-ratio: var(--r); }
.ui-image-sharp { border-radius: 0; }
.ui-image img { display: block; width: 100%; height: auto; object-fit: cover; opacity: 1; transition: opacity .3s; }
.ui-image-ratio img { height: 100%; }
.ui-image-contain img { object-fit: contain; }
.ui-image[data-state="loading"] img { opacity: 0; }
.ui-image[data-state="loading"]::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  background-size: 250% 100%; animation: ui-image-shimmer 1.4s linear infinite;
}
@keyframes ui-image-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.ui-image[data-state="error"] img { display: none; }
.ui-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; padding: 12px; text-align: center; }
.ui-image-fallback svg { width: 28px; height: 28px; opacity: .6; }
.ui-image:not(.ui-image-ratio)[data-state="error"] { min-height: 120px; }
@media (prefers-reduced-motion: reduce) { .ui-image[data-state="loading"]::after { animation: none; } .ui-image img { transition: none; } }


.ui-terminal { min-width: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg);
  color: var(--ui-fg); font: 13px/1.6 var(--ui-mono); box-shadow: var(--ui-shadow); }
.ui-terminal-bar { position: relative; display: flex; align-items: center; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface); }
.ui-terminal-dots { display: flex; gap: 6px; }
.ui-terminal-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--ui-danger); }
.ui-terminal-dots i:nth-child(2) { background: var(--ui-warning); }
.ui-terminal-dots i:nth-child(3) { background: var(--ui-success); }
.ui-terminal-title { position: absolute; left: 70px; right: 70px; overflow: hidden; color: var(--ui-muted); font: 500 12px/1 var(--ui-font);
  text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ui-terminal-body { margin: 0; padding: 12px 16px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: inherit; }
.ui-terminal-body:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-terminal-line { display: block; min-height: 1.6em; }
.ui-terminal-prompt { color: var(--ui-accent); font-weight: 700; user-select: none; -webkit-user-select: none; }
.ui-terminal-cmd { color: var(--ui-fg); font-weight: 600; }
.ui-terminal-out { color: color-mix(in srgb, var(--ui-fg) 78%, var(--ui-bg)); }
.ui-terminal-err { color: var(--ui-danger); }
.ui-terminal-ok { color: var(--ui-success); }
.ui-terminal-note { color: var(--ui-muted); font-style: italic; }


.ui-sticky { position: sticky; top: var(--ui-sticky-top, 0); z-index: var(--ui-sticky-z, 5); min-width: 0; }
.ui-sticky-bottom { top: auto; bottom: var(--ui-sticky-bottom, 0); }


.ui-rangec {
  --ui-rangec-1: light-dark(#2a78d6, #3987e5); --ui-rangec-2: light-dark(#eb6834, #d95926);
  --ui-rangec-3: light-dark(#1baf7a, #199e70); --ui-rangec-4: light-dark(#eda100, #c98500);
  --ui-rangec-5: light-dark(#e87ba4, #d55181); --ui-rangec-6: light-dark(#008300, #008300);
  --ui-rangec-7: light-dark(#6250d6, #9085e9); --ui-rangec-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-rangec-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-rangec-s1 { --c: var(--ui-rangec-1); } .ui-rangec-s2 { --c: var(--ui-rangec-2); } .ui-rangec-s3 { --c: var(--ui-rangec-3); }
.ui-rangec-s4 { --c: var(--ui-rangec-4); } .ui-rangec-s5 { --c: var(--ui-rangec-5); } .ui-rangec-s6 { --c: var(--ui-rangec-6); }
.ui-rangec-s7 { --c: var(--ui-rangec-7); } .ui-rangec-s8 { --c: var(--ui-rangec-8); }
.ui-rangec-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-rangec-y { position: relative; min-width: 24px; }
.ui-rangec-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-rangec-plot { position: relative; }
.ui-rangec-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-rangec-grid.ui-rangec-zero { background: var(--ui-strong); }
.ui-rangec-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-rangec-area { fill: var(--c); opacity: .22; stroke: none; }
.ui-rangec-edge { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: .7; stroke-linejoin: round; }
.ui-rangec-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-rangec-cols { position: absolute; inset: 0; display: flex; }
.ui-rangec-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-rangec-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-rangec-bar { position: absolute; left: 50%; bottom: var(--a); height: var(--b); min-height: 2px; width: min(46%, 22px);
  border-radius: 999px; background: var(--c); transform: translateX(-50%); }
.ui-rangec-mark { position: absolute; left: 50%; bottom: var(--a); width: min(46%, 22px); height: 0;
  border-top: 2px solid var(--ui-bg); transform: translate(-50%, 50%); }
.ui-rangec-dot { position: absolute; left: 50%; bottom: var(--a); display: none; width: 8px; height: 8px; margin: 0 0 -4px -4px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-rangec-col:hover .ui-rangec-dot { display: block; }
.ui-rangec-col:hover .ui-rangec-bar { filter: brightness(1.1); }
.ui-rangec-val { position: absolute; left: 50%; bottom: calc(var(--a) + 4px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-rangec-val.ui-rangec-under { bottom: auto; top: calc(100% - var(--a) + 4px); }
.ui-rangec-x { display: flex; margin-top: 6px; }
.ui-rangec-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-rangec-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-rangec-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-rangec-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-rangec-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-rangec-tip { top: 0; left: 50%; transform: translate(-50%, -100%); }
.ui-rangec-col:first-child .ui-rangec-tip { left: 0; transform: translateY(-100%); }
.ui-rangec-col:last-child .ui-rangec-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-rangec-col:hover .ui-rangec-tip { display: block; }


.ui-bstat { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-bstat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-bstat .ui-bstat-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-bstat-title a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-bstat-title a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bstat-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bstat-period { color: var(--ui-muted); font-size: 13px; }
.ui-bstat-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.ui-bstat-kpi { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-bstat-kpi dt { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-bstat-kpi dd { margin: 0; }
.ui-bstat-value { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ui-bstat-change { font-size: 12px; font-weight: 600; color: var(--ui-muted); }
.ui-bstat-up { color: var(--ui-success); } .ui-bstat-down { color: var(--ui-danger); }
.ui-bstat-chart { display: grid; gap: 6px; margin: 0; }
.ui-bstat-plot { position: relative; padding-left: 40px; }
.ui-bstat-max { position: absolute; top: -6px; left: 0; color: var(--ui-muted); font-size: 11px; }
.ui-bstat-zero { position: absolute; bottom: -6px; left: 0; color: var(--ui-muted); font-size: 11px; }
.ui-bstat-bars { display: block; width: 100%; height: 120px; border-bottom: 1px solid var(--ui-border); }
.ui-bstat-bars .ui-bstat-views { fill: color-mix(in srgb, var(--ui-accent) 28%, transparent); }
.ui-bstat-bars .ui-bstat-reads { fill: var(--ui-accent); }
.ui-bstat-bars g:hover .ui-bstat-views { fill: color-mix(in srgb, var(--ui-accent) 45%, transparent); }
.ui-bstat-axis { display: flex; justify-content: space-between; padding-left: 40px; color: var(--ui-muted); font-size: 11px; }
.ui-bstat-key { display: flex; gap: 14px; margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-bstat-key span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px;
  background: color-mix(in srgb, var(--ui-accent) 28%, transparent); }
.ui-bstat-key span + span::before { background: var(--ui-accent); }
.ui-bstat .ui-bstat-sub { margin: 0 0 8px; color: var(--ui-muted); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.ui-bstat-refs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-bstat-ref { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline; }
.ui-bstat-ref a { color: var(--ui-fg); text-decoration: none; border-radius: 3px; }
.ui-bstat-ref a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bstat-ref a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bstat-ref b { font-weight: 600; }
.ui-bstat-ref small { margin-left: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-bstat-track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--ui-subtle); }
.ui-bstat-track span { display: block; height: 100%; border-radius: 3px; background: var(--ui-accent); }
.ui-bstat-social { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--ui-border); color: var(--ui-muted); }
.ui-bstat-social b { color: var(--ui-fg); font-weight: 650; }


.ui-fxwallet { display: grid; gap: 0; min-width: 0; max-width: 620px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); font-variant-numeric: tabular-nums; overflow: hidden; }
.ui-fxwallet-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; padding: 18px 18px 16px;
  border-bottom: 1px solid var(--ui-border); }
.ui-fxwallet .ui-fxwallet-title { margin: 0; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-fxwallet-total { margin: 2px 0 0; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.ui-fxwallet-sub { margin: 2px 0 0; color: var(--ui-muted); font-size: 12px; }
.ui-fxwallet-actions { display: flex; gap: 8px; }
.ui-fxwallet-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); text-decoration: none; }
.ui-fxwallet-btn svg { width: 14px; height: 14px; }
.ui-fxwallet-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-fxwallet-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fxwallet-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-fxwallet-primary:hover { color: var(--ui-accent-fg); filter: brightness(1.08); }
.ui-fxwallet-list { margin: 0; padding: 0; list-style: none; }
.ui-fxwallet-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 18px; }
.ui-fxwallet-item:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-fxwallet-flag { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-subtle); font-size: 18px; }
.ui-fxwallet-flag small { font-size: 10px; font-weight: 700; color: var(--ui-muted); }
.ui-fxwallet-name b { font-weight: 650; }
.ui-fxwallet-name small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-fxwallet-amount { text-align: right; }
.ui-fxwallet-amount b { display: block; font-size: 15px; font-weight: 650; }
.ui-fxwallet-amount small { color: var(--ui-muted); font-size: 12px; }
.ui-fxwallet-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.ui-fxwallet-share { flex: 1; min-width: 80px; max-width: 220px; height: 4px; border-radius: 2px; background: var(--ui-subtle); overflow: hidden; }
.ui-fxwallet-share span { display: block; height: 100%; border-radius: 2px; background: var(--ui-accent); }
.ui-fxwallet-links { display: flex; gap: 12px; font-size: 13px; }
.ui-fxwallet-links a { color: var(--ui-accent); font-weight: 500; text-decoration: none; }
.ui-fxwallet-links a:hover { text-decoration: underline; }
.ui-fxwallet-links a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-fxwallet-none { color: var(--ui-muted); }
.ui-fxwallet-rate { color: var(--ui-muted); font-size: 12px; }


.ui-sankey {
  --ui-sankey-1: light-dark(#2a78d6, #3987e5); --ui-sankey-2: light-dark(#eb6834, #d95926);
  --ui-sankey-3: light-dark(#1baf7a, #199e70); --ui-sankey-4: light-dark(#eda100, #c98500);
  --ui-sankey-5: light-dark(#e87ba4, #d55181); --ui-sankey-6: light-dark(#008300, #008300);
  --ui-sankey-7: light-dark(#6250d6, #9085e9); --ui-sankey-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-sankey-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-sankey-s1 { --c: var(--ui-sankey-1); } .ui-sankey-s2 { --c: var(--ui-sankey-2); } .ui-sankey-s3 { --c: var(--ui-sankey-3); }
.ui-sankey-s4 { --c: var(--ui-sankey-4); } .ui-sankey-s5 { --c: var(--ui-sankey-5); } .ui-sankey-s6 { --c: var(--ui-sankey-6); }
.ui-sankey-s7 { --c: var(--ui-sankey-7); } .ui-sankey-s8 { --c: var(--ui-sankey-8); }
.ui-sankey-wrap { padding: 6px clamp(70px, 16%, 130px) 6px 0; }
.ui-sankey-plot { position: relative; }
.ui-sankey-svg { position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; width: calc(100% - 12px); height: 100%; overflow: visible; }
.ui-sankey-band { fill: var(--c); fill-opacity: .32; stroke: none; transition: fill-opacity .15s ease; }
.ui-sankey-band:hover { fill-opacity: .6; }
.ui-sankey-node { position: absolute; width: 12px; min-height: 2px; border-radius: 2px; background: var(--c); }
.ui-sankey-node:hover { box-shadow: 0 0 0 2px var(--ui-fg); z-index: 5; }
.ui-sankey-name { position: absolute; top: 50%; left: calc(100% + 6px); display: grid; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--ui-bg), 0 0 2px var(--ui-bg); }
.ui-sankey-name b { font-weight: 600; }
.ui-sankey-name span { color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-sankey-tip { position: absolute; z-index: 20; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-sankey-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-sankey-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-sankey-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sankey-tip { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }
.ui-sankey-last .ui-sankey-tip { left: auto; right: calc(100% + 8px); }
.ui-sankey-node:hover .ui-sankey-tip { display: block; }
.ui-sankey-node:hover .ui-sankey-name { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ui-sankey-band { transition: none; } }


.ui-barcode { display: inline-grid; justify-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 6px 0 4px;
  background: var(--ui-surface); color: var(--ui-fg); border-radius: 4px; font: 13px/1.2 var(--ui-mono); }
.ui-barcode svg { display: block; max-width: 100%; }
.ui-barcode figcaption { letter-spacing: .12em; white-space: pre; }


.ui-gradient { display: inline-block; background: linear-gradient(var(--ui-gradient-angle, 90deg), var(--ui-gradient-from), var(--ui-gradient-to));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  --ui-gradient-from: var(--ui-accent); --ui-gradient-to: var(--ui-info); }
p.ui-gradient, div.ui-gradient { display: block; width: fit-content; margin: 0; }
.ui-gradient-sunset { --ui-gradient-from: #f97316; --ui-gradient-to: #ec4899; }
.ui-gradient-ocean { --ui-gradient-from: #0ea5e9; --ui-gradient-to: #6366f1; }
.ui-gradient-forest { --ui-gradient-from: #16a34a; --ui-gradient-to: #0d9488; }
@media (forced-colors: active) { .ui-gradient { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }


.ui-userinput { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-userinput-label { font-size: 13px; font-weight: 500; }
.ui-userinput-req { margin-left: 2px; color: var(--ui-danger); }
.ui-userinput-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-mono);
  transition: border-color .15s, box-shadow .15s; }
.ui-userinput-control:hover { border-color: var(--ui-strong); }
.ui-userinput-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-userinput-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-userinput-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-userinput-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-userinput-rules { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ui-muted); }
.ui-userinput-rule { display: flex; align-items: center; gap: 6px; }
.ui-userinput-rule svg { flex: none; width: 12px; height: 12px; opacity: .35; }
.ui-userinput-rule[data-ok="true"] { color: var(--ui-success); }
.ui-userinput-rule[data-ok="true"] svg { opacity: 1; }
.ui-userinput-rule[data-ok="false"] { color: var(--ui-danger); }
.ui-userinput-out { min-height: 20px; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-userinput-free { color: var(--ui-success); }
.ui-userinput-bad { color: var(--ui-danger); }
.ui-userinput-offers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-userinput-offers-label { color: var(--ui-muted); font-size: 12px; }
.ui-userinput-offer { min-height: 28px; padding: 3px 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg);
  font: 13px/1.3 var(--ui-mono); cursor: pointer; }
.ui-userinput-offer:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-userinput-offer:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-userinput-control { transition: none; } }


.ui-date-time-input { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-date-time-input-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-date-time-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-date-time-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-date-time-input-row input {
  box-sizing: border-box; height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.ui-date-time-input-row input:hover { border-color: var(--ui-strong); }
.ui-date-time-input-row input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-date-time-input-row input:disabled { opacity: .55; cursor: not-allowed; }
.ui-date-time-input-date { width: 160px; }
.ui-date-time-input-time { width: 120px; }
.ui-date-time-input-at { color: var(--ui-muted); font-size: 13px; }
.ui-date-time-input-zone { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; }
.ui-date-time-input-zone svg { width: 12px; height: 12px; }
.ui-date-time-input-invalid .ui-date-time-input-row input { border-color: var(--ui-danger); }
.ui-date-time-input-hint, .ui-date-time-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-date-time-input-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-date-time-input-row input { transition: none; } }


.ui-sitemap { font: 14px/1.6 var(--ui-font); color: var(--ui-fg); }
.ui-sitemap-cols { columns: var(--ui-sitemap-cols, 1); column-gap: 32px; }
.ui-sitemap ul { margin: 0; padding: 0; list-style: none; }
.ui-sitemap ul ul { margin: 2px 0 6px 10px; padding-left: 12px; border-left: 1px solid var(--ui-border); }
.ui-sitemap-cols > ul > li { break-inside: avoid; margin-bottom: 14px; }
.ui-sitemap-cols > ul > li > .ui-sitemap-link, .ui-sitemap-cols > ul > li > .ui-sitemap-text { font-weight: 650; font-size: 15px; }
.ui-sitemap-link, .ui-sitemap-text { display: inline-block; padding: 1px 4px; margin-left: -4px; border-radius: 4px; color: var(--ui-fg); text-decoration: none; }
.ui-sitemap-link { color: var(--ui-muted); }
.ui-sitemap-cols > ul > li > .ui-sitemap-link { color: var(--ui-fg); }
.ui-sitemap-link:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.ui-sitemap-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sitemap-link[aria-current="page"] { color: var(--ui-accent); font-weight: 600; }
@media (max-width: 640px) { .ui-sitemap-cols { columns: 1; } }


.ui-breader { display: grid; gap: 12px; min-width: 0; font-family: var(--ui-font); color: var(--ui-fg); }
.ui-breader-bar { position: relative; display: flex; justify-content: flex-end; }
.ui-breader-toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-breader-toggle b { font-family: Georgia, "Times New Roman", serif; font-size: 16px; letter-spacing: -.02em; }
.ui-breader-toggle:hover, .ui-breader-toggle[aria-expanded="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-breader-toggle:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-breader-panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: 12px; width: min(300px, 100vw - 32px);
  padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
  font: 13px/1.3 var(--ui-font); }
.ui-breader-panel[hidden] { display: none; }
.ui-breader-row { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-breader-row legend, .ui-breader-name { padding: 0; margin-bottom: 6px; color: var(--ui-muted); font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; }
.ui-breader-size { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 6px; text-align: center; }
.ui-breader-size button { height: 32px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 600 13px var(--ui-font); cursor: pointer; }
.ui-breader-size button:last-child { font-size: 17px; }
.ui-breader-size button:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-breader-size button:disabled { opacity: .4; cursor: not-allowed; }
.ui-breader-size button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-breader-size output { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-breader-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-breader-seg label { position: relative; display: grid; place-items: center; height: 28px; border-radius: calc(var(--ui-radius-sm) - 2px); color: var(--ui-muted);
  font-weight: 600; cursor: pointer; }
.ui-breader-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ui-breader-seg label:has(input:checked) { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ui-breader-seg label:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-breader-reset { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--ui-accent); font: 600 13px var(--ui-font); cursor: pointer; border-radius: 3px; }
.ui-breader-reset:hover { text-decoration: underline; }
.ui-breader-reset:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-breader-body { max-width: var(--ui-breader-measure, 68ch); margin: 0 auto; width: 100%; padding: 4px 0; border-radius: var(--ui-radius);
  background: var(--ui-bg); color: var(--ui-fg); font-size: var(--ui-breader-size, 18px); line-height: var(--ui-breader-leading, 1.7);
  transition: background .2s, color .2s; }
.ui-breader-body.ui-light, .ui-breader-body.ui-dark { padding: 20px 24px; }
.ui-breader-serif { font-family: Charter, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif; }
.ui-breader-sans { font-family: var(--ui-font); }
.ui-breader-mono { font-family: var(--ui-mono); font-size: calc(var(--ui-breader-size, 18px) * .9); }
.ui-breader-body h1, .ui-breader-body h2, .ui-breader-body h3 { line-height: 1.25; }
.ui-breader-body a { color: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-breader-body { transition: none; } }


.ui-notification-center-bell {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); cursor: pointer; vertical-align: middle;
}
.ui-notification-center-bell:hover { background: var(--ui-subtle); }
.ui-notification-center-bell:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-notification-center-bell svg { width: 20px; height: 20px; }
.ui-notification-center-badge {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--ui-bg);
  border-radius: 999px; background: var(--ui-danger); color: #fff; font: 700 10px/14px var(--ui-font); text-align: center; box-sizing: border-box;
}
.ui-notification-center {
  box-sizing: border-box; width: min(380px, calc(100vw - 16px)); max-height: min(520px, calc(100dvh - 16px)); margin: auto; padding: 0;
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.45 var(--ui-font);
}
.ui-notification-center:popover-open { display: flex; flex-direction: column; animation: ui-notification-center-in .12s ease-out; }
@keyframes ui-notification-center-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-notification-center { inset: auto; margin: 6px 0; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline; }
  .ui-notification-center-start { position-area: bottom span-right; }
}
@supports not (position-area: bottom) { .ui-notification-center::backdrop { background: var(--ui-overlay); } }
.ui-notification-center-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 12px 14px 8px; }
.ui-notification-center-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ui-notification-center-link {
  padding: 2px 4px; border: 0; border-radius: 4px; background: none; color: var(--ui-accent); font: 500 13px/1.3 var(--ui-font);
  text-decoration: none; cursor: pointer;
}
.ui-notification-center-link:hover { text-decoration: underline; }
.ui-notification-center-link:disabled { color: var(--ui-muted); text-decoration: none; cursor: default; }
.ui-notification-center-filter { display: flex; gap: 4px; flex: none; padding: 0 14px 8px; border-bottom: 1px solid var(--ui-border); }
.ui-notification-center-tab {
  height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted);
  font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-notification-center-tab:hover { color: var(--ui-fg); background: var(--ui-subtle); }
.ui-notification-center-tab[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-notification-center-list { flex: 1; min-height: 0; margin: 0; padding: 4px; overflow: auto; list-style: none; overscroll-behavior: contain; }
.ui-notification-center-item {
  position: relative; display: grid; gap: 2px; width: 100%; padding: 10px 12px 10px 26px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-notification-center-item:hover { background: var(--ui-subtle); }
.ui-notification-center-unread { background: color-mix(in srgb, var(--ui-accent-soft) 55%, transparent); }
.ui-notification-center-unread::before { content: ""; position: absolute; left: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); }
.ui-notification-center-title { font-weight: 500; }
.ui-notification-center-read .ui-notification-center-title { font-weight: 400; color: var(--ui-muted); }
.ui-notification-center-text { color: var(--ui-muted); font-size: 13px; }
.ui-notification-center-time { color: var(--ui-muted); font-size: 12px; }
.ui-notification-center-empty { margin: 0; padding: 32px 16px; color: var(--ui-muted); text-align: center; }
.ui-notification-center-foot { flex: none; padding: 8px 14px; border-top: 1px solid var(--ui-border); text-align: center; }
.ui-notification-center-tab:focus-visible, .ui-notification-center-item:focus-visible, .ui-notification-center-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-notification-center:popover-open { animation: none; } }


.ui-savings-goal { display: grid; gap: 14px; align-content: start; min-width: 0; max-width: 440px; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-savings-goal-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ui-savings-goal .ui-savings-goal-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-savings-goal-account { margin: 2px 0 0; color: var(--ui-muted); font-size: 12px; }
.ui-savings-goal-pct { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-savings-goal-done .ui-savings-goal-pct { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-savings-goal-late .ui-savings-goal-pct { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-savings-goal-amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ui-savings-goal-saved { font-size: 26px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-savings-goal-target { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-savings-goal-bar { height: 10px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-savings-goal-fill { height: 100%; border-radius: inherit; background: var(--ui-accent); }
.ui-savings-goal-done .ui-savings-goal-fill { background: var(--ui-success); }
.ui-savings-goal-late .ui-savings-goal-fill { background: var(--ui-danger); }
.ui-savings-goal-plan { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-savings-goal-plan b { font-variant-numeric: tabular-nums; }
.ui-savings-goal-done .ui-savings-goal-plan { background: var(--ui-success-soft); color: var(--ui-success); font-weight: 500; }
.ui-savings-goal-late .ui-savings-goal-plan { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-savings-goal-recent h4 { margin: 0 0 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-savings-goal-recent ul { margin: 0; padding: 0; list-style: none; }
.ui-savings-goal-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ui-border); }
.ui-savings-goal-recent li:last-child { border-bottom: 0; }
.ui-savings-goal-recent time { color: var(--ui-muted); }
.ui-savings-goal-note { color: var(--ui-muted); font-size: 12px; margin-left: 6px; }
.ui-savings-goal-amount { font-weight: 600; color: var(--ui-success); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-savings-goal-add { justify-self: start; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--ui-radius-sm);
  background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 500; text-decoration: none; }
.ui-savings-goal-add:hover { filter: brightness(1.08); }
.ui-savings-goal-add:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-chat {
  display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); overflow: hidden;
}
.ui-chat-log {
  display: flex; flex-direction: column-reverse; height: var(--ui-chat-height, 420px); min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; outline: none;
}
/* At the newest message, it stays there as messages come (no anchoring); scrolled up, it keeps your place. */
.ui-chat-stuck { overflow-anchor: none; }
.ui-chat-log:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-chat-flow { padding: 14px 14px 8px; }
.ui-chat-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-chat-day {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--ui-muted); font-size: 12px; font-weight: 500;
}
.ui-chat-day::before, .ui-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--ui-border); }
.ui-chat-first { margin-top: 10px; }
.ui-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.ui-chat-mine .ui-chat-row { flex-direction: row-reverse; }
.ui-chat-avatar {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 650;
}
.ui-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-chat-avatar-off { visibility: hidden; }
.ui-chat-body { display: grid; justify-items: start; min-width: 0; max-width: min(75%, 560px); }
.ui-chat-mine .ui-chat-body { justify-items: end; }
.ui-chat-name { margin: 0 0 2px 12px; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-chat-bubble {
  padding: 8px 12px; border-radius: 16px; background: var(--ui-subtle); color: var(--ui-fg);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ui-chat-theirs:not(.ui-chat-last) .ui-chat-bubble { border-bottom-left-radius: 5px; }
.ui-chat-theirs:not(.ui-chat-first) .ui-chat-bubble { border-top-left-radius: 5px; }
.ui-chat-mine .ui-chat-bubble { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-chat-mine:not(.ui-chat-last) .ui-chat-bubble { border-bottom-right-radius: 5px; }
.ui-chat-mine:not(.ui-chat-first) .ui-chat-bubble { border-top-right-radius: 5px; }
.ui-chat-time { margin: 3px 12px 0; color: var(--ui-muted); font-size: 11px; }
.ui-chat-typing { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 4px 4px 0 2px; color: var(--ui-muted); font-size: 12px; }
.ui-chat-typing:empty { min-height: 0; padding: 0; }
.ui-chat-dots { display: inline-flex; gap: 3px; padding: 7px 10px; border-radius: 12px; background: var(--ui-subtle); }
.ui-chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-muted); animation: ui-chat-dot 1.2s infinite ease-in-out; }
.ui-chat-dots i:nth-child(2) { animation-delay: .15s; }
.ui-chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ui-chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.ui-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--ui-border); background: var(--ui-bg); }
.ui-chat-input {
  flex: 1; min-width: 0; min-height: 38px; max-height: 140px; margin: 0; padding: 8px 12px; resize: none; field-sizing: content;
  border: 1px solid var(--ui-border); border-radius: 19px; background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font);
}
.ui-chat-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-chat-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-chat-send {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); cursor: pointer;
}
.ui-chat-send svg { width: 18px; height: 18px; }
.ui-chat-send:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-chat-send:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chat-send:disabled, .ui-chat-input:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) { .ui-chat-body { max-width: 85%; } .ui-chat-flow { padding: 10px 10px 6px; } }
@media (prefers-reduced-motion: reduce) { .ui-chat-dots i { animation: none; opacity: .7; } }


.ui-alpha ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; font: 13px/1 var(--ui-font); }
.ui-alpha-letter {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px;
  border-radius: var(--ui-radius-sm); color: var(--ui-fg); font-weight: 600; text-decoration: none; transition: background .12s, color .12s;
}
a.ui-alpha-letter:hover { background: var(--ui-subtle); color: var(--ui-accent); }
.ui-alpha-letter:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-alpha-letter[aria-current] { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-alpha-off { color: var(--ui-strong); cursor: default; }
@media (prefers-reduced-motion: reduce) { .ui-alpha-letter { transition: none; } }


.ui-browser {
  min-width: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); font: 13px/1.4 var(--ui-font);
}
.ui-browser-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-browser-dots { display: flex; flex: none; gap: 6px; }
.ui-browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--ui-strong); }
.ui-browser-dots i:nth-child(1) { background: #ff5f57; }
.ui-browser-dots i:nth-child(2) { background: #febc2e; }
.ui-browser-dots i:nth-child(3) { background: #28c840; }
.ui-browser-nav { display: flex; flex: none; gap: 2px; color: var(--ui-muted); }
.ui-browser-nav svg { width: 16px; height: 16px; }
.ui-browser-tab { flex: none; max-width: 160px; padding: 3px 10px; border-radius: 6px; background: var(--ui-surface); color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-browser-url {
  display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-muted); overflow: hidden; white-space: nowrap;
}
.ui-browser-url svg { flex: none; width: 12px; height: 12px; }
.ui-browser-url span { overflow: hidden; text-overflow: ellipsis; }
.ui-browser-url b { font-weight: 500; color: var(--ui-fg); }
.ui-browser-body { position: relative; height: var(--ui-browser-h, auto); min-width: 0; overflow: auto; background: var(--ui-bg); }
.ui-browser-body > img, .ui-browser-body > quillo-raw > img { display: block; width: 100%; height: auto; }
.ui-browser-dark { --ui-bg: #0f0e17; --ui-surface: #17161f; --ui-subtle: #201f2b; --ui-fg: #ecebf3; --ui-muted: #a3a0b7; --ui-border: #2e2c3d; --ui-strong: #45435a; color-scheme: dark; }
@media (max-width: 480px) { .ui-browser-nav, .ui-browser-tab { display: none; } }


.ui-cart-sum { display: grid; gap: 10px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-cart-sum-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-cart-sum-count { margin: -6px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-cart-sum-lines { display: grid; gap: 8px; margin: 0; }
.ui-cart-sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ui-cart-sum-line dt { color: var(--ui-muted); }
.ui-cart-sum-line dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-cart-sum-success dt, .ui-cart-sum-success dd { color: var(--ui-success); }
.ui-cart-sum-muted dd { color: var(--ui-muted); }
.ui-cart-sum-total { padding-top: 10px; border-top: 1px solid var(--ui-border); font-size: 16px; font-weight: 700; }
.ui-cart-sum-total dt { color: var(--ui-fg); }
.ui-cart-sum-note { margin: 0; font-size: 12px; color: var(--ui-muted); }
.ui-cart-sum-form { display: contents; }
.ui-cart-sum-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: 4px; border: 1px solid transparent;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 15px/1 var(--ui-font); text-decoration: none;
  cursor: pointer; transition: background .15s, box-shadow .15s; }
.ui-cart-sum-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-cart-sum-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cart-sum-btn[disabled], .ui-cart-sum-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ui-cart-sum-more { text-align: center; font-size: 13px; }
.ui-cart-sum-more a { color: var(--ui-accent); }
@media (prefers-reduced-motion: reduce) { .ui-cart-sum-btn { transition: none; } }


.ui-rrobin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 720px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-rrobin .ui-rrobin-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-rrobin-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ui-rrobin-field { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; }
.ui-rrobin-options { display: grid; gap: 10px; }
.ui-rrobin textarea, .ui-rrobin select { box-sizing: border-box; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-rrobin select { height: 38px; }
.ui-rrobin textarea { min-height: 96px; padding: 8px 10px; resize: vertical; }
.ui-rrobin textarea:focus-visible, .ui-rrobin select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rrobin-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ui-rrobin-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-rrobin-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-rrobin-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-rrobin-wrap { overflow-x: auto; }
.ui-rrobin-wrap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rrobin-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-rrobin-table th, .ui-rrobin-table td { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-rrobin-table thead th { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-rrobin-table .ui-rrobin-team { text-align: left; font-weight: 600; }
.ui-rrobin-table .ui-rrobin-why { color: var(--ui-muted); font-size: 12px; font-weight: 400; text-align: left; white-space: normal; }
.ui-rrobin-points { font-weight: 700; }
.ui-rrobin-rounds { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ui-rrobin-round { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-rrobin .ui-rrobin-round-name { margin: 0; font-size: 13px; font-weight: 650; }
.ui-rrobin-games { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-rrobin-game { display: grid; grid-template-columns: minmax(0, 1fr) 48px auto 48px minmax(0, 1fr); gap: 6px; align-items: center; }
.ui-rrobin-home { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ui-rrobin-away { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rrobin-game input { box-sizing: border-box; width: 100%; height: 30px; padding: 0 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums; text-align: center; }
.ui-rrobin-game input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-rrobin-game input[aria-invalid] { border-color: var(--ui-danger); }
.ui-rrobin-rest { margin: 0; color: var(--ui-muted); font-size: 12px; }
@media (max-width: 480px) { .ui-rrobin-bar { grid-template-columns: minmax(0, 1fr); } .ui-rrobin-game { grid-template-columns: minmax(0, 1fr) 40px auto 40px minmax(0, 1fr); } }


.ui-palette { display: grid; gap: 16px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-palette .ui-palette-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-palette .ui-palette-sub { margin: 0; font-size: 13px; font-weight: 600; }
.ui-palette-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.ui-palette-field { display: grid; gap: 5px; min-width: 0; }
.ui-palette-field label { font-size: 13px; font-weight: 500; }
.ui-palette-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-mono); transition: border-color .15s, box-shadow .15s; }
.ui-palette-input:hover { border-color: var(--ui-strong); }
.ui-palette-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-palette-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-palette-why { margin: 0; color: var(--ui-danger); font-size: 13px; overflow-wrap: anywhere; }
.ui-palette-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-palette-step { display: grid; gap: 2px; padding: 10px 8px; border-radius: var(--ui-radius-sm); font: 11px/1.3 var(--ui-mono); }
.ui-palette-step b { font: 700 12px/1.3 var(--ui-font); }
.ui-palette-base { outline: 2px solid var(--ui-fg); outline-offset: 1px; }
.ui-palette-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-palette-role { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ui-radius-sm); font: 12px/1.35 var(--ui-mono); }
.ui-palette-role b { font: 600 13px/1.3 var(--ui-font); text-transform: capitalize; }
.ui-palette-grid { overflow-x: auto; }
.ui-palette-grid:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-palette-grid table { border-collapse: collapse; font: 11px/1.2 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-palette-grid th { padding: 4px 6px; color: var(--ui-muted); font-weight: 600; }
.ui-palette-grid td { min-width: 38px; padding: 6px 4px; border: 2px solid var(--ui-surface); text-align: center; font-weight: 600; }
.ui-palette-count { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-palette-export { display: grid; gap: 8px; min-width: 0; }
.ui-palette-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-palette-bar label { color: var(--ui-muted); font-size: 13px; }
.ui-palette-select, .ui-palette-copy { height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer; }
.ui-palette-select:focus-visible, .ui-palette-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-palette-copy:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-palette-said { color: var(--ui-muted); font-size: 13px; }
.ui-palette-export pre { max-height: 260px; margin: 0; overflow: auto; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: 12px/1.5 var(--ui-mono); }
.ui-palette-export pre:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 480px) { .ui-palette-fields { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ui-palette-input { transition: none; } }


.ui-gallery-picker { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-gallery-picker-body { display: grid; gap: 12px; }
.ui-gallery-picker-add {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; overflow: hidden;
  border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg); font: 500 16px/1 var(--ui-font); cursor: pointer;
}
.ui-gallery-picker-add input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ui-gallery-picker-add:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-gallery-picker-add:has(input:disabled) { opacity: .55; }
.ui-gallery-picker-count { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-gallery-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-gallery-picker-card {
  position: relative; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: transform .18s ease-out;
}
.ui-gallery-picker-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--ui-subtle); -webkit-user-drag: none; }
.ui-gallery-picker-card-on { z-index: 2; box-shadow: var(--ui-shadow-lg); transition: none; }
.ui-gallery-picker-card-target { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-gallery-picker-place { position: absolute; left: 8px; top: 8px; min-width: 24px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 12px/1.5 var(--ui-font); text-align: center; }
.ui-gallery-picker-grip {
  position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .5); color: #fff; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-gallery-picker-grip svg { width: 20px; height: 20px; }
.ui-gallery-picker-grip:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.ui-gallery-picker-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ui-gallery-picker-tools button {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-fg); cursor: pointer;
}
.ui-gallery-picker-tools button svg { width: 20px; height: 20px; }
.ui-gallery-picker-tools button:disabled { opacity: .35; cursor: default; }
.ui-gallery-picker-tools button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-gallery-picker-tools button:hover:not(:disabled) { background: var(--ui-subtle); } }
.ui-gallery-picker-refused { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-fg); }
.ui-gallery-picker-refused ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-gallery-picker-refused b { overflow-wrap: anywhere; font-weight: 600; }
.ui-gallery-picker-dismiss { justify-self: start; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); text-decoration: underline; cursor: pointer; }
/* A tablet, or a wide pane: more photos to the row. */
@container (min-width: 440px) { .ui-gallery-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 720px) { .ui-gallery-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ui-gallery-picker-card { transition: none; } }


.ui-natdate { display: grid; gap: 6px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-natdate-label { font-size: 13px; font-weight: 500; }
.ui-natdate-req { margin-left: 2px; color: var(--ui-danger); }
.ui-natdate-control { box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1 var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ui-natdate-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-natdate-control:hover { border-color: var(--ui-strong); }
.ui-natdate-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-natdate-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-natdate-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-natdate-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-natdate-said { margin: 0; min-height: 20px; font-size: 13px; color: var(--ui-muted); }
.ui-natdate-said strong { color: var(--ui-fg); font-weight: 600; }
.ui-natdate-bad { color: var(--ui-danger); }
.ui-natdate-note { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-natdate-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-natdate-alts-label { color: var(--ui-muted); font-size: 12px; }
.ui-natdate-alt { min-height: 30px; padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 13px/1.3 var(--ui-font); text-align: left; cursor: pointer; }
.ui-natdate-alt:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-natdate-alt:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-natdate-alt small { display: block; color: var(--ui-muted); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ui-natdate-control { transition: none; } }


.ui-settle-up { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 720px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-settle-up .ui-settle-up-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-settle-up-part { display: grid; gap: 8px; min-width: 0; }
.ui-settle-up-part h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-settle-up-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-settle-up-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ui-settle-up-box { box-sizing: border-box; flex: 1 1 120px; display: flex; align-items: center; gap: 6px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-settle-up-box:hover { border-color: var(--ui-strong); }
.ui-settle-up-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-settle-up-box input, .ui-settle-up-box select { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-settle-up-box.ui-settle-up-num { flex: 0 1 120px; }
.ui-settle-up-bad { border-color: var(--ui-danger); }
.ui-settle-up-code { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-settle-up-who { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; border: 0; color: var(--ui-muted); font-size: 13px; }
.ui-settle-up-who legend { float: left; margin-right: 8px; padding: 0; }
.ui-settle-up-who label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-settle-up-who input { margin: 0; accent-color: var(--ui-accent); }
.ui-settle-up-btn { box-sizing: border-box; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-settle-up-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-settle-up-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-settle-up-btn:disabled { color: var(--ui-muted); cursor: not-allowed; }
.ui-settle-up-add { justify-self: start; }
.ui-settle-up-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-settle-up-out { display: grid; gap: 12px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-settle-up-out h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-settle-up-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-settle-up-table th { padding: 4px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-settle-up-table td { padding: 5px 0; border-bottom: 1px solid var(--ui-border); text-align: right; overflow-wrap: anywhere; }
.ui-settle-up-table th:first-child, .ui-settle-up-table td:first-child { text-align: left; }
.ui-settle-up-table th + th, .ui-settle-up-table td + td { padding-left: 12px; }
.ui-settle-up-up { color: var(--ui-success); font-weight: 600; }
.ui-settle-up-down { color: var(--ui-danger); font-weight: 600; }
.ui-settle-up-plan { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-settle-up-plan b { font-variant-numeric: tabular-nums; }
.ui-settle-up-note { margin: 0; color: var(--ui-muted); font-size: 13px; }


.ui-apick { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-apick-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-apick-req { margin-left: 2px; color: var(--ui-danger); }
.ui-apick-list { display: grid; gap: 8px; }
.ui-apick-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.ui-apick-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-apick-card:hover { border-color: var(--ui-strong); }
.ui-apick-card:has(input:checked) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface));
  box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-apick-card:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-apick-card:has(input:disabled) { cursor: not-allowed; background: var(--ui-subtle); }
.ui-apick-card:has(input:disabled):hover { border-color: var(--ui-border); }
.ui-apick-card:has(input:disabled) .ui-apick-text { opacity: .6; }
.ui-apick-dot { flex: none; position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ui-strong); background: var(--ui-surface); }
.ui-apick-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ui-accent); transform: scale(0); transition: transform .12s; }
.ui-apick-card input:checked ~ .ui-apick-dot { border-color: var(--ui-accent); border-width: 1.5px; }
.ui-apick-card input:checked ~ .ui-apick-dot::after { transform: scale(1); }
.ui-apick-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ui-apick-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-apick-meta { color: var(--ui-muted); font-size: 12px; }
.ui-apick-num { font-family: var(--ui-mono); letter-spacing: .03em; }
.ui-apick-amount { display: grid; flex: none; justify-items: end; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-apick-avail { font-weight: 600; }
.ui-apick-avail-label { color: var(--ui-muted); font-size: 12px; }
.ui-apick-short .ui-apick-avail { color: var(--ui-danger); }
.ui-apick-shortby { color: var(--ui-danger); font-size: 12px; font-weight: 500; }
.ui-apick-invalid .ui-apick-card:has(input:checked) { border-color: var(--ui-danger); box-shadow: inset 0 0 0 1px var(--ui-danger); }
.ui-apick-hint, .ui-apick-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-apick-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-apick-card, .ui-apick-dot::after { transition: none; } }


.ui-fgrid { display: grid; gap: 8px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-fgrid-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-fgrid-bar label { flex: none; min-width: 2.6em; padding: 0 6px; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-muted); font: 600 12px/28px var(--ui-mono); text-align: center; }
.ui-fgrid-input { box-sizing: border-box; flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-mono); }
.ui-fgrid-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fgrid-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-fgrid table { border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-fgrid table:focus { outline: none; }
.ui-fgrid table:focus-visible .ui-fgrid-at { box-shadow: inset 0 0 0 2px var(--ui-accent), var(--ui-focus); }
.ui-fgrid th { position: sticky; top: 0; z-index: 1; min-width: 28px; padding: 3px 8px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border);
  background: var(--ui-subtle); color: var(--ui-muted); font-weight: 600; text-align: center; }
.ui-fgrid tbody th { position: sticky; left: 0; z-index: 1; }
.ui-fgrid thead th:first-child { left: 0; z-index: 2; }
.ui-fgrid td { box-sizing: border-box; min-width: 92px; max-width: 180px; height: 28px; padding: 0 7px; overflow: hidden; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border);
  text-overflow: ellipsis; white-space: nowrap; cursor: cell; }
.ui-fgrid-num { text-align: right; }
.ui-fgrid-at { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-fgrid-err { color: var(--ui-danger); font-weight: 600; text-align: center; }
.ui-fgrid td .ui-fgrid-edit { box-sizing: border-box; display: block; width: 100%; height: 26px; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg); font: 13px var(--ui-mono); }
.ui-fgrid-hint { margin: 0; color: var(--ui-muted); font-size: 12px; }


.ui-chart-advisor { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-chart-advisor .ui-chart-advisor-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-chart-advisor-kinds { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.ui-chart-advisor-kinds legend { float: left; margin-right: 8px; padding: 0; color: var(--ui-muted); }
.ui-chart-advisor-kinds label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ui-chart-advisor-kinds label[data-off] { color: var(--ui-muted); cursor: not-allowed; }
.ui-chart-advisor-kinds input { margin: 0; accent-color: var(--ui-accent); }
.ui-chart-advisor-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 440px; }
.ui-chart-advisor-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.ui-chart-advisor-field select { box-sizing: border-box; width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-chart-advisor-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-chart-advisor-live { display: grid; gap: 6px; min-width: 0; }
.ui-chart-advisor-why { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-chart-advisor-note { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; }
.ui-chart-advisor-small { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-chart-advisor-none { margin: 0; color: var(--ui-muted); }
.ui-chart-advisor-problems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-chart-advisor-button { justify-self: start; min-height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); cursor: pointer; }
.ui-chart-advisor-button:hover { border-color: var(--ui-strong); }
.ui-chart-advisor-button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chart-advisor-figure { min-width: 0; margin: 0; }
.ui-chart-advisor-name { margin: 0; font-size: 14px; font-weight: 600; }
.ui-chart-advisor-svg { display: block; width: 100%; max-width: 720px; height: auto; }
.ui-chart-advisor-grid { stroke: var(--ui-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-chart-advisor-base { stroke: var(--ui-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-chart-advisor-text { fill: var(--ui-muted); font: 12px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-chart-advisor-line { fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-chart-advisor-mark { fill: var(--ui-accent); }
.ui-chart-advisor-rest { fill: var(--ui-strong); }
.ui-chart-advisor-dot { fill: var(--ui-accent); fill-opacity: .65; }
.ui-chart-advisor-data summary { color: var(--ui-muted); font-size: 13px; cursor: pointer; }
.ui-chart-advisor-data summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-chart-advisor-box { box-sizing: border-box; width: 100%; min-height: 120px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px/1.4 var(--ui-mono); resize: vertical; }
.ui-chart-advisor-box:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
@media (max-width: 480px) { .ui-chart-advisor-pair { grid-template-columns: minmax(0, 1fr); } }


.ui-ordst {
  display: grid; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.45 var(--ui-font); container-type: inline-size;
}
.ui-ordst-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.ui-ordst-head h3 { margin: 0; font-size: 16px; }
.ui-ordst-order { color: var(--ui-muted); font-size: 13px; }
.ui-ordst-eta { margin: 0; color: var(--ui-muted); }
.ui-ordst-eta strong { display: block; color: var(--ui-fg); font-size: 18px; }
.ui-ordst-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-ordst-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); }
.ui-ordst-late .ui-ordst-bar span { background: var(--ui-warning); }
.ui-ordst-very_late .ui-ordst-bar span { background: var(--ui-danger); }
.ui-ordst-stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ui-ordst-stage { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 10px; padding-bottom: 12px; }
.ui-ordst-stage:last-child { padding-bottom: 0; }
.ui-ordst-stage::before { content: ""; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 2px; background: var(--ui-border); }
.ui-ordst-stage:last-child::before { display: none; }
.ui-ordst-dot { box-sizing: border-box; width: 14px; height: 14px; margin: 3px; border: 2px solid var(--ui-strong); border-radius: 50%; background: var(--ui-surface); }
.ui-ordst-did .ui-ordst-dot { border-color: var(--ui-accent); background: var(--ui-accent); }
.ui-ordst-did::before { background: var(--ui-accent); }
.ui-ordst-now .ui-ordst-dot { border-color: var(--ui-accent); }
.ui-ordst-now .ui-ordst-name { font-weight: 700; }
.ui-ordst-name { font-weight: 500; }
.ui-ordst-when { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-ordst-help { border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-ordst-help summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.ui-ordst-help summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ordst-help-body { display: grid; gap: 6px; padding: 0 12px 10px; }
.ui-ordst-help-body p { margin: 0; }
.ui-ordst-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-ordst-link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-accent); font-weight: 600; text-decoration: none; touch-action: manipulation;
}
.ui-ordst-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ordst-very_late .ui-ordst-help { background: var(--ui-danger-soft); }
.ui-ordst-late .ui-ordst-help, .ui-ordst-slipping .ui-ordst-help { background: var(--ui-warning-soft); }
@container (min-width: 520px) {
  .ui-ordst-stages { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ui-ordst-stage { grid-template-columns: minmax(0, 1fr); gap: 6px 0; padding-bottom: 0; }
  .ui-ordst-stage::before { left: 17px; right: -3px; top: 9px; bottom: auto; width: auto; height: 2px; }
}


.ui-anchored-host { display: contents; }
.ui-anchored-trigger {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 46px; min-height: 46px; padding: 0 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 15px/1.2 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-anchored-trigger[aria-expanded="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-anchored-trigger:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-anchored-trigger:hover { background: var(--ui-subtle); } }
.ui-anchored {
  box-sizing: border-box; width: min(var(--ui-anchored-w, 320px), calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: visible;
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow-lg); font: 15px/1.5 var(--ui-font); outline: none;
}
.ui-anchored:popover-open { display: flex; flex-direction: column; animation: ui-anchored-in .16s ease-out; }
.ui-anchored[data-side] { right: auto; bottom: auto; margin: 0; }
@keyframes ui-anchored-in { from { opacity: 0; } }
.ui-anchored-arrow {
  position: absolute; width: 14px; height: 14px; box-sizing: border-box; background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-right: 0; border-bottom: 0; pointer-events: none; display: none;
}
.ui-anchored[data-tied="true"] > .ui-anchored-arrow { display: block; }
.ui-anchored[data-side="bottom"] > .ui-anchored-arrow { top: -8px; left: calc(var(--ui-anchored-arrow) - 7px); transform: rotate(45deg); }
.ui-anchored[data-side="top"] > .ui-anchored-arrow { bottom: -8px; left: calc(var(--ui-anchored-arrow) - 7px); transform: rotate(225deg); }
.ui-anchored[data-side="right"] > .ui-anchored-arrow { left: -8px; top: calc(var(--ui-anchored-arrow) - 7px); transform: rotate(-45deg); }
.ui-anchored[data-side="left"] > .ui-anchored-arrow { right: -8px; top: calc(var(--ui-anchored-arrow) - 7px); transform: rotate(135deg); }
.ui-anchored-grip { display: none; flex: none; place-items: center; height: 26px; touch-action: none; cursor: grab; }
.ui-anchored-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-anchored-head { display: flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 2px 4px 2px 16px; border-bottom: 1px solid var(--ui-border); }
.ui-anchored-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-anchored-bare .ui-anchored-head { display: none; }
.ui-anchored-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-anchored-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-anchored-close:hover { background: var(--ui-subtle); color: var(--ui-fg); } }
.ui-anchored-close svg { width: 18px; height: 18px; }
.ui-anchored-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; overscroll-behavior: contain; }
.ui-anchored-body > :first-child { margin-top: 0; }
.ui-anchored-body > :last-child { margin-bottom: 0; }
/* The media query and not a class, so a phone gets a sheet even before any script. */
@media (max-width: 599.98px) {
  .ui-anchored {
    left: 0; right: 0; top: auto; bottom: var(--ui-anchored-kb, 0px); width: 100%; max-width: none; margin: 0;
    max-height: calc(var(--ui-anchored-room, 100dvh) - 16px); padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0; border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  .ui-anchored[data-side] { right: 0; bottom: var(--ui-anchored-kb, 0px); }
  .ui-anchored:popover-open { animation: ui-anchored-up .24s cubic-bezier(.2, .8, .2, 1); }
  .ui-anchored::backdrop { background: var(--ui-overlay); }
  .ui-anchored-dragging { transition: none; }
  .ui-anchored > .ui-anchored-arrow { display: none !important; }
  .ui-anchored-grip { display: grid; }
  .ui-anchored-bare .ui-anchored-head { display: flex; }
  .ui-anchored-head { touch-action: none; user-select: none; -webkit-user-select: none; }
}
@keyframes ui-anchored-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-anchored { transition: none; } .ui-anchored:popover-open { animation: none; } }


.ui-rmerge { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-rmerge .ui-rmerge-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-rmerge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ui-rmerge-bar span { color: var(--ui-muted); font-size: 13px; }
.ui-rmerge-btn { height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-rmerge-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-rmerge-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rmerge-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-rmerge-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-rmerge-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-rmerge-go:hover:not(:disabled) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-rmerge-sum { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-rmerge-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-rmerge-empty { margin: 0; padding: 20px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-rmerge-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-rmerge-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rmerge table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-rmerge th, .ui-rmerge td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); overflow-wrap: anywhere; }
.ui-rmerge tbody tr:last-child th, .ui-rmerge tbody tr:last-child td { border-bottom: 0; }
.ui-rmerge thead th { background: var(--ui-subtle); font-weight: 600; white-space: nowrap; }
.ui-rmerge thead small { display: block; color: var(--ui-muted); font-weight: 400; }
.ui-rmerge-conflict th { box-shadow: inset 3px 0 0 var(--ui-warning); }
.ui-rmerge-open { background: var(--ui-warning-soft); }
.ui-rmerge-flag { display: block; color: var(--ui-warning); font-size: 11px; font-weight: 600; }
.ui-rmerge-same { color: var(--ui-muted); }
.ui-rmerge-opt { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.ui-rmerge-opt input { flex: none; margin: 2px 0 0; accent-color: var(--ui-accent); }
.ui-rmerge-opt input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rmerge-blank { color: var(--ui-muted); font-style: italic; }
.ui-rmerge-out { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 3px 14px; margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 13px; }
.ui-rmerge-out dt { color: var(--ui-muted); }
.ui-rmerge-out dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.ui-rmerge-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-rmerge-said { color: var(--ui-muted); font-size: 13px; }


.ui-receipt { position: relative; width: 300px; max-width: 100%; margin: 0; padding: 22px 18px 30px; background: var(--ui-surface); color: var(--ui-fg);
  font: 12.5px/1.5 var(--ui-mono); box-shadow: var(--ui-shadow); border-radius: 2px 2px 0 0; }
.ui-receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: linear-gradient(135deg, var(--ui-surface) 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
              linear-gradient(45deg, transparent 50%, var(--ui-surface) 50%) 0 0 / 12px 8px repeat-x; }
.ui-receipt-head { margin: 0 0 12px; text-align: center; }
.ui-receipt-store { font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ui-receipt-head p { margin: 0; color: var(--ui-muted); }
.ui-receipt-meta { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; margin: 0; padding: 8px 0; border-top: 1px dashed var(--ui-strong); border-bottom: 1px dashed var(--ui-strong); }
.ui-receipt-meta dt { color: var(--ui-muted); }
.ui-receipt-meta dd { margin: 0; text-align: right; }
.ui-receipt-lines { width: 100%; margin: 8px 0; border-collapse: collapse; }
.ui-receipt-lines td { padding: 2px 0; vertical-align: top; }
.ui-receipt-lines .ui-receipt-amt { text-align: right; white-space: nowrap; padding-left: 10px; }
.ui-receipt-qty { color: var(--ui-muted); }
.ui-receipt-totals { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 0; padding: 8px 0; border-top: 1px dashed var(--ui-strong); }
.ui-receipt-totals dt { color: var(--ui-muted); }
.ui-receipt-totals dd { margin: 0; text-align: right; }
.ui-receipt-total dt, .ui-receipt-total dd { font-size: 15px; font-weight: 700; color: var(--ui-fg); padding-top: 4px; }
.ui-receipt-paid { border-top: 1px dashed var(--ui-strong); }
.ui-receipt-foot { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--ui-strong); text-align: center; white-space: pre-line; }
.ui-receipt-code { display: grid; justify-items: center; gap: 6px; margin-top: 12px; text-align: center; letter-spacing: .08em; }
.ui-receipt-code:empty { display: none; }
@media print { .ui-receipt { box-shadow: none; background: #fff; color: #000; } }


.ui-dlist { min-width: 0; container: ui-dlist / inline-size; color: var(--ui-fg); font: 14px/1.35 var(--ui-font); }
.ui-dlist-in { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ui-dlist-side { display: grid; gap: 10px; align-content: start; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-dlist-used { margin: 0; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-dlist-free { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-dlist-meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-dlist-meter i { display: block; height: 100%; background: var(--ui-accent); transform-origin: 0 50%; }
.ui-dlist-full i { background: var(--ui-danger); }
.ui-dlist-wifi { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; }
/* A real input, drawn as a switch, and 44 px tall itself: the track is the part that shows. */
.ui-dlist-wifi input { position: relative; flex: none; width: 52px; height: 44px; margin: 0; appearance: none; -webkit-appearance: none; background: none; cursor: pointer; touch-action: manipulation; }
.ui-dlist-wifi input::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 28px; border-radius: 999px; background: var(--ui-strong); transition: background .15s; }
.ui-dlist-wifi input::after { content: ""; position: absolute; top: 10px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--ui-shadow); transition: transform .15s; }
.ui-dlist-wifi input:checked::before { background: var(--ui-accent); }
.ui-dlist-wifi input:checked::after { transform: translateX(24px); }
.ui-dlist .ui-dlist-wifi input:focus-visible { box-shadow: none; }
.ui-dlist-wifi input:focus-visible::before { box-shadow: var(--ui-focus); }
.ui-dlist-why { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-dlist-held { color: var(--ui-warning); font-weight: 600; }
.ui-dlist-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ui-dlist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--ui-border); }
.ui-dlist-title { margin: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-dlist-state { margin: 0; color: var(--ui-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ui-dlist-failed .ui-dlist-state { color: var(--ui-danger); }
.ui-dlist-waiting .ui-dlist-state { color: var(--ui-warning); }
.ui-dlist-bar { grid-column: 1; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-dlist-bar i { display: block; height: 100%; background: var(--ui-accent); transform-origin: 0 50%; }
.ui-dlist-paused .ui-dlist-bar i, .ui-dlist-waiting .ui-dlist-bar i { background: var(--ui-strong); }
.ui-dlist-failed .ui-dlist-bar i { background: var(--ui-danger); }
.ui-dlist-acts { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 2px; }
.ui-dlist-btn { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 6px; border: 0; border-radius: 12px; background: none; color: var(--ui-fg); font: 600 13px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-dlist-btn svg { width: 22px; height: 22px; }
.ui-dlist-clear { justify-self: start; min-height: 46px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-fg); font: 600 14px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-dlist-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--ui-muted); }
.ui-dlist :focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-dlist-btn:hover { background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-dlist-wifi input::before, .ui-dlist-wifi input::after { transition: none; } }
/* Wide: the storage and the setting keep a column of their own, and a row has room for its size. */
@container ui-dlist (min-width: 640px) {
  .ui-dlist-in { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
  .ui-dlist-side { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 12px; }
  .ui-dlist-main { grid-column: 1; grid-row: 1; }
}


.ui-pdf-viewer { display: grid; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-pdf-viewer-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-pdf-viewer-bar svg { flex: none; width: 18px; height: 18px; color: var(--ui-danger); }
.ui-pdf-viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ui-pdf-viewer-link {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); text-decoration: none; white-space: nowrap;
}
.ui-pdf-viewer-link:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-pdf-viewer-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pdf-viewer object { display: block; width: 100%; height: var(--h, 520px); background: var(--ui-subtle); }
.ui-pdf-viewer-fallback { display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; padding: 24px; text-align: center; color: var(--ui-muted); }
.ui-pdf-viewer-fallback p { margin: 0; }


.demo-split-head { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); font: 600 14px/1.3 var(--ui-font); }
.demo-split-row { display: block; box-sizing: border-box; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: var(--ui-fg); font: 15px/1.3 var(--ui-font); text-align: left; cursor: pointer; }
.demo-split-row small { display: block; color: var(--ui-muted); font-size: 13px; }
.demo-split-row[aria-current="true"] { background: var(--ui-accent-soft); }
.demo-split-body { padding: 16px; font: 15px/1.6 var(--ui-font); }
.demo-split-body h4 { margin: 0 0 8px; font-size: 19px; }
.demo-split-body textarea { box-sizing: border-box; width: 100%; min-height: 96px; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }
.demo-split-out { margin: 8px 0 0; }


.ui-profile-setup {
  position: relative; z-index: 50; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + var(--ui-profile-setup-keyboard, 0px)) env(safe-area-inset-left);
  background: var(--ui-bg); color: var(--ui-fg); font: 16px/1.45 var(--ui-font); container: ui-profile-setup / size;
}
.ui-profile-setup-fixed { position: fixed; inset: 0; width: auto; height: auto; }
.ui-profile-setup-top { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 46px; padding: 8px 8px 0; }
.ui-profile-setup-count { color: var(--ui-muted); font-size: 14px; }
.ui-profile-setup-bar { flex: none; height: 4px; margin: 4px 20px 0; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-profile-setup-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .25s; }
.ui-profile-setup-panes { display: flex; flex: 1; min-height: 0; }
.ui-profile-setup-list { display: none; }
.ui-profile-setup-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.ui-profile-setup-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 20px 12px; }
.ui-profile-setup-body h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; outline: none; }
.ui-profile-setup-text { margin: 0 0 18px; color: var(--ui-muted); }
.ui-profile-setup-foot { display: grid; flex: none; gap: 8px; padding: 8px 20px 16px; }
.ui-profile-setup-problem { margin: 10px 0 0; color: var(--ui-danger); font-size: 14px; }
.ui-profile-setup-face { display: grid; place-items: center; width: 132px; height: 132px; margin: 8px auto 16px; overflow: hidden; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 44px; font-weight: 600; }
.ui-profile-setup-face img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; }
.ui-profile-setup-picks { display: grid; gap: 8px; }
.ui-profile-setup-field { display: grid; gap: 4px; }
.ui-profile-setup-field label { font-size: 14px; font-weight: 500; }
.ui-profile-setup-field input {
  box-sizing: border-box; width: 100%; height: 50px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 17px var(--ui-font);
}
.ui-profile-setup-field input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-profile-setup-choice { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer; }
.ui-profile-setup-choice + .ui-profile-setup-choice { margin-top: 8px; }
.ui-profile-setup-choice:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-profile-setup-choice:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-profile-setup-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-accent); }
.ui-profile-setup-sum { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ui-profile-setup-sum li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 2px 0; border-bottom: 1px solid var(--ui-border); }
.ui-profile-setup-sum span { min-width: 0; overflow-wrap: anywhere; }
.ui-profile-setup-sum small { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-profile-setup-sum [data-done] small { color: var(--ui-success); }
/* A tablet has room for the steps beside the one in hand, and they are places to go. */
@container ui-profile-setup (min-width: 600px) {
  .ui-profile-setup-bar { display: none; }
  .ui-profile-setup-list { display: grid; align-content: start; flex: 0 0 240px; gap: 4px; margin: 0; padding: 20px 12px; list-style: none; border-inline-end: 1px solid var(--ui-border); }
  .ui-profile-setup-list button {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
    color: var(--ui-fg); font: 15px var(--ui-font); text-align: start; cursor: pointer;
  }
  .ui-profile-setup-list button[aria-current="step"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
  .ui-profile-setup-list button:focus-visible { outline: none; box-shadow: var(--ui-focus); }
  .ui-profile-setup-list small { margin-inline-start: auto; color: var(--ui-muted); font-size: 12px; }
  .ui-profile-setup-body, .ui-profile-setup-foot { width: 100%; max-width: 520px; margin-inline: auto; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .ui-profile-setup-bar span { transition: none; } }


.ui-email-preview { display: grid; gap: 16px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.55 var(--ui-font); }
.ui-email-preview-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-email-preview-subject { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ui-email-preview-unread .ui-email-preview-subject { font-weight: 750; }
.ui-email-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); }
.ui-email-preview-label { padding: 1px 8px; border-radius: 4px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 500; }
.ui-email-preview-star { width: 18px; height: 18px; margin-left: auto; color: var(--ui-warning); }
.ui-email-preview-head { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; }
.ui-email-preview-head .ui-avatar { grid-row: span 2; }
.ui-email-preview-from { min-width: 0; overflow-wrap: anywhere; }
.ui-email-preview-from b { font-weight: 650; }
.ui-email-preview-addr { color: var(--ui-muted); font-size: 13px; }
.ui-email-preview-to { grid-column: 2 / -1; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-email-preview-date { color: var(--ui-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-email-preview-body { min-width: 0; overflow-wrap: anywhere; }
.ui-email-preview-body p { margin: 0 0 12px; white-space: pre-line; }
.ui-email-preview-body > :last-child { margin-bottom: 0; }
.ui-email-preview-files { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ui-border); }
.ui-email-preview-files h4 { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-email-preview-files ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-email-preview-file { display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 8px 12px 8px 8px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); color: var(--ui-fg); text-decoration: none; }
a.ui-email-preview-file:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
a.ui-email-preview-file:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-email-preview-ext { --k: var(--ui-muted); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px;
  background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); font: 700 9px/1 var(--ui-font); }
.ui-email-preview-k-pdf { --k: var(--ui-danger); } .ui-email-preview-k-image { --k: var(--ui-success); } .ui-email-preview-k-doc { --k: var(--ui-info); }
.ui-email-preview-k-sheet { --k: var(--ui-success); } .ui-email-preview-k-archive { --k: var(--ui-warning); }
.ui-email-preview-fname { display: grid; min-width: 0; font-size: 13px; }
.ui-email-preview-fname span:first-child { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-email-preview-fname span + span { color: var(--ui-muted); font-size: 12px; }
@media (max-width: 520px) { .ui-email-preview { padding: 16px; } .ui-email-preview-head { grid-template-columns: auto 1fr; } .ui-email-preview-date { grid-column: 2; } }


.ui-world-clock { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; font: 13px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-world-clock-zone { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-world-clock-night { background: color-mix(in srgb, var(--ui-fg) 6%, var(--ui-surface)); }
.ui-world-clock-city { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; }
.ui-world-clock-city svg { flex: none; width: 14px; height: 14px; color: var(--ui-muted); }
.ui-world-clock-time { font-size: 28px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ui-world-clock-time small { margin-left: 3px; font-size: 13px; font-weight: 600; color: var(--ui-muted); letter-spacing: 0; }
.ui-world-clock-meta { color: var(--ui-muted); font-size: 12px; }
.ui-world-clock-note { color: var(--ui-muted); font-size: 12px; }
.ui-world-clock-list { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; }
.ui-world-clock-list .ui-world-clock-zone { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; border: 0; border-radius: 0; border-top: 1px solid var(--ui-border); }
.ui-world-clock-list .ui-world-clock-zone:first-child { border-top: 0; }
.ui-world-clock-list .ui-world-clock-time { grid-column: 2; grid-row: 1 / span 3; font-size: 22px; text-align: right; }


.ui-agenda-list { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-agenda-list-day { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; }
.ui-agenda-list-date { display: grid; justify-items: center; align-content: start; gap: 1px; padding-top: 2px; color: var(--ui-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ui-agenda-list-date b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ui-fg); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.ui-agenda-list-today .ui-agenda-list-date b { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-agenda-list-today .ui-agenda-list-date { color: var(--ui-accent); }
.ui-agenda-list-events { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-agenda-list-title { grid-column: 2; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.ui-agenda-list-title span { color: var(--ui-muted); font-weight: 400; }
.ui-agenda-list-event {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; --t: var(--ui-accent);
}
a.ui-agenda-list-event, button.ui-agenda-list-event { cursor: pointer; }
a.ui-agenda-list-event:hover, button.ui-agenda-list-event:hover { background: color-mix(in srgb, var(--t) 12%, var(--ui-subtle)); }
a.ui-agenda-list-event:focus-visible, button.ui-agenda-list-event:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-agenda-list-time { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-agenda-list-time::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.ui-agenda-list-what { display: grid; gap: 1px; min-width: 0; }
.ui-agenda-list-what b { font-weight: 600; }
.ui-agenda-list-place { color: var(--ui-muted); font-size: 13px; }
.ui-agenda-list-success { --t: var(--ui-success); }
.ui-agenda-list-warning { --t: var(--ui-warning); }
.ui-agenda-list-danger { --t: var(--ui-danger); }
.ui-agenda-list-info { --t: var(--ui-info); }
.ui-agenda-list-neutral { --t: var(--ui-strong); }
.ui-agenda-list-none { padding: 8px 10px; color: var(--ui-muted); font-size: 13px; }
.ui-agenda-list-empty { margin: 0; color: var(--ui-muted); }
@media (max-width: 480px) { .ui-agenda-list-event { grid-template-columns: 1fr; gap: 2px; } }


.ui-liveloc { container-type: inline-size; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-liveloc-in { display: grid; gap: 10px; }
.ui-liveloc-map { display: block; width: 100%; aspect-ratio: 3 / 2; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-liveloc-path { fill: none; stroke: var(--ui-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ui-liveloc-halo { fill: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-liveloc-dot { fill: var(--ui-accent); stroke: var(--ui-surface); stroke-width: 2; }
.ui-liveloc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ui-liveloc-stats > div { min-width: 0; padding: 6px 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-liveloc-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-liveloc-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-liveloc-say { margin: 0; color: var(--ui-muted); }
.ui-liveloc-say:empty { display: none; }
.ui-liveloc-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-liveloc-bar > .ui-btn { flex: 1 1 auto; }
/* With room, the numbers run down the side of the map. The status comes last, as it comes and goes, so the buttons stay put. */
@container (min-width: 420px) {
  .ui-liveloc-in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 14px; align-items: start; }
  .ui-liveloc-map { grid-row: 1 / span 3; }
  .ui-liveloc-stats { grid-template-columns: minmax(0, 1fr); }
}


.ui-lazy { display: block; min-width: 0; }
.ui-lazy-wait { display: grid; place-items: center; min-height: var(--h, 200px); border-radius: var(--ui-radius); background: var(--ui-subtle);
  color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }
.ui-lazy-shown { animation: ui-lazy-in .25s ease-out; }
@keyframes ui-lazy-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-lazy-shown { animation: none; } }


.ui-pagehead { display: grid; gap: 12px; padding-bottom: 20px; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-pagehead-line { border-bottom: 1px solid var(--ui-border); }
.ui-pagehead-back {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; color: var(--ui-muted); font-size: 14px;
  text-decoration: none; border-radius: var(--ui-radius-sm);
}
.ui-pagehead-back:hover { color: var(--ui-fg); }
.ui-pagehead-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pagehead-back svg { width: 16px; height: 16px; }
.ui-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.ui-pagehead-main { display: flex; flex: 1 1 320px; align-items: flex-start; gap: 14px; min-width: 0; }
.ui-pagehead-avatar { flex: none; padding-top: 2px; }
.ui-pagehead-text { display: grid; gap: 4px; min-width: 0; }
.ui-pagehead-eyebrow { color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-pagehead-title { margin: 0; font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ui-pagehead-desc { max-width: 64ch; margin: 0; color: var(--ui-muted); }
.ui-pagehead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; color: var(--ui-muted); font-size: 14px; }
.ui-pagehead-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ui-pagehead-below:empty { display: none; }
.ui-pagehead-below > :first-child { margin-top: 0; }
@media (max-width: 599px) { .ui-pagehead-title { font-size: 22px; } .ui-pagehead-actions { width: 100%; margin-left: 0; } }


.ui-ss { display: grid; gap: 12px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-ss-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 16px;
  border-radius: var(--ui-radius); font-weight: 600; --t: var(--ui-success); --ts: var(--ui-success-soft); background: var(--ts); color: var(--t); }
.ui-ss-sum-degraded { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-ss-sum-down { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-ss-sum-maintenance { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-ss-updated { font-weight: 400; font-size: 13px; opacity: .85; }
.ui-ss-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-ss-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center; padding: 12px 16px; --t: var(--ui-strong); }
.ui-ss-row + .ui-ss-row { border-top: 1px solid var(--ui-border); }
.ui-ss-up { --t: var(--ui-success); }
.ui-ss-degraded { --t: var(--ui-warning); }
.ui-ss-down { --t: var(--ui-danger); }
.ui-ss-maintenance { --t: var(--ui-info); }
.ui-ss-name { font-weight: 500; }
.ui-ss-name a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-ss-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-ss-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ss-note { grid-column: 1 / -1; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-ss-uptime { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-ss-state { display: inline-flex; align-items: center; gap: 7px; justify-self: end; color: var(--t); font-weight: 600; font-size: 13px; white-space: nowrap; }
.ui-ss-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--t); }
.ui-ss-down .ui-ss-dot { animation: ui-ss-blink 1.2s ease-in-out infinite; }
@keyframes ui-ss-blink { 50% { opacity: .35; } }
.ui-ss-bars { grid-column: 1 / -1; display: flex; gap: 3px; height: 14px; margin-top: 4px; }
.ui-ss-bar { flex: 1; border-radius: 2px; background: var(--ui-strong); --t: var(--ui-strong); background: var(--t); }
.ui-ss-bar-up { --t: var(--ui-success); }
.ui-ss-bar-degraded { --t: var(--ui-warning); }
.ui-ss-bar-down { --t: var(--ui-danger); }
.ui-ss-bar-maintenance { --t: var(--ui-info); }
@media (max-width: 480px) { .ui-ss-row { grid-template-columns: minmax(0, 1fr) auto; } .ui-ss-uptime { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-ss-down .ui-ss-dot { animation: none; } }


.ui-pricing-wrap { max-width: 100%; overflow-x: auto; }
.ui-pricing { width: 100%; border-collapse: separate; border-spacing: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-pricing caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-pricing th, .ui-pricing td { padding: 10px 14px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.ui-pricing thead th { vertical-align: bottom; padding-bottom: 14px; }
.ui-pricing tbody th { font-weight: 500; }
.ui-pricing td { text-align: center; }
.ui-pricing-plan { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 140px; }
.ui-pricing-name { font-size: 16px; font-weight: 600; }
.ui-pricing-price { display: inline-flex; align-items: baseline; gap: 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-pricing-period { font-size: 13px; font-weight: 400; color: var(--ui-muted); }
.ui-pricing-old { font-size: 14px; font-weight: 400; color: var(--ui-muted); text-decoration: line-through; }
.ui-pricing-note { font-size: 12px; font-weight: 400; color: var(--ui-muted); }
.ui-pricing-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; margin-top: 6px; padding: 0 16px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); text-decoration: none; cursor: pointer; }
.ui-pricing-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-pricing-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pricing-rec .ui-pricing-btn { background: var(--ui-accent); color: var(--ui-accent-fg); border-color: transparent; }
.ui-pricing-rec .ui-pricing-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-pricing-rec { background: color-mix(in srgb, var(--ui-accent-soft) 45%, var(--ui-surface)); }
.ui-pricing-rec-tag { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 11px/1.6 var(--ui-font); text-transform: uppercase; letter-spacing: .04em; }
.ui-pricing-group th { padding-top: 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); border-bottom: 0; }
.ui-pricing-hint { display: block; font-size: 12px; font-weight: 400; color: var(--ui-muted); }
.ui-pricing-yes { color: var(--ui-success); }
.ui-pricing-yes svg { width: 18px; height: 18px; vertical-align: -4px; }
.ui-pricing-no { color: var(--ui-strong); }
.ui-pricing tbody tr:last-child th, .ui-pricing tbody tr:last-child td { border-bottom: 0; }


.ui-font-picker { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-font-picker-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-font-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-font-picker-box { position: relative; display: block; }
.ui-font-picker-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-font-picker select {
  appearance: none; display: block; width: 100%; height: 38px; padding: 0 36px 0 12px;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-font-picker select:hover { border-color: var(--ui-strong); }
.ui-font-picker select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-font-picker select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-font-picker option { color: var(--ui-fg); background: var(--ui-surface); font-size: 15px; }
.ui-font-picker-preview {
  margin: 0; padding: 10px 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm);
  font-size: 20px; line-height: 1.3; overflow-wrap: anywhere;
}
.ui-font-picker-sm select { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-font-picker-sm .ui-font-picker-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
.ui-font-picker-sm .ui-font-picker-preview { font-size: 16px; padding: 6px 10px; }
.ui-font-picker-invalid select, .ui-font-picker-invalid select:hover { border-color: var(--ui-danger); }
.ui-font-picker-hint, .ui-font-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-font-picker-error { color: var(--ui-danger); }
.ui-font-picker-disabled { opacity: .55; }
.ui-font-picker-disabled select { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-font-picker select { transition: none; } }


.ui-faq { display: grid; gap: 14px; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-faq-bar { display: flex; align-items: center; gap: 12px; }
.ui-faq-search { position: relative; flex: 1; display: flex; align-items: center; }
.ui-faq-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--ui-muted); pointer-events: none; }
.ui-faq-input {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px 0 38px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 15px/1 var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-faq-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-faq-input:hover { border-color: var(--ui-strong); }
.ui-faq-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-faq-count { flex: none; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-faq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.ui-faq-item { border-bottom: 1px solid var(--ui-border); }
.ui-faq-item > summary { display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 16px; border-radius: var(--ui-radius-sm); }
.ui-faq-item > summary::-webkit-details-marker { display: none; }
.ui-faq-item > summary:hover { color: var(--ui-accent); }
.ui-faq-item > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-faq-q { flex: 1; }
.ui-faq-plus { flex: none; position: relative; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-faq-plus::before, .ui-faq-plus::after { content: ""; position: absolute; top: 7px; left: 2px; width: 12px; height: 2px;
  border-radius: 1px; background: currentColor; transition: transform .2s; }
.ui-faq-plus::after { transform: rotate(90deg); }
.ui-faq-item[open] > summary .ui-faq-plus::after { transform: rotate(0); }
.ui-faq-answer { padding: 0 4px 18px 34px; color: var(--ui-muted); }
.ui-faq-answer > :first-child { margin-top: 0; }
.ui-faq-answer > :last-child { margin-bottom: 0; }
.ui-faq-empty { padding: 24px 4px; color: var(--ui-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ui-faq-plus::before, .ui-faq-plus::after, .ui-faq-input { transition: none; } }


.ui-form-field { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-form-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-form-field-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-form-field-req { margin-left: 2px; color: var(--ui-danger); }
.ui-form-field-opt { margin-left: 4px; color: var(--ui-muted); font-weight: 400; }
.ui-form-field-aside { font-size: 13px; color: var(--ui-muted); }
.ui-form-field-control { min-width: 0; }
.ui-form-field-control > input:not([type=checkbox]):not([type=radio]):not([type=file]), .ui-form-field-control > select, .ui-form-field-control > textarea {
  box-sizing: border-box; width: 100%; max-width: var(--ui-form-field-width, none); height: 38px; margin: 0; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s;
}
.ui-form-field-control > textarea { height: auto; min-height: 76px; padding: 8px 12px; line-height: 1.5; resize: vertical; }
.ui-form-field-control > input:hover, .ui-form-field-control > select:hover, .ui-form-field-control > textarea:hover { border-color: var(--ui-strong); }
.ui-form-field-control > input:focus-visible, .ui-form-field-control > select:focus-visible, .ui-form-field-control > textarea:focus-visible {
  outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus);
}
.ui-form-field-invalid .ui-form-field-control > input, .ui-form-field-invalid .ui-form-field-control > select,
.ui-form-field-invalid .ui-form-field-control > textarea { border-color: var(--ui-danger); }
.ui-form-field-hint, .ui-form-field-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-form-field-error { color: var(--ui-danger); }
.ui-form-field-inline { grid-template-columns: minmax(120px, 1fr) 3fr; align-items: start; column-gap: 16px; }
.ui-form-field-inline .ui-form-field-head { padding-top: 9px; }
.ui-form-field-inline .ui-form-field-hint, .ui-form-field-inline .ui-form-field-error { grid-column: 2; }
@media (max-width: 559px) {
  .ui-form-field-inline { grid-template-columns: minmax(0, 1fr); }
  .ui-form-field-inline .ui-form-field-head { padding-top: 0; }
  .ui-form-field-inline .ui-form-field-hint, .ui-form-field-inline .ui-form-field-error { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .ui-form-field-control > input, .ui-form-field-control > select, .ui-form-field-control > textarea { transition: none; } }


.ui-vt { display: grid; gap: 10px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-vt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ui-vt-search { width: min(100%, 280px); height: 36px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: inherit; }
.ui-vt-search::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-vt-search:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-vt-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-vt-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  overscroll-behavior: contain; }
.ui-vt table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; outline: none; }
.ui-vt table:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-vt th, .ui-vt td { box-sizing: border-box; height: var(--ui-vt-rh); padding: 0 14px; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-vt td { box-shadow: inset 0 -1px 0 var(--ui-border); }
.ui-vt th { position: sticky; top: 0; z-index: 1; background: var(--ui-subtle); color: var(--ui-muted); box-shadow: inset 0 -1px 0 var(--ui-border);
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-vt .ui-vt-right { text-align: right; font-variant-numeric: tabular-nums; }
.ui-vt-sort { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 -6px; padding: 4px 6px; border: 0;
  border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ui-vt-sort:hover { color: var(--ui-fg); }
.ui-vt-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-vt-right .ui-vt-sort { flex-direction: row-reverse; }
.ui-vt-arrow { flex: none; width: 12px; height: 12px; opacity: .35; }
[aria-sort] .ui-vt-sort { color: var(--ui-fg); }
[aria-sort] .ui-vt-arrow { opacity: 1; color: var(--ui-accent); }
.ui-vt tbody tr:not(.ui-vt-pad) { cursor: pointer; }
.ui-vt tbody tr:not(.ui-vt-pad):hover td { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-vt tr[aria-selected="true"] td { background: var(--ui-accent-soft); }
.ui-vt table:focus-visible tr.ui-vt-active td { background: var(--ui-subtle); }
.ui-vt table:focus-visible tr.ui-vt-active td:first-child { box-shadow: inset 3px 0 0 var(--ui-accent), inset 0 -1px 0 var(--ui-border); }
.ui-vt table:focus-visible tr.ui-vt-active[aria-selected="true"] td { background: var(--ui-accent-soft); }
.ui-vt .ui-vt-pad td { height: auto; padding: 0; box-shadow: none; }
.ui-vt-empty td { color: var(--ui-muted); text-align: center; }


.peek-sheet-demo-map { position: absolute; inset: 0; padding: 12px; background: repeating-linear-gradient(0deg, transparent 0 46px, var(--ui-border) 46px 47px), repeating-linear-gradient(90deg, transparent 0 46px, var(--ui-border) 46px 47px), var(--ui-subtle); }
.peek-sheet-demo-rows { margin: 0; padding: 0; list-style: none; }
.peek-sheet-demo-rows li { padding: 13px 0; border-bottom: 1px solid var(--ui-border); }
.peek-sheet-demo-search { box-sizing: border-box; display: block; width: 100%; height: 46px; margin-bottom: 8px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-wtimer { --t: var(--ui-accent); position: relative; container-type: inline-size; box-sizing: border-box; height: 100%; min-height: min(100dvh, 520px); overflow-y: auto; overscroll-behavior: contain;
  color: var(--ui-fg); font: 15px/1.4 var(--ui-font); background: color-mix(in srgb, var(--t) 9%, var(--ui-bg)); transition: background .25s;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.ui-wtimer[data-kind="work"] { --t: var(--ui-danger); }
.ui-wtimer[data-kind="rest"] { --t: var(--ui-success); }
.ui-wtimer[data-kind="warmup"], .ui-wtimer[data-kind="cooldown"] { --t: var(--ui-info); }
.ui-wtimer-in { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.ui-wtimer-main { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.ui-wtimer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-wtimer-title { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ui-wtimer-left { color: var(--ui-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-wtimer-face { position: relative; display: grid; flex: 1; place-items: center; min-height: 240px; }
.ui-wtimer-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ui-wtimer-ring circle { fill: none; stroke-width: 3; }
.ui-wtimer-ring-back { stroke: color-mix(in srgb, var(--t) 18%, transparent); }
.ui-wtimer-ring-now { stroke: var(--t); stroke-linecap: round; transition: stroke-dasharray .2s linear; }
.ui-wtimer-mid { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.ui-wtimer-phase { font-size: 20px; font-weight: 700; color: var(--t); }
.ui-wtimer-clock { font-size: clamp(64px, min(24cqw, 22dvh), 170px); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ui-wtimer-soon .ui-wtimer-clock { color: var(--t); }
.ui-wtimer-round { color: var(--ui-muted); font-size: 15px; }
.ui-wtimer-next { color: var(--ui-muted); font-size: 14px; }
.ui-wtimer-keys { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 10px; }
.ui-wtimer-btn { min-height: 64px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  font: 600 16px/1.1 var(--ui-font); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-wtimer-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-wtimer-btn:disabled { opacity: .5; cursor: default; }
.ui-wtimer-go { border-color: transparent; background: var(--t); color: var(--ui-bg); font-size: 20px; }
.ui-wtimer[data-kind="done"] .ui-wtimer-go, .ui-wtimer[data-kind="ready"] .ui-wtimer-go { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-wtimer-end { grid-column: 1 / -1; min-height: 48px; }
.ui-wtimer-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-wtimer-note:empty { display: none; }
.ui-wtimer-side { display: none; }
.ui-wtimer-list { margin: 0; padding: 0; list-style: none; }
.ui-wtimer-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--ui-radius-sm); font-variant-numeric: tabular-nums; }
.ui-wtimer-row[aria-current] { background: var(--t); color: var(--ui-bg); font-weight: 600; }
.ui-wtimer-past { color: var(--ui-muted); text-decoration: line-through; }
@media (hover: hover) { .ui-wtimer-btn:not(:disabled):not(.ui-wtimer-go):hover { background: var(--ui-subtle); } }
/* Turned, or on a tablet: the face beside the intervals, as a phone on its side has no height for both. */
@container (min-width: 620px) {
  .ui-wtimer-in { flex-direction: row; gap: 20px; }
  .ui-wtimer-side { position: relative; display: block; flex: none; width: min(36%, 300px); overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh - 48px);
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); padding: 6px; }
  .ui-wtimer-clock { font-size: clamp(64px, min(15cqw, 26dvh), 170px); }
}
@media (prefers-reduced-motion: reduce) { .ui-wtimer, .ui-wtimer-ring-now { transition: none; } }


.ui-wtrend { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-wtrend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ui-wtrend-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-wtrend-now { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-wtrend-units { display: flex; flex: none; padding: 2px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-wtrend-unit { min-width: 48px; min-height: 44px; border: 0; border-radius: 4px; background: transparent; color: var(--ui-muted); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-wtrend-unit[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); }
.ui-wtrend-unit:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-wtrend-body { display: grid; gap: 12px; }
.ui-wtrend-chart { min-width: 0; }
.ui-wtrend-read { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-wtrend-clear { flex: none; min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-wtrend-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-wtrend-plot { position: relative; height: 230px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overflow: hidden; outline: none; cursor: crosshair;
  touch-action: pan-y; overscroll-behavior-x: contain; -webkit-tap-highlight-color: transparent; }
.ui-wtrend-plot:focus-visible { box-shadow: var(--ui-focus); }
.ui-wtrend-busy { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-wtrend-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ui-wtrend-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--ui-border); pointer-events: none; }
.ui-wtrend-grid span { position: absolute; left: 4px; top: 1px; color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-wtrend-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--ui-success); pointer-events: none; }
.ui-wtrend-goal span { position: absolute; right: 4px; bottom: 2px; color: var(--ui-success); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-wtrend-hole { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; overflow: hidden; color: var(--ui-muted); font-size: 11px; white-space: nowrap; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ui-muted) 16%, transparent) 6px 8px); }
.ui-wtrend-dots { fill: none; stroke: var(--ui-strong); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-wtrend-line { fill: none; stroke: var(--ui-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* As wide as the plot, the line at its left edge, so a percentage of its own width is a place on the plot at any size. */
.ui-wtrend-cross { position: absolute; inset: 0; pointer-events: none; }
.ui-wtrend-cross::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: var(--ui-fg); }
.ui-wtrend-pt { position: absolute; left: -7px; width: 14px; height: 14px; margin-top: -7px; border: 3px solid var(--ui-surface); border-radius: 50%; background: var(--ui-accent); }
.ui-wtrend-axis { display: flex; justify-content: space-between; gap: 8px; color: var(--ui-muted); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ui-wtrend-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ui-wtrend-stats div { min-width: 0; }
.ui-wtrend-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-wtrend-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-wtrend-none { margin: 0; color: var(--ui-muted); }
@container (min-width: 620px) {
  .ui-wtrend-body { grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; }
  .ui-wtrend-plot { height: 320px; }
  .ui-wtrend-stats { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
  .ui-wtrend-stats dd { font-size: 20px; }
}
@media (hover: hover) { .ui-wtrend-clear:hover { background: var(--ui-subtle); } }


.ui-seats { display: grid; gap: 12px; min-width: 0; max-width: 560px; margin: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font);
  font-variant-numeric: tabular-nums; }
.ui-seats-title { font-size: 16px; font-weight: 700; }
.ui-seats-plot { position: relative; }
.ui-seats-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-seats-plot circle { fill: var(--c); }
.ui-seats-plot .ui-seats-none circle { fill: none; stroke: var(--ui-strong); stroke-width: .5; }
.ui-seats-plot g:hover circle { filter: brightness(1.15); }
.ui-seats-mid { stroke: var(--ui-fg); stroke-width: .6; stroke-dasharray: 2 1.5; opacity: .7; }
.ui-seats-center { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; }
.ui-seats-center b { font-size: clamp(20px, 6vw, 30px); line-height: 1; font-weight: 800; }
.ui-seats-center span { color: var(--ui-muted); font-size: 12px; }
.ui-seats-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.ui-seats-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-seats-key { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.ui-seats-legend .ui-seats-none .ui-seats-key { background: none; border: 1px solid var(--ui-strong); }
.ui-seats-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-seats-n { font-weight: 700; }
.ui-seats-chg { min-width: 40px; color: var(--ui-muted); font-size: 12px; text-align: right; }
.ui-seats-gain { color: var(--ui-success); }
.ui-seats-loss { color: var(--ui-danger); }
.ui-seats-maj { padding: 0 6px; border-radius: 999px; background: var(--ui-success-soft); color: var(--ui-success); font-size: 11px; font-weight: 700; }
.ui-seats-p1 { --c: var(--ui-accent); }
.ui-seats-p2 { --c: var(--ui-danger); }
.ui-seats-p3 { --c: var(--ui-info); }
.ui-seats-p4 { --c: var(--ui-warning); }
.ui-seats-p5 { --c: var(--ui-success); }
.ui-seats-p6 { --c: color-mix(in srgb, var(--ui-accent) 50%, var(--ui-danger)); }
.ui-seats-p7 { --c: color-mix(in srgb, var(--ui-info) 50%, var(--ui-success)); }
.ui-seats-p8 { --c: var(--ui-muted); }


.ui-shift-planner { display: grid; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-shift-planner .ui-shift-planner-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-shift-planner-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-shift-planner-btn { padding: 7px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1.2 var(--ui-font); cursor: pointer; }
.ui-shift-planner-btn:hover { border-color: var(--ui-accent); }
.ui-shift-planner-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-shift-planner-fill { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-shift-planner-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.ui-shift-planner-wrap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-shift-planner-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-shift-planner-table th, .ui-shift-planner-table td { padding: 5px 6px; border-bottom: 1px solid var(--ui-border); text-align: center; white-space: nowrap; }
.ui-shift-planner-table thead th { background: var(--ui-subtle); font-weight: 600; }
.ui-shift-planner-table tbody th, .ui-shift-planner-table tfoot th { position: sticky; left: 0; z-index: 1; background: var(--ui-surface); font-weight: 600; text-align: left; }
.ui-shift-planner-cell select { box-sizing: border-box; width: 84px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-shift-planner-cell select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-shift-planner-bad { background: var(--ui-danger-soft); }
.ui-shift-planner-bad select { border-color: var(--ui-danger); }
.ui-shift-planner-hours { font-weight: 600; }
.ui-shift-planner-over { color: var(--ui-danger); }
.ui-shift-planner-short { background: var(--ui-danger-soft); color: var(--ui-danger); font-weight: 650; }
.ui-shift-planner-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ui-shift-planner-breach { color: var(--ui-danger); }
.ui-shift-planner-unfilled { color: var(--ui-warning); }
.ui-shift-planner-ok { color: var(--ui-success); }
.ui-shift-planner-said { min-height: 1.4em; margin: 0; color: var(--ui-muted); font-size: 13px; }


/* set elsewhere: leaflet- (Leaflet's script sets them) */
.ui-map-view { position: relative; isolation: isolate; width: 100%; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-subtle); font: 14px/1.4 var(--ui-font); }
.ui-map-view-map { width: 100%; height: 100%; }
.ui-map-view .leaflet-container { font: 12px/1.4 var(--ui-font); background: var(--ui-subtle); }
.ui-map-view-label, .ui-map-view-dot, .ui-map-view-pin { width: 0 !important; height: 0 !important; background: none; border: 0; }
.ui-map-view-label > span {
  position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 600 12px/1.2 var(--ui-font); white-space: nowrap; box-shadow: var(--ui-shadow);
  cursor: pointer; transition: transform .1s;
}
.ui-map-view-label:hover > span { transform: translate(-50%, -50%) scale(1.06); }
.ui-map-view-label.ui-map-view-picked > span { background: var(--ui-fg); color: var(--ui-bg); border-color: var(--ui-fg); }
.ui-map-view-dot > span {
  position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%;
  background: var(--ui-accent); box-shadow: 0 0 0 1px rgb(0 0 0 / .3); cursor: pointer;
}
.ui-map-view-dot-success > span { background: var(--ui-success); }
.ui-map-view-dot-warning > span { background: var(--ui-warning); }
.ui-map-view-dot-danger > span { background: var(--ui-danger); }
.ui-map-view-dot-info > span { background: var(--ui-info); }
.ui-map-view-dot-neutral > span { background: var(--ui-muted); }
.ui-map-view-dot.ui-map-view-picked > span { width: 18px; height: 18px; box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 0 0 1px rgb(0 0 0 / .3); }
.ui-map-view-pin > span {
  position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%;
  background: var(--ui-accent); box-shadow: 0 0 0 1px rgb(0 0 0 / .4), var(--ui-shadow); cursor: grab;
}
.ui-map-view .leaflet-marker-icon:focus-visible { outline: none; }
.ui-map-view .leaflet-marker-icon:focus-visible > span { box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-map-view-label > span { transition: none; } }


.ui-reel {
  display: flex; gap: var(--ui-reel-gap, 12px); min-width: 0; padding: var(--ui-reel-pad, 0); overflow: auto hidden;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--ui-reel-pad, 0);
  scrollbar-width: thin; scrollbar-color: var(--ui-strong) transparent; outline: none; border-radius: var(--ui-radius-sm);
}
.ui-reel > *, .ui-reel > quillo-raw > * { flex: none; width: var(--ui-reel-item, auto); min-width: 0; scroll-snap-align: start; }
.ui-reel-center > *, .ui-reel-center > quillo-raw > * { scroll-snap-align: center; }
.ui-reel-nosnap { scroll-snap-type: none; }
.ui-reel-tall > img, .ui-reel-tall > quillo-raw > img { width: auto; height: var(--ui-reel-h); }
.ui-reel-nobar { scrollbar-width: none; }
.ui-reel-nobar::-webkit-scrollbar { display: none; }
.ui-reel:focus-visible { box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: no-preference) { .ui-reel { scroll-behavior: smooth; } }


.ui-propgrid { min-width: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-propgrid-head { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; padding: 0 10px; border: 0;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-fg); font: 600 12px/1 var(--ui-font);
  letter-spacing: .03em; text-transform: uppercase; text-align: left; cursor: pointer; }
.ui-propgrid-head:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-propgrid-head svg { width: 10px; height: 10px; color: var(--ui-muted); transition: transform .15s; }
.ui-propgrid-head[aria-expanded="true"] svg { transform: rotate(90deg); }
.ui-propgrid-count { margin-left: auto; color: var(--ui-muted); font-weight: 500; }
.ui-propgrid-rows { margin: 0; }
.ui-propgrid-row { display: grid; grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) 24px; align-items: center; gap: 8px;
  min-height: 34px; padding: 3px 6px 3px 12px; border-bottom: 1px solid var(--ui-border); }
.ui-propgrid-group:last-child .ui-propgrid-row:last-child { border-bottom: 0; }
.ui-propgrid-name { min-width: 0; overflow: hidden; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap; }
.ui-propgrid-name label { cursor: default; }
.ui-propgrid-changed .ui-propgrid-name { color: var(--ui-fg); font-weight: 600; }
.ui-propgrid-hint { display: block; color: var(--ui-muted); font-size: 11px; font-weight: 400; white-space: normal; }
.ui-propgrid-val { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.ui-propgrid-val input:not([type="checkbox"]):not([type="color"]), .ui-propgrid-val select { width: 100%; min-width: 0; height: 26px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ui-fg); font: 13px/1 var(--ui-font); }
.ui-propgrid-val input:hover, .ui-propgrid-val select:hover { border-color: var(--ui-border); }
.ui-propgrid-val input:focus, .ui-propgrid-val select:focus { outline: none; border-color: var(--ui-accent); background: var(--ui-surface); box-shadow: var(--ui-focus); }
.ui-propgrid-val input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.ui-propgrid-val input[type="checkbox"] { width: 16px; height: 16px; margin: 0 7px; accent-color: var(--ui-accent); }
.ui-propgrid-val input[type="color"] { width: 26px; height: 22px; padding: 0; border: 1px solid var(--ui-border); border-radius: 4px; background: none; }
.ui-propgrid-val input[type="checkbox"]:focus-visible, .ui-propgrid-val input[type="color"]:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-propgrid-unit, .ui-propgrid-code { color: var(--ui-muted); font: 12px/1 var(--ui-mono); }
.ui-propgrid-ro { padding: 0 8px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-propgrid-reset { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none;
  color: var(--ui-accent); cursor: pointer; }
.ui-propgrid-reset:hover { background: var(--ui-accent-soft); }
.ui-propgrid-reset:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-propgrid-reset svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-propgrid-head svg { transition: none; } }


.ui-vp { --ui-vp-line: light-dark(#2a78d6, #3987e5); --ui-vp-poc: light-dark(#eda100, #c98500);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); container-type: inline-size; }
.ui-vp-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-vp-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-vp-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-vp-key { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c); }
.ui-vp-buy { --c: var(--ui-success); } .ui-vp-sell { --c: var(--ui-danger); }
.ui-vp-pockey { --c: var(--ui-vp-poc); height: 3px; width: 14px; }
.ui-vp-frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 32%) auto; column-gap: 8px; padding-top: 8px; }
.ui-vp-plot, .ui-vp-prof, .ui-vp-y { position: relative; height: var(--h); }
.ui-vp-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-vp-va { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--ui-vp-poc) 7%, transparent);
  border-block: 1px dashed color-mix(in srgb, var(--ui-vp-poc) 45%, transparent); }
.ui-vp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-vp-line { fill: none; stroke: var(--ui-vp-line); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ui-vp-pocline { position: absolute; z-index: 1; left: 0; right: 0; border-top: 2px solid var(--ui-vp-poc); pointer-events: none; }
.ui-vp-row { position: absolute; left: 0; right: 0; display: flex; align-items: stretch; padding: 1px 0; }
.ui-vp-row:hover { background: color-mix(in srgb, var(--ui-subtle) 80%, transparent); }
.ui-vp-bar { display: flex; height: 100%; min-width: 1px; border-radius: 0 2px 2px 0; overflow: hidden; opacity: .5; }
.ui-vp-in .ui-vp-bar { opacity: .85; }
.ui-vp-row:hover .ui-vp-bar { opacity: 1; }
.ui-vp-bar span { height: 100%; background: var(--c); }
.ui-vp-poc .ui-vp-bar { box-shadow: 0 0 0 2px var(--ui-vp-poc); opacity: 1; }
.ui-vp-tip { position: absolute; z-index: 20; right: calc(100% + 8px); top: 50%; display: none; min-width: 160px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translateY(-50%); pointer-events: none; }
.ui-vp-row:hover .ui-vp-tip { display: block; }
.ui-vp-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-vp-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-vp-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-vp-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-vp-y .ui-vp-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--ui-vp-poc); color: var(--ui-bg); font-weight: 600; }
.ui-vp-y .ui-vp-edge { color: var(--ui-fg); font-weight: 500; }
.ui-vp-x { position: relative; height: 16px; margin-top: 6px; }
.ui-vp-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-vp-x .ui-vp-first { transform: none; }
.ui-vp-x .ui-vp-end { transform: translateX(-100%); }
.ui-vp-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-vp-note b { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }


.ui-error-screen {
  container-type: inline-size; box-sizing: border-box; display: flex; width: 100%; height: 100%; min-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
  padding: max(16px, var(--ui-safe-top, env(safe-area-inset-top, 0px))) max(20px, var(--ui-safe-right, env(safe-area-inset-right, 0px))) max(16px, var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px))) max(20px, var(--ui-safe-left, env(safe-area-inset-left, 0px)));
}
.ui-error-screen-fill { position: fixed; inset: 0; z-index: 60; height: auto; }
.ui-error-screen-page { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100%; }
.ui-error-screen-say { flex: 1; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 16px 0; text-align: center; }
.ui-error-screen-icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-error-screen-offline .ui-error-screen-icon { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-error-screen-icon svg { width: 44px; height: 44px; }
.ui-error-screen-title { margin: 6px 0 0; font-size: 24px; font-weight: 650; line-height: 1.25; }
.ui-error-screen-title:focus { outline: none; }
.ui-error-screen-text { max-width: 44ch; margin: 0; color: var(--ui-muted); }
.ui-error-screen-reason { max-width: 44ch; margin: 0; }
.ui-error-screen-state { min-height: 1.5em; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-error-screen-more { width: 100%; max-width: 420px; margin-top: 4px; text-align: left; }
.ui-error-screen-more summary { display: flex; align-items: center; min-height: 44px; color: var(--ui-muted); cursor: pointer; }
.ui-error-screen-more summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-error-screen-more dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 14px; }
.ui-error-screen-more dt { color: var(--ui-muted); }
.ui-error-screen-more dd { margin: 0; overflow-wrap: anywhere; font-family: var(--ui-mono); user-select: all; -webkit-user-select: all; }
/* The buttons sit low, where a thumb is. */
.ui-error-screen-actions { display: grid; gap: 10px; flex: none; }
.ui-error-screen-actions .ui-btn { width: 100%; }
@container (min-width: 640px) {
  .ui-error-screen-page { align-items: center; justify-content: center; }
  .ui-error-screen-say { flex: none; grid-template-columns: 148px minmax(0, 460px); justify-items: start; column-gap: 28px; align-items: start; text-align: left; }
  .ui-error-screen-icon { grid-row: 1 / span 6; width: 148px; height: 148px; }
  .ui-error-screen-icon svg { width: 72px; height: 72px; }
  .ui-error-screen-say > :not(.ui-error-screen-icon) { grid-column: 2; }
  .ui-error-screen-title { margin-top: 0; font-size: 28px; }
  .ui-error-screen-actions { display: flex; justify-content: flex-end; width: min(100%, 636px); }
  .ui-error-screen-actions .ui-btn { width: auto; min-width: 160px; }
}


.ui-sidebar-layout { container-type: inline-size; min-width: 0; }
.ui-sidebar-layout-in {
  display: grid; grid-template-columns: var(--ui-sidebar-w, 260px) minmax(0, 1fr); gap: var(--ui-sidebar-gap, 24px);
  align-items: start; min-width: 0;
}
.ui-sidebar-layout-right > .ui-sidebar-layout-in { grid-template-columns: minmax(0, 1fr) var(--ui-sidebar-w, 260px); }
.ui-sidebar-layout-right > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 1; }
.ui-sidebar-layout-aside, .ui-sidebar-layout-main { min-width: 0; }
.ui-sidebar-layout-main { align-self: stretch; }
.ui-sidebar-layout-sticky > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { position: sticky; top: var(--ui-sidebar-top, 16px); }
@container (max-width: 479px) {
  .ui-sidebar-layout-sm > .ui-sidebar-layout-in { grid-template-columns: minmax(0, 1fr); }
  .ui-sidebar-layout-sm > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 1; position: static; }
  .ui-sidebar-layout-sm.ui-sidebar-layout-first > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 0; }
}
@container (max-width: 639px) {
  .ui-sidebar-layout-md > .ui-sidebar-layout-in { grid-template-columns: minmax(0, 1fr); }
  .ui-sidebar-layout-md > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 1; position: static; }
  .ui-sidebar-layout-md.ui-sidebar-layout-first > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 0; }
}
@container (max-width: 899px) {
  .ui-sidebar-layout-lg > .ui-sidebar-layout-in { grid-template-columns: minmax(0, 1fr); }
  .ui-sidebar-layout-lg > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 1; position: static; }
  .ui-sidebar-layout-lg.ui-sidebar-layout-first > .ui-sidebar-layout-in > .ui-sidebar-layout-aside { order: 0; }
}


.ui-year-picker { position: relative; display: grid; gap: 6px; min-width: 0; width: fit-content; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-year-picker-label { font-size: 13px; font-weight: 500; }
.ui-year-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-year-picker-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-width: 150px; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ui-year-picker-trigger:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-year-picker-trigger:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-year-picker-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ui-year-picker-trigger svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-year-picker-trigger span { flex: 1; }
.ui-year-picker-empty { color: var(--ui-muted); }
.ui-year-picker-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; width: 280px; max-width: calc(100vw - 32px); margin-top: 4px; padding: 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-year-picker-pop[hidden] { display: none; }
.ui-year-picker-inline .ui-year-picker-pop { position: static; margin: 0; box-shadow: none; }
.ui-year-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ui-year-picker-head h2 { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-year-picker-nav {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-year-picker-nav svg { width: 16px; height: 16px; }
.ui-year-picker-nav:hover:not([aria-disabled="true"]) { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-year-picker-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-year-picker-nav[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.ui-year-picker-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.ui-year-picker-cell {
  height: 40px; border-radius: var(--ui-radius-sm); text-align: center; font-size: 13px; font-variant-numeric: tabular-nums;
  cursor: pointer; outline: none; transition: background .1s;
}
.ui-year-picker-cell:hover { background: var(--ui-subtle); }
.ui-year-picker-cell:focus-visible, .ui-year-picker-cell:focus { box-shadow: var(--ui-focus); }
.ui-year-picker-outside { color: var(--ui-muted); }
.ui-year-picker-now { color: var(--ui-accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-year-picker-cell[aria-selected="true"] { background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-year-picker-cell[aria-disabled="true"] { color: var(--ui-muted); opacity: .45; cursor: not-allowed; background: none; }
.ui-year-picker-sm .ui-year-picker-trigger { height: 30px; min-width: 120px; font-size: 13px; }
.ui-year-picker-invalid .ui-year-picker-trigger { border-color: var(--ui-danger); }
.ui-year-picker-hint, .ui-year-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-year-picker-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-year-picker-trigger, .ui-year-picker-cell { transition: none; } }


.ui-dn { --ui-dn-1: light-dark(#2a78d6, #3987e5); --ui-dn-2: light-dark(#eb6834, #d95926);
  --ui-dn-3: light-dark(#1baf7a, #199e70); --ui-dn-4: light-dark(#eda100, #c98500);
  --ui-dn-5: light-dark(#e87ba4, #d55181); --ui-dn-6: light-dark(#008300, #008300);
  --ui-dn-7: light-dark(#6250d6, #9085e9); --ui-dn-8: var(--ui-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-width: 0; margin: 0;
  font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-dn-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-dn-s1 { --c: var(--ui-dn-1); } .ui-dn-s2 { --c: var(--ui-dn-2); } .ui-dn-s3 { --c: var(--ui-dn-3); }
.ui-dn-s4 { --c: var(--ui-dn-4); } .ui-dn-s5 { --c: var(--ui-dn-5); } .ui-dn-s6 { --c: var(--ui-dn-6); }
.ui-dn-s7 { --c: var(--ui-dn-7); } .ui-dn-s8 { --c: var(--ui-dn-8); }
.ui-dn-ring { position: relative; flex: none; max-width: 100%; aspect-ratio: 1; }
.ui-dn-ring svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ui-dn-track { fill: none; stroke: var(--ui-subtle); }
.ui-dn-seg { fill: none; stroke: var(--c); stroke-width: var(--w); transition: stroke-width .15s ease, opacity .15s ease; }
.ui-dn-seg:hover { stroke-width: calc(var(--w) + 4px); }
.ui-dn-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.ui-dn-center > span { grid-area: 1 / 1; display: grid; max-width: 64%; }
.ui-dn-center > span:not(.ui-dn-total) { visibility: hidden; }
.ui-dn-center b { font-size: clamp(13px, calc(var(--d) * .105), 26px); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-dn-center small { overflow: hidden; color: var(--ui-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ui-dn-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center;
  flex: 1 1 200px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ui-dn-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.ui-dn-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ui-dn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dn-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-dn-pct { min-width: 3.2em; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ui-dn-legend li > * { transition: opacity .15s ease; }
.ui-dn:has(.ui-dn-p:hover) .ui-dn-total { visibility: hidden; }
.ui-dn:has(.ui-dn-p1:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p1, .ui-dn-p1 > *),
.ui-dn:has(.ui-dn-p2:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p2, .ui-dn-p2 > *),
.ui-dn:has(.ui-dn-p3:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p3, .ui-dn-p3 > *),
.ui-dn:has(.ui-dn-p4:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p4, .ui-dn-p4 > *),
.ui-dn:has(.ui-dn-p5:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p5, .ui-dn-p5 > *),
.ui-dn:has(.ui-dn-p6:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p6, .ui-dn-p6 > *),
.ui-dn:has(.ui-dn-p7:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p7, .ui-dn-p7 > *),
.ui-dn:has(.ui-dn-p8:hover) :is(.ui-dn-seg, .ui-dn-legend li > *):not(.ui-dn-p8, .ui-dn-p8 > *) { opacity: .3; }
.ui-dn:has(.ui-dn-p1:hover) .ui-dn-c1, .ui-dn:has(.ui-dn-p2:hover) .ui-dn-c2, .ui-dn:has(.ui-dn-p3:hover) .ui-dn-c3,
.ui-dn:has(.ui-dn-p4:hover) .ui-dn-c4, .ui-dn:has(.ui-dn-p5:hover) .ui-dn-c5, .ui-dn:has(.ui-dn-p6:hover) .ui-dn-c6,
.ui-dn:has(.ui-dn-p7:hover) .ui-dn-c7, .ui-dn:has(.ui-dn-p8:hover) .ui-dn-c8 { visibility: visible; }
.ui-dn:has(.ui-dn-p1:hover) .ui-dn-seg.ui-dn-p1, .ui-dn:has(.ui-dn-p2:hover) .ui-dn-seg.ui-dn-p2,
.ui-dn:has(.ui-dn-p3:hover) .ui-dn-seg.ui-dn-p3, .ui-dn:has(.ui-dn-p4:hover) .ui-dn-seg.ui-dn-p4,
.ui-dn:has(.ui-dn-p5:hover) .ui-dn-seg.ui-dn-p5, .ui-dn:has(.ui-dn-p6:hover) .ui-dn-seg.ui-dn-p6,
.ui-dn:has(.ui-dn-p7:hover) .ui-dn-seg.ui-dn-p7, .ui-dn:has(.ui-dn-p8:hover) .ui-dn-seg.ui-dn-p8 { stroke-width: calc(var(--w) + 4px); }
@media (prefers-reduced-motion: reduce) { .ui-dn-seg, .ui-dn-legend li > * { transition: none; } }


.ui-kb { min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-kb-cols { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; }
.ui-kb-col { flex: 1 0 220px; max-width: 360px; display: grid; gap: 8px; padding: 10px; border-radius: var(--ui-radius);
  background: var(--ui-subtle); scroll-snap-align: start; }
.ui-kb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.ui-kb .ui-kb-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.ui-kb-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ui-surface); color: var(--ui-muted);
  font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-kb-over .ui-kb-count { background: var(--ui-warning-soft); color: var(--ui-warning); font-weight: 600; }
.ui-kb-list { display: grid; gap: 8px; min-height: 64px; margin: 0; padding: 2px; list-style: none; border-radius: var(--ui-radius-sm);
  transition: background .15s; }
.ui-kb-target { background: color-mix(in srgb, var(--ui-accent) 8%, transparent); }
.ui-kb-end { box-shadow: inset 0 -3px 0 var(--ui-accent); }
.ui-kb-empty { display: grid; place-items: center; min-height: 60px; border: 1.5px dashed var(--ui-border); border-radius: var(--ui-radius-sm);
  color: var(--ui-muted); font-size: 13px; }
.ui-kb-card { position: relative; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-fg) 6%, transparent);
  cursor: grab; outline: none; transition: box-shadow .15s, transform .15s, opacity .15s; }
.ui-kb-card:hover { border-color: var(--ui-strong); }
.ui-kb-card:focus-visible { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-kb-dragging { opacity: .45; }
.ui-kb-lifted { border-color: var(--ui-accent); box-shadow: var(--ui-focus), var(--ui-shadow); transform: rotate(-1deg) scale(1.02); cursor: grabbing; }
.ui-kb-before::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px; border-radius: 2px; background: var(--ui-accent); }
.ui-kb-card-title { margin: 0; padding-right: 48px; font-weight: 500; overflow-wrap: anywhere; }
.ui-kb-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-kb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-kb-tags li { padding: 1px 7px; border-radius: 4px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 500; }
.ui-kb-moves { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.ui-kb-card:hover .ui-kb-moves, .ui-kb-card:focus-within .ui-kb-moves { opacity: 1; }
.ui-kb-moves button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--ui-muted); font: 16px/1 var(--ui-font); cursor: pointer; }
.ui-kb-moves button:hover:not(:disabled) { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-kb-moves button:disabled { visibility: hidden; }
@media (hover: none) { .ui-kb-moves { opacity: 1; } .ui-kb-moves button { width: 30px; height: 30px; } .ui-kb-card-title { padding-right: 64px; } }
@media (prefers-reduced-motion: reduce) { .ui-kb-card, .ui-kb-list, .ui-kb-moves { transition: none; } .ui-kb-lifted { transform: none; } }


.ui-result { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center;
  font: 15px/1.55 var(--ui-font); color: var(--ui-fg); --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-result-error { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-result-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-result-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-result-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%;
  background: var(--ts); color: var(--t); }
.ui-result-icon svg { width: 36px; height: 36px; }
.ui-result-title { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.25; }
.ui-result-code { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-result-text { max-width: 48ch; color: var(--ui-muted); }
.ui-result-text > :first-child { margin-top: 0; }
.ui-result-text > :last-child { margin-bottom: 0; }
.ui-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.ui-result-extra { width: 100%; max-width: 560px; margin-top: 24px; text-align: left; }
.ui-result-lg { padding: 96px 24px; min-height: 60vh; align-content: center; }
.ui-result-lg .ui-result-icon { width: 96px; height: 96px; }
.ui-result-lg .ui-result-icon svg { width: 48px; height: 48px; }
.ui-result-lg .ui-result-title { font-size: 30px; }


.ui-fl { display: grid; gap: 10px; min-width: 0; margin: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-fl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ui-fl-sum { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-fl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-fl-sel {
  height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface) no-repeat right 9px center / 10px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  color: var(--ui-fg); font: 13px/1 var(--ui-font); appearance: none;
}
.ui-fl-tool {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-muted); cursor: pointer;
}
.ui-fl-sel:focus-visible, .ui-fl-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fl-tool:hover { border-color: var(--ui-strong); color: var(--ui-fg); }
.ui-fl-tool[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-fl-tool svg { width: 16px; height: 16px; }
.ui-fl-pair { display: inline-flex; }
.ui-fl-pair .ui-fl-tool:first-child { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
.ui-fl-pair .ui-fl-tool:last-child { margin-left: -1px; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-fl-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-fl table { width: 100%; border-collapse: collapse; }
.ui-fl th, .ui-fl td { padding: 8px 12px; border-bottom: 1px solid var(--ui-border); text-align: left; white-space: nowrap; }
.ui-fl tbody tr:last-child td { border-bottom: 0; }
.ui-fl th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-fl tbody tr:hover td { background: color-mix(in srgb, var(--ui-subtle) 60%, transparent); }
.ui-fl tr.ui-fl-picked td { background: color-mix(in srgb, var(--ui-accent-soft) 70%, transparent); }
.ui-fl .ui-fl-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.ui-fl .ui-fl-check { width: 36px; padding-right: 0; }
.ui-fl input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-accent); vertical-align: middle; }
.ui-fl-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ui-fl-sort:hover, [aria-sort] .ui-fl-sort { color: var(--ui-fg); }
.ui-fl-sort:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fl-sort svg { width: 11px; height: 11px; }
.ui-fl-num .ui-fl-sort { flex-direction: row-reverse; }
.ui-fl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-fl td.ui-fl-main { width: 100%; max-width: 0; }
.ui-fl-name a, .ui-fl-name span:last-child { overflow: hidden; text-overflow: ellipsis; color: var(--ui-fg); font-weight: 500; text-decoration: none; }
.ui-fl-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-fl-name a:focus-visible, .ui-fl-act:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-fl-icon {
  position: relative; flex: none; display: grid; place-items: end center; width: 26px; height: 32px; padding-bottom: 4px;
  border-radius: 3px 9px 3px 3px; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k);
  font: 700 7.5px/1 var(--ui-font); letter-spacing: .02em; --k: var(--ui-muted);
}
.ui-fl-icon::before { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 0 0 0 3px;
  background: color-mix(in srgb, var(--k) 30%, transparent); }
.ui-fl-k-image { --k: var(--ui-success); } .ui-fl-k-pdf { --k: var(--ui-danger); } .ui-fl-k-doc { --k: var(--ui-info); }
.ui-fl-k-sheet { --k: var(--ui-success); } .ui-fl-k-slides, .ui-fl-k-archive { --k: var(--ui-warning); }
.ui-fl-k-audio, .ui-fl-k-video, .ui-fl-k-code { --k: var(--ui-accent); }
.ui-fl-acts { display: flex; justify-content: flex-end; gap: 2px; }
.ui-fl-act {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-fl-act:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-fl-del:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-fl-act svg { width: 16px; height: 16px; }
.ui-fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-fl-tile {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); text-align: center;
}
.ui-fl-tile:hover { border-color: var(--ui-strong); }
.ui-fl-tile.ui-fl-picked { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-fl-tile .ui-fl-icon { width: 44px; height: 54px; padding-bottom: 7px; font-size: 10px; border-radius: 4px 14px 4px 4px; }
.ui-fl-tile .ui-fl-icon::before { width: 14px; height: 14px; }
.ui-fl-tile > input { position: absolute; top: 8px; left: 8px; }
.ui-fl-tile .ui-fl-name { justify-content: center; max-width: 100%; }
.ui-fl-tile .ui-fl-name a, .ui-fl-tile .ui-fl-name span:last-child { white-space: nowrap; }
.ui-fl-meta { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-fl-empty { padding: 28px 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-fl-bulk {
  height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-danger); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-fl-bulk:hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-fl-bulk:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (max-width: 560px) { .ui-fl .ui-fl-date { display: none; } .ui-fl th, .ui-fl td { padding-left: 8px; padding-right: 8px; } }


.ui-tablet-bar {
  position: relative; display: flex; align-items: center; gap: 4px; box-sizing: border-box; min-width: 0; min-height: 60px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  container: ui-tablet-bar / inline-size; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.2 var(--ui-font);
}
.ui-tablet-bar-row { display: flex; align-items: center; flex: 1; gap: 12px; min-width: 0; overflow: hidden; }
.ui-tablet-bar-group { display: flex; align-items: center; flex: none; gap: 2px; }
.ui-tablet-bar-group + .ui-tablet-bar-group { position: relative; }
.ui-tablet-bar-group + .ui-tablet-bar-group::before { content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 1px; background: var(--ui-border); }
.ui-tablet-bar-gone { display: none; }
.ui-tablet-bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; box-sizing: border-box; min-width: 44px; height: 46px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 500 14px/1.2 var(--ui-font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-tablet-bar-btn[aria-pressed="true"], .ui-tablet-bar-btn[aria-expanded="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-tablet-bar-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-tablet-bar-btn:hover { background: var(--ui-subtle); } }
.ui-tablet-bar-icon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; font-weight: 600; font-size: 16px; line-height: 1; }
.ui-tablet-bar-icon svg { width: 22px; height: 22px; }
.ui-tablet-bar-more { flex: none; }
.ui-tablet-bar-more-none { display: none; }
/* Every group at its full width, out of sight, so what fits can be worked out at any width. */
.ui-tablet-bar-measure { position: absolute; left: 0; top: 0; display: flex; gap: 12px; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
@container ui-tablet-bar (max-width: 839.98px) {
  .ui-tablet-bar-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ui-tablet-bar-rows { display: grid; gap: 2px; }
.ui-tablet-bar-rows h3 { margin: 10px 0 2px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-tablet-bar-rows h3:first-child { margin-top: 0; }
.ui-tablet-bar-row-btn {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 46px; padding: 4px 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-fg); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-tablet-bar-row-btn[aria-pressed="true"], .ui-tablet-bar-row-btn[aria-checked="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-tablet-bar-row-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tablet-bar-custom { display: grid; gap: 8px; }
.ui-tablet-bar-custom-group {
  position: relative; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ui-tablet-bar-custom-dragging { z-index: 2; transition: none; box-shadow: var(--ui-shadow-lg); }
.ui-tablet-bar-custom-top { display: flex; align-items: center; gap: 2px; min-height: 46px; padding-left: 2px; }
.ui-tablet-bar-custom-top b { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-tablet-bar-handle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; touch-action: none; cursor: grab; color: var(--ui-muted); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui-tablet-bar-handle svg { width: 20px; height: 20px; pointer-events: none; }
.ui-tablet-bar-small { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 18px/1 var(--ui-font); cursor: pointer; }
.ui-tablet-bar-small:disabled { color: var(--ui-strong); cursor: default; }
.ui-tablet-bar-small:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tablet-bar-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; cursor: pointer; }
.ui-tablet-bar-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ui-accent); }
.ui-tablet-bar-reset { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ui-tablet-bar-custom-group { transition: none; } }


.ui-mention-tray { position: relative; container-type: inline-size; min-width: 0; font: 16px/22px var(--ui-font); color: var(--ui-fg); }
.ui-mention-tray-sticky { position: sticky; bottom: 0; z-index: 3; }
.ui-mention-tray-lifted { position: relative; transform: translateY(calc(-1 * var(--ui-mention-tray-lift, 0px))); }
.ui-mention-tray-box { position: relative; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); }
.ui-mention-tray-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
/* The mirror lies behind the box and has its text, letter for letter: what the box cannot draw, the marks, and where its cursor is. */
.ui-mention-tray-mirror, .ui-mention-tray-field {
  box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 10px 12px; border: 0; font: inherit; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 8;
}
.ui-mention-tray-mirror { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
.ui-mention-tray-mirror .ui-mention-tray-name { border-radius: 4px; background: var(--ui-accent-soft); box-shadow: 0 0 0 1px var(--ui-accent-soft); }
.ui-mention-tray-field { position: relative; resize: none; overflow-y: hidden; border-radius: var(--ui-radius); background: transparent; color: var(--ui-fg); outline: none; -webkit-appearance: none; appearance: none; overscroll-behavior: contain; }
.ui-mention-tray-field::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-mention-tray-pop {
  position: absolute; left: 0; right: 0; z-index: 6; box-sizing: border-box; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); overscroll-behavior: contain;
}
.ui-mention-tray-pop::after { content: ""; display: block; height: 0; }
.ui-mention-tray-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: var(--ui-radius-sm); cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ui-mention-tray-opt[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-mention-tray-face { flex: none; display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); font: 600 12px var(--ui-font); }
.ui-mention-tray-face img { width: 100%; height: 100%; object-fit: cover; }
.ui-mention-tray-who { display: grid; min-width: 0; line-height: 1.25; }
.ui-mention-tray-who b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-mention-tray-who small { overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
@container (min-width: 520px) { .ui-mention-tray-pop { right: auto; width: 280px; } }


.ui-offq { position: relative; container-type: inline-size; display: grid; gap: 10px; min-width: 0; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-offq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ui-offq-title { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 600; }
.ui-offq-net { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ui-success-soft); color: var(--ui-success); font-size: 13px; font-weight: 500; }
.ui-offq-net::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ui-offq-net[data-on="false"] { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-offq-said { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-offq-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-offq-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-offq-row[data-status="failed"] { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); }
.ui-offq-row[data-status="sent"] { background: var(--ui-subtle); }
.ui-offq-place { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-offq-row[data-status="sending"] .ui-offq-place { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-offq-row[data-status="sent"] .ui-offq-place { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-offq-row[data-status="failed"] .ui-offq-place { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-offq-text { display: grid; gap: 1px; min-width: 0; }
.ui-offq-name { overflow-wrap: anywhere; font-weight: 500; }
.ui-offq-detail { overflow-wrap: anywhere; color: var(--ui-muted); font-size: 13px; }
.ui-offq-state { color: var(--ui-muted); font-size: 13px; }
.ui-offq-row[data-status="failed"] .ui-offq-state { color: var(--ui-danger); }
.ui-offq-row[data-status="sent"] .ui-offq-state { color: var(--ui-success); }
.ui-offq-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ui-offq-btn { min-width: 76px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-offq-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-offq-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-offq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-offq-lasts { flex: 1 1 200px; margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (hover: hover) { .ui-offq-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); } .ui-offq-go:hover { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); } }
@container (min-width: 560px) {
  .ui-offq-row { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; }
  .ui-offq-acts { grid-column: 3; grid-row: 1; margin-top: 0; }
}


.ui-media-card {
  display: grid; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.5 var(--ui-font); box-shadow: var(--ui-shadow);
}
.ui-media-card-side { grid-template-columns: var(--w, 200px) minmax(0, 1fr); }
.ui-media-card-side-right { grid-template-columns: minmax(0, 1fr) var(--w, 200px); }
.ui-media-card-side-right .ui-media-card-media { order: 1; }
.ui-media-card-media { display: block; position: relative; overflow: hidden; aspect-ratio: var(--r, 16/9); background: var(--ui-subtle); color: inherit; }
.ui-media-card-side .ui-media-card-media, .ui-media-card-side-right .ui-media-card-media { aspect-ratio: auto; min-height: 100%; }
.ui-media-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-media-card-side .ui-media-card-media img, .ui-media-card-side-right .ui-media-card-media img { position: absolute; inset: 0; }
.ui-media-card-body { display: grid; align-content: start; gap: 6px; padding: 16px 18px; }
.ui-media-card-meta { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ui-muted); }
.ui-media-card-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-media-card-title a { color: inherit; text-decoration: none; }
.ui-media-card-title a:hover { color: var(--ui-accent); }
.ui-media-card-title a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-media-card-text { margin: 0; color: var(--ui-muted); }
.ui-media-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 520px) { .ui-media-card-side, .ui-media-card-side-right { grid-template-columns: 1fr; } .ui-media-card-side-right .ui-media-card-media { order: 0; } .ui-media-card-side .ui-media-card-media, .ui-media-card-side-right .ui-media-card-media { aspect-ratio: var(--r, 16/9); min-height: 0; } }


.ui-pgallery { display: grid; gap: 10px; min-width: 0; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-pgallery-left { grid-template-columns: 64px 1fr; }
.ui-pgallery-left .ui-pgallery-thumbs { order: -1; flex-direction: column; }
.ui-pgallery-stage { position: relative; aspect-ratio: var(--r, 1); overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-subtle); touch-action: pan-y; }
.ui-pgallery-stage img { display: block; width: 100%; height: 100%; object-fit: var(--fit, cover); user-select: none; -webkit-user-drag: none; }
.ui-pgallery-stage:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pgallery-count { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ui-fg) 70%, transparent);
  color: var(--ui-bg); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-pgallery-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; padding: 0;
  border: 1px solid var(--ui-border); border-radius: 50%; background: color-mix(in srgb, var(--ui-surface) 90%, transparent); color: var(--ui-fg);
  box-shadow: var(--ui-shadow); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.ui-pgallery-stage:hover .ui-pgallery-nav, .ui-pgallery-nav:focus-visible, .ui-pgallery-stage:focus-within .ui-pgallery-nav { opacity: 1; }
.ui-pgallery-nav:hover { background: var(--ui-surface); }
.ui-pgallery-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pgallery-nav svg { width: 18px; height: 18px; }
.ui-pgallery-prev { left: 10px; }
.ui-pgallery-next { right: 10px; }
.ui-pgallery-thumbs { display: flex; gap: 8px; margin: 0; padding: 2px; overflow: auto; scrollbar-width: thin; }
.ui-pgallery-thumb { flex: none; width: 60px; height: 60px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); cursor: pointer; opacity: .7; transition: opacity .15s, border-color .15s; }
.ui-pgallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-pgallery-thumb:hover { opacity: 1; }
.ui-pgallery-thumb[aria-selected="true"] { opacity: 1; border-color: var(--ui-accent); }
.ui-pgallery-thumb:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-pgallery-nav, .ui-pgallery-thumb { transition: none; } }


.ui-pnl { --ui-pnl-line: light-dark(#2a78d6, #3987e5);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-pnl-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-pnl-up { --k: var(--ui-success); } .ui-pnl-down { --k: var(--ui-danger); }
.ui-pnl-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.ui-pnl-stats div { display: grid; gap: 2px; }
.ui-pnl-stats dt { color: var(--ui-muted); font-size: 12px; }
.ui-pnl-stats dd { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-pnl-stats .ui-pnl-up dd, .ui-pnl-stats .ui-pnl-down dd { color: var(--k); }
.ui-pnl-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-pnl-plot { position: relative; }
.ui-pnl-pane, .ui-pnl-cp, .ui-pnl-yp { position: relative; height: var(--h); }
.ui-pnl-bpane, .ui-pnl-cb, .ui-pnl-yb { position: relative; height: var(--bh); margin-top: 26px; }
.ui-pnl-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-pnl-zero { background: var(--ui-strong); }
.ui-pnl-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-pnl-total { fill: none; stroke: var(--ui-pnl-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-pnl-peak { fill: none; stroke: var(--ui-danger); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.ui-pnl-dd { fill: var(--ui-danger); opacity: .14; }
.ui-pnl-cols { position: absolute; inset: 0; display: flex; }
.ui-pnl-col { position: relative; flex: 1; min-width: 0; }
.ui-pnl-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-pnl-col:hover::before { opacity: .9; }
.ui-pnl-bar { position: absolute; left: 15%; right: 15%; min-height: 1px; border-radius: 1px; background: var(--k); opacity: .85; }
.ui-pnl-col:hover .ui-pnl-bar { opacity: 1; }
.ui-pnl-dot { position: absolute; z-index: 2; left: 50%; display: none; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--ui-pnl-line); box-shadow: 0 0 0 2px var(--ui-bg); }
.ui-pnl-col:hover .ui-pnl-dot { display: block; }
.ui-pnl-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-pnl-flip .ui-pnl-tip { left: auto; right: calc(50% + 10px); }
.ui-pnl-col:hover .ui-pnl-tip { display: block; }
.ui-pnl-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-pnl-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-pnl-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-pnl-tip .ui-pnl-up b, .ui-pnl-tip .ui-pnl-down b { color: var(--k); }
.ui-pnl-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-pnl-x { position: relative; height: 16px; margin-top: 6px; }
.ui-pnl-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-pnl-x .ui-pnl-first { transform: none; }
.ui-pnl-x .ui-pnl-end { transform: translateX(-100%); }


.ui-readtime { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; font: 13px/1.4 var(--ui-font); color: var(--ui-muted);
  white-space: nowrap; }
.ui-readtime svg { flex: none; width: 14px; height: 14px; }
.ui-readtime-sm { font-size: 12px; }
.ui-readtime-sm svg { width: 12px; height: 12px; }


.ui-week-view { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); font: 12px/1.3 var(--ui-font); color: var(--ui-fg); overflow: hidden; --wv-h: 48px; }
.ui-week-view-corner { border-bottom: 1px solid var(--ui-border); }
.ui-week-view-head { display: grid; grid-template-columns: repeat(var(--wv-days, 7), minmax(0, 1fr)); border-bottom: 1px solid var(--ui-border); }
.ui-week-view-day { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-left: 1px solid var(--ui-border); color: var(--ui-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.ui-week-view-day b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ui-fg); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.ui-week-view-today b { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-week-view-allday { display: grid; grid-template-columns: repeat(var(--wv-days, 7), minmax(0, 1fr)); min-height: 8px; border-bottom: 1px solid var(--ui-border); }
.ui-week-view-allday-cell { display: grid; gap: 2px; padding: 3px; border-left: 1px solid var(--ui-border); }
.ui-week-view-allday-label { display: flex; align-items: center; justify-content: flex-end; padding: 4px 6px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); }
.ui-week-view-scroll { grid-column: 1 / -1; display: grid; grid-template-columns: 52px minmax(0, 1fr); max-height: 560px; overflow-y: auto; }
.ui-week-view-hours { position: relative; height: calc(var(--wv-hours) * var(--wv-h)); }
.ui-week-view-hour { position: absolute; right: 6px; width: 100%; transform: translateY(-50%); color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ui-week-view-body { position: relative; display: grid; grid-template-columns: repeat(var(--wv-days, 7), minmax(0, 1fr)); height: calc(var(--wv-hours) * var(--wv-h)); background-image: linear-gradient(var(--ui-border) 1px, transparent 1px); background-size: 100% var(--wv-h); }
.ui-week-view-col { position: relative; border-left: 1px solid var(--ui-border); }
.ui-week-view-today.ui-week-view-col { background: color-mix(in srgb, var(--ui-accent) 5%, transparent); }
.ui-week-view-event {
  position: absolute; display: grid; align-content: start; gap: 1px; overflow: hidden; margin: 1px; padding: 3px 6px; border: 0; border-left: 3px solid var(--t);
  border-radius: 4px; background: color-mix(in srgb, var(--t) 16%, var(--ui-surface)); color: var(--ui-fg); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; --t: var(--ui-accent);
}
.ui-week-view-event:hover { background: color-mix(in srgb, var(--t) 28%, var(--ui-surface)); }
.ui-week-view-event:focus-visible { outline: none; box-shadow: var(--ui-focus); z-index: 2; }
.ui-week-view-event b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-week-view-event span { color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-week-view-success { --t: var(--ui-success); }
.ui-week-view-warning { --t: var(--ui-warning); }
.ui-week-view-danger { --t: var(--ui-danger); }
.ui-week-view-info { --t: var(--ui-info); }
.ui-week-view-neutral { --t: var(--ui-strong); }
.ui-week-view-allday .ui-week-view-event { position: static; margin: 0; padding: 2px 6px; }
.ui-week-view-now { position: absolute; left: 0; right: 0; z-index: 1; height: 2px; background: var(--ui-danger); pointer-events: none; }
.ui-week-view-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-danger); }
@media (max-width: 640px) { .ui-week-view { grid-template-columns: 40px minmax(0, 1fr); } .ui-week-view-scroll { grid-template-columns: 40px minmax(0, 1fr); } .ui-week-view-day { font-size: 10px; } .ui-week-view-event span { display: none; } }


.ui-footnote-ref { font-size: .75em; line-height: 0; vertical-align: super; }
.ui-footnote-ref a { padding: 0 2px; border-radius: 3px; color: var(--ui-accent); font-weight: 600; text-decoration: none; }
.ui-footnote-ref a:hover { text-decoration: underline; }
.ui-footnote-ref a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-footnote-ref:target a { background: var(--ui-accent-soft); }
.ui-footnote-list { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--ui-border); font: 14px/1.5 var(--ui-font); color: var(--ui-muted); }
.ui-footnote-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.ui-footnote-list ol { margin: 0; padding-left: 1.6em; }
.ui-footnote-list li { padding: 2px 4px; margin: 2px -4px; border-radius: var(--ui-radius-sm); overflow-wrap: anywhere; }
.ui-footnote-list li::marker { font-weight: 600; color: var(--ui-accent); }
.ui-footnote-list li:target { background: var(--ui-accent-soft); color: var(--ui-fg); }
.ui-footnote-back { margin-left: 6px; border-radius: 3px; color: var(--ui-accent); text-decoration: none; }
.ui-footnote-back:hover { text-decoration: underline; }
.ui-footnote-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-zoom-image {
  position: relative; display: block; overflow: hidden; width: 100%; aspect-ratio: var(--r, 4/3); border-radius: var(--ui-radius);
  background: var(--ui-subtle); cursor: zoom-in; outline: none; font: 12px/1 var(--ui-font);
}
.ui-zoom-image:focus-visible { box-shadow: var(--ui-focus); }
.ui-zoom-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--x, 50%) var(--y, 50%);
  transition: transform .2s ease-out; pointer-events: none; -webkit-user-drag: none;
}
.ui-zoom-image-on { cursor: zoom-out; }
.ui-zoom-image-on img { transform: scale(var(--z, 2.5)); transition: transform .2s ease-out, transform-origin .05s linear; }
.ui-zoom-image-hint {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px;
  border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; pointer-events: none; transition: opacity .2s;
}
.ui-zoom-image-hint svg { width: 14px; height: 14px; }
.ui-zoom-image-on .ui-zoom-image-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ui-zoom-image img, .ui-zoom-image-on img, .ui-zoom-image-hint { transition: none; } }


.ui-photo-editor { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-photo-editor-body { display: grid; gap: 12px; }
.ui-photo-editor-stage { display: grid; place-items: center; min-height: 160px; padding: 24px; border-radius: var(--ui-radius-sm); background: #1b1b1f; color: #eee; overscroll-behavior: contain; }
.ui-photo-editor-sheet { --x: 0; --y: 0; --w: 1; --h: 1; position: relative; width: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-photo-editor-clip { position: absolute; inset: 0; overflow: hidden; }
.ui-photo-editor-sheet[hidden] { display: none; }
.ui-photo-editor-sheet canvas { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.ui-photo-editor-empty { margin: 0; color: #ccc; text-align: center; }
.ui-photo-editor-box {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .5); outline: 1.5px solid #fff; touch-action: none; cursor: move;
}
/* With another tool the crop still shows, but a finger goes through it. */
.ui-photo-editor-box-off { outline: none; pointer-events: none; }
/* The dimming stays on the picture; the handles are outside that clip, so they stay whole. */
.ui-photo-editor-handles { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); pointer-events: none; }
.ui-photo-editor-handle {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; touch-action: none; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.ui-photo-editor-handle::after { content: ""; position: absolute; inset: 13px; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ui-photo-editor-handle:focus-visible { box-shadow: var(--ui-focus); }
.ui-photo-editor-nw { left: 0; top: 0; }
.ui-photo-editor-ne { left: 100%; top: 0; }
.ui-photo-editor-se { left: 100%; top: 100%; }
.ui-photo-editor-sw { left: 0; top: 100%; }
.ui-photo-editor-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ui-photo-editor-tools { display: flex; gap: 6px; }
.ui-photo-editor-tool {
  flex: 1 1 0; min-width: 44px; height: 46px; padding: 0 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-photo-editor-tool[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-photo-editor-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-photo-editor-panel { display: grid; gap: 6px; }
.ui-photo-editor-field { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; align-items: center; gap: 6px; font-size: 13px; }
.ui-photo-editor-field output { color: var(--ui-muted); font-variant-numeric: tabular-nums; text-align: right; }
.ui-photo-editor-field input[type=range] { width: 100%; min-width: 44px; height: 44px; margin: 0; accent-color: var(--ui-accent); }
.ui-photo-editor-ruler-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; align-items: center; }
.ui-photo-editor-ruler-row button { width: 46px; height: 46px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 18px/1 var(--ui-font); cursor: pointer; }
.ui-photo-editor-ruler {
  position: relative; height: 54px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); touch-action: pan-y; cursor: ew-resize; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: var(--ui-surface);
}
/* Its place is set by hand, on an element with no bound style, which would be rewritten in mid-drag. */
.ui-photo-editor-ticks { position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none;
  background: linear-gradient(90deg, var(--ui-muted) 1px, transparent 1px) var(--ui-ruler-at, 0px) 0 / 10px 12px repeat-x; }
.ui-photo-editor-ruler:focus-visible { box-shadow: var(--ui-focus); }
.ui-photo-editor-ruler::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ui-accent); }
.ui-photo-editor-degrees { position: absolute; left: 0; right: 0; bottom: 6px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
.ui-photo-editor-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-photo-editor-bar > * { flex: 1 1 auto; }
.ui-photo-editor-open {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; overflow: hidden; border: 1px solid var(--ui-border); flex: 1 1 auto;
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer;
}
.ui-photo-editor-open input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.ui-photo-editor-open:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-photo-editor-note { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-photo-editor-why { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-photo-editor input[type=file][hidden] { display: none; }
/* A tablet, or a wide pane: the tools beside the picture, as there is room for both. */
@container (min-width: 440px) {
  .ui-photo-editor-body { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; }
}


.ui-steps { display: flex; margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); counter-reset: ui-steps; }
.ui-steps-item { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: start; gap: 8px; padding-right: 12px; }
.ui-steps-item:last-child { flex: none; padding-right: 0; }
.ui-steps-item:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: 36px; right: 8px; height: 2px; border-radius: 2px; background: var(--ui-border);
}
.ui-steps-done:not(:last-child)::after { background: var(--ui-accent); }
.ui-steps-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted);
  font: 600 13px/1 var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-steps-done .ui-steps-mark { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-steps-current .ui-steps-mark { border-color: var(--ui-accent); color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-steps-mark svg { width: 14px; height: 14px; }
.ui-steps-text { display: grid; gap: 1px; }
.ui-steps-label { font-weight: 500; }
.ui-steps-upcoming .ui-steps-label { color: var(--ui-muted); }
.ui-steps-hint { color: var(--ui-muted); font-size: 13px; }
.ui-steps-vertical { flex-direction: column; }
.ui-steps-vertical .ui-steps-item { grid-template-columns: 28px 1fr; align-items: start; gap: 12px; padding: 0 0 22px; }
.ui-steps-vertical .ui-steps-item:last-child { padding-bottom: 0; }
.ui-steps-vertical .ui-steps-item:not(:last-child)::after { top: 34px; bottom: 6px; left: 13px; right: auto; width: 2px; height: auto; }
.ui-steps-vertical .ui-steps-text { padding-top: 3px; }
@media (max-width: 600px) {
  .ui-steps:not(.ui-steps-vertical) .ui-steps-hint { display: none; }
  .ui-steps:not(.ui-steps-vertical) .ui-steps-label { font-size: 13px; }
}


html:has(.ui-seatps-dlg[open]) { overflow: hidden; }
.ui-seatps-dlg {
  box-sizing: border-box; position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100vw; height: calc(100dvh - max(12px, env(safe-area-inset-top))); max-height: none; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--ui-border); border-bottom: 0; border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0; background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.4 var(--ui-font);
  overscroll-behavior: contain; transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.ui-seatps-dlg[open] { display: flex; flex-direction: column; animation: ui-seatps-up .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes ui-seatps-up { from { transform: translateY(100%); } }
.ui-seatps-dlg::backdrop { background: var(--ui-overlay); }
.ui-seatps-grip { flex: none; display: grid; place-items: center; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.ui-seatps-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-seatps-grip:focus-visible { outline: none; }
.ui-seatps-grip:focus-visible span { background: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-seatps-head { flex: none; display: flex; align-items: center; gap: 8px; margin-top: -8px; padding: 0 8px 6px 16px; touch-action: none; user-select: none; }
.ui-seatps-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; }
.ui-seatps-icon { box-sizing: border-box; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 20px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-seatps-icon:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-seatps-icon svg { width: 18px; height: 18px; }
.ui-seatps-close { border-color: transparent; background: transparent; color: var(--ui-muted); }
.ui-seatps-in { flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.ui-seatps-main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Clip, not hidden: a hidden box scrolls when a seat in it takes focus, and the pan is ours. */
.ui-seatps-view { position: relative; flex: 1; min-height: 0; overflow: clip; touch-action: none; -webkit-touch-callout: none; user-select: none; background: var(--ui-subtle); }
.ui-seatps-plane { position: absolute; left: 0; top: 0; display: grid; gap: 4px; width: max-content; padding: 10px 8px 24px; transform-origin: 0 0; will-change: transform; }
.ui-seatps-plane[data-glide] { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.ui-seatps-row { display: flex; gap: 4px; align-items: center; }
.ui-seatps-num { width: 28px; color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: center; }
.ui-seatps-gap { width: 24px; }
.ui-seatps-exit { display: flex; justify-content: space-between; padding: 0 36px; color: var(--ui-danger); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.ui-seatps-seat {
  box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: 10px 10px 6px 6px; background: var(--f, var(--ui-surface)); color: var(--ui-fg);
  font: 600 13px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-seatps-seat[data-band="1"] { --f: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); }
.ui-seatps-seat[data-band="2"] { --f: color-mix(in srgb, var(--ui-warning) 22%, var(--ui-surface)); }
.ui-seatps-seat[data-band="3"] { --f: color-mix(in srgb, var(--ui-info) 20%, var(--ui-surface)); }
.ui-seatps-seat[aria-disabled="true"] { background: var(--ui-strong); color: var(--ui-muted); opacity: .5; cursor: default; }
.ui-seatps-seat[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); opacity: 1; }
.ui-seatps-seat[data-access] { box-shadow: inset 0 0 0 2px var(--ui-success); }
.ui-seatps-seat:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.ui-seatps-foot { flex: none; display: grid; gap: 8px; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); }
.ui-seatps-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-seatps-legend li { display: flex; align-items: center; gap: 5px; }
.ui-seatps-swatch { width: 12px; height: 12px; border: 1px solid var(--ui-border); border-radius: 3px; background: var(--f, var(--ui-surface)); }
.ui-seatps-swatch[data-band="1"] { --f: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); }
.ui-seatps-swatch[data-band="2"] { --f: color-mix(in srgb, var(--ui-warning) 22%, var(--ui-surface)); }
.ui-seatps-swatch[data-band="3"] { --f: color-mix(in srgb, var(--ui-info) 20%, var(--ui-surface)); }
.ui-seatps-say { min-height: 40px; margin: 0; font-size: 14px; }
.ui-seatps-note { color: var(--ui-muted); display: block; }
.ui-seatps-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-seatps-chip {
  box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-seatps-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-seatps-chip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* With the room, a card in the middle with the cabin beside what it costs. */
@media (min-width: 700px) {
  .ui-seatps-dlg { inset: 0; width: min(92vw, 860px); height: min(88dvh, 760px); margin: auto; border-bottom: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 8px); }
  .ui-seatps-dlg[open] { animation: none; }
  .ui-seatps-grip { display: none; }
  .ui-seatps-head { margin-top: 0; padding-top: 10px; touch-action: auto; }
}
.ui-seatps-in-row { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@container (min-width: 620px) {
  .ui-seatps-in-row { flex-direction: row; }
  .ui-seatps-foot { flex: 0 0 300px; align-content: start; border-top: 0; border-left: 1px solid var(--ui-border); }
}
@media (hover: hover) { .ui-seatps-seat:not([aria-disabled="true"]):hover { border-color: var(--ui-accent); } }
@media (prefers-reduced-motion: reduce) { .ui-seatps-dlg, .ui-seatps-plane[data-glide] { transition: none; } .ui-seatps-dlg[open] { animation: none; } }


.ui-upprog { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-upprog-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); color: var(--ui-muted); }
.ui-upprog-icon svg { width: 18px; height: 18px; }
.ui-upprog-done .ui-upprog-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-upprog-error .ui-upprog-icon { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-upprog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ui-upprog-btn { grid-row: 1 / 3; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-upprog-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-upprog-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-upprog-pct { grid-row: 1 / 3; font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.ui-upprog-body { display: grid; gap: 5px; min-width: 0; }
.ui-upprog-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-upprog-fill { height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width .25s ease; }
.ui-upprog-done .ui-upprog-fill { background: var(--ui-success); }
.ui-upprog-error .ui-upprog-fill { background: var(--ui-danger); }
.ui-upprog-paused .ui-upprog-fill { background: var(--ui-strong); }
.ui-upprog-meta { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-upprog-error .ui-upprog-meta { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-upprog-fill { transition: none; } }


.ui-bulletc { --ui-bulletc-1: light-dark(#2a78d6, #3987e5);
  display: grid; gap: 14px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-bulletc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-bulletc-rows { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 14px 14px; align-items: start; }
.ui-bulletc-row { display: contents; }
.ui-bulletc-name { max-width: 14em; text-align: right; }
.ui-bulletc-name b { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-bulletc-name small { display: block; color: var(--ui-muted); font-size: 11px; }
.ui-bulletc-track { position: relative; height: 24px; }
.ui-bulletc-band { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--b); }
.ui-bulletc-band:first-child { border-radius: 3px 0 0 3px; }
.ui-bulletc-end { border-radius: 0 3px 3px 0; }
.ui-bulletc-b1 { background: color-mix(in srgb, var(--ui-fg) 24%, var(--ui-bg)); }
.ui-bulletc-b2 { background: color-mix(in srgb, var(--ui-fg) 14%, var(--ui-bg)); }
.ui-bulletc-b3 { background: color-mix(in srgb, var(--ui-fg) 7%, var(--ui-bg)); }
.ui-bulletc-b4 { background: color-mix(in srgb, var(--ui-fg) 3%, var(--ui-bg)); }
.ui-bulletc-bar { position: absolute; top: 8px; bottom: 8px; left: 0; width: var(--v); min-width: 1px; background: var(--ui-bulletc-1); border-radius: 0 2px 2px 0; }
.ui-bulletc-target { position: absolute; top: 3px; bottom: 3px; left: var(--t); width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--ui-fg); }
.ui-bulletc-hit:hover .ui-bulletc-bar { filter: brightness(1.12); }
.ui-bulletc-ticks { position: relative; height: 14px; margin-top: 3px; }
.ui-bulletc-ticks span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bulletc-ticks span:first-child { transform: none; }
.ui-bulletc-ticks span:last-child:not(:first-child) { transform: translateX(-100%); }
.ui-bulletc-hit { position: relative; }
.ui-bulletc-tip { position: absolute; z-index: 20; bottom: calc(100% - 10px); right: 0; display: none; min-width: 140px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-bulletc-hit:hover .ui-bulletc-tip { display: block; }
.ui-bulletc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-bulletc-tip p { display: flex; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-bulletc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }


.ui-navstack-demo-row { display: block; box-sizing: border-box; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); text-align: start; cursor: pointer; }
.ui-navstack-demo-row small { display: block; color: var(--ui-muted); }
.ui-navstack-demo-field { box-sizing: border-box; display: block; width: calc(100% - 24px); height: 44px; margin: 12px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px var(--ui-font); }


.ui-spinner { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  font: 14px/1.4 var(--ui-font); color: var(--ui-muted); --t: var(--ui-accent); --s: 20px; }
.ui-spinner-ring {
  flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  border: max(2px, calc(var(--s) / 9)) solid color-mix(in srgb, var(--t) 18%, transparent);
  border-top-color: var(--t); animation: ui-spinner-turn .75s linear infinite;
}
.ui-spinner-sm { --s: 14px; font-size: 13px; }
.ui-spinner-lg { --s: 32px; }
.ui-spinner-neutral { --t: var(--ui-muted); }
.ui-spinner-success { --t: var(--ui-success); }
.ui-spinner-warning { --t: var(--ui-warning); }
.ui-spinner-danger { --t: var(--ui-danger); }
.ui-spinner-info { --t: var(--ui-info); }
.ui-spinner-current { --t: currentColor; color: inherit; }
@keyframes ui-spinner-turn { to { transform: rotate(360deg); } }
@keyframes ui-spinner-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .ui-spinner-ring { animation: ui-spinner-pulse 2s ease-in-out infinite; border-color: var(--t); }
}


.ui-long-press { display: flex; align-items: center; gap: 4px; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
/* The callout and the browser's drag are off for good here; selection only during a press. */
.ui-long-press-area { flex: 1; min-width: 0; border-radius: var(--ui-radius-sm); outline: none; touch-action: pan-y; -webkit-touch-callout: none;
  transition: transform .18s, opacity .18s; }
.ui-long-press-area img { -webkit-user-drag: none; }
.ui-long-press-area:focus-visible { box-shadow: var(--ui-focus); }
.ui-long-press-pressing { transform: scale(.98); opacity: .85; user-select: none; -webkit-user-select: none; }
.ui-long-press-more { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-long-press-more svg { width: 20px; height: 20px; }
.ui-long-press-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* In the top layer, so a frame's transform or overflow does not hold it. */
.ui-long-press-menu { position: fixed; inset: auto; box-sizing: border-box; width: 240px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 6px; overflow: auto;
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); }
.ui-long-press-menu[open] { animation: ui-long-press-pop .16s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes ui-long-press-pop { from { opacity: 0; transform: scale(.9); } }
.ui-long-press-menu::backdrop { background: var(--ui-overlay); }
.ui-long-press-item { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ui-long-press-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-long-press-hot { background: var(--ui-subtle); }
.ui-long-press-danger { color: var(--ui-danger); }
.ui-long-press-item[disabled] { color: var(--ui-muted); opacity: .6; cursor: default; }
@media (hover: hover) {
  .ui-long-press-more:hover { background: var(--ui-subtle); color: var(--ui-fg); }
  .ui-long-press-item:not([disabled]):hover { background: var(--ui-subtle); }
}
@media (min-width: 700px) { .ui-long-press-menu::backdrop { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ui-long-press-area { transition: none; } .ui-long-press-menu[open] { animation: none; } }


.ui-sidenav {
  display: flex; flex-direction: column; gap: 2px; width: min(248px, 100%); height: 100%; min-height: 0; padding: 10px 8px;
  overflow: auto; background: var(--ui-subtle); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); transition: width .18s ease-out;
}
.ui-sidenav-folded { width: 60px; overflow-x: hidden; }
.ui-sidenav ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ui-sidenav ul ul { margin: 1px 0 2px 19px; padding-left: 8px; border-left: 1px solid var(--ui-border); }
.ui-sidenav-section + .ui-sidenav-section { margin-top: 12px; }
.ui-sidenav-title {
  display: block; padding: 4px 10px 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.ui-sidenav-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: 500 14px/1.3 var(--ui-font);
  text-align: left; text-decoration: none; cursor: pointer; list-style: none;
}
.ui-sidenav-link::-webkit-details-marker { display: none; }
.ui-sidenav-link:hover { color: var(--ui-fg); background: color-mix(in srgb, var(--ui-fg) 6%, transparent); }
.ui-sidenav-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sidenav-link[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-sidenav-holds > .ui-sidenav-link { color: var(--ui-fg); }
.ui-sidenav-icon { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; font-size: 16px; line-height: 1; }
.ui-sidenav-icon svg { width: 18px; height: 18px; }
.ui-sidenav-initial { display: none; font-size: 13px; font-weight: 650; }
.ui-sidenav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidenav-badge {
  flex: none; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--ui-surface);
  border: 1px solid var(--ui-border); color: var(--ui-fg); font-size: 12px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ui-sidenav-link[aria-current="page"] .ui-sidenav-badge { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-sidenav-chev { flex: none; width: 14px; height: 14px; transition: transform .15s; }
details[open] > .ui-sidenav-link .ui-sidenav-chev { transform: rotate(90deg); }
.ui-sidenav-foot { margin-top: auto; padding-top: 8px; }
.ui-sidenav-fold svg { transition: transform .18s; }
.ui-sidenav-folded .ui-sidenav-fold svg { transform: rotate(180deg); }
.ui-sidenav-folded .ui-sidenav-link { justify-content: center; gap: 0; padding: 6px 0; }
.ui-sidenav-folded :is(.ui-sidenav-text, .ui-sidenav-title, .ui-sidenav-chev) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ui-sidenav-folded .ui-sidenav-section + .ui-sidenav-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ui-border); }
.ui-sidenav-folded ul ul { display: none; }
.ui-sidenav-folded .ui-sidenav-initial { display: inline; }
.ui-sidenav-folded .ui-sidenav-badge {
  position: absolute; top: 2px; left: 50%; min-width: 16px; margin-left: 4px; padding: 0 4px; font-size: 10px; line-height: 14px;
}
.ui-sidenav-folded li { position: relative; }
@media (prefers-reduced-motion: reduce) { .ui-sidenav, .ui-sidenav-chev, .ui-sidenav-fold svg { transition: none; } }


.ui-batbadge-box { container-type: inline-size; }
.ui-batbadge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1.3 var(--ui-font); font-variant-numeric: tabular-nums; --t: var(--ui-fg); }
.ui-batbadge-good { --t: var(--ui-success); }
.ui-batbadge-low { --t: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); }
.ui-batbadge-power { --t: var(--ui-warning); }
.ui-batbadge-unknown { color: var(--ui-muted); }
.ui-batbadge-icon { flex: none; width: 26px; height: 14px; color: var(--t); }
.ui-batbadge-word { color: var(--ui-muted); font-weight: 400; }
.ui-batbadge-more { display: none; color: var(--ui-muted); font-weight: 400; }
.ui-batbadge-ask { margin: 6px 0 0; color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }
/* With room, the time left stands beside the level. */
@container (min-width: 420px) { .ui-batbadge-more { display: inline; } }


.ui-cluster { display: flex; flex-wrap: wrap; gap: var(--ui-cluster-gap, 12px); min-width: 0; }
.ui-cluster-nowrap { flex-wrap: nowrap; }
.ui-cluster-nowrap > * { min-width: 0; }


.ui-split { display: inline-flex; align-items: stretch; vertical-align: middle; }
.ui-split > .ui-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-split > .ui-split-toggle { width: 34px; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-split > .ui-btn-outline.ui-split-toggle { margin-left: -1px; }
.ui-split > .ui-btn-solid.ui-split-toggle, .ui-split > .ui-btn-soft.ui-split-toggle {
  border-left: 1px solid color-mix(in srgb, var(--ui-bg) 35%, transparent);
}
.ui-split > .ui-btn:hover, .ui-split > .ui-btn:focus-visible { position: relative; z-index: 1; }
.ui-split > .ui-btn-sm.ui-split-toggle { width: 28px; }
.ui-split > .ui-btn-lg.ui-split-toggle { width: 42px; }
.ui-split-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.ui-split-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-split-menu {
  min-width: 200px; max-width: min(320px, calc(100vw - 16px)); margin: auto; padding: 5px; list-style: none;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-split-menu li { display: block; }
.ui-split-item {
  display: flex; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-split-item:hover, .ui-split-item:focus { outline: none; background: var(--ui-subtle); }
.ui-split-item:focus-visible { box-shadow: var(--ui-focus); }
.ui-split-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; background: transparent; }
.ui-split-danger { color: var(--ui-danger); }
.ui-split-danger:hover, .ui-split-danger:focus { background: var(--ui-danger-soft); }
.ui-split-sep { height: 1px; margin: 4px 6px; background: var(--ui-border); }
.ui-split-menu:popover-open { animation: ui-split-in .12s ease-out; }
@keyframes ui-split-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-split-menu { inset: auto; margin: 4px 0; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline; }
}
@supports not (position-area: bottom) { .ui-split-menu::backdrop { background: var(--ui-overlay); } }
@media (prefers-reduced-motion: reduce) { .ui-split-menu:popover-open { animation: none; } .ui-split-toggle svg { transition: none; } }


.ui-search-overlay-host { display: contents; }
.ui-search-overlay-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 11px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-muted); font: 14px/1 var(--ui-font); cursor: pointer;
}
.ui-search-overlay-trigger:hover { border-color: var(--ui-strong); }
.ui-search-overlay-trigger:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-search-overlay-trigger svg { width: 16px; height: 16px; }
.ui-search-overlay kbd, .ui-search-overlay-trigger kbd {
  display: inline-block; min-width: 20px; padding: 2px 5px; border: 1px solid var(--ui-border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--ui-subtle); color: var(--ui-muted); font: 500 11px/1.3 var(--ui-font); text-align: center;
}
.ui-search-overlay {
  box-sizing: border-box; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--ui-bg) 92%, transparent); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);
}
.ui-search-overlay[open] { display: flex; justify-content: center; animation: ui-search-overlay-in .16s ease-out; }
.ui-search-overlay::backdrop { background: var(--ui-overlay); backdrop-filter: blur(6px); }
@keyframes ui-search-overlay-in { from { opacity: 0; } }
.ui-search-overlay-col { display: flex; flex-direction: column; width: min(680px, 100%); height: 100%; padding: max(24px, 8vh) 20px 0; box-sizing: border-box; }
.ui-search-overlay-bar { display: flex; align-items: center; gap: 12px; flex: none; padding: 0 4px 12px; border-bottom: 2px solid var(--ui-accent); }
.ui-search-overlay-bar > svg { flex: none; width: 22px; height: 22px; color: var(--ui-muted); }
.ui-search-overlay-input {
  flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; color: var(--ui-fg);
  font: 500 22px/1.2 var(--ui-font); outline: none;
}
.ui-search-overlay-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-search-overlay-input::-webkit-search-cancel-button { display: none; }
.ui-search-overlay-x {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); font: 13px/1 var(--ui-font); cursor: pointer;
}
.ui-search-overlay-x:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-search-overlay-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-search-overlay-list { flex: 1; min-height: 0; margin: 0; padding: 12px 0 32px; overflow: auto; list-style: none; overscroll-behavior: contain; }
.ui-search-overlay-list ul { margin: 0; padding: 0; list-style: none; }
.ui-search-overlay-group { padding: 14px 12px 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-search-overlay-opt { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ui-radius-sm); cursor: pointer; scroll-margin: 8px; }
.ui-search-overlay-opt[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-search-overlay-title { font-weight: 500; }
.ui-search-overlay-text { overflow: hidden; color: var(--ui-muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ui-search-overlay-opt mark { background: none; color: var(--ui-accent); font-weight: 650; }
.ui-search-overlay-note { margin: 0; padding: 32px 12px; color: var(--ui-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ui-search-overlay[open] { animation: none; } }


.ui-text-area { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-text-area-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-text-area-req { margin-left: 2px; color: var(--ui-danger); }
.ui-text-area textarea {
  display: block; width: 100%; min-height: 38px; padding: 8px 12px; resize: vertical;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.ui-text-area textarea::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-text-area textarea:hover { border-color: var(--ui-strong); }
.ui-text-area textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-text-area-sm textarea { padding: 5px 10px; font-size: 13px; }
.ui-text-area-grow textarea {
  field-sizing: content; resize: none; overflow: hidden;
  min-height: calc(var(--ui-text-area-rows, 3) * 1.5em + 18px); max-height: 60vh;
}
.ui-text-area-invalid textarea, .ui-text-area-invalid textarea:hover { border-color: var(--ui-danger); }
.ui-text-area-invalid textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.ui-text-area-foot { display: flex; align-items: baseline; gap: 12px; }
.ui-text-area-foot > div { flex: 1; display: grid; gap: 4px; }
.ui-text-area-hint, .ui-text-area-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-text-area-error { color: var(--ui-danger); }
.ui-text-area-count { flex: none; margin-left: auto; font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-text-area-near { color: var(--ui-warning); }
.ui-text-area-full { color: var(--ui-danger); font-weight: 500; }
.ui-text-area-disabled { opacity: .55; }
.ui-text-area-disabled textarea { cursor: not-allowed; }
.ui-text-area-disabled textarea:hover { border-color: var(--ui-border); }
@media (prefers-reduced-motion: reduce) { .ui-text-area textarea { transition: none; } }


.ui-pinch-zoom { position: relative; display: grid; gap: 8px; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
.ui-pinch-zoom-inner { display: grid; gap: 8px; }
/* pan-y: at its normal size a finger scrolls the page; zoomed, every finger is the image's. */
.ui-pinch-zoom-stage { position: relative; overflow: hidden; display: grid; place-items: center; border-radius: var(--ui-radius); background: var(--ui-subtle); touch-action: pan-y;
  outline: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ui-pinch-zoom-stage:focus-visible { box-shadow: var(--ui-focus); }
.ui-pinch-zoom-in { touch-action: none; cursor: grab; }
.ui-pinch-zoom-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; transform-origin: 50% 50%;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ui-pinch-zoom-live .ui-pinch-zoom-img { transition: none; }
.ui-pinch-zoom-bad { padding: 16px; color: var(--ui-muted); text-align: center; }
.ui-pinch-zoom-bar { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ui-pinch-zoom-btn { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer; }
.ui-pinch-zoom-btn[aria-disabled="true"] { color: var(--ui-muted); opacity: .55; cursor: default; }
.ui-pinch-zoom-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pinch-zoom-level { min-width: 52px; color: var(--ui-muted); font-variant-numeric: tabular-nums; text-align: center; }
@media (hover: hover) { .ui-pinch-zoom-btn:not([aria-disabled="true"]):hover { background: var(--ui-subtle); } }
@container (min-width: 520px) {
  .ui-pinch-zoom-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-pinch-zoom-bar { flex-direction: column; align-items: stretch; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ui-pinch-zoom-img { transition: none; } }


.ui-piec {
  --ui-piec-1: light-dark(#2a78d6, #3987e5); --ui-piec-2: light-dark(#eb6834, #d95926);
  --ui-piec-3: light-dark(#1baf7a, #199e70); --ui-piec-4: light-dark(#eda100, #c98500);
  --ui-piec-5: light-dark(#e87ba4, #d55181); --ui-piec-6: light-dark(#008300, #008300);
  --ui-piec-7: light-dark(#6250d6, #9085e9); --ui-piec-8: light-dark(#e34948, #e66767);
  --ui-piec-9: var(--ui-strong);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; min-width: 0; margin: 0;
  font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-piec-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.ui-piec-s1 { --c: var(--ui-piec-1); } .ui-piec-s2 { --c: var(--ui-piec-2); } .ui-piec-s3 { --c: var(--ui-piec-3); }
.ui-piec-s4 { --c: var(--ui-piec-4); } .ui-piec-s5 { --c: var(--ui-piec-5); } .ui-piec-s6 { --c: var(--ui-piec-6); }
.ui-piec-s7 { --c: var(--ui-piec-7); } .ui-piec-s8 { --c: var(--ui-piec-8); }
.ui-piec-s9 { --c: var(--ui-piec-9); }
.ui-piec-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ui-piec-slice { fill: var(--c); stroke: var(--ui-bg); stroke-width: 2; stroke-linejoin: round; transition: transform .15s ease; }
.ui-piec-part { transition: opacity .15s ease; }
.ui-piec-part:hover .ui-piec-slice { transform: translate(var(--dx), var(--dy)); }
.ui-piec:has(.ui-piec-part:hover) .ui-piec-part:not(:hover) { opacity: .4; }
.ui-piec-lead { fill: none; stroke: var(--ui-strong); stroke-width: 1; }
.ui-piec-name { fill: var(--ui-fg); font-size: 12px; }
.ui-piec-pct { fill: var(--ui-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-piec-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center;
  flex: 1 1 200px; min-width: 0; max-width: 340px; margin: 0; padding: 0; list-style: none; }
.ui-piec-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.ui-piec-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ui-piec-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-piec-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-piec-share { min-width: 3.2em; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-piec-slice, .ui-piec-part { transition: none; } }


.ui-wx { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px/1.35 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-wx-now { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 12px; }
.ui-wx-now > .ui-wx-icon { grid-row: span 3; width: 52px; height: 52px; }
.ui-wx-place { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 650; }
.ui-wx-place a { color: inherit; text-decoration: none; }
.ui-wx-place a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-wx-temp { font-size: 34px; line-height: 1.05; font-weight: 750; letter-spacing: -.02em; }
.ui-wx-desc { color: var(--ui-muted); font-size: 13px; }
.ui-wx-desc b { color: var(--ui-fg); font-weight: 600; }
.ui-wx-side { display: grid; gap: 8px; min-width: 0; }
.ui-wx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; color: var(--ui-muted); font-size: 12px; }
.ui-wx-units { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--ui-subtle); }
.ui-wx-units button { min-width: 38px; height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted);
  font: 650 12px var(--ui-font); cursor: pointer; }
.ui-wx-units button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.ui-wx button:focus-visible, .ui-wx a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 999px; }
.ui-wx-hours { display: flex; gap: 4px; margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ui-wx-hours li { flex: 1 0 58px; display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border-radius: var(--ui-radius-sm);
  scroll-snap-align: start; text-align: center; }
.ui-wx-hours li:first-child { background: var(--ui-subtle); }
.ui-wx-when { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-wx-hours .ui-wx-icon { width: 26px; height: 26px; }
.ui-wx-t { font-weight: 650; white-space: nowrap; }
.ui-wx-t small { color: var(--ui-muted); font-weight: 500; }
.ui-wx-rain { color: var(--ui-info); font-size: 11px; font-weight: 600; }
.ui-wx-rain-none { visibility: hidden; }
.ui-wx-icon { display: block; overflow: visible; }
.ui-wx-icon .ui-wx-sun { fill: var(--ui-warning); }
.ui-wx-icon .ui-wx-ray { stroke: var(--ui-warning); stroke-width: 1.6; stroke-linecap: round; }
.ui-wx-icon .ui-wx-moon { fill: color-mix(in srgb, var(--ui-warning) 45%, var(--ui-muted)); }
.ui-wx-icon .ui-wx-cloud { fill: var(--ui-surface); stroke: var(--ui-muted); stroke-width: 1.4; }
.ui-wx-icon .ui-wx-dark { fill: color-mix(in srgb, var(--ui-muted) 35%, var(--ui-surface)); }
.ui-wx-icon .ui-wx-drop { stroke: var(--ui-info); stroke-width: 1.6; stroke-linecap: round; }
.ui-wx-icon .ui-wx-flake { fill: var(--ui-info); }
.ui-wx-icon .ui-wx-bolt { fill: var(--ui-warning); }
.ui-wx-icon .ui-wx-line { stroke: var(--ui-muted); stroke-width: 1.6; stroke-linecap: round; fill: none; }
@media (max-width: 560px) { .ui-wx { grid-template-columns: minmax(0, 1fr); } }


.ui-bill-split { container-type: inline-size; display: grid; gap: 16px; min-width: 0; max-width: 680px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-bill-split .ui-bill-split-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-bill-split-modes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.ui-bill-split-modes legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-bill-split-modes label, .ui-bill-split-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-bill-split-modes input, .ui-bill-split-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-bill-split-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
@container (max-width: 480px) { .ui-bill-split-grid { grid-template-columns: minmax(0, 1fr); } }
.ui-bill-split-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-bill-split-field > label { font-size: 13px; font-weight: 500; }
.ui-bill-split-box { box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; height: 38px; padding: 0 8px 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-bill-split-box:hover { border-color: var(--ui-strong); }
.ui-bill-split-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bill-split-box input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-bill-split-box select { flex: none; max-width: 76px; border: 0; outline: none; background: transparent; color: var(--ui-muted); font: 12px var(--ui-font); cursor: pointer; }
.ui-bill-split-box select:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; border-radius: 3px; }
.ui-bill-split-code { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-bill-split-bad .ui-bill-split-box, .ui-bill-split-box.ui-bill-split-bad { border-color: var(--ui-danger); }
.ui-bill-split-part { display: grid; gap: 8px; min-width: 0; }
.ui-bill-split-part h4 { margin: 0; font-size: 13px; font-weight: 600; }
.ui-bill-split-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-bill-split-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ui-bill-split-row .ui-bill-split-box { flex: 1 1 120px; }
.ui-bill-split-row .ui-bill-split-num { flex: 0 1 110px; }
.ui-bill-split-who { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0 0 4px; border: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bill-split-who legend { padding: 0; }
.ui-bill-split-btn { box-sizing: border-box; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-bill-split-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-bill-split-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bill-split-btn:disabled { color: var(--ui-muted); cursor: not-allowed; }
.ui-bill-split-add { justify-self: start; }
.ui-bill-split-errors { margin: 0; padding: 0; list-style: none; color: var(--ui-danger); font-size: 13px; }
.ui-bill-split-notes { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bill-split-out { display: grid; gap: 10px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-bill-split-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; margin: 0; }
.ui-bill-split-sums dt { color: var(--ui-muted); }
.ui-bill-split-sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ui-bill-split-sums .ui-bill-split-total { padding-top: 4px; color: var(--ui-fg); font-weight: 700; }
.ui-bill-split-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-bill-split-table th { padding: 4px 0; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: right; }
.ui-bill-split-table td { padding: 5px 0; border-bottom: 1px solid var(--ui-border); text-align: right; overflow-wrap: anywhere; }
.ui-bill-split-table th:first-child, .ui-bill-split-table td:first-child { text-align: left; }
.ui-bill-split-table td:last-child { font-weight: 600; }
.ui-bill-split-table th + th, .ui-bill-split-table td + td { padding-left: 12px; }
.ui-bill-split-table tfoot td { border-bottom: 0; font-weight: 700; }


.ui-hbarc {
  --ui-hbarc-1: light-dark(#2a78d6, #3987e5); --ui-hbarc-2: light-dark(#eb6834, #d95926);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-hbarc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-hbarc-s1 { --c: var(--ui-hbarc-1); } .ui-hbarc-s2 { --c: var(--ui-hbarc-2); }
.ui-hbarc-body { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 10px; align-items: center; }
.ui-hbarc-vals { padding-right: 52px; }
.ui-hbarc-label { max-width: 16em; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-align: right;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-hbarc-hl .ui-hbarc-label { color: var(--ui-fg); font-weight: 600; }
.ui-hbarc-grids { position: relative; grid-column: 2; align-self: stretch; }
.ui-hbarc-grid { position: absolute; top: 0; bottom: 0; left: var(--a); width: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-hbarc-grid.ui-hbarc-zero { background: var(--ui-strong); }
.ui-hbarc-row { display: contents; }
.ui-hbarc-track { position: relative; grid-column: 2; height: calc(var(--h) + 10px); border-radius: 4px; }
.ui-hbarc-row:hover .ui-hbarc-track { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-hbarc-row:hover .ui-hbarc-label { color: var(--ui-fg); }
.ui-hbarc-bar { position: absolute; top: 5px; bottom: 5px; left: var(--a); width: var(--b); min-width: 1px;
  background: var(--c); border-radius: 0 4px 4px 0; }
.ui-hbarc-neg { border-radius: 4px 0 0 4px; }
.ui-hbarc-val { position: absolute; top: 50%; left: calc(var(--a) + 6px); transform: translateY(-50%);
  color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-hbarc-val.ui-hbarc-under { left: auto; right: calc(100% - var(--a) + 6px); }
.ui-hbarc-tip { position: absolute; z-index: 20; bottom: calc(100% + 2px); right: 0; display: none; padding: 6px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-muted); font-size: 12px; white-space: nowrap; pointer-events: none; }
.ui-hbarc-tip b { padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-hbarc-row:hover .ui-hbarc-tip { display: block; }
.ui-hbarc-x { position: relative; grid-column: 2; height: 16px; margin-top: 4px; }
.ui-hbarc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-hbarc-x span:first-child { transform: none; }
.ui-hbarc-x span:last-child:not(:first-child) { transform: translateX(-100%); }


.ui-inline-edit { --ui-inline-edit-font: 14px; display: grid; gap: 4px; min-width: 0; font: var(--ui-inline-edit-font)/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-inline-edit-sm { --ui-inline-edit-font: 13px; }
.ui-inline-edit-lg { --ui-inline-edit-font: 22px; font-weight: 600; }
.ui-inline-edit-label { font-size: 13px; font-weight: 500; }
.ui-inline-edit-show {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 2.1em; margin: 0 -8px;
  padding: 2px 8px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: text; transition: background .15s, border-color .15s;
}
.ui-inline-edit-show:hover { background: var(--ui-subtle); }
.ui-inline-edit-show:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-inline-edit-show:disabled { cursor: default; background: transparent; }
.ui-inline-edit-text { min-width: 0; overflow-wrap: anywhere; }
.ui-inline-edit-empty { color: var(--ui-muted); font-style: italic; font-weight: 400; }
.ui-inline-edit-pen { flex: none; width: .9em; height: .9em; color: var(--ui-muted); opacity: 0; transition: opacity .15s; }
.ui-inline-edit-show:hover .ui-inline-edit-pen, .ui-inline-edit-show:focus-visible .ui-inline-edit-pen { opacity: 1; }
.ui-inline-edit-form { display: flex; align-items: center; gap: 6px; margin: 0 -8px; }
.ui-inline-edit-form input {
  flex: 1; min-width: 0; height: 2.1em; padding: 2px 7px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: inherit; box-shadow: var(--ui-focus);
}
.ui-inline-edit-form input:focus { outline: none; }
.ui-inline-edit-form input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-inline-edit-btn {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-muted); cursor: pointer;
}
.ui-inline-edit-btn svg { width: 14px; height: 14px; }
.ui-inline-edit-btn:hover { color: var(--ui-fg); border-color: var(--ui-strong); }
.ui-inline-edit-ok { color: var(--ui-accent); }
.ui-inline-edit-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-inline-edit-hint, .ui-inline-edit-error { margin: 0; font-size: 13px; font-weight: 400; color: var(--ui-muted); }
.ui-inline-edit-error { color: var(--ui-danger); }
.ui-inline-edit-disabled .ui-inline-edit-show { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .ui-inline-edit-show, .ui-inline-edit-pen { transition: none; } }


.ui-country-picker { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-country-picker-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-country-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-country-picker-box { position: relative; display: block; }
.ui-country-picker-box::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-country-picker select {
  appearance: none; display: block; width: 100%; height: 38px; padding: 0 36px 0 12px;
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-country-picker select:hover { border-color: var(--ui-strong); }
.ui-country-picker select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-country-picker select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-country-picker option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-country-picker-sm select { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-country-picker-sm .ui-country-picker-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
.ui-country-picker-invalid select, .ui-country-picker-invalid select:hover { border-color: var(--ui-danger); }
.ui-country-picker-hint, .ui-country-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-country-picker-error { color: var(--ui-danger); }
.ui-country-picker-disabled { opacity: .55; }
.ui-country-picker-disabled select { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-country-picker select { transition: none; } }


.ui-image-picker { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-image-picker-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-image-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-image-picker-list { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-image-picker-cols { display: grid; grid-template-columns: repeat(var(--ui-image-picker-cols), minmax(0, 1fr)); }
.ui-image-picker-opt { position: relative; display: grid; gap: 6px; width: var(--ui-image-picker-size, 96px); max-width: 100%; cursor: pointer; text-align: center; }
.ui-image-picker-cols .ui-image-picker-opt { width: auto; }
.ui-image-picker-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-image-picker-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); box-shadow: 0 0 0 1px var(--ui-border); transition: box-shadow .15s, transform .15s;
}
.ui-image-picker-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-image-picker-circle .ui-image-picker-frame { border-radius: 50%; }
.ui-image-picker-wide .ui-image-picker-frame { aspect-ratio: 16 / 9; }
.ui-image-picker-opt:hover .ui-image-picker-frame { box-shadow: 0 0 0 1px var(--ui-strong); }
.ui-image-picker-opt input:checked ~ .ui-image-picker-frame { box-shadow: 0 0 0 2px var(--ui-accent), 0 0 0 4px var(--ui-accent-soft); }
.ui-image-picker-opt input:focus-visible ~ .ui-image-picker-frame { box-shadow: 0 0 0 1px var(--ui-border), var(--ui-focus); }
.ui-image-picker-opt input:checked:focus-visible ~ .ui-image-picker-frame { box-shadow: 0 0 0 2px var(--ui-accent), var(--ui-focus); }
.ui-image-picker-check {
  position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.6);
  transition: opacity .12s, transform .12s;
}
.ui-image-picker-check svg { width: 12px; height: 12px; }
.ui-image-picker-circle .ui-image-picker-check { right: 2px; top: 2px; }
.ui-image-picker-opt input:checked ~ .ui-image-picker-frame .ui-image-picker-check { opacity: 1; transform: scale(1); }
.ui-image-picker-caption { font-size: 13px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-image-picker-opt input:checked ~ .ui-image-picker-caption { color: var(--ui-fg); font-weight: 500; }
.ui-image-picker-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ui-image-picker-opt:has(input:disabled):hover .ui-image-picker-frame { box-shadow: 0 0 0 1px var(--ui-border); }
.ui-image-picker-invalid .ui-image-picker-frame { box-shadow: 0 0 0 1px var(--ui-danger); }
.ui-image-picker-hint, .ui-image-picker-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-image-picker-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-image-picker-frame, .ui-image-picker-check { transition: none; } }


.ui-table-floor-plan { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 360px; container-type: inline-size; color: var(--ui-fg); background: var(--ui-subtle); font: 14px/1.3 var(--ui-font); }
.ui-table-floor-plan-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ui-table-floor-plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: none; min-height: 44px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-table-floor-plan-counts { display: flex; flex: 1; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; color: var(--ui-muted); font-size: 13px; list-style: none; }
.ui-table-floor-plan-counts b { color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-table-floor-plan-room { display: grid; place-items: center; flex: 1; min-width: 0; min-height: 0; padding: 10px; container-type: size; }
.ui-table-floor-plan-floor { position: relative; width: min(100cqw, calc(100cqh * var(--w) / var(--h))); aspect-ratio: var(--w) / var(--h); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-sizing: border-box; overflow: hidden; }
.ui-table-floor-plan-zone { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-muted); font-size: 13px; }
.ui-table-floor-plan-spot { position: absolute; }
.ui-table-floor-plan-table { position: relative; display: grid; place-content: center; justify-items: center; gap: 1px; box-sizing: border-box; width: 100%; height: 100%; padding: 2px; overflow: hidden; border: 2px solid var(--c, var(--ui-strong)); border-radius: var(--ui-radius); background: var(--s, var(--ui-subtle)); color: var(--ui-fg); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ui-table-floor-plan-table b { font-size: 16px; line-height: 1.1; }
.ui-table-floor-plan-table small { font-size: 12px; line-height: 1.1; }
.ui-table-floor-plan-round { border-radius: 50%; }
.ui-table-floor-plan-table:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-table-floor-plan-on { box-shadow: 0 0 0 3px var(--ui-accent); }
.ui-table-floor-plan-seated { --c: var(--ui-info); --s: var(--ui-info-soft); }
.ui-table-floor-plan-ordered, .ui-table-floor-plan-served { --c: var(--ui-accent); --s: var(--ui-accent-soft); }
.ui-table-floor-plan-bill { --c: var(--ui-warning); --s: var(--ui-warning-soft); }
.ui-table-floor-plan-dirty { --c: var(--ui-danger); --s: var(--ui-danger-soft); }
.ui-table-floor-plan-free { --c: var(--ui-success); --s: var(--ui-success-soft); }
.ui-table-floor-plan-editing .ui-table-floor-plan-table { touch-action: none; cursor: grab; border-style: dashed; }
.ui-table-floor-plan-moving { z-index: 3; cursor: grabbing !important; box-shadow: var(--ui-shadow-lg); }
.ui-table-floor-plan-spring { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.ui-table-floor-plan-side { display: flex; flex-direction: column; flex: none; gap: 8px; max-height: 240px; overflow-y: auto; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-table-floor-plan-side h3 { margin: 0; font-size: 18px; }
.ui-table-floor-plan-side p { margin: 0; color: var(--ui-muted); }
.ui-table-floor-plan-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-table-floor-plan-btn { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-table-floor-plan-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-table-floor-plan-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-table-floor-plan-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-table-floor-plan-btn:not(.ui-table-floor-plan-primary):hover { background: var(--ui-subtle); } }
/* With the width of a turned tablet the panel stands beside the floor, which then keeps its height. */
@container (min-width: 1000px) {
  .ui-table-floor-plan-body { flex-direction: row; }
  .ui-table-floor-plan-side { width: 280px; max-height: none; border-top: 0; border-left: 1px solid var(--ui-border); }
}
@media (prefers-reduced-motion: reduce) { .ui-table-floor-plan-spring { transition: none; } }


.ui-hover-cursor-row { container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-hover-cursor-row-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-hover-cursor-row-item { position: relative; display: flex; align-items: stretch; gap: 2px; min-height: 60px; border-radius: var(--ui-radius); background: var(--ui-surface); transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .14s, background .14s; -webkit-touch-callout: none; }
.ui-hover-cursor-row-lifted { z-index: 1; background: var(--ui-subtle); box-shadow: var(--ui-shadow); }
.ui-hover-cursor-row-pressing { background: var(--ui-subtle); user-select: none; -webkit-user-select: none; }
.ui-hover-cursor-row-main { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 8px 6px 8px 14px; border: 0; border-radius: var(--ui-radius); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: pan-y; }
.ui-hover-cursor-row-main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-hover-cursor-row-main[aria-current="true"] { box-shadow: inset 3px 0 0 var(--ui-accent); }
.ui-hover-cursor-row-text { flex: 1; min-width: 0; }
.ui-hover-cursor-row-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-hover-cursor-row-detail { display: block; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-hover-cursor-row-side { flex: none; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-hover-cursor-row-more { flex: none; align-self: center; width: 44px; height: 44px; margin-right: 6px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); font: 700 18px/1 var(--ui-font); cursor: pointer; }
.ui-hover-cursor-row-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-hover-cursor-row-more:hover { background: var(--ui-border); color: var(--ui-fg); } }
.ui-hover-cursor-row-menu { box-sizing: border-box; position: fixed; inset: auto; min-width: 200px; max-height: 70dvh; margin: 0; padding: 6px; overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); color: var(--ui-fg); font: 15px/1.3 var(--ui-font); }
.ui-hover-cursor-row-action { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-hover-cursor-row-action:focus-visible { outline: none; background: var(--ui-accent-soft); }
.ui-hover-cursor-row-danger { color: var(--ui-danger); }
@media (hover: hover) { .ui-hover-cursor-row-action:hover { background: var(--ui-subtle); } }
@container (min-width: 760px) { .ui-hover-cursor-row-columns { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-hover-cursor-row-item { transition: none; } }


.ui-drag-reorder { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-drag-reorder-list { position: relative; margin: 0; padding: 0; list-style: none; overscroll-behavior-y: contain; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-drag-reorder-row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
  touch-action: pan-y; -webkit-touch-callout: none; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .15s; }
.ui-drag-reorder-row:last-child { border-bottom: 0; }
.ui-drag-reorder-pressing { background: var(--ui-subtle); user-select: none; -webkit-user-select: none; }
.ui-drag-reorder-lifted { z-index: 3; box-shadow: var(--ui-shadow-lg); transition: box-shadow .15s; user-select: none; -webkit-user-select: none; cursor: grabbing; }
.ui-drag-reorder-grip { display: grid; flex: none; place-items: center; width: 44px; height: 52px; padding: 0; border: 0; background: transparent; color: var(--ui-muted); cursor: grab; touch-action: none; }
.ui-drag-reorder-grip svg { width: 20px; height: 20px; }
.ui-drag-reorder-grip:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-drag-reorder-text { flex: 1; min-width: 0; }
.ui-drag-reorder-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-drag-reorder-sub { display: block; color: var(--ui-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* For screen readers on a phone, which have no arrow keys. position: relative on the row keeps them from widening the page. */
.ui-drag-reorder-moves { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-drag-reorder-move { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-drag-reorder-move[aria-disabled="true"] { color: var(--ui-muted); opacity: .55; cursor: default; }
.ui-drag-reorder-move:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-drag-reorder-move:not([aria-disabled="true"]):hover { background: var(--ui-subtle); } }
@container (min-width: 520px) {
  .ui-drag-reorder-moves { position: static; display: flex; flex: none; gap: 6px; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-drag-reorder-row { transition: none; } }


.ui-brel { display: grid; gap: 16px; margin: 0; font: 15px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-brel .ui-brel-title { margin: 0; font-size: 20px; font-weight: 700; }
.ui-brel-items { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ui-brel-grid .ui-brel-items { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.ui-brel-item { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-brel-pic { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-brel-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ui-brel-item:hover .ui-brel-pic img { transform: scale(1.03); }
.ui-brel-blank { display: grid; place-items: center; color: var(--ui-strong); }
.ui-brel-blank svg { width: 32px; height: 32px; }
.ui-brel-text { display: grid; gap: 4px; min-width: 0; }
.ui-brel .ui-brel-name { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
/* The title's link covers the whole card. */
.ui-brel-name a { color: inherit; text-decoration: none; }
.ui-brel-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ui-radius); }
.ui-brel-item:hover .ui-brel-name a { color: var(--ui-accent); }
.ui-brel-name a:focus-visible { outline: none; }
.ui-brel-name a:focus-visible::after { box-shadow: var(--ui-focus); }
.ui-brel-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-brel-meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-brel-meta > * + *::before { content: "·"; margin-right: 8px; }
.ui-brel-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.ui-brel-tags li { padding: 0 8px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; line-height: 20px; }
.ui-brel-tags li.ui-brel-shared { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; }
.ui-brel-list .ui-brel-items { gap: 14px; }
.ui-brel-list .ui-brel-item { flex-direction: row; align-items: center; gap: 14px; }
.ui-brel-list .ui-brel-pic { flex: none; width: 112px; aspect-ratio: 4 / 3; border-radius: var(--ui-radius-sm); }
.ui-brel-list .ui-brel-excerpt { -webkit-line-clamp: 1; }
@media (prefers-reduced-motion: reduce) { .ui-brel-pic img { transition: none; } }


.ui-device-preview { container-type: inline-size; box-sizing: border-box; width: 100%; min-width: 0; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-device-preview-layout { display: grid; gap: 12px; }
.ui-device-preview-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; min-width: 0; }
.ui-device-preview-field { display: grid; gap: 2px; flex: 1 1 150px; min-width: 0; color: var(--ui-muted); font-size: 13px; }
.ui-device-preview-field select {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.2 var(--ui-font);
}
.ui-device-preview-field select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-device-preview-key {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-device-preview-key[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-device-preview-key:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-device-preview-size { flex: 1 1 100%; margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-device-preview-stage { min-width: 0; overflow: hidden; }
.ui-device-preview-fit { margin: 0 auto; transition: width .24s ease, height .24s ease; }
.ui-device-preview-body {
  box-sizing: border-box; padding: 10px; border-radius: var(--ui-device-preview-outer); background: #16151c; box-shadow: var(--ui-shadow-lg), inset 0 0 0 2px #3b3946;
  transform: scale(var(--ui-device-preview-scale)); transform-origin: 0 0; transition: transform .24s ease, width .24s ease, height .24s ease;
}
.ui-device-preview-screen { position: relative; container-type: size; overflow: hidden; border-radius: var(--ui-device-preview-radius); background: var(--ui-bg); color: var(--ui-fg); }
.ui-device-preview-marks { position: absolute; inset: 0; z-index: 50; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ui-device-preview-band {
  position: absolute; display: grid; place-items: center; overflow: hidden; color: #fff; font: 600 11px/1 var(--ui-mono);
  background: repeating-linear-gradient(45deg, rgba(220, 40, 60, .38) 0 6px, rgba(220, 40, 60, .16) 6px 12px);
}
.ui-device-preview-cut { position: absolute; background: #000; }
.ui-device-preview-cut-island { left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 19px; }
.ui-device-preview-cut-notch { left: 50%; top: 0; width: 160px; height: 30px; margin-left: -80px; border-radius: 0 0 18px 18px; }
.ui-device-preview-cut-punch { left: 50%; top: 12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; }
.ui-device-preview-turned .ui-device-preview-cut-island { left: 11px; top: 50%; width: 37px; height: 126px; margin: -63px 0 0; }
.ui-device-preview-turned .ui-device-preview-cut-notch { left: 0; top: 50%; width: 30px; height: 160px; margin: -80px 0 0; border-radius: 0 18px 18px 0; }
.ui-device-preview-turned .ui-device-preview-cut-punch { left: 12px; top: 50%; margin: -10px 0 0; }
.ui-device-preview-home { position: absolute; left: 50%; bottom: 7px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: color-mix(in srgb, var(--ui-fg) 70%, transparent); }
@container (min-width: 700px) {
  .ui-device-preview-layout { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .ui-device-preview-bar { flex-direction: column; align-items: stretch; }
  .ui-device-preview-field { flex: none; }
  .ui-device-preview-size { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-device-preview-fit, .ui-device-preview-body { transition: none; } }


.ui-stacked { display: flex; flex-direction: column; min-height: var(--ui-stacked-h, 100vh); min-width: 0; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-stacked-header, .ui-stacked-footer { flex: none; }
.ui-stacked-sticky > .ui-stacked-header { position: sticky; top: 0; z-index: 10; }
.ui-stacked-main { flex: 1 1 auto; min-width: 0; padding: var(--ui-stacked-pad, 0); }
.ui-stacked-main > :first-child { margin-top: 0; }
.ui-stacked-main > :last-child { margin-bottom: 0; }


.ui-grid {
  display: grid; gap: var(--ui-grid-gap, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-grid-min, 220px), 100%), 1fr));
}
.ui-grid > * { min-width: 0; }
.ui-grid-cols { grid-template-columns: repeat(var(--ui-grid-cols), minmax(0, 1fr)); }
@media (max-width: 899px) { .ui-grid-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ui-grid-cols { grid-template-columns: minmax(0, 1fr); } }


.ui-text-lint { display: grid; gap: 14px; min-width: 0; max-width: 760px; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-text-lint-field { display: grid; gap: 5px; min-width: 0; }
.ui-text-lint-field label { font-size: 13px; font-weight: 500; }
.ui-text-lint-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 9px 12px; resize: vertical; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-text-lint-field textarea:hover { border-color: var(--ui-strong); }
.ui-text-lint-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-text-lint-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-text-lint-rules legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 500; }
.ui-text-lint-rules label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ui-text-lint-rules input { margin: 0; accent-color: var(--ui-accent); }
.ui-text-lint-rules input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-text-lint-count { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-text-lint-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ui-text-lint-said { margin: 0; font-weight: 600; }
.ui-text-lint-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-text-lint-btn { height: 28px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-text-lint-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-text-lint-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-text-lint-marked { max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-text-lint-marked:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-text-lint-marked mark { border-radius: 2px; background: none; color: inherit; }
.ui-text-lint-mark-passive { background: var(--ui-info-soft) !important; }
.ui-text-lint-mark-filler { background: var(--ui-warning-soft) !important; }
.ui-text-lint-mark-repeated, .ui-text-lint-mark-spaces { background: var(--ui-danger-soft) !important; }
.ui-text-lint-mark-cliche { background: var(--ui-accent-soft) !important; }
.ui-text-lint-mark-long { text-decoration: underline wavy var(--ui-warning); text-underline-offset: 3px; }
.ui-text-lint-issues { display: grid; gap: 8px; min-width: 0; outline: none; }
.ui-text-lint-issues ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-text-lint-issue { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-text-lint-issue p { margin: 0; overflow-wrap: anywhere; }
.ui-text-lint-where { display: block; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-text-lint-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@media (max-width: 480px) { .ui-text-lint-issue { grid-template-columns: 1fr; } .ui-text-lint-act { justify-content: flex-start; } }


.ui-ohlc { --ui-ohlc-1: light-dark(#2a78d6, #3987e5); --ui-ohlc-2: light-dark(#eb6834, #d95926);
  --ui-ohlc-3: light-dark(#1baf7a, #199e70); --ui-ohlc-4: light-dark(#eda100, #c98500);
  --ui-ohlc-5: light-dark(#e87ba4, #d55181); --ui-ohlc-6: light-dark(#008300, #008300);
  --ui-ohlc-7: light-dark(#6250d6, #9085e9); --ui-ohlc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-ohlc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-ohlc-s1 { --c: var(--ui-ohlc-1); } .ui-ohlc-s2 { --c: var(--ui-ohlc-2); } .ui-ohlc-s3 { --c: var(--ui-ohlc-3); }
.ui-ohlc-s4 { --c: var(--ui-ohlc-4); } .ui-ohlc-s5 { --c: var(--ui-ohlc-5); } .ui-ohlc-s6 { --c: var(--ui-ohlc-6); }
.ui-ohlc-s7 { --c: var(--ui-ohlc-7); } .ui-ohlc-s8 { --c: var(--ui-ohlc-8); }
.ui-ohlc-up { --k: var(--ui-success); } .ui-ohlc-down { --k: var(--ui-danger); }
.ui-ohlc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-ohlc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-ohlc-key { width: 14px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.ui-ohlc-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding-top: 8px; }
.ui-ohlc-plot { position: relative; }
.ui-ohlc-pane, .ui-ohlc-cp { position: relative; height: var(--h); }
.ui-ohlc-vpane, .ui-ohlc-cv { position: relative; height: var(--vh); margin-top: 16px; }
.ui-ohlc-vpane { border-top: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-ohlc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-ohlc-svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-ohlc-ma { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-ohlc-last { position: absolute; z-index: 1; left: 0; right: 0; border-top: 1px dashed var(--k); opacity: .75; pointer-events: none; }
.ui-ohlc-cols { position: absolute; inset: 0; display: flex; }
.ui-ohlc-col { position: relative; flex: 1; min-width: 0; }
.ui-ohlc-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-ohlc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-ohlc-col:hover::before { opacity: .8; }
.ui-ohlc-bar { position: absolute; left: 50%; width: 2px; margin-left: -1px; background: var(--k); }
.ui-ohlc-open, .ui-ohlc-close { position: absolute; height: 2px; margin-top: -1px; background: var(--k); }
.ui-ohlc-open { right: 50%; left: 12%; }
.ui-ohlc-close { left: 50%; right: 12%; }
.ui-ohlc-vol { position: absolute; bottom: 0; left: 16%; right: 16%; min-height: 1px; border-radius: 1px 1px 0 0; background: var(--k); opacity: .35; }
.ui-ohlc-col:hover .ui-ohlc-vol { opacity: .7; }
.ui-ohlc-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-ohlc-flip .ui-ohlc-tip { left: auto; right: calc(50% + 10px); }
.ui-ohlc-col:hover .ui-ohlc-tip { display: block; }
.ui-ohlc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-ohlc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-ohlc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-ohlc-tip .ui-ohlc-chg b { color: var(--k); }
.ui-ohlc-y { position: relative; }
.ui-ohlc-y > div { position: relative; }
.ui-ohlc-y span { position: absolute; left: 0; transform: translateY(-50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-ohlc-y .ui-ohlc-tag { z-index: 1; left: -4px; padding: 1px 4px; border-radius: 3px; background: var(--k); color: var(--ui-bg); font-weight: 600; }
.ui-ohlc-x { position: relative; height: 16px; margin-top: 6px; }
.ui-ohlc-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-ohlc-x .ui-ohlc-first { transform: none; }
.ui-ohlc-x .ui-ohlc-end { transform: translateX(-100%); }


.ui-flstat { --ui-flstat-k: var(--ui-success); --ui-flstat-ks: var(--ui-success-soft); display: grid; gap: 16px; min-width: 0; max-width: 520px;
  padding: 18px 20px; border: 1px solid var(--ui-border); border-top: 4px solid var(--ui-flstat-k); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-flstat-warning { --ui-flstat-k: var(--ui-warning); --ui-flstat-ks: var(--ui-warning-soft); }
.ui-flstat-danger { --ui-flstat-k: var(--ui-danger); --ui-flstat-ks: var(--ui-danger-soft); }
.ui-flstat-info { --ui-flstat-k: var(--ui-info); --ui-flstat-ks: var(--ui-info-soft); }
.ui-flstat-accent { --ui-flstat-k: var(--ui-accent); --ui-flstat-ks: var(--ui-accent-soft); }
.ui-flstat-muted { --ui-flstat-k: var(--ui-muted); --ui-flstat-ks: var(--ui-subtle); }
.ui-flstat-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px 12px; }
.ui-flstat .ui-flstat-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ui-flstat-sub { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.ui-flstat-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ui-flstat-ks);
  color: var(--ui-fg); font-size: 13px; font-weight: 650; white-space: nowrap; }
.ui-flstat-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-flstat-k); }
.ui-flstat-live .ui-flstat-badge::before { animation: ui-flstat-pulse 1.6s ease-in-out infinite; }
@keyframes ui-flstat-pulse { 50% { opacity: .3; } }
.ui-flstat-ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ui-flstat-end { display: grid; gap: 2px; align-content: start; }
.ui-flstat-end + .ui-flstat-end { text-align: right; }
.ui-flstat-code { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ui-flstat-city { color: var(--ui-muted); font-size: 13px; }
.ui-flstat-times { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; }
.ui-flstat-end + .ui-flstat-end .ui-flstat-times { justify-content: end; }
.ui-flstat-time { font-size: 20px; font-weight: 700; }
.ui-flstat-moved .ui-flstat-time { color: var(--ui-flstat-k); }
.ui-flstat-was { color: var(--ui-muted); font-size: 14px; text-decoration: line-through; }
.ui-flstat-days { margin-left: 1px; vertical-align: super; font-size: 11px; font-weight: 700; }
.ui-flstat-cancelled .ui-flstat-time { color: var(--ui-muted); text-decoration: line-through; }
.ui-flstat-track { position: relative; height: 4px; margin: 4px 12px; border-radius: 2px; background: var(--ui-border); }
.ui-flstat-done { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--ui-flstat-k); }
.ui-flstat-plane { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--ui-flstat-k); }
.ui-flstat-plane svg { display: block; width: 100%; height: 100%; transform: rotate(90deg); }
.ui-flstat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); }
.ui-flstat-grid div { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 1px; min-width: 0; }
.ui-flstat-grid dt { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-flstat-grid dd { margin: 0; font-size: 16px; font-weight: 700; }
.ui-flstat-grid dd s { margin-left: 2px; color: var(--ui-muted); font-size: 13px; font-weight: 500; }
.ui-flstat-changed dd { color: var(--ui-warning); }
.ui-flstat-note { margin: 0; padding: 8px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-flstat-ks); font-size: 13px; }
.ui-flstat-foot { margin: -6px 0 0; color: var(--ui-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-flstat-live .ui-flstat-badge::before { animation: none; } }


.ui-usermenu { position: relative; display: inline-block; }
.ui-usermenu-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer;
}
.ui-usermenu-btn:hover { background: var(--ui-subtle); }
.ui-usermenu-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-usermenu-named { padding-right: 10px; }
.ui-usermenu-chev { width: 14px; height: 14px; color: var(--ui-muted); transition: transform .15s; }
.ui-usermenu-btn:has(+ :popover-open) .ui-usermenu-chev { transform: rotate(180deg); }
.ui-usermenu-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s, 36px); height: var(--s, 36px); border-radius: 50%;
  background: color-mix(in srgb, var(--h) 24%, var(--ui-bg)); color: color-mix(in srgb, var(--h) 70%, var(--ui-fg));
  font: 600 calc(var(--s, 36px) * .38)/1 var(--ui-font); letter-spacing: .02em; user-select: none; overflow: hidden;
}
.ui-usermenu-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-usermenu-sm .ui-usermenu-avatar { --s: 32px; }
.ui-usermenu-lg .ui-usermenu-avatar { --s: 44px; }
.ui-usermenu-pop {
  min-width: 230px; max-width: min(320px, calc(100vw - 16px)); margin: auto; padding: 5px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 14px/1.4 var(--ui-font);
}
.ui-usermenu-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.ui-usermenu-who .ui-usermenu-avatar { --s: 36px; }
.ui-usermenu-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-usermenu-email { color: var(--ui-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-usermenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-usermenu-item:hover, .ui-usermenu-item:focus { outline: none; background: var(--ui-subtle); }
.ui-usermenu-item:focus-visible { box-shadow: var(--ui-focus); }
.ui-usermenu-item > span:first-of-type { flex: 1; }
.ui-usermenu-icon { display: inline-grid; place-items: center; flex: none; width: 18px; font-size: 15px; line-height: 1; }
.ui-usermenu-icon svg { width: 16px; height: 16px; }
.ui-usermenu-icon + span { flex: 1; }
.ui-usermenu-key { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.ui-usermenu-badge { padding: 0 7px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 600; line-height: 18px; }
.ui-usermenu-danger { color: var(--ui-danger); }
.ui-usermenu-danger:hover, .ui-usermenu-danger:focus { background: var(--ui-danger-soft); }
.ui-usermenu-sep { height: 1px; margin: 4px 6px; background: var(--ui-border); }
.ui-usermenu-pop[popover]:popover-open { animation: ui-usermenu-in .12s ease-out; }
@keyframes ui-usermenu-in { from { opacity: 0; transform: translateY(-4px); } }
@supports (position-area: bottom) {
  .ui-usermenu-pop { inset: auto; margin: 6px 0; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline; }
}
@supports not (position-area: bottom) { .ui-usermenu-pop::backdrop { background: var(--ui-overlay); } }
@media (prefers-reduced-motion: reduce) { .ui-usermenu-pop[popover]:popover-open { animation: none; } .ui-usermenu-chev { transition: none; } }


.ui-copy-btn { position: relative; }
.ui-copy-btn svg { width: 16px; height: 16px; flex: none; }
.ui-copy-btn .ui-copy-check, .ui-copy-ok .ui-copy-icon { display: none; }
.ui-copy-ok .ui-copy-check { display: block; color: var(--ui-success); }
.ui-copy-labels { display: inline-grid; }
.ui-copy-labels > span { grid-area: 1 / 1; text-align: center; }
.ui-copy-btn:not(.ui-copy-ok) .ui-copy-done, .ui-copy-ok .ui-copy-label { visibility: hidden; }
.ui-copy-fail, .ui-copy-bad .ui-copy-label, .ui-copy-bad .ui-copy-done { display: none; }
.ui-copy-bad .ui-copy-fail { display: inline; }


.ui-week-picker { position: relative; display: grid; gap: 6px; min-width: 0; width: fit-content; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-week-picker-label { font-size: 13px; font-weight: 500; }
.ui-week-picker-req { margin-left: 2px; color: var(--ui-danger); }
.ui-week-picker-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-width: 240px; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ui-week-picker-trigger:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-week-picker-trigger:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-week-picker-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ui-week-picker-trigger svg { flex: none; width: 16px; height: 16px; color: var(--ui-muted); }
.ui-week-picker-trigger span { flex: 1; }
.ui-week-picker-trigger small { color: var(--ui-muted); font-size: 12px; }
.ui-week-picker-empty { color: var(--ui-muted); }
.ui-week-picker-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; width: 320px; max-width: calc(100vw - 32px); margin-top: 4px; padding: 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg);
}
.ui-week-picker-pop[hidden] { display: none; }
.ui-week-picker-inline .ui-week-picker-pop { position: static; margin: 0; box-shadow: none; }
.ui-week-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ui-week-picker-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ui-week-picker-nav {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-week-picker-nav svg { width: 16px; height: 16px; }
.ui-week-picker-nav:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-week-picker-nav:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-week-picker-cols, .ui-week-picker-week { display: grid; grid-template-columns: 34px repeat(7, 1fr); align-items: center; }
.ui-week-picker-cols { padding: 0 2px 4px; color: var(--ui-muted); font-size: 12px; font-weight: 500; text-align: center; }
.ui-week-picker-list { display: grid; gap: 2px; outline: none; }
.ui-week-picker-week {
  height: 34px; padding: 0 2px; border-radius: var(--ui-radius-sm); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums;
  cursor: pointer; outline: none; transition: background .1s;
}
.ui-week-picker-week:hover { background: var(--ui-subtle); }
.ui-week-picker-week:focus-visible, .ui-week-picker-week:focus { box-shadow: var(--ui-focus); }
.ui-week-picker-num { color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-week-picker-out { color: var(--ui-muted); opacity: .6; }
.ui-week-picker-today { color: var(--ui-accent); font-weight: 700; }
.ui-week-picker-week[aria-selected="true"] { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-week-picker-week[aria-selected="true"] .ui-week-picker-num, .ui-week-picker-week[aria-selected="true"] .ui-week-picker-out,
.ui-week-picker-week[aria-selected="true"] .ui-week-picker-today { color: inherit; opacity: 1; }
.ui-week-picker-sm .ui-week-picker-trigger { height: 30px; min-width: 200px; font-size: 13px; }
.ui-week-picker-invalid .ui-week-picker-trigger { border-color: var(--ui-danger); }
.ui-week-picker-hint, .ui-week-picker-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-week-picker-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-week-picker-trigger, .ui-week-picker-week { transition: none; } }


.ui-loan-queue { display: grid; gap: 12px; min-width: 0; font: 14px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-loan-queue-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ui-loan-queue .ui-loan-queue-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-loan-queue-sum { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-loan-queue-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-loan-queue table { width: 100%; border-collapse: collapse; }
.ui-loan-queue th { padding: 10px 12px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-muted);
  font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.ui-loan-queue td { padding: 12px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-loan-queue tbody tr:last-child td { border-bottom: 0; }
.ui-loan-queue-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-loan-queue th.ui-loan-queue-num { text-align: right; }
.ui-loan-queue-member { font-weight: 600; }
.ui-loan-queue-member a { color: inherit; text-decoration: none; }
.ui-loan-queue-member a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-loan-queue-member a:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-loan-queue-sub { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-loan-queue-id { font-family: var(--ui-mono); white-space: nowrap; }
.ui-loan-queue-amount { font-weight: 600; }
.ui-loan-queue-note { display: inline-block; margin-top: 4px; padding: 0 7px; border-radius: 999px; background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 12px; font-weight: 500; }
.ui-loan-queue-dots { display: flex; gap: 4px; margin: 2px 0 4px; }
.ui-loan-queue-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--ui-border);
  font-size: 11px; font-weight: 700; line-height: 1; }
.ui-loan-queue-yes { border: 0; background: var(--ui-success-soft); color: var(--ui-success); }
.ui-loan-queue-no { border: 0; background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-loan-queue-who { color: var(--ui-muted); font-size: 12px; }
.ui-loan-queue-status { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--ui-info-soft); color: var(--ui-info); }
.ui-loan-queue-approved .ui-loan-queue-status { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-loan-queue-declined .ui-loan-queue-status { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-loan-queue-approved td, .ui-loan-queue-declined td { background: color-mix(in srgb, var(--ui-subtle) 50%, transparent); }
.ui-loan-queue-form { display: flex; gap: 6px; margin: 0; justify-content: flex-end; }
.ui-loan-queue-btn { height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); cursor: pointer; white-space: nowrap; }
.ui-loan-queue-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-loan-queue-approve { border-color: transparent; background: var(--ui-success); color: #fff; }
.ui-loan-queue-approve:hover { filter: brightness(1.08); }
.ui-loan-queue-decline { color: var(--ui-danger); }
.ui-loan-queue-decline:hover { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-loan-queue-mine { display: block; color: var(--ui-muted); font-size: 12px; text-align: right; white-space: nowrap; }
.ui-loan-queue-empty { padding: 28px 12px; color: var(--ui-muted); text-align: center; }


.ui-tokens { display: grid; gap: 10px; margin: 0; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-tokens-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-tokens table { width: 100%; border-collapse: collapse; }
.ui-tokens th, .ui-tokens td { padding: 10px 12px; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: middle; white-space: nowrap; }
.ui-tokens tbody tr:last-child td { border-bottom: 0; }
.ui-tokens th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ui-tokens-name { font-weight: 600; }
.ui-tokens-prefix { display: block; margin-top: 2px; color: var(--ui-muted); font: 12px/1.3 var(--ui-mono); }
.ui-tokens-date { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-tokens-never { color: var(--ui-muted); font-style: italic; }
.ui-tokens-expired { color: var(--ui-danger); font-weight: 600; }
.ui-tokens-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-tokens-scope { padding: 1px 7px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 500; }
.ui-tokens td:last-child { text-align: right; }
.ui-tokens-empty { padding: 28px 16px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
@media (max-width: 640px) { .ui-tokens .ui-tokens-col-used, .ui-tokens .ui-tokens-col-scopes { display: none; } }


.ui-profile-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); text-align: center; }
.ui-profile-card-cover { height: 84px; background: linear-gradient(120deg, var(--ui-accent-soft), color-mix(in srgb, var(--ui-accent) 55%, var(--ui-accent-soft))); }
.ui-profile-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-profile-card-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; }
.ui-profile-card-cover + .ui-profile-card-body { padding-top: 0; }
.ui-profile-card-cover + .ui-profile-card-body .ui-profile-card-pic { margin-top: -36px; }
.ui-profile-card-pic { flex: none; border-radius: 50%; box-shadow: 0 0 0 4px var(--ui-surface); }
.ui-profile-card-name { margin: 8px 0 0; font-size: 17px; font-weight: 650; line-height: 1.3; }
.ui-profile-card-name a { color: inherit; text-decoration: none; }
.ui-profile-card-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-profile-card-name a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }
.ui-profile-card-handle { color: var(--ui-muted); font-size: 13px; }
.ui-profile-card-title { font-weight: 500; }
.ui-profile-card-where { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-muted); font-size: 13px; }
.ui-profile-card-where svg { width: 13px; height: 13px; }
.ui-profile-card-bio { max-width: 36em; margin: 6px 0 0; color: var(--ui-muted); }
.ui-profile-card-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: 100%; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--ui-border); }
.ui-profile-card-stat { flex: 1 1 0; display: grid; gap: 1px; min-width: 70px; margin: 0; padding: 0 8px; }
.ui-profile-card-stat + .ui-profile-card-stat { border-left: 1px solid var(--ui-border); }
.ui-profile-card-stat dd { margin: 0; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-profile-card-stat dt { color: var(--ui-muted); font-size: 12px; }
.ui-profile-card-acts:empty { display: none; }
.ui-profile-card-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.ui-profile-card-row { text-align: left; }
.ui-profile-card-row .ui-profile-card-body { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
.ui-profile-card-row .ui-profile-card-pic { grid-row: 1 / span 5; margin-top: 0 !important; }
.ui-profile-card-row .ui-profile-card-name { margin-top: 0; }
.ui-profile-card-row .ui-profile-card-stats, .ui-profile-card-row .ui-profile-card-acts { grid-column: 1 / -1; justify-content: flex-start; }
.ui-profile-card-row .ui-profile-card-stat { flex: 0 1 auto; padding: 0 16px 0 0; }
.ui-profile-card-row .ui-profile-card-stat + .ui-profile-card-stat { padding-left: 16px; }
.ui-profile-card-row .ui-profile-card-cover + .ui-profile-card-body { padding-top: 20px; }


.ui-notifyask { container-type: inline-size; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-notifyask-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-notifyask-words { display: grid; gap: 10px; min-width: 0; }
.ui-notifyask-title { margin: 0; font-size: 16px; font-weight: 600; }
.ui-notifyask-why { margin: 0; color: var(--ui-muted); }
.ui-notifyask-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ui-notifyask-list li { position: relative; padding-left: 20px; }
.ui-notifyask-list li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent); }
.ui-notifyask-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-notifyask-bar > .ui-btn { flex: 1 1 auto; }
.ui-notifyask-say { margin: 0; color: var(--ui-muted); }
.ui-notifyask-say[data-bad] { color: var(--ui-fg); }
.ui-notifyask-quiet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
/* A wide pane has room for the reasons in two columns and the buttons on one side. */
@container (min-width: 420px) {
  .ui-notifyask-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ui-notifyask-bar { justify-content: flex-end; }
  .ui-notifyask-bar > .ui-btn { flex: 0 0 auto; }
}
/* A whole tablet: the case on one side, the choice on the other, so the thumb need not cross it. */
@container (min-width: 600px) {
  .ui-notifyask-ask { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 24px; align-items: center; padding: 24px; }
  .ui-notifyask-ask .ui-notifyask-bar { flex-direction: column-reverse; }
  .ui-notifyask-ask .ui-notifyask-bar > .ui-btn { flex: 0 0 auto; }
}


.ui-drag-between-panes { position: relative; box-sizing: border-box; width: 100%; height: 100%; min-height: 280px; container-type: inline-size; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); }
.ui-drag-between-panes-grid { box-sizing: border-box; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 100%; padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--ui-subtle); }
.ui-drag-between-panes-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); transition: border-color .12s; }
.ui-drag-between-panes-over { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-drag-between-panes-full { border-color: var(--ui-danger); }
.ui-drag-between-panes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: none; padding: 10px 12px 8px; border-bottom: 1px solid var(--ui-border); }
.ui-drag-between-panes-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ui-drag-between-panes-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-drag-between-panes-list { flex: 1; min-height: 80px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior-y: contain; list-style: none; }
.ui-drag-between-panes-row { display: flex; align-items: center; gap: 2px; min-height: 60px; margin-bottom: 4px; padding-right: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-drag-between-panes-parts { display: contents; }
.ui-drag-between-panes-pressing { background: var(--ui-subtle); }
.ui-drag-between-panes-source { opacity: .35; }
.ui-drag-between-panes-grip { display: grid; flex: none; place-items: center; width: 44px; height: 52px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted); cursor: grab; touch-action: none; }
.ui-drag-between-panes-grip svg { width: 20px; height: 20px; }
.ui-drag-between-panes-grip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-drag-between-panes-text { flex: 1; min-width: 0; }
.ui-drag-between-panes-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-drag-between-panes-detail { display: block; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ui-drag-between-panes-move { flex: none; width: 76px; height: 44px; padding: 0 2px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-drag-between-panes-move:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-drag-between-panes-slot { display: grid; place-items: center; height: 44px; margin-bottom: 4px; border: 2px dashed var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 13px; font-weight: 500; }
.ui-drag-between-panes-refused { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-drag-between-panes-empty { padding: 16px 8px; color: var(--ui-muted); font-size: 14px; text-align: center; }
.ui-drag-between-panes-ghost { position: absolute; left: 0; top: 0; z-index: 20; display: none; box-sizing: border-box; min-height: 52px; padding: 8px 12px; align-items: center; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); font-weight: 600; pointer-events: none; will-change: transform; }
.ui-drag-between-panes-flying { display: flex; }
/* In a narrow pane, in Split View or Slide Over, the panes stand one above the other. */
@container (max-width: 560px) {
  .ui-drag-between-panes-grid { grid-auto-flow: row; grid-auto-rows: minmax(0, 1fr); }
  .ui-drag-between-panes-move { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ui-drag-between-panes-pane { transition: none; } }


.ui-marquee {
  position: relative; overflow: hidden; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ui-marquee-track { display: flex; width: max-content; animation: ui-marquee var(--t, 20s) linear infinite; }
.ui-marquee-right .ui-marquee-track { animation-direction: reverse; }
.ui-marquee-pause:hover .ui-marquee-track, .ui-marquee-pause:focus-within .ui-marquee-track { animation-play-state: paused; }
.ui-marquee-group { display: flex; flex: none; align-items: center; gap: var(--g, 48px); padding-right: var(--g, 48px); }
.ui-marquee-group > * { flex: none; }
@keyframes ui-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ui-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .ui-marquee-track { animation: none; }
  .ui-marquee-group[aria-hidden] { display: none; }
}


.ui-time-input { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-time-input-label { padding: 0; font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-time-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-time-input-box {
  display: inline-flex; align-items: center; gap: 2px; width: fit-content; height: 38px; padding: 0 10px 0 6px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-time-input-box:hover { border-color: var(--ui-strong); }
.ui-time-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-time-input-invalid .ui-time-input-box { border-color: var(--ui-danger); }
.ui-time-input-seg {
  width: 2.4ch; height: 28px; margin: 0; padding: 0 2px; border: 0; border-radius: 4px; background: transparent;
  color: var(--ui-fg); font: 15px/1 var(--ui-mono); text-align: center; caret-color: transparent;
}
.ui-time-input-seg::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-time-input-seg:focus { outline: none; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-time-input-seg:focus::placeholder { color: var(--ui-accent-fg); }
.ui-time-input-seg:focus::selection { background: transparent; }
.ui-time-input-ampm { width: 3.2ch; margin-left: 6px; }
.ui-time-input-colon { color: var(--ui-muted); font: 15px/1 var(--ui-mono); }
.ui-time-input-icon { width: 16px; height: 16px; margin: 0 4px 0 2px; color: var(--ui-muted); flex: none; }
.ui-time-input-sm .ui-time-input-box { height: 30px; }
.ui-time-input-sm .ui-time-input-seg { height: 22px; font-size: 13px; }
.ui-time-input-hint, .ui-time-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-time-input-error { color: var(--ui-danger); }
.ui-time-input:disabled .ui-time-input-box { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-time-input-box { transition: none; } }


.ui-areac {
  --ui-areac-1: light-dark(#2a78d6, #3987e5); --ui-areac-2: light-dark(#eb6834, #d95926);
  --ui-areac-3: light-dark(#1baf7a, #199e70); --ui-areac-4: light-dark(#eda100, #c98500);
  --ui-areac-5: light-dark(#e87ba4, #d55181); --ui-areac-6: light-dark(#008300, #008300);
  --ui-areac-7: light-dark(#6250d6, #9085e9); --ui-areac-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg);
  container-type: inline-size; }
.ui-areac-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-areac-s1 { --c: var(--ui-areac-1); } .ui-areac-s2 { --c: var(--ui-areac-2); } .ui-areac-s3 { --c: var(--ui-areac-3); }
.ui-areac-s4 { --c: var(--ui-areac-4); } .ui-areac-s5 { --c: var(--ui-areac-5); } .ui-areac-s6 { --c: var(--ui-areac-6); }
.ui-areac-s7 { --c: var(--ui-areac-7); } .ui-areac-s8 { --c: var(--ui-areac-8); }
.ui-areac-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-areac-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-areac-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-areac-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-areac-y { position: relative; min-width: 24px; }
.ui-areac-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-areac-plot { position: relative; }
.ui-areac-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-areac-grid.ui-areac-zero { background: var(--ui-strong); }
.ui-areac-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-areac-fill { fill: var(--c); opacity: .16; stroke: none; }
.ui-areac-stacked .ui-areac-fill { opacity: .55; }
.ui-areac-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-areac-cols { position: absolute; top: 0; bottom: 0; display: flex; }
.ui-areac-col { position: relative; flex: 1; min-width: 0; }
.ui-areac-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ui-strong); opacity: 0; }
.ui-areac-dot { position: absolute; left: 50%; display: none; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg); pointer-events: none; }
.ui-areac-col:hover::before { opacity: 1; }
.ui-areac-col:hover .ui-areac-dot, .ui-areac-col:hover .ui-areac-tip { display: block; }
.ui-areac-tip { position: absolute; z-index: 20; top: 0; left: calc(50% + 10px); display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; pointer-events: none; }
.ui-areac-flip .ui-areac-tip { left: auto; right: calc(50% + 10px); }
.ui-areac-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-areac-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-areac-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-areac-tip .ui-areac-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ui-border); }
.ui-areac-x { position: relative; height: 16px; margin-top: 6px; }
.ui-areac-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ui-muted); white-space: nowrap; }
.ui-areac-x .ui-areac-first { transform: none; }
.ui-areac-x .ui-areac-last { transform: translateX(-100%); }
@container (max-width: 520px) { .ui-areac-x .ui-areac-alt { display: none; } }


.ui-loan-offers { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
  min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-loan-offers-offer { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; height: 100%; box-sizing: border-box;
  padding: 18px 18px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-loan-offers-best { border-color: var(--ui-success); box-shadow: 0 0 0 1px var(--ui-success); }
.ui-loan-offers-flag { position: absolute; top: -11px; left: 14px; padding: 2px 10px; border-radius: 999px; background: var(--ui-success); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.ui-loan-offers-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ui-loan-offers-lender { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; }
.ui-loan-offers-tag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 600; }
.ui-loan-offers-apr { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-loan-offers-apr small { margin-left: 4px; color: var(--ui-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.ui-loan-offers-facts { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0; align-content: start; }
.ui-loan-offers-facts dt { color: var(--ui-muted); }
.ui-loan-offers-facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-loan-offers-facts .ui-loan-offers-total { padding-top: 8px; border-top: 1px solid var(--ui-border); color: var(--ui-fg); font-weight: 700; }
.ui-loan-offers-best .ui-loan-offers-total { color: var(--ui-success); }
.ui-loan-offers-foot { display: grid; gap: 8px; }
.ui-loan-offers-diff { margin: 0; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-loan-offers-note { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ui-loan-offers-choose { display: inline-flex; align-items: center; justify-content: center; height: 34px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font-weight: 600; text-decoration: none; }
.ui-loan-offers-choose:hover { background: var(--ui-subtle); }
.ui-loan-offers-best .ui-loan-offers-choose { border-color: transparent; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-loan-offers-best .ui-loan-offers-choose:hover { background: var(--ui-accent); filter: brightness(1.08); }
.ui-loan-offers-choose:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-apikey { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-apikey-label { font-size: 13px; font-weight: 500; }
.ui-apikey-box { display: flex; align-items: stretch; min-width: 0; }
.ui-apikey-control {
  box-sizing: border-box; flex: 1; min-width: 0; height: 38px; margin: 0; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); background: var(--ui-subtle);
  color: var(--ui-fg); font: 13px/1 var(--ui-mono); letter-spacing: .02em; text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
}
.ui-apikey-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); position: relative; z-index: 1; }
.ui-apikey-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin-left: -1px; padding: 0 12px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); font: 500 13px/1 var(--ui-font); cursor: pointer;
  white-space: nowrap;
}
.ui-apikey-btn:last-child { border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-apikey-btn:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-apikey-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); position: relative; z-index: 1; }
.ui-apikey-btn[aria-pressed="true"] { color: var(--ui-accent); }
.ui-apikey-btn svg { width: 16px; height: 16px; }
.ui-apikey-ok { color: var(--ui-success); }
.ui-apikey-bad { color: var(--ui-danger); }
.ui-apikey-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-apikey-sm .ui-apikey-control, .ui-apikey-sm .ui-apikey-btn { height: 30px; font-size: 12px; }
.ui-apikey-sm .ui-apikey-btn { padding: 0 9px; }
@media (max-width: 480px) { .ui-apikey-btn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-apikey-control { transition: none; } }


.ui-handwritten-note { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; min-height: 320px; container-type: inline-size;
  color: var(--ui-fg); background: var(--ui-subtle); font: 14px/1.4 var(--ui-font); }
.ui-handwritten-note-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: none; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-handwritten-note-gap { flex: 1; }
.ui-handwritten-note-count { min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.ui-handwritten-note-btn { min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-handwritten-note-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-handwritten-note-btn:disabled { color: var(--ui-muted); opacity: .55; cursor: default; }
.ui-handwritten-note-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-handwritten-note-btn:not(:disabled):hover { background: var(--ui-subtle); } }
.ui-handwritten-note-body { display: flex; flex: 1; min-height: 0; }
/* The list of pages is for the width of a turned tablet: upright the bar is enough, and the page takes the room. */
.ui-handwritten-note-side { display: none; flex: none; flex-direction: column; gap: 4px; width: 148px; overflow-y: auto; padding: 8px; border-right: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-handwritten-note-tab { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-handwritten-note-tab[aria-current="page"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-handwritten-note-tab small { color: var(--ui-muted); font-weight: 400; }
.ui-handwritten-note-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-handwritten-note-scroll { position: relative; flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px; outline: none; }
.ui-handwritten-note-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-handwritten-note-sheet { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: var(--ratio); background-color: var(--ui-surface); box-shadow: var(--ui-shadow);
  background-image: linear-gradient(to right, transparent calc(var(--margin) - 1px), color-mix(in srgb, var(--ui-danger) 40%, transparent) var(--margin), transparent calc(var(--margin) + 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--ui-border) calc(100% - 1px));
  background-size: 100% 100%, 100% var(--rule);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.ui-handwritten-note-writes { touch-action: none; }
.ui-handwritten-note-spring { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.ui-handwritten-note-sheet canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ui-handwritten-note-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; min-height: 28px; padding: 4px max(10px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); font-size: 13px; }
.ui-handwritten-note-save { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ui-accent); font-weight: 500; }
@container (min-width: 1000px) { .ui-handwritten-note-side { display: flex; } }
@media (prefers-reduced-motion: reduce) { .ui-handwritten-note-spring { transition: none; } }


.ui-keyboard-bar-host { min-width: 0; }
.ui-keyboard-bar {
  position: fixed; inset: auto 0 0 0; z-index: 40; container-type: inline-size; visibility: hidden; box-sizing: border-box;
  border-top: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-fg); font: 15px/1.3 var(--ui-font);
  padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)); will-change: transform; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-keyboard-bar-on { visibility: visible; }
/* With the keyboard down the bar reaches the screen's edge, and clears the home indicator. */
.ui-keyboard-bar-low { padding-bottom: env(safe-area-inset-bottom); }
.ui-keyboard-bar-row { display: flex; align-items: center; gap: 4px; }
.ui-keyboard-bar-btn {
  display: grid; place-items: center; min-width: 48px; height: 46px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: 500 16px var(--ui-font); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ui-keyboard-bar-btn svg { width: 24px; height: 24px; }
.ui-keyboard-bar-btn[aria-disabled="true"] { color: var(--ui-muted); opacity: .45; cursor: default; }
.ui-keyboard-bar-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-keyboard-bar-where { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: var(--ui-muted); visibility: hidden; }
.ui-keyboard-bar-done { padding: 0 12px; font-weight: 600; }
@media (hover: hover) { .ui-keyboard-bar-btn:hover:not([aria-disabled="true"]) { background: var(--ui-bg); } }
@container (min-width: 440px) {
  .ui-keyboard-bar-where { visibility: visible; }
}


.ui-kbd { display: inline-flex; align-items: center; gap: 3px; font: 12px/1 var(--ui-mono); color: var(--ui-fg); vertical-align: middle; }
.ui-kbd-key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 5px; background: var(--ui-surface);
  color: var(--ui-fg); font: 500 12px/1 var(--ui-mono); white-space: nowrap; }
.ui-kbd-sym { font-family: var(--ui-font); font-size: 1.1em; }
.ui-kbd-plus { color: var(--ui-muted); font-size: 11px; }
.ui-kbd-sm .ui-kbd-key { min-width: 1.7em; height: 1.7em; font-size: 11px; }
.ui-kbd-lg .ui-kbd-key { min-width: 2.2em; height: 2.2em; font-size: 14px; padding: 0 .6em; }


.ui-nquiz { display: grid; gap: 14px; max-width: 560px; padding: 18px 20px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-nquiz-head { display: grid; gap: 8px; }
.ui-nquiz-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-nquiz .ui-nquiz-title { margin: 0; font-size: 17px; font-weight: 750; }
.ui-nquiz-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-nquiz-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.ui-nquiz-track span { height: 4px; border-radius: 2px; background: var(--ui-border); }
.ui-nquiz-track .ui-nquiz-r { background: var(--ui-success); }
.ui-nquiz-track .ui-nquiz-w { background: var(--ui-danger); }
.ui-nquiz-track .ui-nquiz-now { background: var(--ui-accent); }
.ui-nquiz-q { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.ui-nquiz-q:focus { outline: none; }
.ui-nquiz-q:focus-visible { box-shadow: var(--ui-focus); border-radius: 4px; }
.ui-nquiz-choices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ui-nquiz-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1.35 var(--ui-font); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s; }
.ui-nquiz-choice:hover:not([aria-disabled="true"]) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-nquiz-choice:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nquiz-choice[aria-disabled="true"] { cursor: default; }
.ui-nquiz-letter { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ui-subtle);
  color: var(--ui-muted); font-size: 13px; font-weight: 700; }
.ui-nquiz-text { flex: 1; }
.ui-nquiz-mark { flex: none; font-weight: 800; }
.ui-nquiz-right { border-color: var(--ui-success); background: var(--ui-success-soft); }
.ui-nquiz-right .ui-nquiz-letter { background: var(--ui-success); color: var(--ui-bg); }
.ui-nquiz-right .ui-nquiz-mark { color: var(--ui-success); }
.ui-nquiz-wrong { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-nquiz-wrong .ui-nquiz-letter { background: var(--ui-danger); color: var(--ui-bg); }
.ui-nquiz-wrong .ui-nquiz-mark { color: var(--ui-danger); }
.ui-nquiz-faded { opacity: .55; }
.ui-nquiz-feedback { display: grid; gap: 4px; }
.ui-nquiz-feedback:empty { margin-top: -14px; }
.ui-nquiz-verdict { margin: 0; font-weight: 700; }
.ui-nquiz-ok .ui-nquiz-verdict { color: var(--ui-success); }
.ui-nquiz-no .ui-nquiz-verdict { color: var(--ui-danger); }
.ui-nquiz-explain { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-nquiz-explain a { color: var(--ui-accent); font-weight: 600; }
.ui-nquiz-btn { justify-self: start; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 650 14px var(--ui-font); cursor: pointer; }
.ui-nquiz-btn:hover { filter: brightness(1.08); }
.ui-nquiz-btn:focus-visible, .ui-nquiz a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-nquiz-end { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.ui-nquiz-score { margin: 0; font-size: 42px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ui-nquiz-score small { color: var(--ui-muted); font-size: 20px; font-weight: 600; }
.ui-nquiz-say { margin: 0; font-size: 17px; font-weight: 650; }
.ui-nquiz-marks { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-nquiz-marks li { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--ui-bg); }
.ui-nquiz-marks .ui-nquiz-r { background: var(--ui-success); }
.ui-nquiz-marks .ui-nquiz-w { background: var(--ui-danger); }
.ui-nquiz-end .ui-nquiz-btn { justify-self: center; }
@media (prefers-reduced-motion: reduce) { .ui-nquiz-choice { transition: none; } }


.ui-rtry-host { position: relative; min-width: 0; }
.ui-rtry { container-type: inline-size; box-sizing: border-box; min-width: 0; border: 1px solid color-mix(in srgb, var(--ui-danger) 40%, var(--ui-border)); border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
.ui-rtry-top { position: fixed; z-index: 45; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); border-width: 0 0 1px; border-radius: 0; }
.ui-rtry-bottom { position: fixed; z-index: 45; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom); border-width: 1px 0 0; border-radius: 0; }
.ui-rtry-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.ui-rtry-text { display: grid; gap: 1px; min-width: 0; }
.ui-rtry-title { margin: 0; font-weight: 600; }
.ui-rtry-what { margin: 0; overflow-wrap: anywhere; color: var(--ui-muted); font-size: 14px; }
.ui-rtry-line { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-rtry-btn { min-width: 88px; min-height: 46px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-rtry-btn:disabled { color: var(--ui-muted); cursor: default; }
.ui-rtry-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rtry-track { height: 3px; overflow: hidden; background: color-mix(in srgb, var(--ui-danger) 15%, transparent); }
.ui-rtry-fill { height: 100%; background: var(--ui-danger); transition: width .25s linear; }
.ui-rtry-ok { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-success-soft); color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }
@media (hover: hover) { .ui-rtry-btn:hover:enabled { border-color: var(--ui-strong); background: var(--ui-subtle); } }
@media (prefers-reduced-motion: reduce) { .ui-rtry-fill { transition: none; } }


.ui-barch { display: grid; gap: 6px; margin: 0; font: 15px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-barch .ui-barch-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.ui-barch-year { border-bottom: 1px solid var(--ui-border); }
.ui-barch-year > summary { display: flex; align-items: center; gap: 10px; padding: 10px 2px; cursor: pointer; list-style: none; border-radius: var(--ui-radius-sm); }
.ui-barch-year > summary::-webkit-details-marker { display: none; }
.ui-barch-year > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border: solid var(--ui-muted);
  border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.ui-barch-year[open] > summary::before { transform: rotate(45deg); }
.ui-barch-year > summary:hover .ui-barch-y { color: var(--ui-accent); }
.ui-barch-year > summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-barch-y { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-barch-n { margin-left: auto; padding: 1px 9px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px;
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-barch-months { display: grid; gap: 14px; margin: 0; padding: 2px 0 16px 24px; list-style: none; }
.ui-barch .ui-barch-month { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 650; color: var(--ui-muted);
  letter-spacing: .03em; text-transform: uppercase; }
.ui-barch-month a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-barch-month a:hover { color: var(--ui-accent); }
.ui-barch-month a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-barch-month small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ui-barch-posts { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-barch-posts li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ui-barch-posts time { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-barch-posts a { color: var(--ui-fg); text-decoration: none; border-radius: 3px; }
.ui-barch-posts a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-barch-posts a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-barch-all { display: inline-block; margin: -6px 0 14px 24px; color: var(--ui-accent); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 3px; }
.ui-barch-all:hover { text-decoration: underline; }
.ui-barch-all:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-barch-compact .ui-barch-months { gap: 2px; padding-bottom: 10px; }
.ui-barch-compact .ui-barch-month { margin: 0; justify-content: space-between; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ui-fg); font-size: 14px; }
.ui-barch-compact .ui-barch-month small { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-barch-year > summary::before { transition: none; } }


.ui-bottombar { position: relative; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; container-type: inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-bottombar-scroll {
  box-sizing: border-box; height: 100%; padding-bottom: calc(112px + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; outline: none;
}
.ui-bottombar-scroll:focus-visible { box-shadow: inset var(--ui-focus); }
.ui-bottombar-bar {
  position: absolute; inset: auto 0 0; z-index: 2; box-sizing: border-box; height: calc(64px + env(safe-area-inset-bottom));
  padding: 8px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  color: var(--ui-fg); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ui-bottombar-hidden .ui-bottombar-bar { transform: translate3d(0, 100%, 0); }
/* The notch is cut from a layer of its own, so the mask leaves the buttons alone; the outer layer's filter draws the edge around the cut. */
.ui-bottombar-edge { position: absolute; inset: 0; filter: drop-shadow(0 -1px 0 var(--ui-border)); }
.ui-bottombar-shape { position: absolute; inset: 0; background: var(--ui-surface); }
.ui-bottombar-notch-end .ui-bottombar-shape {
  -webkit-mask: radial-gradient(circle 37px at calc(100% - 52px) 0, transparent 36px, #000 37px); mask: radial-gradient(circle 37px at calc(100% - 52px) 0, transparent 36px, #000 37px);
}
.ui-bottombar-notch-center .ui-bottombar-shape {
  -webkit-mask: radial-gradient(circle 37px at 50% 0, transparent 36px, #000 37px); mask: radial-gradient(circle 37px at 50% 0, transparent 36px, #000 37px);
}
.ui-bottombar-actions { position: relative; display: flex; align-items: center; gap: 4px; height: 56px; overflow-x: auto; scrollbar-width: none; }
.ui-bottombar-actions::-webkit-scrollbar { display: none; }
.ui-bottombar-notch-end .ui-bottombar-actions { margin-inline-end: 88px; }
.ui-bottombar-gap { flex: 0 0 88px; }
.ui-bottombar-notch-center .ui-bottombar-actions { justify-content: space-between; }
.ui-bottombar-action {
  position: relative; display: inline-grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font: 20px var(--ui-font); cursor: pointer;
}
.ui-bottombar-action svg { width: 24px; height: 24px; }
.ui-bottombar-action:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bottombar-action:active { background: var(--ui-subtle); }
@media (hover: hover) { .ui-bottombar-action:hover { background: var(--ui-subtle); } }
.ui-bottombar-badge {
  position: absolute; top: 4px; inset-inline-end: 2px; min-width: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: var(--ui-danger); color: #fff; font: 700 10px/16px var(--ui-font); text-align: center;
}
.ui-bottombar-fab {
  position: absolute; z-index: 3; bottom: calc(36px + env(safe-area-inset-bottom)); inset-inline-end: 24px; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0;
  border-radius: 50%; background: var(--ui-accent); color: #fff; box-shadow: var(--ui-shadow-lg); font: 22px var(--ui-font); cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ui-bottombar-fab svg { width: 24px; height: 24px; }
.ui-bottombar-fab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bottombar-fab-center { inset-inline-end: calc(50% - 28px); }
.ui-bottombar-hidden .ui-bottombar-fab { transform: translate3d(0, 20px, 0); }
@container (min-width: 600px) {
  .ui-bottombar-bar {
    inset: auto auto calc(16px + env(safe-area-inset-bottom)) 50%; display: flex; width: auto; max-width: 80%; height: 64px; padding: 8px 12px;
    transform: translate3d(-50%, 0, 0);
  }
  .ui-bottombar-hidden .ui-bottombar-bar { transform: translate3d(-50%, calc(100% + 32px), 0); }
  .ui-bottombar-edge { filter: none; }
  .ui-bottombar-notch-end .ui-bottombar-shape, .ui-bottombar-notch-center .ui-bottombar-shape {
    -webkit-mask: none; mask: none; border: 1px solid var(--ui-border); border-radius: 999px; box-shadow: var(--ui-shadow-lg);
  }
  .ui-bottombar-notch-end .ui-bottombar-actions { margin-inline-end: 0; }
  .ui-bottombar-notch-center .ui-bottombar-actions { justify-content: flex-start; }
  .ui-bottombar-gap { display: none; }
  .ui-bottombar-fab, .ui-bottombar-fab-center { inset-inline-end: 24px; bottom: calc(20px + env(safe-area-inset-bottom)); }
  .ui-bottombar-hidden .ui-bottombar-fab { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-bottombar-bar, .ui-bottombar-fab { transition: none; } }


.ui-divider { flex: none; margin: 16px 0; border: 0; border-top: 1px solid var(--ui-border); }
.ui-divider-v { align-self: stretch; min-height: 1em; margin: 0 12px; border-top: 0; border-left: 1px solid var(--ui-border); }
.ui-divider-label {
  display: flex; align-items: center; gap: 12px; border: 0;
  color: var(--ui-muted); font: 500 12px/1.4 var(--ui-font); letter-spacing: .02em; white-space: nowrap;
}
.ui-divider-label::before, .ui-divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--ui-border); }
.ui-divider-label.ui-divider-v { flex-direction: column; gap: 6px; border: 0; }
.ui-divider-label.ui-divider-v::before, .ui-divider-label.ui-divider-v::after { border-top: 0; border-left: 1px solid var(--ui-border); }
.ui-divider-sm { margin-block: 8px; }
.ui-divider-lg { margin-block: 28px; }
.ui-divider-v.ui-divider-sm { margin: 0 6px; }
.ui-divider-v.ui-divider-lg { margin: 0 20px; }


.ui-bseries { display: grid; gap: 12px; margin: 0; padding: 16px 18px; border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-accent);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 15px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-bseries-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ui-bseries-count { color: var(--ui-accent); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ui-bseries-name { font-weight: 650; }
.ui-bseries-name a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-bseries-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bseries-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-bar { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-bseries-bar li { flex: 1; height: 5px; border-radius: 3px; background: var(--ui-border); }
.ui-bseries-bar .ui-bseries-done { background: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
.ui-bseries-bar .ui-bseries-here { background: var(--ui-accent); }
.ui-bseries-list summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--ui-muted); font-size: 14px;
  font-weight: 500; cursor: pointer; list-style: none; border-radius: 3px; }
.ui-bseries-list summary::-webkit-details-marker { display: none; }
.ui-bseries-list summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s; }
.ui-bseries-list[open] summary::before { transform: rotate(45deg); }
.ui-bseries-list summary:hover { color: var(--ui-accent); }
.ui-bseries-list summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-list ol { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: ui-bseries; }
.ui-bseries-list li { counter-increment: ui-bseries; display: flex; align-items: baseline; gap: 10px; padding: 5px 8px; border-radius: var(--ui-radius-sm); }
.ui-bseries-list li::before { content: counter(ui-bseries); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 650; }
.ui-bseries-list li.ui-bseries-done::before { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-bseries-list li.ui-bseries-here { background: var(--ui-accent-soft); }
.ui-bseries-list li.ui-bseries-here::before { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-bseries-list li a { color: var(--ui-fg); text-decoration: none; border-radius: 3px; }
.ui-bseries-list li a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bseries-list li a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-list li [aria-current] { font-weight: 650; }
.ui-bseries-soon { color: var(--ui-muted); }
.ui-bseries-step.ui-bseries-soon { border-style: dashed; }
.ui-bseries-list .ui-bseries-soon small { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ui-subtle); font-size: 12px; white-space: nowrap; }
.ui-bseries-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-bseries-step { display: grid; gap: 1px; min-width: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  color: var(--ui-fg); text-decoration: none; font-size: 14px; }
.ui-bseries-step small { color: var(--ui-muted); font-size: 12px; }
.ui-bseries-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ui-bseries-next { grid-column: 2; text-align: end; }
a.ui-bseries-step:hover { border-color: var(--ui-accent); }
a.ui-bseries-step:hover span { color: var(--ui-accent); }
a.ui-bseries-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-bottom .ui-bseries-step { padding: 12px 16px; }
.ui-bseries-bottom .ui-bseries-step span { white-space: normal; font-size: 16px; }
@media (max-width: 480px) { .ui-bseries-steps { grid-template-columns: 1fr; } .ui-bseries-next { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-bseries-list summary::before { transition: none; } }


.ui-paycode { display: grid; gap: 12px; justify-items: center; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); text-align: center; }
.ui-paycode-sum { margin: 0; color: var(--ui-muted); }
.ui-paycode-sum strong { display: block; color: var(--ui-fg); font-size: 28px; font-variant-numeric: tabular-nums; }
.ui-paycode-cols { display: grid; gap: 12px; justify-items: center; width: 100%; min-width: 0; }
/* A hold is the finger's: no scroll, selection or callout may take it. */
.ui-paycode-hold {
  position: relative; display: grid; place-items: center; width: 150px; height: 150px; padding: 0; overflow: hidden; border: 2px solid var(--ui-accent); border-radius: 50%;
  background: var(--ui-accent-soft); color: var(--ui-fg); font: 600 15px/1.3 var(--ui-font); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-paycode-hold::before { content: ""; position: absolute; inset: 0; background: var(--ui-accent); opacity: .35; transform: scaleY(0); transform-origin: 50% 100%; }
.ui-paycode-holding::before { transform: scaleY(1); transition: transform var(--ui-paycode-hold, .8s) linear; }
.ui-paycode-armed::before { transform: scaleY(1); }
.ui-paycode-hold span { position: relative; }
.ui-paycode-hold:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-paycode-ask { display: grid; gap: 8px; justify-items: center; margin: 0; }
.ui-paycode-ask p { margin: 0; }
.ui-paycode-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-paycode-qr { box-sizing: border-box; width: min(100%, 300px); padding: 8px; border-radius: var(--ui-radius); background: #fff; color: #000; }
.ui-paycode-qr figure { margin: 0; }
.ui-paycode-qr svg { display: block; width: 100%; height: auto; }
.ui-paycode-digits { margin: 0; font: 600 24px/1.3 var(--ui-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-paycode-clock { width: min(100%, 300px); }
.ui-paycode-clock p { margin: 0 0 4px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-paycode-left { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-paycode-left span { display: block; height: 100%; background: var(--ui-accent); transition: width .9s linear; }
.ui-paycode-note { margin: 0; color: var(--ui-muted); font-size: 13px; max-width: 34em; }
.ui-paycode-bad { color: var(--ui-danger); }
.ui-paycode-paid { margin: 0; color: var(--ui-success); font-size: 22px; font-weight: 700; }
@container (min-width: 560px) {
  .ui-paycode-showing { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .ui-paycode-holding::before, .ui-paycode-left span { transition: none; } .ui-paycode-holding::before { opacity: .6; } }


.ui-file-icon { display: inline-block; flex: none; width: auto; height: 36px; vertical-align: middle; --c: var(--ui-muted); }
.ui-file-icon-sm { height: 24px; }
.ui-file-icon-lg { height: 52px; }
.ui-file-icon-xl { height: 72px; }
.ui-file-icon-sheet { --c: #18794e; } .ui-file-icon-document { --c: #0b6bcb; } .ui-file-icon-slides { --c: #d9480f; }
.ui-file-icon-pdf { --c: #c62a2f; } .ui-file-icon-image { --c: #7c3aed; } .ui-file-icon-video { --c: #be185d; }
.ui-file-icon-audio { --c: #0e7490; } .ui-file-icon-archive { --c: #8a6d1a; } .ui-file-icon-code { --c: #2f6b3a; }
.ui-file-icon-text { --c: #5e5c6e; }
.ui-file-icon-page { fill: var(--ui-surface); stroke: var(--ui-strong); stroke-width: 1.5; }
.ui-file-icon-fold { fill: var(--ui-subtle); stroke: var(--ui-strong); stroke-width: 1.5; stroke-linejoin: round; }
.ui-file-icon-tag { fill: var(--c); }
.ui-file-icon-ext { fill: #fff; font: 700 9px/1 var(--ui-font); letter-spacing: .03em; text-anchor: middle; }
.ui-file-icon-long .ui-file-icon-ext { font-size: 7.5px; }


.ui-gsum { display: grid; gap: 12px; min-width: 0; color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-gsum .ui-gsum-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-gsum-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px 16px; }
.ui-gsum-part { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-gsum-part legend { padding: 0 0 4px; font-size: 13px; font-weight: 600; }
.ui-gsum-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ui-gsum-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 13px; }
.ui-gsum-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; font: 13px var(--ui-font); cursor: pointer; }
.ui-gsum-x:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-gsum-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-gsum-x:disabled { opacity: .35; cursor: default; }
.ui-gsum select { box-sizing: border-box; max-width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 13px var(--ui-font); }
.ui-gsum select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-gsum-btn { height: 32px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px var(--ui-font); white-space: nowrap; cursor: pointer; }
.ui-gsum-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-gsum-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-gsum-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-gsum-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ui-gsum-sum { flex: 1; min-width: 180px; color: var(--ui-muted); font-size: 13px; }
.ui-gsum-note { margin: 0; color: var(--ui-warning); font-size: 13px; }
.ui-gsum-empty { margin: 0; padding: 20px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-align: center; }
.ui-gsum-scroll { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-gsum-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-gsum table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-gsum th, .ui-gsum td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
.ui-gsum thead th { background: var(--ui-subtle); font-weight: 600; }
.ui-gsum .ui-gsum-num { text-align: right; }
.ui-gsum tbody th { font-weight: 500; }
.ui-gsum-sub th, .ui-gsum-sub td { background: color-mix(in srgb, var(--ui-subtle) 60%, transparent); font-weight: 600; }
.ui-gsum tfoot th, .ui-gsum tfoot td { border-top: 2px solid var(--ui-strong); border-bottom: 0; background: var(--ui-subtle); font-weight: 700; }
.ui-gsum-fold { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ui-gsum-fold:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: 3px; }
.ui-gsum-fold svg { width: 10px; height: 10px; color: var(--ui-muted); transition: transform .15s; }
.ui-gsum-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.ui-gsum-file { display: grid; gap: 4px; min-width: 0; margin: 0; }
.ui-gsum-file figcaption { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-gsum-file pre { max-height: 200px; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 12px/1.5 var(--ui-mono); }
.ui-gsum-file pre:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-gsum-said { color: var(--ui-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ui-gsum-fold svg { transition: none; } }


.ui-figure { display: grid; gap: 8px; max-width: 560px; margin: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-figure-sm { max-width: 320px; }
.ui-figure-lg { max-width: none; }
.ui-figure-center { margin-left: auto; margin-right: auto; text-align: center; }
.ui-figure-right { margin-left: auto; text-align: right; }
.ui-figure img { display: block; width: 100%; height: auto; border-radius: var(--ui-radius); background: var(--ui-subtle); }
.ui-figure-body > :first-child { margin-top: 0; }
.ui-figure-body > :last-child { margin-bottom: 0; }
.ui-figure figcaption { font-size: 13px; color: var(--ui-muted); }
.ui-figure-credit { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--ui-muted); opacity: .85; }
.ui-figure-credit a { color: inherit; }


.ui-post-composer {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 14px/1.45 var(--ui-font); color: var(--ui-fg);
}
.ui-post-composer-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 14px; font-weight: 650; user-select: none;
}
.ui-post-composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-post-composer-main { display: grid; flex: 1; gap: 10px; min-width: 0; }
.ui-post-composer-input {
  display: block; width: 100%; margin: 0; padding: 6px 0; border: 0; resize: none; field-sizing: content;
  min-height: calc(var(--ui-post-composer-rows, 3) * 1.45em + 12px); background: transparent; color: var(--ui-fg); font: 17px/1.45 var(--ui-font);
}
.ui-post-composer-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-post-composer-input:focus { outline: none; }
.ui-post-composer:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-post-composer-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-post-composer-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-subtle); font-size: 13px;
}
.ui-post-composer-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-post-composer-file small { color: var(--ui-muted); }
.ui-post-composer-x {
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--ui-muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.ui-post-composer-x:hover { background: var(--ui-border); color: var(--ui-fg); }
.ui-post-composer-x:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-post-composer-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
.ui-post-composer-attach {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ui-accent); cursor: pointer;
}
.ui-post-composer-attach svg { width: 20px; height: 20px; }
.ui-post-composer-attach input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-post-composer-attach:hover { background: var(--ui-accent-soft); }
.ui-post-composer-attach:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-post-composer-count { margin-left: auto; font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-post-composer-near { color: var(--ui-warning); }
.ui-post-composer-over { color: var(--ui-danger); font-weight: 600; }
.ui-post-composer-ring { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; transform: rotate(-90deg); }
.ui-post-composer-ring circle { fill: none; stroke-width: 2.5; }
.ui-post-composer-ring .ui-post-composer-track { stroke: var(--ui-border); }
.ui-post-composer-ring .ui-post-composer-fill { stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset .15s; }
.ui-post-composer-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 14px/1 var(--ui-font); cursor: pointer;
}
.ui-post-composer-btn:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-post-composer-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-post-composer-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-post-composer-ring .ui-post-composer-fill { transition: none; } }


html:has(.ui-context-preview-dialog[open]) { overflow: hidden; }
.ui-context-preview { position: relative; }
/* Only here, and not the whole page: a long press on this may not select text or open the system's menu. */
.ui-context-preview-target {
  display: block; border-radius: var(--ui-radius); outline: none; cursor: default; touch-action: pan-y;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.ui-context-preview-target:focus-visible { box-shadow: var(--ui-focus); }
.ui-context-preview-pressing { transform: scale(.97); }
.ui-context-preview-more {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 999px; background: color-mix(in srgb, var(--ui-surface) 80%, transparent); color: var(--ui-fg); cursor: pointer;
}
.ui-context-preview-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-context-preview-more svg { width: 20px; height: 20px; }
.ui-context-preview-dialog {
  position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow: auto; background: transparent; color: var(--ui-fg);
  font: 15px/1.45 var(--ui-font); overscroll-behavior: contain; -webkit-touch-callout: none; user-select: none;
  opacity: 0; transition: opacity .16s, overlay .16s allow-discrete, display .16s allow-discrete;
}
.ui-context-preview-dialog[open] { display: block; opacity: 1; }
@starting-style { .ui-context-preview-dialog[open] { opacity: 0; } }
.ui-context-preview-dialog::backdrop {
  background: rgba(15, 14, 24, .25); background: color-mix(in srgb, var(--ui-bg) 45%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.ui-context-preview-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100%; }
.ui-context-preview-card {
  box-sizing: border-box; width: 100%; max-width: 380px; max-height: 58dvh; overflow: auto; padding: 16px; border-radius: calc(var(--ui-radius) + 6px);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); transition: transform .3s cubic-bezier(.22, 1.2, .36, 1);
}
.ui-context-preview-card:focus { outline: none; }
.ui-context-preview-card h2 { margin: 0 0 8px; font-size: 17px; }
.ui-context-preview-actions { width: 100%; max-width: 280px; overflow: hidden; border-radius: calc(var(--ui-radius) + 4px); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.ui-context-preview-row {
  display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; background: transparent; color: var(--ui-fg);
  font: 16px/1.3 var(--ui-font); text-align: left; cursor: pointer;
}
.ui-context-preview-row + .ui-context-preview-row { border-top: 1px solid var(--ui-border); }
.ui-context-preview-danger { color: var(--ui-danger); }
.ui-context-preview-row:disabled { color: var(--ui-muted); opacity: .6; cursor: not-allowed; }
.ui-context-preview-over, .ui-context-preview-row:active:not(:disabled) { background: var(--ui-subtle); }
@media (hover: hover) { .ui-context-preview-row:hover:not(:disabled) { background: var(--ui-subtle); } }
.ui-context-preview-row:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
/* A <dialog> sits over the whole window, so the window's width is the right one to ask, Split View included. */
@media (min-width: 600px) {
  .ui-context-preview-stage { flex-direction: row; align-items: flex-start; align-content: center; padding-top: 12dvh; gap: 16px; }
  .ui-context-preview-card { flex: 0 1 420px; max-width: 420px; max-height: 70dvh; }
  .ui-context-preview-actions { flex: 0 0 240px; width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-context-preview-target, .ui-context-preview-card, .ui-context-preview-dialog { transition: none; }
}


.ui-md { font: 15px/1.6 var(--ui-font); color: var(--ui-fg); overflow-wrap: anywhere; }
.ui-md-sm { font-size: 13px; }
.ui-md-lg { font-size: 17px; line-height: 1.65; }
.ui-md > :first-child { margin-top: 0; }
.ui-md > :last-child { margin-bottom: 0; }
.ui-md p, .ui-md ul, .ui-md ol, .ui-md blockquote, .ui-md pre { margin: 0 0 .9em; }
.ui-md h1, .ui-md h2, .ui-md h3, .ui-md h4, .ui-md h5, .ui-md h6 { margin: 1.4em 0 .5em; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.ui-md h1 { font-size: 1.7em; }
.ui-md h2 { font-size: 1.4em; }
.ui-md h3 { font-size: 1.2em; }
.ui-md h4 { font-size: 1.05em; }
.ui-md h5, .ui-md h6 { font-size: 1em; }
.ui-md a { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 2px; }
.ui-md a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }
.ui-md strong { font-weight: 600; }
.ui-md code { padding: .1em .35em; border-radius: 4px; background: var(--ui-subtle); font: .9em var(--ui-mono); }
.ui-md pre { padding: 12px 14px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-subtle); font: .875em/1.55 var(--ui-mono); }
.ui-md pre code { padding: 0; background: none; font: inherit; }
.ui-md blockquote { margin-left: 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--ui-accent); color: var(--ui-muted); }
.ui-md blockquote > :last-child { margin-bottom: 0; }
.ui-md ul, .ui-md ol { padding-left: 1.5em; }
.ui-md li { margin: .2em 0; }
.ui-md li::marker { color: var(--ui-muted); }
.ui-md-task { list-style: none; margin-left: -1.5em; }
.ui-md-task input { margin: 0 .5em 0 0; vertical-align: -.1em; accent-color: var(--ui-accent); }
.ui-md img { max-width: 100%; height: auto; border-radius: var(--ui-radius-sm); }
.ui-md hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--ui-border); }
.ui-md del { color: var(--ui-muted); }


.ui-bauthor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; margin: 0; padding: 22px 24px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-subtle); font: 15px/1.55 var(--ui-font); color: var(--ui-fg); }
.ui-bauthor-pic { grid-row: span 2; display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-fg); font-size: 24px; font-weight: 700; }
.ui-bauthor-pic img { width: 100%; height: 100%; object-fit: cover; }
.ui-bauthor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.ui-bauthor-eyebrow { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-bauthor .ui-bauthor-name { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.ui-bauthor-name a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-bauthor-name a:hover { color: var(--ui-accent); }
.ui-bauthor-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bauthor-role { display: block; color: var(--ui-muted); font-size: 14px; font-weight: 400; }
.ui-bauthor-follow { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--ui-accent);
  border-radius: 999px; color: var(--ui-accent); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ui-bauthor-follow:hover { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-bauthor-follow:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bauthor-follow svg { width: 15px; height: 15px; }
.ui-bauthor-body { display: grid; gap: 10px; min-width: 0; }
.ui-bauthor-bio { margin: 0; color: var(--ui-fg); }
.ui-bauthor-bio a { color: var(--ui-accent); }
.ui-bauthor-bio > :first-child { margin-top: 0; } .ui-bauthor-bio > :last-child { margin-bottom: 0; }
.ui-bauthor-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ui-bauthor-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ui-bauthor-links a, .ui-bauthor-all { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); text-decoration: none; border-radius: 3px; }
.ui-bauthor-links a:hover, .ui-bauthor-all:hover { color: var(--ui-accent); }
.ui-bauthor-links a:focus-visible, .ui-bauthor-all:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bauthor-links svg { flex: none; width: 16px; height: 16px; }
.ui-bauthor-all { color: var(--ui-accent); font-size: 14px; font-weight: 600; }
.ui-bauthor-stacked { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.ui-bauthor-stacked .ui-bauthor-pic { grid-row: auto; margin-bottom: 8px; }
.ui-bauthor-stacked .ui-bauthor-head, .ui-bauthor-stacked .ui-bauthor-foot, .ui-bauthor-stacked .ui-bauthor-links { justify-content: center; }
.ui-bauthor-stacked .ui-bauthor-head { flex-direction: column; }
@media (max-width: 520px) {
  .ui-bauthor { grid-template-columns: minmax(0, 1fr); }
  .ui-bauthor-pic { grid-row: auto; width: 56px; height: 56px; font-size: 19px; }
}


.ui-gbarc {
  --ui-gbarc-1: light-dark(#2a78d6, #3987e5); --ui-gbarc-2: light-dark(#eb6834, #d95926);
  --ui-gbarc-3: light-dark(#1baf7a, #199e70); --ui-gbarc-4: light-dark(#eda100, #c98500);
  --ui-gbarc-5: light-dark(#e87ba4, #d55181); --ui-gbarc-6: light-dark(#008300, #008300);
  --ui-gbarc-7: light-dark(#6250d6, #9085e9); --ui-gbarc-8: light-dark(#e34948, #e66767);
  display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; font: 12px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-gbarc-title { margin: 0; font-size: 14px; font-weight: 600; }
.ui-gbarc-s1 { --c: var(--ui-gbarc-1); } .ui-gbarc-s2 { --c: var(--ui-gbarc-2); } .ui-gbarc-s3 { --c: var(--ui-gbarc-3); }
.ui-gbarc-s4 { --c: var(--ui-gbarc-4); } .ui-gbarc-s5 { --c: var(--ui-gbarc-5); } .ui-gbarc-s6 { --c: var(--ui-gbarc-6); }
.ui-gbarc-s7 { --c: var(--ui-gbarc-7); } .ui-gbarc-s8 { --c: var(--ui-gbarc-8); }
.ui-gbarc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 13px; }
.ui-gbarc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-gbarc-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ui-gbarc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding-top: 8px; }
.ui-gbarc-y { position: relative; min-width: 24px; }
.ui-gbarc-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-gbarc-plot { position: relative; }
.ui-gbarc-grid { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ui-border) 70%, transparent); }
.ui-gbarc-grid.ui-gbarc-zero { background: var(--ui-strong); }
.ui-gbarc-cols { position: absolute; inset: 0; display: flex; }
.ui-gbarc-col { position: relative; flex: 1; min-width: 0; border-radius: 4px; }
.ui-gbarc-col:hover { background: color-mix(in srgb, var(--ui-subtle) 70%, transparent); }
.ui-gbarc-bars { position: absolute; inset: 0 12%; display: flex; justify-content: center; gap: 2px; }
.ui-gbarc-slot { position: relative; flex: 1; max-width: 36px; }
.ui-gbarc-bar { position: absolute; left: 0; right: 0; bottom: var(--a); height: var(--b); min-height: 1px;
  background: var(--c); border-radius: 4px 4px 0 0; transition: opacity .12s ease; }
.ui-gbarc-neg { border-radius: 0 0 4px 4px; }
.ui-gbarc-col:has(.ui-gbarc-slot:hover) .ui-gbarc-slot:not(:hover) .ui-gbarc-bar { opacity: .45; }
.ui-gbarc-col:has(.ui-gbarc-p1:hover) .ui-gbarc-tip p:not(.ui-gbarc-p1),
.ui-gbarc-col:has(.ui-gbarc-p2:hover) .ui-gbarc-tip p:not(.ui-gbarc-p2),
.ui-gbarc-col:has(.ui-gbarc-p3:hover) .ui-gbarc-tip p:not(.ui-gbarc-p3),
.ui-gbarc-col:has(.ui-gbarc-p4:hover) .ui-gbarc-tip p:not(.ui-gbarc-p4),
.ui-gbarc-col:has(.ui-gbarc-p5:hover) .ui-gbarc-tip p:not(.ui-gbarc-p5),
.ui-gbarc-col:has(.ui-gbarc-p6:hover) .ui-gbarc-tip p:not(.ui-gbarc-p6),
.ui-gbarc-col:has(.ui-gbarc-p7:hover) .ui-gbarc-tip p:not(.ui-gbarc-p7),
.ui-gbarc-col:has(.ui-gbarc-p8:hover) .ui-gbarc-tip p:not(.ui-gbarc-p8) { opacity: .5; }
.ui-gbarc-val { position: absolute; left: 50%; bottom: calc(var(--a) + 3px); transform: translateX(-50%);
  color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-gbarc-val.ui-gbarc-under { bottom: auto; top: calc(100% - var(--a) + 3px); }
.ui-gbarc-x { display: flex; margin-top: 6px; }
.ui-gbarc-x span { flex: 1; min-width: 0; padding: 0 2px; overflow: hidden; color: var(--ui-muted); text-align: center;
  text-overflow: ellipsis; white-space: nowrap; }
.ui-gbarc-tip { position: absolute; z-index: 20; top: 0; left: 50%; display: none; min-width: 120px; padding: 7px 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  box-shadow: var(--ui-shadow); color: var(--ui-fg); font-size: 12px; transform: translate(-50%, -100%); pointer-events: none; }
.ui-gbarc-col:first-child .ui-gbarc-tip { left: 0; transform: translateY(-100%); }
.ui-gbarc-col:last-child .ui-gbarc-tip { left: auto; right: 0; transform: translateY(-100%); }
.ui-gbarc-col:hover .ui-gbarc-tip { display: block; }
.ui-gbarc-tip strong { display: block; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
.ui-gbarc-tip p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ui-muted); white-space: nowrap; }
.ui-gbarc-tip b { margin-left: auto; padding-left: 12px; color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-gbarc-bar { transition: none; } }


.ui-share-cert { position: relative; display: grid; gap: 18px; min-width: 0; max-width: 820px; padding: 14px; border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.6 Georgia, "Times New Roman", serif; border: 1px solid var(--ui-border); }
.ui-share-cert-frame { display: grid; gap: 20px; padding: 30px 36px; border: 3px double color-mix(in srgb, var(--ui-accent) 60%, var(--ui-border));
  border-radius: calc(var(--ui-radius) - 4px); text-align: center; }
.ui-share-cert-top { display: flex; justify-content: space-between; gap: 12px; font: 600 12px/1.4 var(--ui-font); color: var(--ui-muted); text-align: left; }
.ui-share-cert-top span:last-child { text-align: right; }
.ui-share-cert-top b { display: block; color: var(--ui-fg); font: 600 14px var(--ui-mono); }
.ui-share-cert .ui-share-cert-coop { display: block; margin: 0; text-align: center; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.ui-share-cert-reg { margin: 2px 0 0; color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }
.ui-share-cert-title { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--ui-accent); }
.ui-share-cert-body { margin: 0 auto; max-width: 60ch; font-size: 16px; }
.ui-share-cert-name { display: block; margin: 6px 0; font-size: 24px; font-style: italic; font-weight: 700; }
.ui-share-cert-figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin: 0; }
.ui-share-cert-figures div { display: grid; gap: 0; min-width: 130px; padding: 4px 18px; border-left: 1px solid var(--ui-border); }
.ui-share-cert-figures div:first-child { border-left: 0; }
.ui-share-cert-figures dt { color: var(--ui-muted); font: 600 11px/1.6 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
.ui-share-cert-figures dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.ui-share-cert-given { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-share-cert-signs { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: end; gap: 24px 40px; margin-top: 18px; }
.ui-share-cert-sign { display: grid; gap: 2px; min-width: 200px; margin-top: 40px; padding-top: 6px; border-top: 1px solid var(--ui-fg); font: 13px/1.4 var(--ui-font); }
.ui-share-cert-sign b { font-weight: 600; }
.ui-share-cert-sign span { color: var(--ui-muted); }
.ui-share-cert-seal { display: grid; place-items: center; width: 92px; height: 92px; border: 2px dashed var(--ui-border); border-radius: 50%;
  color: var(--ui-muted); font: 600 10px/1.2 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 560px) { .ui-share-cert-frame { padding: 22px 16px; } .ui-share-cert-coop { font-size: 21px; } .ui-share-cert-figures div { border-left: 0; } }
@media print {
  .ui-share-cert { max-width: none; border: 0; padding: 0; background: #fff; color: #000; break-inside: avoid; page-break-inside: avoid; }
  .ui-share-cert-frame { border-color: #000; }
  .ui-share-cert-title { color: #000; }
}


.ui-guest-picker { position: relative; display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-guest-picker-label { font-size: 13px; font-weight: 500; }
.ui-guest-picker > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 220px; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer; list-style: none;
}
.ui-guest-picker > details > summary::-webkit-details-marker { display: none; }
.ui-guest-picker > details > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.ui-guest-picker > details[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ui-guest-picker > details > summary:hover { border-color: var(--ui-strong); }
.ui-guest-picker > details > summary:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-guest-picker-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; width: max-content; min-width: 100%; max-width: calc(100vw - 32px); margin-top: 4px;
  padding: 6px 16px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg);
}
.ui-guest-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
.ui-guest-picker-row:last-of-type { border-bottom: 0; }
.ui-guest-picker-what { display: grid; }
.ui-guest-picker-what b { font-weight: 500; }
.ui-guest-picker-what span { font-size: 12px; color: var(--ui-muted); }
.ui-guest-picker-count { display: flex; align-items: center; gap: 10px; }
.ui-guest-picker-count output { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-guest-picker-step {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); font: 18px/1 var(--ui-font); cursor: pointer;
}
.ui-guest-picker-step:hover:not(:disabled) { border-color: var(--ui-strong); }
.ui-guest-picker-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-guest-picker-step:disabled { opacity: .35; cursor: not-allowed; }
.ui-guest-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: 12px; color: var(--ui-muted); }
.ui-guest-picker-done { padding: 5px 12px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-guest-picker-done:focus-visible { outline: none; box-shadow: var(--ui-focus); }


.ui-cookie-host { display: contents; }
.ui-cookie { display: grid; gap: 12px; padding: 16px 20px; border: 1px solid var(--ui-border); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.5 var(--ui-font); box-shadow: var(--ui-shadow-lg); }
.ui-cookie-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; border-width: 1px 0 0; }
.ui-cookie-bottom-left { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(420px, calc(100vw - 32px)); border-radius: var(--ui-radius); }
.ui-cookie-inline { border-radius: var(--ui-radius); box-shadow: none; }
.ui-cookie-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ui-cookie-bottom .ui-cookie-row { max-width: 1100px; margin: 0 auto; width: 100%; }
.ui-cookie-body { flex: 1 1 320px; min-width: 0; }
.ui-cookie-title { margin: 0 0 2px; font-weight: 600; }
.ui-cookie-text { margin: 0; color: var(--ui-muted); }
.ui-cookie-policy { margin-left: 4px; }
.ui-cookie-text a { color: var(--ui-fg); font-weight: 500; text-underline-offset: 2px; }
.ui-cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-cookie-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; white-space: nowrap; }
.ui-cookie-btn:hover { background: var(--ui-subtle); }
.ui-cookie-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cookie-main { background: var(--ui-accent); border-color: transparent; color: var(--ui-accent-fg); }
.ui-cookie-main:hover { background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-cookie-settings { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.ui-cookie-bottom .ui-cookie-settings { max-width: 1100px; width: 100%; margin: 0 auto; }
.ui-cookie-cat { display: flex; align-items: flex-start; gap: 10px; }
.ui-cookie-cat input { margin: 3px 0 0; accent-color: var(--ui-accent); }
.ui-cookie-cat-label { font-weight: 500; }
.ui-cookie-cat-text { color: var(--ui-muted); font-size: 13px; }
.ui-cookie-req { margin-left: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }


.ui-pgsel { display: flex; flex-direction: column; height: var(--ui-pgsel-height, 100dvh); min-width: 0; container: ui-pgsel / inline-size; background: var(--ui-bg); color: var(--ui-fg); font: 14px/1.35 var(--ui-font); }
.ui-pgsel-bar { flex: none; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 2px max(6px, env(safe-area-inset-right, 0px)) 2px max(14px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--ui-border); }
.ui-pgsel-count { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-pgsel-btn { min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ui-accent); font: 600 14px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-pgsel-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pgsel-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.ui-pgsel-month { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 6px 0 14px; background: var(--ui-bg); }
.ui-pgsel-month h3 { margin: 0; font-size: 15px; font-weight: 650; }
.ui-pgsel-section { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.ui-pgsel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 2px; }
/* Up and down stay the browser's; sideways is the run across photos. Nothing here selects text or opens a callout. */
.ui-pgsel-cell {
  position: relative; display: block; aspect-ratio: 1; width: 100%; padding: 0; overflow: hidden; border: 0; background: var(--ui-subtle); cursor: pointer; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ui-pgsel-cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .12s; pointer-events: none; -webkit-user-drag: none; }
.ui-pgsel-cell:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: -3px; z-index: 1; }
.ui-pgsel-tick { position: absolute; top: 6px; right: 6px; display: none; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .25); box-sizing: border-box; pointer-events: none; }
.ui-pgsel-picking .ui-pgsel-tick { display: block; }
.ui-pgsel-on .ui-pgsel-tick { background: var(--ui-accent); }
.ui-pgsel-on .ui-pgsel-tick::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-pgsel-on img { transform: scale(.86); }
.ui-pgsel-on { background: var(--ui-accent-soft); }
.ui-pgsel-empty { margin: 0; padding: 40px 16px; text-align: center; color: var(--ui-muted); }
/* Wide: the months keep a column of their own, and the photos have more room. */
@container ui-pgsel (min-width: 640px) {
  .ui-pgsel-section { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding: 6px 8px; }
  .ui-pgsel-month { flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: start; top: 6px; padding: 6px 0 6px 8px; }
  .ui-pgsel-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 4px; }
  .ui-pgsel-cell { border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) { .ui-pgsel-cell img { transition: none; } }


.ui-exprow { container-type: inline-size; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.35 var(--ui-font); }
.ui-exprow-h { margin: 0; font: inherit; }
.ui-exprow-head { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ui-exprow-head:active { background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
@media (hover: hover) { .ui-exprow-head:hover { background: color-mix(in srgb, var(--ui-fg) 4%, transparent); } }
.ui-exprow-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.ui-exprow-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-exprow-sub { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-exprow-meta { flex: none; max-width: 40%; color: var(--ui-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-exprow-mark { flex: none; width: 14px; height: 8px; color: var(--ui-muted); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.ui-exprow-on .ui-exprow-mark { transform: rotate(180deg); }
.ui-exprow-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s; }
.ui-exprow-on .ui-exprow-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.ui-exprow-clip { min-height: 0; overflow: hidden; }
.ui-exprow-body { padding: 2px 16px 16px; }
.ui-exprow-body > :first-child { margin-top: 0; }
.ui-exprow-body > :last-child { margin-bottom: 0; }
@container (min-width: 640px) { .ui-exprow-body { padding: 4px 56px 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .ui-exprow-panel, .ui-exprow-on .ui-exprow-panel, .ui-exprow-mark { transition: none; } }


.ui-gaugec { display: grid; gap: 6px; justify-items: center; align-content: start; min-width: 0; margin: 0;
  font: 13px/1.3 var(--ui-font); color: var(--ui-fg); }
.ui-gaugec-title { justify-self: start; margin: 0; font-size: 14px; font-weight: 600; }
.ui-gaugec-meter { display: grid; justify-items: center; max-width: 100%; }
.ui-gaugec-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ui-gaugec-good { --c: var(--ui-success); } .ui-gaugec-warning { --c: var(--ui-warning); }
.ui-gaugec-bad { --c: var(--ui-danger); } .ui-gaugec-neutral { --c: var(--ui-strong); }
.ui-gaugec-track { fill: none; stroke: var(--ui-subtle); stroke-width: 18; }
.ui-gaugec-band { fill: none; stroke: var(--c); stroke-width: 18; opacity: .85; transition: opacity .15s ease; }
.ui-gaugec-band:hover { opacity: 1; }
.ui-gaugec-end { fill: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-gaugec-needle { transform: rotate(var(--turn)); transition: transform .6s cubic-bezier(.3, 1.4, .6, 1); }
@starting-style { .ui-gaugec-needle { transform: rotate(0deg); } }
.ui-gaugec-needle path { fill: var(--ui-fg); }
.ui-gaugec-hub { fill: var(--ui-fg); stroke: var(--ui-bg); stroke-width: 3; }
.ui-gaugec-reading { display: grid; justify-items: center; margin-top: -4px; }
.ui-gaugec-value { font-size: 26px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-gaugec-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 12px; }
.ui-gaugec-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ui-strong)); }
.ui-gaugec-name { color: var(--ui-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ui-gaugec-needle, .ui-gaugec-band { transition: none; } }


.ui-currency-input { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-currency-input-label { font-size: 13px; font-weight: 500; }
.ui-currency-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-currency-input-box {
  display: flex; align-items: center; gap: 8px; width: 220px; max-width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  transition: border-color .15s, box-shadow .15s;
}
.ui-currency-input-box:hover { border-color: var(--ui-strong); }
.ui-currency-input-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-currency-input-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; text-align: right;
  color: var(--ui-fg); font: 14px var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-currency-input-box input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-currency-input-symbol { flex: none; color: var(--ui-muted); font-weight: 500; user-select: none; }
.ui-currency-input-code { flex: none; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; user-select: none; }
.ui-currency-input-sm .ui-currency-input-box { height: 30px; width: 180px; padding: 0 10px; }
.ui-currency-input-sm .ui-currency-input-box input { font-size: 13px; }
.ui-currency-input-invalid .ui-currency-input-box, .ui-currency-input-invalid .ui-currency-input-box:hover { border-color: var(--ui-danger); }
.ui-currency-input-hint, .ui-currency-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-currency-input-error { color: var(--ui-danger); }
.ui-currency-input-disabled { opacity: .55; }
.ui-currency-input-disabled input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-currency-input-box { transition: none; } }


.ui-cta { display: grid; gap: 20px; justify-items: center; padding: 48px 32px; border-radius: var(--ui-radius);
  text-align: center; font: 16px/1.55 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); }
.ui-cta-accent { background: var(--t); color: var(--ui-accent-fg); }
.ui-cta-soft { background: var(--ui-accent-soft); }
.ui-cta-outline { border: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-cta-words { display: grid; gap: 8px; max-width: 640px; }
.ui-cta-title { margin: 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 750; line-height: 1.15; letter-spacing: -.015em; }
.ui-cta-text { margin: 0; font-size: 17px; opacity: .85; }
.ui-cta-soft .ui-cta-text, .ui-cta-outline .ui-cta-text { color: var(--ui-muted); opacity: 1; }
.ui-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ui-cta-split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; text-align: left; padding: 36px 32px; }
.ui-cta-split .ui-cta-actions { justify-content: flex-end; }
.ui-cta-accent .ui-btn-neutral { --b: var(--ui-accent-fg); --bf: var(--ui-accent); --bs: color-mix(in srgb, var(--ui-accent-fg) 18%, transparent); }
.ui-cta-accent .ui-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent-fg) 50%, transparent); }
@media (max-width: 640px) {
  .ui-cta, .ui-cta-split { padding: 32px 20px; grid-template-columns: minmax(0, 1fr); }
  .ui-cta-split .ui-cta-actions { justify-content: flex-start; }
}


.ui-slo-calc { display: grid; gap: 16px; min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-slo-calc .ui-slo-calc-title { margin: 0; font-size: 16px; font-weight: 650; }
.ui-slo-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 14px; }
.ui-slo-calc-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ui-slo-calc-field label, .ui-slo-calc-measure legend { font-size: 13px; font-weight: 500; }
.ui-slo-calc-box { box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.ui-slo-calc-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-slo-calc-box input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ui-fg);
  font: 14px var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-slo-calc-box span { flex: none; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-slo-calc-bad .ui-slo-calc-box { border-color: var(--ui-danger); }
.ui-slo-calc-measure { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.ui-slo-calc-measure legend { float: left; margin-right: 6px; padding: 0; }
.ui-slo-calc-measure label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ui-slo-calc-measure input { margin: 0; accent-color: var(--ui-accent); }
.ui-slo-calc-measure input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-slo-calc-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-slo-calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.ui-slo-calc-out > div { padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-slo-calc-out dt { color: var(--ui-muted); font-size: 12px; }
.ui-slo-calc-out dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-slo-calc-out dd small { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-slo-calc-meter { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-slo-calc-meter span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ui-success); }
.ui-slo-calc-low .ui-slo-calc-meter span { background: var(--ui-warning); }
.ui-slo-calc-empty .ui-slo-calc-meter span { background: var(--ui-danger); }
.ui-slo-calc-say { margin: 0; padding: 10px 12px; border-left: 4px solid var(--ui-success); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.ui-slo-calc-burning .ui-slo-calc-say { border-left-color: var(--ui-warning); }
.ui-slo-calc-gone .ui-slo-calc-say { border-left-color: var(--ui-danger); }
.ui-slo-calc-scroll { overflow-x: auto; }
.ui-slo-calc-scroll:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-slo-calc table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-slo-calc caption { padding: 0 0 6px; text-align: left; font-weight: 600; }
.ui-slo-calc th, .ui-slo-calc td { padding: 6px 8px; border-bottom: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.ui-slo-calc th:first-child, .ui-slo-calc td:first-child { text-align: left; }
.ui-slo-calc thead th { color: var(--ui-muted); font-weight: 500; }
.ui-slo-calc-problem { color: var(--ui-warning); white-space: normal; text-align: left; }
.ui-slo-calc td.ui-slo-calc-problem { text-align: left; }
.ui-slo-calc-rule-note { margin: 6px 0 0; color: var(--ui-muted); font-size: 12px; }


.ui-ctx-area { border-radius: var(--ui-radius-sm); -webkit-touch-callout: none; }
.ui-ctx-area:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-ctx-menu {
  position: fixed; inset: auto; box-sizing: border-box; min-width: 200px; max-width: min(300px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px); margin: 0; padding: 5px; overflow: auto; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg);
  font: 14px/1.4 var(--ui-font);
}
.ui-ctx-menu:popover-open { animation: ui-ctx-in .1s ease-out; }
@keyframes ui-ctx-in { from { opacity: 0; transform: scale(.97); } }
.ui-ctx-item {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-ctx-item span:first-child { flex: 1; }
.ui-ctx-item:hover, .ui-ctx-item:focus { outline: none; background: var(--ui-subtle); }
.ui-ctx-item:focus-visible { box-shadow: var(--ui-focus); }
.ui-ctx-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-ctx-item[aria-disabled="true"]:hover { background: transparent; }
.ui-ctx-danger { color: var(--ui-danger); }
.ui-ctx-danger:hover, .ui-ctx-danger:focus { background: var(--ui-danger-soft); }
.ui-ctx-key { color: var(--ui-muted); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.ui-ctx-danger .ui-ctx-key { color: inherit; opacity: .8; }
.ui-ctx-sep { height: 1px; margin: 4px 6px; background: var(--ui-border); }
@media (prefers-reduced-motion: reduce) { .ui-ctx-menu:popover-open { animation: none; } }


.ui-fsearch { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.4 var(--ui-font); container-type: inline-size; }
.ui-fsearch-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-fsearch-trip { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--ui-subtle); }
.ui-fsearch-trip legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-fsearch-trip label { position: relative; padding: 5px 14px; border-radius: 999px; color: var(--ui-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.ui-fsearch-trip input { position: absolute; opacity: 0; pointer-events: none; }
.ui-fsearch-trip label:has(input:checked) { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ui-fsearch-trip label:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-fsearch-who { position: relative; }
.ui-fsearch-who > summary { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border);
  border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.ui-fsearch-who > summary::-webkit-details-marker { display: none; }
.ui-fsearch-who > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); }
.ui-fsearch-who > summary:hover { border-color: var(--ui-strong); }
.ui-fsearch-who > summary:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fsearch-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; width: 280px; max-width: calc(100vw - 32px); padding: 6px 16px 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.ui-fsearch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
.ui-fsearch-row span { display: grid; }
.ui-fsearch-row b { font-weight: 500; }
.ui-fsearch-row small { color: var(--ui-muted); font-size: 12px; }
.ui-fsearch-count { display: flex; align-items: center; gap: 10px; }
.ui-fsearch-count output { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-fsearch-step { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-fg); font: 17px/1 var(--ui-font); cursor: pointer; }
.ui-fsearch-step:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-fsearch-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fsearch-step:disabled { opacity: .35; cursor: not-allowed; }
.ui-fsearch-popfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; color: var(--ui-muted); font-size: 12px; }
.ui-fsearch-done { padding: 5px 12px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); font: 500 13px var(--ui-font); cursor: pointer; }
.ui-fsearch-done:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fsearch-cabin { height: 32px; padding: 0 28px 0 12px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-fg); font: 500 13px var(--ui-font);
  cursor: pointer; appearance: none; background: var(--ui-surface) no-repeat right 11px center / 9px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.ui-fsearch-cabin:hover { border-color: var(--ui-strong); }
.ui-fsearch-cabin:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fsearch-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container (min-width: 720px) { .ui-fsearch-main { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; } }
.ui-fsearch-places { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ui-fsearch-field { display: grid; gap: 4px; min-width: 0; }
.ui-fsearch-field label { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-fsearch-field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 15px var(--ui-font); box-sizing: border-box; }
.ui-fsearch-field input:hover { border-color: var(--ui-strong); }
.ui-fsearch-field input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-fsearch-field input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-fsearch-places .ui-fsearch-field:last-of-type input { padding-left: 22px; }
.ui-fsearch-swap { position: absolute; z-index: 1; left: 50%; bottom: 7px; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -15px;
  padding: 0; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--ui-surface); color: var(--ui-fg); cursor: pointer; transition: transform .2s; }
.ui-fsearch-swap svg { width: 16px; height: 16px; }
.ui-fsearch-swap:hover { border-color: var(--ui-accent); color: var(--ui-accent); transform: rotate(180deg); }
.ui-fsearch-swap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fsearch-dates { display: contents; }
.ui-fsearch-go { height: 44px; padding: 0 22px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 15px var(--ui-font); cursor: pointer; }
.ui-fsearch-go:hover { filter: brightness(1.08); }
.ui-fsearch-go:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-fsearch-errors { margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-danger-soft); color: var(--ui-fg); font-size: 13px; }
.ui-fsearch-oneway .ui-fsearch-back { visibility: hidden; }
@container (max-width: 719px) { .ui-fsearch-oneway .ui-fsearch-back { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-fsearch-swap { transition: none; } .ui-fsearch-swap:hover { transform: none; } }


.ui-birthday-input { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-birthday-input-legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-birthday-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-birthday-input-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-birthday-input-box { position: relative; display: block; }
.ui-birthday-input-box::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.ui-birthday-input select {
  appearance: none; height: 38px; padding: 0 30px 0 12px; background: var(--ui-surface); color: var(--ui-fg);
  font: 14px var(--ui-font); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ui-birthday-input-day select { width: 84px; }
.ui-birthday-input-month select { width: 140px; }
.ui-birthday-input-year select { width: 100px; }
.ui-birthday-input select:hover { border-color: var(--ui-strong); }
.ui-birthday-input select:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-birthday-input select:has(option[value=""]:checked) { color: var(--ui-muted); }
.ui-birthday-input option { color: var(--ui-fg); background: var(--ui-surface); }
.ui-birthday-input-sm select { height: 30px; font-size: 13px; padding: 0 26px 0 10px; }
.ui-birthday-input-invalid select { border-color: var(--ui-danger); }
.ui-birthday-input-hint, .ui-birthday-input-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-birthday-input-error { color: var(--ui-danger); }
.ui-birthday-input-disabled { opacity: .55; }
.ui-birthday-input-disabled select { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ui-birthday-input select { transition: none; } }


.ui-rating-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; align-items: center; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-rating-summary-avg { display: grid; justify-items: center; gap: 2px; min-width: 96px; text-align: center; }
.ui-rating-summary-num { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ui-rating-summary-stars { display: inline-flex; gap: 1px; color: var(--ui-warning); }
.ui-rating-summary-stars svg { width: 16px; height: 16px; }
.ui-rating-summary-off { color: var(--ui-border); }
.ui-rating-summary-half { clip-path: inset(0 50% 0 0); }
.ui-rating-summary-total { color: var(--ui-muted); font-size: 13px; }
.ui-rating-summary-rows { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ui-rating-summary-row { display: grid; grid-template-columns: 4.2em 1fr 3.2em; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0;
  border-radius: var(--ui-radius-sm); background: none; color: var(--ui-fg); font: inherit; text-align: left; text-decoration: none; }
.ui-rating-summary-row:is(button, a) { cursor: pointer; }
.ui-rating-summary-row:is(button, a):hover { background: var(--ui-subtle); }
.ui-rating-summary-row:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-rating-summary-row[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-rating-summary-row[aria-pressed="true"] .ui-rating-summary-fill { background: var(--ui-accent); }
.ui-rating-summary-name { white-space: nowrap; font-size: 13px; }
.ui-rating-summary-bar { height: 8px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; }
.ui-rating-summary-fill { display: block; height: 100%; border-radius: inherit; background: var(--ui-warning); }
.ui-rating-summary-n { color: var(--ui-muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-rating-summary-compact { gap: 4px 14px; }
.ui-rating-summary-compact .ui-rating-summary-num { font-size: 28px; }
.ui-rating-summary-compact .ui-rating-summary-avg { min-width: 72px; }
.ui-rating-summary-compact .ui-rating-summary-rows { gap: 2px; }
@container (max-width: 360px) { .ui-rating-summary { grid-template-columns: 1fr; } }


.ui-download-button { gap: 8px; }
.ui-download-button svg { flex: none; width: 16px; height: 16px; }
.ui-download-button-meta { opacity: .75; font-weight: 400; font-size: .92em; }
.ui-download-button-meta::before { content: "·"; margin-right: 8px; }
.ui-download-button.ui-btn-sm .ui-download-button-meta::before { margin-right: 6px; }


.ui-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--t) 22%, var(--ui-border)); border-radius: var(--ui-radius-sm);
  background: var(--ts); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); text-decoration: none;
  vertical-align: middle; white-space: nowrap; --t: var(--ui-strong); --ts: var(--ui-subtle);
}
.ui-tag-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }
.ui-tag-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-tag-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }
.ui-tag-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-tag-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }
.ui-tag:not(.ui-tag-neutral) { color: color-mix(in srgb, var(--t) 80%, var(--ui-fg)); }
.ui-tag-text { overflow: hidden; text-overflow: ellipsis; }
.ui-tag-link { display: inline-flex; align-items: center; gap: inherit; min-width: 0; color: inherit; text-decoration: none; border-radius: 3px; }
.ui-tag-link:hover { text-decoration: underline; }
.ui-tag-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tag-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.ui-tag-neutral .ui-tag-dot { background: var(--ui-muted); }
a.ui-tag, button.ui-tag { cursor: pointer; transition: border-color .15s, background .15s; }
button.ui-tag { font: 500 13px/1 var(--ui-font); }
a.ui-tag:hover, button.ui-tag:hover { border-color: color-mix(in srgb, var(--t) 60%, var(--ui-border)); }
a.ui-tag:focus-visible, button.ui-tag:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-tag-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-tag-sm { height: 22px; padding: 0 8px; font-size: 12px; gap: 5px; }
.ui-tag-x {
  display: grid; place-items: center; width: 18px; height: 18px; margin-right: -5px; padding: 0; border: 0;
  border-radius: 4px; background: transparent; color: inherit; font-size: 15px; line-height: 1; opacity: .6; cursor: pointer;
}
.ui-tag-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.ui-tag-x:focus-visible { outline: none; opacity: 1; box-shadow: var(--ui-focus); }
.ui-tag-sm .ui-tag-x { width: 16px; height: 16px; margin-right: -4px; }
@media (prefers-reduced-motion: reduce) { a.ui-tag, button.ui-tag { transition: none; } }


.ui-dkeep { container-type: inline-size; display: grid; gap: 14px; min-width: 0; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
.ui-dkeep-offer { display: grid; gap: 8px; padding: 12px; border-radius: var(--ui-radius-sm); background: var(--ui-info-soft); }
.ui-dkeep-offer-title { margin: 0; font-weight: 600; }
.ui-dkeep-preview { margin: 0; overflow-wrap: anywhere; color: var(--ui-muted); font-size: 14px; }
.ui-dkeep-offer-acts, .ui-dkeep-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-dkeep-fields { display: grid; gap: 12px; min-width: 0; }
.ui-dkeep-field { display: grid; gap: 5px; min-width: 0; }
.ui-dkeep-label { font-size: 14px; font-weight: 500; }
.ui-dkeep-req { margin-left: 2px; color: var(--ui-danger); }
/* 16 px: below that, iOS zooms the page on focus and leaves it zoomed. */
.ui-dkeep-input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }
textarea.ui-dkeep-input { min-height: 132px; resize: vertical; field-sizing: content; }
.ui-dkeep-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-dkeep-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-dkeep-btn { min-width: 96px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-dkeep-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); font-weight: 600; }
.ui-dkeep-btn:disabled { opacity: .6; cursor: default; }
.ui-dkeep-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-dkeep-note { flex: 1 1 200px; margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-dkeep-note:focus { outline: none; }
.ui-dkeep-note[data-bad] { color: var(--ui-danger); }
.ui-dkeep-lasts { margin: 0; color: var(--ui-muted); font-size: 13px; }
@media (hover: hover) { .ui-dkeep-btn:hover:enabled { border-color: var(--ui-strong); background: var(--ui-subtle); } .ui-dkeep-go:hover:enabled { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); } }
@container (min-width: 560px) {
  .ui-dkeep-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-dkeep-field[data-wide] { grid-column: 1 / -1; }
  .ui-dkeep-offer { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ui-dkeep-preview { grid-column: 1; }
  .ui-dkeep-offer-acts { grid-column: 2; grid-row: 1 / 3; }
}


.ui-cb { min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle);
  color: var(--ui-fg); font: 14px/1.4 var(--ui-font); overflow: hidden; }
.ui-cb-head { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 6px 0 14px;
  border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-subtle) 60%, var(--ui-surface)); }
.ui-cb-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13px/1.3 var(--ui-mono); color: var(--ui-fg); }
.ui-cb-lang { flex: none; padding: 2px 7px; border-radius: 4px; background: var(--ui-surface); color: var(--ui-muted);
  font: 600 11px/1.4 var(--ui-font); letter-spacing: .04em; text-transform: uppercase; }
.ui-cb-copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-left: auto; padding: 0 9px;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted);
  font: 500 12px/1 var(--ui-font); cursor: pointer; }
.ui-cb-copy:hover { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); }
.ui-cb-copy:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-cb-copy svg { width: 14px; height: 14px; flex: none; }
.ui-cb-copy-ok { color: var(--ui-success); }
.ui-cb-copy-bad { color: var(--ui-danger); }
.ui-cb-body { display: flex; align-items: flex-start; }
.ui-cb-float { order: 2; flex: none; margin: 7px 6px 0 0; }
.ui-cb-pre { flex: 1; min-width: 0; margin: 0; padding: 12px 0; overflow: auto; background: transparent; color: var(--ui-fg);
  font: 13px/1.6 var(--ui-mono); tab-size: 4; }
.ui-cb-pre:focus-visible { outline: none; box-shadow: inset var(--ui-focus); }
.ui-cb-pre code { display: block; min-width: max-content; font: inherit; }
.ui-cb-wrap .ui-cb-pre code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-cb-line { display: block; min-height: 1.6em; padding: 0 16px; background: none; color: inherit; }
.ui-cb-hl { background: color-mix(in srgb, var(--ui-accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--ui-accent); }
.ui-cb-num { display: inline-block; min-width: 2.5ch; margin-right: 16px; color: var(--ui-muted); opacity: .75;
  text-align: right; user-select: none; -webkit-user-select: none; }
.ui-cb-hl .ui-cb-num { color: var(--ui-accent); opacity: 1; }
.ui-cb-wrap .ui-cb-numbered .ui-cb-line { padding-left: calc(16px + 2.5ch + 16px); text-indent: calc(-2.5ch - 16px); }


.ui-calendar-sheet { --row: 46px; container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--ui-fg); font: 15px/1.35 var(--ui-font); background: var(--ui-bg); }
.ui-calendar-sheet-inner { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.ui-calendar-sheet-sheet { position: relative; z-index: 1; flex: none; padding-top: env(safe-area-inset-top); border-radius: 0 0 calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-calendar-sheet-head { display: flex; align-items: center; gap: 2px; min-height: 46px; padding: 0 6px; }
.ui-calendar-sheet-title { flex: 1; min-width: 0; margin: 0; padding-left: 8px; overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-calendar-sheet-btn { display: grid; flex: none; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-calendar-sheet-btn:disabled { color: var(--ui-strong); cursor: default; }
.ui-calendar-sheet-btn svg { width: 20px; height: 20px; }
.ui-calendar-sheet-btn:focus-visible, .ui-calendar-sheet-day:focus-visible, .ui-calendar-sheet-handle:focus-visible, .ui-calendar-sheet-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-calendar-sheet-names { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 6px; color: var(--ui-muted); font-size: 12px; text-align: center; }
/* Both ways of a drag are used here, so the page gets neither on the days. */
.ui-calendar-sheet-clip { height: calc(var(--row) * var(--rows, 6)); margin: 0 6px; overflow: hidden; touch-action: none; -webkit-touch-callout: none; transition: height .24s cubic-bezier(.2, .8, .2, 1); }
.ui-calendar-sheet-grid { transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.ui-calendar-sheet-moving, .ui-calendar-sheet-moving .ui-calendar-sheet-clip, .ui-calendar-sheet-moving .ui-calendar-sheet-grid { transition: none; user-select: none; -webkit-user-select: none; }
.ui-calendar-sheet-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: var(--row); }
.ui-calendar-sheet-day { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 0; height: var(--row); padding: 0; border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--ui-fg); font: 500 15px/1 var(--ui-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-calendar-sheet-day[data-out] { color: var(--ui-muted); font-weight: 400; }
.ui-calendar-sheet-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.ui-calendar-sheet-day[aria-current="date"] .ui-calendar-sheet-num { color: var(--ui-accent); font-weight: 700; }
.ui-calendar-sheet-day[aria-pressed="true"] .ui-calendar-sheet-num { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-calendar-sheet-dots { display: flex; justify-content: center; gap: 2px; height: 5px; }
.ui-calendar-sheet-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ui-accent); }
.ui-calendar-sheet-dot[data-tone="success"], .ui-calendar-sheet-bar[data-tone="success"] { background: var(--ui-success); }
.ui-calendar-sheet-dot[data-tone="warning"], .ui-calendar-sheet-bar[data-tone="warning"] { background: var(--ui-warning); }
.ui-calendar-sheet-dot[data-tone="danger"], .ui-calendar-sheet-bar[data-tone="danger"] { background: var(--ui-danger); }
.ui-calendar-sheet-dot[data-tone="info"], .ui-calendar-sheet-bar[data-tone="info"] { background: var(--ui-info); }
.ui-calendar-sheet-handle { display: grid; place-items: center; width: 100%; height: 44px; padding: 0; border: 0; border-radius: 0 0 var(--ui-radius) var(--ui-radius); background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ui-calendar-sheet-handle span { width: 40px; height: 5px; border-radius: 999px; background: var(--ui-strong); }
.ui-calendar-sheet-agenda { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px max(14px, env(safe-area-inset-bottom)); }
.ui-calendar-sheet-dayhead { margin: 10px 0 4px; color: var(--ui-muted); font-size: 13px; font-weight: 600; }
.ui-calendar-sheet-dayhead:first-child { margin-top: 0; }
.ui-calendar-sheet-item { display: flex; align-items: stretch; gap: 10px; width: 100%; min-height: 52px; padding: 6px 8px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-calendar-sheet-item + .ui-calendar-sheet-item { margin-top: 4px; }
.ui-calendar-sheet-bar { flex: none; width: 4px; border-radius: 2px; background: var(--ui-accent); }
.ui-calendar-sheet-time { flex: none; width: 52px; color: var(--ui-muted); font-size: 13px; padding-top: 2px; }
.ui-calendar-sheet-what { flex: 1; min-width: 0; }
.ui-calendar-sheet-name { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ui-calendar-sheet-where { display: block; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
.ui-calendar-sheet-none { margin: 0; padding: 10px 8px; color: var(--ui-muted); }
/* Folded is for a narrow screen alone, so a tablet turned back finds it as it was. */
@container (max-width: 639px) {
  .ui-calendar-sheet-folded .ui-calendar-sheet-clip { height: var(--row); }
  .ui-calendar-sheet-folded .ui-calendar-sheet-grid { transform: translateY(calc(var(--row) * var(--at, 0) * -1)); }
}
@container (min-width: 640px) {
  .ui-calendar-sheet-inner { --row: 60px; flex-direction: row; gap: 16px; }
  .ui-calendar-sheet-sheet { flex: 0 0 min(52%, 440px); align-self: flex-start; border-radius: calc(var(--ui-radius) + 6px); padding-bottom: 8px; }
  .ui-calendar-sheet-handle { display: none; }
  .ui-calendar-sheet-agenda { padding-top: 14px; }
}
@media (hover: hover) {
  .ui-calendar-sheet-btn:hover:not(:disabled), .ui-calendar-sheet-day:hover, .ui-calendar-sheet-item:hover { background: var(--ui-subtle); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-calendar-sheet-clip, .ui-calendar-sheet-grid { transition: none; }
}


.ui-markdown-editor { display: grid; gap: 6px; min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-markdown-editor-label { font-size: 13px; font-weight: 500; }
.ui-markdown-editor-req { margin-left: 2px; color: var(--ui-danger); }
.ui-markdown-editor-frame { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ui-markdown-editor-frame:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-markdown-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle); }
.ui-markdown-editor-tabs { display: flex; gap: 2px; margin-right: 8px; }
.ui-markdown-editor-tab {
  height: 28px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-muted);
  font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-markdown-editor-tab[aria-selected="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 0 0 1px var(--ui-border); }
.ui-markdown-editor-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-markdown-editor-tool {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-fg); font: 600 13px/1 var(--ui-font); cursor: pointer;
}
.ui-markdown-editor-tool:hover { background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-border); }
.ui-markdown-editor-tool:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-markdown-editor-tool:disabled { opacity: .45; cursor: not-allowed; }
.ui-markdown-editor-tool svg { width: 16px; height: 16px; }
.ui-markdown-editor-tool i { font-style: italic; font-family: Georgia, serif; font-size: 15px; }
.ui-markdown-editor-frame textarea {
  display: block; box-sizing: border-box; width: 100%; min-height: 80px; margin: 0; padding: 10px 12px; border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--ui-fg); font: 14px/1.6 var(--ui-mono);
}
.ui-markdown-editor-frame textarea::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-markdown-editor-frame textarea:disabled { opacity: .55; cursor: not-allowed; }
.ui-markdown-editor-preview { min-height: 80px; padding: 10px 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ui-markdown-editor-preview > :first-child { margin-top: 0; }
.ui-markdown-editor-preview > :last-child { margin-bottom: 0; }
.ui-markdown-editor-preview h1, .ui-markdown-editor-preview h2, .ui-markdown-editor-preview h3 { margin: .8em 0 .4em; line-height: 1.25; }
.ui-markdown-editor-preview pre { padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overflow: auto; font: 13px/1.5 var(--ui-mono); }
.ui-markdown-editor-preview code { font: 13px var(--ui-mono); }
.ui-markdown-editor-preview blockquote { margin: .6em 0; padding: 0 0 0 12px; border-left: 3px solid var(--ui-border); color: var(--ui-muted); }
.ui-markdown-editor-preview a { color: var(--ui-accent); }
.ui-markdown-editor-empty { color: var(--ui-muted); font-style: italic; }
.ui-markdown-editor-invalid .ui-markdown-editor-frame { border-color: var(--ui-danger); }
.ui-markdown-editor-hint, .ui-markdown-editor-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-markdown-editor-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-markdown-editor-frame { transition: none; } }


.ui-fxrates { min-width: 0; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  font: 14px/1.35 var(--ui-font); color: var(--ui-fg); }
.ui-fxrates-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-fxrates-table caption { padding: 12px 14px; text-align: left; font-weight: 650; caption-side: top; }
.ui-fxrates-table caption small { margin-left: 8px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.ui-fxrates-table th, .ui-fxrates-table td { padding: 10px 14px; text-align: right; white-space: nowrap; }
.ui-fxrates-table thead th { border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); background: var(--ui-subtle);
  color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-fxrates-table th:first-child, .ui-fxrates-table td:first-child { text-align: left; }
.ui-fxrates-table tbody tr:not(:last-child) > * { border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-fxrates-table tbody tr:hover { background: var(--ui-subtle); }
.ui-fxrates-compact .ui-fxrates-table th, .ui-fxrates-compact .ui-fxrates-table td { padding-top: 6px; padding-bottom: 6px; }
.ui-fxrates-pair { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.ui-fxrates-flags { position: relative; flex: none; width: 34px; height: 22px; font-size: 17px; line-height: 1; }
.ui-fxrates-flags span { position: absolute; top: 0; }
.ui-fxrates-flags span:last-child { left: 13px; top: 5px; }
.ui-fxrates-code b { font-weight: 650; }
.ui-fxrates-code small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-fxrates-price { font-weight: 600; }
.ui-fxrates-spread { color: var(--ui-muted); }
.ui-fxrates-up { --k: var(--ui-success); } .ui-fxrates-down { --k: var(--ui-danger); } .ui-fxrates-flat { --k: var(--ui-muted); }
.ui-fxrates-chg { color: var(--k); font-weight: 600; }
.ui-fxrates-pill { display: inline-block; min-width: 62px; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--k) 14%, transparent);
  color: var(--k); font-weight: 600; text-align: right; }
.ui-fxrates-none { color: var(--ui-muted); }


.ui-navsearch { position: relative; display: inline-flex; align-items: center; margin: 0; font: 14px/1 var(--ui-font); color: var(--ui-fg); }
.ui-navsearch-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--ui-muted); pointer-events: none; }
.ui-navsearch-input {
  box-sizing: border-box; width: var(--ui-navsearch-w, 160px); height: 36px; margin: 0; padding: 0 34px 0 32px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-subtle); color: var(--ui-fg); font: inherit; appearance: none; transition: width .2s ease-out, background .15s, border-color .15s, box-shadow .15s;
}
.ui-navsearch-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-navsearch-input::-webkit-search-cancel-button, .ui-navsearch-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ui-navsearch-input:hover { border-color: var(--ui-strong); }
.ui-navsearch-input:focus, .ui-navsearch-open .ui-navsearch-input {
  outline: none; width: var(--ui-navsearch-wide, 280px); background: var(--ui-surface); border-color: var(--ui-accent); box-shadow: var(--ui-focus);
}
.ui-navsearch-key {
  position: absolute; right: 8px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--ui-border);
  border-radius: 4px; background: var(--ui-surface); color: var(--ui-muted); font: 500 11px/1 var(--ui-mono); pointer-events: none;
}
.ui-navsearch-input:focus ~ .ui-navsearch-key, .ui-navsearch-open .ui-navsearch-key { display: none; }
.ui-navsearch-clear {
  position: absolute; right: 5px; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer;
}
.ui-navsearch-clear svg { width: 14px; height: 14px; }
.ui-navsearch-clear:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-navsearch-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-navsearch-open .ui-navsearch-clear { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .ui-navsearch-input { transition: none; } }


.ui-snapc { position: relative; display: grid; gap: 4px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }
/* The browser does the swiping, so it works before and without any script. */
.ui-snapc-track {
  display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--ui-radius); background: var(--ui-subtle); outline: none;
}
.ui-snapc-track::-webkit-scrollbar { display: none; }
.ui-snapc-track:focus-visible { box-shadow: var(--ui-focus); }
.ui-snapc-slide { position: relative; flex: 0 0 100%; min-width: 0; aspect-ratio: 1; scroll-snap-align: start; scroll-snap-stop: always; }
.ui-snapc-zoom { display: block; width: 100%; height: 100%; -webkit-touch-callout: none; }
.ui-snapc-zoom:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-snapc-slide img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.ui-snapc-count {
  position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 14, 24, .62); color: #fff;
  font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.ui-snapc-dots { display: flex; justify-content: center; }
.ui-snapc-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; touch-action: manipulation; }
.ui-snapc-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ui-strong); transition: width .2s, background .2s; }
.ui-snapc-dot[data-seen]::before { background: var(--ui-accent); }
.ui-snapc-dot[aria-current="true"]::before { width: 20px; }
.ui-snapc-dot:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-snapc-empty { margin: 0; padding: 24px; text-align: center; color: var(--ui-muted); }
@container (min-width: 640px) { .ui-snapc-slide { flex-basis: 50%; } }

.ui-snapc-viewer {
  box-sizing: border-box; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden;
  border: 0; background: #000; color: #fff; font: 14px/1.4 var(--ui-font); overscroll-behavior: none;
}
.ui-snapc-viewer[open] { display: flex; flex-direction: column; }
.ui-snapc-viewer::backdrop { background: #000; }
/* Everything a finger does here is ours: the page must neither scroll nor zoom behind it. */
.ui-snapc-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.ui-snapc-big { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; -webkit-user-drag: none; pointer-events: none; }
.ui-snapc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
.ui-snapc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
}
.ui-snapc-tool {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: #fff; font: 600 20px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-snapc-tool:disabled { color: rgba(255, 255, 255, .35); cursor: default; }
.ui-snapc-tool:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.ui-snapc-tool svg { width: 22px; height: 22px; }
.ui-snapc-where, .ui-snapc-level { font-variant-numeric: tabular-nums; }
.ui-snapc-level { min-width: 52px; text-align: center; }
@media (hover: hover) { .ui-snapc-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .14); } }
@media (prefers-reduced-motion: reduce) { .ui-snapc-dot::before { transition: none; } }


.ui-progress, .ui-progress-ring { --t: var(--ui-accent); }
.ui-progress { display: grid; gap: 6px; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-progress-neutral { --t: var(--ui-muted); }
.ui-progress-success { --t: var(--ui-success); }
.ui-progress-warning { --t: var(--ui-warning); }
.ui-progress-danger { --t: var(--ui-danger); }
.ui-progress-info { --t: var(--ui-info); }
.ui-progress-head { display: flex; justify-content: space-between; gap: 12px; }
.ui-progress-value { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-progress-track { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 60%, transparent); }
.ui-progress-sm .ui-progress-track { height: 4px; }
.ui-progress-lg .ui-progress-track { height: 12px; }
.ui-progress-fill { height: 100%; border-radius: inherit; background: var(--t); transition: width .3s ease; }
.ui-progress-busy .ui-progress-fill { position: absolute; width: 40%; animation: ui-progress-slide 1.3s ease-in-out infinite; }
@keyframes ui-progress-slide { from { left: -40%; } to { left: 100%; } }
.ui-progress-ring { display: inline-grid; place-items: center; position: relative; width: 48px; height: 48px; font-family: var(--ui-font); }
.ui-progress-ring.ui-progress-sm { width: 32px; height: 32px; }
.ui-progress-ring.ui-progress-lg { width: 72px; height: 72px; }
.ui-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-progress-ring circle { fill: none; stroke-width: 3.5; }
.ui-progress-ring .ui-progress-bg { stroke: var(--ui-subtle); }
.ui-progress-ring .ui-progress-arc { stroke: var(--t); stroke-linecap: round; transition: stroke-dasharray .3s ease; }
.ui-progress-ring.ui-progress-busy svg { animation: ui-progress-turn 1s linear infinite; }
@keyframes ui-progress-turn { to { transform: rotate(270deg); } }
.ui-progress-ring .ui-progress-value { position: absolute; color: var(--ui-fg); font-size: 12px; font-weight: 600; }
.ui-progress-ring.ui-progress-sm .ui-progress-value { display: none; }
.ui-progress-ring.ui-progress-lg .ui-progress-value { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .ui-progress-fill, .ui-progress-ring .ui-progress-arc { transition: none; }
  .ui-progress-busy .ui-progress-fill { left: 0; width: 100%; opacity: .45; animation: none; }
  .ui-progress-ring.ui-progress-busy svg { animation: none; }
}


.ui-signature-pad { display: grid; gap: 8px; min-width: 0; width: fit-content; max-width: 100%; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-signature-pad-label { padding: 0; font-size: 13px; font-weight: 500; }
.ui-signature-pad-req { margin-left: 2px; color: var(--ui-danger); }
.ui-signature-pad-box {
  position: relative; width: var(--ui-signature-pad-w, 400px); max-width: 100%; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.ui-signature-pad-box:hover { border-color: var(--ui-strong); }
.ui-signature-pad-box:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-signature-pad-box canvas { display: block; width: 100%; height: auto; color: var(--ui-fg); cursor: crosshair; touch-action: none; outline: none; }
.ui-signature-pad-line { position: absolute; left: 24px; right: 24px; bottom: 28%; border-top: 1px dashed var(--ui-strong); pointer-events: none; }
.ui-signature-pad-x { position: absolute; left: 24px; bottom: calc(28% + 6px); color: var(--ui-muted); font-size: 16px; pointer-events: none; }
.ui-signature-pad-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-muted); font-size: 13px; pointer-events: none; }
.ui-signature-pad-invalid .ui-signature-pad-box { border-color: var(--ui-danger); }
.ui-signature-pad-disabled .ui-signature-pad-box { opacity: .55; }
.ui-signature-pad-disabled canvas { cursor: not-allowed; }
.ui-signature-pad-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-signature-pad-btn {
  height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 500 13px/1 var(--ui-font); cursor: pointer;
}
.ui-signature-pad-btn:hover:not(:disabled) { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-signature-pad-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-signature-pad-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-signature-pad-link { padding: 0 4px; border: 0; background: none; color: var(--ui-accent); font: 500 13px var(--ui-font); cursor: pointer; border-radius: 3px; }
.ui-signature-pad-link:hover { text-decoration: underline; }
.ui-signature-pad-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-signature-pad-typed { flex: 1 1 160px; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-signature-pad-typed:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-signature-pad-hint, .ui-signature-pad-error { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-signature-pad-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-signature-pad-box { transition: none; } }


.ui-pay { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-pay-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-pay-list { display: grid; gap: 8px; }
.ui-pay-opt { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.ui-pay-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-pay-dot { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ui-strong); background: var(--ui-surface); transition: border-color .15s; }
.ui-pay-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ui-accent); transform: scale(0); transition: transform .12s; }
.ui-pay-opt:hover { border-color: var(--ui-strong); }
.ui-pay-opt:has(input:checked) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface)); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-pay-opt input:checked + .ui-pay-dot { border-color: var(--ui-accent); border-width: 1.5px; }
.ui-pay-opt input:checked + .ui-pay-dot::after { transform: scale(1); }
.ui-pay-opt:has(input:focus-visible) { box-shadow: var(--ui-focus); }
.ui-pay-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-pay-icon { display: inline-grid; place-items: center; width: 40px; height: 28px; border: 1px solid var(--ui-border); border-radius: 5px; background: var(--ui-subtle); color: var(--ui-fg); font-size: 16px; }
.ui-pay-icon svg { width: 22px; height: 22px; }
.ui-pay-text { display: grid; gap: 1px; min-width: 0; }
.ui-pay-name { font-weight: 500; }
.ui-pay-hint { font-size: 13px; color: var(--ui-muted); }
.ui-pay-brands { display: flex; gap: 4px; }
.ui-pay-brand { display: inline-grid; place-items: center; height: 20px; padding: 0 5px; border: 1px solid var(--ui-border); border-radius: 3px;
  background: var(--ui-surface); font: 700 9px/1 var(--ui-font); letter-spacing: .04em; color: var(--ui-muted); text-transform: uppercase; }
.ui-pay-invalid .ui-pay-opt { border-color: var(--ui-danger); }
.ui-pay-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-pay-opt, .ui-pay-dot, .ui-pay-dot::after { transition: none; } }


.ui-one-time-code { display: grid; gap: 8px; min-width: 0; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-one-time-code-label { font-size: 14px; font-weight: 500; }
.ui-one-time-code-row { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; max-width: calc(var(--n) * 58px); }
.ui-one-time-code-box {
  display: grid; place-items: center; height: 56px; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); font: 600 24px/1 var(--ui-mono); transition: border-color .12s, box-shadow .12s;
}
.ui-one-time-code-full { background: var(--ui-subtle); border-color: var(--ui-strong); }
.ui-one-time-code-at { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-one-time-code-at:empty::after { content: ""; width: 2px; height: 26px; background: var(--ui-accent); animation: ui-one-time-code-blink 1.1s steps(2) infinite; }
@keyframes ui-one-time-code-blink { 50% { opacity: 0; } }
/* The one field, over every box: its text is not seen, the boxes show it. 16 px, as iOS zooms the page into anything smaller. */
.ui-one-time-code-input {
  position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: transparent; caret-color: transparent; font: 16px var(--ui-mono); letter-spacing: 1em; touch-action: manipulation;
  -webkit-text-fill-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-one-time-code-input::selection { background: transparent; color: transparent; }
.ui-one-time-code-bad .ui-one-time-code-box { border-color: var(--ui-danger); }
.ui-one-time-code-hint, .ui-one-time-code-error { margin: 0; font-size: 14px; color: var(--ui-muted); }
.ui-one-time-code-error { color: var(--ui-danger); }
.ui-one-time-code-resend {
  justify-self: start; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-accent);
  font: 600 15px var(--ui-font); cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums;
}
.ui-one-time-code-resend[aria-disabled="true"] { color: var(--ui-muted); font-weight: 500; cursor: default; }
.ui-one-time-code-resend:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (prefers-reduced-motion: reduce) {
  .ui-one-time-code-box { transition: none; }
  .ui-one-time-code-at:empty::after { animation: none; }
}


.ui-search-input { display: grid; gap: 6px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-search-input-label { font-size: 13px; font-weight: 500; color: var(--ui-fg); }
.ui-search-input-req { margin-left: 2px; color: var(--ui-danger); }
.ui-search-input-hint { margin: 0; font-size: 13px; color: var(--ui-muted); }
.ui-search-input-error { margin: 0; font-size: 13px; color: var(--ui-danger); }
.ui-search-input-box { position: relative; display: flex; align-items: center; }
.ui-search-input-icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ui-muted); pointer-events: none; }
.ui-search-input-control {
  box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 36px 0 35px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1 var(--ui-font); appearance: none; transition: border-color .15s, box-shadow .15s;
}
.ui-search-input-control::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-search-input-control::-webkit-search-cancel-button, .ui-search-input-control::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ui-search-input-control:hover { border-color: var(--ui-strong); }
.ui-search-input-control:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-search-input-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-search-input-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-search-input-clear {
  position: absolute; right: 5px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: var(--ui-muted); cursor: pointer;
}
.ui-search-input-clear svg { width: 14px; height: 14px; }
.ui-search-input-clear:hover { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-search-input-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-search-input-sm .ui-search-input-control { height: 30px; padding-left: 31px; font-size: 13px; }
.ui-search-input-sm .ui-search-input-icon { left: 9px; width: 14px; height: 14px; }
.ui-search-input-sm .ui-search-input-clear { right: 3px; width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .ui-search-input-control { transition: none; } }


.ui-coach-overlay-host { display: contents; }
.ui-coach-overlay { position: fixed; inset: 0; z-index: 65; overflow: hidden; pointer-events: none; font: 15px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-coach-overlay-hole {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--ui-radius-sm); box-shadow: 0 0 0 200vmax var(--ui-overlay), 0 0 0 3px var(--ui-accent);
}
.ui-coach-overlay-card {
  position: absolute; left: 0; top: 0; display: grid; gap: 6px; box-sizing: border-box; width: min(320px, calc(100% - 24px)); padding: 14px; pointer-events: auto;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); touch-action: manipulation;
}
.ui-coach-overlay-card h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.ui-coach-overlay-card p { margin: 0; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-coach-overlay-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ui-coach-overlay-count { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-coach-overlay-acts { display: flex; gap: 4px; }


.ui-conn-host { display: contents; }
.ui-conn { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.4 var(--ui-font); color: var(--ui-fg);
  --t: var(--ui-danger); --ts: var(--ui-danger-soft); }
.ui-conn-online { --t: var(--ui-success); --ts: var(--ui-success-soft); }
.ui-conn-top, .ui-conn-bottom { position: fixed; left: 0; right: 0; z-index: 60; justify-content: center; min-height: 40px; padding: 8px 16px;
  background: var(--ts); border-bottom: 1px solid color-mix(in srgb, var(--t) 30%, transparent); animation: ui-conn-in .2s ease-out; }
.ui-conn-top { top: 0; }
.ui-conn-bottom { bottom: 0; border-bottom: 0; border-top: 1px solid color-mix(in srgb, var(--t) 30%, transparent); }
.ui-conn-inline { padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--ts); font-size: 13px; }
.ui-conn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.ui-conn-offline .ui-conn-dot { animation: ui-conn-blink 1.2s ease-in-out infinite; }
.ui-conn-icon { flex: none; width: 18px; height: 18px; color: var(--t); }
@keyframes ui-conn-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes ui-conn-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ui-conn-top, .ui-conn-bottom { animation: none; } .ui-conn-offline .ui-conn-dot { animation: none; } }


.ui-rsmr { position: relative; min-width: 0; }
/* No height of its own, so showing the notice moves nothing under the finger. */
.ui-rsmr-bar { position: sticky; z-index: 6; top: calc(8px + env(safe-area-inset-top)); display: flex; justify-content: center; height: 0; pointer-events: none; }
.ui-rsmr-note { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: calc(100% - 24px); min-height: 44px; padding: 4px 8px 4px 16px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow); font: 14px/1.3 var(--ui-font); pointer-events: auto; animation: ui-rsmr-in .18s ease-out; }
.ui-rsmr-note:not(:has(button)) { padding-right: 16px; }
.ui-rsmr-note[data-kind="failed"] { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); }
.ui-rsmr-btn { flex: none; min-width: 44px; min-height: 44px; margin: -4px -4px -4px 0; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-accent); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-rsmr-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@keyframes ui-rsmr-in { from { transform: translateY(-10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-rsmr-note { animation: none; } }


.ui-sheet-select { display: grid; gap: 6px; min-width: 0; font: 15px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-sheet-select-field { position: relative; display: grid; min-width: 0; }
.ui-sheet-select-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; font-size: 16px; }
.ui-sheet-select-open {
  position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.ui-sheet-select-open:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sheet-select-open:disabled { opacity: .55; cursor: not-allowed; }
.ui-sheet-select-words { flex: 1; min-width: 0; display: grid; }
.ui-sheet-select-name { font-size: 12px; font-weight: 500; color: var(--ui-muted); }
.ui-sheet-select-now { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
.ui-sheet-select-empty { color: var(--ui-muted); }
.ui-sheet-select-open svg { flex: none; width: 18px; height: 18px; color: var(--ui-muted); }
.ui-sheet-select-panel {
  --kb: 0px; box-sizing: border-box; position: fixed; inset: auto 0 var(--kb) 0; width: 100%; max-width: 100%;
  height: auto; max-height: min(72dvh, calc(100dvh - var(--kb) - 16px)); margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--ui-border); border-bottom: 0; border-radius: calc(var(--ui-radius) + 8px) calc(var(--ui-radius) + 8px) 0 0;
  background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); font: 15px/1.4 var(--ui-font);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain;
}
.ui-sheet-select-panel[open] { display: flex; flex-direction: column; animation: ui-sheet-select-up .24s cubic-bezier(.2, .8, .2, 1); }
.ui-sheet-select-panel::backdrop { background: var(--ui-overlay); }
@keyframes ui-sheet-select-up { from { transform: translateY(100%); } }
.ui-sheet-select-dragging { transition: none; }
.ui-sheet-select-head {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 0 8px 6px 18px;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-sheet-select-grip { grid-column: 1 / -1; justify-self: center; width: 40px; height: 5px; margin: 8px 0 4px; border-radius: 999px; background: var(--ui-strong); }
.ui-sheet-select-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ui-sheet-select-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; touch-action: manipulation;
}
.ui-sheet-select-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sheet-select-close svg { width: 20px; height: 20px; }
.ui-sheet-select-find { flex: none; padding: 0 14px 8px; }
.ui-sheet-select-find input {
  box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-bg); color: var(--ui-fg); font: 16px var(--ui-font);
}
.ui-sheet-select-find input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-sheet-select-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; -webkit-overflow-scrolling: touch; }
.ui-sheet-select-item {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 50px; margin: 0; padding: 8px 10px; border: 0;
  border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 16px/1.3 var(--ui-font); text-align: left;
  cursor: pointer; touch-action: pan-y;
}
.ui-sheet-select-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sheet-select-item:active { background: var(--ui-subtle); }
.ui-sheet-select-item[aria-selected="true"] { font-weight: 600; color: var(--ui-accent); }
.ui-sheet-select-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-sheet-select-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 15px; }
.ui-sheet-select-many .ui-sheet-select-mark { border: 1.5px solid var(--ui-strong); }
.ui-sheet-select-many [aria-selected="true"] .ui-sheet-select-mark { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-sheet-select-item span:nth-child(2) { flex: 1; min-width: 0; }
.ui-sheet-select-hint { flex: none; font-weight: 400; font-size: 14px; color: var(--ui-muted); }
.ui-sheet-select-none { margin: 0; padding: 18px 10px; text-align: center; color: var(--ui-muted); }
.ui-sheet-select-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border);
}
.ui-sheet-select-count { color: var(--ui-muted); }
.ui-sheet-select-done {
  min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg);
  font: 600 16px var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.ui-sheet-select-done:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-sheet-select-safe { flex: none; height: env(safe-area-inset-bottom); }
@media (hover: hover) {
  .ui-sheet-select-item:hover { background: var(--ui-subtle); }
  .ui-sheet-select-close:hover { background: var(--ui-subtle); color: var(--ui-fg); }
}
/* A wide screen has room for a panel by the button: no sheet, no grip. */
@media (min-width: 700px) {
  .ui-sheet-select-panel {
    inset: var(--top, auto) auto auto var(--left, 0); width: var(--wide, 360px); max-height: var(--room, 420px);
    border-bottom: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  }
  .ui-sheet-select-panel[open] { animation: none; }
  .ui-sheet-select-panel::backdrop { background: transparent; }
  .ui-sheet-select-grip { display: none; }
  .ui-sheet-select-head { padding-top: 6px; cursor: default; touch-action: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-sheet-select-panel { transition: none; }
  .ui-sheet-select-panel[open] { animation: none; }
}


.ui-social { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font: 14px/1 var(--ui-font); }
.ui-social a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--s); height: var(--s); padding: 0;
  border: 1px solid transparent; border-radius: var(--ui-radius-sm); color: var(--ui-muted); text-decoration: none; --s: 36px;
  transition: color .15s, background .15s, border-color .15s; }
.ui-social a:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-social a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-social-outline a { border-color: var(--ui-border); color: var(--ui-fg); }
.ui-social-outline a:hover { border-color: var(--ui-accent); }
.ui-social-solid a { background: var(--ui-subtle); color: var(--ui-fg); }
.ui-social-solid a:hover { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-social svg { flex: none; width: calc(var(--s) * .5); height: calc(var(--s) * .5); }
.ui-social-sm a { --s: 30px; }
.ui-social-lg a { --s: 44px; }
.ui-social-labels a { padding: 0 12px 0 10px; }
.ui-social-labels a span { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ui-social a { transition: none; } }


.ui-safe-area { box-sizing: border-box; }
.ui-safe-area-debug { position: relative; }
.ui-safe-area-guide { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; color: var(--ui-fg); font: 600 12px/1.3 var(--ui-mono); }
.ui-safe-area-probe { position: absolute; left: 0; top: 0; visibility: hidden; }
.ui-safe-area-probe-a { width: var(--ui-safe-left, env(safe-area-inset-left, 0px)); height: var(--ui-safe-top, env(safe-area-inset-top, 0px)); }
.ui-safe-area-probe-b { width: var(--ui-safe-right, env(safe-area-inset-right, 0px)); height: var(--ui-safe-bottom, env(safe-area-inset-bottom, 0px)); }
.ui-safe-area-band {
  position: absolute; display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ui-danger) 34%, transparent) 0 6px, color-mix(in srgb, var(--ui-danger) 14%, transparent) 6px 12px);
}
.ui-safe-area-band-top { inset: 0 0 auto 0; }
.ui-safe-area-band-bottom { inset: auto 0 0 0; }
.ui-safe-area-band-left { inset: 0 auto 0 0; }
.ui-safe-area-band-right { inset: 0 0 0 auto; }
.ui-safe-area-band-off { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ui-muted) 22%, transparent) 0 6px, transparent 6px 12px); }
.ui-safe-area-legend {
  position: absolute; left: 50%; top: 24%; display: grid; gap: 4px; width: max-content; max-width: min(320px, 86%); padding: 10px 12px; transform: translateX(-50%);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--ui-surface) 90%, transparent); box-shadow: var(--ui-shadow);
}
.ui-safe-area-numbers { margin: 0; font-variant-numeric: tabular-nums; }
.ui-safe-area-warn { margin: 0; color: var(--ui-warning); font: 500 13px/1.4 var(--ui-font); }


.ui-invoice { display: grid; gap: 28px; min-width: 0; padding: 36px 40px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); }
.ui-invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.ui-invoice-logo { max-height: 44px; max-width: 180px; object-fit: contain; margin-bottom: 10px; }
.ui-invoice-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ui-invoice-status { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--ui-subtle); color: var(--ui-muted); }
.ui-invoice-paid { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-invoice-due { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-invoice-overdue { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-invoice-meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; align-content: start; text-align: right; }
.ui-invoice-meta dt { color: var(--ui-muted); }
.ui-invoice-meta dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.ui-invoice-party { font-style: normal; }
.ui-invoice-party h4 { margin: 0 0 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-invoice-party-name { font-weight: 600; }
.ui-invoice-party p { margin: 0; }
.ui-invoice-party .ui-invoice-dim { color: var(--ui-muted); }
.ui-invoice-scroll { overflow-x: auto; }
.ui-invoice table { width: 100%; border-collapse: collapse; }
.ui-invoice th { padding: 8px 10px; border-bottom: 2px solid var(--ui-fg); color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.ui-invoice td { padding: 10px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-invoice .ui-invoice-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-invoice-desc { font-weight: 500; }
.ui-invoice-detail { display: block; color: var(--ui-muted); font-size: 13px; }
.ui-invoice-totals { display: grid; grid-template-columns: auto minmax(120px, auto); gap: 6px 24px; justify-content: end; margin: 0; }
.ui-invoice-totals dt { color: var(--ui-muted); }
.ui-invoice-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ui-invoice-total dt, .ui-invoice-total dd { padding-top: 8px; border-top: 2px solid var(--ui-fg); font-size: 16px; font-weight: 700; color: var(--ui-fg); }
.ui-invoice-discount dd { color: var(--ui-success); }
.ui-invoice-balance dt, .ui-invoice-balance dd { font-weight: 600; color: var(--ui-fg); }
.ui-invoice-notes { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ui-border); }
.ui-invoice-notes h4 { margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.ui-invoice-notes p { margin: 0; white-space: pre-line; }
.ui-invoice-terms { color: var(--ui-muted); font-size: 13px; }
@media (max-width: 560px) { .ui-invoice { padding: 22px 18px; } .ui-invoice-meta { text-align: left; } }
@media print { .ui-invoice { padding: 0; border: 0; border-radius: 0; background: #fff; color: #000; } .ui-invoice-scroll { overflow: visible; } }


.ui-unit-conv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-unit-conv .ui-unit-conv-title { display: block; margin: 0; font-size: 16px; font-weight: 650; }
.ui-unit-conv-field { display: grid; gap: 5px; min-width: 0; }
.ui-unit-conv-field label { font-size: 13px; font-weight: 500; }
.ui-unit-conv select, .ui-unit-conv-field input { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-unit-conv-field input { font-variant-numeric: tabular-nums; }
.ui-unit-conv select:focus-visible, .ui-unit-conv-field input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-unit-conv-bad input { border-color: var(--ui-danger); }
.ui-unit-conv-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.ui-unit-conv-side { display: grid; gap: 8px; min-width: 0; }
.ui-unit-conv-swap { box-sizing: border-box; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-fg); font: 16px/1 var(--ui-font); cursor: pointer; }
.ui-unit-conv-swap:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-unit-conv-swap:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-unit-conv-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ui-unit-conv-check input { margin: 0; accent-color: var(--ui-accent); }
.ui-unit-conv-out { display: grid; gap: 4px; margin: 0; padding: 10px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); overflow-wrap: anywhere; }
.ui-unit-conv-answer { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-unit-conv-formula { margin: 0; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-unit-conv-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
@media (max-width: 480px) { .ui-unit-conv-pair { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .ui-unit-conv-swap { justify-self: center; transform: rotate(90deg); } }


.ui-vl { position: relative; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.35 var(--ui-font); outline: none; overscroll-behavior: contain; }
.ui-vl:focus-visible { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-vl-space { position: relative; }
.ui-vl-item { position: absolute; left: 0; right: 0; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; border-bottom: 1px solid var(--ui-border); cursor: pointer; }
.ui-vl-item:hover { background: var(--ui-subtle); }
.ui-vl-item[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-vl-item[aria-selected="true"] .ui-vl-title { color: var(--ui-accent); }
.ui-vl:focus-visible .ui-vl-active { box-shadow: inset 3px 0 0 var(--ui-accent); background: var(--ui-subtle); }
.ui-vl:focus-visible .ui-vl-active[aria-selected="true"] { background: var(--ui-accent-soft); }
.ui-vl-text { flex: 1; min-width: 0; display: grid; }
.ui-vl-title, .ui-vl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-vl-title { font-weight: 500; }
.ui-vl-sub { color: var(--ui-muted); font-size: 13px; }
.ui-vl-meta { flex: none; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-vl-empty { padding: 28px 14px; color: var(--ui-muted); text-align: center; }


.ui-rating { --ui-rating-size: 24px; min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-rating-sm { --ui-rating-size: 16px; }
.ui-rating-lg { --ui-rating-size: 32px; }
.ui-rating-legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.ui-rating-req { margin-left: 2px; color: var(--ui-danger); }
.ui-rating-stars { position: relative; display: inline-flex; align-items: center; }
.ui-rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ui-rating-piece {
  display: block; flex: none; width: var(--ui-rating-size); height: var(--ui-rating-size); overflow: hidden;
  color: var(--ui-strong); cursor: pointer; border-radius: 3px; transition: color .12s, transform .12s;
}
.ui-rating-piece svg { display: block; width: var(--ui-rating-size); height: var(--ui-rating-size); padding: 1px; }
.ui-rating-gap { margin-right: 4px; }
.ui-rating-half .ui-rating-piece { width: calc(var(--ui-rating-size) / 2); }
.ui-rating-half .ui-rating-right svg { margin-left: calc(var(--ui-rating-size) / -2); }
.ui-rating-stars:not(:has(.ui-rating-piece:hover)) input:checked + .ui-rating-piece,
.ui-rating-stars:not(:has(.ui-rating-piece:hover)) .ui-rating-piece:has(~ input:checked),
.ui-rating:not(:disabled) .ui-rating-piece:hover,
.ui-rating:not(:disabled) .ui-rating-piece:has(~ .ui-rating-piece:hover) { color: var(--ui-warning); }
.ui-rating:not(:disabled) .ui-rating-piece:hover { transform: scale(1.08); }
.ui-rating-stars input:focus-visible + .ui-rating-piece { box-shadow: var(--ui-focus); }
.ui-rating-invalid .ui-rating-piece { color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-strong)); }
.ui-rating-hint, .ui-rating-error { margin: 6px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-rating-error { color: var(--ui-danger); }
.ui-rating:disabled { opacity: .55; }
.ui-rating:disabled .ui-rating-piece { cursor: not-allowed; }
.ui-rating-show { display: inline-flex; align-items: center; gap: 6px; font: 14px/1 var(--ui-font); color: var(--ui-muted); }
.ui-rating-show .ui-rating-shown { --ui-rating-size: 18px; display: inline-flex; gap: 2px; }
.ui-rating-show.ui-rating-sm .ui-rating-shown { --ui-rating-size: 14px; }
.ui-rating-show.ui-rating-lg .ui-rating-shown { --ui-rating-size: 26px; }
.ui-rating-one { position: relative; width: var(--ui-rating-size); height: var(--ui-rating-size); color: var(--ui-strong); }
.ui-rating-one svg { display: block; width: var(--ui-rating-size); height: var(--ui-rating-size); }
.ui-rating-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--ui-warning); }
.ui-rating-num { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-rating-piece { transition: none; } }


.ui-boarding-pass { display: flex; width: 100%; max-width: 640px; min-width: 0; margin: 0; border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-fg); font: 14px/1.4 var(--ui-font); box-shadow: var(--ui-shadow); }
.ui-boarding-pass-main { flex: 1; min-width: 0; display: grid; gap: 16px; padding: 18px 22px 20px; border-radius: var(--ui-radius) 0 0 var(--ui-radius); overflow: hidden; }
.ui-boarding-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -22px 0; padding: 12px 22px; background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-boarding-pass-airline { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; }
.ui-boarding-pass-airline img { max-height: 24px; max-width: 110px; object-fit: contain; }
.ui-boarding-pass-cabin { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ui-boarding-pass-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.ui-boarding-pass-code { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ui-boarding-pass-city { color: var(--ui-muted); font-size: 13px; }
.ui-boarding-pass-time { margin-top: 4px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-boarding-pass-to { text-align: right; }
.ui-boarding-pass-plane { color: var(--ui-muted); }
.ui-boarding-pass-plane svg { width: 28px; height: 28px; }
.ui-boarding-pass-plane::before, .ui-boarding-pass-plane::after { content: ""; display: inline-block; width: 24px; border-top: 1px dashed var(--ui-strong); vertical-align: middle; }
.ui-boarding-pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px 16px; margin: 0; }
.ui-boarding-pass-grid div { display: grid; gap: 1px; }
.ui-boarding-pass-grid dt { color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-boarding-pass-grid dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-boarding-pass-wide dd { font-size: 15px; font-weight: 600; }
.ui-boarding-pass-bars { display: grid; justify-items: start; min-height: 44px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.ui-boarding-pass-bars-fake { width: 220px; max-width: 100%; height: 44px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--ui-fg) 0 2px, transparent 2px 4px, var(--ui-fg) 4px 5px, transparent 5px 8px, var(--ui-fg) 8px 11px, transparent 11px 13px); }
.ui-boarding-pass-stub { position: relative; flex: 0 0 190px; display: grid; align-content: start; gap: 10px; padding: 18px 16px; border-left: 2px dashed var(--ui-strong);
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
.ui-boarding-pass-stub::before, .ui-boarding-pass-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-bg); }
.ui-boarding-pass-stub::before { top: -10px; }
.ui-boarding-pass-stub::after { bottom: -10px; }
.ui-boarding-pass-stub-route { font-size: 18px; font-weight: 800; }
.ui-boarding-pass-stub .ui-boarding-pass-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.ui-boarding-pass-stub .ui-boarding-pass-grid dd { font-size: 14px; }
.ui-boarding-pass-stub-name { font-weight: 600; font-size: 13px; }
@media (max-width: 520px) {
  .ui-boarding-pass { flex-direction: column; }
  .ui-boarding-pass-main { border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
  .ui-boarding-pass-stub { flex: none; border-left: 0; border-top: 2px dashed var(--ui-strong); border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
  .ui-boarding-pass-stub::before, .ui-boarding-pass-stub::after { top: -11px; bottom: auto; }
  .ui-boarding-pass-stub::before { left: -10px; }
  .ui-boarding-pass-stub::after { left: auto; right: -10px; }
}
@media print { .ui-boarding-pass { box-shadow: none; border: 1px solid #000; } .ui-boarding-pass-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }


.ui-gesture-tut { position: relative; container-type: inline-size; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
/* The layer never takes a touch: the gesture has to reach the real thing under it. */
.ui-gesture-tut-layer { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.ui-gesture-tut-ring { position: absolute; border: 2px solid var(--ui-accent); border-radius: var(--ui-radius-sm); box-shadow: 0 0 0 4px var(--ui-accent-soft); }
.ui-gesture-tut-hand { position: absolute; width: 0; height: 0; animation: var(--a) 1.8s ease-in-out infinite; }
/* A ring where the fingertip lands, and the hand itself, its fingertip on the ring. Dark on white reads on any background. */
.ui-gesture-tut-dot { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 3px solid #fff; border-radius: 50%; background: color-mix(in srgb, var(--ui-accent) 55%, transparent); box-shadow: var(--ui-shadow); }
.ui-gesture-tut-dot svg { position: absolute; left: 3px; top: 8px; width: 52px; height: 52px; overflow: visible; color: #17161f; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.ui-gesture-tut-dot2 { display: none; }
.ui-gesture-tut-card { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 6px 6px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); }
.ui-gesture-tut-words { flex: 1; min-width: 0; }
.ui-gesture-tut-title { display: block; font-weight: 600; }
.ui-gesture-tut-why { display: block; color: var(--ui-danger); font-size: 14px; }
.ui-gesture-tut-good { color: var(--ui-success); font-weight: 600; }
.ui-gesture-tut-skip { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px/1 var(--ui-font); text-decoration: underline; cursor: pointer; }
.ui-gesture-tut-skip:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@container (min-width: 520px) { .ui-gesture-tut-card { max-width: 420px; margin-inline: auto; } }
@keyframes ui-gesture-tut-left { 0%, 15% { transform: translateX(36px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateX(-46px); opacity: 0; } }
@keyframes ui-gesture-tut-right { 0%, 15% { transform: translateX(-36px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateX(46px); opacity: 0; } }
@keyframes ui-gesture-tut-up { 0%, 15% { transform: translateY(36px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateY(-46px); opacity: 0; } }
@keyframes ui-gesture-tut-down { 0%, 15% { transform: translateY(-36px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateY(46px); opacity: 0; } }
@keyframes ui-gesture-tut-tap { 0%, 100% { transform: scale(1.25); opacity: .2; } 30% { transform: scale(.85); opacity: 1; } 50% { transform: scale(1.1); opacity: .9; } }
@keyframes ui-gesture-tut-double { 0%, 100% { transform: scale(1.25); opacity: .2; } 20%, 50% { transform: scale(.85); opacity: 1; } 35%, 65% { transform: scale(1.1); opacity: .9; } }
@keyframes ui-gesture-tut-hold { 0%, 100% { transform: scale(1.3); opacity: .2; } 20%, 75% { transform: scale(.8); opacity: 1; } }
.ui-gesture-tut-pinch .ui-gesture-tut-dot { animation: ui-gesture-tut-p1 1.8s ease-in-out infinite; }
.ui-gesture-tut-pinch .ui-gesture-tut-dot.ui-gesture-tut-dot2 { display: block; animation-name: ui-gesture-tut-p2; }
@keyframes ui-gesture-tut-p1 { 0%, 20% { transform: translate(-14px, 14px); opacity: .3; } 70%, 100% { transform: translate(-42px, 42px); opacity: 1; } }
@keyframes ui-gesture-tut-p2 { 0%, 20% { transform: translate(14px, -14px); opacity: .3; } 70%, 100% { transform: translate(42px, -42px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* A hand standing where the gesture starts, and the words do the rest. */
  .ui-gesture-tut-hand, .ui-gesture-tut-pinch .ui-gesture-tut-dot { animation: none; }
}


.ui-bsurvey { display: grid; gap: 14px; min-width: 0; max-width: 620px; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }
.ui-bsurvey-problems { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; overflow-wrap: anywhere; }
.ui-bsurvey-progress { display: grid; gap: 4px; font-size: 13px; color: var(--ui-muted); }
.ui-bsurvey-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-bsurvey-bar { height: 100%; border-radius: 999px; background: var(--ui-accent); transition: width .2s; }
.ui-bsurvey .ui-bsurvey-question { margin: 0; font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.ui-bsurvey-question:focus { outline: none; }
.ui-bsurvey-help { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bsurvey-form { display: grid; gap: 12px; min-width: 0; }
.ui-bsurvey-choices { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-bsurvey-scale { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ui-bsurvey-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; overflow-wrap: anywhere; }
.ui-bsurvey-choice input { margin: 0; accent-color: var(--ui-accent); }
.ui-bsurvey-choice input:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bsurvey-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-fg); font: 14px var(--ui-font); }
.ui-bsurvey-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-bsurvey-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-bsurvey-error { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-bsurvey-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-bsurvey-btn { height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg);
  font: 500 14px/1 var(--ui-font); cursor: pointer; }
.ui-bsurvey-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-bsurvey-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bsurvey-go { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-bsurvey-go:hover { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-fg)); }
.ui-bsurvey-summary { display: grid; gap: 0; margin: 0; }
.ui-bsurvey-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--ui-border); }
.ui-bsurvey-line dt { font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-bsurvey-line dd { grid-row: 2; margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ui-bsurvey-line button { grid-row: 1 / span 2; grid-column: 2; align-self: center; height: 28px; padding: 0 10px; font-size: 12px; }
.ui-bsurvey-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-bsurvey-done { margin: 0; color: var(--ui-success); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ui-bsurvey-bar { transition: none; } }


.ui-voice-message {
  position: relative; display: inline-grid; grid-template-columns: 44px 1fr 48px; align-items: center; gap: 2px 6px; box-sizing: border-box; width: min(340px, 100%); padding: 6px 8px;
  border-radius: 18px; background: var(--ui-subtle); color: var(--ui-fg); font: 12px/16px var(--ui-font);
}
.ui-voice-message-mine { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-voice-message-play, .ui-voice-message-speed {
  display: grid; place-items: center; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 600 13px var(--ui-font);
  cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums;
}
.ui-voice-message-play { width: 44px; }
.ui-voice-message-play svg { width: 26px; height: 26px; }
.ui-voice-message-speed { width: 48px; border-radius: 22px; }
.ui-voice-message-play:focus-visible, .ui-voice-message-speed:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-voice-message-play:disabled { opacity: .5; cursor: default; }
.ui-voice-message-wave {
  position: relative; display: block; height: 44px; min-width: 0; touch-action: pan-y; cursor: pointer; outline: none; border-radius: 8px; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}
.ui-voice-message-wave:focus-visible { box-shadow: var(--ui-focus); }
.ui-voice-message-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; color: inherit; opacity: .35; }
.ui-voice-message-bars i { flex: 1; min-width: 1px; max-width: 5px; border-radius: 2px; background: currentColor; }
.ui-voice-message-over { opacity: 1; color: var(--ui-accent); clip-path: inset(0 calc(100% - var(--ui-voice-message-at, 0%)) 0 0); }
:dir(rtl).ui-voice-message-over { clip-path: inset(0 0 0 calc(100% - var(--ui-voice-message-at, 0%))); }
.ui-voice-message-mine .ui-voice-message-over { color: inherit; }
.ui-voice-message-foot { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 2px; opacity: .85; font-variant-numeric: tabular-nums; }
.ui-voice-message-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); }
.ui-voice-message-mine .ui-voice-message-dot { background: currentColor; }
.ui-voice-message-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-voice-message-when { margin-left: auto; }
.ui-voice-message-trouble { grid-column: 1 / 4; margin: 0; padding: 0 4px; color: var(--ui-danger); }
.ui-voice-message-mine .ui-voice-message-trouble { color: inherit; }
.ui-voice-message-trouble:empty { display: none; }


.ui-voice-recorder { container-type: inline-size; width: 100%; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-voice-recorder-body { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-voice-recorder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-voice-recorder-clock { font: 600 28px/1.1 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-voice-recorder-limit { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-voice-recorder-meter { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: var(--ui-subtle); }
.ui-voice-recorder-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: var(--ui-accent); will-change: transform; }
.ui-voice-recorder-paused .ui-voice-recorder-fill { background: var(--ui-muted); }
.ui-voice-recorder audio { display: block; width: 100%; height: 48px; }
.ui-voice-recorder-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-voice-recorder-bar > * { flex: 1 1 auto; }
.ui-voice-recorder-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--ui-danger); }
.ui-voice-recorder-paused .ui-voice-recorder-dot { background: var(--ui-muted); }
.ui-voice-recorder-state { color: var(--ui-muted); font-size: 13px; }
.ui-voice-recorder-hint { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-voice-recorder-why { margin: 0; color: var(--ui-danger); font-size: 13px; }
.ui-voice-recorder input[type=file] { display: none; }
/* A tablet: the buttons in one row beside the clock's width, not stretched across it. */
@container (min-width: 440px) {
  .ui-voice-recorder-bar > * { flex: 0 1 auto; }
}


.ui-seo-audit { display: grid; gap: 14px; min-width: 0; max-width: 760px; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-seo-audit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; min-width: 0; }
.ui-seo-audit-field { display: grid; align-content: start; gap: 4px; min-width: 0; }
.ui-seo-audit-wide { grid-column: 1 / -1; }
.ui-seo-audit-field label { font-size: 13px; font-weight: 500; }
.ui-seo-audit-field input, .ui-seo-audit-field textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); resize: vertical; }
.ui-seo-audit-field textarea { font: 13px/1.5 var(--ui-mono); }
.ui-seo-audit-field input:hover, .ui-seo-audit-field textarea:hover { border-color: var(--ui-strong); }
.ui-seo-audit-field input:focus, .ui-seo-audit-field textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-seo-audit-count { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-seo-audit-result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); --k: var(--ui-muted); }
.ui-seo-audit-good { --k: var(--ui-success); }
.ui-seo-audit-fair { --k: var(--ui-warning); }
.ui-seo-audit-poor { --k: var(--ui-danger); }
.ui-seo-audit-score { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--k); font-variant-numeric: tabular-nums; }
.ui-seo-audit-said { flex: 1 1 200px; margin: 0; font-weight: 600; }
.ui-seo-audit-note { margin: 0; color: var(--ui-muted); font-size: 13px; }
.ui-seo-audit-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 0; }
.ui-seo-audit-counts dt { color: var(--ui-muted); font-size: 12px; }
.ui-seo-audit-counts dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-seo-audit-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-seo-audit-checks li { display: grid; gap: 1px; padding: 8px 10px; border-left: 3px solid var(--ui-danger); border-radius: var(--ui-radius-sm); background: var(--ui-surface); overflow-wrap: anywhere; }
.ui-seo-audit-passed .ui-seo-audit-checks li { border-left-color: var(--ui-success); }
.ui-seo-audit-checks b { font-weight: 600; }
.ui-seo-audit-checks small { color: var(--ui-muted); font-size: 13px; }
.ui-seo-audit-passed summary { cursor: pointer; font-weight: 600; }
.ui-seo-audit-passed summary:focus-visible { outline: none; box-shadow: var(--ui-focus); border-radius: var(--ui-radius-sm); }
.ui-seo-audit-passed[open] summary { margin-bottom: 6px; }


.ui-grplist { container-type: inline-size; padding: 4px 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--ui-subtle); background: light-dark(var(--ui-subtle), var(--ui-bg)); color: var(--ui-fg); font: 16px/1.3 var(--ui-font); }
.ui-grplist-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.ui-grplist-group { min-width: 0; margin: 0 0 22px; }
.ui-grplist-group:last-child { margin-bottom: 0; }
.ui-grplist-title { margin: 12px 16px 6px; color: var(--ui-muted); font: 500 13px/1.3 var(--ui-font); letter-spacing: .02em; text-transform: uppercase; }
.ui-grplist-rows { margin: 0; padding: 0; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-surface); background: light-dark(var(--ui-surface), var(--ui-subtle)); list-style: none; }
.ui-grplist-note { margin: 6px 16px 0; color: var(--ui-muted); font: 13px/1.4 var(--ui-font); }
.ui-grplist-row {
  display: flex; align-items: stretch; gap: 12px; box-sizing: border-box; width: 100%; min-height: 46px; margin: 0; padding: 0 0 0 16px; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
a.ui-grplist-row, button.ui-grplist-row { cursor: pointer; }
a.ui-grplist-row:active, button.ui-grplist-row:active { background: color-mix(in srgb, var(--ui-fg) 9%, transparent); }
@media (hover: hover) { a.ui-grplist-row:hover, button.ui-grplist-row:hover { background: color-mix(in srgb, var(--ui-fg) 5%, transparent); } }
.ui-grplist-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); border-radius: var(--ui-radius); }
.ui-grplist-icon { display: grid; place-items: center; flex: none; align-self: center; width: 30px; height: 30px; border-radius: 7px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 17px; line-height: 1; }
.ui-grplist-icon svg { width: 18px; height: 18px; }
/* The line sits on the part after the icon, so it starts at the text as on iOS. */
.ui-grplist-body { display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; padding: 10px 14px 10px 0; }
li + li .ui-grplist-body { border-top: 1px solid var(--ui-border); }
.ui-grplist-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-grplist-sub { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 13px; }
.ui-grplist-value { flex: 0 1 auto; max-width: 70%; color: var(--ui-muted); text-align: right; overflow-wrap: anywhere; }
.ui-grplist-badge { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-fg); font: 600 13px/18px var(--ui-font); text-align: center; }
.ui-grplist-chevron { flex: none; width: 8px; height: 14px; color: var(--ui-strong); }
.ui-grplist-danger { color: var(--ui-danger); }
.ui-grplist-danger .ui-grplist-text { font-weight: 500; }
.ui-grplist-off { opacity: .5; cursor: default; }
@container (min-width: 640px) {
  .ui-grplist-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 0 24px; }
  .ui-grplist-group:last-child { margin-bottom: 22px; }
}