/* The account's panel and what sits in it (spec 2026-10-07 §3.6, §3.9). */
.side-panel { position: fixed; top: var(--top-h, 48px); right: 0; bottom: 0; z-index: 25; display: flex; flex-direction: column; width: min(460px, 100vw); background: var(--panel); border-left: 1px solid var(--line2); box-shadow: -18px 0 40px rgb(0 0 0 / 30%); }
.side-panel[hidden] { display: none; }
.drawer-head { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 0; }
.drawer-row { display: flex; align-items: center; gap: 10px; }
.drawer-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.drawer-title:focus { outline: none; } /* focused so the keyboard lands in the panel — a heading, not a control */
.drawer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12px; }
.drawer-meta .fact + .fact::before { content: '·'; margin-right: 6px; color: var(--faint); }
.tabs { display: flex; gap: 18px; margin-top: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.tab { padding: 9px 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-weight: 550; }
.tab:hover:not(:disabled) { background: none; color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.tab-count { margin-left: 5px; color: var(--muted); font-weight: 500; }
.drawer-body { flex: 1; overflow: auto; padding: 14px 16px 16px; }
.tab-overview, .tab-settings { display: flex; flex-direction: column; gap: 12px; }
.slot { display: contents; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--rl); background: var(--raise); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* The CRM card (spec 2026-10-12 §3.6): names and notes from the CRM are long; a button wraps instead of leaving the card. */
.card-crm p, .card-crm li { overflow-wrap: anywhere; }
.card-crm ul { margin: 0; padding-left: 18px; }
.card-crm button { max-width: 100%; white-space: normal; text-align: left; }
.big-balance { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.big-balance.need, .missing { color: var(--danger-text); }
.domains-goal { display: flex; flex-direction: column; gap: 4px; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.check-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.check-line { flex-basis: 100%; color: var(--muted); overflow-wrap: anywhere; }
.id-row { display: flex; align-items: center; gap: 8px; }
.id-value { overflow-wrap: anywhere; }
.danger-zone { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 13px; border: 1px solid var(--danger-line); border-radius: var(--rl); }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 2px 1px 8px; border: 1px solid var(--line2); border-radius: 999px; background: var(--chip); font-size: 11.5px; }
.chip-remove { padding: 0 5px; border: 0; background: none; color: var(--muted); font-size: 11px; }
.tag-menu, .key-menu { position: relative; }
.tag-menu summary, .key-menu summary { padding: 1px 8px; border: 1px dashed var(--line2); border-radius: 999px; color: var(--muted); font-size: 11.5px; list-style: none; cursor: pointer; }
.tag-menu summary::-webkit-details-marker, .key-menu summary::-webkit-details-marker { display: none; }
.tag-menu-panel, .key-menu-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px; min-width: 220px; padding: 6px; border: 1px solid var(--line2); border-radius: var(--rl); background: var(--raise); box-shadow: var(--shadow); }
.tag-offer { justify-content: flex-start; border: 0; background: none; font-weight: 500; }
.api-key { display: block; color: var(--muted); font-size: 12px; }
dialog { padding: 0; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--panel); color: var(--fg); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(5 8 18 / 55%); }
.confirm-body { display: flex; flex-direction: column; gap: 10px; width: min(420px, 90vw); padding: 16px; }
.confirm-title { font-size: 15px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
#accounts tr[data-key][tabindex] { cursor: pointer; }
#accounts tr.selected td { background: var(--sel); }
/* the panel is not modal: on a wide window the page steps aside, and the table stays whole and live beside it */
@media (min-width: 1000px) { body.with-panel .page { padding-right: calc(460px + 16px); } }
@media (max-width: 1000px) { .side-panel { width: 100vw; } }

/* The top-up card (spec 2026-10-07 §3.6). */
.topup-offer { display: flex; }
.topup-offer .topup-open { flex: 1; }
.topup-form { display: flex; flex-direction: column; gap: 8px; }
.topup-form[hidden], .topup-offer[hidden] { display: none; }
.topup-calc { padding: 7px 9px; border-radius: 7px; background: var(--bg); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.topup-amount-row { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.topup-amount { width: 120px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); font-size: 16px; font-weight: 700; }
.topup-error, .topup-failure { color: var(--danger-text); overflow-wrap: anywhere; }
.topup-error:empty { display: none; }
.topup-warning { color: var(--warn-text); }
.topup-forming { color: var(--info-text); }
.topup-result { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.topup-money { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.invoice { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 8px; background: var(--bg); }
.invoice-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.topup-order { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* The domains of an account (spec 2026-10-07 §3.6): the panel's tab and the full-screen window. */
.tab-domains, .domains-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.domains-tools { display: flex; align-items: center; gap: 8px; }
.domains-filter { flex: 1; min-width: 0; }
.domains-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.domains-scroll { overflow: auto; }
table.domains { width: 100%; border-collapse: collapse; background: none; }
table.domains th { position: sticky; top: 0; z-index: 1; padding: 6px 4px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
table.domains td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.domains button.sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
table.domains tr.highlight td { background: var(--sel); }
.domain-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.domains-list.compact .note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.domains-list.full td.note { max-width: 24rem; white-space: normal; }
table.domains td.ns, table.domains td.expiry { color: var(--muted); white-space: nowrap; }
.note-text { overflow-wrap: anywhere; }
.note-field { flex: 1; min-width: 160px; }
.note-error, .error-text { color: var(--danger-text); }
.wide-dialog { width: min(1000px, 94vw); max-height: 88vh; }
.dialog-body { display: flex; flex-direction: column; gap: 10px; max-height: 88vh; padding: 14px 16px 16px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h2 { font-size: 16px; }
.domains-list.full .domains-scroll { max-height: calc(88vh - 120px); }

/* The agent (spec 2026-10-07 §3.7): its panel, the question cards, an account's checks. */
.agent-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.agent-head-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.agent-title { font-size: 15px; }
.agent-bridge { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.agent-bridge.bridge-up { color: var(--ok-text); }
.agent-bridge.bridge-down { color: var(--danger-text); }
.bridge-reason { display: block; color: var(--muted); }
.agent-sessions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.pill { gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 500; }
.pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.pill-title { overflow: hidden; text-overflow: ellipsis; }
.pill-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.pill-dot.run { background: var(--info); }
.pill-dot.ask { background: var(--warn); }
.pill-dot.fail { background: var(--danger); }
.agent-log-wrap { flex: 1; overflow: auto; padding: 14px; }
.agent-log { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.agent-log .say { max-width: 92%; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-log .say.op { align-self: flex-end; max-width: 80%; padding: 8px 11px; border: 1px solid var(--line2); border-radius: 12px 12px 3px 12px; background: var(--raise); }
.agent-log .say.error, .agent-log .turn.error { color: var(--danger-text); }
.agent-log .decided, .agent-log .turn, .agent-log .notice { color: var(--muted); font-size: 11.5px; }
.tool-toggle { justify-content: flex-start; width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); font-weight: 500; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.tool-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.agent-log .out { max-height: 240px; margin: 4px 0 0; padding: 6px 8px; overflow: auto; border-radius: 7px; background: var(--bg); font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-compose { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.agent-input { width: 100%; min-height: 58px; resize: vertical; border-radius: var(--rl); }
.agent-buttons { display: flex; align-items: center; gap: 8px; }
.approval { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--warn-line); border-radius: var(--rl); background: linear-gradient(180deg, var(--warn-soft), transparent); }
.approval-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.approval-title { font-weight: 600; }
.approval-command { margin: 0; padding: 7px 8px; border: 1px solid var(--line2); border-radius: 7px; background: var(--bg); font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.approval-warning { color: var(--warn-text); font-size: 12px; }
.approval-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tab-checks { display: flex; flex-direction: column; gap: 12px; }
.check-history { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.check-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.check-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* The search (spec 2026-10-07 §3.8) and «+ Акаунт» (§3.10). */
.palette { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 9px; background: var(--input); color: var(--muted); }
.palette:focus-within { border-color: var(--accent); }
.palette-input { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: none; }
.palette-input:focus-visible { outline: none; }
.palette-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; max-height: 420px; margin: 0; padding: 4px 0; overflow: auto; border: 1px solid var(--line2); border-radius: var(--rp); background: var(--panel); box-shadow: var(--shadow); list-style: none; }
.palette-list[hidden] { display: none; }
.palette-group { padding: 7px 13px 3px; color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.palette-option { display: flex; align-items: center; gap: 9px; padding: 7px 13px; color: var(--fg); cursor: pointer; }
.palette-option.active { background: var(--sel); box-shadow: inset 2px 0 0 var(--accent); }
.palette-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-option .sub { margin-left: auto; white-space: nowrap; }
.palette-note { padding: 7px 13px; color: var(--muted); }
.palette-note.error { color: var(--danger-text); }
mark { border-radius: 3px; background: var(--accent-soft); color: var(--fg); }
.add-account-form { display: flex; flex-direction: column; gap: 12px; width: min(440px, 90vw); padding: 16px; }
.add-account-form h2 { font-size: 15px; }
.add-account-form .seg { align-self: flex-start; }
.add-account-form .seg-item[aria-checked="true"] { background: var(--raise); color: var(--fg); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field[hidden] { display: none; }
.field-label { color: var(--muted); font-size: 12px; }
.form-error { color: var(--danger-text); overflow-wrap: anywhere; }
.form-error:empty { display: none; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* «Купити домени» (spec 2026-10-08 §3.2): the list, then the plan. */
.buy-form, .buy-plan { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.buy-form textarea { width: 100%; min-height: 12rem; resize: vertical; font-family: var(--mono); font-size: 12px; }
.buy-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.buy-chip { padding: 2px 10px; }
.buy-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.buy-summary { font-weight: 600; }
.buy-changed { padding: 8px 10px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn-text); }
.buy-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; }
.buy-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.buy-lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.buy-lines li { display: flex; justify-content: space-between; gap: 8px; }
.buy-total { font-variant-numeric: tabular-nums; }
.buy-left h3 { font-size: 13px; }
.buy-left-list, .buy-skipped-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: 1.2em; }
.buy-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drawer-buy { margin-left: auto; }
/* «Покупки» (spec 2026-10-08 §3.3): plans, purchases, the strip of steps. */
.purchases-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; overflow: auto; }
.plan { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rl); background: var(--raise); }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.plan-head .plan-stop, .plan-head .plan-toggle { margin-left: auto; }
.purchase { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.purchase-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.step { padding: 1px 8px; border: 1px solid var(--line2); border-radius: 999px; color: var(--faint); font-size: 11.5px; }
.step-done { border-color: var(--ok); color: var(--ok-text); }
.step-now { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.purchase-stop { color: var(--danger-text); overflow-wrap: anywhere; }
.copy-status { align-self: flex-start; font-family: var(--mono); }
/* A question a purchase asks (spec 2026-10-08 §3.3): its words, its answers, the evidence as files. */
.dot-ask { background: var(--warn); }
.question { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--warn-line); border-radius: var(--r); background: var(--warn-soft); }
.question-text { overflow-wrap: anywhere; }
.question-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.question-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.copy-evidence { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; white-space: normal; }
.question-cli { overflow-wrap: anywhere; }
.question-answered, .question-stale { color: var(--muted); overflow-wrap: anywhere; }
.buy-agent-row, .plan-agent-row { display: inline-flex; align-items: center; gap: 6px; }
.agent-line { color: var(--info-text); overflow-wrap: anywhere; }
/* The sign-in page (spec 2026-10-12 dashboard-login §3.8) */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand h1 { font-size: 16px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form h2 { font-size: 15px; }
.login-form[hidden], .login-note[hidden], .field[hidden] { display: none; }
.login-note { color: var(--muted); overflow-wrap: anywhere; }
/* The login button and «Користувачі» (spec 2026-10-12 dashboard-login §3.8) */
.user-toggle[hidden] { display: none; }
.user-login { font-weight: 600; }
.users-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.users-head { display: flex; align-items: center; gap: 12px; }
.users-head h2 { font-size: 15px; margin-right: auto; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.users-actions { display: flex; gap: 6px; justify-content: flex-end; }
.users-target { overflow-wrap: anywhere; }
.users-new { align-self: flex-start; margin-bottom: 8px; }
.users-tab-users[aria-selected="true"], .users-tab-audit[aria-selected="true"] { background: var(--raise); color: var(--fg); font-weight: 600; }