/* Client workspace, version D (D16; docs/design/ComponentCatalog.md §22). This is the mockup's ".c" stylesheet
   (docs/design/version-d/webpack-client-d.source.html), ported rule for rule with the same class names, so the pixel
   check (design/version-d/pixel) can match every element. Its literal colours are the --wc-* tokens of
   WebpackTheme.ClientDark / ClientLight (the mockup's short names below point at them). The admin workspace never carries
   these classes: every rule sits under the client root ".c". */

/* ── Root: the mockup's variables, its font order (Shabnam first, so Persian sets the line box) and its stroke ── */
.c {
    --g0: var(--wc-bg); --g1: var(--wc-surface); --g2: var(--wc-surface-2); --g3: var(--wc-surface-3); --g4: var(--wc-surface-4);
    --ln: var(--wc-line); --ln2: var(--wc-line-strong);
    --tx: var(--wc-fg); --mu: var(--wc-muted); --fa: var(--wc-faint);
    --ind: var(--wc-primary); --ind2: var(--wc-primary-text); --indbg: var(--wc-primary-soft);
    --ok: var(--wc-ok); --warn: var(--wc-warn); --bad: var(--wc-danger);
    --sec: var(--wc-servers); --sec-ink: var(--wc-servers-ink);
    /* The legal footer's height: the shell keeps that room at its bottom. */
    --foot-h: 56px;
    /* One stacking scale (issue 900), lowest first: every z-index reads it, so a menu in the top bar always covers the
       side panel. Local lifts inside a component use under, flat and raise. */
    --z-under: -1; --z-flat: 0; --z-raise: 1; --z-side: 2; --z-bar: 3; --z-scrim: 4; --z-dialog: 5; --z-sheet: 6;
    --z-pop: 7; --z-tray: 8; --z-tip: 9;
    /* A selection or lift ring outside a card (issue 900), and the room a scroller of such cards keeps on each side. */
    --ring-w: 4px; --ring-room: 8px;
    /* A window's gap to the screen's top (and its least gap to the bottom). */
    --win-gap: 84px;
    /* The space from a step's circle and its 2 px ring to its label (issue 900, F-06). */
    --step-gap: 12px;
    /* A side panel section's padding (block, inline), the gap under its title, and one fact row's height (issue 957). */
    --side-pad-b: 16px; --side-pad-i: 20px; --side-title-gap: 12px; --fact-h: 28px;
    /* The gap between a card and what follows it in a page (the domains page's results, a note; issue 965). */
    --box-gap: 14px;
    min-height: 100vh;
    position: relative;
    padding-block-end: var(--foot-h);
    background: var(--g0);
    color: var(--tx);
    font-family: "Shabnam", "Inter", Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.7;
}
html[lang="en"] .c { font-family: "Inter", "Shabnam", Tahoma, sans-serif; }
/* One colour per section (D16.2): the band and the section's accents read --sec. */
.c.s-srv { --sec: var(--wc-servers); --sec-ink: var(--wc-servers-ink); }
.c.s-lib { --sec: var(--wc-library); --sec-ink: var(--wc-library-ink); }
.c.s-acc { --sec: var(--wc-account); --sec-ink: var(--wc-account-ink); }
.c.s-wal { --sec: var(--wc-wallet); --sec-ink: var(--wc-wallet-ink); }
.c.s-dom { --sec: var(--wc-domains); --sec-ink: var(--wc-domains-ink); }
/* The resets reach only the shell's own parts (band, Launchpad, menus) and weigh one element selector, so the
   mockup's classes below and every page class (wp-*, MudBlazor) win over them. */
:where(.c) * { box-sizing: border-box; }
:where(.c .band, .c .lp, .c .pop) a { color: inherit; text-decoration: none; }
:where(.c .band, .c .lp, .c .pop) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:where(.c) summary { list-style: none; cursor: pointer; }
:where(.c) summary::-webkit-details-marker { display: none; }
:where(.c .band, .c .lp, .c .pop) :is(a, button, summary, input):focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
.c .i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: baseline; }
.c .en { font-family: "Inter", sans-serif; direction: ltr; unicode-bidi: isolate; }
.c .mu { color: var(--mu); }
.c .fa { color: var(--fa); }

/* One rule for every control: fixed height, flex centring, line-height 1 (fixes Shabnam text sitting low). */
.c .btn { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; font: inherit; font-weight: 500; white-space: nowrap; }
.c .btn > span { padding-top: 2px; }
.c .btn.sm { height: 32px; padding: 0 14px; font-size: 13px; }
.c .btn.pri { background: var(--ind); color: var(--wc-primary-fg); }
.c .btn.q { background: var(--g3); color: var(--ind2); }
/* One disabled look for every button (Shay 2026-10-26: a disabled Pay looked active). */
.c .btn:disabled, .c .btn[aria-disabled="true"], .c .btn.dis { opacity: .45; cursor: not-allowed; }
.c .btn.t { background: transparent; color: var(--ind2); padding: 0 8px; }
.c .ib { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: var(--g3); color: var(--tx); flex: none; }
.c .ib .i { width: 17px; height: 17px; }
.c .chip { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; line-height: 1; font-weight: 500; background: var(--g3); color: var(--mu); white-space: nowrap; }
.c .chip > span { padding-top: 1px; }
.c .chip.ind { background: var(--indbg); color: var(--ind2); }
/* A chip that is a choice (filters, appearance, language): a bare button around the mockup's span chip. */
.c .cb { display: inline-flex; border-radius: 999px; }
.c .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ok); flex: none; }

/* Top band: section colour, two fixed rows (global bar + app header). Only texts and the action change per app. */
.c .band { background: var(--sec); color: var(--sec-ink); position: relative; }
/* Above the section header and the side panel (the mockup's 1): the bell and account menus live inside the bar here (the mockup draws them after the header), so they must cover both. Still under the scrim. */
.c .bar { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 48px; position: relative; z-index: var(--z-bar); }
.c .brand { display: flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -.3px !important; margin-inline-end: auto; }
/* The brand is Latin: the Persian pages' "no letter-spacing" rule (site.css) does not apply to it, as in the mockup. */
.c .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--sec-ink); color: var(--sec); display: grid; place-items: center; font-size: 16px; }
.c .navp { height: 38px; padding: 0 15px; border-radius: 999px; background: var(--wc-band-shade); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; line-height: 1; white-space: nowrap; }
.c .navp > span { padding-top: 2px; }
.c .navp.on { background: var(--wc-band-shade-strong); }
.c .vsep { width: 1px; height: 24px; background: currentColor; opacity: .25; margin: 0 6px; flex: none; }
.c .bi { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.c .bi .i { width: 20px; height: 20px; }
.c .bi.on, .c details[open] > .bi { background: var(--wc-band-shade-open); }
.c .bi .nd { position: absolute; top: 7px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--wc-notify-dot); box-shadow: 0 0 0 2px var(--sec); }
.c .apph { height: 68px; display: flex; align-items: center; gap: 14px; padding: 0 48px; position: relative; z-index: var(--z-raise); }
.c .apph .ib { background: var(--wc-band-shade-button); color: inherit; width: 38px; height: 38px; }
.c .apph .h1 { margin: 0; color: inherit; font-size: 24px; font-weight: 700; line-height: 1; padding-top: 3px; display: flex; align-items: center; gap: 10px; }
.c .apph .h1 .i { width: 22px; height: 22px; }
/* FocusOnNavigate focuses the title for screen readers; like site.css's outline, the global focus ring is not drawn on it. */
.c .apph .h1:focus-visible { box-shadow: none; }
.c .apph .act { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.c .apph .actb { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--wc-band-shade-button); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; line-height: 1; white-space: nowrap; }
.c .apph .actb > span { padding-top: 2px; }
.c .apph .act .actb.q { background: transparent; border: 1px solid var(--ln2); color: var(--tx); }

/* Page body */
.c .body { padding: 26px 96px; }

/* Overlays */
.c .scrim { position: fixed; inset: 0; background: var(--wc-scrim); z-index: var(--z-scrim); }
.c .pop { position: absolute; z-index: var(--z-pop); background: var(--g2); border: 1px solid var(--ln2); border-radius: 16px; box-shadow: var(--wc-shadow-popover); color: var(--tx); }
.c .lab { display: block; font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.c details:not([open]) > .pop { display: none; }

/* Launchpad */
.c .lp { position: absolute; z-index: var(--z-dialog); top: 72px; left: 50%; transform: translateX(-50%); width: 780px; max-width: calc(100vw - 32px); background: var(--g1); border: 1px solid var(--ln2); border-radius: 18px; box-shadow: var(--wc-shadow-launchpad); padding: 16px; color: var(--tx); }
.c .lps { height: 46px; border-radius: 12px; background: var(--g2); border: 1px solid var(--ln2); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 15px; color: var(--fa); position: relative; cursor: text; }
.c .lp .lps input[type="search"] { position: absolute; z-index: var(--z-flat); box-shadow: none; min-height: 0; margin: 0; inset: 0; width: 100%; height: 100%; padding: 0 0 0 0; padding-inline: 42px 72px; border: 0; outline: 0; background: transparent; color: var(--tx); font: inherit; border-radius: 12px; }
.c .lp .lps input[type="search"]:focus, .c .lp .lps input[type="search"]:focus-visible { outline: 0; border: 0; box-shadow: none; background: transparent; }
.c .lps input::-webkit-search-cancel-button { display: none; }
.c .lps kbd { position: relative; z-index: var(--z-raise); margin-inline-start: auto; font-family: "Inter", sans-serif; font-size: 11px; color: var(--mu); border: 1px solid var(--ln2); border-radius: 6px; padding: 2px 6px; }
.c .feat { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--wc-feature); }
.c .feat .t2 { color: var(--ind2); font-weight: 500; margin-inline-start: auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.c .feat .ap { width: auto; flex: none; height: auto; padding: 0; }
.c .feat .mu { font-size: 12.5px; }
.c .feat.off { background: var(--g2); }
.c .feat.off .ai { background: var(--g4); color: var(--mu); }
.c .feat .ib { inline-size: 30px; block-size: 30px; background: transparent; }
.c .grp { margin-top: 12px; }
.c .grp .gh { margin: 0 4px 4px; font-size: 12px; color: var(--fa); font-weight: 500; line-height: 1.7; }
.c .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 6px; }
.c .ap { width: 100%; height: 46px; display: flex; align-items: center; justify-content: flex-start; text-align: start; gap: 10px; padding: 0 8px; border-radius: 10px; font-weight: 500; }
.c .ap.h, .c a.ap:hover { background: var(--g2); }
.c .ap .ai { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--wc-tile-icon); flex: none; }
.c .ap .ai .i { width: 16px; height: 16px; }
.c .s-srv { background: var(--wc-servers); color: var(--wc-servers-ink) !important; }
.c .s-lib { background: var(--wc-library); }
.c .s-acc { background: var(--wc-account); }
.c .s-wal { background: var(--wc-wallet); }
.c .s-dom { background: var(--wc-domains); }

/* Notifications (bell) and account menus of the global bar: the mockup's "pops" screen */
.c .notif { top: 62px; inset-inline-end: min(92px, calc(100vw - 436px)); width: 420px; padding: 16px; }
.c .notif .nh { display: flex; align-items: center; margin-bottom: 10px; }
.c .notif .nh b { font-size: 17px; }
.c .notif .nh .btn { margin-inline-start: auto; }
.c .notif .nf { display: flex; gap: 6px; margin-bottom: 10px; }
.c .notif .nf .chip, .c .acct .chip { height: 28px; padding: 0 12px; }
.c .notif .ng { font-size: 12px; margin: 4px 4px; }
.c .notif .ng + .ng, .c .notif .nt + .ng { margin: 8px 4px 4px; }
.c .nt { display: flex; align-items: stretch; gap: 12px; padding: 12px 14px; border-radius: 12px; width: 100%; text-align: start; }
.c .nt.un { background: var(--g3); }
.c .nt .ap { width: auto; height: auto; padding: 0; }
.c .nt .nb { line-height: 1.55; flex: 1; }
.c .nt .nb b { font-weight: 500; }
.c .nt .nb .mu { display: block; font-size: 12.5px; }
.c .nt > .fa { font-size: 11.5px; white-space: nowrap; }
.c .nt > .dot { background: var(--ind2); margin-top: 6px; }
.c .notif .nmore { text-align: center; margin-top: 8px; }
.c .notif .nlist { max-height: calc(100vh - 220px); overflow: auto; }
.c .notif .nlist > .ng:first-child { margin-top: 0; }
/* The account menu opens under its button, its edge on the button's (acct); one top-bar menu is open at a time. */
.c #wc-account { position: relative; }
.c .acct { inset-block-start: 49px; inset-inline-end: 0; width: 470px; padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.c .acct > .lgl { grid-column: 1 / -1; border-block-start: 1px solid var(--ln2); padding-block-start: 12px; display: flex; gap: 18px; font-size: 12px; line-height: 1; }
.c .acct > .lgl a { color: var(--fa); }
.c .acct .chip { height: 30px; }
.c .acct .hi { font-size: 16px; }
.c .acct .mail { font-size: 12.5px; margin-bottom: 14px; }
/* The Latin address must not grow the line past the Persian line height (acct). */
.c .acct .mail > .en { vertical-align: top; }
.c .acct .chips { display: flex; gap: 6px; margin-bottom: 12px; }
.c .acct .chips .i { width: 14px; height: 14px; margin-inline-end: 4px; }
.c .acct .cur { font-size: 12.5px; }
.c .acct .cur a { color: var(--ind2); }
.c .acct .out { display: flex; margin: 16px 0 0; }
.c .acct .links { border-inline-start: 1px solid var(--ln2); padding-inline-start: 16px; display: grid; gap: 2px; align-content: start; }
.c .acct .mi { height: 38px; display: flex; align-items: center; gap: 10px; color: var(--tx); white-space: nowrap; }

/* ── Servers (D16 servers slice; the mockup's empty, list, side, power and term screens) ── */
/* A version D page wraps its markup in ".vd" (display: contents): the same resets as the shell's, for its own parts only. */
.c .vd { display: contents; }
:where(.c .vd) a { color: inherit; text-decoration: none; }
:where(.c .vd) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:where(.c .vd) :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
.c b.en { font-weight: 500; }
.c .btn.ink { background: var(--wc-ink); color: var(--wc-ink-fg); }
.c .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mu); white-space: nowrap; }
/* The empty state fills the band: the band grows to the window and clips its background drawing. */
.c .band:has(.semp) { height: 820px; min-height: 100vh; overflow: hidden; }
.c .bgsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c .bgsvg .wave { fill: var(--wc-band-shade); }
.c .semp { position: relative; z-index: var(--z-raise); display: grid; justify-items: center; text-align: center; margin-top: 120px; }
.c .semp .ico { width: 96px; height: 96px; border-radius: 26px; background: var(--sec-ink); color: var(--sec); display: grid; place-items: center; }
.c .semp .ico .i { width: 46px; height: 46px; stroke-width: 1.5; }
.c .semp h2 { margin: 26px 0 4px; font-size: 32px; line-height: 1.4; font-weight: 700; color: inherit; }
.c .semp p { margin: 0 0 26px; font-size: 16px; opacity: .85; }
.c .semp .btn { height: 46px; padding: 0 24px; font-size: 15px; }
/* The page tabs sit right under the band across the whole width (under the side panel too); the body makes room. */
.c .ptabs { position: absolute; top: 132px; inset-inline: 0; display: flex; align-items: stretch; gap: 28px; height: 64px; border-bottom: 1px solid var(--ln); padding: 0 96px; }
.c .body:has(.ptabs) { padding-top: 90px; }
/* An open side panel takes 410 px at the inline end; the list keeps 60 px from it. */
.c .body:has(.side) { padding-inline-end: 470px; }
.c .ptabs > * { display: flex; align-items: center; padding: 3px 2px 0; line-height: 1; color: var(--mu); font-weight: 500; position: relative; }
.c .ptabs > .on { color: var(--tx); }
.c .ptabs > .on::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sec); }
.c .box { background: var(--g1); border: 1px solid var(--ln); border-radius: 14px; }
.c .boxh { display: flex; align-items: center; gap: 10px; padding: 20px 24px; border-bottom: 1px solid var(--ln); }
.c .boxh h2 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; }
.c .boxh .mu { font-size: 13px; }
.c .boxb { padding: 20px 24px 24px; }
.c .srow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--g2); border: 1px solid var(--ln); border-radius: 12px; cursor: pointer; }
/* Each desktop row is followed by its phone card (hidden here), so the gap is between rows, not adjacent ones. */
.c .srow ~ .srow { margin-top: 8px; }
.c .srow.sel { background: var(--wc-selected); border-color: var(--ind); }
.c .hexi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--wc-servers-soft); color: var(--sec); flex: none; }
.c .srow .nm { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.c .srow .ip { font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--mu); font-weight: 500; }
.c .srow .sp { font-size: 12.5px; color: var(--mu); display: flex; gap: 14px; margin-top: 2px; }
.c .srow .end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.c .srow .end .ib { background: transparent; }
.c .srow .end .ib.open { background: var(--g4); }
.c .tg { width: 42px; height: 24px; border-radius: 999px; background: var(--ind); position: relative; flex: none; padding: 0; border: 0; cursor: pointer; }
.c .tg::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--wc-primary-fg); }
.c .tg.off { background: var(--g4); }
.c .tg.off::after { inset-inline-start: auto; inset-inline-end: 3px; }
.c .tg.dis { opacity: .4; cursor: default; }
.c .addrow { width: 100%; margin-top: 10px; height: 46px; border: 1.5px dashed var(--ln2); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--mu); font-weight: 500; }
.c .mwrap { position: relative; display: inline-flex; }
.c .menu { position: absolute; top: 19.6px; inset-inline-end: -44px; background: var(--g2); border: 1px solid var(--ln2); border-radius: 12px; padding: 6px; width: max-content; min-width: 250px; max-width: calc(100vw - 32px); box-shadow: var(--wc-shadow-menu); z-index: var(--z-sheet); text-align: start; }
.c .menu .mi { width: 100%; height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: 8px; color: var(--tx); font-weight: 400; }
/* The item under the pointer or the focus (the first one when the menu opens) is the mockup's highlighted item. */
.c .menu .mi:hover, .c .menu .mi:focus, .c .menu .mi.h { background: var(--g3); outline: none; }
/* MudBlazor ships a global .red colour utility (a red fill); the menu keeps the mockup's plain item. */
.c .menu .mi.red { color: var(--wc-danger-text); background: transparent; }
.c .menu .mi.red:hover, .c .menu .mi.red:focus { background: var(--g3); }
.c .menu hr { border: 0; border-top: 1px solid var(--ln2); margin: 6px 0; }
.c .bar2 { height: 6px; border-radius: 9px; background: var(--g4); overflow: hidden; }
.c .bar2 i { display: block; height: 100%; background: var(--sec); border-radius: 9px; }
/* It ends where the legal footer starts (issue 900), so the footer line never runs under it. */
.c .side { position: absolute; top: 132px; bottom: var(--foot-h); inset-inline-end: 0; width: 410px; background: var(--g1); border-inline-start: 1px solid var(--ln); overflow: hidden auto; z-index: var(--z-side); }
.c .sideh { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--ln); }
.c .sideh h3 { margin: 0; font-size: 17px; line-height: 1; padding-top: 2px; margin-inline-end: auto; font-weight: 700; }
/* The server panel's title (issue 957, Shay 2026-10-26 03:27): on the desktop the chosen row beside the panel shows the
   name, so the title is for screen readers only (the panel stays labelled by it); on a phone the panel is the page and
   keeps it. */
