/* Where things sit (spec 2026-10-07 §3.2, §3.9): the header, the page, the banner, the toasts, the menu. */
.top-stack { position: sticky; top: 0; z-index: 30; }
.app-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--top); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--info)); color: var(--accent-fg); font-size: 11px; font-weight: 800; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-text h1 { font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.ledger-line { color: var(--muted); font-size: 11px; white-space: nowrap; }
.live { display: inline-flex; align-items: center; gap: 5px; }
.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.live-open { color: var(--ok-text); }
.live-open::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.header-search { flex: 1; min-width: 0; max-width: 420px; margin: 0 auto; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .add-account-form { left: auto; right: 0; }
.more-toggle { position: relative; }
.more-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.page { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 24px; }
#banner { padding: 12px 16px 0; }
#banner:empty { display: none; }
.banner-error { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--danger-line); border-radius: var(--rl); background: var(--danger-soft); color: var(--danger-text); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--rl); background: var(--raise); box-shadow: var(--shadow); }
.toast-icon { display: grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.toast-icon .icon { width: 12px; height: 12px; }
.toast-ok .toast-icon { background: var(--ok-soft); color: var(--ok-text); }
.toast-error { border-color: var(--danger-line); }
.toast-error .toast-icon { background: var(--danger-soft); color: var(--danger-text); }
.toast-text { flex: 1; overflow-wrap: anywhere; }
.toast-close { margin: -4px -6px -4px 0; }
.menu { position: fixed; z-index: 70; display: flex; flex-direction: column; min-width: 200px; max-width: 320px; padding: 5px; border: 1px solid var(--line2); border-radius: var(--rl); background: var(--raise); box-shadow: var(--shadow); }
.menu-item { justify-content: space-between; gap: 12px; width: 100%; padding: 6px 9px; border: 0; border-radius: 6px; background: none; font-weight: 500; text-align: left; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item[aria-checked="true"]::after { content: '✓'; color: var(--accent); }
.menu-item.danger { color: var(--danger-text); }
.menu-hint { color: var(--muted); font-size: 11px; font-weight: 400; white-space: normal; text-align: right; }
.menu-note { padding: 6px 9px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--line2); }
@media (max-width: 900px) { .brand-text { display: none; } .header-search { max-width: none; } }

/* «Агент питає» (spec 2026-10-07 §3.7): under the header, on every screen, while a question waits. */
.ask-bar[hidden] { display: none; }
.ask { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--warn-line); background: linear-gradient(90deg, var(--warn-soft), var(--top)); }
.ask-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: var(--warn-fg); }
.ask-mark .icon { width: 14px; height: 14px; }
.ask-who { white-space: nowrap; }
/* Wrapped, never cut: «Підтвердити» beside it rests on the operator having seen all of it (approval-bar.js) */
.ask-command { min-width: 0; padding: 3px 8px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.countdown { color: var(--warn-text); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
@media (max-width: 900px) { .ask { flex-wrap: wrap; } .ask .grow { display: none; } }

/* The tiles, the view's choices and the table (spec 2026-10-07 §3.3–3.5, §3.9, §3.11). */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--rl); background: var(--panel); color: var(--fg); font-weight: 400; text-align: left; white-space: normal; }
button.kpi:hover:not(:disabled) { border-color: var(--line2); background: var(--hover); }
.kpi-label { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.kpi-value { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi-sub { color: var(--muted); font-size: 11.5px; }
button.kpi.warn, button.kpi.warn:hover:not(:disabled) { border-color: var(--warn-line); background: linear-gradient(180deg, var(--warn-soft), var(--panel)); }
button.kpi.warn .kpi-value { color: var(--warn-text); }
button.kpi[aria-pressed="true"] { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.kpi.skeleton, .skel { background: linear-gradient(90deg, var(--chip), var(--raise), var(--chip)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.kpi.skeleton { height: 76px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--line2); border-radius: 9px; }
.seg-item { gap: 6px; padding: 4px 11px; border: 0; border-right: 1px solid var(--line2); border-radius: 0; background: none; color: var(--muted); font-weight: 500; }
.seg-item:last-child { border-right: 0; }
.seg-item[aria-pressed="true"] { background: var(--raise); color: var(--fg); font-weight: 600; }
.seg-item.attention .seg-count { color: var(--warn-text); }
.seg-count, .filter-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.filter { gap: 6px; padding: 4px 10px; border-radius: 999px; color: var(--muted); font-weight: 500; }
.filter.active, .filter.active:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.filter.active .filter-count { color: var(--accent); }
.focus-chip .icon { width: 12px; height: 12px; }
.table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--rl); background: var(--panel); }
table.accounts { width: 100%; border-collapse: collapse; }
table.accounts th { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--th); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
table.accounts th.num { text-align: right; }
table.accounts button.sort { gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
table.accounts button.sort.sorted { color: var(--fg); }
table.accounts td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.accounts tr:last-child td { border-bottom: 0; }
table.accounts tr[data-key] { cursor: pointer; }
table.accounts tr[data-key]:hover td { background: var(--hover); }
table.accounts tr.selected td, table.accounts tr.selected:hover td { background: var(--sel); }
table.accounts tr[data-key]:focus-visible { outline: none; }
table.accounts tr[data-key]:focus-visible td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
table.accounts tr.group td { padding: 6px 12px; background: var(--th); color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.acc { display: flex; align-items: center; gap: 10px; }
.acc-text { display: flex; flex-direction: column; min-width: 0; }
.acc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acc .name { font-weight: 650; letter-spacing: -0.005em; }
td.balance .bal { font-weight: 650; font-variant-numeric: tabular-nums; }
td.balance .bal.need, .need-sub { color: var(--danger-text); }
td.balance .bal.none { color: var(--faint); font-weight: 400; }
.need-sub { font-size: 11.5px; }
.acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border: 1px dashed var(--line2); border-radius: var(--rl); background: var(--panel); text-align: center; }
.empty-title { font-weight: 600; }
.skeleton-table { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.skel { height: 34px; border-radius: 7px; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  table.accounts .col-status { display: none; }
}