/* Settings of the client portal, /editors/ and /admin/ (settings-ui.js builds the markup): a panel over the page, like a
   window of its own. A client's has a rail on the left (the title, then the tabs) and the sections scrolling beside it;
   staff, without tabs, have one column under the title. On a narrow screen everything is one column that scrolls as a
   whole, the tabs a segmented bar above the sections; on a phone the panel fills the screen.
   Each section's heading and description sit in a column of their own, its controls beside them, a hairline between
   sections; where there is no room for two columns, the heading goes above its controls (measured on .st-main itself,
   a container query).
   It only uses the colour tokens every page defines (--panel, --line, --muted, --accent, ...), so both themes follow.
   Loaded after the page's own CSS, so it wins ties with the shared .card / .field / .btn rules the company form carries. */
.st{--st-control:36px;--st-radius:8px;--st-group:12px;--st-head-w:13.5rem;--st-gap:40px;--st-ease:cubic-bezier(.16,1,.3,1);--st-icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12A10 10 0 0 1 2 12A10 10 0 0 1 22 12ZM13.4 7.25A1.4 1.4 0 0 0 10.6 7.25A1.4 1.4 0 0 0 13.4 7.25ZM13.13 11.25A1.13 1.13 0 0 0 10.88 11.25L10.88 17A1.13 1.13 0 0 0 13.13 17L13.13 11.25Z'/%3E%3C/svg%3E");container:st / inline-size;font-size:14px;line-height:1.5}
/* The white groups (account facts, accounts, team, email domains) are raised off the page by a shadow, not a border: a
   ring as dark as the hairlines inside, a little lift and a soft spread. On dark surfaces only a white ring shows. */
.st{--st-surface:0 0 0 1px oklch(0 0 0 / .1),0 1px 2px -1px oklch(0 0 0 / .06),0 2px 4px 0 oklch(0 0 0 / .04)}
:root:not([data-theme="light"]) .st{--st-surface:0 0 0 1px oklch(1 0 0 / .12)}
.st [hidden]{display:none!important}

/* The panel (the <dialog>): a fixed size, so changing tab never resizes it, 40px of dimmed page around it, rounded and
   raised. Staff have one column of sections, so theirs is narrower. It comes in with a small rise out of the page and
   leaves the same way, quicker (settings-ui.js sets data-closing first). */
.st-dialog{position:fixed;inset:0;width:min(1200px,calc(100vw - 80px));height:min(880px,calc(100dvh - 80px));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 0 0 1px oklch(0 0 0 / .06),0 24px 64px -12px oklch(0 0 0 / .32);overflow:hidden}
:root:not([data-theme="light"]) .st-dialog{box-shadow:0 0 0 1px oklch(1 0 0 / .1),0 24px 64px -12px oklch(0 0 0 / .6)}
.st-dialog:not(.st-dialog-tabs){width:min(880px,calc(100vw - 80px))}
:root{--st-scrim-ink:#141414;--st-scrim-a:45%}
:root:not([data-theme="light"]){--st-scrim-ink:#000;--st-scrim-a:55%}
.st-dialog::backdrop{background:color-mix(in srgb,var(--st-scrim-ink) var(--st-scrim-a),transparent)}
.st-dialog[open]{animation:st-dialog-in .22s cubic-bezier(.2,.8,.2,1)}
.st-dialog[open]::backdrop{animation:st-backdrop-in .22s ease-out}
.st-dialog[open][data-closing]{pointer-events:none;animation:st-dialog-out .16s cubic-bezier(.4,0,1,1) both}
.st-dialog[open][data-closing]::backdrop{animation:st-backdrop-out .16s ease-in both}
@keyframes st-dialog-in{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes st-dialog-out{to{opacity:0;transform:translateY(6px) scale(.985)}}
@keyframes st-backdrop-in{from{opacity:0}}
@keyframes st-backdrop-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-dialog[open],.st-dialog[open]::backdrop{animation:none!important}}
/* The page under it stays where it was. Its scrollbar's place stays reserved (html{scrollbar-gutter:stable}), so nothing
   under the panel moves; the backdrop cannot reach into that strip, so the page's own background colour there (only a
   colour reaches it) is the dimmed one: the scrim mixed into --bg, the same as the backdrop over the page. */
:root:has(.st-dialog[open]){overflow:hidden;background-color:color-mix(in srgb,var(--st-scrim-ink) var(--st-scrim-a),var(--bg))}

/* Close, in the panel's top corner: outside the part that scrolls, so it stays there, on the panel's own colour so text
   scrolling under it does not show through. */
.st-close{position:absolute;top:20px;right:16px;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:var(--panel);color:var(--muted);cursor:pointer;transition-property:background-color,color,scale;transition-duration:.15s;transition-timing-function:ease-out}
.st-close svg{width:16px;height:16px}
.st-close::after{content:"";position:absolute;inset:-4px}
@media(hover:hover){.st-close:hover{background:color-mix(in srgb,var(--text) 7%,var(--panel));color:var(--text)}}
.st-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.st-close:active{scale:.96}
/* Level with the title: the rail's small one (clients), or the big one over the sections (staff), its icon on the
   sections' right edge. */
@media (min-width:760px){
  .st-dialog-tabs .st-close{top:18px;right:20px}
  .st-dialog:not(.st-dialog-tabs) .st-close{top:34px;right:40px}
}
/* One column (a narrow screen, and staff everywhere): the title, then (clients) the tabs, then the sections, all in one
   scrolling column; the title leaves room for the close button. */
.st{height:100%;overflow-y:auto;overscroll-behavior:contain}
.st-side{padding:22px 24px 0}
.st-side h2{padding-right:48px;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.02em;text-wrap-style:balance}
.st-lead{max-width:60ch;margin-top:6px;font-size:14px;color:var(--muted)}
.st-has-tabs .st-tabs{margin-top:20px}
.st-body{padding:32px 24px 24px}
.st-main{container:st-main / inline-size;min-width:0}
@media (min-width:760px){
  .st:not(.st-has-tabs) .st-side{padding:36px 48px 0}
  .st:not(.st-has-tabs) .st-body{padding:32px 48px 32px}
}

/* Tabs (clients). Narrow: a segmented control, two by two. Every tab is one size, so the mark behind the chosen one
   (settings-ui.js places it) only moves. The bar's corner is the tab's plus the 3px padding and the 1px border, so the
   two curves run parallel. */
.st-tabs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 2px;padding:3px;border:1px solid var(--line);border-radius:calc(var(--st-radius) + 4px);background:var(--panel-2)}
.st-tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:var(--st-control);padding-block:0;padding-inline:8px 10px;border:0;border-radius:var(--st-radius);background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out}
.st-tab[aria-selected="true"]{color:var(--text);transition:none}
/* Changing tab is instant: the mark jumps to the chosen tab, nothing slides or fades. */
.st-tab-mark{position:absolute;top:0;left:0;width:var(--mark-w,0);height:var(--mark-h,0);border-radius:var(--st-radius);background:var(--panel);box-shadow:0 0 0 1px var(--line),0 1px 2px rgb(24 24 24 / .06);transform:translate(var(--mark-x,0),var(--mark-y,0));pointer-events:none}
/* Dark surfaces get lighter as they rise, so the mark is lighter than its track there. */
:root:not([data-theme="light"]) .st-tab-mark{background:color-mix(in srgb,var(--panel-2),var(--text) 9%)}
@media(hover:hover){.st-tab:hover:not([aria-selected="true"]){color:var(--text)}}
.st-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* A tab's target reaches 2px past it above and below (40px on a desktop), into the bar's padding or the gap: rows of tabs
   sit 4px apart, so two targets meet but never overlap. Only the text side of a centred tab is wider, so the icon and its
   word read as centred. */
.st-tab::after{content:"";position:absolute;inset:-2px 0}

/* Wide (clients): the rail on the left, on the page's own colour (a shade off the panel), with the title and the tabs
   as a list; the sections scroll on their own beside it, in a centred column. The mark is a quiet tint there, as a
   hovered tab's, not a raised button. */
@media (min-width:760px){
  .st-has-tabs{display:grid;grid-template-columns:clamp(200px,22%,240px) minmax(0,1fr);overflow:hidden}
  .st-has-tabs .st-side{display:flex;flex-direction:column;gap:14px;min-height:0;padding:20px 12px;background:var(--bg);overflow-y:auto;overscroll-behavior:contain}
  .st-has-tabs .st-side h2{padding:4px 12px 0;font-size:15px;line-height:1.4;letter-spacing:-.01em}
  .st-has-tabs .st-tabs{grid-template-columns:minmax(0,1fr);margin:0;padding:0;border:0;border-radius:0;background:none}
  .st-has-tabs .st-tab{justify-content:flex-start;padding-inline:12px}
  .st-has-tabs .st-tab-mark,:root:not([data-theme="light"]) .st-has-tabs .st-tab-mark{background:color-mix(in srgb,var(--text) 7%,transparent);box-shadow:none}
  @media(hover:hover){.st-has-tabs .st-tab:hover:not([aria-selected="true"]){background:color-mix(in srgb,var(--text) 4%,transparent)}}
  .st-has-tabs .st-body{min-height:0;padding:48px 56px 32px;overflow-y:auto;overscroll-behavior:contain}
  .st-has-tabs .st-main{max-width:840px;margin-inline:auto}
}

/* A tab the person opens fades in: opacity only, 150ms. Tabs change often, so nothing slides or comes in one by one; and
   nothing is left transformed afterwards, so the sticky headings stay sticky. The panel itself rises in as it opens
   (above), so a tab shown with it just shows. */
.st-panel.is-entering{animation:st-fade .15s ease-out}
@keyframes st-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-panel.is-entering{animation:none}}