@media (min-width: 761px) {
    .c .side > .sideh > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .c .side > .sideh > h3 + .ib, .c .side > .sideh > h3 + .mwrap { margin-inline-start: auto; }
}
.c .sideh .ib { background: transparent; }
/* SV-8 (issue 1158): the side panel's ⋮ menu opens under its button, inside the panel. */
.c .sideh .mwrap .menu { top: 40px; inset-inline-end: 0; }
@media (max-width: 760px) { .c .sideh .mwrap .menu { display: none; } }
.c .sidep { padding: var(--side-pad-b) var(--side-pad-i); background: var(--g2); border-bottom: 1px solid var(--ln); }
.c .sidep .pl { display: flex; align-items: center; gap: 8px; margin-bottom: var(--side-title-gap); }
.c .sidep .pl .st { margin-inline-start: auto; }
.c .sidep .pr { font-size: 12.5px; margin-bottom: 12px; }
.c .sidep .ord { font-size: 11.5px; margin-top: 10px; }
/* One fact per line: with its label and icon a fact no longer fits half the panel (issue 957). */
.c .spec { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 13px; }
/* A fact row (FactRow): label icon, "label:", the value, the hint. */
.c .fact { display: flex; align-items: center; gap: 6px; min-height: var(--fact-h); min-width: 0; color: var(--mu); }
.c .fact b { color: var(--tx); font-weight: 500; overflow-wrap: anywhere; }
.c .fact .i { width: 14px; height: 14px; flex: none; color: var(--fa); }
.c .fact .ii .i { width: 13px; height: 13px; }
.c .sider { padding: var(--side-pad-b) var(--side-pad-i); border-bottom: 1px solid var(--ln); }
.c .sider > b, .c .sidet > b { font-size: 14px; }
.c .sidet > b { display: block; margin-bottom: var(--side-title-gap); }
.c .sider .rd { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mu); margin: 6px 0; }
.c .sider .ar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 12px; border: 1px solid var(--ln); border-radius: 10px; }
.c .sider .ar .mu { margin-inline-start: auto; font-size: 12.5px; }
.c .sidet { padding: var(--side-pad-b) var(--side-pad-i); }
.c .tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.c .tool { display: grid; justify-items: center; gap: 6px; padding: 10px 2px 9px; white-space: nowrap; border-radius: 12px; background: var(--g2); border: 1px solid var(--ln); font-size: 12px; text-align: center; line-height: 1.3; color: var(--tx); }
.c .tool .ti { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--wc-servers-soft); color: var(--sec); }
.c .tool.dz .ti { background: var(--wc-danger-soft-tool); color: var(--wc-danger-icon); }
.c .tool[aria-disabled="true"] { cursor: default; }
.c .modal { position: fixed; z-index: var(--z-dialog); background: var(--g1); border: 1px solid var(--ln2); border-radius: 20px; box-shadow: var(--wc-shadow-modal); overflow: hidden; color: var(--tx); }
.c .modal.pw { width: 460px; inset-inline-end: 410px; top: 170px; padding: 24px; overflow: visible; }
.c .modal.pw h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.c .modal.pw > p.mu { margin: 0 0 16px; font-size: 13px; }
.c .modal.tw { inset: 60px 110px 80px; }
.c .modal.tw .sideh { height: 62px; padding: 0 20px; }
.c .modal.tw .sideh .hexi { width: 32px; height: 32px; }
.c .modal.tw .sideh h3 .mu { font-weight: 400; font-size: 14px; }
.c .mclose { position: absolute; top: 22px; inset-inline-end: 22px; }
.c .mclose.ib { background: transparent; }
.c .opt { width: 100%; height: 52px; border-radius: 11px; border: 1px solid var(--ln2); background: var(--g1); display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 16px; font-weight: 500; text-align: start; color: var(--tx); }
.c .opt + .opt { margin-top: 8px; }
.c .opt.on { border: 2px solid var(--ind); background: var(--wc-selected-option); padding: 0 15px; }
/* A button centres its content by default; the mockup's option is a block that starts at the inline start. */
.c .opt.tall { height: 66px; justify-content: flex-start; }
.c .opt .hexi { width: 38px; height: 38px; }
.c .opt .hexi[data-tone="dz"] { background: var(--wc-danger-soft); color: var(--wc-danger-icon); }
.c .opt .ot { display: block; line-height: 1.4; }
.c .opt .ot > span { display: block; }
.c .opt .ot small { display: block; }
.c .opt small { font-weight: 400; }
.c .note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--mu); margin: 0 0 10px; }
.c .note .i { color: var(--ind2); width: 16px; height: 16px; margin-top: 2px; }
/* F-21 (issue 965): a note right after a card keeps the card gap, never sitting on its edge; a note with a button (the
   domains page's "owner needed") centres the button and puts it at the end, under the text on a narrow screen. */
.c .box + .note { margin-block-start: var(--box-gap); }
.c .note:has(> .btn) { align-items: center; flex-wrap: wrap; }
.c .note:has(> .btn) .i { margin-top: 0; }
.c .note > .btn { margin-inline-start: auto; }
.c .modal.pw .note { margin: 14px 0 0; }
.c .modal.pw .acts { display: flex; gap: 8px; margin-top: 18px; }
.c .modal.pw .acts .btn { flex: 1; }
.c .btn.dz { background: var(--wc-danger-fill); color: var(--wc-danger-fill-fg); }
.c .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--wc-spin-track); border-top-color: var(--ind2); flex: none; animation: c-spin 1s linear infinite; }
.c .st .spin { width: 13px; height: 13px; border-width: 2px; }
.c .st a.stl { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@keyframes c-spin { to { transform: rotate(360deg); } }
/* The live terminal panel sits inside: only its output is left-to-right code; its notices keep the page direction. */
.c .term { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.75; background: var(--wc-term-bg); color: var(--wc-term-fg); padding: 18px 20px; height: calc(100% - 62px); }
.c .term { box-sizing: border-box; }
/* The terminal itself is mono and LTR; a notice or the closed state beside it (limit reached, access lost) is page text. */
.c .term .wp-tool-panel { font-family: "Shabnam", "Inter", Tahoma, sans-serif; font-size: 14px; line-height: 1.7; }
html[lang="en"] .c .term .wp-tool-panel { font-family: "Inter", "Shabnam", Tahoma, sans-serif; }
.c .term .wp-tool-panel, .c .term .wp-terminal { height: 100%; }
.c .term .g { color: var(--wc-term-user); }
.c .term .b { color: var(--wc-term-path); }
.c .tray { position: fixed; z-index: var(--z-tray); bottom: 18px; inset-inline-start: 24px; display: flex; gap: 8px; }
.c .tray .tb { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--g3); border: 1px solid var(--ln2); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--wc-shadow-tray); line-height: 1; font-weight: 500; color: var(--tx); }
.c .tray .tb > span { padding-top: 2px; }

/* Narrower screens: between the desktop and the phone, the backbone's rules (D16, planner 2026-10-14): nothing wraps or
   scrolls sideways. */
@media (max-width: 1100px) {
    .c .bar, .c .apph { padding: 0 24px; }
    .c .body { padding: 24px 32px; }
}

/* ── Phone, 760 px and narrower (the mockup's phlist, phpad, phacct and phnotif, 390 x 844) ──
   The phone-only parts: hidden on wider screens. */
.c .prow, .c .feat .phn, .c .lp .lpx, .c .wc-menu > .scrim, .c .wc-menu > .sheet, .c .notif .hdl, .c .notif .nx { display: none; }
.c .lp .hd { display: contents; }
/* The phone card of a server (the list is the same; one of the two layouts shows). */
.c .prow { background: var(--g2); border: 1px solid var(--ln); border-radius: 12px; padding: 14px; cursor: pointer; }
.c .prow ~ .prow { margin-block-start: 8px; }
.c .prow.sel { background: var(--wc-selected); border-color: var(--ind); }
.c .prow .top { display: flex; align-items: center; gap: 12px; }
.c .prow .nm { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.4; }
.c .prow .ip { font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--mu); font-weight: 500; line-height: 1.5; }
.c .prow .top .mwrap { margin-inline-start: auto; }
.c .prow .top .ib { background: transparent; }
.c .prow .top .ib.open { background: var(--g4); }
.c .prow .bot { display: flex; align-items: center; gap: 10px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--ln); }
.c .prow .bot .sp { font-size: 12.5px; color: var(--mu); }
/* The sheets from the bottom (account, notifications). */
.c .sheet { position: fixed; z-index: var(--z-sheet); inset-inline: 0; inset-block-end: 0; background: var(--g2); border-block-start: 1px solid var(--ln2); border-start-start-radius: 20px; border-start-end-radius: 20px; box-shadow: var(--wc-shadow-sheet); padding: 10px 16px 20px; color: var(--tx); }
.c .sheet .hdl { width: 36px; height: 4px; border-radius: 4px; background: var(--g4); margin: 0 auto 10px; }
.c .sheet .sh { display: flex; align-items: center; gap: 8px; height: 40px; }
.c .sheet .sh b { font-size: 17px; line-height: 1; padding-block-start: 2px; }
.c .sheet .sh .ib { margin-inline-start: auto; }
.c .sheet .mi { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 4px; color: var(--tx); font-weight: 500; }
.c .sheet .mi .i { color: var(--mu); }
.c .sheet .mi .chev { margin-inline-start: auto; color: var(--fa); display: inline-flex; }
.c .acs .sh b { display: block; font-size: 16px; }
.c .acs .mail { font-size: 12.5px; margin: -4px 0 12px; }
/* The Latin address alone on its line: aligned to the top, its taller Inter box does not grow the line (as in the mockup). */
.c .acs .mail > .en { vertical-align: top; }
.c .wrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--g3); }
.c .wrow .ap { width: auto; height: auto; padding: 0; }
.c .wrow .mu { font-size: 12px; }
.c .wrow b { font-size: 15px; }
.c .wrow .btn { margin-inline-start: auto; }
.c .acs .prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; }
.c .acs .chips { display: flex; gap: 6px; }
.c .acs .chip { height: 30px; padding: 0 12px; }
.c .acs .mis { border-block-start: 1px solid var(--ln2); margin-block-start: 10px; padding-block-start: 6px; }
.c .acs .sf { display: flex; align-items: center; border-block-start: 1px solid var(--ln2); margin-block-start: 6px; padding-block-start: 14px; }
.c .acs .sf form { display: flex; margin: 0; }
.c .acs .lg { margin-inline-start: auto; display: flex; gap: 16px; font-size: 12px; line-height: 1; color: var(--fa); }
.c .acs .lg a { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
    /* The global bar: the mark and three round buttons (Launchpad, notifications, account); the library and the
       wallet leave the bar for the Launchpad and the account sheet. */
    .c .bar { height: 56px; padding: 0 16px; gap: 4px; }
    .c .brand { font-size: 19px; gap: 8px; }
    .c .logo { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
    .c .bar a.navp, .c .bar .vsep { display: none; }
    .c .bar button.navp { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; background: transparent; }
    .c .bar button.navp.on { background: var(--wc-band-shade-open); }
    .c .bar button.navp .i { width: 20px; height: 20px; }
    .c .bar button.navp > span { display: none; }
    /* The section header: 56 high, its action an icon only. */
    .c .apph { height: 56px; padding: 0 16px; gap: 10px; }
    .c .apph .ib { width: 36px; height: 36px; }
    .c .apph .h1 { font-size: 20px; gap: 8px; }
    .c .apph .h1 .i { width: 20px; height: 20px; }
    .c .apph .actb { width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center; }
    .c .apph .actb > span { display: none; }
    .c .apph .actb .i { width: 17px; height: 17px; }
    .c .body { padding: 16px; }
    .c .ptabs { inset-block-start: 112px; height: 52px; gap: 22px; padding: 0 16px; }
    .c .body:has(.ptabs) { padding-block-start: 68px; }
    /* My servers: the cards without the box around them. */
    .c .box:has(.prow) { background: none; border: 0; border-radius: 0; }
    .c .box:has(.prow) > .boxh { display: none; }
    .c .box:has(.prow) > .boxb { padding: 0; }
    .c .srow { display: none; }
    .c .prow { display: block; }
    .c .addrow { height: 44px; }
    /* The Launchpad fills the screen: search and close, the continue card, four tiles to a row with the name under each. */
    .c .lp { position: fixed; inset: 0; transform: none; width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 12px 16px 16px; overflow: hidden auto; }
    .c .lp .hd { display: flex; align-items: center; gap: 10px; }
    .c .lp .lps { flex: 1; }
    .c .lp .lps kbd { display: none; }
    .c .lp .lpx { display: inline-grid; }
    .c .feat .dk { display: none; }
    .c .feat .phn { display: block; }
    .c .lp .grp { margin-block-start: 14px; }
    .c .lp .grp .gh { margin: 0 2px 8px; }
    .c .lp .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
    .c .lp .apps .ap { height: auto; display: grid; justify-content: normal; justify-items: center; align-content: start; gap: 6px; padding: 0; border-radius: 0; text-align: center; font-size: 12px; line-height: 1.45; background: none; }
    .c .lp .apps .ap .ai { width: 48px; height: 48px; border-radius: 14px; }
    .c .lp .apps .ap .ai .i { width: 22px; height: 22px; }
    .c .lp .apps .ap.h .ai { box-shadow: 0 0 0 2px var(--g1), 0 0 0 4px var(--ind2); }
    /* The account and notifications menus are sheets from the bottom over a scrim; the bar then stacks above the
       footer so the sheet covers it. */
    .c .bar:has(.wc-menu[open]) { z-index: var(--z-pop); }
    .c .wc-menu[open] > .scrim { display: block; }
    .c .wc-menu[open] > .sheet { display: block; }
    .c .acct { display: none; }
    .c .notif { position: fixed; z-index: var(--z-sheet); inset-inline: 0; inset-block-end: 0; inset-block-start: auto; width: auto; background: var(--g2); border: 0; border-block-start: 1px solid var(--ln2); border-start-start-radius: 20px; border-start-end-radius: 20px; box-shadow: var(--wc-shadow-sheet); padding: 10px 16px 20px; }
    .c .notif .hdl { display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--g4); margin: 0 auto 10px; }
    .c .notif .nh { height: 40px; gap: 8px; margin: 0; }
    .c .notif .nh b { line-height: 1; padding-block-start: 2px; }
    .c .notif .nx { display: inline-grid; margin-inline-start: auto; }
    .c .notif .nh .btn + .nx { margin-inline-start: 0; }
    .c .notif .nf { margin: 8px 0; }
    .c .notif .ng, .c .notif .ng + .ng, .c .notif .nt + .ng { margin: 8px 2px 4px; }
    .c .notif .nlist { max-height: calc(100vh - 240px); }
    .c .nt { padding: 12px; }
    .c .nt > .fa { font-size: 12px; }
    .c .nt > .dot { display: none; }
}
/* ── Server windows (D16 server windows slice; the mockup's wapps, wrec, wssh, wuse, wre, wrenew, toff, tip, trec, tkeys) ── */
/* A window is as tall as its content, up to the screen less its gaps (issue 900, F-01): the mockup's fixed height left a
   large empty body on a tall screen. Its body scrolls past that. */
.c .modal.win { top: var(--win-gap); bottom: auto; max-height: calc(100dvh - 2 * var(--win-gap)); inset-inline-end: 260px; width: 760px; display: flex; flex-direction: column; }
.c .win .sideh { height: 64px; padding: 0 20px; flex: none; }
.c .win .sideh .hexi { width: 32px; height: 32px; }
/* The subtitle (an item's stored name) is its own muted line under the title, cut with its full text in a tip (issue 900). */
.c .sideh h3:has(.sub) { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; padding-top: 0; }
.c .sideh h3 .sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c .win .wb { padding: 20px 24px; overflow: hidden auto; flex: 1; }
/* The footer wraps its actions onto more rows when they do not fit (DM-1, issue 1127: the domain window's renew button, five
   tools and reminder ran off the window); one row keeps the 64 px bar. */
.c .win .wf { min-height: 64px; flex: none; border-top: 1px solid var(--ln); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; }
.c .win .wf .end { margin-inline-start: auto; }
.c .lrow { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px; border: 1px solid var(--ln); border-radius: 12px; background: var(--g2); position: relative; }
.c .lrow + .lrow { margin-top: 8px; }
.c .lrow .tx { line-height: 1.45; }
.c .lrow .tx b { font-weight: 500; }
.c .lrow .tx small { display: block; font-size: 12px; color: var(--mu); }
.c .lrow .end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.c .lrow .ib { background: transparent; }
.c .lrow > .hexi { width: 36px; height: 36px; }
.c .st.bad .dot { background: var(--bad); }
/* The apps window's rows and login card (D14, mockup v25 wlog to wlogmany): a row and its open card sit in one list item. */
.c .win .applist > div + div { margin-block-start: 8px; }
.c .win .applist .tx > b.en { vertical-align: top; }
.c .lrow > .mini { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--wc-card-fg); flex: none; }
.c .lrow .btn.t .chev { width: 14px; height: 14px; }
.c .lrow.open .btn.t .chev { transform: rotate(180deg); }
.c .lrow.open { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end-color: transparent; }
.c .lgn { border: 1px solid var(--ln); border-block-start: 0; border-radius: 0; border-end-start-radius: 12px; border-end-end-radius: 12px; background: var(--g2); padding-block: 2px 14px; padding-inline: 14px; }
.c .lgn .lf { display: flex; align-items: center; gap: 12px; }
.c .lgn .lf + .lf { margin-block-start: 8px; }
.c .lgn .lf > span { width: 92px; flex: none; font-size: 12.5px; color: var(--mu); }
.c .lgn .cmd { flex: 1; min-width: 0; height: auto; min-height: 40px; background: var(--g0); word-break: break-all; }
.c .lgn .cmd .ib + .ib { margin-inline-start: 0; }
.c .lgn .hint { display: flex; align-items: center; gap: 6px; margin-block-start: 12px; font-size: 12px; color: var(--fa); }
.c .lgn .hint .i { width: 14px; height: 14px; flex: none; }
.c .lgn .skl { background: transparent; display: grid; gap: 14px; padding-block: 12px 4px; }
.c .lgn .skl i + i { margin-block-start: 0; }
.c .lgn .skl i:nth-child(1) { width: 70%; }
.c .lgn .skl i:nth-child(2) { width: 45%; }
.c .lgn .skl i:nth-child(3) { width: 55%; }
.c .lgn .lerr { display: flex; align-items: center; gap: 10px; padding-block-start: 10px; }
.c .lgn .lerr > .i { color: var(--bad); flex: none; }
.c .lgn .lerr .btn { margin-inline-start: auto; }
.c .lgn > p.mu { margin-block: 10px 0; margin-inline: 0; font-size: 13px; }
.c .win .wf .mu.end { font-size: 12px; }
.c .kvr { display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 48px; border-bottom: 1px solid var(--ln); gap: 12px; }
.c .kvr > span:first-child { color: var(--mu); font-size: 13px; }
.c .kvr .val { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.c .kvr .val .ib { width: 30px; height: 30px; background: var(--g3); }
.c .kvr .val .ib .i { width: 15px; height: 15px; }
.c .cmd { height: 44px; border-radius: 10px; background: var(--wc-term-bg); border: 1px solid var(--ln2); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--wc-term-fg); direction: ltr; }
.c .cmd .ib { margin-left: auto; width: 30px; height: 30px; background: var(--g3); color: var(--tx); }
.c .kcard { border: 1px solid var(--ln); border-radius: 14px; padding: 14px 16px; background: var(--g2); margin-top: 18px; }
.c .kcard .kh { display: flex; align-items: center; gap: 12px; }
.c .kcard .kh > div { line-height: 1.5; }
.c .kcard .kh b { font-weight: 500; }
.c .kcard .kh .btn { margin-inline-start: auto; }
/* The tone sits in data-tone, not a class, so a tile keeps the mockup's class list. */
.c .hexi[data-tone="key"] { background: var(--wc-account-soft); color: var(--wc-account-text); }
.c .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c .meter { border: 1px solid var(--ln); border-radius: 14px; background: var(--g2); padding: 16px 18px; }
.c .meter .mh { display: flex; align-items: center; gap: 8px; color: var(--mu); font-size: 13px; line-height: 1; }
.c .meter .v { font-size: 28px; font-weight: 700; margin: 10px 0 10px; line-height: 1; }
.c .meter .v small { font-size: 13px; font-weight: 400; color: var(--mu); margin-inline-start: 6px; }
.c .meter .bar2 { height: 8px; }
.c .meter .bar2[data-tone="warn"] i { background: var(--warn); }
.c .tool.off { opacity: .45; position: relative; }
.c .tool.off .ti { background: var(--g3); color: var(--mu); }
.c .tool .lk { position: absolute; top: 6px; inset-inline-end: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--g4); color: var(--tx); display: grid; place-items: center; }
.c .tool .lk .i { width: 11px; height: 11px; }
.c .tip { position: absolute; z-index: var(--z-tip); width: 260px; padding: 12px 14px; border-radius: 12px; background: var(--g3); border: 1px solid var(--ln2); box-shadow: var(--wc-shadow-tip); font-size: 12.5px; line-height: 1.75; color: var(--tx); }
.c .tip::after { content: ""; position: absolute; top: -6px; inset-inline-start: 26px; width: 10px; height: 10px; background: var(--g3); border-top: 1px solid var(--ln2); border-inline-start: 1px solid var(--ln2); transform: rotate(45deg); }
.c .tip.up::after { top: auto; bottom: -6px; transform: rotate(225deg); }
.c .tip b { display: block; font-weight: 500; margin-bottom: 2px; }
/* A tip (InfoTip, a locked tile's reason) opens in the top layer (issue 957), so no scroll box cuts it: site.js puts it
   beside its host (--tip-x, --tip-y), above when there is no room below (data-side), and the arrow at the host's middle
   (--tip-ax). data-open shows it where the browser has no popovers. */
.c .tip[popover] { position: fixed; inset: auto; left: var(--tip-x); top: var(--tip-y); margin: 0; overflow: visible; text-align: start; font-weight: 400; white-space: normal; }
.c .tip[popover]:not([data-open]) { display: none; }
.c .tip[popover]::after { inset-inline: auto; left: calc(var(--tip-ax, 26px) - 5px); border: 0; border-top: 1px solid var(--ln2); border-left: 1px solid var(--ln2); }
.c .tip[popover][data-side="down"]::after { top: -6px; bottom: auto; transform: rotate(45deg); }
.c .tip[popover][data-side="up"]::after { top: auto; bottom: -6px; transform: rotate(225deg); }
.c .modal.pw.cf { top: 200px; }
.c .modal.pw.cf.fld { top: 160px; }
.c .modal.pw.cf > p.mu { line-height: 1.85; }
.c .modal.pw.cf .lab { display: block; }
.c .modal.pw.cf .lab b { font-weight: 700; }
.c .modal.pw.cf h3 { padding-inline-end: 40px; margin-bottom: 8px; }
.c .modal.pw.cf .inp { height: 44px; }
/* The keys tab's add-key dialog (kadd): its own place, a gap above the key field and a taller key box. */
.c .modal.pw.cf.kadd { top: 150px; }
.c .modal.pw.cf.kadd .lab.kpub { margin-top: 14px; }
.c .modal.pw.cf.kadd .inp.ta { height: 84px; }
.c .win .lab.cmdl { margin-top: 18px; }
/* Latin dots: the Persian pages' "no letter-spacing" rule (site.css) does not apply, as with the brand. */
.c .kvr .val .dots { letter-spacing: 2px !important; }
.c .kcard .fp { font-size: 12px; }
.c .kcard .kmenu { margin-inline-start: auto; position: relative; }
.c .kcard .kmenu .menu { top: 40px; inset-inline-end: 0; min-width: 260px; }
.c .kvr.procs { margin-top: 14px; border-bottom: 0; }
.c .win .wf .meas { font-size: 12.5px; }
.c .win .lede3 { margin: 0 0 10px; font-size: 13px; }
.c .win .recnew { display: flex; gap: 8px; margin-bottom: 18px; }
.c .win .recnew .inp { flex: 1; }
.c .win .recnew .btn { height: 44px; }
.c .lrow .rmenu { position: relative; }
.c .lrow .rmenu .menu { top: 59px; inset-inline-end: 0; min-width: 220px; }
.c .win p.none { font-size: 13px; }
.c .modal.pw .note.re { margin: 0 0 14px; }
.c .lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--ind2); cursor: pointer; }
.c .ii { position: relative; display: inline-grid; place-items: center; }
.c .toolw { position: relative; display: grid; }
.c .toolw .tip a { color: var(--ind2); }
.c .sider .aroff { font-size: 12px; margin-top: 6px; }
.c .win .appsh { display: flex; align-items: center; margin-bottom: 14px; }
.c .win .appsh .mu { font-size: 13px; }
.c .win .appsh .btn { margin-inline-start: auto; }

