/* App shell: left nav (225px), header bar (93px), view, optional right panel (316px).
   Mobile (<= 820px, or a phone on its side: <= 500px high with touch; shell.js PHONE): nav is a
   drawer behind the hamburger, the panel is a bottom sheet. */
.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.app.is-public { display: block; height: auto; min-height: 100dvh; overflow: visible; }
.app.is-public .nav, .app.is-public .top, .app.is-public .panel-toggle { display: none; }

/* ---------- nav ---------- */
.nav {
  display: flex; flex-direction: column; height: 100dvh; overflow-y: auto; background: var(--nav-bg);
  border-right: 1px solid var(--line); padding: 26px 12px 28px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 0 0 12px; text-decoration: none; color: var(--text); }
.brand-mark { width: 54px; height: 54px; margin: -5px 0; color: var(--brand-icon); flex: none; stroke-width: 2.3; }
.brand-words { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; font-size: 23px; line-height: 1; letter-spacing: -.015em; font-weight: 600; }
.brand-words strong { font-weight: 600; }
.brand-words span { font-weight: 480; color: color-mix(in srgb, var(--text) 84%, var(--nav-bg)); }
.nav-list { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 20px; height: 51px; padding: 0 18px;
  border-radius: var(--r); border: 1px solid transparent; color: var(--text); text-decoration: none; font-size: 17px;
}
.nav-link .ico { width: 26px; height: 26px; stroke-width: 1.7; }
.nav-link:hover { background: var(--nav-hover); }
.nav-link[aria-current="page"] { background: var(--nav-active); border-color: var(--nav-active-border); font-weight: 500; }
.nav-link:focus-visible { outline-offset: -2px; }
.nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-active-bar);
}
.nav-help { margin-top: auto; display: flex; gap: 14px; padding: 24px 6px 0 16px; white-space: nowrap; color: var(--text); text-decoration: none; }
.nav-help .ico { width: 26px; height: 26px; stroke-width: 1.4; }
.nav-help-words { display: flex; flex-direction: column; gap: 8px; }
.nav-help-words strong { font-size: 15px; font-weight: 600; }
.nav-help-words span { font-size: 13px; color: var(--text-2); }
.nav-help:hover .nav-help-words span { color: var(--text); }