/* Sections: a hairline above, generous space around, a heading with its description. The first section of a page or a tab
   starts level with the tabs. */
.st-section,.st-company .card{padding:32px 0;border-top:1px solid var(--line)}
.st-main > .st-section:first-child,.st-panel > .st-section:first-child,.st-panel > :first-child > .st-section:first-child,.st-panel .st-company .card:first-child{padding-top:0;border-top:0}
.st-section-head{margin-bottom:24px}
.st-section-head h3,.st-company .card h3{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.st-section-head p,.st-company .card .hint{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
/* Headings even out their lines; descriptions, help and notes never end on one lonely word. The longhand
   (text-wrap-style), because the text-wrap shorthand would also undo white-space:nowrap where a line must stay whole. */
.st-section-head h3,.st-company .card h3{text-wrap-style:balance}
.st-lead,.st-section-head p,.st-company .card .hint,.st-help,.st-note,.st .accounts-help,.st .tracking-domain-hint,.st .tracking-subdomains-empty,.st .senders-domains .campaign-hint{text-wrap-style:pretty}

/* Room for two columns: the heading and its description on the left (and in view while a long section scrolls past), the
   controls on the right. The heading spans every row the controls take, so they stack one under another beside it.
   A company-form block keeps its heading and description as two separate elements, so those two float on the left. A wide
   section (the email domains, with their DNS tables) keeps its heading on top and gives its content the whole width. */
@container st-main (min-width:680px){
  .st-section{display:grid;grid-template-columns:var(--st-head-w) minmax(0,1fr);column-gap:var(--st-gap);align-items:start;padding:40px 0}
  .st-section > .st-section-head{position:sticky;top:24px;grid-column:1;grid-row:1 / span 30;margin:0}
  .st-section > :not(.st-section-head){grid-column:2}
  .st-section.st-section-wide{display:block}
  .st-section-wide > .st-section-head{position:static;max-width:640px;margin-bottom:24px}
  .st-company .card{display:flow-root;padding:40px 0}
  .st-company .card > :is(h3,.hint){float:left;clear:left;width:var(--st-head-w)}
  .st-company .card > :not(h3,.hint){margin-left:calc(var(--st-head-w) + var(--st-gap))}
  .st-company .card .hint{margin-bottom:0}
}

/* Fields: the label above its control, the helper text below it; related fields share a row. */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px;margin:0}
.st-label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;line-height:1.4;color:var(--text)}
.st-help{margin-top:6px;font-size:13px;line-height:1.45;color:var(--dim)}
.st-value{font-size:14px;font-weight:500;overflow-wrap:anywhere}

