/* Sonar admin — design tokens + shell.
No framework, no build step: one stylesheet, custom properties for theming,
light/dark driven by [data-theme] on (system preference resolved in JS). */
:root {
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
"Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--sidebar-w: 248px;
--topbar-h: 60px;
--accent: #2b8fef;
--accent-fg: #ffffff;
--accent-soft: rgba(43, 143, 239, .12);
--ok: #16a34a;
--ok-soft: rgba(22, 163, 74, .13);
--warn: #d97706;
--warn-soft: rgba(217, 119, 6, .13);
--danger: #dc2626;
--danger-soft: rgba(220, 38, 38, .13);
--muted-badge: rgba(120, 130, 145, .16);
--ease: cubic-bezier(.2, .7, .3, 1);
}
:root[data-theme="light"] {
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #fbfcfd;
--sidebar-bg: #ffffff;
--text: #10151c;
--text-muted: #66707e;
--text-faint: #939cab;
--border: #e4e8ee;
--border-strong: #d2d8e0;
--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
--shadow-lg: 0 8px 32px rgba(16, 24, 40, .14);
--hover: rgba(16, 24, 40, .035);
}
:root[data-theme="dark"] {
--bg: #0e1116;
--surface: #171b22;
--surface-2: #1c212a;
--sidebar-bg: #12161c;
--text: #e8ecf2;
--text-muted: #96a0b0;
--text-faint: #6b7585;
--border: #262c36;
--border-strong: #333b47;
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
--hover: rgba(255, 255, 255, .04);
--accent: #4da3f5;
--accent-soft: rgba(77, 163, 245, .16);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-w);
flex: 0 0 var(--sidebar-w);
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
inset: 0 auto 0 0;
z-index: 40;
transition: transform .22s var(--ease);
}
.brand {
height: var(--topbar-h);
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
border-bottom: 1px solid var(--border);
flex: 0 0 auto;
}
/* The Sonar mark: source dot plus two arcs — the returning signal.
Drawn in the background rather than set as text, so the sidebar, the login
page and the legal pages all show the same thing. Deliberately NOT a
violet gradient: that reads as "another AI wrapper", and this product is
meant to look like an instrument (docs/brand/BRAND.md §7). */
.brand-mark {
width: 28px; height: 28px; border-radius: 8px;
background-color: #0B1220;
background-image: url("data:image/svg+xml,");
background-size: 100% 100%;
font-size: 0; /* legacy "LM" text must not show through */
flex: 0 0 auto;
}
.brand-name { font-weight: 650; letter-spacing: -.02em; font-size: 15px; }
.nav { padding: 12px 10px; overflow-y: auto; flex: 1 1 auto; }
.nav-group-label {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-faint); padding: 14px 10px 6px; font-weight: 600;
}
.nav-item {
display: flex; align-items: center; gap: 11px;
padding: 9px 10px; border-radius: var(--radius-sm);
color: var(--text-muted); font-weight: 500;
cursor: pointer; user-select: none;
transition: background .12s var(--ease), color .12s var(--ease);
}
.nav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-item .count {
margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
background: var(--muted-badge); color: var(--text-muted);
padding: 1px 7px; border-radius: 99px; font-weight: 600;
}
.nav-item.active .count { background: var(--accent); color: var(--accent-fg); }
.sidebar-foot {
padding: 12px; border-top: 1px solid var(--border);
display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.avatar {
width: 30px; height: 30px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent);
display: grid; place-items: center; font-weight: 650; font-size: 12px;
flex: 0 0 auto;
}
.who { min-width: 0; }
.who-name { font-weight: 600; font-size: 13px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.who-role { font-size: 11px; color: var(--text-faint); }
.main { flex: 1 1 auto; margin-left: var(--sidebar-w); min-width: 0; }
.topbar {
height: var(--topbar-h);
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 12px;
padding: 0 22px;
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--border);
}
.topbar h1 { flex: 1 1 auto; }
.topbar-sub { color: var(--text-faint); font-size: 12px; font-weight: 400; }
.content { padding: 22px; max-width: 1280px; }
/* ---------- controls ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 34px; padding: 0 13px;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text);
font: inherit; font-size: 13px; font-weight: 550;
cursor: pointer; white-space: nowrap;
transition: background .12s var(--ease), border-color .12s var(--ease),
opacity .12s var(--ease);
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-danger { color: var(--danger); }
.btn-ok { color: var(--ok); }
/* Any explicit `display` in a class beats the browser's own [hidden] rule, so
`el.hidden = true` silently does nothing on a .btn without this. */
[hidden] { display: none !important; }
/* A filter that is currently applied. Without an obvious on-state, a filter
left on from last visit reads as "there is nothing here". */
.btn.on { background: var(--accent-soft); color: var(--accent);
border-color: var(--accent); }
.input, .select, .textarea {
height: 34px; padding: 0 11px; width: 100%;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text);
font: inherit; font-size: 13px;
transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 76px; }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.seg {
display: inline-flex; border: 1px solid var(--border-strong);
border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
}
.seg button {
border: 0; background: transparent; color: var(--text-muted);
font: inherit; font-size: 12px; font-weight: 550;
padding: 6px 11px; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active { background: var(--accent-soft); color: var(--accent); }
/* The public pages switch language by navigating, so their switcher is links
rather than buttons — a crawler has to be able to follow it. Same look. */
.seg a { display: inline-flex; align-items: center; padding: 5px 11px;
font-size: 12px; font-weight: 600; color: var(--text-faint);
text-decoration: none; line-height: 1.2; }
.seg a:hover { color: var(--text); text-decoration: none; background: var(--hover); }
.seg a + a { border-left: 1px solid var(--border); }
.seg a.active { background: var(--accent-soft); color: var(--accent); }
/* Page tabs sit next to the title: sub-sections of one object, not separate
destinations. */
.page-tabs button { padding: 7px 13px; font-size: 13px; }
.tab-count { font-variant-numeric: tabular-nums; opacity: .65; font-size: 11px; }
/* ---------- surfaces ---------- */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-head {
display: flex; align-items: center; gap: 10px;
padding: 13px 16px; border-bottom: 1px solid var(--border);
}
/* Bulk-action bars must survive scrolling a long list — otherwise you select
rows, scroll, and the buttons are gone. */
.card-head.sticky {
position: sticky; top: var(--topbar-h); z-index: 20;
background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
}
.card-head h2 { flex: 1 1 auto; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }
/* Filter bar above a table. It is a card-head, so stickiness and padding come
for free; what it adds is wrapping and inputs that size to their content
instead of stretching across the row the way form fields do. */
.filters { flex-wrap: wrap; row-gap: 8px; }
.filters .input, .filters .select { width: auto; height: 30px; font-size: 12.5px; }
.filters .input { flex: 1 1 190px; min-width: 140px; max-width: 280px; }
.filters .select { min-width: 132px; }
.grid { display: grid; gap: 14px; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.stat { padding: 15px 16px; }
.stat-label {
font-size: 12px; color: var(--text-muted); font-weight: 550;
display: flex; align-items: center; gap: 6px;
}
.stat-value {
font-size: 26px; font-weight: 660; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1.15;
}
.stat-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
text-align: left; font-weight: 600; font-size: 11px;
text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint);
padding: 10px 14px; border-bottom: 1px solid var(--border);
white-space: nowrap; background: var(--surface-2);
position: sticky; top: 0;
}
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--text); }
.tbl th.sorted { color: var(--accent); }
.tbl td {
padding: 11px 14px; border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .actions { text-align: right; white-space: nowrap; }
.cell-title { font-weight: 550; }
.cell-sub { color: var(--text-faint); font-size: 12px; }
.truncate { max-width: 420px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
/* Inside a table the cell must be allowed to shrink, otherwise the text
column pushes the whole row into horizontal scroll. max-width:0 + a
percentage width is the standard trick for an ellipsised table cell. */
.tbl td.truncate { max-width: 0; width: 38%; }
/* Message previews: show a few lines instead of one ellipsised one — a
verdict is unreviewable when you can only see the first six words. */
.clamp {
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
white-space: normal; word-break: break-word;
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.tbl td.cell-text { max-width: 0; width: 46%; }
.tbl td.cell-reason { max-width: 0; width: 22%; }
/* The source name needs room: squeezed into ~90px it wrapped to three lines
and pushed the rest of the row into horizontal scroll. */
.tbl td.cell-source, .tbl th.col-source { min-width: 230px; }
/* Niche display names are long ("Инференс для агентств и B2B (объём)"), and
unconstrained this single cell stretched the table ~800px past the viewport:
traffic, signal and leads were rendered but off the right edge, so the page
looked like it had lost its statistics. Wrap the chips instead. */
.tbl td.cell-niches { max-width: 190px; }
.tbl td.cell-niches .btn {
height: auto; min-height: 26px; padding: 3px 6px;
white-space: normal; text-align: left; justify-content: flex-start;
}
.tbl td.cell-niches .badge { white-space: normal; }
.tbl td.cell-source .cell-title { white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; max-width: 230px; }
/* ---------- badges / bars ---------- */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: 99px;
font-size: 11.5px; font-weight: 600; white-space: nowrap;
background: var(--muted-badge); color: var(--text-muted);
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* display:block matters — a bare inline ignores height and the bar
collapses to nothing. */
.bar { display: block; height: 6px; border-radius: 99px;
background: var(--muted-badge); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.funnel-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.funnel-step + .funnel-step { border-top: 1px dashed var(--border); }
.funnel-name { width: 190px; flex: 0 0 auto; font-weight: 550; }
.funnel-bar { flex: 1 1 auto; }
.funnel-val { width: 110px; text-align: right; flex: 0 0 auto;
font-variant-numeric: tabular-nums; font-weight: 600; }
.funnel-pct { color: var(--text-faint); font-weight: 500; font-size: 12px; }
/* mini chart */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 68px; }
.spark-col { flex: 1 1 0; display: flex; flex-direction: column;
justify-content: flex-end; gap: 2px; min-width: 0; }
.spark-col i { display: block; border-radius: 2px 2px 0 0; background: var(--accent-soft); }
.spark-col i.leads { background: var(--accent); }
.spark-labels { display: flex; justify-content: space-between;
font-size: 11px; color: var(--text-faint); margin-top: 6px; }
/* ---------- states ---------- */
.empty { text-align: center; padding: 46px 22px; }
.empty-icon {
width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px;
background: var(--accent-soft); color: var(--accent);
display: grid; place-items: center;
}
.empty-icon svg { width: 22px; height: 22px; }
.empty h3 { margin-bottom: 5px; }
.empty p { color: var(--text-muted); margin: 0 auto 16px; max-width: 420px; }
.skeleton {
background: linear-gradient(90deg, var(--hover) 25%,
color-mix(in srgb, var(--hover) 40%, transparent) 50%, var(--hover) 75%);
background-size: 200% 100%; animation: sk 1.3s infinite;
border-radius: var(--radius-sm); height: 14px;
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.banner {
display: flex; gap: 11px; align-items: flex-start;
padding: 13px 15px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface);
margin-bottom: 16px;
}
.banner.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
background: var(--warn-soft); }
.banner-title { font-weight: 600; margin-bottom: 2px; }
.banner-text { color: var(--text-muted); font-size: 13px; }
.banner code, code.inline {
font-family: var(--mono); font-size: 12px; background: var(--muted-badge);
padding: 1px 6px; border-radius: 4px; word-break: break-all;
}
/* ---------- overlays ---------- */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(10, 14, 20, .45);
backdrop-filter: blur(2px); z-index: 60;
display: grid; place-items: center; padding: 20px;
animation: fade .14s var(--ease);
}
/* Only the body scrolls. With the whole dialog scrolling, a long one (a niche
config, a lead card) pushed its own action buttons below the fold — the
controls were there, but you had to scroll past the entire config to reach
them, and the title scrolled away with them. */
.modal {
background: var(--surface); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); width: min(560px, 100%);
max-height: 88vh; overflow: hidden; animation: pop .16s var(--ease);
display: flex; flex-direction: column;
}
.modal-head { display: flex; align-items: center; padding: 16px 18px;
border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.modal-head h2 { flex: 1 1 auto; }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px;
overflow: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end;
gap: 8px; padding: 14px 18px; flex: 0 0 auto;
border-top: 1px solid var(--border); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 80;
display: flex; flex-direction: column; gap: 9px; }
.toast {
display: flex; align-items: center; gap: 9px;
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
padding: 11px 15px; font-size: 13px; max-width: 380px;
animation: slide .18s var(--ease);
}
.toast.ok { border-left-color: var(--ok); }
/* Errors persist until dismissed, so they get room to be read and a way out. */
.toast.err {
border-left-color: var(--danger);
align-items: flex-start;
max-width: 460px;
white-space: pre-wrap;
cursor: pointer;
}
.toast > span { flex: 1 1 auto; min-width: 0; }
.toast-x {
flex: 0 0 auto; width: 22px; height: 22px; margin: -2px -6px 0 0;
display: grid; place-items: center; padding: 0;
border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--text-faint); cursor: pointer;
}
.toast-x:hover { background: var(--hover); color: var(--text); }
.toast-x svg { width: 14px; height: 14px; }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } }
/* ---------- misc ---------- */
.row { display: flex; align-items: center; gap: 9px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--mono); font-size: 12px; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.quote {
border-left: 3px solid var(--border-strong); padding: 2px 0 2px 12px;
color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 7px 14px; font-size: 13px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
/* A signal bar stretched across a dialog reads as a divider, not a value. */
.kv dd .bar { max-width: 220px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--muted-badge); padding: 3px 9px; border-radius: 99px;
font-size: 12px; }
.menu-toggle { display: none; }
.scrim { display: none; }
/* ---------- setup conversation ----------
The first screen a tenant ever sees. It looks like a chat because it IS one
(app/onboarding.py) — the same agent answers in the bot. Nothing on screen
but the question being asked and the ways to answer it. */
.chat-page { display: flex; flex-direction: column; min-height: 100%; }
.chat { display: flex; flex-direction: column; gap: 9px; padding-bottom: 8px; }
.msg {
max-width: min(86%, 560px); padding: 10px 13px; border-radius: 16px;
font-size: 14px; line-height: 1.45; white-space: pre-wrap;
word-break: break-word; animation: msg-in .18s var(--ease);
}
.msg.bot { align-self: flex-start; border-bottom-left-radius: 5px;
background: var(--surface); border: 1px solid var(--border); }
.msg.me { align-self: flex-end; border-bottom-right-radius: 5px;
background: var(--accent); color: var(--accent-fg); }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } }
.msg.typing { display: flex; gap: 4px; padding: 14px 15px; }
.msg.typing i {
width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint);
animation: typing 1s infinite ease-in-out;
}
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { opacity: .25; transform: translateY(-3px); } }
.chat-opts { display: flex; flex-direction: column; align-items: flex-start;
gap: 7px; margin: 6px 0 2px; }
/* Full-width taps beat a wrapped row of chips on a phone: the options are
whole chat titles, and a half-visible one is a mis-tap. */
.chat-opts .chip-btn {
max-width: 100%; padding: 9px 14px; border-radius: 13px;
font-size: 13.5px; text-align: left; background: var(--surface);
border-color: var(--border-strong);
}
.chat-bar {
position: sticky; bottom: 0; z-index: 5;
display: flex; gap: 8px; padding: 10px 0 6px;
background: linear-gradient(180deg, transparent, var(--bg) 22%);
}
.chat-bar .input { flex: 1 1 auto; }
.chat-foot { padding: 2px 0 4px; font-size: 12px; color: var(--text-faint); }
.chat-foot a { color: var(--text-muted); }
.chat-foot .dot-sep { margin: 0 6px; }
/* Clears the fixed tab bar, which the sticky bar would otherwise hide under. */
html.in-telegram .chat-bar { bottom: calc(66px + env(safe-area-inset-bottom)); }
/* setup wizard */
.wiz-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
/* A button, not a label: the steps stay navigable after setup is complete —
the next niche and the next batch of groups are the same three steps. */
.wiz-step {
display: flex; align-items: center; gap: 9px; flex: 1 1 190px;
padding: 11px 14px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface);
color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: 550;
text-align: left; cursor: pointer;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.wiz-step:hover { border-color: var(--border-strong); color: var(--text); }
.wiz-step.active { border-color: var(--accent); color: var(--text);
background: linear-gradient(180deg, var(--accent-soft), transparent); }
.wiz-dot {
width: 23px; height: 23px; border-radius: 50%; flex: 0 0 auto;
display: grid; place-items: center; font-size: 12px; font-weight: 700;
background: var(--muted-badge); color: var(--text-muted);
}
.wiz-dot.now { background: var(--accent); color: var(--accent-fg); }
.wiz-dot.done { background: var(--ok-soft); color: var(--ok); }
.chip-btn { border: 1px solid var(--border-strong); cursor: pointer;
font: inherit; font-size: 12px; }
.chip-btn:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 1024px) {
.sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
.sidebar.open { transform: none; }
.main { margin-left: 0; }
.menu-toggle { display: inline-flex; }
.scrim.show { display: block; position: fixed; inset: 0;
background: rgba(10, 14, 20, .4); z-index: 35; }
.content { padding: 16px; }
.topbar { padding: 0 14px; }
.kv { grid-template-columns: 1fr; gap: 2px 0; }
.kv dd { margin-bottom: 8px; }
}
/* ---------- phones ----------
The topbar carries page actions (filters, segmented controls, language,
theme) which cannot fit one row on a phone: it wraps into two, and the
content starts below it instead of under it. */
@media (max-width: 760px) {
:root { --topbar-h: auto; }
.topbar {
position: static; flex-wrap: wrap; align-items: center;
gap: 8px; padding: 10px 14px; height: auto;
}
.topbar h1 { flex: 1 1 100%; font-size: 18px; order: -1; }
.topbar-sub { display: block; margin-top: 2px; }
.menu-toggle { position: absolute; top: 10px; right: 14px; }
.topbar .seg, .topbar .btn, .topbar .select { font-size: 12px; }
.topbar .select { min-width: 0 !important; max-width: 46vw; }
.card-head { flex-wrap: wrap; }
.card-head.sticky { position: static; }
/* Two selects per row, search on its own — anything narrower turns the
status counts into an ellipsis. */
.filters .input { flex: 1 1 100%; max-width: none; }
.filters .select { flex: 1 1 calc(50% - 5px); min-width: 0; }
.filters .spacer { display: none; }
.grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-value { font-size: 21px; }
.content { padding: 12px; }
.modal { max-height: 92vh; }
.modal-body { padding: 14px; }
.modal-foot { flex-wrap: wrap; }
.modal-foot .btn { flex: 1 1 auto; }
.toasts { left: 12px; right: 12px; bottom: 12px; }
.toast { max-width: none; }
/* Tables become cards: six columns squeezed into 360px is unreadable,
and horizontal scrolling hides exactly the actions people need. */
.tbl.cards, .tbl.cards thead, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td {
display: block; width: 100%;
}
.tbl.cards thead { display: none; }
.tbl.cards tr {
border: 1px solid var(--border); border-radius: var(--radius);
padding: 10px 12px; margin-bottom: 10px; background: var(--surface);
}
.tbl.cards td { border: 0; padding: 3px 0; max-width: none !important;
width: auto !important; }
.tbl.cards td.truncate, .tbl.cards td.cell-text, .tbl.cards td.cell-reason {
white-space: normal; overflow: visible;
}
.tbl.cards td[data-label]::before {
content: attr(data-label) " ";
color: var(--text-faint); font-size: 11px; text-transform: uppercase;
letter-spacing: .04em; margin-right: 6px;
}
.tbl.cards td.actions { text-align: left; padding-top: 8px; }
.tbl.cards td.num { text-align: left; }
.wiz-step { flex: 1 1 100%; }
}
/* ---------- Telegram Mini App ----------
Inside Telegram the client draws its own header (title, back, close) and the
app is a phone-shaped viewport, so the desktop chrome is wrong twice over: a
second header under Telegram's own, and a slide-out sidebar where a native
app has a tab bar. Here the shell collapses to: content + bottom tabs, with
language/theme moved into the profile page where settings belong. */
html.in-telegram .sidebar,
html.in-telegram .menu-toggle,
html.in-telegram .topbar #lang-seg,
html.in-telegram .topbar #theme-btn { display: none !important; }
html.in-telegram .main { margin-left: 0; }
html.in-telegram .topbar {
position: static; height: auto; flex-wrap: wrap;
padding: 12px 14px 4px; gap: 8px;
background: transparent; backdrop-filter: none; border-bottom: 0;
}
html.in-telegram .topbar h1 { flex: 1 1 100%; font-size: 19px; }
html.in-telegram .topbar-sub { display: block; margin-top: 2px; }
html.in-telegram .content {
padding: 10px 12px calc(74px + env(safe-area-inset-bottom));
}
/* Telegram's own scroll gesture fights a sticky header; nothing sticks here. */
html.in-telegram .card-head.sticky { position: static; }
.tabbar { display: none; }
html.in-telegram .tabbar {
display: flex;
position: fixed; inset: auto 0 0 0; z-index: 45;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--surface) 94%, transparent);
backdrop-filter: saturate(1.4) blur(10px);
border-top: 1px solid var(--border);
}
.tabbar a {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 5px 2px; border-radius: var(--radius-sm);
color: var(--text-faint); font-size: 10.5px; font-weight: 600;
text-decoration: none; letter-spacing: -.01em;
}
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.active { color: var(--accent); }
.tabbar a:active { background: var(--hover); }
.tabbar .tab-dot {
position: absolute; transform: translate(11px, -3px);
min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
background: var(--accent); color: var(--accent-fg);
font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
/* profile / settings page */
.profile-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 0; border-bottom: 1px solid var(--border);
}
.profile-row:last-child { border-bottom: 0; }
.profile-row .spacer { flex: 1 1 auto; }
.profile-label { font-weight: 600; }
.profile-hint { color: var(--text-faint); font-size: 12px; margin-top: 1px; }
.avatar-lg {
width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
display: grid; place-items: center; font-weight: 700; font-size: 17px;
background: var(--accent-soft); color: var(--accent);
}