/* ── Plan picker (setup slice, the mockup's "plans" screen): the "new server" window with plan family cards ── */
.c .modal.plans { inset: 20px 40px; }
.c .modal.plans .mclose { top: 22px; }
.c .plansb { padding: 26px 32px 0; }
.c .plansb h2 { margin: 0 0 18px; font-size: 26px; line-height: 1.3; font-weight: 700; }
.c .plansg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; }
.c .ltabs { display: flex; gap: 28px; border-bottom: 1px solid var(--ln); }
.c .ltabs > * { font: inherit; padding: 0 2px 12px; color: var(--mu); font-weight: 500; position: relative; line-height: 1.4; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.c .ltabs > .on { color: var(--tx); }
.c .ltabs > .on::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ind); }
.c .count { font-size: 12.5px; color: var(--mu); margin: 12px 0 10px; }

/* Library and plan cards (D16.6): the colour and pattern come from CardPattern, the content sits on top. */
.c .lc { position: relative; border-radius: 14px; overflow: hidden; color: var(--wc-card-fg); padding: 18px; display: flex; flex-direction: column; min-height: 214px; isolation: isolate; text-align: start; }
/* A library card's colour: its group (ClientCategories.Tone) as data-tone; a category in no group is grey. */
.c [data-tone="apps"] { --hue: var(--wc-cat-apps); }
.c [data-tone="dev"] { --hue: var(--wc-cat-dev); }
.c [data-tone="monitor"] { --hue: var(--wc-cat-monitor); }
.c [data-tone="security"] { --hue: var(--wc-cat-security); }
.c [data-tone="none"] { --hue: var(--g4); }
.c .mini[data-tone] { background: var(--hue); }
.c .lc .pat, .c .dep .pat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-under); }
.c .lc .tt { font-size: 18px; font-weight: 700; line-height: 1.3; margin-top: auto; }
.c .lc .sub { font-size: 14px; opacity: .85; line-height: 1.3; }
/* One line; the full text is in the details dialog. */
.c .lc .ds { font-size: 12.5px; line-height: 1.6; margin-top: 6px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In the plan picker a family's description wraps, as the mockup draws it (plans). */
.c .modal.plans .lc .ds { white-space: normal; overflow: visible; }
.c .lc .ft { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.c .lc .meta { font-size: 12px; line-height: 1.5; opacity: .9; }
.c .lc .meta b { display: block; font-size: 16px; opacity: 1; font-weight: 700; }
.c .lc .meta b small { font-size: 12px; font-weight: 400; }
.c .lc .acts { margin-inline-start: auto; display: flex; gap: 6px; }
.c .lc .cb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--wc-card-shade); color: inherit; border: 0; padding: 0; cursor: pointer; }
.c .lc .cb.add { background: var(--wc-card-add); color: var(--wc-card-add-fg); }
/* Selected is indigo everywhere (issue 900, DecisionLog D16.6): amber means a warning, and the white "+" means add. */
.c .lc .cb.done { background: var(--ind); color: var(--wc-primary-fg); }
.c .lc .tag { position: absolute; top: 12px; inset-inline-end: 12px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--wc-card-tag); color: var(--wc-card-fg); font-size: 11px; display: inline-flex; align-items: center; line-height: 1; }
.c .lc .ok { position: absolute; top: 12px; inset-inline-end: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--ind); color: var(--wc-primary-fg); box-shadow: 0 0 0 2px var(--g1); display: grid; place-items: center; }
.c .lc .ok .i { width: 15px; height: 15px; stroke-width: 2.4; }
.c .lc.sel .tag { inset-inline-end: 46px; top: 15px; }
.c .lc.lift { z-index: var(--z-pop); box-shadow: 0 0 0 2px var(--g1), 0 0 0 var(--ring-w) var(--ind2), var(--wc-shadow-lift); }
.c .lc.sel { box-shadow: 0 0 0 2px var(--g1), 0 0 0 var(--ring-w) var(--ind); }
.c .lc.ink { color: var(--sec-ink); }
.c .lc.ink .cb { background: var(--wc-card-shade-ink); }
.c .lc .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wc-card-icon-tile); position: absolute; top: 16px; inset-inline-start: 16px; }
.c .lc .ic .i { width: 21px; height: 21px; }
.c .lc .facts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.c .lc .facts span { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--wc-card-shade); font-size: 11.5px; display: inline-flex; align-items: center; line-height: 1; }
.c .sc { border-radius: 14px; background: var(--g2); border: 1px solid var(--ln); padding: 18px; display: flex; flex-direction: column; min-height: 214px; text-align: start; }
.c .sc .hx { color: var(--sec); line-height: 0; }
.c .sc .hx .i { width: 26px; height: 26px; }
.c .sc .tt { font-size: 17px; font-weight: 700; margin-top: 10px; line-height: 1.3; }
.c .sc .sub { color: var(--mu); line-height: 1.3; }
.c .sc .ln { font-size: 12.5px; color: var(--mu); line-height: 1.75; margin-top: 8px; }
.c .sc .pr { font-size: 17px; font-weight: 700; margin-top: 12px; }
.c .sc .pr small { font-size: 12px; color: var(--mu); font-weight: 400; }
.c .sc .btn { margin-top: 10px; width: 100%; }
.c .gend { position: relative; }
.c .gend::after { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-end: -14px; width: 1px; background: var(--ln2); }
.c .gend .gchev { position: absolute; top: 50%; inset-inline-end: -25px; width: 22px; height: 30px; margin-top: -15px; display: grid; place-items: center; background: var(--g1); color: var(--mu); z-index: var(--z-raise); border: 0; padding: 0; cursor: pointer; }
.c .gend .gchev .i { width: 15px; height: 15px; }

/* ── Setup window (setup slice; D16.5): stepper on the side, the step in the middle, a sticky bottom bar ── */
.c .modal.unbox { inset: 14px 16px; }
.c .ubh { height: 72px; display: flex; align-items: center; gap: 10px; padding: 0 32px; }
.c .ubh .mk { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; line-height: 1; margin: 0; }
.c .ubh .mk .logo { background: var(--ind); color: var(--wc-primary-fg); }
.c .ubh .mk .logo .i { width: 16px; height: 16px; }
.c .ubh .mclose { top: 19px; }
.c .ubgrid { display: grid; grid-template-columns: 290px 1fr; height: calc(100% - 72px - 84px); }
.c .stepper { padding: 14px 32px; }
.c .prod { display: flex; gap: 12px; align-items: center; }
.c .prod .pc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--g2); border: 1px solid var(--ln); color: var(--sec); flex: none; }
.c .prod b { display: block; line-height: 1.4; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c .prod small { color: var(--mu); font-size: 12.5px; }
/* The mockup sets the spec line in a 12.5 px line box under the 19.6 px name. */
.c .prod > div { font-size: 12.5px; min-width: 0; }
.c .prod > div b { font-size: 14px; }
.c .steps { position: relative; margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.c .steps::before { content: ""; position: absolute; top: 0; bottom: 24px; inset-inline-start: 21px; width: 2px; background: var(--g4); border-radius: 2px; }
.c .steps li { position: relative; display: flex; align-items: center; gap: 14px; height: 50px; padding-inline-start: calc(44px + var(--step-gap)); color: var(--fa); font-weight: 500; }
.c .steps li .sic { position: absolute; inset-inline-start: 2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--g1); }
.c .steps li.on { color: var(--ind2); }
.c .steps li.on .sic { box-shadow: 0 0 0 2px var(--ind); background: var(--g1); color: var(--ind2); }
.c .steps li.done { color: var(--tx); }
.c .steps li.done .sic { color: var(--tx); }
.c .steps li.done .ck { color: var(--ok); }
.c .steps li .ck { display: grid; }
.c .steps li .ck .i { width: 15px; height: 15px; stroke-width: 2.4; }
.c .steps li.opt small { font-size: 11px; color: var(--fa); font-weight: 400; }
.c .ubmain { overflow: hidden; padding: 6px 0 0; padding-inline: 48px 64px; }
/* Room for a selected card's ring on both inline edges and the top (issue 900): a scroller clips what pokes out. */
.c .ubmain > .scr { height: 100%; overflow-y: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ring-room)); padding-inline: var(--ring-room); padding-block-start: var(--ring-w); }
.c .ubmain > .scr.held { overflow-y: hidden; }
.c .eyebrow { font-size: 12px; color: var(--mu); font-weight: 500; letter-spacing: 0; }
.c .ubmain h2 { margin: 2px 0 4px; font-size: 28px; line-height: 1.35; font-weight: 700; }
.c .ubmain .lede2 { color: var(--mu); margin: 0 0 18px; max-width: 64ch; }
.c .fpanel { background: var(--g2); border: 1px solid var(--ln); border-radius: 14px; padding: 4px 24px 24px; max-width: 760px; }
.c .fs { padding: 18px 0 20px; border-bottom: 1px solid var(--ln); }
.c .fs:last-child { border-bottom: 0; }
.c .fs h4 { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 700; }
.c .fs h4 > label { display: block; }
.c .fs p { margin: 0 0 12px; color: var(--mu); font-size: 13px; }
/* In Persian a Latin run (Inter inside Shabnam) makes a hint's or an error's line box 2 px taller; English mirrors that height. */
html[lang="en"] .c .fs p:has(> .en), html[lang="en"] .c .ferr:has(.en) { padding-bottom: 2px; }
.c .opt .r { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ln2); flex: none; }
.c .opt.on .r { border: 5px solid var(--ind2); }
.c .opt .end { margin-inline-start: auto; color: var(--mu); font-size: 12.5px; font-weight: 400; }
.c .optrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c .optrow .opt + .opt { margin-top: 0; }

/* ---- Form fields (the mockup's .inp; shared with the setup slice): the frame holds the bare input, select or textarea. */
.c .inp { height: 44px; border-radius: 10px; background: var(--g1); border: 1px solid var(--ln2); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--tx); }
.c .inp.ph { color: var(--fa); }
.c .inp .end { margin-inline-start: auto; color: var(--mu); }
.c .inp > span.end { display: block; flex: none; height: 18px; }
.c .inp > span.end > .i { display: block; width: 18px; height: 18px; }
.c .inp > span.end[role="button"] { cursor: pointer; }
.c .inp input, .c .inp select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; outline: none; padding: 0; }
.c .inp input::placeholder, .c .inp textarea::placeholder { color: var(--fa); opacity: 1; }
.c .inp:focus-within { border-color: var(--ind); }
.c .inp .ib { width: 28px; height: 28px; background: transparent; color: var(--mu); }
.c .inp select { appearance: none; cursor: pointer; }
.c .inp select option { background: var(--g1); color: var(--tx); }
.c .inp select option:checked { background: var(--ind); color: var(--wc-primary-fg); }
.c .inp.err { border: 1.5px solid var(--bad); padding: 0 13.5px; }
.c .inp textarea { flex: 1; min-width: 0; align-self: stretch; border: 0; background: transparent; color: inherit; font: inherit; outline: none; resize: none; }
/* Site.css sizes every bare input for the classic forms (font size, line box, height, padding); inside the frame the
   frame decides, as the mockup's text in .inp. */
.c .inp :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; line-height: inherit; box-shadow: none; outline: none; }
.c .inp.ta { height: 76px; align-items: flex-start; padding-top: 10px; font-family: var(--wp-font-mono); font-size: 12.5px; direction: ltr; color: var(--wc-term-fg); }
.c .inp.ta.err { padding-top: 9.5px; }
/* Site.css marks an invalid input with its own border; inside the frame the frame shows it (.inp.err). */
.c .inp :is(input, select, textarea)[aria-invalid="true"] { border: 0 !important; }
.c .ferr { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bad); margin-top: 6px; line-height: 1.6; }
.c .ferr .i { width: 14px; height: 14px; flex: none; }

/* ---- The recovery and SSH keys tabs (the mockup's trec and tkeys). */
.c .rtab + .rtab { margin-top: 14px; }
.c .rtab .boxh > .hexi { width: 32px; height: 32px; }
.c .boxh > .btn { margin-inline-start: auto; }
.c .box .boxb .kdate { font-size: 12.5px; }
.c .box .boxb .note.knote { margin: 14px 0 0; }
.c .inp input::placeholder { color: var(--fa); opacity: 1; }
.c .hint { font-size: 12px; color: var(--mu); margin-top: 6px; line-height: 1.6; }
.c .dashed { width: 100%; height: 44px; border: 1.5px dashed var(--ln2); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; color: var(--mu); font-weight: 500; background: transparent; cursor: pointer; }
.c .kform { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
.c .kacts { display: flex; gap: 8px; margin-top: 12px; }
.c .keyrow { display: flex; gap: 8px; margin-bottom: 8px; }
.c .bbar { position: absolute; bottom: 0; inset-inline: 0; height: var(--bar-h); border-top: 1px solid var(--ln); display: flex; align-items: center; gap: 14px; padding: 0 32px; background: var(--g1); }
.c .bbar .sum b { display: block; line-height: 1.4; font-weight: 700; }
.c .bbar .sum .chips { display: flex; gap: 6px; margin-top: 4px; }
.c .bbar .end { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.c .bbar .price { text-align: end; line-height: 1.35; }
.c .bbar .price b { font-weight: 700; }
.c .bbar .price small { display: block; color: var(--mu); font-size: 12px; }
.c .bbar .btn.pri { height: 44px; padding: 0 22px; }
.c .chip.amb { background: var(--sec); color: var(--sec-ink); }
.c .toast { position: absolute; z-index: var(--z-pop); display: flex; align-items: center; gap: 10px; background: var(--g3); border: 1px solid var(--ln2); border-radius: 12px; padding: 10px 14px; box-shadow: var(--wc-shadow-toast); font-size: 13px; }
.c .toast .i { color: var(--ind2); }
.c .toast.added { bottom: 100px; inset-inline-end: 50%; transform: translateX(-30%); }
html[dir="ltr"] .c .toast.added { transform: translateX(30%); }
/* The shared copy toast (mockup wlogcopy): centred over the window, 15 px above its 64 px footer; in the setup and install window above its bar. */
.c .toast[data-copied] { inset-inline: 0; margin-inline: auto; width: fit-content; bottom: 79px; }
.c .toast[data-copied]:empty { opacity: 0; pointer-events: none; }
/* The setup and install window's bar height, which its copy toast sits 15 px above. */
.c .unbox { --bar-h: 84px; }
.c .unbox > .toast[data-copied] { bottom: calc(var(--bar-h) + 15px); }
.c .lc .ok:disabled { cursor: not-allowed; }
.c .pop .arrow { position: absolute; width: 16px; height: 16px; background: var(--g2); border-inline-start: 1px solid var(--ln2); border-top: 1px solid var(--ln2); transform: rotate(-45deg); }
.c .dep { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--wc-card-fg); position: relative; overflow: hidden; isolation: isolate; }
.c .dep small { display: block; opacity: .85; font-size: 11.5px; line-height: 1.4; }
.c .ulist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--mu); }
.c .ulist li { display: flex; gap: 8px; align-items: center; }
.c .ulist .i { width: 15px; height: 15px; color: var(--ok); }
.c .rv { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--ln); }
.c .rv:last-child { border-bottom: 0; }
.c .rv .mini { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--wc-card-fg); flex: none; }
.c .rv .end { margin-inline-start: auto; text-align: end; white-space: nowrap; }
.c .kv { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; }
.c .kv.tot { border-top: 1px solid var(--ln2); margin-top: 6px; padding-top: 12px; font-size: 16px; font-weight: 700; }
.c .prog li { height: 46px; }
.c .acc { height: 54px; border-radius: 12px; background: var(--g2); border: 1px solid var(--ln); display: flex; align-items: center; gap: 12px; padding: 0 16px; font-weight: 500; }
.c .acc + .acc { margin-top: 10px; }
.c .acc .end { margin-inline-start: auto; color: var(--mu); }
.c .hint.bad { color: var(--wc-danger-text); }
.c .pw2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c .optrow:has(> .osf) { grid-template-columns: 1.4fr 1fr; }
.c .opt.osf { height: auto; display: block; align-self: start; padding: 15px 16px; }
.c .opt.osf.on { padding: 12px 15px; }
.c .opt.osf .osh { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: inherit; text-align: start; cursor: pointer; }
.c .opt.osf .osh .chip { margin-inline-start: auto; }
.c .opt.osf .inp { margin-top: 10px; height: 40px; }
.c .keyrow .opt { flex: 1; margin-top: 0; }
.c .fs h4 .fa { font-weight: 400; font-size: 12.5px; }
/* Setup, app settings (mockup s3) */
.c .fs.app .fsh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.c .inp input.lat { font-family: "Inter", sans-serif; }
/* A Latin value reads left to right (dir="ltr", so /var/www is not reversed) but sits on the page's start side, as the mockup draws it (s3). */
.c:dir(rtl) .inp input.lat { text-align: end; }
.c .fs.app .mini { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--wc-card-fg); flex: none; }
.c .fs.app.none { display: flex; align-items: center; gap: 12px; }
.c .fs.app.none .mu { margin-inline-start: auto; font-size: 13px; }
.c .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c .fgrid + .adv, .c .adv + .fgrid { margin-top: 12px; }
.c .fld.wide { grid-column: 1 / -1; }
.c .lab .fa { font-weight: 400; }
.c .btn.t.adv { padding: 0; }
.c .btn.t.adv[aria-expanded="true"] .i { transform: rotate(180deg); }
.c .inp.area { height: auto; padding: 10px 14px; }
.c .inp.multi { height: auto; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; }
.c .inp.multi label { display: inline-flex; align-items: center; gap: 6px; }
.c .inp .cb { accent-color: var(--ind); }
.c .ubmain .fpanel + .hint.bad { margin-top: 12px; }
/* Setup, review and pay (mockup s4) */
.c .rvgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; max-width: 900px; }
.c .rvgrid > .box { background: var(--g2); }
.c .rvgrid > .box + .box { padding: 18px 20px; align-self: start; }
.c .rvgrid .rv .mini.srv { background: var(--wc-servers); color: var(--wc-servers-ink); }
.c .rvgrid .rv .sub { font-size: 12.5px; }
/* Inter on a Shabnam line sits lower and would make the line 2 px taller; top-aligned it keeps the Shabnam height (s4, xexrev). */
.c .rvgrid .rv b.en, .c .rvgrid .rv .sub > span.en:only-child { vertical-align: top; }
.c .rvgrid .rv .end .unit { font-size: 12px; }
/* The "edit choices" row: a plain .rv with a text button, as the mockup draws it (s4, xexrev). */
.c .rvgrid .rv:has(> .btn.t) { padding: 12px 16px; }
.c .rvgrid .rv > .btn.t { padding: 0; }
.c .rvgrid .note { margin: 12px 0 0; }
/* Mockup xpay: the bar above the review, the shortfall in amber and the gateways under the total. */
.c .ubmain .alert.rvbar { max-width: 900px; }
.c .alert.info { background: color-mix(in srgb, var(--ind) 10%, transparent); border-color: color-mix(in srgb, var(--ind) 35%, transparent); }
.c .alert.info > .i { color: var(--ind2); }
.c .rvgrid .kv .short { color: var(--warn); }
.c .rvgrid .lab.gwl { margin: 14px 0 6px; }
.c .rvgrid > .box + .box > .note:first-child { margin-block-start: 0; }
/* xexrevcb: "make a recovery point before installing", the mockup's 18 px box with a check; the real checkbox lies over
   it, transparent, so a click, the keyboard and a screen reader reach it. */
