/* Bootstrap-stage styling: enough to make the auth screens and the dashboard
shell look intentional. The real design system replaces this later.
Palette inherited from the main site's brand tokens (_variables.scss):
purple #5632A0, dark #12141D, gray #5A5A5A, gray-lighter #FAFAFB,
blue-lightest #E5E6EE, red #FF1E37, green #00C48C, gold #FFC448,
orange-dark #FF9E2C, darker-dark #080A10, dark-gray #272930.
Dark theme is derived, not given: the brand purple is unreadable on a dark
surface (2.1:1), so dark uses the same hue lightened — #A98CE8 (7.2:1) with
brand darker-purple #1B0F4A as its ink. Status colours that are only ever
fills keep their brand value; the ones used as TEXT are darkened in light
(#D31029, #00795A, #A8620A) so they clear AA.
Theme resolution:
- — an explicit, stored choice (server-rendered)
- no data-theme at all — nothing chosen yet, follow the OS via
prefers-color-scheme (first visit only) */
:root,
:root[data-theme='light'] {
--bg: #fafafb;
--fg: #12141d;
--muted: #5a5a5a;
--card: #ffffff;
--line: #e5e6ee;
--field: #ffffff;
--accent: #5632a0;
--accent-fg: #ffffff;
--danger: #d31029;
--danger-bg: #ffe1e4;
--ok: #00795a;
--ok-bg: #e1fff3;
--warn: #a8620a;
--warn-bg: #fff3d9;
--shadow: 0 12px 40px rgb(18 20 29 / 8%);
--logo: #5632a0; /* brand mark: accent in light… */
--toast-success-bg: linear-gradient(135deg, #effbf4 0%, #d3f3df 50%, #b7e9cb 100%);
--toast-success-border: #9eddb8;
--toast-success-text: #0b4b2a;
--toast-success-accent: #178f57;
--toast-success-shadow: rgb(23 143 87 / 16%);
--toast-warning-bg: linear-gradient(135deg, #fffbee 0%, #faecc2 50%, #f2daa0 100%);
--toast-warning-border: #dfc578;
--toast-warning-text: #5c4506;
--toast-warning-accent: #b38b13;
--toast-warning-shadow: rgb(179 139 19 / 15%);
--toast-error-bg: linear-gradient(135deg, #fff4f5 0%, #ffdadd 50%, #ffc1c5 100%);
--toast-error-border: #f3a8ad;
--toast-error-text: #721b21;
--toast-error-accent: #d9363e;
--toast-error-shadow: rgb(217 54 62 / 15%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #080a10;
--fg: #fafafb;
--muted: #899db6;
--card: #12141d;
--line: #272930;
--field: #0b0e15;
--accent: #a98ce8;
--accent-fg: #1b0f4a;
--danger: #ff6b7d;
--danger-bg: #2a1418;
--ok: #3dd598;
--ok-bg: #0d2a20;
--warn: #ffc448;
--warn-bg: #2a2110;
--shadow: 0 12px 40px rgb(0 0 0 / 55%);
--logo: #ffffff; /* …plain white on dark, not the lightened accent */
--toast-success-bg: linear-gradient(135deg, #b7f7d1 0%, #72e5a5 48%, #43c985 100%);
--toast-success-border: #87e9b1;
--toast-success-text: #06351d;
--toast-success-accent: #08743d;
--toast-success-shadow: rgb(47 209 121 / 24%);
--toast-warning-bg: linear-gradient(135deg, #fff6ca 0%, #f6d978 50%, #e8bb4d 100%);
--toast-warning-border: #f3d574;
--toast-warning-text: #3d2e05;
--toast-warning-accent: #9b7000;
--toast-warning-shadow: rgb(249 235 178 / 22%);
--toast-error-bg: linear-gradient(135deg, #ffc2c5 0%, #ff8f95 48%, #ef646c 100%);
--toast-error-border: #ff9da2;
--toast-error-text: #4a0b0f;
--toast-error-accent: #a51f27;
--toast-error-shadow: rgb(239 68 68 / 26%);
}
}
:root[data-theme='dark'] {
--bg: #080a10;
--fg: #fafafb;
--muted: #899db6;
--card: #12141d;
--line: #272930;
--field: #0b0e15;
--accent: #a98ce8;
--accent-fg: #1b0f4a;
--danger: #ff6b7d;
--danger-bg: #2a1418;
--ok: #3dd598;
--ok-bg: #0d2a20;
--warn: #ffc448;
--warn-bg: #2a2110;
--shadow: 0 12px 40px rgb(0 0 0 / 55%);
--logo: #ffffff; /* …plain white on dark, not the lightened accent */
--toast-success-bg: linear-gradient(135deg, #b7f7d1 0%, #72e5a5 48%, #43c985 100%);
--toast-success-border: #87e9b1;
--toast-success-text: #06351d;
--toast-success-accent: #08743d;
--toast-success-shadow: rgb(47 209 121 / 24%);
--toast-warning-bg: linear-gradient(135deg, #fff6ca 0%, #f6d978 50%, #e8bb4d 100%);
--toast-warning-border: #f3d574;
--toast-warning-text: #3d2e05;
--toast-warning-accent: #9b7000;
--toast-warning-shadow: rgb(249 235 178 / 22%);
--toast-error-bg: linear-gradient(135deg, #ffc2c5 0%, #ff8f95 48%, #ef646c 100%);
--toast-error-border: #ff9da2;
--toast-error-text: #4a0b0f;
--toast-error-accent: #a51f27;
--toast-error-shadow: rgb(239 68 68 / 26%);
}
/* ---------------------------------------------------------- scrollbars */
/* THE SCROLLBAR IS THE PROJECT'S, AND QUIET UNTIL SOMETHING MOVES. Native bars
come in the OS's grey and, with a mouse plugged in, never leave — the
owner's screenshot had a fat grey rail parked under the kanban. This is
said ONCE for every scroller, the document included, so no section ever
dresses its own: the rail is invisible, the thumb is drawn from the tokens,
and it shows only while its scroller is moving — `is-scrolling`, worn for a
moment after the last scroll event (public/js/app.js). The rail keeps its
width shown or hidden, so nothing jumps sideways when the thumb appears.
Two dialects, one look. Chrome and Firefox speak the standard properties
(and Chrome IGNORES the -webkit- pseudo-elements once it sees them — the
two must not be mixed for one element); Safari still speaks only the
pseudo-elements. `@supports` picks the dialect, the tokens keep them equal.
`.tabs` and `.rail` hide their bars entirely and stay that way — a class
outranks `*`. */
:root,
:root[data-theme='light'] {
--scroll-thumb: #cdd0dc;
/* The four label tones the palette does not already own (violet, green,
amber, red ride on --accent, --ok, --warn, --danger). Chip TEXT at 11.5px
over a 10% tint of itself: the dark values are lifted the way --accent
is, because #2f6fd0 on #12141d does not reach 4.5:1. */
--tone-blue: #2f6fd0;
--tone-teal: #0d8a8a;
--tone-pink: #b33a7a;
--tone-slate: #5a6478;
}
:root[data-theme='dark'] {
--scroll-thumb: #363a48;
--tone-blue: #7fa9f0;
--tone-teal: #4fc4c4;
--tone-pink: #e07ab4;
--tone-slate: #9aa4b8;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--scroll-thumb: #363a48;
--tone-blue: #7fa9f0;
--tone-teal: #4fc4c4;
--tone-pink: #e07ab4;
--tone-slate: #9aa4b8;
}
}
@supports (scrollbar-color: auto) {
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.is-scrolling { scrollbar-color: var(--scroll-thumb) transparent; }
}
@supports not (scrollbar-color: auto) {
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background: transparent;
border: 3px solid transparent; /* the rail's breathing room, on the thumb */
border-radius: 999px;
background-clip: padding-box;
}
.is-scrolling::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); }
}
/* --------------------------------------------------------- transitions */
/* Section changes, the language switch and light ↔ dark all run through the
View Transitions API (see public/js/app.js). The default is already a
crossfade; this only tunes the timing and opts out for reduced motion. */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 260ms;
animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* The outgoing frame sits on top by default, which makes a crossfade look
muddy — let both blend instead. */
::view-transition-old(root) { mix-blend-mode: normal; }
::view-transition-new(root) { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
* { box-sizing: border-box; }
/* THE `hidden` ATTRIBUTE MUST WIN, and without this line it loses to almost
anything. `hidden` is `display: none` in the BROWSER'S stylesheet, and a
browser's rules rank below the page's — so a single class saying
`display: grid` shows an element the markup said to hide, silently and
everywhere.
Four places in this app were already hiding something with the attribute and
styling it with a class: the drop overlay (which greeted every visit to
Матеріали as a wall), the «читаємо назву…» line, the alternative sign-in
block and one card in Профіль → Видалення. One rule answers all four and
every future one — `!important` because the attribute is the last word about
whether a thing is on screen, and nothing further down the file should be
able to argue with it. */
[hidden] { display: none !important; }
html { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 16px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
/* THE BROWSER DOES NOT «HELP» WITH THE SCROLL. Scroll anchoring is the
engine's habit of picking an element in view and moving the window so
that element stays put when content above it changes height. Right for
a news page whose pictures load late; wrong here, where the page is
rebuilt under the reader on purpose: a form's answer swaps `#content`
(new markup inserted before the old, then the old removed), and the
editor on it grows from a textarea into a pane. Chrome anchored on the
OLD content and followed it down as the new one was inserted above —
«Зберегти» on the Documents tab took the window from 403 to 1118 inside
the swap and to 1341 as the editor built, with no script scrolling at
all (measured in Chrome 153, 20.09.2026); with this line, 403 stayed 403.
On `body`, so that no subtree — content, shell, dialogs — can be picked
as an anchor (AGENTS §4.9). */
overflow-anchor: none;
}
a { color: var(--accent); }
/* THE PAGE HEADING. The 26px that stood here drew nowhere: every `h1` in the
app is inside `.page-head` (30px) or `.auth-card` (22px), so the base rule
was a number nobody could see and everybody could believe. It now says what
a page heading is, and `.page-head h1` has nothing left to add. */
h1 { margin: 0 0 6px; font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
/* THE CARD HEADING, DECLARED. It looked settled — `.card-head h2` and
`.empty h2` both said 19px — but neither said a WEIGHT, so every card
heading in the app was rendering at the browser's `bold` = 700. That is the
one weight this system says it never uses, and it was on ten cards. Stating
it here puts all three heading levels on 650 and leaves the two class rules
with nothing to carry but their own margin. */
h2 { margin: 0 0 8px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
/* A SECTION HEADING INSIDE A CARD. Without this rule `h3` took the browser's
1.17em ≈ 18.7px — bigger than the 15px the system says, and close enough to
the 19px card heading to read as a second one. Worse than the size were the
browser MARGINS: inside a grid they do not collapse, they add to the gap, so
16 above + 18 of step + 16 below put fifty pixels of nothing between a
heading and its table. Five screens drew that. Overrides that need another
size (`.modal-head h3`, `.widget-lede h3`, `.prices h3`) are all class-first
and still win. */
h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
/* A CARD HEADING THAT OPENS WITH A GLYPH (`
${icon(…, 18)} Слова
` —
eighteen of them across Білінг, the account's billing tab and three
settings tabs) is a flex row, not a block with an image floating in the
text: the glyph sits on the heading's centre line instead of the baseline,
at 18px rather than 15 so it reads as a mark and not a speck, with 8px of
air before the words (the owner, 16.09.2026 — «мала, не вирівняна, і
відступ замалий», the same three things on every card). `:has(> .icon)`
scopes it to exactly those headings; a plain h3 is untouched. */
h3:has(> .icon:first-child) { display: flex; align-items: center; gap: 8px; }
h3 > .icon:first-child { flex: none; }
.lead, .muted { color: var(--muted); }
.lead { margin: 0 0 22px; }
/* ------------------------------------------------------------- chrome */
.brand {
display: inline-flex;
align-items: center;
color: var(--logo);
line-height: 0;
}
.brand-logo { display: block; width: 100%; height: auto; max-width: 100%; }
/* The product name is a tooltip that follows the cursor (public/js/app.js).
Without JS the element's title attribute does the same job, slower. */
.tip {
position: fixed;
z-index: 300;
padding: 5px 9px;
font-size: 12.5px;
font-weight: 550;
line-height: 1.2;
color: var(--accent-fg);
background: var(--accent);
border-radius: 7px;
box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
pointer-events: none;
opacity: 0;
transform: translateY(3px);
transition: opacity .14s ease, transform .14s ease;
white-space: nowrap;
}
.tip.is-on { opacity: 1; transform: none; }
.tip.tip-wrap { max-width: min(420px, calc(100vw - 16px)); white-space: normal; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
.tip { transition: none; }
}
/* ------------------------------------------------------- app layout */
/* No top bar anywhere: the sidebar is the only chrome, and it holds the brand,
the menu, and — pinned to the bottom — preferences, account and sign out.
SCROLLING: the DOCUMENT scrolls, as on any normal page — that is what gives
the content its elastic overscroll on a trackpad, including on short pages
where an inner scroll container would have nothing to bounce. The sidebar is
taken out of that flow with `position: fixed`, so it stays put while the
right-hand side drags. The grid column keeps the space reserved for it. */
.layout {
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
min-height: 100dvh;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: 18px;
width: 264px;
height: 100dvh;
padding: 18px 14px;
background: var(--card);
border-right: 1px solid var(--line);
/* Rock still: a trackpad drag over the sidebar must not bounce it. Only the
content column on the right is allowed to rubber-band. */
overscroll-behavior: none;
/* Nothing in here is text to take away — it is navigation. A drag that starts
on a menu item used to paint it blue and, on touch, raise the copy bubble
instead of following the link. `-webkit-` is not decoration: Safari still
needs it. */
-webkit-user-select: none;
user-select: none;
}
/* The logo fills the block: .brand is inline-flex (shrink-to-fit), so it has to
be told to take the full width before the SVG's width:100% has anything to
resolve against. 264px sidebar − 2×14px padding − 2×8px here = 220px. */
.side-brand { padding: 6px 8px 2px; }
/* The anchor around the brand adds no box of its own: in the sidebar it is the
same full-width block the bare mark was, in the mobile bar the same
inline-flex — so «became a link» changes what a click does and nothing about
where a pixel sits. */
.side-brand .brand-home { display: block; width: 100%; }
.mobile-bar .brand-home { display: inline-flex; }
.side-brand .brand { display: block; width: 100%; }
.nav {
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto; /* a long menu scrolls; the foot below stays put */
overscroll-behavior: none; /* …but it never bounces past its own ends */
flex: 1;
}
/* Fade only the edges with more navigation beyond them. The brand, tenant
switcher and footer are outside this scrolling mask. */
.sidebar .nav {
--nav-fade-top: 0px;
--nav-fade-bottom: 0px;
mask-image: linear-gradient(to bottom, transparent, #000 var(--nav-fade-top),
#000 calc(100% - var(--nav-fade-bottom)), transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--nav-fade-top),
#000 calc(100% - var(--nav-fade-bottom)), transparent);
}
.sidebar .nav.has-more-above { --nav-fade-top: 20px; }
.sidebar .nav.has-more-below { --nav-fade-bottom: 20px; }
/* Where the portal ends and running it begins — said with space and nothing
else. Neither a rule nor a heading: a line draws a border where there is only
a change of subject, and a caption over three items reads as a category to
choose from. Empty space groups just as well and adds no ink.
The gap on `.nav` is 2px, so this lands at ~16px between the two groups. */
.nav-sep { height: 12px; }
/* THE TWO HALVES OF A STAFF MENU, each behind a heading that folds it (the
owner, 22.09.2026). The heading is a caption, not an item: small, muted,
uppercase, with the same chevron the list folds turn. A client's menu has
one half and no heading at all (views/layout.js). */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-head {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px 4px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
user-select: none;
border-radius: 9px;
}
.nav-group-head:hover { color: var(--fg); }
.nav-group-head .icon { flex: none; opacity: .8; transition: transform .15s ease; }
.nav-group[open] > .nav-group-head .icon { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .nav-group-head .icon { transition: none; } }
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
font-size: 14.5px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
border-radius: 9px;
}
.nav-item:hover { color: var(--fg); background: var(--bg); }
.nav-item.is-active {
color: var(--fg);
background: var(--bg);
font-weight: 600;
}
.nav-item .icon { flex: none; opacity: .9; }
/* The open ring that stands in for a menu icon while its page is on the way
(public/js/app.js). The same 18px box and 1.8 stroke as the icon it
replaces, so nothing on the line moves — only spins. Under reduced motion
the ring stands still: an open ring already reads as «unfinished». */
.nav-spin { animation: nav-spin .9s linear infinite; }
@keyframes nav-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.nav-spin { animation: none; }
}
/* Pinned to the bottom of the sidebar. */
.side-foot { margin-top: auto; padding-top: 12px; }
/* Language and theme, the row directly above the account bar. Pushed apart to
the same edges the bar below uses — the language sits over the profile link,
the theme over sign-out — so the two rows read as one block rather than a
control that happened to land there. */
/* The spotlight: the input on top, the groups under it, each row a door. */
.modal-backdrop:has(.gs-box) .modal { max-width: 560px; }
.gs-box { display: grid; gap: 12px; }
#gs-results { display: grid; gap: 12px; max-height: 48vh; overflow-y: auto; overscroll-behavior: contain; }
.gs-group { display: grid; gap: 2px; }
.gs-group h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gs-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
color: var(--fg);
text-decoration: none;
}
.gs-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.gs-row .icon { flex: none; color: var(--muted); }
.gs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-hint-cell {
margin-left: auto;
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12.5px;
color: var(--muted);
white-space: nowrap;
}
.gs-hint { margin: 0; font-size: 13px; color: var(--muted); }
/* THE TOP TOOLS — search and the bell, the last column of every page-head
row (views/layout.js topTools). Round, wordless, a size up from the
32px .icon-btn the sidebar uses for theme and sign-out: these two are the
page's, not the chrome's, and they are pressed from anywhere. The card
colour under them keeps the glyph readable when a page's own head is
busy behind. The mobile bar draws the same pair at ≤900px and this
cluster steps aside there. */
.top-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.top-tool { width: 40px; height: 40px; background: var(--card); }
.top-bell { position: relative; }
.top-bell.is-active { border-color: var(--accent); color: var(--accent); }
.top-bell .notify-badge { top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--bg); }
.mobile-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.mobile-bell { position: relative; }
.notify-badge {
position: absolute;
top: 1px;
right: 1px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11.5px;
font-weight: 600;
color: var(--accent-fg);
background: var(--accent);
}
/* The feed: one sentence per row, the unread ones tinted until the page's one
verb runs. The icon sits in a quiet ring so five kinds of news scan apart. */
.notify-prefs th[scope="row"] { font-weight: 500; }
.notify-prefs th[scope="row"] .icon { vertical-align: -3px; margin-right: 6px; color: var(--muted); }
.notify-prefs-ch { text-align: center; width: 92px; }
/* The payment-recipients grid (Налаштування → Оплата) wears the matrix's skin
and adds two things: a group line per role, and the address under a name. */
.staff-grid-group th { padding-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.staff-grid th[scope="row"] small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.staff-grid input:disabled { opacity: .35; cursor: not-allowed; }
/* The board's and the card's feed wear the bell-feed skin; the class exists
so the two can drift apart the day one needs to. */
/* The wrapper exists to be SELECTED (hx-select) — the shell's boosted
inheritance story, told in views/tasks.activityFeed. No box of its own. */
.feed-fragment { display: contents; }
.board-feed { margin: 0; }
/* The feed rows carry no icon column — the sentence takes the whole line. */
.board-feed .notify-row { grid-template-columns: minmax(0, 1fr); padding: 10px 2px; }
.notify-card { padding: 6px 0; }
.notify-feed { margin: 0; padding: 0; list-style: none; }
.notify-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 12px 16px;
}
.notify-row + .notify-row { border-top: 1px solid var(--line); }
.notify-row.is-unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notify-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--muted);
background: var(--card);
}
.notify-row.is-unread .notify-icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.notify-body { display: grid; gap: 2px; min-width: 0; }
.notify-body a { font-weight: 600; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.notify-body a:hover { color: var(--accent); }
.notify-detail { font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
.notify-meta { font-size: 12.5px; color: var(--muted); }
.side-prefs { padding: 0 2px 10px; }
.side-prefs .locale-controls { justify-content: space-between; }
/* One wide control, split by a vertical rule: the account on the left, an
icon-only sign-out taking the right ~22%. */
.account-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) 22%;
align-items: stretch;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
/* The left half is a link to the profile — accent on hover, never the
destructive red the sign-out half uses. */
.account {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
min-width: 0;
text-decoration: none;
transition: background-color .15s ease;
}
.account:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.account:hover .account-email { color: var(--accent); }
.avatar {
display: grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
font-size: 13px;
font-weight: 650;
color: var(--accent-fg);
background: var(--accent);
border-radius: 50%;
}
.account-meta { display: grid; min-width: 0; }
.account-email {
font-size: 13px;
font-weight: 550;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-role { font-size: 11.5px; color: var(--muted); }
/* The divider is the button's own left border, so it spans the full height
whatever the account block does. */
.account-logout {
display: grid;
place-items: center;
padding: 0;
color: var(--muted);
background: transparent;
border: 0;
border-left: 1px solid var(--line);
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
.account-logout:hover { color: var(--danger); background: var(--danger-bg); }
/* The sidebar is `position: fixed`, so it is no longer a grid item — without an
explicit column the content would auto-place into the FIRST (264px) track and
end up hidden behind it. */
.content {
grid-column: 2;
/* The side gutter is a variable because one page (the Gantt, below) wants
its bottom to match it; 48px at the bottom is breathing room at the END
of a page that scrolls. */
--gutter: 34px;
padding: 32px var(--gutter) 48px;
min-width: 0;
}
/* WHERE AM I — above the heading, quieter than everything under it. Crumbs are
an instrument you use when lost and ignore when not, so they are sized and
coloured to be skipped: `--muted`, 13.5px, no underline until hovered. */
.crumbs { margin-bottom: 12px; font-size: 13.5px; line-height: 1.4; }
.crumbs ol {
display: flex;
flex-wrap: wrap; /* a long trail on a phone folds instead of scrolling */
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
/* The page you are on: same size, but it is the end of the sentence, so it is
the one part drawn in the text colour. */
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 500; }
.crumb-sep { padding: 0 8px; color: var(--muted); opacity: .6; }
/* ONE ROW AT THE TOP OF EVERY PAGE: the title block (or a page's own —
.account-head, .person-head), then whatever control belongs to the PAGE
rather than to anything on it (the dashboard's column picker, the
Materials «додати» pair), then — always last, always rightmost — the top
tools. The title block takes the width, so a control is never squeezed and
the tools never move: the page's own control is what yields, stepping
left of them (the owner's rule). */
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.page-head-main { flex: 1 1 auto; min-width: 0; }
.page-head .lead { margin: 6px 0 0; font-size: 15px; }
.page-head-aside { flex: none; }
@media (max-width: 620px) {
/* Under the title rather than beside it: at this width the two together leave
the heading two words per line. */
.page-head { flex-wrap: wrap; }
.page-head-aside { flex-basis: 100%; order: 9; margin-top: -4px; }
}
/* A page whose subject is a person: the picture is part of the heading rather
than a card under it. `.avatar` is 30px everywhere else, so the size is set
here — on the block that asked for a bigger one — instead of adding a size
modifier nobody else would use. */
.person-head {
display: flex;
align-items: center;
gap: 14px;
}
.person-head .avatar {
width: 56px;
height: 56px;
font-size: 22px;
}
/* The mobile bar and the scrim exist only on narrow screens. */
.mobile-bar,
.side-scrim { display: none; }
@media (max-width: 900px) {
.layout {
--bar-h: 56px;
grid-template-columns: minmax(0, 1fr);
}
/* Fixed bar: the brand on the left, the burger next to it on the right. */
.mobile-bar {
position: fixed;
inset: 0 0 auto 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: var(--bar-h);
padding: 0 14px;
background: var(--card);
border-bottom: 1px solid var(--line);
}
/* Slightly quieter than the main site: 220px on tablets, 200px on phones. Only
the brand may shrink on very narrow screens; touch targets stay intact.
Cover both the dashboard's bare mark and its linked version elsewhere. */
.mobile-bar > .brand,
.mobile-bar > .brand-home { width: 220px; min-width: 0; flex: 0 1 220px; }
.mobile-bar .brand-home .brand { width: 100%; min-width: 0; }
@media (max-width: 480px) {
.mobile-bar > .brand,
.mobile-bar > .brand-home { width: 200px; flex-basis: 200px; }
}
/* Three lines and nothing else. The ring that .icon-btn draws belongs to the
small controls it was written for (theme, sign-out) — around the one thing
on this bar that opens the whole navigation it reads as a chip in the
corner, and it makes the lines look smaller than they are. Dropped, the
lines carry the button on their own, so they are drawn bigger and heavier.
The box stays larger than the mark for the thumb that presses it.
Selector deliberately two levels deep. `.burger` alone ties with `.icon-btn`
on specificity and loses on order — this block sits ABOVE that one and a
media query adds no weight of its own, which is why the old `.burger {
border: 0 }` here never actually removed anything and the ring stayed. */
.mobile-bar .burger {
width: 44px;
height: 44px;
border: 0;
border-radius: 0;
/* Optical, not geometric: the bars keep 9px of their own air inside that
44px box, so without this pull they would sit further from their edge
than the logo does from the other one. */
margin-right: -9px;
}
/* The bar carries search and the bell here; the page-head cluster that
holds them on desktop steps aside, or the pair would be drawn twice. */
.top-tools { display: none; }
/* The same 44px box as the burger beside it, for the same thumb — two touch
controls 4px apart must not differ by a quarter of their target. */
.mobile-tools .icon-btn { width: 44px; height: 44px; flex: none; }
.mobile-bar .mobile-bell .notify-badge { top: 5px; right: 5px; }
/* The bars are drawn here rather than taken from the icon set, because an
open menu folds them into a cross and a fold needs three separate
elements — one cannot rotate a third of itself. Swapping in an
✕ icon would show the same two states without saying they are the same
button; the fold does. */
.burger-lines,
.burger-lines::before,
.burger-lines::after {
display: block;
width: 26px;
height: 2.5px;
background: currentColor;
border-radius: 2px;
}
.burger-lines {
position: relative;
transition: background-color .12s linear;
}
.burger-lines::before,
.burger-lines::after {
content: '';
position: absolute;
left: 0;
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.burger-lines::before { top: -8px; }
.burger-lines::after { top: 8px; }
/* Open: the middle bar goes, the outer two meet in the middle and cross.
The middle one is hidden by colour and not by opacity or a transform —
both of those would have to live on the parent, and the parent is what the
other two bars are positioned against. */
.is-side-open .burger-lines { background: transparent; }
.is-side-open .burger-lines::before { transform: translateY(8px) rotate(45deg); }
.is-side-open .burger-lines::after { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.burger-lines,
.burger-lines::before,
.burger-lines::after { transition: none; }
}
/* The same sidebar, now a panel that slides in UNDER the bar. */
.sidebar {
top: var(--bar-h);
bottom: 0;
z-index: 60;
width: min(280px, 84vw);
height: auto; /* top+bottom decide the height here */
transform: translateX(-100%);
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.layout.is-side-open .sidebar { transform: none; }
/* The brand is already in the bar — don't repeat it inside the panel. */
.side-brand { display: none; }
.side-scrim {
position: fixed;
inset: var(--bar-h) 0 0 0;
z-index: 50;
display: block;
background: rgb(0 0 0 / 45%);
}
.side-scrim[hidden] { display: none; }
.content { grid-column: 1; --gutter: 18px; padding: calc(var(--bar-h) + 20px) var(--gutter) 40px; }
/* The mobile bar owns the top-right corner, so the stack starts below it.
A literal, not var(--bar-h): .toasts is a sibling of .layout, which is
where that variable is declared. */
.toasts { top: 68px; }
/* Without JS the panel could never be opened, so keep the sidebar in normal
flow below the bar instead of hiding it off-screen. */
.no-js .sidebar { position: static; transform: none; width: auto; }
.no-js .side-brand { display: block; }
.no-js .mobile-bar { display: none; }
.no-js .content { padding-top: 24px; }
}
.locale-controls { display: flex; align-items: center; gap: 8px; }
/* A control that is not a text box — a segmented switch, a round toggle —
sitting inside a `.field` between the label and the hint. A grid item
stretches to the column by default, and a language switch as wide as the card
is not a language switch. Profile → Interface. */
.pref-control { justify-self: start; }
/* THE LANGUAGE SWITCH IS THE COLUMN PICKER'S PILL, one size down. It used to
be its own edge-to-edge pill with a class called `.seg` — and the day the
sites section named ITS joined segments `.seg` too, the switch inherited a
border, a bigger padding and a hover fill it never asked for: square inner
corners on the active half, a hover on the other half taller than the
active one. Two controls that look the same should share the rule, not
the class name by accident; so the switch is `.btn-group` + `.btn-opt-btn`
(the shared pill), and this is only the compact sizing the sidebar and
the sign-in screen need — the same numbers `.head-tools` uses. */
/* Both class names, so this outranks the shared rule declared further down. */
.btn-group.lang-seg { padding: 2px; border-radius: 10px; }
.lang-seg .btn-opt-btn { padding: 4px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.icon-btn {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--fg);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
/* An inline SVG sits on the TEXT BASELINE, so its box reserves room underneath
for descenders. Inside a round button that phantom strip counts as content,
place-items centres the taller box, and the glyph ends up visibly above the
middle. Making the SVG a block removes the baseline entirely.
Scoped to icon-only buttons on purpose: elsewhere an icon really does sit
inline beside text (.conn-state, .smtp-name), and block would break the row. */
.icon-btn svg,
.account-logout svg { display: block; }
/* Show the icon for the theme the button switches TO — including the
not-chosen-yet state, where the OS decides.
`grid`, not `block`: the wrapper is what the button centres, so it must be a
box with no line-height of its own — otherwise it reintroduces exactly the
gap the rule above just removed. */
.theme-sun,
.theme-moon { display: grid; place-items: center; line-height: 0; }
:root[data-theme='light'] .theme-moon,
:root[data-theme='dark'] .theme-sun,
:root:not([data-theme]) .theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .theme-moon { display: grid; }
:root:not([data-theme]) .theme-sun { display: none; }
}
/* --------------------------------------------------------------- auth */
.auth-shell {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 32px 20px;
}
/* THE REFERENCE SPLIT (clients-kaplia-pro, page-authorization): the film
fills the LEFT HALF, edge to edge, under a quarter-dark veil so the form's
side reads brighter; the right half is a column that centres the card and
pins the payment logos to the very bottom. Below 1024px the film bows out
and the page is the plain centered screen again — the reference's own
break, kept to the pixel. With no video uploaded none of this exists. */
.auth-shell.has-video {
display: flex;
align-items: stretch;
padding: 0;
}
.auth-video {
position: relative;
width: 50%;
flex: none;
}
.auth-video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.auth-video::after {
content: '';
position: absolute;
inset: 0;
background: rgb(0 0 0 / 25%);
}
.auth-side { display: contents; }
.auth-shell.has-video .auth-side {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 50%;
min-height: 100dvh;
padding: 32px 20px 88px;
}
.auth-shell.has-video .auth-box { width: 100%; }
/* The payment logos — pinned to the bottom edge, quiet chips that hold their
own in both themes; without the film they still stand under the card. */
.auth-payments {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
padding: 10px 20px;
}
.auth-shell.has-video .auth-payments {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.auth-shell:not(.has-video) .auth-payments { margin-top: 18px; }
/* NO PILL PER LOGO — the reference strips the borders on this page
(.paymentLogosWrapper.transparent): the images stand in one quiet row,
and the row's gap does the separating. The settings tab keeps its chips —
there they are previews, not decoration. */
.auth-payments i {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
}
.auth-payments img { display: block; width: auto; height: 15px; }
/* Two logo rows, one shown — the same switch that picks the sun or the moon
in the header: an explicit data-theme wins, otherwise the OS decides. The
server always sends both rows (an empty set borrows the other), so the
toggle costs no script and the page never shows a bare bottom edge. */
:root[data-theme='dark'] .auth-payments--light,
:root[data-theme='light'] .auth-payments--dark,
:root:not([data-theme]) .auth-payments--dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .auth-payments--light { display: none; }
:root:not([data-theme]) .auth-payments--dark { display: flex; }
}
@media (max-width: 1024px) {
.auth-video { display: none; }
.auth-shell.has-video .auth-side { width: 100%; }
}
.auth-box { width: 100%; max-width: 420px; }
/* 404 and 500 — one bare box, centred both ways, whoever is looking (the
owner, 22.09.2026): the code in large type, one sentence, the way out and
the language switch. No brand, no video, no logos — a lost visitor needs
the exit, not a lobby (views/auth.errorPage). */
.error-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.error-box { width: 100%; max-width: 420px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.error-code { margin: 0; font-size: 64px; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.error-lead { margin: 0 0 4px; font-size: 16px; color: var(--muted); }
.error-box .lang-seg { margin-top: 6px; justify-self: center; }
/* Налаштування → Авторизація: the conversion table and the logo rows. */
.auth-video-status th { font-weight: 500; white-space: nowrap; }
.auth-video-status .chip { white-space: nowrap; }
.auth-video-status td:last-child { text-align: right; }
.auth-logo-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.auth-logo-list li { display: flex; align-items: center; gap: 10px; }
.auth-logo-list form { display: flex; margin-left: auto; }
.auth-logo-chip {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 8px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--card);
}
.auth-logo-chip img { display: block; width: auto; height: 15px; }
/* The dark set previews on the dark theme's own card colours, whatever theme
the admin reads the tab in — white-on-white is not a preview. */
.auth-logo-chip--dark { border-color: #272930; background: #12141d; }
.auth-logo-name { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
/* The sub-heading of a settings card group — the quiet caps of .gs-group h4,
sized for a form card. */
.form-card h4 { margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.form-card h4:first-of-type { margin-top: 4px; }
.auth-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px;
box-shadow: var(--shadow);
text-align: center;
}
/* Brand above the card, switchers below it — the card itself holds only the
form. Both blocks are centred on the card's axis. */
.auth-brand { display: flex; justify-content: center; margin-bottom: 30px; }
.auth-foot { display: flex; justify-content: center; margin-top: 18px; }
/* On the sign-in screen the two switchers stack instead of sitting side by
side, so the column stays symmetric under the card. In the sidebar they keep
the compact row — there the width is the constraint, not the axis. */
.locale-foot { flex-direction: column; gap: 12px; }
/* The logo carries the page now, so the heading is a quieter second line. */
.auth-card h1 { font-size: 22px; }
/* Data inside a card that centres everything else. The card's `text-align:
center` is right for a heading and a button and wrong for four labelled
values: centred, they have no shape and the eye cannot pair a label with its
value. So this opts out — label left, value right, hairline between, the same
two-column reading as the `facts` block in a letter. */
.auth-facts {
width: 100%;
margin: 4px 0 18px;
border-collapse: collapse;
text-align: left;
font-size: 14.5px;
}
.auth-facts th,
.auth-facts td { padding: 10px 0; vertical-align: top; }
.auth-facts tr + tr th,
.auth-facts tr + tr td { border-top: 1px solid var(--line); }
.auth-facts th {
font-weight: 500;
color: var(--muted);
white-space: nowrap;
padding-right: 12px;
}
.auth-facts td { text-align: right; color: var(--fg); overflow-wrap: anywhere; }
.auth-card .form { text-align: left; }
/* `.form` carries 18px above itself to stand off a heading or a lead. On a
screen that starts WITH the form (the first sign-in step has neither) that
margin stacks on the card's padding into a gap nothing asked for — so
when the form is the card's first child, the padding alone sets the top. */
.auth-card .form:first-child { margin-top: 0; }
/* No margin of its own: `.form` is a grid with one gap, and an extra 4px here
made the space above the button differ from every other gap in the form —
visible the moment a captcha sits between them. */
.auth-card .btn { width: 100%; }
.auth-links {
margin: 18px 0 0;
font-size: 14px;
color: var(--muted);
}
.auth-links .dot { margin: 0 8px; }
/* -------------------------------------------------------------- forms */
.form { display: grid; gap: 14px; margin-top: 18px; }
.field { display: grid; gap: 6px; }
/* Input and its short action share a row, including inside narrow cards. */
.field-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.field-action > input { min-width: 0; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
/* A secret box and the checkbox that deletes it are ONE item in the card grid,
not two — otherwise the form's own `gap` would put as much air between a
field and its own delete control as between two unrelated fields, and the
checkbox would read as belonging to whatever comes next. */
.field-secret { display: grid; gap: 8px; }
.check-danger > span { color: var(--danger); }
/* Typed AND ticked: the server will change nothing there and say so. Marking
the pair now saves the round trip — the outcome is identical either way. */
.field-secret.has-clash input[type="password"] { border-color: var(--danger); }
.field input,
.field textarea {
width: 100%;
padding: 10px 12px;
font: inherit;
color: var(--fg);
background: var(--field);
border: 1px solid var(--line);
border-radius: 10px;
}
/* A