/* Profile picture: the circle, then what can be done with it. */
.st-avatar{display:flex;align-items:center;gap:20px}
.st-avatar-frame{flex:none;display:block;width:80px;height:80px;border:1px solid var(--line);border-radius:50%;background:var(--panel-2);overflow:hidden}
.st-avatar-img{display:block;width:100%;height:100%;padding:22px;object-fit:cover}
.st-avatar-img.has-photo{padding:0;filter:none}
:root:not([data-theme="light"]) .st-avatar-img:not(.has-photo){filter:grayscale(1) invert(1)}
/* A photo or a logo: the frame's tinted line gives way to a neutral inset outline (pure black, or white on dark), which
   reads the same on any picture. Team members' photos get the same edge. */
.st-avatar-frame:has(> .has-photo){border-color:transparent}
.st-avatar-img.has-photo,.st-team-avatar img{border-radius:inherit;outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
:root:not([data-theme="light"]) :is(.st-avatar-img.has-photo,.st-team-avatar img){outline-color:oklch(1 0 0 / .1)}
.st-avatar-main{min-width:0}
.st-avatar-main .st-label{margin-bottom:8px}
.st-avatar-main .st-help{margin-top:8px}
.st-actions{display:flex;flex-wrap:wrap;gap:8px}

/* First name and surname: the two inputs share a row; their help text and Save sit on one line under them. */
.st-name{margin-top:28px}
.st-form-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px;margin-top:10px}
.st-form-foot .st-help{flex:1 1 220px;margin-top:8px}
.st-name .st-actions{flex:none}
.st-name .st-note{margin-top:12px}
/* Password (Security): the current one first, with Continue beside it; then the new one and its repeat side by side. */
.st-password-row{display:flex;gap:8px;max-width:420px}
.st-password-row .st-input{flex:1 1 auto;min-width:0}
.st-password-row .st-btn{flex:none}
.st-password .st-actions{flex:none}
.st-password .st-note{margin-top:12px}

/* The account's facts that are not edited here (e-mail, company or role): label and value on one line, in a quiet group. */
.st-facts{margin:28px 0 0;border-radius:var(--st-group);background:var(--panel);box-shadow:var(--st-surface)}
.st-fact{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);align-items:center;gap:4px 16px;min-height:48px;padding:10px 16px}
.st-fact + .st-fact{border-top:1px solid var(--line)}
.st-fact .st-label{margin:0;color:var(--muted)}

/* Appearance: the theme as two small drawings of the app, then the language. The drawings use each theme's own colours
   (the tokens in login.html), whatever the page is in now. */
.st-appearance{display:grid;gap:28px}
.st-appearance > .st-field{max-width:420px}
.st-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.st-theme{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer}
.st-theme-input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.st-theme[data-theme-option="light"]{--tp-bg:#F7F7F5;--tp-panel:#FFFFFF;--tp-line:#DCDCDC;--tp-ink:#181818;--tp-soft:#E4E4E1}
.st-theme[data-theme-option="dark"]{--tp-bg:#181b22;--tp-panel:#222630;--tp-line:#3c4350;--tp-ink:#F5F7FA;--tp-soft:#3c4350}
/* The drawing's corner is its sidebar's plus the 8px padding, so the two curves run parallel. */
.st-theme-preview{display:flex;gap:6px;aspect-ratio:16 / 10;padding:8px;border-radius:12px;background:var(--tp-bg);box-shadow:0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .15s ease-out}
.st-tp-side{flex:0 0 26%;border-radius:4px;background:var(--tp-panel);box-shadow:inset 0 0 0 1px var(--tp-line)}
.st-tp-main{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 4px}
.st-tp-title{width:55%;height:7px;border-radius:3px;background:var(--tp-ink)}
.st-tp-line{width:90%;height:5px;border-radius:3px;background:var(--tp-soft)}
.st-tp-line.is-short{width:62%}
.st-tp-button{width:34%;height:10px;margin-top:auto;border-radius:4px;background:var(--tp-ink)}
/* Under each drawing its name, with a radio dot that fills in for the theme in use. */
.st-theme-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.3;color:var(--muted);transition:color .15s ease-out}
.st-theme-name::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .15s ease-out}
.st-theme:has(.st-theme-input:checked) .st-theme-preview{box-shadow:0 0 0 2px var(--text)}
.st-theme:has(.st-theme-input:checked) .st-theme-name{color:var(--text)}
.st-theme:has(.st-theme-input:checked) .st-theme-name::before{box-shadow:inset 0 0 0 5px var(--text)}
.st-theme:has(.st-theme-input:focus-visible) .st-theme-preview{outline:2px solid var(--focus);outline-offset:3px}
@media(hover:hover){.st-theme:hover:not(:has(.st-theme-input:checked)) .st-theme-preview{box-shadow:0 0 0 1px var(--focus)}}
/* Picking a theme cross-fades the whole page into it (settings-ui.js, a view transition): a quick fade, not the 600ms
   of a page-to-page transition. */