.c .rvgrid .rpcb { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-weight: 500; cursor: pointer; }
.c .rvgrid .rpcb .cbx { position: relative; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 5px; border: 2px solid var(--ln2); display: grid; place-items: center; color: var(--wc-primary-fg); }
.c .rvgrid .rpcb .cbx:has(input:checked) { background: var(--ind); border-color: var(--ind); border-width: 0; }
.c .rvgrid .rpcb .cbx:has(input:focus-visible) { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
.c .rvgrid .rpcb .cbx input { position: absolute; inset: -3px; margin: 0; opacity: 0; cursor: pointer; }
.c .rvgrid .rpcb .cbx .i { width: 12px; height: 12px; stroke-width: 3; }
/* Spans, not divs, since a label holds phrasing content only; drawn as the mockup's two blocks. */
.c .rvgrid .rpcb .rpt { display: block; }
.c .rvgrid .rpcb .mu { display: block; font-size: 12.5px; font-weight: 400; margin-top: 2px; }
/* Setup, apps (mockup s2) */
.c .ubmain h2.apptitle { font-size: 24px; margin-bottom: 12px; }
.c .appbar { display: flex; align-items: flex-end; gap: 16px; }
.c .appbar .ltabs { flex: 1; }
.c .inp.search { width: 220px; height: 38px; margin-bottom: 8px; color: var(--fa); }
.c .inp.search input { color: var(--tx); }
.c .inp.search input::-webkit-search-cancel-button { display: none; }
.c .appgrid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* An app's details dialog (the mockup's det): beside the card it points at, over a soft scrim; the card stays above it. */
.c .modal .dscrim { position: absolute; z-index: var(--z-sheet); background: var(--wc-scrim-soft); }
@media (min-width: 761px) { .c .pop.det { inset-block-start: var(--det-top0); inset-inline-start: var(--det-start0, auto); inset-inline-end: var(--det-end0, auto); } }
@media (min-width: 761px) { .c .pop.det[data-fit] { position: fixed; inset-inline-end: auto; inset-inline-start: var(--det-start); inset-block-start: var(--det-top); } }
.c .pop.det { width: 430px; padding: 20px; border-top: 3px solid var(--hue); margin-top: calc(-1 * var(--det-shift, 0px)); }
.c .pop.det .arrow { width: 22px; height: 22px; top: calc(128px + var(--det-shift, 0px)); inset-inline-start: -12px; border: 0; border-top: 1px solid var(--ln2); border-inline-start: 1px solid var(--ln2); transform: rotate(-45deg); }
html[dir="rtl"] .c .pop.det .arrow { transform: rotate(45deg); }
.c .pop.det[data-side="start"] .arrow { inset-inline-start: auto; inset-inline-end: -12px; border-top: 0; border-inline-start: 0; border-bottom: 1px solid var(--ln2); border-inline-end: 1px solid var(--ln2); transform: rotate(-45deg); }
html[dir="rtl"] .c .pop.det[data-side="start"] .arrow { transform: rotate(45deg); }
.c .pop.det .dh { display: flex; gap: 12px; align-items: center; }
.c .pop.det .rv { padding: 0; border: 0; }
.c .pop.det .mini { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--wc-card-fg); flex: none; }
.c .pop.det .dh b { font-size: 18px; }
.c .pop.det .dh .mu { font-size: 12.5px; }
.c .pop.det .dh .ib { margin-inline-start: auto; background: transparent; }
.c .pop.det > p { margin: 12px 0; color: var(--mu); font-size: 13.5px; }
.c .pop.det .dchips { display: flex; gap: 6px; margin-bottom: 14px; }
.c .pop.det .dacts { display: flex; gap: 8px; margin-top: 18px; }
.c .pop.det p.mu { margin: 0 0 12px; font-size: 13px; }
.c .pop.det > p.note { margin: 0; font-size: 12.5px; }
.c .pop.det .ulist + p.note { margin-top: 12px; }
.c .pop.det .dep + .lab { margin-top: 14px; }
.c .pop.det .dep b { font-size: 14px; }
.c .pop.det .dep .i { width: 18px; height: 18px; flex: none; }
.c .dep .chip { margin-inline-start: auto; background: var(--wc-dep-chip); color: var(--wc-dep-chip-fg); }
.c .pop.det .dacts .btn { flex: 1; }
.c .appgrid .lc { min-height: 206px; }
.c .appgrid .lc .tt { margin-top: 58px; }
.c .appgrid .lc .facts { margin: 0; }
.c .lc button.ok { border: 0; padding: 0; cursor: pointer; }
.c .lc .cb.add.dis { background: var(--wc-card-add-dis); color: var(--wc-card-add-dis-fg); cursor: not-allowed; }
.c .ubmain .appgrid + .hint.bad { margin-top: 12px; }
/* A dialog takes focus only so a screen reader starts inside it; the frame itself never shows a focus ring. */
.c .modal[tabindex="-1"]:focus, .c .modal[tabindex="-1"]:focus-visible { outline: none; }
.c .inp.sel { position: relative; cursor: pointer; }
.c .inp.sel > .en { font-weight: 500; }
/* The native select covers the frame, transparent: the frame shows the chosen value (the mockup draws it as text). */
.c .inp.sel > select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
/* A left-to-right field (a password) shows its page-language placeholder at the page's start until something is typed. */
html[dir="rtl"] .c .inp input[dir="ltr"]:placeholder-shown { direction: rtl; text-align: start; }
/* The field frame is the .inp; the control inside never draws its own (site.css styles bare inputs). */
.c .inp input:is([type], :not([type])) { border: 0; background: transparent; padding: 0; height: 100%; box-shadow: none; }
.c .inp .end.ib { width: 18px; height: 18px; padding: 0; }
/* ── Setup states (D16 setup slice; the mockup's xs1, xs2, xempty, xload, xerr, xinst, xdone patterns) ── */
.c .alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--wc-alert-bad); border: 1px solid var(--wc-alert-bad-line); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.c .alert > .i { width: 18px; height: 18px; color: var(--bad); flex: none; }
.c .alert.warn { background: var(--wc-alert-warn); border-color: var(--wc-alert-warn-line); }
.c .alert.warn > .i { color: var(--warn); }
.c .alert b { display: block; font-weight: 500; }
.c .alert .tx { color: var(--mu); }
.c .alert .tx b { color: var(--tx); }
.c .alert .btn { margin-inline-start: auto; flex: none; }
/* The shared recovery panel (RecoveryPanel, failure-mode F8): the reason, the support code with its copy button, then support and the one way out. */
.c .alert.rcv { flex-wrap: wrap; text-align: start; }
.c .alert.rcv .tx { flex: 1 1 240px; }
.c .alert.rcv .tx > span { display: block; }
.c .alert.rcv .rcvc { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; }
.c .alert.rcv .end { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; flex: none; }
.c .alert.rcv .end .btn { margin-inline-start: 0; }
/* SV-10 (issue 1157): the side panel's "needs repair" or "not answering" reason, above the tools. */
.c .sidea { display: grid; gap: 8px; padding: var(--side-pad-b) var(--side-pad-i); border-bottom: 1px solid var(--ln); }
.c .sidea .alert.rcv { margin: 0; }
.c .sidea .note { margin: 0; }
.c .fempty .alert.rcv { max-width: 560px; margin: 0; }
.c .ws > .alert.rcvn { flex: none; margin: 12px 16px 0; }
.c .ws > .alert.rcvn > .btn { flex: none; }
.c .emp { display: grid; justify-items: center; text-align: center; padding: 64px 24px; }
.c .emp .ei { width: 64px; height: 64px; border-radius: 18px; background: var(--g2); color: var(--mu); display: grid; place-items: center; margin-bottom: 18px; }
.c .emp .ei .i { width: 30px; height: 30px; }
.c .emp.bad .ei { background: var(--wc-state-bad-icon); color: var(--bad); }
.c .emp h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.5; font-weight: 700; }
.c .emp p { margin: 0 0 20px; color: var(--mu); font-size: 13.5px; max-width: 440px; }
.c .emp .acts { display: flex; gap: 8px; }
.c .skl { border-radius: 14px; background: var(--g2); }
.c .skl i { display: block; height: 12px; border-radius: 6px; background: var(--g3); }
.c .steps li.fail { color: var(--tx); }
.c .steps li.fail .sic { box-shadow: 0 0 0 2px var(--bad); color: var(--bad); background: var(--g1); }
.c .secret { border: 1px solid var(--ln); border-radius: 14px; background: var(--g2); padding: 16px 18px; }
.c .secret .lab { margin-top: 12px; }
.c .secret .cmd { background: var(--g0); }
.c .skl.bare { background: none; }
.c .sktabs { display: flex; gap: 22px; height: 40px; align-items: center; border-bottom: 1px solid var(--ln); margin-bottom: 16px; }
.c .skcount { margin-bottom: 14px; }
.c .skl.card { min-height: 214px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; }
.c .skl.card .ka { inline-size: 46%; block-size: 16px; }
.c .skl.card .kb { inline-size: 88%; block-size: 10px; margin-block-start: 12px; }
.c .skl.card .kc { inline-size: 64%; block-size: 10px; margin-block-start: 8px; }
.c .skl.card .kd { inline-size: 30%; block-size: 14px; margin-block-start: 22px; }
.c .sktabs .skl:nth-child(1) i { width: 72px; }
.c .sktabs .skl:nth-child(2) i { width: 64px; }
.c .sktabs .skl:nth-child(3) i { width: 90px; }
.c .skcount i { width: 120px; height: 10px; }

/* ---- Install on a server the user has (the mockup's xexist): one card per server, a busy one dimmed with its reason. */
.c .srvopts { max-width: 620px; }
.c .srvopts .opt { width: 100%; height: 64px; font: inherit; text-align: start; }
.c .srvopts .opt + .opt { margin-top: 8px; }
.c .srvopts .opt:disabled { opacity: .45; cursor: default; }
.c .srvopts .hexi { width: 36px; height: 36px; }
.c .srvopts .tx { display: block; line-height: 1.45; }
.c .srvopts .tx .nm { display: block; font-weight: 500; }
.c .srvopts .tx .nm .en { font-weight: 400; font-size: 12.5px; }
/* F-09 (issue 957): the address beside a server's name in the review, as on the server card. */
.c .rvgrid .rv b .ip { font-weight: 400; font-size: 12.5px; }
.c .srvopts .tx small { display: block; font-size: 12px; color: var(--mu); font-weight: 400; }

/* ---- Install progress and its result (the mockup's inst, xinst, done and xdone; D16.5): the same window without the
   stepper, one 620 px column in the middle; the window scrolls only when a long list does not fit. */
.c .unbox > .ubmain { padding: 0 48px; max-height: calc(100% - 72px - 84px); overflow-y: auto; scrollbar-width: none; }
.c .instw { max-width: 620px; margin: 20px auto 0; }
.c .instw.dn { margin-top: 26px; }
.c .instw.dx { margin-top: 22px; }
.c .instw > .bar2 { height: 8px; margin-bottom: 22px; }
.c .instw > .bar2 i { background: var(--ind); }
.c .instw .steps.prog { margin: 0; }
.c .prog li > div { line-height: 1.2; }
.c .prog li > div > div { line-height: 1.4; }
.c .prog li small { font-size: 12px; color: var(--fa); font-weight: 400; line-height: 1.4; }
.c .prog li small[data-tone="bad"] { color: var(--bad); }
.c .prog .sic .ok { display: grid; color: var(--ok); }
/* The running app's live output (R52; the mockup's instlive, instquiet and instout): one more row of the list under it.
   Collapsed: the newest line in a bordered box, cut to one line; the quiet chip and hint after 3 minutes; the toggle at the
   end. Open: the Watch TerminalView, plain, in a 172 px panel whose text sits at the bottom and follows the newest line. */
.c .steps li.live { height: auto; display: block; min-width: 0; padding-inline-start: calc(44px + var(--step-gap)); margin-block-start: -4px; color: var(--mu); font-weight: 400; }
.c .live > .lo { direction: ltr; text-align: start; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.5; color: var(--mu); background: var(--g2); border: 1px solid var(--ln); border-radius: 8px; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c .live > .lob { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; line-height: 1.7; }
.c .lob .btn { margin-inline-start: auto; }
.c .lob .btn .chev { width: 14px; height: 14px; }
.c .lob .btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.c .qchip { height: 24px; padding: 0 9px; gap: 5px; background: var(--wc-servers-soft); color: var(--sec); }
.c .qchip .i { width: 13px; height: 13px; }
.c .live > .lterm { height: 172px; overflow: hidden; border-radius: 10px; border: 1px solid var(--ln); padding: 10px 14px; font-size: 12px; line-height: 1.7; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; min-width: 0; }
.c .lterm .wp-terminal, .c .lterm .wp-terminal-log-wrap { display: flex; flex-direction: column; height: auto; min-height: 0; line-height: inherit; }
.c .lterm .wp-terminal-log { min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; font: inherit; color: var(--wc-term-fg); white-space: pre; overflow-wrap: normal; text-overflow: ellipsis; }
.c .bbar > .mu { font-size: 13px; }
.c .bbar > .mu .i { width: 15px; height: 15px; vertical-align: -3px; }
.c .bbar .btn.q { height: 44px; }
.c .dhead { display: flex; gap: 18px; align-items: center; }
.c .dhead h2 { margin: 0; }
.c .dhead p.mu { margin: 0; }
.c .dtile { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none; background: var(--wc-ok-soft); color: var(--ok); }
.c .dtile .i { width: 32px; height: 32px; stroke-width: 2.2; }
.c .dtile[data-tone="warn"] { background: var(--wc-warn-soft); color: var(--warn); }
.c .dtile[data-tone="warn"] .i { width: 30px; height: 30px; stroke-width: 2; }
.c .instw > .srow { margin: 22px 0 26px; cursor: default; }
.c .instw > .know { display: block; margin-bottom: 10px; }
/* The done screen's "What you can do" row (I-CARDS): a link row under the server card, on phones too. */
.c .instw > a.nxgo { margin: -12px 0 26px; color: inherit; text-decoration: none; }
.c .instw > a.nxgo:hover { border-color: var(--ind); }
.c button.acc { width: 100%; font: inherit; font-weight: 500; color: inherit; text-align: start; cursor: pointer; }
.c .acc .hexi { width: 30px; height: 30px; }
.c .acc .end { display: grid; }
/* An open "good to know" row (xdacc): its text joins it below, aligned after the icon; one open at a time. */
.c .acc.open { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.c .acc.open .end { transform: rotate(180deg); }
.c .accb { background: var(--g2); border: 1px solid var(--ln); border-top: 0; border-radius: 0 0 12px 12px; padding: 0 16px 14px; padding-inline-start: 58px; color: var(--mu); font-size: 13px; line-height: 1.8; }
.c .accb + .acc { margin-top: 10px; }
/* The "waiting for the server to start" row (xwait): the running row's spinner, in grey. */
.c .steps li.on[data-tone="wait"] { color: var(--mu); }
/* A long generated value wraps inside its box; a long failure reason is cut with an ellipsis (its title holds it all). */
.c .secret .cmd { height: auto; min-height: 44px; padding-block: 6px; word-break: break-all; }
.c .instw > .lrow .tx { min-width: 0; }
.c .instw > .lrow .tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c .instw > .lrow { margin: 20px 0 16px; }
.c .lrow[data-tone="bad"] { border-color: var(--wc-alert-bad-line); }
.c .hexi[data-tone="bad"] { background: var(--wc-state-bad-icon); color: var(--bad); }
.c .secret > b { font-weight: 500; }
.c .secret > .mu { font-size: 12.5px; }
.c .keep { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 500; cursor: pointer; }
.c .keep input { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 2px solid var(--ln2); background: transparent; flex: none; cursor: pointer; }
.c .keep input:checked { background: var(--ind); border-color: var(--ind); box-shadow: inset 0 0 0 2px var(--g2); }
.c .keep input:focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }

/* The legal footer (mockup legal): a thin row at the bottom of every client page, after the content, never floating. */
.c .foot { position: absolute; inset-block-end: 0; inset-inline: 0; height: var(--foot-h); display: flex; align-items: center; gap: 22px; padding: 0 96px; border-block-start: 1px solid var(--ln); font-size: 12.5px; line-height: 1; color: var(--mu); }
/* The links' nav is a landmark only: its links lay out as the footer's own items, as the mockup draws them. */
.c .foot nav { display: contents; }
.c .foot :is(.cp, .lk) { padding-block-start: 2px; }
/* The footer lies over the side panel (mockup v24, side: same layer, later in the page), so its links stay in reach
   while a server is open; scrims, windows and menus cover it. */
.c .foot { z-index: var(--z-side); }
/* The empty state's band fills the window and the footer lies over its bottom (mockup v24, empty). */
.c:has(.semp) { padding-block-end: 0; }
.c:has(.semp) > .body { padding-block: 0; }
.c .foot .cp { margin-inline-end: auto; color: var(--fa); }
.c .foot .lk { color: var(--mu); text-decoration: none; }
.c .foot .lk:hover { color: var(--tx); }
.c .foot .lk:focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; border-radius: 4px; }
/* The phone footer (the mockup's phFoot, PRECISION v24 answer): at the end of the content, the links on one centred
   line (wrapping on a narrow screen), the copyright under them, no address. The sheets and the full-screen Launchpad cover it. */
@media (max-width: 1100px) {
    .c .foot { padding: 0 32px; }
}
@media (max-width: 760px) {
    /* In flow after the content, so its real height is kept whatever the text; the page is a column whose body grows,
       so on a short page the footer still sits at the window's bottom. */
    .c { display: flex; flex-direction: column; padding-block-end: 0; }
    .c > .body { flex: 1 0 auto; }
    .c .foot { position: static; height: auto; padding: 14px 16px 18px; flex-direction: column; gap: 10px; }
    .c .foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
    .c .foot .cp { order: 1; margin: 0; }
    .c .foot .lk { padding-block-start: 0; }
    .c .foot .lk.en { display: none; }
}

/* ---- The setup and install windows on a phone (mockup v26 phs1, phs2, phs4, phinst; PRECISION round 17): full screen
   with a 56 px header; the wizard swaps its stepper column for four progress segments and a step line; content is one
   column; the 76 px bottom bar holds back, the price or the app count, and the primary button. The phone-only parts
   (.pstep, .phn, the bar's own price) stay out of the desktop window. */
.c .pstep, .c .bbar > .price[data-ph], .c .phn { display: none; }
@media (max-width: 760px) {
    .c .dk { display: none; }
    .c span.phn { display: inline; }
    .c :is(p, div).phn { display: block; }
    .c .modal.unbox { inset: 0; border-radius: 0; border: 0; box-shadow: none; }
    /* The review's edit row is desktop-only, so the row before it ends the box (phs4). */
    .c .rv:has(+ .rv[data-ph="desk"]:last-child) { border-bottom: 0; }
    .c .ubh { height: 56px; padding: 0 16px; }
    .c .ubh .mk { font-size: 17px; }
    .c .ubh .mclose { top: 10px; inset-inline-end: 10px; }
    .c .pstep { display: block; padding: 0 16px 14px; }
    .c .pstep .segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .c .pstep .segs i { height: 4px; border-radius: 2px; background: var(--g4); }
    .c .pstep .segs i.on { background: var(--ind); }
    .c .pstep .t { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 8px; font-size: 12.5px; color: var(--mu); line-height: 1.4; }
    .c .pstep .t b { color: var(--tx); font-weight: 500; }
    .c .ubgrid { display: block; height: auto; }
    .c .ubgrid > .stepper, .c .ubmain > .scr > .eyebrow { display: none; }
    .c .ubmain, .c .unbox > .ubmain { padding: 0 16px; height: calc(100dvh - 194px); max-height: none; overflow: hidden; }
    .c .unbox > .ubmain { overflow-y: auto; }
    /* The wizard scrolls inside its column; the column's own padding moves into it so a selected card's ring is not cut. */
    .c .ubmain > .scr { margin-inline: -16px; padding-inline: 16px; }
    .c .ubmain h2 { font-size: 22px; }
    .c .ubmain h2.apptitle { font-size: 22px; }
    .c .ubmain .lede2 { font-size: 13.5px; margin-block-end: 14px; }
    .c .fpanel { padding: 2px 16px 16px; }
    .c .fs { padding: 14px 0 16px; }
    .c .optrow { grid-template-columns: 1fr; }
    /* The operating systems stack as the fieldset's own options (the mockup draws no row around them). */
    .c .optrow:has(> .osf) { display: contents; }
    .c .optrow:has(> .osf) > .opt.osf:not(.on) { height: 52px; padding-block: 0; display: flex; align-items: center; }
    .c .optrow:has(> .osf) > .opt + .opt { margin-block-start: 8px; }
    .c .appbar { flex-direction: column; align-items: stretch; }
    .c .appbar .inp.search { order: -1; width: auto; height: 40px; margin-block-end: 12px; }
    .c .ltabs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
    .c .appgrid { grid-template-columns: 1fr; gap: 12px; }
    .c .lc { min-height: 0; padding: 16px; }
    .c .appgrid .lc { padding: 16px; }
    .c .appbar { gap: 0; }
    .c .keyrow { flex-direction: column; }
    .c .keyrow .opt { flex: none; }
    /* An app's details rise from the bottom as a sheet (mockup phs2 note); the side panel takes the full width (it is
       drawn in phone batch 2), so nothing behind the setup window scrolls sideways. */
    .c .pop.det { position: fixed; inset-inline: 0; inset-block: auto 0; width: auto; max-height: 85dvh; overflow-y: auto; margin-top: 0; border-radius: 0; border-start-start-radius: 20px; border-start-end-radius: 20px; box-shadow: var(--wc-shadow-sheet); }
    .c .pop.det .arrow { display: none; }
    .c .modal.plans { inset: 0; border-radius: 0; border: 0; }
    .c .modal.plans .mclose { top: 14px; inset-inline-end: 10px; }
    .c .plansb { padding: 16px 16px 0; }
    .c .plansb h2 { font-size: 22px; margin-block-end: 14px; }
    .c .plansg { grid-template-columns: 1fr; gap: 12px; }
    .c .side { width: auto; inset-inline: 0; border-inline-start: 0; }
    .c .body:has(.side) { padding-inline-end: 16px; }
    /* The review's "edit the choices" row and "this month" line are desktop only (mockup phs4). */
    .c [data-ph="desk"] { display: none; }
    .c .rvgrid { grid-template-columns: 1fr; gap: 12px; }
    .c .rvgrid > .box { border-radius: 12px; }
    .c .rvgrid > .box + .box { padding: 14px 16px; }
    .c .instw, .c .instw.dn, .c .instw.dx { margin: 0; }
    .c .instw > .bar2 { margin-block-end: 18px; }
    .c .unbox { --bar-h: 76px; }
    .c .unbox:has(> .bbar > .phn) { --bar-h: 96px; }
    .c .bbar { padding: 0 16px; gap: 12px; }
    .c .bbar > .sum, .c .bbar .end > .price, .c .bbar .end > .btn.t[data-chosen] { display: none; }
    .c .bbar > .price[data-ph] { display: block; text-align: start; }
    .c .bbar .btn.pri { padding: 0 18px; }
    /* A stopped install's bar holds the report link and two buttons: the link on a line of its own, the buttons sharing
       the width under it. */
    /* A stopped install's three actions: the report on a short first line, support and retry under it, all inside the 76 px bar. */
    .c .bbar:has(> .btn.t) { flex-wrap: wrap; align-content: center; justify-content: center; row-gap: 4px; }
    .c .bbar:has(> .btn.t) > .btn.t { height: 30px; }
    .c .bbar:has(> .btn.t) > .end { width: 100%; margin: 0; gap: 8px; }
    .c .bbar:has(> .btn.t) > .end > .btn { flex: 1; height: 36px; padding-inline: 12px; }
    .c .bbar:has(> .phn) { flex-direction: column; justify-content: center; gap: 6px; }
    .c .bbar > .mu.phn { font-size: 12.5px; }
    .c .bbar:has(> .phn) > .end { margin: 0; width: 100%; }
    .c .bbar:has(> .phn) > .end > .btn { flex: 1; }
}