/* ---------- main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; height: 100dvh; }
.top {
  display: flex; align-items: center; gap: 16px; flex: none; min-height: var(--header-h); padding: 0 0 0 31px;
  background: var(--header-bg); border-bottom: 1px solid var(--line);
}
.top-menu { display: none; }
.top-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-left: 15px; }
.top-titles.no-back { padding-left: 1px; }
.top-title { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 25px; font-weight: 600; line-height: 1.2; }
.top-title h1 { font-size: inherit; font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-title .icon-btn { width: 30px; height: 30px; border: 0; background: none; }
.top-title .icon-btn .ico { width: 20px; height: 20px; stroke-width: 1.6; }
.top-title .input { height: 38px; font-size: 22px; font-weight: 600; max-width: 460px; }
.top-sub { font-size: 16px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* the screen's one main action (lime, in the header) gets the soft glow; lime buttons elsewhere do not */
.top-actions .btn-primary { box-shadow: var(--primary-glow); }
.top-actions .btn-primary:disabled { box-shadow: none; }
.top-sep { align-self: stretch; width: 1px; background: var(--line); margin-left: 4px; flex: none; }
.user {
  display: flex; align-items: center; gap: 10px; flex: none; min-width: 206px; height: var(--header-h); padding: 0 22px 0 26px;
  border: 0; background: none; cursor: pointer; text-align: left;
}
.user:hover { background: var(--nav-hover); }
.avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--avatar); color: var(--on-solid); font-size: 14px; letter-spacing: .02em;
}
.user-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.user-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.user-ws { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.user .ico { width: 14px; height: 14px; stroke-width: 2.2; margin-left: 8px; }
/* The account block in the nav drawer (phones only): name, company, opens the same menu. */
.nav-user, .nav-user[hidden] { display: none; }

/* Below 1280px the user block is just the avatar, so the title and actions keep their room. */
@media (max-width: 1280px) and (min-width: 821px) {
  .user { min-width: 0; padding: 0 20px; justify-content: center; }
  .user-words, .user .ico { display: none; }
  .top { gap: 12px; padding-left: 24px; }
}
/* Pages about one thing (a source, a bot, a flow) need the room for their name a little longer. */
@media (max-width: 1535px) and (min-width: 1281px) {
  .top.is-object .user { min-width: 0; padding: 0 20px; justify-content: center; }
  .top.is-object .user-words, .top.is-object .user .ico { display: none; }
}

.body { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
.view { flex: 1 1 auto; min-width: 0; overflow: auto; position: relative; }
.view:focus { outline: none; }
/* "Skip to content" link (first child of #app, also .sr-only): hidden until focused */
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  white-space: nowrap; padding: 10px 16px; border-radius: var(--r); background: var(--card-solid); color: var(--text);
  border: 1px solid var(--card-border); font-weight: 600; box-shadow: var(--shadow-lg);
}
.panel {
  flex: none; width: var(--panel-w); overflow-y: auto; background: var(--bg); border-left: 1px solid var(--line);
  padding: 22px 20px;
}
/* The panel head (title, Hide, close) sticks to the top edge over the panel's padding, so
   nothing scrolls above it. The negative offsets match .panel's top padding (22px, 18px on phones). */
.panel-head {
  display: flex; align-items: center; gap: 10px; margin: -22px 0 14px; padding-top: 22px; padding-bottom: 4px;
  position: sticky; top: -22px; z-index: 2; background: var(--bg);
}
.panel-head .h1 { flex: 1 1 auto; }
.panel-close { display: none; }
.panel-collapse, .panel-expand { width: 36px; height: 36px; color: var(--text-2); }
.panel-collapse:hover, .panel-expand:hover { color: var(--text); }
/* Dark: the right panel uses the nav tone, like the mock. */
[data-theme="dark"] .panel, [data-theme="dark"] .panel-head, [data-theme="dark"] .panel-rail { background: var(--nav-bg); }
/* Desktop, panel hidden: a thin rail with the Show button at the top. */
.panel-rail {
  flex: none; width: 52px; display: flex; justify-content: center; align-items: flex-start; padding-top: 22px;
  border-left: 1px solid var(--line); background: var(--bg);
}
.panel-toggle { display: none; }
.boot { display: grid; place-items: center; min-height: 60vh; }
.scrim.nav-scrim { z-index: 64; }

/* ---------- mobile ---------- */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  :root { --header-h: 64px; }
  .app { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(290px, 84vw); height: 100dvh; z-index: 65;
    transform: translateX(-100%); box-shadow: var(--shadow-lg);
    /* closed drawer: out of the Tab order and the accessibility tree, after it slides away */
    visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  .main { height: auto; min-height: 100dvh; }
  .top { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; gap: 8px 10px; min-height: 64px;
    padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .top-menu { display: inline-grid; }
  .top .icon-btn { width: 44px; height: 44px; }
  .top-titles { order: 0; padding-left: 2px; flex: 1 1 0; }
  .top-titles.no-back { padding-left: 2px; }
  .top-title { font-size: 19px; gap: 6px; }
  /* Long titles get two lines on phones instead of being cut after a few words. */
  .top-title h1 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; line-height: 1.2; }
  .top-title .input { font-size: 17px; }
  .top-sub { font-size: 13px; }
  .top-sep { display: none; }
  .user { min-width: 0; height: 44px; padding: 0 2px 0 6px; order: 1; border-radius: var(--r); }
  .user-words, .user .ico { display: none; }
  .avatar { width: 36px; height: 36px; font-size: 13px; }
  .nav-user:not([hidden]) { display: flex; order: 0; width: 100%; height: auto; min-height: 56px; margin-top: 18px; padding: 8px 12px;
    border-top: 1px solid var(--line); border-radius: 0; }
  .nav-user .user-words { display: flex; }
  .nav-user .user-name, .nav-user .user-ws { max-width: none; }
  .nav-user .ico { display: inline; }
  .top-actions { order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .top-actions:empty { display: none; }
  .top-actions .btn { height: 44px; padding: 0 12px; font-size: 14px; flex: 1 1 auto; }
  .body { display: flex; flex-direction: column; }
  .view { flex: 1 1 auto; overflow: visible; }
  .page, .page-wide { padding: 20px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 82dvh; z-index: 61; border-left: 0;
    border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform .22s ease;
  }
  .panel.is-open { transform: none; }
  .panel-head { margin-top: -18px; padding-top: 18px; top: -18px; }
  .panel-close { display: inline-grid; }
  .panel-collapse, .panel-rail { display: none; }
  /* Toasts clear the home indicator (and the panel toggle or bar: "Object pages" below). */
  .toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .panel-toggle {
    display: inline-flex; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40; min-height: 44px;
    box-shadow: var(--shadow-lg);
  }
  .panel-toggle[hidden] { display: none; }
}
/* A phone on its side has little height: the header scrolls away with the page. */
@media (max-height: 500px) and (pointer: coarse) {
  .top { position: static; }
}

/* ---------- public pages (sign in, sign up, reset, verify, invite) ---------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px; }
.auth-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.auth-card { width: min(440px, 100%); padding: 32px; }
.auth-card .h1 { margin-bottom: 6px; }
.auth-card form { margin-top: 22px; }
.auth-foot { font-size: 14px; color: var(--text-2); text-align: center; }
.auth-foot a { color: var(--text); font-weight: 500; }
.auth-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-row a { font-size: 13px; color: var(--text-2); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; margin: 18px 0 10px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 820px) { .auth-card { padding: 24px 20px; } }

/* One content width: with the Sources tree showing, its main column ends where every other
   page's content ends (nav + --content-max), not at the window edge. */
@media (min-width: 1200px) {
  .srcnav-layout > .srcnav-main { max-width: calc(var(--content-max) - var(--srcnav-w, 300px)); }
}

/* Object pages (lib/shell.js setHeader crumbs/status/tabs): where am I, what is this, what can
   I do here. Desktop: one line "Bots / Name [pencil]  ...  Live  [actions]" (the crumb is not
   smaller than the name), then tabs on the header's bottom edge. */
.top.is-object { align-items: flex-start; padding-top: 18px; }
.top.is-object .top-titles { gap: 0; flex: 1 1 0; min-width: min(340px, 32%); }
.top.is-object .top-actions { align-self: flex-start; margin-top: 4px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.top.is-object .user { align-self: flex-start; margin-top: -10px; }
.top.is-object .top-sep { align-self: stretch; margin-top: -18px; }
.top.is-object .top-title { font-size: 21px; gap: 10px; }
.top.is-object .top-title h1 { font-weight: 700; }
.top-name { display: contents; }
/* A long crumb gets an ellipsis instead of pushing the name out; the first crumb always shows,
   and when the name row is narrow the crumbs between the first and the parent are left out. */
.top-crumbs { flex: none; max-width: 40%; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.top-crumb { flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); text-decoration: none; }
.top-crumb:first-child { flex-shrink: .01; min-width: 2em; }
/* alone, it must shrink fully: shrink factors adding up to under 1 leave the rest overflowing */
.top-crumb:first-child:nth-last-child(-n+2) { flex-shrink: 1; }
.top-crumb-sep { flex: none; }
.top.is-object .top-title { container-type: inline-size; }
.top.is-object .top-title h1 { min-width: 5ch; }
.top.is-object .top-rename { flex: none; }
@container (max-width: 640px) {
  .top-crumbs > :nth-child(n+3):nth-last-child(n+3) { display: none; }
}
.top-crumb:hover { color: var(--text); text-decoration: underline; }
.top-crumb-sep { color: var(--text-3); font-weight: 400; }
.top-title h1 { min-width: 0; }
.top-status { flex: none; display: inline-flex; align-items: center; font-size: 14px; }
.top.is-object .top-status { align-self: flex-start; margin-top: 12px; }
.top-tabs { display: flex; gap: 28px; margin-top: 14px; }
.top-tab { position: relative; padding: 0 0 12px; color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.top-tab:hover { color: var(--text); }
.top-tab[aria-current="page"] { color: var(--text); font-weight: 600; }
.top-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.panel-collapse.btn { width: auto; height: 32px; padding: 0 12px; }

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  /* Phone rows: [menu][crumb / name (3 lines at most)][pencil][account]
                 subtitle (flow's description)
                 [tabs ......................... status]
     The object header scrolls away with the page; the actions move to a bar at the bottom. The
     titles block is flattened (display: contents) so every part is a row item of .top. */
  /* z-index auto: .top is a flex item, so a z-index would trap the fixed bar below body::after. */
  .top.is-object { position: static; z-index: auto; padding-top: calc(10px + env(safe-area-inset-top)); }
  .top.is-object .top-titles { display: contents; }
  .top.is-object .user { order: 0; margin-top: 0; }
  .top.is-object .top-title { container-type: normal; order: 0; flex: 1 1 calc(100% - 120px); min-width: 0; padding-left: 2px; align-items: flex-start; gap: 4px; font-size: 16px; line-height: 1.3; }
  .top.is-object .top-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    flex: 0 1 auto; min-width: 0; padding-top: 11px; overflow-wrap: anywhere; }
  .top.is-object .top-name > * { display: inline; }
  .top.is-object .top-title h1 { display: inline; min-width: 0; white-space: normal; overflow: visible; -webkit-line-clamp: none; line-clamp: none; }
  /* Crumbs: only the parent, with a real break point before the name ("Bots / Acme"). */
  .top.is-object .top-crumbs { max-width: none; }
  .top.is-object .top-crumbs > :nth-last-child(n+3) { display: none; }
  .top.is-object .top-crumb { white-space: normal; overflow: visible; }
  .top.is-object .top-crumb-sep { margin: 0 .25em; }
  .top.is-object .top-crumb-sep::after { content: " "; font-size: 0; }
  /* Touch targets: the same look with 44px hit areas. */
  .top.is-object .top-crumb { display: inline-block; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  .top.is-object .top-rename { position: relative; flex: none; width: 36px; height: 44px; }
  .top.is-object .top-rename::after { content: ""; position: absolute; inset: 0 -4px; }
  /* Rename: the crumb stays, the box takes the row. */
  .top.is-object .top-title.is-editing { flex-wrap: wrap; }
  .top.is-object .top-title.is-editing .top-name { display: block; flex: 1 1 100%; padding-top: 0; }
  .top.is-object .top-title .input { display: block; width: 100%; max-width: none; margin-top: 4px; }
  .top.is-object .top-sub { order: 1; flex: 1 1 100%; margin: -4px 0 0 56px; min-width: 0; }
  .top.is-object .top-tabs { order: 4; flex: 1 1 auto; min-width: 0; gap: 22px; margin: 0 0 -10px; overflow-x: auto; scrollbar-width: none; }
  .top.is-object .top-tab { display: inline-flex; align-items: flex-end; flex: none; min-height: 44px; padding-bottom: 10px; font-size: 14px; }
  /* The status shares the tabs row (right), or starts under the name when there are no tabs. A
     pill wider than the room left beside the tabs drops to its own row. */
  .top.is-object .top-status { order: 5; margin: 0 0 0 auto; align-self: center; max-width: 100%; }
  .top.is-object:not(:has(.top-tabs)) .top-status { margin-left: 56px; }
  /* The bottom bar: buttons from the left; on the right the panel toggle's room (--toggle-room,
     set by shell.js from the toggle's real width; 0 without a panel). The buttons scroll sideways
     rather than slide under the toggle when too many are given. The bar's background is drawn
     full width by body::after so the toggle sits on it. */
  .top.is-object .top-actions { position: fixed; left: 0; bottom: 0; z-index: 39; margin: 0;
    right: calc(var(--toggle-room, 0px) + max(16px, env(safe-area-inset-right)) - 4px);
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    padding: 12px 4px calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  body:has(.top.is-object .top-actions:not(:empty))::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; height: calc(69px + env(safe-area-inset-bottom));
    background: var(--header-bg); border-top: 1px solid var(--line); }
  .top.is-object .top-actions .btn { flex: 0 0 auto; }
  .top.is-object .top-actions .btn-primary { flex: 1 1 auto; max-width: 320px; }
  /* Two or more worded side buttons do not fit beside the main one (shell.js marks the bar
     is-crowded): they show their icon only, the words stay for screen readers. */
  .top.is-object .top-actions.is-crowded > .btn:not(.btn-primary):has(> .ico) { width: 44px; padding: 0; justify-content: center; }
  .top.is-object .top-actions.is-crowded > .btn:not(.btn-primary):has(> .ico) > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(.top.is-object .top-actions:not(:empty)) .panel-toggle { bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: none; }
  /* Toasts and keyboard focus stay above whatever sits at the bottom. */
  body:has(.top.is-object .top-actions:not(:empty)) .toasts,
  body:has(> .panel-toggle:not([hidden])) .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  html:has(.top.is-object .top-actions:not(:empty)),
  html:has(body > .panel-toggle:not([hidden])) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* The company first in the title row (shell.js companyChip): icon or initials, name, switch menu. */
.top-company-wrap { display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.top-company {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 280px; height: 42px; padding: 0 12px 0 5px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.top-company:hover { background: var(--nav-hover); }
.top-company:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.top-company-tile {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  background: var(--avatar); color: var(--on-solid); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.top-company-tile.has-icon { background: #FFFFFF; }
.top-company-icon { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.top-company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.top-company .ico { width: 14px; height: 14px; stroke-width: 2.2; flex: none; color: var(--text-2); }
@media (max-width: 820px) {
  .top-company { max-width: none; height: 36px; padding: 0 4px; border: 0; background: none; }
  .top-company-name, .top-company .ico { display: none; }
}
/* the company chip gives way to the page name when the top bar is crowded */
.top-company-wrap { flex: 0 1 auto; min-width: 44px; }
.top-company { max-width: 100%; }
.top-title h1 { min-width: 8ch; flex: 1 1 auto; }
.top-name > .top-crumbs { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.app:has(.panel:not([hidden])) .top-company-name { max-width: 140px; }
@media (max-width: 1500px) { .app:has(.panel:not([hidden])) .top-company-name, .app:has(.panel:not([hidden])) .top-company .ico { display: none; }
  .app:has(.panel:not([hidden])) .top-company { padding: 0 5px; } }

/* A page whose stylesheet is still loading stays out of sight (lib/dom.js ensureCss), so its
   unstyled boxes never flash; it shows the moment the styles arrive (1.5 s at most). */
html.css-wait #view { visibility: hidden; }
/* Chat2 sign in: sign in on the left, the sign up box on the right (pages/auth/shared.js side) */
.auth-pair { display: grid; grid-template-columns: repeat(2, min(440px, 100%)); gap: 20px; align-items: stretch; justify-content: center; width: 100%; }
.auth-side { display: flex; flex-direction: column; gap: 14px; }
.auth-side .h1 { margin: 0; }
.auth-side .muted { margin: 0; }
.auth-points { list-style: none; margin: 4px 0 auto; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.auth-points li { display: flex; gap: 8px; align-items: flex-start; }
.auth-points .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--success); }
.auth-side .btn { margin-top: 10px; text-decoration: none; justify-content: center; }
@media (max-width: 960px) { .auth-pair { grid-template-columns: min(440px, 100%); } }