html.st-theme-fade::view-transition-group(root),html.st-theme-fade::view-transition-old(root),html.st-theme-fade::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease-out}

/* Icons: solid files from /icons, drawn as masks so they take the colour of the text beside them. An element names one
   with data-icon (a company-form card or a section for its heading); headings, labels and buttons show it in front. */
.st [data-icon="person"]{--ico:url(/icons/ui/person.svg)}
.st [data-icon="palette"]{--ico:url(/icons/ui/palette.svg)}
.st [data-icon="companies"]{--ico:url(/icons/nav/companies.svg)}
.st [data-icon="users"]{--ico:url(/icons/ui/users.svg)}
.st [data-icon="link"]{--ico:url(/icons/ui/link.svg)}
.st [data-icon="envelope"]{--ico:url(/icons/ui/envelope.svg)}
.st [data-icon="shield-check"]{--ico:url(/icons/ui/shield-check.svg)}
.st [data-icon="lock"]{--ico:url(/icons/ui/lock.svg)}
.st [data-icon="copy"]{--ico:url(/icons/ui/copy.svg)}
.st [data-icon="sun"]{--ico:url(/icons/ui/sun.svg)}
.st [data-icon="globe"]{--ico:url(/icons/ui/globe.svg)}
.st [data-icon="upload"]{--ico:url(/icons/ui/upload.svg)}
.st [data-icon="trash-bin"]{--ico:url(/icons/ui/trash-bin.svg)}
.st [data-icon="file-text"]{--ico:url(/icons/ui/file-text.svg)}
.st [data-icon="map-pin"]{--ico:url(/icons/ui/map-pin.svg)}
.st [data-icon="smartphone"]{--ico:url(/icons/ui/smartphone.svg)}
.st [data-icon="instagram"]{--ico:url(/icons/brand/instagram.svg)}
.st [data-icon="facebook"]{--ico:url(/icons/brand/facebook.svg)}
.st [data-icon="tiktok"]{--ico:url(/icons/brand/tiktok.svg)}
.st [data-icon="linkedin"]{--ico:url(/icons/brand/linkedin.svg)}
.st [data-icon="youtube"]{--ico:url(/icons/brand/youtube.svg)}
.st [data-icon="domains"]{--ico:url(/icons/nav/domains.svg)}
.st [data-icon="accounts"]{--ico:url(/icons/nav/accounts.svg)}
.st-section[data-icon] h3::before,.st-company .card[data-icon] h3::before,.st-label[data-icon]::before,.st-company .field label[data-icon]::before,.st-btn[data-icon]::before,.st-tab[data-icon]::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.st-section[data-icon] h3,.st-company .card[data-icon] h3{display:flex;align-items:center;gap:10px}
.st-section[data-icon] h3::before,.st-company .card[data-icon] h3::before{color:var(--muted)}
.st-label[data-icon],.st-company .field label[data-icon]{display:flex;align-items:center;gap:8px}
.st-label[data-icon]::before,.st-company .field label[data-icon]::before{color:var(--dim)}
/* The language label shows one word at a time, each in its own language (settings-ui.js turns it); the screen reader
   gets all four from .st-sr. The words are drawn from data-word so they stay out of the label's text, which names the
   dropdown. Both words share one grid cell, so the old one blurs out while the new one blurs in on the same spot. */
.st-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.st-lang-label{position:relative}
.st-lang-words{display:inline-grid;justify-items:start}
.st-lang-word{grid-area:1/1;white-space:nowrap}
.st-lang-word::after{content:attr(data-word)}
.st-lang-word.is-in{animation:st-word-in .6s cubic-bezier(.22,1,.36,1) both}
.st-lang-word.is-out{animation:st-word-out .45s cubic-bezier(.4,0,1,1) both}
@keyframes st-word-in{from{opacity:0;filter:blur(8px)}}
@keyframes st-word-out{to{opacity:0;filter:blur(8px)}}
@media (prefers-reduced-motion:reduce){.st-lang-word.is-in,.st-lang-word.is-out{animation:none}}

/* Controls: one height (36px, 44px on phones) and one radius for buttons, inputs, menus and the language switch. A
   button's target reaches 2px past it above and below (40px on a desktop); buttons sit at least 8px apart. */