/* ── Phone batch 2 (mockup v27: phside, phwin, phmenu, phrec, phkeys) ──
   The server panel is a page under the 56 px bar; every server window fills the screen with a back arrow and a 72 px
   footer of full-width buttons, and a hint that sat beside a footer button is a note in the body. */
@media (max-width: 760px) {
    .c .ib.phn { display: inline-grid; }
    .c .side { position: fixed; top: 56px; }
    /* The server page covers the list and its footer (the footer is a later flex item and would paint over it). */
    .c:has(.side) footer.foot { display: none; }
    .c .side { --side-pad-i: 16px; }
    .c .side > .sideh { height: 56px; padding-inline: 12px 16px; }
    .c .tool { font-size: 11.5px; }
    .c .modal.win { inset: 0; max-height: none; width: auto; border: 0; border-radius: 0; box-shadow: none; }
    .c .win .sideh { height: 56px; padding: 0 16px; }
    .c .win .wb { padding: 16px; }
    .c .win .wf { min-height: 72px; padding: 14px 16px; }
    .c .win .wf .btn { flex: 1 1 auto; height: 44px; font-size: 14px; }
    .c .win .wb > .note.phn { display: flex; margin: 14px 0 0; }
}
/* The server ⋮ menu on a phone (mockup phmenu): a sheet with the server's name and IP, then the items under a rule. */
@media (max-width: 760px) {
    .c .prow .sheet .sh .hexi { width: 32px; height: 32px; }
    .c .prow .sheet .sh > div { line-height: 1.4; font-size: 12.5px; }
    .c .prow .sheet .sh b { display: block; font-size: 16px; }
    .c .prow .sheet .sh .mu { font-size: 12.5px; }
    .c .sheet > .menu { position: static; width: auto; margin-block-start: 10px; padding: 6px 0 0; border: 0; border-block-start: 1px solid var(--ln2); border-radius: 0; background: none; box-shadow: none; }
    .c .sheet > .menu .mi { height: 44px; gap: 12px; padding: 0 4px; border-radius: 0; font-weight: 500; }
    .c .sheet > .menu .mi .i { color: var(--mu); }
    .c .sheet > .menu .mi.red, .c .sheet > .menu .mi.red .i { color: var(--wc-danger-text); }
}
/* The Recovery points and SSH keys tabs (mockup trec, tkeys): a wrapper that only moves a part between layouts adds no box. */
@media (min-width: 761px) { .c .rtab .lrow .end > .dk { display: contents; } }
/* The keys and recovery tabs draw line two twice: the desktop's, and the phone's (no dot; the state beside the time). */
.c .lrow .tx small.phn { display: none; }
/* On a phone (mockup phrec, phkeys): shorter group button, the state or the type and fingerprint on line two, the key's date after its name. */
@media (max-width: 760px) {
    .c .boxh { padding: 14px 16px; }
    .c .boxb { padding: 14px 16px 16px; }
    .c .boxh h2 { font-size: 17px; }
    .c .boxh > .mu { font-size: 12.5px; }
    .c .rtab > .boxh:last-child { border-block-end: 0; }
    .c .rtab + .rtab { margin-block-start: 12px; }
    .c :is(.rtab, .ktab) .lrow .tx small { display: flex; align-items: center; gap: 8px; }
    .c .lrow .tx small.dk { display: none; }
    .c :is(.rtab, .ktab) .lrow .tx small.phn { display: flex; }
    .c .lrow .tx b > .kd { font-weight: 400; font-size: 12px; margin-inline-start: 8px; }
}
/* The keys tab's row ⋮ on a phone: the same sheet from the bottom as the server card's menu. */
@media (max-width: 760px) {
    .c .ktab .rmenu .menu { position: fixed; z-index: var(--z-sheet); inset-inline: 0; inset-block: auto 0; width: auto; border: 0; border-block-start: 1px solid var(--ln2); border-radius: 0; border-start-start-radius: 20px; border-start-end-radius: 20px; box-shadow: var(--wc-shadow-sheet); padding: 10px 16px 20px; }
    .c .ktab .rmenu .menu .hdl { width: 36px; height: 4px; border-radius: 4px; background: var(--g4); margin: 0 auto 10px; }
    .c .ktab .rmenu .menu .sh { display: flex; align-items: center; gap: 8px; height: 40px; margin-block-end: 6px; padding-block-end: 6px; border-block-end: 1px solid var(--ln2); }
    .c .ktab .rmenu .menu .sh b { font-size: 16px; }
    .c .ktab .rmenu .menu .sh .ib { margin-inline-start: auto; }
    .c .ktab .rmenu .menu .mi { height: 44px; gap: 12px; padding: 0 4px; border-radius: 0; font-weight: 500; }
}
/* Not drawn on a phone (named in the slice report): the terminal and files windows fill the screen like the other
   windows, and the confirmations (power, reinstall, delete) are centred cards with 16 px gutters. */
@media (max-width: 760px) {
    .c .modal.tw { inset: 0; border: 0; border-radius: 0; box-shadow: none; }
    .c .modal.tw .sideh { height: 56px; padding: 0 16px; }
    .c .modal.pw, .c .modal.pw.cf, .c .modal.pw.cf.fld, .c .modal.pw.cf.kadd { inset-inline: 16px; width: auto; top: 50%; transform: translateY(-50%); }
}
/* The empty My servers on a phone (mockup phempty): the desktop page in one column, an 80 px tile and a 24 px title; the
   band stops at 775 px so the legal footer stays under it, and the phone drawing replaces the desktop one. */