.st-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--st-control);padding:0 14px;border:1px solid var(--line);border-radius:var(--st-radius);background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer}
.st-btn::after{content:"";position:absolute;inset:-2px 0}
/* The icon side is 2px tighter than the text side, so the icon and its word read as centred. */
.st-btn[data-icon]{padding-inline-start:12px}
.st-btn:disabled{opacity:.55;cursor:default}
.st-btn-quiet{border-color:transparent;background:transparent;color:var(--muted)}
.st-btn-primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
/* A primary button with nothing to do yet is a quiet outline, not a dimmed black block. */
.st-btn-primary:disabled{border-color:var(--line);background:var(--panel-2);color:var(--dim);opacity:1}
.st-input{display:block;width:100%;height:var(--st-control);padding:0 12px;border:1px solid var(--line);border-radius:var(--st-radius);background:var(--panel);color:var(--text);font:inherit;font-size:14px;line-height:1.4;transition:border-color .15s,background-color .15s}
.st-input:focus{outline:none;border-color:var(--focus);background:var(--panel);box-shadow:0 0 0 3px var(--focus-soft)}
.st .v-control{width:100%;height:var(--st-control);min-height:var(--st-control);padding:0 12px;border-radius:var(--st-radius);background:var(--panel);font-size:14px}
.st .v-control[aria-expanded="true"]{background:var(--panel-2)}
/* Hover only where there is a pointer that hovers: on a phone a tap would leave the button looking hovered. */
@media(hover:hover){
  .st-btn:hover:not(:disabled){border-color:var(--focus);background:var(--panel-2)}
  .st-btn-quiet:hover:not(:disabled){border-color:transparent;background:var(--error-bg);color:var(--error-text)}
  .st-btn-primary:hover:not(:disabled){border-color:var(--accent-2);background:var(--accent-2)}
  .st-input:hover:not(:focus){background:var(--panel-2)}
  .st .v-control:hover{background:var(--panel-2)}
}

/* Two-step verification (Security): a status line with an On/Off badge, the authenticator apps in the Team list's look,
   then the set-up in two numbered steps. The QR code sits on white in both themes: a phone's camera needs the contrast. */
.st-mfa-status{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.st-mfa-status .st-help{margin:0}
.st-mfa-badge{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:12px;font-weight:600;line-height:1}
.st-mfa-badge[data-on="true"]{background:var(--success-bg);box-shadow:inset 0 0 0 1px var(--success-border);color:var(--success-text)}
.st-mfa-badge[hidden]{display:none}
.st-mfa .st-mfa-list{margin-bottom:16px}
.st-mfa-item-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--panel-2)}
.st-mfa-item-icon::before{content:"";width:18px;height:18px;background:var(--muted);-webkit-mask:url(/icons/ui/smartphone.svg) center/contain no-repeat;mask:url(/icons/ui/smartphone.svg) center/contain no-repeat}
.st-mfa-steps{display:grid;gap:28px;margin:4px 0 20px;padding:0;list-style:none;counter-reset:st-mfa}
.st-mfa-step{position:relative;padding-left:36px;counter-increment:st-mfa}
.st-mfa-step::before{content:counter(st-mfa);position:absolute;top:-2px;left:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.st-mfa-step > .st-help{margin:0 0 12px}
.st-mfa-qr-wrap{display:inline-block;margin-bottom:12px;padding:10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.st-mfa-qr{display:block;width:168px;height:168px;image-rendering:pixelated}
.st-mfa-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.st-mfa-secret{padding:7px 10px;border-radius:var(--st-radius);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.04em;overflow-wrap:anywhere;user-select:all}
.st-mfa-code{font-variant-numeric:tabular-nums;letter-spacing:.24em}
.st-mfa .st-note{margin-top:12px}
/* Notices: quiet, one line or two, with the tone of the message (the same tokens as the app's toasts). A plain piece of
   information ("kept in this browser") is only a small line of text; a problem gets its box. */
.st-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:10px 12px;border:1px solid var(--tone-line,var(--line));border-radius:var(--st-radius);background:var(--tone-bg,var(--panel-2));color:var(--tone-fg,var(--muted));font-size:14px;line-height:1.45}
.st-note::before{content:"";flex:none;width:16px;height:16px;margin-top:calc((1lh - 16px) / 2);background:currentColor;-webkit-mask:var(--tone-icon,var(--st-icon-info)) center/contain no-repeat;mask:var(--tone-icon,var(--st-icon-info)) center/contain no-repeat}
.st-note[data-tone="info"]{gap:6px;margin-top:12px;padding:0;border:0;background:none;color:var(--dim);font-size:13px}
.st-note[data-tone="info"]::before{width:14px;height:14px;margin-top:calc((1lh - 14px) / 2)}
.st-note[data-tone="error"]{--tone-fg:var(--error-text);--tone-bg:var(--error-bg);--tone-line:var(--error-border);--tone-icon:var(--icon-error)}
.st-note[data-tone="success"]{--tone-fg:var(--success-text);--tone-bg:var(--success-bg);--tone-line:var(--success-border);--tone-icon:var(--icon-success)}
.st-note[data-tone="warning"]{--tone-fg:var(--warning-text);--tone-bg:var(--warning-bg);--tone-line:var(--warning-border);--tone-icon:var(--icon-warning)}

/* The company form (client only). app.js moves the same form here from the first-visit questions; only its look
   changes: each block becomes a section, the fields share the grid and the button sits right under them. */
.st-company .company-fields{min-width:0;margin:0;padding:0;border:0}
.st-company .card{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0;background:none;box-shadow:none}
.st .st-company .card{box-shadow:none}
.st-company .card + .card{margin-top:0}
.st-company .card .hint{margin-bottom:24px}
.st-company .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px}
.st-company .field{margin:0}
.st-company .field label{margin-bottom:6px;font-size:14px;font-weight:500;line-height:1.4;color:var(--text)}
.st-company .field input{height:var(--st-control);padding:0 12px;border-radius:var(--st-radius);background:var(--panel);font-size:14px}
/* The map button in the legal address (shared/location-picker.css), as far from the end as from the top. */
.st-company .k-location{--k-location-inset:calc((var(--st-control) - 28px) / 2)}
.st-company .onboarding-actions{display:flex;justify-content:flex-end;margin:0;padding-top:24px;border-top:1px solid var(--line)}
.st-company #saveOnboard{width:auto;height:var(--st-control);margin:0;padding:0 16px;border-radius:var(--st-radius);font-size:14px;font-weight:500;line-height:1}
.st-company .msg{margin-top:16px}
/* Team follows the form's Save button in the Company tab. */
.st-company + .st-team-slot{margin-top:40px}

/* The company logo (client only, portal/company-logo.js): the profile picture's row, in a rounded square frame. */
.st-company .company-logo{margin-bottom:28px}
.st-logo .st-avatar-frame{border-radius:16px}
.st-company .company-logo .st-note{margin-top:16px}

/* Domains (client only): the email domains portal/email-senders.js draws (its own email-senders.css styles the domain
   cards), with the add form in this page's controls. The cards are raised a little off the page here; their checks go
   two to a row, four where the section has the width. */
.st-inline-form{display:flex;gap:8px;margin-bottom:16px}
.st-inline-form .st-input{flex:1 1 auto;min-width:0}
.st-inline-form .st-btn{flex:none}
.st-inline-form + .st-note{margin:0 0 12px}
.st .senders-domain{border:0;border-radius:var(--st-group);background:var(--panel);box-shadow:var(--st-surface)}
.st .senders-checks,.st .senders-bimi-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
@container st-main (min-width:780px){.st .senders-checks,.st .senders-bimi-checks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st .senders-domains .campaigns-table-wrap{border:1px solid var(--line);border-radius:10px;overflow:auto}
.st .senders-records-table{min-width:0}
.st .senders-records-table td:first-child{white-space:nowrap}

/* Domains (client only): the link addresses portal/tracking.js draws, in this page's type and controls. */
.st .tracking-subdomains-empty,.st .tracking-subdomains-list,.st .tracking-domain-head{margin-top:0}
.st .tracking-subdomains-empty{font-size:14px;line-height:1.5;color:var(--muted)}
.st .tracking-subdomains-empty .tracking-mini-button{margin-top:12px}
.st .tracking-subdomain-item code,.st .tracking-domain-name code{font-size:14px}
.st .tracking-domain-hint,.st .tracking-domain-detail{font-size:13px}
.st .tracking-mini-button{min-height:var(--st-control);padding:0 14px;border-radius:var(--st-radius);font-size:14px;font-weight:500}

/* Integrations (client only): the social accounts (and Google Calendar, google-calendar.css) as rows of one quiet group,
   the connect button on the right. The button says the state in words and in the app's feedback tones: dark to connect,
   green while connected, red once a hover or the keyboard shows "Disconnect". Its icon is a mask, so it takes those tones. */
.st .accounts-list{padding:0;border-radius:var(--st-group);background:var(--panel);box-shadow:var(--st-surface)}
.st .acct{grid-template-columns:36px minmax(0,1fr) auto;column-gap:14px;min-height:68px;padding:14px 16px;border-bottom:1px solid var(--line)}
.st .acct:last-child{border-bottom:0}
.st .acct .t{font-size:15px;font-weight:500}
.st .acct .s{font-size:13px}
.st .acct .t a img{opacity:.55;transition:opacity .15s}
@media(hover:hover){.st .acct .t a:hover img{opacity:1}}
.st .accounts-error{margin:0 0 16px}
.st .accounts-help{margin-top:16px;font-size:13px;line-height:1.45;color:var(--dim)}
/* YouTube's terms, Google's privacy policy and where to remove access: a row of links, each a full-height target. */
.st .accounts-links{display:flex;flex-wrap:wrap;gap:0 20px;margin:2px 0 0;padding:0;list-style:none;font-size:13px}
.st .accounts-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.st .accounts-links a:hover{color:var(--text)}}
.st .gcal-details{padding-left:0}
.st .pill-btn{gap:6px;width:auto;min-width:124px;height:32px;min-height:32px;padding-block:0;padding-inline:12px 14px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:500}
.st .pill-btn .action-icon{display:none}
.st .pill-btn::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url(/icons/ui/link.svg) center/contain no-repeat;mask:url(/icons/ui/link.svg) center/contain no-repeat}
.st .pill-btn.linked{background:var(--success-bg);color:var(--success-text);box-shadow:inset 0 0 0 1px var(--success-border)}
.st .pill-btn.linked::before{-webkit-mask-image:url(/icons/ui/check.svg);mask-image:url(/icons/ui/check.svg)}
.st .pill-btn.linked:is(:hover,:focus-visible){background:var(--error-bg);color:var(--error-text);box-shadow:inset 0 0 0 1px var(--error-border)}
.st .pill-btn.linked:is(:hover,:focus-visible)::before,.st .pill-btn.loading::before{display:none}
@media(hover:hover){.st .pill-btn:not(.linked):hover:not(:disabled){background:var(--accent-2)}}
@media(hover:none){
  .st .pill-btn.linked:not(.loading){background:var(--error-bg);color:var(--error-text);box-shadow:inset 0 0 0 1px var(--error-border)}
  .st .pill-btn.linked:not(.loading)::before{display:none}
}
/* The brand tiles get the neutral edge pictures get (pure black, or white on dark), not the tinted line, which read as
   dirt on Instagram's gradient and on TikTok's black. */