@media (max-width: 760px) {
    .c .band:has(.semp) { height: 775px; min-height: 0; }
    .c svg.bgsvg.phn { display: block; }
    .c .semp { margin-top: 150px; padding: 0 28px; }
    .c .semp .ico { width: 80px; height: 80px; border-radius: 22px; }
    .c .semp .ico .i { width: 38px; height: 38px; }
    .c .semp h2 { margin: 22px 0 4px; font-size: 24px; }
    .c .semp p { margin: 0 0 24px; font-size: 14.5px; line-height: 1.8; }
    .c:has(.semp) footer.foot { position: relative; margin-top: -1px; }
}
/* The small empty pattern (mockup nemp, padnone): a quiet icon, a title and one line; under the bell's filters, or in the Launchpad. */
.c .notif .nh { min-height: 32px; }
.c .nemp { display: grid; justify-items: center; text-align: center; padding: 34px 24px 26px; }
.c .notif .nemp { margin-block-start: -10px; }
.c .nemp .ni { width: 56px; height: 56px; border-radius: 16px; background: var(--g3); color: var(--mu); display: grid; place-items: center; }
.c .nemp .ni .i { width: 26px; height: 26px; }
.c .nemp b { margin-block-start: 16px; font-size: 15px; line-height: 1.5; }
.c .nemp p { margin: 4px 0 0; max-width: 300px; font-size: 12.5px; line-height: 1.8; color: var(--mu); }
@media (max-width: 760px) { .c .notif .nemp { margin-block-start: -2px; } }
/* An admin's console row in the account menu (mockup phacadm): its own group after a separator, in indigo. */
.c .acct .adm { border-block-start: 1px solid var(--ln2); margin-block-start: 6px; padding-block-start: 6px; }
.c .acs .adm { border-block-start: 1px solid var(--ln2); margin-block-start: 6px; padding-block-start: 6px; }
.c .mi[data-tone="adm"], .c .mi[data-tone="adm"] .i { color: var(--ind2); }
/* The side-by-side skin switch (Ui:AllowClientSkinSwitch): a form whose button reads as one more menu row. */
.c .acct form.skin, .c .sheet form.skin { display: contents; }
.c .acct button.mi, .c .sheet button.mi { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.c .acct button.mi { padding: 0; }
/* Without a wallet there is no balance row: appearance and language follow the email (phacadm). */
.c .acs .mail + .prefs { margin-block-start: 4px; }

/* "See all" (mockup phnall): the menu grows down to 24 px above the window's bottom and its list scrolls inside; older
   pages come from a button at the list's end (a small spinner inside while loading), then a faint closing line. */
.c .notif.tall { max-height: calc(100vh - 86px); display: flex; flex-direction: column; }
.c .notif.tall .nlist { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
.c .notif .nold { text-align: center; margin-block-start: 10px; }
.c .notif .nold .spin { width: 13px; height: 13px; border-width: 2px; }
.c .notif .nend { text-align: center; margin-block-start: 10px; font-size: 12px; }
@media (max-width: 760px) {
    .c .notif.tall { inset-block-start: 72px; max-height: none; }
    /* The list scrolls on its own, so the chips' margin and the first heading's no longer collapse (phnall: 6 + 8 px). */
    .c .notif.tall .nf { margin-block-end: 6px; }
    .c .notif.tall .nlist > .ng:first-child { margin-block-start: 8px; }
}
/* A grouped notice row unfolded in place (mockup popsgrp): the folded notices as plain rows under it, indented with a
   rule at their start edge, their times in the parent's time column; the "and n more" line takes a chevron pointing up. */
.c .nc { display: flex; align-items: stretch; gap: 10px; padding-block: 8px; padding-inline: 12px 14px; margin-inline-start: 58px; border-inline-start: 2px solid var(--ln2); width: calc(100% - 58px); text-align: start; }
.c .nc .nb { line-height: 1.55; flex: 1; }
.c .nc .nb b { display: block; width: fit-content; font-weight: 500; font-size: 13.5px; }
.c .nc .nb .mu { display: block; font-size: 12px; }
.c .nc > .fa { font-size: 11.5px; white-space: nowrap; }
.c .nt .gx { display: inline-flex; align-items: center; gap: 4px; }
.c .nt .gx .i { width: 14px; height: 14px; transform: rotate(180deg); }
/* Launchpad search (mockup v28 padq, padnone, phpadq, phpadnone): one 46 px row a result, its kind at the end; the
   selected row lit; the key hints under them. No result: the small empty pattern, 40 px from the field. */
.c .rs { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: 10px; font-weight: 500; }
.c .rs.h { background: var(--g2); }
.c .rs .ai { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--wc-tile-icon); flex: none; }
.c .rs .ai .i { width: 16px; height: 16px; }
.c .rs .sub { font-size: 12.5px; color: var(--mu); font-weight: 400; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c .rs > span:not(.ai):not(.sub):not(.kd) { flex: none; }
/* A title of Latin only keeps the mockup's line (the Persian face's strut would lift it 1 px). */
.c .rs .en[data-only] { vertical-align: top; }
.c .rs .kd { margin-inline-start: auto; font-size: 12px; color: var(--fa); font-weight: 400; }
.c .lph { display: flex; gap: 16px; margin-block-start: 12px; padding-block: 10px 0; padding-inline: 6px; border-block-start: 1px solid var(--ln); font-size: 12px; color: var(--fa); line-height: 1.4; }
/* The typed query in the Latin face first, as the mockup's .lpq; Persian letters fall back to the Persian face. */
.c .lp .lps input[type="search"] { font-family: "Inter", "Shabnam", Tahoma, sans-serif; }
.c .lp .nemp { padding-block-start: 40px; }
.c .lp .nemp .btn { margin-block-start: 14px; }
@media (max-width: 760px) {
    .c .lp .rs .sub, .c .lp .lph { display: none; }
}
/* ---- The wallet (issue 756, mockup round v36 wal, wtop, wpaid, wnopay, phwal, phtop): the balance card and the unfinished
   top-ups in a 340 px column, the statement beside it; a credit's tile and amount in the wallet's green. The top-up
   dialog is a 520 px window on a desktop and a sheet from the bottom on a phone, one markup. */
.c .wgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.c .wbal { padding-block: 20px 24px; padding-inline: 24px; }
.c .wbh { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.c .wamt { font-size: 34px; font-weight: 700; line-height: 1.3; margin: 14px 0 10px; }
.c .wamt small { font-size: 15px; font-weight: 500; color: var(--mu); }
.c .wbal > .btn.pri { width: 100%; margin-block-start: 16px; }
.c .li { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--g3); color: var(--mu); flex: none; }
.c .li.cr { background: var(--wc-wallet-soft); color: var(--wc-wallet-text); }
.c .am { text-align: end; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.c .am.cr { color: var(--ok); }
.c .am small { display: block; font-size: 12px; font-weight: 400; color: var(--mu); }
.c .wopen { margin-block-start: 14px; }
.c .wsh { padding-block: 16px 10px; padding-inline: 16px; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.c .wob { padding-block: 0 16px; padding-inline: 16px; }
.c .wled > .boxh > .mu { font-size: 13px; }
.c .wh2 { margin: 18px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.c .wled > .wh2 { display: none; }
.c .alert.ok { background: var(--wc-alert-ok); border-color: var(--wc-alert-ok-line); }
.c .alert.ok > .i { color: var(--ok); }
.c .note.bad > .i { color: var(--bad); }
.c .note.ok > .i { color: var(--ok); }
.c .modal.wtop { width: 520px; inset-inline-start: calc(50% - 260px); top: 126px; padding: 24px; overflow: visible; }
.c .modal.wtop h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; padding-inline-end: 40px; }
.c .modal.wtop > p.mu { margin: 0 0 18px; font-size: 13px; }
.c .modal.wtop .wpre { display: flex; gap: 6px; margin-block-start: 10px; }
.c .modal.wtop .wpre .chip { height: 30px; padding: 0 12px; font-size: 12.5px; border: 0; font-family: inherit; cursor: pointer; }
.c .modal.wtop .lab.wgl { margin-block-start: 18px; }
.c .modal.wtop .alert { margin: 0; }
.c .modal.wtop .note { margin: 14px 0 0; }
.c .modal.wtop .acts { display: flex; gap: 8px; margin-block-start: 20px; }
.c .modal.wtop .acts .btn { flex: 1; }
@media (max-width: 760px) {
    .c .wgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .c .wbal { padding: 16px; }
    .c .wopen { margin-block-start: 12px; }
    .c .wled { background: none; border: 0; border-radius: 0; }
    .c .wled > .boxh { display: none; }
    .c .wled > .wh2 { display: block; }
    .c .wled > .boxb { padding: 0; }
    .c .modal.wtop { inset-inline: 0; inset-block: auto 0; width: auto; background: var(--g2); border: 0; border-block-start: 1px solid var(--ln2); border-radius: 0; border-start-start-radius: 20px; border-start-end-radius: 20px; box-shadow: var(--wc-shadow-sheet); padding-block: 10px 20px; padding-inline: 16px; z-index: var(--z-sheet); }
    .c .modal.wtop > .hdl { width: 36px; height: 4px; border-radius: 4px; background: var(--g4); margin: 0 auto 10px; }
    .c .modal.wtop h3 { height: 40px; width: fit-content; display: flex; align-items: center; margin: 0; padding-inline-end: 0; font-size: 17px; line-height: 1; padding-block-start: 2px; }
    .c .modal.wtop .mclose.ib { top: 27px; inset-inline-end: 16px; background: var(--g3); }
    .c .modal.wtop > p.mu { margin: 2px 0 14px; }
    .c .modal.wtop .acts { margin-block-start: 18px; }
    .c .modal.wtop .acts .btn { height: 44px; }
}
/* ---- The wallet's orders (issue 763, mockup round v36 word, wordd, phord): one row per order with its amount and state;
   an order's window (the tools window's pattern, 700 px) with the facts in two columns and the steps with their times.
   A phone lists two-level cards (the server cards' pattern) and opens the window full screen. */
.c .word .lrow ~ .lrow { margin-block-start: 8px; }
.c .word > .boxb > p.none { margin: 0; font-size: 13px; }
.c .lrow.sel { background: var(--wc-selected); border-color: var(--ind); }
.c .hexi.srv { background: var(--wc-servers-soft); color: var(--wc-servers); }
.c .hexi.ren { background: var(--wc-wallet-soft); color: var(--wc-wallet-text); }
.c .oam { font-weight: 500; white-space: nowrap; }
.c .oam small { font-size: 12px; font-weight: 400; color: var(--mu); }
.c .ost { min-width: 150px; display: flex; }
.c .st.warn .dot { background: var(--warn); }
.c .modal.win.word { top: 110px; bottom: auto; inset-inline-end: 290px; width: 700px; }
.c .win.word .sideh > .li { width: 32px; height: 32px; }
.c .win.word .wb { overflow: hidden; }
.c .win.word .ohd { display: flex; align-items: center; gap: 10px; margin-block-end: 16px; }
.c .win.word .ohd > .mu { font-size: 12.5px; margin-inline-start: auto; }
.c .odl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 18px; }
.c .odl > div { display: flex; flex-direction: column; font-size: 12.5px; color: var(--mu); line-height: 1.5; }
.c .odl b { color: var(--tx); font-weight: 500; font-size: 14px; }
.c .otl { border-block-start: 1px solid var(--ln); padding-block: 10px 0; padding-inline: 0; margin: 0; list-style: none; }
.c .otl .os { display: flex; align-items: center; gap: 12px; height: 40px; }
.c .otl .oc { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--wc-order-step-done); color: var(--ok); flex: none; }
.c .otl .oc .i { width: 13px; height: 13px; stroke-width: 2.4; }
.c .otl .oc.no { background: var(--g3); }
.c .otl .oc.now { background: none; }
.c .otl .oc.now .spin { width: 18px; height: 18px; border-width: 2px; }
.c .otl .oc.bad { background: var(--wc-danger-soft); color: var(--bad); }
.c .otl .os .t { margin-inline-start: auto; color: var(--mu); font-size: 12.5px; }
.c .word .prow .ow { font-size: 12.5px; line-height: 1.5; }
.c .word .prow .bot .oam { margin-inline-start: auto; }
@media (max-width: 760px) {
    .c .word .lrow { display: none; }
    .c .modal.win.word { inset: 0; width: auto; }
}

/* ---- Domains (D7, mockup round v37: dom, domnone, doms, dombuy, domd): the domains teal is one colour with one meaning. ---- */
.c .hexi.dom, .c .li.dom { background: var(--wc-domains-soft); color: var(--wc-domains-text); }
.c .dn { font-family: "Inter", sans-serif; font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.c .dsb { padding: 16px 20px; }
.c .dsr { display: flex; gap: 10px; align-items: center; }
.c .dsr .inp { flex: 1; height: 48px; font-size: 15px; }
.c .dsr .inp input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: 0; }
.c .dsr .btn { height: 48px; padding: 0 22px; }
.c .dhint { margin: 10px 0 0; font-size: 12.5px; color: var(--mu); line-height: 1.6; }
.c .dres { margin-top: var(--box-gap); }
.c .lrow.off { opacity: .62; }
.c .dpr { text-align: end; line-height: 1.45; white-space: nowrap; }
.c .dpr small { display: block; font-size: 12px; color: var(--mu); }
.c .dpr small.u { display: inline; }
.c .dstate { font-size: 12.5px; }
.c .st.warn .dot { background: var(--warn); }
.c .dwin { width: min(520px, calc(100vw - 32px)); }
.c .dwin .dauto { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; }
.c .dbuy { width: min(540px, calc(100vw - 32px)); padding: 24px; max-height: calc(100vh - 32px); overflow-y: auto; inset-inline: 0; margin-inline: auto; top: 50%; transform: translateY(-50%); }
.c .dbuy h3 { margin: 0 0 6px; font-size: 19px; padding-inline-end: 40px; }
.c .dbuy > p.mu { margin: 0 0 18px; font-size: 13px; }
.c .dcon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ln); border-radius: 12px; background: var(--g2); }
.c .dcon .tx { line-height: 1.5; font-size: 13px; }
.c .dcon .tx b { display: block; font-weight: 500; font-size: 14px; }
.c .dcon .btn { margin-inline-start: auto; }
.c .dform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c .dform .dfield:nth-child(3), .c .dform .dfield:nth-child(6) { grid-column: 1 / -1; }
.c .dform .inp input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: 0; }
.c .dact { display: flex; justify-content: flex-end; margin-top: 12px; }
/* A price from a test registrar (issue 933): an amber chip in the result row; the buy dialog says it in a note. */
.c .dres .dtest { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid var(--warn); color: var(--warn); }
.c .dwho { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 12px; font-size: 14px; }
.c .dwho .chk { display: flex; align-items: center; gap: 8px; }
.c .dwhy { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--mu); }
.c .dfield .lab .req { color: var(--bad); margin-inline-start: 3px; }
.c .dcon .tx small { display: block; font-size: 12px; }
/* The country choice (CountryPicker, issue 930): the field is the .inp frame; the list opens under it like a .menu. */
.c .cpick { position: relative; }
.c .cpick > .end { pointer-events: none; }
.c .cplist { position: absolute; z-index: var(--z-pop); top: calc(100% + 4px); inset-inline: -1px; max-height: 240px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--g2); border: 1px solid var(--ln2); border-radius: 12px; box-shadow: var(--wc-shadow-menu); }
.c .cplist li { padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.c .cplist li:hover, .c .cplist li.h { background: var(--g3); }
.c .cplist li[aria-selected="true"] { font-weight: 500; }
.c .cplist li.none { color: var(--mu); cursor: default; background: none; }
.c .dkv { margin-top: 16px; }
.c .dbtn { display: flex; gap: 8px; margin-top: 20px; }
.c .dbtn .btn { flex: 1; }
.c .dbtn .btn.pri { flex: 1.6; }
@media (max-width: 640px) {
    .c .dform { grid-template-columns: 1fr; }
    .c .dsr { flex-wrap: wrap; }
    .c .dsr .inp { flex-basis: 100%; }
    .c .dsr .btn { flex: 1; }
}
/* ---- The apps section (mockup round v38 lib, libq, libapp, learn, auth, phlib): the library's group tabs with the search,
   four cards a row with only the details arrow and a white "on n servers" tag; an app's window over the library; how it
   works and the authors' page as boxes in the section's indigo. */
.c .lsr { display: flex; align-items: flex-end; gap: 16px; }
.c .lsr .ltabs { flex: 1; }
.c .lsr .inp.search { width: 260px; }
.c .inp.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: inherit; }
.c .inp.search > button.end { background: none; border: 0; padding: 0; color: var(--mu); cursor: pointer; display: grid; }
.c .lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.c .lgrid .lc { min-height: 200px; }
.c .lc a.cb { text-decoration: none; }
.c .lc .inst { position: absolute; top: 12px; inset-inline-end: 12px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--wc-card-add); color: var(--wc-card-add-fg); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; line-height: 1; font-weight: 500; }
.c .lc .inst .i { width: 12px; height: 12px; stroke-width: 2.4; }
.c .modal.win.appw { top: 70px; bottom: auto; max-height: calc(100dvh - 140px); inset-inline-end: 200px; width: 880px; }
.c .win.appw .sideh .hexi { background: var(--hue); color: var(--wc-card-fg); }
.c .win.appw .appd { margin: 0 0 16px; color: var(--mu); font-size: 13.5px; line-height: 1.85; }
.c .agrid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; }
.c .sech { font-size: 13px; font-weight: 500; color: var(--mu); margin: 0 0 8px; }
.c .sech.gap { margin-block-start: 16px; }
.c .ain { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--ln); font-size: 13.5px; }
.c .ain:last-of-type { border-bottom: 0; }
.c .ain .chip { margin-inline-start: auto; }
.c .chip.ok { background: var(--wc-ok-soft); color: var(--ok); }
.c .chip.warn { background: var(--wc-warn-soft); color: var(--warn); }
.c .chip.bad { background: var(--wc-danger-soft); color: var(--bad); }
.c .facts2 { background: var(--g2); border: 1px solid var(--ln); border-radius: 14px; padding: 6px 16px; }
.c .facts2 .kv { border-bottom: 1px solid var(--ln); padding: 10px 0; }
.c .facts2 .kv:last-child { border-bottom: 0; }
.c .facts2 .kv > span { color: var(--mu); }
.c .facts2 .kv > b { font-weight: 500; }
.c .win.appw .lrow { height: 52px; }
.c .win.appw .lrow .hexi[data-tone] { width: 32px; height: 32px; background: var(--hue); color: var(--wc-card-fg); }
.c a.lrow.srvl { height: 48px; color: inherit; text-decoration: none; }
.c a.lrow.srvl .hexi { width: 30px; height: 30px; }
.c a.lrow.srvl .st { margin-inline-start: auto; }
.c .lsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.c .lstep { background: var(--g1); border: 1px solid var(--ln); border-radius: 14px; padding: 18px; font-size: 13.5px; line-height: 1.8; }
.c .nsteps .n { font-size: 13.5px; }
.c .lstep .n, .c .nsteps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--sec); color: var(--sec-ink); display: grid; place-items: center; font-weight: 700; line-height: 1; flex: none; }
.c .lstep .n { margin-bottom: 10px; }
.c .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block-start: 14px; align-items: start; }
.c .two > .stack { display: grid; gap: 14px; }
.c .boxh.sm { padding: 16px 20px; }
.c .boxh.sm h2 { font-size: 17px; }
.c .boxb.sm { padding: 16px 20px; margin: 0; }
.c .lrisk { display: grid; grid-template-columns: 112px 1fr; gap: 10px 14px; align-items: center; font-size: 13px; line-height: 1.7; }
.c .lrisk.wide { grid-template-columns: 132px 1fr; }
.c .lrisk dt, .c .lrisk dd { margin: 0; }
.c .pts { list-style: none; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.7; }
.c .pts li { display: flex; gap: 10px; align-items: flex-start; }
.c .pts li .i { color: var(--ok); width: 16px; height: 16px; margin-top: 4px; }
.c .tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.c .tcard { background: var(--g1); border: 1px solid var(--ln); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.c .tcard > b { font-size: 16px; }
.c .tcard > p { margin: 0; font-size: 13px; color: var(--mu); line-height: 1.8; flex: 1; }
.c .tcard > .btn { align-self: flex-start; }
.c .tcard > .hexi { width: 40px; height: 40px; }
.c .hexi[data-tone="lib"] { background: var(--wc-primary-soft); color: var(--wc-primary-text); }
.c .nsteps { list-style: none; display: grid; gap: 10px; font-size: 13px; line-height: 1.7; }
.c .nsteps li { display: flex; gap: 14px; align-items: center; }
.c .alinks { list-style: none; padding-block: 6px; }
.c .alinks a { display: flex; align-items: center; gap: 10px; min-height: 42px; border-block-end: 1px solid var(--ln); font-size: 13px; color: var(--ind2); text-decoration: none; }
.c .alinks li:last-child a { border-block-end: 0; }
.c .alinks .i { width: 16px; height: 16px; }
@media (max-width: 760px) {
    .c .lsr { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
    .c .lsr .inp.search { width: auto; height: 44px; margin: 0; }
    .c .lsr .ltabs { overflow: hidden; }
    .c .lgrid { grid-template-columns: 1fr; gap: 10px; }
    .c .lgrid .lc { min-height: 0; padding: 16px; }
    .c .lgrid .lc .tt { margin-top: 50px; }
    .c .modal.win.appw { inset: 0; max-height: none; width: auto; }
    .c .agrid, .c .two, .c .tcards { grid-template-columns: 1fr; }
    .c .lsteps { grid-template-columns: 1fr 1fr; }
}

/* ---- My account in version D (mockup round v38: acctp, acctpref, acctsec, acctdel, phacct2): the navy account section,
   five tabs as links (SSH keys is the servers section's tab), the profile card with the avatar, switch rows, the sessions
   card, the sign-in history rows and the deletion request. */
.c .avt { width: 64px; height: 64px; border-radius: 50%; background: var(--sec); color: var(--sec-ink); display: grid; place-items: center; font-size: 26px; font-weight: 700; flex: none; overflow: hidden; }
.c .avt img { width: 100%; height: 100%; object-fit: cover; }
.c .prof .who { line-height: 1.4; min-width: 0; }
.c .prof .who b { display: block; font-size: 18px; }
.c .prof .who .mu { font-size: 13px; }
.c .prof .boxh > .end { margin-inline-start: auto; display: flex; gap: 8px; }
.c .upl { position: relative; overflow: hidden; cursor: pointer; }
.c .upl input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.c .inp.ro { background: var(--g2); color: var(--mu); }
.c .inp.ro input { color: inherit; }
.c .inp.cur { width: 220px; }
.c .inp.area { height: 70px; align-items: flex-start; padding-block-start: 12px; }
.c .lab.gap { margin-block-start: 18px; }
.c .lab.sub { font-weight: 400; color: var(--mu); }
.c .lab .lopt { font-weight: 400; color: var(--fa); }
.c .ptabs.myacc > * { white-space: nowrap; }
.c .ptabs.myacc .phn { display: none; }
/* Latin fields (email, Telegram, mobile): Latin glyphs and order, at the page's start like the mockup's text. */
.c .inp input.latin { font-family: "Inter", sans-serif; }
html[dir="rtl"] .c .inp input.latin, html[dir="rtl"] .c .inp input.latin:placeholder-shown { direction: ltr; text-align: end; }
.c .prof .sv { display: flex; align-items: center; gap: 12px; margin-block-start: 20px; }
.c .prof .sv .mu { font-size: 12.5px; }
.c .two.myacc { margin-block-start: 0; }
.c .segs .chip { height: 32px; padding: 0 14px; font-size: 13px; border: 0; cursor: pointer; font-family: inherit; }
.c .segs .chip:disabled { cursor: default; }
.c .swr { display: flex; align-items: center; gap: 14px; min-height: 60px; border-block-end: 1px solid var(--ln); }
.c .swr:last-child { border-block-end: 0; }
.c .swr .tx { line-height: 1.5; }
.c .swr .tx b { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.c .swr .tx small { display: block; font-size: 12px; color: var(--mu); }
.c .swr .tg { margin-inline-start: auto; }
.c .boxb.sm .swr:first-of-type { margin-block-start: 8px; }
.c .boxb.swl { padding: 6px 20px 12px; }
.c .boxb.swl .swr:first-of-type { margin-block-start: 0; }
.c .sess { padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.c .sess .tx { line-height: 1.5; }
.c .sess .tx b { font-weight: 500; }
.c .sess .tx small { display: block; font-size: 12.5px; color: var(--mu); }
.c .sess > .btn.q { margin-inline-start: auto; }
.c .box.gap { margin-block-start: 14px; }
.c .btn.dzq { background: var(--wc-danger-soft); color: var(--bad); }
.c .btn.gap { margin-block-start: 16px; }
.c .boxb.hists { padding: 4px 20px 10px; }
.c .hist { display: grid; grid-template-columns: 130px 120px 90px 1fr 110px; align-items: center; min-height: 46px; border-block-end: 1px solid var(--ln); font-size: 13px; gap: 10px; }
.c .hist:last-child { border-block-end: 0; }
.c .hist .dev { font-size: 12.5px; text-align: start; }
.c .hist .ip { font-family: var(--wp-font-mono); font-size: 12px; color: var(--mu); direction: ltr; text-align: start; }
.c .lede4 { margin: 0 0 14px; font-size: 13.5px; line-height: 1.85; }
@media (max-width: 760px) {
    .c .ptabs.myacc { overflow-x: auto; scrollbar-width: none; }
    .c .ptabs.myacc > * { flex: none; }
    .c .ptabs.myacc .dk { display: none; }
    .c .ptabs.myacc .phn { display: inline; }
    .c .prof .sv { flex-direction: column; align-items: stretch; }
    .c .prof .sv .mu { display: none; }
    .c .prof .boxh { flex-wrap: wrap; }
    .c .prof .boxh > .end { margin-inline-start: 0; inline-size: 100%; }
    .c .prof .avt { width: 52px; height: 52px; font-size: 21px; }
    .c .prof .fgrid { grid-template-columns: 1fr; }
    .c .prof .sv .btn.pri { inline-size: 100%; }
    .c .inp.cur { width: auto; }
    .c .sess { flex-wrap: wrap; }
    .c .sess > .btn.q { margin-inline-start: 0; }
    .c .hist { grid-template-columns: 1fr auto; padding-block: 8px; }
    .c .hist .dev { grid-column: 1 / -1; }
}

/* ---- The validator and the prompt kit in version D (mockup round v38: authv, authp): windows over the authors' tab,
   as tall as their content. */
.c .modal.win.authw { top: 120px; bottom: auto; inset-inline-end: 160px; width: 960px; max-height: calc(100% - 160px); }
.c .modal.win.pkw { top: 100px; inset-inline-end: 180px; width: 920px; }
.c .win.authw .sideh .hexi { width: 32px; height: 32px; background: var(--wc-primary-soft); color: var(--wc-primary-text); }
.c .code { font-family: var(--wp-font-mono); font-size: 12px; line-height: 1.75; direction: ltr; text-align: start; background: var(--g0); border: 1px solid var(--ln2); border-radius: 12px; padding: 12px 14px; color: var(--wc-term-fg); white-space: pre; overflow: auto; margin: 0; }
.c .code.vtext { display: block; width: 100%; height: 236px; resize: none; outline: none; }
.c .code.vtext:focus { border-color: var(--ind); }
.c .code.ptext { height: 170px; white-space: pre-wrap; }
.c .vgrid > *, .c .pkgrid > * { min-width: 0; }
.c .vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.c .vacts { display: flex; gap: 8px; margin-block-start: 12px; }
.c .note.vpriv { margin: 12px 0 0; }
.c .vout > .alert { margin: 0 0 6px; }
.c .vres { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-block-end: 1px solid var(--ln); font-size: 13px; line-height: 1.6; }
.c .vres:last-child { border-block-end: 0; }
.c .vres .i { width: 16px; height: 16px; margin-block-start: 3px; flex: none; }
.c .vres.e .i { color: var(--bad); }
.c .vres.w .i { color: var(--warn); }
.c .vres .en { font-size: 12.5px; flex: 1; text-align: start; }
.c .vprev { max-width: 280px; }
.c .vprev .lc { min-height: 200px; }
.c .pkgrid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-block-start: 14px; }
.c .pkgrid .nsteps { margin: 0; padding: 0; align-content: start; }
@media (max-width: 760px) {
    .c .modal.win.authw { inset: 0; width: auto; max-height: none; }
    .c .vgrid, .c .pkgrid { grid-template-columns: 1fr; }
    .c .vprev { max-width: none; }
}

/* Setup: a domain field's "I have / buy a new domain" switch and the small result list (mockup dompick). */
.c .seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--g2); border: 1px solid var(--wc-line); gap: 2px; margin-bottom: 12px; }
.c .seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; display: flex; align-items: center; font: inherit; font-size: 13px; color: var(--wc-muted); font-weight: 500; background: transparent; cursor: pointer; }
.c .seg button.on { background: var(--wc-line); color: var(--wc-fg); }
.c .dpick { margin-top: 12px; border: 1px solid var(--wc-line); border-radius: 12px; overflow: hidden; }
.c .dpick .pr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.c .dpick .pr + .pr { border-top: 1px solid var(--wc-line); }
.c .dpick .pr.on { background: var(--wc-selected); }
.c .dpick .pr .r { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--wc-line-strong); display: grid; place-items: center; flex: none; }
.c .dpick .pr.on .r { background: var(--wc-primary); border-color: var(--wc-primary); color: var(--wc-fg); }
.c .dpick .pr .r .i { width: 12px; height: 12px; }
.c .dpick .pr .end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.c .dpick .pr .rn { font-size: 12.5px; }
/* Setup: an app's DNS records (auto-DNS AD8, mockup v39 dnspk and dnsrv): the zone groups of the picker, the subdomain box under
   it, and the review's record table with its replace ticks. */
.c .dpick .dgh { min-height: 30px; display: flex; align-items: center; padding: 0 14px; background: var(--g2); color: var(--wc-muted); font-size: 12px; }
.c .dpick .dgh + .pr, .c .dpick .pr + .dgh { border-top: 1px solid var(--wc-line); }
.c .dnzsub { margin-top: 10px; }
.c .dnzsub .end { color: var(--wc-muted); white-space: nowrap; }
.c .dnsrv { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wc-line); }
.c .dnsrv h4 { margin: 0 0 10px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c .dnsrv h4 .i { width: 18px; height: 18px; }
.c .dnsrv h4 .mu { font-weight: 400; font-size: 12.5px; }
.c .dnsrv .alert { margin: 0 0 12px; }
.c .dnsrv .note { margin: 10px 0 0; }
.c .dnst { border: 1px solid var(--wc-line); border-radius: 12px; overflow: hidden; }
.c .dnst .dr { display: grid; grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; font-size: 13px; }
.c .dnst .dr + .dr { border-top: 1px solid var(--wc-line); }
.c .dnst .dr.h { min-height: 34px; background: var(--g2); color: var(--wc-muted); font-size: 12px; }
.c .dnst .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The install window's DNS (AD8, mockup v39 dnsauto, dnswait, dnsattn, dnsrvt, phdnsw): the records added by hand with copy buttons and
   whether each is seen, "check now", the row that waits for the user, and the revert's confirmation over the window. On a phone each
   record is a two-line card: type and name on top, value and state below, and "check now" fills the bottom bar. */
.c .dnst.io .dr { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.c .dnst .cp { display: flex; align-items: center; gap: 4px; min-width: 0; }
.c .dnst .cp .ib { flex: none; width: 28px; height: 28px; background: transparent; }
.c .dnchk { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.c .dnchk .mu { font-size: 12.5px; }
.c .instw .note.dnn { margin: 14px 0 18px; }
.c .instw .dnsrv > .mu { margin: 0 0 10px; font-size: 13px; }
.c .steps.prog li.wait .sic { color: var(--warn); }
.c .prog li small[data-tone="warn"] { color: var(--warn); }
.c .unbox .modal.pw.rvt { z-index: var(--z-pop); inset: 0; margin: auto; height: fit-content; width: min(480px, calc(100% - 32px)); }
@media (max-width: 760px) {
    .c .dnst.io { border: 0; border-radius: 0; overflow: visible; }
    .c .dnst.io .dr.h { display: none; }
    .c .dnst.io .dr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ty nm nm" "va va sx"; row-gap: 8px; padding: 14px; background: var(--g2); border: 1px solid var(--wc-line); border-radius: 12px; }
    .c .dnst.io .dr + .dr { margin-block-start: 8px; }
    .c .dnst.io .ty { grid-area: ty; }
    .c .dnst.io .nm { grid-area: nm; }
    .c .dnst.io .va { grid-area: va; padding-block-start: 8px; border-block-start: 1px solid var(--wc-line); }
    .c .dnst.io .sx { grid-area: sx; padding-block-start: 8px; border-block-start: 1px solid var(--wc-line); }
    .c .bbar > button.dnchkp { display: inline-flex; flex: 1; height: 44px; }
}
/* My connections (Integrations): the account section's sixth tab. Rows as the keys tab's, cards in the library's grid, the connect
   dialog in the confirmation frame's size. Colours from the state tokens only. */
.c .cnxh h1 { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.c .cnxh .mu { margin: 0 0 16px; font-size: 13px; line-height: 1.8; }
.c .cnx > .note { margin: 0 0 16px; }
.c .cnxmine .boxb { display: flex; flex-direction: column; gap: 8px; }
.c .lrow.cnxr { height: auto; min-height: 60px; padding-block: 10px; }
.c .cnxr .tx { min-width: 0; line-height: 1.5; }
.c .cnxr .tx small { display: block; font-size: 12px; color: var(--mu); }
.c .cnxr .end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.c .cnxsc { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 6px; }
.c .cnxerr { color: var(--bad); display: block; margin-block-start: 6px; }
.c .cnxdone { color: var(--ok); display: block; margin-block-start: 6px; }
.c .cnxuse { display: block; margin-block-start: 10px; color: var(--warn); font-weight: 500; }
.c .cnxuses { margin: 6px 0 0; padding-inline-start: 20px; }
.c .hexi[data-tone="cnx"] { background: var(--wc-account-soft); color: var(--wc-account-text); }
.c .chip.cnxst[data-state="active"] { background: var(--wc-ok-soft); color: var(--ok); }
.c .chip.cnxst[data-state="invalid"] { background: var(--wc-warn-soft); color: var(--warn); }
.c .lrow.cnxr[data-state="disabled"] .chip.cnxst { background: var(--g3); color: var(--mu); }
.c .cnxat { font-size: 12px; white-space: nowrap; }
.c .cnxadd { margin-block-start: 22px; }
.c .cnxadd > h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.c .cnxtabs { display: flex; gap: 6px; margin-block-end: 14px; overflow-x: auto; scrollbar-width: none; }
.c .cnxtabs > button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--g3); color: var(--mu); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; flex: none; }
.c .cnxtabs > button.on { background: var(--sec); color: var(--sec-ink); }
.c .cnxg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.c .box.cnxc { padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.c .box.cnxc > p { margin: 0; font-size: 12.5px; line-height: 1.7; flex: 1; }
.c .box.cnxc.off { opacity: .6; }
.c .cnxoff { font-size: 12px; }
.c .modal.cnxd { width: 520px; inset-inline-start: calc(50% - 260px); top: 96px; max-block-size: calc(100vh - 140px); overflow-y: auto; padding: 24px; }
.c .modal.cnxd h3 { margin: 0 0 14px; font-size: 19px; font-weight: 700; padding-inline-end: 40px; }
.c .modal.cnxd .lab { margin-block-start: 14px; }
.c .modal.cnxd .note { margin: 14px 0 0; }
.c .modal.cnxd .note.warn > .i { color: var(--warn); }
.c .modal.cnxd .note.ok > .i { color: var(--ok); }
.c .cnxguide { border: 1px solid var(--ln); border-radius: 12px; padding: 10px 14px; background: var(--g2); }
.c .cnxguide summary { cursor: pointer; font-weight: 500; }
.c .cnxguide ol { margin: 10px 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.8; }
.c .inp.pwd .ib { width: 28px; height: 28px; margin-inline-start: 6px; }
.c .cnxsk .sk { border-radius: 12px; background: var(--g3); }
.c .cnxsk .sk.row { height: 60px; margin-block-end: 8px; }
.c .cnxsk .sk.card { height: 150px; }
@media (max-width: 1000px) { .c .cnxg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .c .cnxg { grid-template-columns: minmax(0, 1fr); }
    .c .lrow.cnxr { flex-wrap: wrap; }
    .c .cnxr .end { inline-size: 100%; justify-content: space-between; margin-inline-start: 0; }
    .c .modal.cnxd { inset: auto 0 0 0; width: auto; top: auto; max-block-size: 92vh; border-radius: 18px 18px 0 0; }
}

/* "What you can do" after a domain or server purchase (I-CARDS, mockup v40 nxdom, nxpark, nxmail, nxsrv, nxkey, phnx) */
.c .nxh { max-width: 960px; margin: 0 0 18px; }
.c .nxh h1 { margin: 2px 0 6px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.c .nxh .mu { margin: 0 0 12px; font-size: 13px; line-height: 1.8; }
.c .nx > .note { margin: 0 0 16px; }
.c .nxg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 960px; }
.c .nxg .sk.card { height: 220px; border-radius: 14px; background: var(--g3); }
.c .box.nxc { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c .nxc .nxt { display: flex; align-items: center; gap: 10px; }
.c .nxc .nxt h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.c .nxc > p.mu { margin: 0; font-size: 12.5px; line-height: 1.8; flex: 1; }
.c .nxc .nxs { font-size: 12.5px; line-height: 1.6; }
.c .nxc .chip[data-state="active"] { background: var(--wc-ok-soft); color: var(--ok); }
.c .nxc .chip[data-state="failed"] { background: var(--wc-warn-soft); color: var(--warn); }
.c .nxc .lab { margin: 0; }
.c .nxc .inp.nxsel { height: 40px; }
.c .nxc .note { margin: 0; }
.c .nxc .nxa { display: flex; flex-wrap: wrap; gap: 8px; }
.c .modal.nxd { width: 520px; inset-inline-start: calc(50% - 260px); top: 96px; max-block-size: calc(100vh - 140px); overflow-y: auto; padding: 24px; }
.c .modal.nxd.wide { width: 680px; inset-inline-start: calc(50% - 340px); }
.c .modal.nxd h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; padding-inline-end: 40px; }
.c .modal.nxd > p.mu { margin: 0 0 12px; font-size: 13px; line-height: 1.8; }
.c .modal.nxd .lab { margin-block-start: 14px; }
.c .modal.nxd .note { margin: 14px 0 0; }
.c .modal.nxd .note.warn > .i { color: var(--warn); }
.c .modal.nxd .note.ok > .i { color: var(--ok); }
.c .modal.nxd .dnst { margin-block-start: 4px; }
.c .dnst.io.nxm .dr { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.6fr); }
.c .dnst.io.nxm.st4 .dr { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr) auto; }
.c .dnst.nxm .st.idle .dot { background: var(--mu); }
.c .modal.nxd .alert.nxloss { margin: 14px 0 0; align-items: flex-start; }
.c .nxrec { display: block; margin-block-start: 4px; color: var(--tx); }
.c .nxc .note.nxleft { margin-block-start: 10px; align-items: flex-start; }
.c .nxack { display: flex; align-items: center; gap: 10px; margin-block-start: 12px; font-size: 13.5px; font-weight: 500; }
.c .cmd.nxcp > .dn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Add a domain you already own" (OWN-2, issue 943, mockup v41 domown, domimp, domimpn): the wider dialog, a domain that cannot be picked,
   and the registrar card when none is connected yet. */
.c .modal.nxd.own { width: 560px; inset-inline-start: calc(50% - 280px); }
/* The nameserver window of a domain added by hand (issue 947, mockup domimpm): each nameserver with whether public DNS shows it, then "check now". */
.c .modal.nxd.own .cmd.nxcp { margin-top: 8px; gap: 10px; }
.c .modal.nxd.own .cmd.nxcp .st { flex: none; }
.c .modal.nxd.own .alert.warn { margin-top: 12px; }
.c .modal.nxd.own details.dhint { margin-top: 12px; }
.c .nxchk { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* A row that cannot be picked (a taken name, an open claim): the radio and the name dim, its status stays readable. */
.c .pr.dim { cursor: default; }
.c .pr.dim > .r, .c .pr.dim > .dn { opacity: .5; }
.c .dpick .pr .dn { font-size: 13.5px; }
.c .modal.nxd .dpick + .lab { margin-top: 16px; }
.c .ownc { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--ln); border-radius: 12px; background: var(--g2); margin-top: 12px; }
.c .ownc .tx { flex: 1; line-height: 1.6; font-size: 13px; }
@media (max-width: 1000px) { .c .nxg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .c .nxg { grid-template-columns: minmax(0, 1fr); }
    .c .dnst.io.nxm .dr { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ty nm" "va va"; }
    .c .dnst.io.nxm.st4 .dr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ty nm nm" "va va sx"; }
    .c .modal.nxd, .c .modal.nxd.wide, .c .modal.nxd.own { inset: auto 0 0 0; width: auto; top: auto; max-block-size: 92vh; border-radius: 18px 18px 0 0; }
}

/* ── Server workspace (Shay 2026-10-29; mockup wsfi, wsfd, wsed, wsterm, wstray, phwsf, phwss, phwse): one window per
   server with Files, Editor and Terminal tabs. Every tab stays mounted and is only hidden, so the shell and unsaved text
   survive a switch; the explorer's action panel becomes a bottom sheet on a phone. ── */
.c .ws { position: fixed; z-index: var(--z-dialog); inset: 24px 40px; background: var(--g1); border: 1px solid var(--ln2); border-radius: 20px; box-shadow: var(--wc-shadow-modal); overflow: hidden; display: flex; flex-direction: column; }
.c .ws[hidden], .c .ws .wtp[hidden], .c .ws .edp[hidden] { display: none; }
.c .ws > .sideh { flex: none; padding: 0 16px 0 20px; gap: 12px; }
.c .ws > .sideh h3 { margin-inline-end: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.c .ws > .sideh h3 .mu { font-weight: 400; font-size: 13px; }
.c .ws > .sideh .hexi { width: 32px; height: 32px; }
.c .ws > .sideh .phb { display: none; }
.c .wst { display: flex; gap: 4px; margin-inline: 20px auto; padding: 3px; border-radius: 12px; background: var(--g2); border: 1px solid var(--ln); }
.c .wst > button { height: 34px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 8px; color: var(--mu); font: inherit; font-weight: 500; line-height: 1; cursor: pointer; }
.c .wst > button > i { font-style: normal; padding-top: 2px; }
.c .wst > button[aria-selected="true"] { background: var(--g4); color: var(--tx); }
.c .wst > button:disabled { opacity: .45; cursor: default; }
.c .wst .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--g3); color: var(--mu); font-size: 11.5px; display: inline-grid; place-items: center; }
.c .wst > button[aria-selected="true"] .n { background: var(--g2); color: var(--tx); }
.c .wst .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.c .ws .wtp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.c .ws .fx { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.c .wsb { flex: none; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--ln); }
.c .wsb .ib { background: transparent; color: var(--mu); }
.c .wsb .ib:disabled { opacity: .4; cursor: default; }
.c .wsb .vs { width: 1px; height: 22px; background: var(--ln2); margin: 0 4px; flex: none; }
.c .wsb .end { margin-inline-start: auto; display: flex; gap: 6px; }
.c .addr { flex: 1; min-width: 0; height: 36px; border-radius: 10px; background: var(--g0); border: 1px solid var(--ln2); display: flex; align-items: center; gap: 2px; padding: 0 12px; font-family: "Inter", sans-serif; font-size: 13px; color: var(--mu); overflow: hidden; white-space: nowrap; }
.c .addr button { border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 2px; border-radius: 6px; cursor: pointer; }
.c .addr button:hover { color: var(--tx); background: var(--g2); }
.c .addr b { font-weight: 500; color: var(--tx); }
.c .addr .sep { color: var(--fa); padding: 0 4px; }
.c .fsr { width: 200px; flex: none; height: 36px; border-radius: 10px; background: var(--g0); border: 1px solid var(--ln2); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--fa); font-size: 13px; }
.c .fsr .i { width: 16px; height: 16px; }
.c .fsr input:is([type], :not([type])) { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--tx); font: inherit; outline: none; padding: 0; height: 100%; }
.c .fsr input::placeholder { color: var(--fa); opacity: 1; }
.c .fsr input::-webkit-search-cancel-button { display: none; }
.c .fsr:focus-within { border-color: var(--ind); }
.c .vseg { display: inline-flex; flex: none; padding: 2px; border-radius: 10px; background: var(--g2); border: 1px solid var(--ln); }
.c .vseg button { width: 34px; height: 30px; border-radius: 8px; border: 0; background: transparent; display: grid; place-items: center; color: var(--mu); cursor: pointer; }
.c .vseg button[aria-pressed="true"] { background: var(--g4); color: var(--tx); }
.c .vseg button:disabled { opacity: .4; cursor: default; }
.c .vseg .i { width: 17px; height: 17px; }
.c .wsb .btn.up { cursor: pointer; position: relative; }
.c .wsb .btn.up.dis { opacity: .45; pointer-events: none; }
.c .newm { position: relative; }
.c .newm .menu { top: 40px; inset-inline-end: 0; min-width: 190px; }
.c .ws .menu .mi { height: 36px; font-size: 13px; }
.c .ws .menu .mi .i { width: 16px; height: 16px; color: var(--mu); }
.c .ws .menu .mi .k { margin-inline-start: auto; font-family: "Inter", sans-serif; font-size: 11.5px; color: var(--fa); direction: ltr; padding-inline-start: 16px; }
.c .ws .menu .mi.red .i { color: inherit; }
.c .ws .fmsg { margin: 12px 16px 0; flex: none; }
.c .ws .fmsg .tx { flex: 1; min-width: 0; }
.c .ws .fmsg .tx b { margin-bottom: 2px; }
.c .ws .fmsg .ib { width: 28px; height: 28px; background: transparent; color: var(--mu); }
.c .wsm { flex: 1; min-height: 0; display: flex; position: relative; }
.c .fx-list { flex: 1; min-width: 0; padding: 16px; position: relative; overflow: auto; outline: none; }
.c .fx-list:focus-visible { box-shadow: inset 0 0 0 2px var(--wc-focus); }
.c .fx-list.drag { box-shadow: inset 0 0 0 2px var(--ind); background: var(--indbg); }
.c .fx-list .drop { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.c .fx-list.drag .drop { pointer-events: auto; }
.c .fempty { height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--mu); }
.c .fempty > .i { width: 36px; height: 36px; stroke-width: 1.5; }
.c .fempty b { color: var(--tx); font-weight: 500; }
/* Icon view: 104 px tiles (mockup wsfi). Each kind has one icon and one colour; folders take the servers amber. */
.c .fx-grid { display: grid; grid-template-columns: repeat(auto-fill, 104px); gap: 8px; align-content: start; }
.c .fx-tile { height: 100px; border-radius: 12px; border: 1px solid transparent; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 6px 0; text-align: center; cursor: default; user-select: none; }
.c .fx-tile:hover { background: var(--g2); }
.c .fx-tile .fi { width: 44px; height: 40px; display: grid; place-items: center; }
.c .fx-tile .fi .i { width: 40px; height: 40px; stroke-width: 1.5; }
.c .fx-tile b { direction: ltr; font-family: "Inter", sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.3; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c .fx-tile.sel, .c .fx-tile.sel:hover { background: var(--indbg); border-color: var(--ind); }
.c .fx-tile.cut, .c .fr.cut { opacity: .5; }
.c .ty-folder { color: var(--wc-file-folder); }
.c .ty-code { color: var(--ind2); }
.c .ty-script { color: var(--ok); }
.c .ty-archive { color: var(--wc-file-archive); }
.c .ty-image { color: var(--wc-file-image); }
.c .ty-text { color: var(--mu); }
/* Details view (mockup wsfd): a grid of rows so a phone can fold the columns into one meta line. */
.c .fdt { font-size: 13px; }
.c .fdt .fh, .c .fdt .fr { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px 110px 120px; align-items: center; column-gap: 0; }
.c .fdt .fh { height: 34px; border-bottom: 1px solid var(--ln); position: sticky; top: -16px; background: var(--g1); z-index: var(--z-raise); }
.c .fdt .fh > * { padding: 0 10px; text-align: start; font: inherit; font-weight: 500; font-size: 12px; color: var(--mu); border: 0; background: transparent; white-space: nowrap; }
.c .fdt .fh > button { cursor: pointer; height: 100%; }
.c .fdt .fh > button[aria-sort="ascending"]::after { content: " ↑"; }
.c .fdt .fh > button[aria-sort="descending"]::after { content: " ↓"; }
.c .fdt .fr { height: 40px; border-bottom: 1px solid var(--ln); color: var(--mu); cursor: default; user-select: none; }
.c .fdt .fr:hover { background: var(--g2); }
.c .fdt .fr.sel { background: var(--indbg); border-radius: 8px; }
.c .fdt .fr > span { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c .fdt .fr > .c1 { color: var(--tx); }
.c .fdt .nm { display: flex; align-items: center; gap: 10px; }
.c .fdt .nm .i { width: 20px; height: 20px; }
.c .fdt .nm .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c .fdt .nm .tx b { font-family: "Inter", sans-serif; font-weight: 400; }
.c .fdt .nm .tx small { display: none; }
.c .fdt .mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; direction: ltr; unicode-bidi: isolate; }
.c .fdt .fr .dots { display: none; }
.c .fmenu { position: fixed; top: var(--my); left: var(--mx); inset-inline-end: auto; min-width: 230px; z-index: var(--z-pop); }
html[dir="rtl"] .c .fmenu { left: auto; right: calc(100vw - var(--mx)); }
/* The action panel (WPF SshFileBrowserWindow parity): facts, permissions as tick boxes with the octal number, actions. */
.c .fap { width: 312px; flex: none; border-inline-start: 1px solid var(--ln); background: var(--g1); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.c .fap .hdl, .c .fap .shx, .c .fsheet-scrim { display: none; }
.c .fap .aph { display: flex; align-items: center; gap: 12px; }
.c .fap .aph .fi { width: 44px; height: 44px; border-radius: 12px; background: var(--g2); border: 1px solid var(--ln); display: grid; place-items: center; flex: none; }
.c .fap .aph .fi .i { width: 24px; height: 24px; }
.c .fap .nmx { min-width: 0; flex: 1; }
.c .fap .nmx b { display: block; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c .fap .nmx small { display: block; font-size: 12px; color: var(--mu); }
.c .apf { display: grid; grid-template-columns: 76px 1fr; gap: 4px 10px; font-size: 12.5px; margin: 0; }
.c .apf dt { color: var(--mu); }
.c .apf dd { margin: 0; font-weight: 500; justify-self: start; min-width: 0; overflow-wrap: anywhere; }
.c .apf dd.en { font-weight: 400; }
.c .perms { display: flex; flex-direction: column; gap: 8px; }
.c .aps { font-size: 12px; font-weight: 500; color: var(--mu); display: flex; align-items: center; justify-content: space-between; }
.c .aps .oct, .c .aps input.oct:is([type], :not([type])) { height: 26px; width: 52px; min-height: 0; box-shadow: none; font-weight: 400; padding: 0 8px; border-radius: 8px; background: var(--g0); border: 1px solid var(--ln2); display: grid; place-items: center; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--tx); direction: ltr; outline: none; }
.c .aps .oct:focus { border-color: var(--ind); }
.c .perm { display: grid; grid-template-columns: 1fr repeat(3, 44px); align-items: center; row-gap: 2px; font-size: 12.5px; }
.c .perm > span { height: 30px; display: flex; align-items: center; }
.c .perm .h { color: var(--fa); font-size: 11.5px; justify-content: center; }
.c .perm .c3 { justify-content: center; }
.c .pb { width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 2px solid var(--ln2); background: transparent; display: grid; place-items: center; color: var(--wc-primary-fg); cursor: pointer; }
.c .pb.on { background: var(--ind); border-color: var(--ind); }
.c .pb:disabled { cursor: default; }
.c .pb .i { width: 12px; height: 12px; stroke-width: 3; }
.c .aprc { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mu); }
.c .aprc input { accent-color: var(--ind); width: 16px; height: 16px; margin: 0; }
.c .perms > .btn { align-self: flex-start; }
.c .apa { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.c .apa button { height: 34px; border-radius: 9px; background: var(--g2); border: 1px solid var(--ln); display: flex; align-items: center; gap: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--tx); cursor: pointer; text-align: start; }
.c .apa button > span { padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c .apa button .i { width: 16px; height: 16px; color: var(--mu); }
.c .apa button:hover { background: var(--g3); }
.c .apa button.red { color: var(--wc-danger-text); }
.c .apa button.red .i { color: inherit; }
.c .apa button:disabled { opacity: .4; cursor: default; }
.c .apa button.pri { background: var(--ind); border-color: var(--ind); color: var(--wc-primary-fg); }
.c .apa button.pri .i { color: inherit; }
.c .fap .note { margin: 0; }
.c .fprompt, .c .fadm { display: flex; flex-direction: column; gap: 10px; }
.c .fprompt > b { font-weight: 500; line-height: 1.6; }
.c .fprompt .lab, .c .fadm .lab { margin: 0; }
.c .fprompt .inp, .c .fadm .inp { height: 40px; font-family: "Inter", sans-serif; }
.c .pbt { display: flex; gap: 8px; justify-content: flex-end; }
.c .btn.danger { background: var(--wc-danger-fill); color: var(--wc-danger-fill-fg); }
.c .ws .fadm { margin: 12px 16px 0; padding: 14px 16px; border: 1px solid var(--ln2); border-radius: 12px; background: var(--g2); flex: none; max-width: 420px; }
.c .ws .fadm.msi .inp.ta { height: 96px; padding-block: 8px; align-items: stretch; }
.c .ws .fadm.msi .seg { margin-bottom: 0; align-self: flex-start; }
.c .ws .fadm.msi .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.c .ws .fadm.msi .alert code { overflow-wrap: anywhere; }
.c .wss { flex: none; height: 36px; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-top: 1px solid var(--ln); font-size: 12.5px; color: var(--mu); }
.c .wss .end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.c .wss .tg { width: 34px; height: 20px; }
.c .wss .tg::after { width: 14px; height: 14px; }
.c .wss .chip { border: 0; font: inherit; font-size: 11.5px; cursor: pointer; margin-inline-start: 8px; }
.c .wss .chip:disabled { cursor: default; }
.c .wss .spin, .c .wss .upl .spin { width: 13px; height: 13px; border-width: 2px; }
.c .wss .upl { display: inline-flex; align-items: center; gap: 6px; }
/* Editor tab: one tab per open file, the amber dot while unsaved (mockup wsed). */
.c .eft { flex: none; height: 42px; display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; background: var(--g0); border-bottom: 1px solid var(--ln); overflow-x: auto; overflow-y: hidden; }
.c .eft .et { flex: none; height: 34px; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 0 4px; border-radius: 10px 10px 0 0; border: 1px solid transparent; border-bottom: 0; color: var(--mu); }
.c .eft .et.on { background: var(--g1); color: var(--tx); border-color: var(--ln); margin-bottom: -1px; height: 35px; }
.c .eft .et > button { border: 0; background: transparent; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 6px; cursor: pointer; font-family: "Inter", sans-serif; font-size: 12.5px; white-space: nowrap; }
.c .eft .i { width: 15px; height: 15px; }
.c .eft .x { width: 22px; padding: 0; justify-content: center; color: var(--fa); }
.c .eft .un { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.c .ws .edp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.c .edv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.c .edv .fmsg .btn { flex: none; }
.c .etb { flex: none; height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-bottom: 1px solid var(--ln); }
.c .etb .ib { background: transparent; color: var(--mu); width: 32px; height: 32px; border-radius: 50%; }
.c .etb .ib:hover { color: var(--tx); }
.c .etb .ib.on { background: var(--g3); color: var(--tx); }
.c .etb .vs { width: 1px; height: 20px; background: var(--ln2); margin: 0 4px; flex: none; }
.c .etb .end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.c .etb .btn .i { width: 16px; height: 16px; }
/* The code itself (CodeMirror 6, wwwroot/js/code-editor.js): always left to right, the gutter on a hairline, the
   syntax colours and search matches from the --wc-code-* tokens. */
.c .cmw { flex: 1; min-height: 0; display: flex; direction: ltr; text-align: left; background: var(--g1); }
.c .cmw .cm-editor { flex: 1; min-width: 0; height: 100%; background: var(--g1); color: var(--tx); font-size: 13px; }
.c .cmw .cm-editor.cm-focused { outline: none; }
.c .cmw .cm-scroller { font-family: "JetBrains Mono", monospace; line-height: 22px; }
.c .cmw .cm-content { padding: 10px 0; caret-color: var(--ind2); }
.c .cmw .cm-line { padding: 0 14px; }
.c .cmw .cm-gutters { background: var(--g1); color: var(--fa); border-right: 1px solid var(--ln); }
.c .cmw .cm-lineNumbers .cm-gutterElement { min-width: 40px; padding: 0 12px 0 8px; }
.c .cmw .cm-activeLineGutter { background: transparent; color: var(--tx); }
.c .cmw .cm-activeLine { background: var(--wc-code-active-line); }
.c .cmw .cm-cursor { border-left: 2px solid var(--ind2); }
.c .cmw .cm-selectionBackground, .c .cmw .cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: var(--indbg); }
.c .cmw .cm-searchMatch { background: var(--wc-code-match); border-radius: 3px; }
.c .cmw .cm-searchMatch-selected { background: var(--wc-code-match-current); outline: 1px solid var(--warn); }
.c .cmw .cm-selectionMatch { background: var(--wc-code-match); }
.c .cmw .cm-matchingBracket { background: transparent; outline: 1px solid var(--mu); border-radius: 2px; color: inherit; }
.c .cmw .cm-nonmatchingBracket { outline: 1px solid var(--bad); }
.c .cmw .ck { color: var(--wc-code-keyword); }
.c .cmw .cs { color: var(--wc-code-string); }
.c .cmw .cc { color: var(--wc-code-comment); font-style: italic; }
.c .cmw .cn { color: var(--wc-code-number); }
.c .cmw .cv { color: var(--wc-code-variable); }
.c .cmw .ci { color: var(--bad); }
.c .cmw .cm-panels { background: var(--g2); color: var(--tx); border: 0; }
.c .cmw .cm-panels-top { border-bottom: 1px solid var(--ln); }
.c .cmw .cm-panels-bottom { border-top: 1px solid var(--ln); }
/* The find bar (mockup wsed) and CodeMirror's go-to-line box. */
.c .efb { display: flex; align-items: center; gap: 8px; padding: 8px 16px; flex-wrap: wrap; }
.c .efb .fin { width: 240px; height: 32px; border-radius: 8px; background: var(--g1); border: 1px solid var(--ln2); display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.c .efb .fin.rep { width: 200px; }
.c .efb .fin:focus-within { border-color: var(--ind); }
.c .efb .fin.bad { border-color: var(--bad); }
.c .efb .fin input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--tx); outline: none; font-family: "JetBrains Mono", monospace; font-size: 12.5px; padding: 0; }
.c .efb .fin input::placeholder { color: var(--fa); font-family: "Shabnam", "Inter", Tahoma, sans-serif; }
.c .efb .fin .cnt { flex: none; font-size: 11.5px; color: var(--mu); }
.c .efb .op { width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; display: grid; place-items: center; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; color: var(--mu); cursor: pointer; }
.c .efb .op.on { background: var(--indbg); color: var(--ind2); }
.c .efb .btn.sm { height: 30px; padding: 0 12px; }
.c .efb .ib.x { width: 28px; height: 28px; background: transparent; color: var(--mu); margin-left: auto; }
.c .efb .ib.x .i { width: 16px; height: 16px; }
.c .cmw .cm-panel.cm-gotoLine { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px; }
.c .cmw .cm-panel.cm-gotoLine input { width: 90px; height: 30px; border-radius: 8px; background: var(--g1); border: 1px solid var(--ln2); color: var(--tx); padding: 0 8px; font-family: "JetBrains Mono", monospace; outline: none; }
.c .cmw .cm-panel.cm-gotoLine input:focus { border-color: var(--ind); }
.c .cmw .cm-panel.cm-gotoLine button { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--g3); color: var(--ind2); font: inherit; cursor: pointer; }
.c .ess { flex: none; height: 32px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--mu); white-space: nowrap; }
.c .ess .pth { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c .ess .end { margin-inline-start: auto; display: flex; gap: 14px; }
.c .ess .wn { color: var(--warn); display: inline-flex; align-items: center; gap: 6px; }
.c .ess .wn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.c .ews { display: none; }
/* Terminal tab (mockup wsterm). */
.c .ws .tbar { height: 48px; }
.c .tst { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); }
.c .tst::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.c .ws .tm .term { flex: 1; min-height: 0; height: auto; }
/* Tray: one chip per minimized workspace; pointing at it (or focus inside) shows its card. */
.c .tray .trw { position: relative; }
.c .tray .tb { cursor: pointer; }
.c .tray .tb .tk { display: inline-flex; gap: 4px; color: var(--mu); padding-inline-start: 6px; border-inline-start: 1px solid var(--ln2); margin-inline-start: 2px; }
.c .tray .tb .tk .i { width: 15px; height: 15px; }
.c .tray .tb .tk .un { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); align-self: center; }
.c .tray .tb .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.c .trc { display: none; position: absolute; bottom: 50px; inset-inline-start: 0; width: 320px; background: var(--g2); border: 1px solid var(--ln2); border-radius: 14px; box-shadow: var(--wc-shadow-menu); padding: 14px; }
.c .trw:hover .trc, .c .trw:focus-within .trc { display: block; }
.c .trc::after { content: ""; position: absolute; inset-inline: 0; bottom: -12px; height: 12px; }
.c .trc .h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.c .trc .h b { font-size: 15px; line-height: 1.3; }
.c .trc .h .mu { font-size: 12px; }
.c .trc .h .hexi { width: 30px; height: 30px; }
.c .trc .r { display: flex; align-items: center; gap: 10px; height: 36px; font-size: 13px; }
.c .trc .r .i { width: 16px; height: 16px; color: var(--mu); }
.c .trc .r .end { margin-inline-start: auto; color: var(--mu); font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c .trc .note { margin: 6px 0 0; }
.c .trc .bt { display: flex; gap: 8px; margin-top: 10px; }
.c .trc .bt .btn { flex: 1; }
@media (max-width: 1100px) {
    .c .ws { inset: 16px; }
    .c .fsr { width: 150px; }
    .c .wsb .btn.sm > span { display: none; }
    .c .fdt .fh, .c .fdt .fr { grid-template-columns: minmax(0, 1fr) 100px 130px 100px; }
    .c .fdt .c5 { display: none; }
}
/* Phone (mockup phwsf, phwss, phwse): full screen, the tabs fill the width under the header, the list folds into rows
   with one meta line and a dots button, and the action panel is a sheet from the bottom. */
@media (max-width: 760px) {
    .c .ws { inset: 0; border: 0; border-radius: 0; box-shadow: none; }
    .c .ws > .sideh { height: auto; min-height: 56px; padding: 8px 8px 8px 12px; flex-wrap: wrap; row-gap: 10px; }
    .c .ws > .sideh .hexi, .c .ws > .sideh .x { display: none; }
    .c .ws > .sideh .phb { display: inline-grid; }
    .c .ws > .sideh h3 { margin-inline-end: auto; }
    .c .wst { order: 5; flex-basis: 100%; margin: 0 4px; display: grid; grid-template-columns: repeat(3, 1fr); }
    .c .wst > button { justify-content: center; height: 36px; padding: 0 8px; }
    .c .wsb { height: 52px; padding: 0 12px; gap: 4px; border-bottom: 0; }
    .c .wsb .fsr, .c .wsb .vseg, .c .wsb .vs, .c .wsb .btn.q:not(.up), .c .wsb .bk, .c .wsb .rf { display: none; }
    .c .wsb .btn.up > span, .c .wsb .newm .btn > span { display: none; }
    .c .wsb .btn.up, .c .wsb .newm .btn { width: 36px; padding: 0; }
    .c .fx-list { padding: 0 8px; }
    .c .fx-grid { display: none; }
    .c .fdt .fh { display: none; }
    .c .fdt .fr { grid-template-columns: minmax(0, 1fr) auto; height: 56px; border: 0; border-radius: 10px; }
    .c .fdt .fr > .c2, .c .fdt .fr > .c3, .c .fdt .fr > .c4, .c .fdt .fr > .c5 { display: none; }
    .c .fdt .fr .dots { display: inline-grid; background: transparent; color: var(--fa); }
    .c .fdt .nm { gap: 12px; }
    .c .fdt .nm .i { width: 24px; height: 24px; }
    .c .fdt .nm .tx { line-height: 1.35; }
    .c .fdt .nm .tx b { display: block; font-size: 14px; }
    .c .fdt .nm .tx small { display: block; font-size: 12px; color: var(--mu); }
    .c .fap { position: fixed; z-index: var(--z-sheet); inset-inline: 0; inset-block-end: 0; width: auto; max-height: 86vh; border: 0; border-block-start: 1px solid var(--ln2); border-start-start-radius: 20px; border-start-end-radius: 20px; background: var(--g2); box-shadow: var(--wc-shadow-sheet); padding: 10px 16px 20px; transform: translateY(105%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
    .c .fap.open { transform: none; visibility: visible; }
    .c .fap .hdl { display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--g4); margin: 0 auto -4px; flex: none; }
    .c .fap .shx { display: inline-grid; background: transparent; }
    .c .fsheet-scrim { display: block; z-index: var(--z-sheet); }
    .c .apa { grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
    .c .apa button { height: 40px; justify-content: center; padding: 0 6px; }
    .c .perm { grid-template-columns: 1fr repeat(3, 56px); }
    .c .wss { padding: 0 12px; gap: 10px; }
    .c .wss .end > span:first-child { display: none; }
    .c .ws .tbar .btn.sm > span { display: none; }
    .c .eft { padding: 0 8px; }
    .c .etb { padding: 0 8px; gap: 2px; }
    .c .etb .clip, .c .etb .end, .c .ess { display: none; }
    .c .cmw .cm-editor { font-size: 12.5px; }
    .c .cmw .cm-scroller { line-height: 21px; }
    .c .cmw .cm-lineNumbers .cm-gutterElement { min-width: 28px; padding: 0 8px 0 4px; }
    .c .cmw .cm-line { padding: 0 10px; }
    .c .efb { padding: 8px; }
    .c .efb .fin, .c .efb .fin.rep { width: auto; flex: 1 1 140px; }
    .c .ews { display: flex; gap: 10px; flex: none; padding: 10px 12px; border-top: 1px solid var(--ln); }
    .c .ews .btn { flex: 1; }
}

/* Server workspace: the Emergency console tab (Part B). It reuses the alert, code and button kit; only its layout is here. */
.c .ws .rsc { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.c .ws .rsc .alert { margin: 0; }
.c .ws .rsc-run { display: flex; align-items: center; gap: 10px; color: var(--mu); font-size: 13px; }
.c .ws .rsc-why { margin: 0; padding-inline-start: 20px; color: var(--mu); font-size: 13px; line-height: 1.8; }
.c .ws .rsc-h { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--tx); }
.c .ws .rsc-fix { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.c .ws .rsc-fix > li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 10px; }
.c .ws .rsc-fix .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.c .ws .rsc-fix .tx > span { color: var(--mu); }
.c .ws .rsc-fix .btn, .c .ws .rsc-ask { flex: none; }
.c .ws .rsc-ask { display: flex; gap: 8px; }
.c .ws .rsc-portin { flex: none; width: 96px; }
/* The command shell (B4): a bordered section under the diagnosis; the password row and the command box reuse .inp. */
.c .ws .rsc-sh { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ln); }
.c .ws .rsc-sh-tx { margin: 0; color: var(--mu); font-size: 13px; }
.c .ws .rsc-sh-row { display: flex; gap: 8px; align-items: center; }
.c .ws .rsc-sh-row .inp { flex: 1; min-width: 0; }
.c .ws .rsc-sh-in { height: auto; padding: 8px 10px; }
.c .ws .rsc-sh-in textarea { min-height: 88px; font-family: var(--wp-font-mono); font-size: 13px; }

/* The support block (AM-2, Platform/Ui/Shell/SupportContact.razor): how to reach support where the app cannot add the money itself. */
.c .supc { display: grid; gap: 6px; margin: 10px 0 0; }
.c .supc > .mu { margin: 0 0 4px; font-size: 13px; line-height: 1.7; }
.c .supc > .lab { margin: 4px 0 0; }
.c .supc .cmd > a.dn { color: inherit; text-decoration: none; }

/* DM-20, DM-24 (issue 1167): a name in My domains keeps one line (an ellipsis, the full name in its title) instead of breaking at its
   hyphen, the row's status no longer pushes the chevron out of the row on a phone, and the page tabs over an empty section's
   band read in the band's ink. */
.c .dmine .lrow .tx { min-width: 0; }
.c .dmine .lrow .tx .dn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c .dmine .lrow > .end { flex: none; }
@media (max-width: 760px) {
    .c .dmine .ost { min-width: 0; }
    /* The row itself opens the domain; its status already says the days left, so the Renew hint gives the name its room. */
    .c .dmine .lrow .end > .btn { display: none; }
}
.c:has(.semp) .ptabs > * { color: var(--sec-ink); opacity: .75; }
.c:has(.semp) .ptabs > .on { opacity: 1; }

/* DM-16 (issue 1168): a long scope wraps inside its chip instead of widening the page on a phone. */
.c .cnxsc .chip { height: auto; min-height: 22px; max-width: 100%; padding-block: 3px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.c .drt .drnone { margin: 0; padding: 18px 0 4px; }

/* ── Sign-in pages (Shay 2026-11-04, mockup v43 si, silock, reg, regchk, regpw, fpw, fpwok, rpw, cpw, cpwreq, deny, phsi,
   phreg): _IdentityLayout puts the pages in the account band with only the global bar (the mark, the language, the
   theme) and the legal footer, one 440 px card in the middle. The card's parts keep the sign-in pages' own class names
   (wp-login-*, wp-field, wp-btn), so one markup serves both skins; these rules restyle them and undo site.css where it
   differs. ── */
.c.auth { --auth-w: 440px; display: flex; flex-direction: column; padding-block-end: 0; }
.c.auth > .band { flex: none; }
.c.auth > .wp-login-page { flex: 1 0 auto; }
.c.auth > .foot { position: relative; inset-block-end: auto; flex: none; }
.c.auth .bar .lng .i { width: 16px; height: 16px; }
.c.auth .thm svg[hidden] { display: none; }
.c.auth .wp-login-page { min-height: 0; display: flex; place-items: normal; justify-content: center; padding: 40px 16px 48px; background: none; }
.c.auth .wp-login-stack { width: var(--auth-w); display: grid; gap: 16px; align-content: start; }
.c.auth .wp-login-card { background: var(--g1); border: 1px solid var(--ln); border-radius: 16px; padding: 32px; display: grid; gap: 20px; box-shadow: none; }
.c.auth .ah { display: grid; gap: 8px; }
.c.auth .ah h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--tx); }
.c.auth .ah p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--mu); }
.c.auth .alert { margin: 0; align-items: flex-start; }
.c.auth .alert > .i { margin-top: 2px; }
.c.auth .alert ul { margin: 0; padding-inline-start: 18px; }
.c.auth .wp-login-form { display: grid; gap: 16px; margin: 0; }
.c.auth .wp-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.c.auth .wp-field > label, .c.auth .wp-field > legend { font-size: 13px; font-weight: 500; line-height: 1.4; padding: 0; color: var(--tx); }
.c.auth .wp-field > legend { margin-bottom: 6px; }
.c.auth .wp-field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; height: 44px; border-radius: 10px; background: var(--g1); border: 1px solid var(--ln2); padding: 0 14px; color: var(--tx); font: inherit; font-size: 14px; outline: none; box-shadow: none; }
.c.auth .wp-field input[dir="ltr"] { font-family: "Inter", sans-serif; text-align: left; }
.c.auth .wp-field input:focus-visible { border-color: var(--ind); box-shadow: 0 0 0 3px var(--indbg); }
.c.auth .wp-field input.input-validation-error { border: 1.5px solid var(--bad); padding: 0 13.5px; }
.c.auth .wp-password { position: static; height: 44px; border-radius: 10px; background: var(--g1); border: 1px solid var(--ln2); display: flex; align-items: center; padding-inline-end: 4px; }
.c.auth .wp-password:focus-within { border-color: var(--ind); box-shadow: 0 0 0 3px var(--indbg); }
.c.auth .wp-password:has(input.input-validation-error) { border: 1.5px solid var(--bad); }
.c.auth .wp-field .wp-password input:not([type="checkbox"]) { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0 14px; background: transparent; box-shadow: none; }
.c.auth .wp-password-toggle { position: static; transform: none; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--mu); display: grid; place-items: center; padding: 0; cursor: pointer; }
.c.auth .wp-password-toggle[aria-pressed="true"] { color: var(--ind2); }
.c.auth .wp-password-toggle .i { width: 18px; height: 18px; }
.c.auth .wp-field-error { display: block; font-size: 12px; line-height: 1.6; color: var(--bad); }
.c.auth .wp-field-error:empty { display: none; }
.c.auth .checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.7; color: var(--tx); cursor: pointer; }
.c.auth .checkbox-label input { appearance: none; flex: none; width: 18px; height: 18px; margin: 3px 0 0; border-radius: 5px; border: 2px solid var(--ln2); background: transparent; display: grid; place-items: center; cursor: pointer; }
.c.auth .checkbox-label input:checked { background: var(--ind); border-color: var(--ind); }
/* The tick is drawn with physical sides, so a right-to-left page does not mirror it. */
.c.auth .checkbox-label input:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--wc-primary-fg); border-bottom: 2px solid var(--wc-primary-fg); transform: translateY(-1px) rotate(-45deg); }
.c.auth .checkbox-label input:focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
.c.auth .checkbox-label a { color: var(--ind2); text-decoration: none; }
.c.auth .wp-btn { height: 44px; min-height: 0; padding: 0 18px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1; font: inherit; font-weight: 500; white-space: nowrap; background: var(--g3); color: var(--ind2); text-decoration: none; cursor: pointer; }
.c.auth .wp-btn > span { padding-top: 2px; }
.c.auth .wp-btn:focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
.c.auth .wp-btn:disabled { opacity: .45; cursor: not-allowed; }
.c.auth .wp-btn-primary { background: var(--ind); color: var(--wc-primary-fg); }
.c.auth .wp-btn-quiet { background: transparent; }
.c.auth .wp-btn-block { width: 100%; }
.c.auth .wp-btn.gg { background: var(--g2); color: var(--tx); border: 1px solid var(--ln2); }
.c.auth .wp-btn.gg img { width: 18px; height: 18px; flex: none; }
.c.auth .wp-external-login { gap: 20px; }
.c.auth .wp-divider { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12.5px; line-height: 1; color: var(--fa); }
.c.auth .wp-divider::before, .c.auth .wp-divider::after { content: ""; flex: 1; height: 1px; background: var(--ln); }
.c.auth .wp-login-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--mu); }
.c.auth .wp-login-links:has(> :only-child) { justify-content: center; }
.c.auth .wp-login-links a { color: var(--ind2); text-decoration: none; font-weight: 500; }
.c.auth .wp-login-actions { display: grid; gap: 10px; }
.c.auth .wp-chip-group { display: grid; gap: 8px; padding: 0; overflow: visible; contain: none; }
.c.auth .wp-chip { height: 40px; min-height: 0; border-radius: 10px; border: 1px solid var(--ln2); background: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 13.5px; font-weight: 400; line-height: 1; color: var(--tx); cursor: pointer; }
.c.auth .wp-chip > input[type] { position: static; appearance: none; flex: none; width: 18px; min-width: 0; height: 18px; margin: 0; opacity: 1; border-radius: 50%; border: 2px solid var(--ln2); background: none; display: grid; place-items: center; cursor: pointer; }
.c.auth .wp-chip > input[type]:checked { border-color: var(--ind); }
.c.auth .wp-chip > input[type]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ind); }
.c.auth .wp-chip:has(> input[type]:checked) { color: var(--tx); border-color: var(--ind); background: var(--indbg); }
.c.auth .wp-chip:has(input:focus-visible) { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
.c.auth .wp-chip-text { padding-top: 2px; }
.c.auth .wp-muted { font-size: 12px; line-height: 1.6; color: var(--fa); }
.c.auth .wp-hidden-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c.auth .wp-login-submit { display: grid; gap: 8px; justify-items: stretch; }
.c.auth .wp-reason { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 1.6; color: var(--fa); }
.c.auth .wp-reason[hidden] { display: none; }
.c.auth .wp-reason :is(.i, .wp-icon) { width: 14px; height: 14px; }
/* The development accounts (Development only): a quieter card under the sign-in card. */
.c.auth .wp-dev-accounts { display: grid; gap: 12px; padding: 20px; border: 1px dashed var(--ln2); border-radius: 16px; background: var(--g2); color: var(--tx); }
.c.auth .wp-dev-accounts > p { margin: 0; font-size: 12.5px; color: var(--mu); }
.c.auth .wp-dev-heading h2 { margin: 0; font-size: 14px; font-weight: 500; }
.c.auth .wp-dev-account { border: 1px solid var(--ln); border-radius: 10px; background: var(--g1); font-size: 12.5px; }
.c.auth .wp-dev-account dt, .c.auth .wp-dev-account > div span { color: var(--mu); }
.c.auth .wp-dev-account code { font-family: "Inter", sans-serif; color: var(--tx); }
@media (max-width: 760px) {
    .c.auth .bar button.navp.lng { width: auto; padding: 0 12px; border-radius: 999px; background: var(--wc-band-shade); }
    .c.auth .bar button.navp.lng > span { display: inline; }
    .c.auth .wp-login-page { padding: 16px 16px 24px; }
    .c.auth .wp-login-stack { width: 100%; }
    .c.auth .wp-login-card { padding: 20px; border-radius: 14px; gap: 18px; }
    .c.auth .ah h1 { font-size: 21px; }
    .c.auth .wp-dev-account-list { grid-template-columns: minmax(0, 1fr); }
}

/* The library's "Request any app" line under the cards (issue 1227, spec B26). */
.c .note.lreq { margin: 18px 0 0; max-width: 960px; }
.c .note.lreq > .btn + .btn { margin-inline-start: 0; }