.st .acct .logo{box-shadow:inset 0 0 0 1px oklch(0 0 0 / .1)}
:root:not([data-theme="light"]) .st .acct .logo{box-shadow:inset 0 0 0 1px oklch(1 0 0 / .1)}
/* AI assistants (client only, portal/ai-connect.js): the connect button as a link to mcp.kreative.lv. Its last word turns
   like the language label's (.st-lang-word: the old one blurs out as the new one blurs in on the same spot, right after
   "Connect") in a slot that eases to each word's width, so the button grows or shrinks smoothly instead of jumping. */
.st [data-icon="sparkles"]{--ico:url(/icons/ui/sparkles.svg)}
.st .ai-connect-logo{background:var(--accent)}
.st .ai-connect-logo::before{content:"";width:20px;height:20px;background:var(--on-accent);-webkit-mask:url(/icons/ui/sparkles.svg) center/contain no-repeat;mask:url(/icons/ui/sparkles.svg) center/contain no-repeat}
.st a.ai-connect-btn{gap:0;text-decoration:none}
.st .ai-connect-btn::before{margin-inline-end:6px}
.st .ai-connect-verb{margin-inline-end:.28em}
.ai-connect-words{display:inline-grid;justify-items:start;transition:width .45s cubic-bezier(.22,1,.36,1)}
.ai-connect-word{grid-area:1/1;white-space:nowrap}
.ai-connect-word.is-in{animation:st-word-in .6s cubic-bezier(.22,1,.36,1) both}
.ai-connect-word.is-out{animation:st-word-out .45s cubic-bezier(.4,0,1,1) both}
@media (prefers-reduced-motion:reduce){.ai-connect-words{transition:none}.ai-connect-word.is-in,.ai-connect-word.is-out{animation:none}}
/* The button is wider than the other rows' (up to "Подключить другой ИИ"), so a narrow row (a phone) puts it under the
   name, lined up with it, instead of over it. One width for every language, so the layout never changes with the words. */
.st .ai-connect .accounts-list{container:ai-connect / inline-size}
@container ai-connect (max-width:420px){
  .st .ai-connect .acct{grid-template-columns:36px minmax(0,1fr);row-gap:12px}
  .st .ai-connect .acct .logo{grid-row:span 2;align-self:start}
  .st .ai-connect-btn{grid-column:2;justify-self:start}
}

/* A press shrinks a button a little (scale .96, as on the Vietne page), the same for every button on this page, including
   the ones other modules draw here (elsewhere they move down a pixel). Only what changes is transitioned. */
.st :is(.st-btn,.pill-btn,.btn,.tracking-mini-button,.campaigns-row-action){transition-property:background-color,border-color,color,box-shadow,scale;transition-duration:.15s;transition-timing-function:ease-out}
.st :is(.st-btn,.pill-btn,.btn,.tracking-mini-button,.campaigns-row-action):active:not(:disabled){transform:none;scale:.96}

/* Plan (client only, portal/plan.js): the company's plan beside the heading, then each limit as a row of the same quiet
   group as the team: its name, "used of max", and a thin bar under the ones that fill up (red once full). */
.st [data-icon="crown"]{--ico:url(/icons/ui/crown.svg)}
.st-plan-badge{display:inline-block;margin-left:8px;padding:0 9px;border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:600;line-height:22px;letter-spacing:0;vertical-align:2px}
.st-plan-badge[data-plan="pro"],.st-plan-badge[data-plan="enterprise"]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.st-plan-list{margin:0;padding:0;list-style:none;border-radius:var(--st-group);background:var(--panel);box-shadow:var(--st-surface)}
.st-plan-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;min-height:48px;padding:10px 16px;border-bottom:1px solid var(--line)}
.st-plan-row:last-child{border-bottom:0}
.st-plan-label{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.st-plan-value{font-size:13px;line-height:1.4;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.st-plan-row[data-off] .st-plan-value{color:var(--dim)}
.st-plan-flag{margin-left:6px;color:var(--error-text);font-weight:600}
.st-plan-bar{grid-column:1 / -1;height:4px;overflow:hidden;border-radius:999px;background:var(--panel-2)}
.st-plan-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.st-plan-row[data-full] .st-plan-bar i{background:var(--error-text)}
.st-plan-body .st-help{margin-top:10px}

/* Team (client only, portal/team.js): invite by e-mail, then the people and the open invitations as rows of a quiet
   group: a round picture (photo, or initials on a tint of their own), name over e-mail, the actions on the right. */
.st [data-icon="user-plus"]{--ico:url(/icons/ui/user-plus.svg)}
.st-team-invite-row{display:flex;gap:8px}
.st-team-invite-row .st-input{flex:1 1 auto;min-width:0}
.st-team-invite-row .st-btn{flex:none}
.st-team-group{margin-top:28px}
.st-team-heading{padding-bottom:8px;font-size:13px;font-weight:600;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.st-team-list{margin:0;padding:0;list-style:none;border-radius:var(--st-group);background:var(--panel);box-shadow:var(--st-surface)}
.st-team-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:60px;padding:10px 16px;border-bottom:1px solid var(--line)}
.st-team-row:last-child{border-bottom:0}
.st-team-avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border-radius:50%;background:hsl(var(--hue,220) 70% 93%);color:hsl(var(--hue,220) 45% 30%);font-size:13px;font-weight:600;line-height:1;letter-spacing:.02em}
.st-team-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.st-team-avatar.is-pending{border:1px dashed var(--line);background:var(--panel-2);color:var(--muted)}
.st-team-avatar.is-pending::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url(/icons/ui/envelope.svg) center/contain no-repeat;mask:url(/icons/ui/envelope.svg) center/contain no-repeat}
:root[data-theme="dark"] .st-team-avatar:not(.is-pending){background:hsl(var(--hue,220) 30% 25%);color:hsl(var(--hue,220) 75% 86%)}
.st-team-who{flex:1 1 180px;min-width:0;display:flex;flex-direction:column}
.st-team-name{font-size:14px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.st-team-sub{font-size:13px;line-height:1.4;color:var(--dim);overflow-wrap:anywhere}
.st-team-sub.is-expired{color:var(--warning-text)}
.st-team-badge{display:inline-block;margin-left:4px;padding:0 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:500;line-height:20px;color:var(--muted);vertical-align:1px}
.st-team-actions{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto}
.st-team-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.st-team-ask{font-size:13px;color:var(--muted)}
.st-team-danger{border-color:var(--error-border);background:var(--error-bg);color:var(--error-text)}
@media(hover:hover){.st-team-danger:hover:not(:disabled){border-color:var(--error-text);background:var(--error-bg)}}
.st-team-empty{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px;font-size:14px;color:var(--muted)}

/* Small controls keep their size on screen but get a bigger target: an invisible ::after around them that never reaches a
   neighbour's. External-link icons 34 × 36px (stopping just short of "Renew access" under them), "Renew access" and the
   DNS copy buttons about 34px tall, the connect button 44px, the footer links 40px. */
.st .acct .t a,.st .reconnect-link,.st .pill-btn,.st .senders-copy,.st-legal .legal-links a{position:relative}
.st .acct .t a::after,.st .reconnect-link::after,.st .pill-btn::after,.st .senders-copy::after,.st-legal .legal-links a::after{content:"";position:absolute}
.st .acct .t a::after{inset:-9px -10px}
.st .reconnect-link::after{inset:-8px -4px}
.st .pill-btn::after{inset:-6px -4px}
.st .senders-copy::after{inset:-6px -4px}
.st-legal .legal-links a::after{inset:-10px -4px}

/* Privacy policy and Terms of service: two small plain-text links to the pages on kreative.lv. They sit at the foot of the
   login page (index.html) and of this page; .legal-links is the shared part, loaded on both. */
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px}
.legal-links a{color:var(--muted);font-size:13px;line-height:1.5;text-decoration:none}
@media(hover:hover){.legal-links a:hover{color:var(--text);text-decoration:underline}}
.legal-links a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.st-legal{padding:40px 0 8px}
.st-legal .legal-links{justify-content:flex-start}

@media(max-width:600px){
  .st .senders-checks,.st .senders-bimi-checks{grid-template-columns:minmax(0,1fr)}
  /* Too narrow to wrap the records readably: the table keeps its width and scrolls inside its frame. */
  .st .senders-records-table{min-width:560px}
}
@media(max-width:640px){
  .st{--st-control:44px}
  /* A phone: the panel is the whole screen, and the close button a full 44px target level with the title. */
  .st-dialog,.st-dialog:not(.st-dialog-tabs){width:100%;height:100dvh;border-radius:0;box-shadow:none}
  .st-side{padding:calc(14px + env(safe-area-inset-top)) 16px 0}
  .st-body{padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
  .st-close{top:calc(6px + env(safe-area-inset-top));right:6px;width:44px;height:44px}
  .st-section,.st-company .card{padding:28px 0}
  .st-section-head{margin-bottom:20px}
  .st-grid,.st-company .grid2{grid-template-columns:minmax(0,1fr)}
  .st-avatar{align-items:flex-start;gap:16px}
  .st-avatar-frame{width:64px;height:64px}
  .st-avatar-img{padding:18px}
  .st-actions .st-btn{flex:1 1 auto}
  .st .v-control,.st-input,.st-company .field input{font-size:16px}
  .st-form-foot{flex-direction:column;align-items:stretch}
  .st-form-foot .st-help{flex:none;margin-top:0}
  .st-password-row{max-width:none}
  .st-name .st-actions .st-btn,.st-password .st-actions .st-btn{flex:1 1 auto}
  .st-fact{grid-template-columns:minmax(0,1fr);padding:12px 16px}
  .st-appearance > .st-field{max-width:none}
  /* The account's name and its link icon keep their room beside the connect button (and their targets never touch). */
  .st .acct{column-gap:12px;padding:12px 14px}
  .st .pill-btn{min-width:96px;padding-inline:10px 12px}
  .st-team-invite-row,.st-inline-form{flex-direction:column}
  .st-team-row.is-pending .st-team-actions,.st-team-actions:has(.st-team-confirm){flex:1 1 100%;padding-left:48px}
  .st-team-row.is-pending .st-team-actions .st-btn{flex:1 1 0}
  .st-company .onboarding-actions{justify-content:stretch}
  .st-company #saveOnboard{width:100%}
}