/* VPS Control 26.11.11: the interface of the design 26.11.15 (desktop) and 26.11.18 (phone). No inline styles: the CSP allows none. */
@import url(fonts.css);

:root {
  --bg: #000; --card: #0A0A0A; --deep: #050505; --line: #232323; --line2: #333; --hover: #161616; --raise: #1A1A1A;
  --text: #EDEDED; --text2: #D6D6D6; --sub: #A8A8A8; --muted: #8C8C8C; --dim: #5E5E5E;
  --accent: #7F97FF; --accent2: #A9B8FF; --accent-soft: #1d2131; --accent-line: #3f4978;
  --ok: #3FCB7E; --ok-text: #5FD392; --ok-soft: #12261B; --ok-line: #2F6B47;
  --warn: #EBB14B; --warn-text: #F0BE63; --warn-soft: #2A2213;
  --bad: #F06A66; --bad-text: #F58A86; --bad-soft: #2D1617; --bad-btn: #1A0E0E; --bad-line: #4A2526;
  --violet: #C3A6FF;
  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --side: 233px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* VPS Control's own thin scrollbar, no outline */
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #444; }
/* the scrollbar's place is kept when a page is too short to scroll, so switching tabs never moves the page sideways */
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ic { flex: none; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); } .sub { color: var(--sub); } .dim { color: var(--dim); }
.ok-t { color: var(--ok-text); } .warn-t { color: var(--warn-text); } .bad-t { color: var(--bad-text); } .acc-t { color: var(--accent); }
.small { font-size: 12.5px; } .tiny { font-size: 12px; } .nowrap { white-space: nowrap; } .num { font-variant-numeric: tabular-nums; }
.grow { flex: 1 1 auto; min-width: 0; } .right { margin-left: auto; } .wrap { flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stack.s12 { gap: 12px; } .stack.s16 { gap: 16px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hidden { display: none !important; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@keyframes vc-blink { 50% { opacity: 0; } }
@keyframes vc-pulse { 50% { opacity: .45; } }
@keyframes vc-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- the frame ------------------------------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }
.side { width: var(--side); flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 4px; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--bg); scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; color: var(--text); }
.brand:hover { color: var(--text); }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--text); color: #000; display: grid; place-items: center; flex: none; }
.brand-name { font: 600 13.5px var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.menu-g { display: flex; flex-direction: column; gap: 2px; }
.menu-g + .menu-g { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.mi { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--sub); }
.mi:hover { color: var(--text); background: var(--hover); }
.mi[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.mi .mi-end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.mi .mi-end.acc-t { color: var(--accent); } .mi .mi-end.warn-t { color: var(--warn-text); }
.mi .lbl { min-width: 0; font: inherit; color: inherit; }
.cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-text);
  font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; }
.cnt.bad { background: var(--bad-soft); color: var(--bad-text); } .cnt.info { background: var(--accent-soft); color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; display: inline-block; }
.dot.ring { box-shadow: 0 0 0 3px rgba(63, 203, 126, .16); }
.dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.off { background: var(--dim); } .dot.acc { background: var(--accent); }
.spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vc-spin .8s linear infinite; flex: none; display: inline-block; }
.spin.acc { color: var(--accent); } .spin.lg { width: 14px; height: 14px; } .spin.sm { width: 9px; height: 9px; }
.jobpill { position: sticky; bottom: 16px; margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px;
  border: 1px solid transparent; background: var(--hover); color: var(--text); min-width: 0; }
.jobpill:hover { color: var(--text); background: #1C1C1C; }
.jobpill .row { gap: 10px; } .jobpill .pct { font-size: 12.5px; font-weight: 500; }
.sw { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 0 8px 0 10px; margin-bottom: 4px; border-radius: 8px;
  border: 1px solid transparent; background: var(--hover); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.sw:hover, .sw[aria-expanded="true"] { background: #1C1C1C; }
.sw-i { position: relative; display: inline-grid; flex: none; color: var(--sub); }
.sdot { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.sdot.bad { background: var(--bad); } .sdot.warn { background: var(--warn); }
.sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sw-t .n { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-t .s { font-size: 11.5px; color: var(--muted); }
.sw-c { display: inline-grid; flex: none; color: var(--muted); }
.jobpill .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 18px; }
.bar { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .3s; }
.bar.ok > i { background: var(--ok); } .bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); }
.bar.lg { height: 8px; }
.main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; min-height: 56px; padding: 10px max(28px, calc((100% - 1600px) / 2 + 28px)); border-bottom: 1px solid var(--line); background: var(--bg); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sub); min-width: 0; }
.crumbs a { color: var(--sub); } .crumbs a:hover { color: var(--text); }
.crumbs .here { font-weight: 600; color: var(--text); }
.crumbs .sep { color: var(--muted); }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.searchbox { display: inline-flex; align-items: center; gap: 8px; height: 32px; width: 220px; padding: 0 6px 0 10px; border-radius: 8px;
  border: 1px solid transparent; background: var(--hover); color: var(--muted); font-size: 13px; cursor: pointer; text-align: left; }
.searchbox:hover { color: var(--sub); background: #1C1C1C; }
.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line2); font: 500 11px/1 var(--mono); color: var(--sub); }
.tbtn { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent;
  background: var(--hover); color: var(--sub); cursor: pointer; padding: 0; }
.tbtn:hover, .tbtn[aria-expanded="true"], .tbtn[aria-current="page"] { color: var(--text); background: #1C1C1C; }
.tbtn .badge-n { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad);
  color: #000; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.tbtn .badge-n.warn { background: var(--warn); }
.tbtn .badge-d { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px #000; }
main.page { padding: 24px 28px 56px; width: 100%; max-width: 1600px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* a page drawn again stays out of sight, laid out where it will be, until it takes the old one's place */
#view { position: relative; }
#view > main.redraw { position: absolute; inset: 0 0 auto 0; visibility: hidden; pointer-events: none; }
main.page.wide { max-width: none; }
.mtop, .mnav, .mjob { display: none; }

/* below 1200 px the menu narrows; below 1024 px it keeps its icons and opens over the page under the mouse */
@media (min-width: 761px) and (max-width: 1199px) {
  :root { --side: 196px; }
  main.page { padding-left: 20px; padding-right: 20px; }
  .top { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .side { width: 60px; flex: 0 0 60px; padding: 14px 8px; z-index: 30; overflow: visible; clip-path: inset(0); border-right: 0; background: transparent; }
  .side::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; background: var(--bg); border-right: 1px solid var(--line);
    box-shadow: 16px 0 40px rgba(0, 0, 0, .7); z-index: -1; }
  .side:is(:hover, :focus-within, :has([aria-expanded="true"])) { clip-path: inset(0 -360px 0 0); transition: clip-path .16s ease; }
  .side:is(:hover, :focus-within, :has([aria-expanded="true"]))::before { width: 232px; }
  .side:is(:hover, :focus-within, :has([aria-expanded="true"])) > a, .side:is(:hover, :focus-within, :has([aria-expanded="true"])) > div { width: 216px; }
  .side > * { width: 44px; flex: none; }
  main.page { padding-left: 16px; padding-right: 16px; }
  .top { padding-left: 16px; padding-right: 16px; }
  .side > .brand { padding: 2px 0 14px 8px; }
  .side .mi { padding: 0 10px 0 13px; position: relative; white-space: nowrap; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .brand-name { display: none; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi { gap: 0; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi .lbl { display: none; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .mi-end, .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .cnt {
    position: absolute; top: 3px; left: 23px; right: auto; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; gap: 0; font-size: 10.5px; font-weight: 600; line-height: 16px; box-shadow: 0 0 0 2px #000; background: color-mix(in srgb, currentColor 18%, #0A0A0A); }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .mi-end.plain { display: none; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .mi-end .spin, .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .mi-end .dot { display: none; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .cnt { background: var(--warn-soft); }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi > .cnt.bad { background: var(--bad-soft); }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .mi[aria-current="page"] > .mi-end { box-shadow: none; background: color-mix(in srgb, currentColor 34%, #0A0A0A); }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .sw { padding: 0 0 0 12px; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .sw > :not(.sw-i) { display: none; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .jobpill { padding: 9px 4px; align-items: center; gap: 5px; }
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .jobpill .t .ellipsis, .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .jobpill .bar,
  .side:not(:hover):not(:focus-within):not(:has([aria-expanded="true"])) .jobpill .st { display: none; }
}

/* lists of the phone: a row with an icon box, a title and a line, a badge and the arrow */
.mlist { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.mrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 16px; color: var(--text); }
.mrow + .mrow { border-top: 1px solid #1C1C1C; }
.mrow:hover { color: var(--text); background: var(--deep); }
.mrow > .ic { color: var(--muted); flex: none; }
.mi-box { width: 36px; height: 36px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--hover); color: var(--text2); }
.mrow .mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow .mt .t { font-size: 15px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.mrow .mt .s { color: var(--sub); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.mrow .mt .blk { display: block; }
.mrow.who { min-height: 72px; }
.avatar.sq { width: 44px; height: 44px; border-radius: 12px; background: var(--line); color: var(--text2); font: 600 15px/1 var(--display); }
.badge.dotb { height: 22px; min-height: 0; padding: 0 8px; gap: 6px; line-height: 1; } .badge.dotb .dot { width: 6px; height: 6px; }
.foot-v { margin: 4px 0 0; text-align: center; font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* ---- page parts ----------------------------------------------------------------------------------- */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
.head-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 420px; }
.head-t .tl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.head-t .lead { max-width: 760px; }
h1.t { font: 600 26px/1.2 var(--display); letter-spacing: -0.015em; }
h1.t.sm { font-size: 24px; }
.lead { color: var(--sub); font-size: 13.5px; }
.head-a { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eyebrow { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.kicker { font: 600 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--sub); font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; min-width: 0; overflow: hidden; }
.card.pad { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 0 16px; border-bottom: 1px solid var(--line); min-height: 52px; }
.card-h h2 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.card-h .meta { font-size: 12.5px; color: var(--muted); }
.card-h .acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.card-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.card-f { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lrow { display: grid; grid-template-columns: 18px minmax(160px, 260px) minmax(0, 1fr) 16px; column-gap: 12px; align-items: center; min-height: 48px;
  padding: 6px 16px; color: var(--text); border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; }
a.lrow:hover { background: var(--hover); color: var(--text); }
.lrow .w { font-weight: 500; } .lrow .d { font-size: 13px; color: var(--sub); min-width: 0; } .lrow .go { color: var(--muted); }
.kv { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv > .k { color: var(--sub); font-size: 13px; font-weight: 500; padding-top: 1px; }
.kv > .v { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kv > .v .h { font-size: 12.5px; color: var(--muted); }
/* the numbers on top of a page: one strip, cells parted by a hairline */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stat { background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--text); }
.stat .l { font-size: 13px; color: var(--sub); }
.stat .n { font: 500 24px/1.15 var(--display); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.stat .n small { font: 400 13px var(--font); color: var(--sub); letter-spacing: 0; }
.stat .s { font-size: 12.5px; color: var(--muted); }
.stat .s.warn-t { color: var(--warn-text); } .stat .s.bad-t { color: var(--bad-text); } .stat .s.ok-t { color: var(--ok-text); }
a.stat:hover { background: var(--hover); color: var(--text); }
/* fields side by side use the same grid, without the lines and the frame of the numbers */
.stats:has(> .field) { gap: 12px 16px; background: none; border: 0; border-radius: 0; overflow: visible; align-items: start; }
@media (max-width: 760px) {
  .stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats:has(> .field:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- controls ------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 6px;
  font: 500 13.5px/1 var(--font); cursor: pointer; white-space: nowrap; border: 1px solid transparent; background: #1C1C1C; color: var(--text); }
.btn:hover { color: var(--text); background: #262626; }
.btn.sm { height: 30px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 600; }
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); color: #000; }
.btn.danger { border-color: transparent; background: #2A1213; color: var(--bad-text); }
.btn.danger:hover { background: #3A1A1B; color: var(--bad-text); }
.btn.quiet.danger { background: transparent; } .btn.quiet.danger:hover { background: #2A1213; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--sub); }
.btn.quiet:hover { color: var(--text); background: var(--hover); }
.btn.icon { width: 30px; height: 30px; padding: 0; color: var(--sub); }
.xbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; flex: none; }
.xbtn:hover { color: var(--bad-text); background: #2A1213; }
.btn.icon.lg { width: 36px; height: 36px; }
.btn[disabled], .btn.off { opacity: .55; cursor: default; pointer-events: none; }
/* a button at work: a spinner in front of its words, the icon gives way to it */
.btn.busy { opacity: .85; cursor: progress; pointer-events: none; }
.btn.busy::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vc-spin .8s linear infinite; flex: none; }
.btn.busy > svg { display: none; }
.btn .spin { color: currentColor; }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.link { color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; display: inline-flex; align-items: center; gap: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .lbl { font-size: 13px; font-weight: 500; color: var(--sub); }
.field .hint { font-size: 12.5px; color: var(--muted); line-height: 18px; }
.field .err { font-size: 12.5px; color: var(--bad-text); }
.input, .select, .area { height: 36px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg); color: var(--text);
  font: 14px var(--font); width: 100%; min-width: 0; }
.area { height: auto; min-height: 96px; padding: 9px 11px; font: 13px/1.5 var(--mono); resize: vertical; }
.input:focus, .select:focus, .area:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.input.mono { font: 14px var(--mono); }
.input.lg { height: 40px; padding: 0 12px; }
.input.key { height: 56px; padding: 0 16px; border-radius: 8px; font: 500 21px var(--mono); letter-spacing: .04em; }
.input.bad, .field.bad .input { border-color: var(--bad-line); }
.select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; }
.find { position: relative; }
.find .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.find .input { width: 220px; padding-left: 32px; font-size: 13.5px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; }
.check input { margin: 3px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check .col { gap: 2px; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--bg); }
.choice:hover { border-color: var(--line2); }
.choice:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.choice input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.switch { position: relative; width: 36px; height: 20px; flex: none; -webkit-appearance: none; appearance: none; border-radius: 999px; background: var(--line2);
  cursor: pointer; transition: background .15s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch:checked { background: var(--accent); } .switch:checked::after { transform: translateX(16px); background: #000; }
.strength { display: flex; align-items: center; gap: 10px; }
.strength .segs { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength .segs i { height: 4px; border-radius: 2px; background: var(--line); }
.strength.s1 .segs i:nth-child(-n+1), .strength.s2 .segs i:nth-child(-n+2) { background: var(--warn); }
.strength.s3 .segs i:nth-child(-n+3), .strength.s4 .segs i { background: var(--ok); }

/* ---- badges, notes, tabs ---------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
  white-space: nowrap; background: var(--line); color: var(--sub); }
.badge.ok { background: var(--ok-soft); color: var(--ok-text); } .badge.warn { background: var(--warn-soft); color: var(--warn-text); }
.badge.bad { background: var(--bad-soft); color: var(--bad-text); } .badge.info { background: var(--accent-soft); color: var(--accent); }
.badge.mono { font-family: var(--mono); font-size: 11.5px; }
.note { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 20px;
  background: var(--accent-soft); color: var(--text); }
.note > .ic { color: var(--accent); }
.note > .tx { flex: 1 1 320px; min-width: 0; }
.note > .btns { margin-left: auto; }
.note.ok { background: var(--ok-soft); color: var(--ok-text); } .note.ok > .ic { color: var(--ok); }
.note.warn { background: var(--warn-soft); color: var(--warn-text); } .note.warn > .ic { color: var(--warn); }
.note.bad { background: var(--bad-soft); color: var(--bad-text); } .note.bad > .ic { color: var(--bad); }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--sub); font-weight: 500; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab[aria-current="page"], .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab .c { font-size: 12px; color: var(--muted); font-weight: 400; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.seg > * { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent;
  color: var(--sub); font: 500 13px var(--font); cursor: pointer; white-space: nowrap; }
.seg > *:hover { color: var(--text); }
.seg > [aria-pressed="true"], .seg > [aria-current="page"], .seg > [aria-selected="true"] { background: var(--line); color: var(--text); }
.seg.sm > * { min-height: 26px; padding: 0 10px; font-size: 12.5px; }
.seg .c { color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.steps li { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 2px solid var(--line2); }
.steps li .n { font-size: 12.5px; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.steps li .w { font-weight: 600; color: var(--sub); }
.steps li.done { border-top-color: var(--ok-line); } .steps li.done .n { color: var(--ok-text); } .steps li.done .w { color: var(--text); }
.steps li[aria-current="step"] { border-top-color: var(--accent); } .steps li[aria-current="step"] .n { color: var(--accent); } .steps li[aria-current="step"] .w { color: var(--text); }
.steps li.skip { border-top-style: dashed; }

/* ---- tables ----------------------------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; position: relative; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--hover); }
table.t td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td, table.t tr.sel td { background: var(--hover); }
table.t td .s { display: block; font-size: 12.5px; color: var(--muted); }
table.t td.acts { text-align: right; white-space: nowrap; }
table.t td.acts .btns { justify-content: flex-end; flex-wrap: nowrap; }
table.t .r { text-align: right; }

/* ---- states ------------------------------------------------------------------------------------------ */
.empty { padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.empty .em-i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--hover); color: var(--muted); margin-bottom: 6px; }
.empty .em-t { font-weight: 600; font-size: 15px; } .empty .em-d { font-size: 13px; color: var(--muted); max-width: 460px; }
.empty .btns { justify-content: center; margin-top: 8px; }
.pload { min-height: min(56vh, 440px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  color: var(--muted); font-size: 13px; animation: vc-in .2s ease both; }
.pring { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--line2); border-top-color: var(--accent); animation: vc-spin .75s linear infinite; margin-bottom: 6px; }
.pload .pl-t { color: var(--text2); font-weight: 500; font-size: 14px; } .pload .pl-s { max-width: 48ch; } .pload .btn { margin-top: 8px; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 24px 16px; font-size: 13px; }
.log { margin: 0; padding: 12px 16px; background: var(--deep); font: 12.5px/1.6 var(--mono); color: var(--text2); white-space: pre-wrap; word-break: break-word;
  max-height: 520px; overflow: auto; }
.log .l-cmd { color: var(--accent); } .log .l-warn { color: var(--warn-text); } .log .l-err { color: var(--bad-text); } .log .l-step { color: var(--text); font-weight: 600; }
.log .l-dim { color: var(--muted); }
.code { margin: 0; padding: 12px 0; background: var(--deep); font: 12.5px/1.6 var(--mono); overflow: auto; max-height: 560px; counter-reset: ln; }
.code .ln { display: block; padding: 0 16px 0 56px; position: relative; white-space: pre; color: var(--text2); min-height: 20px; }
.code .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 40px; text-align: right; color: var(--dim); }
.copybox { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); min-width: 0; }
.copybox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secret-v { font-family: var(--mono); letter-spacing: .08em; }

/* ---- dialogs, menus, toasts -------------------------------------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 96px 16px 40px;
  background: rgba(0, 0, 0, .72); overflow-y: auto; }
.dialog { width: 520px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2);
  border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); overflow: hidden; }
.dialog.sm { width: 460px; } .dialog.lg { width: 720px; } .dialog.confirm { width: 560px; }
.cf-t { font-size: 14px; line-height: 1.5; color: var(--text2); }
.cf-rows { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.cf-r { display: flex; flex-direction: column; gap: 1px; } .cf-r .k { font-size: 13.5px; font-weight: 500; } .cf-r .v { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.cf-r .k code { font-size: 12.5px; color: var(--text2); }
.dlg-h { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; min-height: 56px; border-bottom: 1px solid var(--line); }
.dlg-h h2 { font-size: 16px; font-weight: 600; }
.dlg-x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--sub); cursor: pointer; }
.dlg-x:hover { color: var(--text); background: var(--hover); }
.dlg-b { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.dlg-hero { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; }
.dlg-hero .hi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dlg-hero .hi.bad { background: var(--bad-soft); color: var(--bad-text); }
.dlg-hero h2 { font: 600 20px/1.25 var(--display); }
.dlg-hero p { font-size: 13.5px; color: var(--sub); }
.dlg-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.dlg-f .right { display: flex; gap: 8px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12.5px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pop { position: fixed; z-index: 90; width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 72px); overflow-y: auto; background: var(--card);
  border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); display: flex; flex-direction: column; overscroll-behavior: contain; }
.pop.pop-servers { width: 300px; } .pop.pop-bell { width: 470px; }
.pop-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.pop-cap { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pop-srv { display: grid; grid-template-columns: 8px minmax(0, 1fr) 16px; column-gap: 12px; align-items: center; padding: 9px 10px; border-radius: 8px;
  color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.pop-srv .sdot { position: static; } .pop-srv .ck { color: var(--accent); display: inline-grid; }
.pop-srv[aria-current="true"], .pop-srv:hover { background: var(--hover); }
.col0 { display: flex; flex-direction: column; min-width: 0; } .col0 .n { font-weight: 500; } .col0 .s { font-size: 12.5px; color: var(--muted); }
.pop-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.pop-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.pop-i > .ic { color: var(--sub); }
.pop-i.two { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; } .pop-i.two .s { line-height: 18px; }
.pop-i:hover { background: var(--hover); color: var(--text); }
.pop-who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
.pop-who:hover { color: var(--text); background: var(--deep); } .pop-who > .ic { color: var(--muted); }
.pop-who h2 { font-size: 14px; font-weight: 600; line-height: 1.3; } .pop-who .col0 { flex: 1; }
.pop-who .avatar { border-radius: 50%; font: 600 13px/1 var(--display); }
.pop-h { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.pop-h h2 { font-size: 15px; font-weight: 600; }
.pop-h .seg { width: fit-content; max-width: 100%; flex-wrap: wrap; }
.pop-b .loading { padding: 16px; }
.pop-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); }
.pop-f .s { flex: 1 1 200px; font-size: 12px; line-height: 18px; color: var(--muted); }
.nlist { list-style: none; margin: 0; padding: 0; }
.ngroup h3 { margin: 0; padding: 10px 16px 8px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.ngroup h3.critical { color: var(--bad-text); } .ngroup h3.important { color: var(--warn-text); }
.nrow { display: grid; grid-template-columns: 10px minmax(0, 1fr) 28px; column-gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.nrow .col0 { gap: 3px; } .nrow .n { font-size: 13.5px; } .nrow .s { line-height: 18px; } .nrow .d { font-size: 12px; color: var(--muted); }
.nrow .btns { margin-top: 6px; } .nrow .xbtn { margin: -5px -8px 0 0; }
.ndot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.ndot.critical { background: var(--bad); } .ndot.important { background: var(--warn); } .ndot.info { background: var(--dim); }
.nempty { padding: 18px 16px; color: var(--muted); font-size: 13px; }
.pop .pi { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 7px; color: var(--text); background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.pop .pi:hover { background: var(--hover); color: var(--text); }
.pop .pi .col { gap: 1px; } .pop .pi .s { font-size: 12.5px; color: var(--muted); }
.pop .pi.danger { color: var(--bad-text); }
.pop .ph { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.toasts { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55); font-size: 13.5px; }
.toast.ok .ic { color: var(--ok); } .toast.bad { border-color: var(--bad-line); } .toast.bad .ic { color: var(--bad); }
.palette { position: fixed; inset: 0; z-index: 110; display: flex; justify-content: center; align-items: flex-start; padding: 90px 16px 40px; background: rgba(0, 0, 0, .72); }
.palette .box { width: 680px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); overflow: hidden; }
.palette .q { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-bottom: 1px solid var(--line); flex: none; }
.palette .qf { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.palette .qi { display: flex; color: var(--muted); }
.palette .q input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--text); }
.palette .q input::-webkit-search-cancel-button { display: none; }
.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: #161616; box-shadow: inset 0 0 0 1px var(--line2); font: 500 11px/1 var(--mono); color: var(--sub); white-space: nowrap; }
.palette .qx { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--sub); cursor: pointer; }
.palette .qx:hover { background: var(--hover); color: var(--text); }
.palette .res { display: flex; flex-direction: column; gap: 8px; padding: 8px; max-height: 560px; overflow-y: auto; }
.palette .res > .loading { padding: 14px 12px; }
.palette .grp-w { display: flex; flex-direction: column; gap: 2px; }
.palette .grp { padding: 6px 12px 2px; font-size: 12px; color: var(--muted); }
.palette .gl { display: flex; flex-direction: column; gap: 2px; }
.palette .it { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; color: var(--text); cursor: pointer; }
.palette .it:hover { background: var(--hover); } .palette .it[aria-selected="true"] { background: #1d2131; }
.palette .it .pi { display: flex; color: var(--sub); }
.palette .it .col { display: flex; flex-direction: column; min-width: 0; }
.palette .it .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .it .s { font-size: 12.5px; line-height: 18px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .it .kbd.ent { visibility: hidden; } .palette .it[aria-selected="true"] .kbd.ent { visibility: visible; }
.palette .it .chev { display: none; color: var(--dim); }
.palette .pfoot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); flex: none; }
.palette .pfoot > span { display: inline-flex; align-items: center; gap: 6px; }
.palette .pnote { margin: 4px 2px 0; font-size: 13px; color: var(--muted); }

/* ---- sign-in and setup (centered) ------------------------------------------------------------------- */
.solo { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 20px; gap: 24px; }
.solo .brand { padding: 0; }
.solo-box { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.solo-box.wide { max-width: 760px; }
.solo-foot { margin-top: auto; font-size: 12.5px; color: var(--muted); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.setup-top { width: 100%; max-width: 760px; display: flex; align-items: center; gap: 12px; }
.setup-top .right { font-size: 12.5px; color: var(--muted); }

/* ---- apps grid --------------------------------------------------------------------------------------- */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 28px 8px; padding: 26px 16px 24px; }
.tile { display: flex; flex-direction: column; align-items: center; padding: 0 2px; border-radius: 10px; color: var(--text); text-align: center; min-width: 0; }
.tile:hover { color: var(--text); } .tile:hover .ap { filter: brightness(1.18); }
.tile .ap { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font: 600 22px/1 var(--display); letter-spacing: -0.02em; color: var(--sub); background: #1F1F1F; position: relative; margin-bottom: 12px; flex: none; }
.tile .ap .dot { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--card); }
.tile .ap .lockb { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1F1F1F; color: var(--sub); box-shadow: 0 0 0 3px var(--card); }
.tile .nm { font-weight: 500; font-size: 13.5px; line-height: 20px; max-width: 100%; } .tile .ds { font-size: 12px; line-height: 16px; color: var(--muted); max-width: 100%; }
.ap.n { background: #1F1F1F; color: var(--sub); box-shadow: inset 0 0 0 1px #2C2C2C; }
.ap.add { background: transparent; color: var(--sub); border: 1px dashed #3A3A3A; }
/* the colour of a tile: twelve hues, dark ground, light letters */
.ap.h0 { background: hsl(4 31% 20%); color: hsl(4 71% 80%); } .ap.h1 { background: hsl(30 31% 20%); color: hsl(30 71% 80%); }
.ap.h2 { background: hsl(50 31% 20%); color: hsl(50 71% 80%); } .ap.h3 { background: hsl(90 31% 20%); color: hsl(90 71% 80%); }
.ap.h4 { background: hsl(142 31% 20%); color: hsl(142 71% 80%); } .ap.h5 { background: hsl(169 31% 20%); color: hsl(169 71% 80%); }
.ap.h6 { background: hsl(187 31% 20%); color: hsl(187 71% 80%); } .ap.h7 { background: hsl(201 31% 20%); color: hsl(201 71% 80%); }
.ap.h8 { background: hsl(214 31% 20%); color: hsl(214 71% 80%); } .ap.h9 { background: hsl(250 31% 20%); color: hsl(250 71% 80%); }
.ap.h10 { background: hsl(270 31% 20%); color: hsl(270 71% 80%); } .ap.h11 { background: hsl(320 31% 20%); color: hsl(320 71% 80%); }
.ap.c0 { background: hsl(214 31% 20%); color: hsl(214 71% 80%); } .ap.c1 { background: hsl(142 31% 20%); color: hsl(142 71% 80%); }
.ap.c2 { background: hsl(50 31% 20%); color: hsl(50 71% 80%); } .ap.c3 { background: hsl(270 31% 20%); color: hsl(270 71% 80%); }
.ap.c4 { background: hsl(201 31% 20%); color: hsl(201 71% 80%); } .ap.c5 { background: hsl(4 31% 20%); color: hsl(4 71% 80%); }
.ap.c6 { background: hsl(169 31% 20%); color: hsl(169 71% 80%); } .ap.c7 { background: #1F1F1F; color: var(--sub); }
.ap.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.term { background: var(--deep); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; height: max(520px, calc(100dvh - 190px)); }
.term .xterm-host { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 8px; }
.term.small { height: clamp(320px, 45dvh, 480px); }
.term:fullscreen, .term.small:fullscreen { height: 100vh; border: 0; border-radius: 0; }
.term { position: relative; }
.term.drop::after { content: attr(data-drop); position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; text-align: center;
  background: rgba(0, 0, 0, .78); border: 2px dashed var(--accent); border-radius: inherit; color: var(--text); font: 500 15px var(--font); pointer-events: none; }
.tup { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.tup .tup-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tup .tpct { color: var(--text2); flex: none; } .tup .btn { flex: none; margin-left: auto; }
.term-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tt { flex: none; display: flex; align-items: center; height: 36px; border-radius: 8px 8px 0 0; color: var(--sub); }
.tt:has(> .term-tab[aria-selected="true"]) { background: var(--deep); color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
.term-tab { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; font: 500 13px var(--font); white-space: nowrap; }
.tclose { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0 6px 0 2px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.tclose:hover { background: var(--hover); color: var(--text); }

/* ---- small screens: the mobile frame ------------------------------------------------------------------ */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .side, .top { display: none; }
  .mtop { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; gap: 2px; height: 56px; padding: 0 6px 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mtop.back { padding-left: 4px; }
  .mtop .brand { padding: 0; margin-right: auto; min-height: 44px; }
  .mtop .backlink { display: flex; align-items: center; gap: 2px; min-height: 44px; margin-right: auto; padding-right: 8px; color: var(--text); font-size: 15px; font-weight: 500; min-width: 0; }
  .mtop .mbtn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--sub); background: none; border: 0; }
  .mjob { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 16px; background: var(--accent-soft); border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 500; }
  .mjob.hidden { display: none; }
  .mjob .pct { font: 13px var(--mono); color: var(--accent); }
  .mjob .sub { color: var(--sub); font-weight: 400; } .mjob b { font-weight: 500; } .mjob > .ic { color: var(--muted); }
  .mjob .spin { width: 12px; height: 12px; }
  .mjob .line { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--accent); width: 0; }
  .mnav { display: grid; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 4px calc(14px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .mnav a, .mnav button { display: flex; align-items: center; justify-content: center; min-height: 52px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
  .mnav .pill { position: relative; display: grid; place-items: center; width: 60px; height: 36px; border-radius: 999px; }
  .mnav [aria-current="page"] { color: var(--accent); } .mnav [aria-current="page"] .pill { background: var(--accent-soft); }
  .mnav .mdot { position: absolute; top: 4px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
  .mnav .mdot.bad { background: var(--bad); }
  .mnav .mring { position: absolute; top: 2px; right: 14px; width: 12px; height: 12px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: vc-spin .8s linear infinite; }
  .mnav .mn { position: absolute; top: -2px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #000; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
  .mnav .mn.warn { background: var(--warn-soft); color: var(--warn-text); }
  .main-col { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  main.page { padding: 20px 16px 28px; gap: 16px; }
  h1.t { font-size: 24px; }
  .head-a { margin-left: 0; width: 100%; }
  .find .input { width: 100%; } .find { flex: 1 1 auto; }
  .lrow { grid-template-columns: 18px minmax(0, 1fr) 16px; row-gap: 2px; padding: 10px 16px; }
  .lrow .d { grid-column: 2; }
  .lrow .go { grid-row: 1; grid-column: 3; }
  .kv { grid-template-columns: 1fr; row-gap: 6px; }
  .btn { height: 44px; font-size: 15px; } .btn.sm { height: 36px; font-size: 14px; } .btn.icon { width: 40px; height: 40px; }
  .input, .select { height: 44px; font-size: 16px; }
  table.t th, table.t td { padding: 9px 12px; }
  .hide-m { display: none !important; }
  .overlay { align-items: flex-end; padding: 0; }
  .dialog { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .solo { padding: 28px 16px; }
  .toasts { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: none; }
  /* the phone's search: a page of its own, a field and Cancel on top, the results in groups of rows */
  .palette { padding: 0; background: var(--bg); }
  .palette .box { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
  .palette .q { gap: 8px; min-height: 0; padding: 10px 8px 10px 16px; }
  .palette .qf { position: relative; }
  .palette .qi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .palette .q input { height: 48px; padding: 0 12px 0 40px; border: 1px solid var(--line2); border-radius: 8px; background: #000; }
  .palette .q input:focus { border-color: var(--accent); outline: 2px solid #3f4978; outline-offset: 0; }
  .palette .qcancel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--accent); font: 500 15px var(--font); cursor: pointer; }
  .palette .res { flex: 1; max-height: none; gap: 18px; padding: 20px 16px 28px; }
  .palette .grp-w { gap: 6px; }
  .palette .grp { padding: 0 2px; font: 600 11.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
  .palette .gl { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .palette .it { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 56px; padding: 10px 14px 10px 16px; border-radius: 0; }
  .palette .it + .it { border-top: 1px solid #1C1C1C; }
  .palette .it[aria-selected="true"] { background: transparent; } .palette .it:active { background: var(--deep); }
  .palette .it .pi { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #161616; }
  .palette .it .ap.sm { position: relative; width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
  .palette .it .ap.sm .dot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; }
  .palette .it .t { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
  .palette .it .s { font-size: 13.5px; line-height: 1.45; color: var(--sub); white-space: normal; overflow-wrap: anywhere; }
  .palette .it .kbd.ent { display: none; }
  .palette .it .chev { display: flex; }
  .palette .it .s::first-letter { text-transform: uppercase; }
  .apps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 4px; padding: 16px 6px 18px; }
  .tile .ap { width: 60px; height: 60px; border-radius: 16px; font-size: 19px; margin-bottom: 8px; }
  .tile .nm { font-size: 13px; line-height: 18px; } .tile .ds { font-size: 11.5px; }
}
@media (min-width: 761px) { .show-m { display: none !important; } }
.choice-card { text-align: left; cursor: pointer; color: var(--text); font: inherit; align-items: flex-start; }
.choice-card:hover { border-color: var(--line2); }
.choice-card .btn { margin-top: 6px; }
.lrow.act { grid-template-columns: 18px minmax(160px, 260px) minmax(0, 1fr) auto; }
.lrow.act > :last-child { justify-self: end; }
@media (max-width: 760px) { .lrow.act { grid-template-columns: 18px minmax(0, 1fr) auto; } .lrow.act .d { grid-column: 2 / 4; grid-row: 2; } }
.chart { display: block; width: 100%; height: 56px; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.chart .ln.dash { stroke-dasharray: 4 3; opacity: .7; }
.chart .fill { fill: var(--accent); opacity: .12; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.chart.ok .ln { stroke: var(--ok); } .chart.ok .fill { fill: var(--ok); }
.chart.warn .ln { stroke: var(--warn); } .chart.warn .fill { fill: var(--warn); }
.chart.violet .ln { stroke: var(--violet); } .chart.violet .fill { fill: var(--violet); }
.chart-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim); }
.load-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.load-grid > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.load-grid .big { font: 600 24px/1.1 var(--display); display: flex; align-items: baseline; gap: 6px; }
.load-grid .big small { font: 500 13px var(--font); color: var(--sub); }
a.stat { color: var(--text); }

/* headings and folds inside a card */
h3.sub { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--sub); }
.card-b > h3.sub:first-child { margin-top: 0; }
details > summary { cursor: pointer; color: var(--sub); margin: 10px 0 0; width: max-content; }
details[open] > summary { margin-bottom: 10px; }
.field .row > .mono:not(.input) { color: var(--sub); }
.field > .seg { align-self: flex-start; max-width: 100%; }
/* numbered steps written as a list */
.steps-v { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 10px; }
.steps-v li { padding-left: 4px; }
.steps-v li .s { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* a QR code keeps a white quiet zone, so phones read it on the dark page */
img.qr { display: block; background: #fff; padding: 10px; border-radius: 10px; margin: 6px 0 12px; image-rendering: pixelated; }
/* codes shown once */
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--deep); margin-bottom: 10px; }
.copybox code.big { font-size: 16px; letter-spacing: .04em; white-space: normal; word-break: break-all; }
.copybox code { white-space: normal; word-break: break-all; }
/* rows that open */
details.act-row > summary { list-style: none; cursor: pointer; }
details.act-row > summary::-webkit-details-marker { display: none; }
details.act-row[open] > summary { background: var(--bg); }
details.act-row { border-top: 1px solid var(--line); }
details.act-row:first-child { border-top: 0; }
h2.sect { font-size: 15px; margin: 6px 0 -4px; }
.t tr.grp th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 14px; }
.notice.unread b, tr.unread b { color: var(--text); }
.notice.unread::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: absolute; left: 6px; top: 50%; translate: 0 -50%; }
.notice { position: relative; }
.select.sm, .input.sm { min-height: 28px; height: 28px; padding: 0 8px; font-size: 12.5px; width: auto; }
.select.sm { padding-right: 28px; background-position: right 8px center; background-size: 13px; } /* the longest choice ends before the arrow */
.input.sm { width: 64px; display: inline-block; }
.solo-card { max-width: 560px; margin: 24px auto; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; flex: none; }
/* a row with one block of text between the icon and its buttons */
.lrow.act:has(> :nth-child(3):last-child) { grid-template-columns: 18px minmax(0, 1fr) auto; }
.lrow > span > .s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
@media (max-width: 760px) { .lrow.act:has(> :nth-child(3):last-child) > :last-child { grid-column: 2 / 4; justify-self: start; } }
/* many buttons wrap beside the row's words instead of squeezing them to a word a line */
@media (min-width: 761px) {
  .lrow.act:has(> :nth-child(3):last-child) { grid-template-columns: 18px minmax(220px, 1fr) minmax(0, max-content); }
  .lrow.act:has(> :nth-child(3):last-child) > .btns { justify-content: flex-end; }
}
table.t td > span:not(.s) > svg.ic { display: inline-block; vertical-align: -3px; }
.row > .select { width: auto; flex: none; }
.row > .find.grow { flex: 1 1 220px; } .row > .find.grow .input { width: 100%; }
/* a provider's steps, with the pages that do them */
.guide { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--deep); font-size: 13px; }
.guide-steps { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 10px; align-items: start; line-height: 20px; }
/* the words start on the line of the button's label: (30px button - 20px line) / 2 */
.guide-steps .n, .guide-steps .t { padding-top: 5px; }
.guide-steps .n { color: var(--sub); font-variant-numeric: tabular-nums; }
.guide-steps .t.wide { grid-column: 2 / -1; }
.guide-steps .btn { justify-content: center; }
.guide p { margin: 0; }
@media (max-width: 560px) {
  .guide-steps { grid-template-columns: auto 1fr; }
  .guide-steps .btn { grid-column: 2; justify-self: start; }
}
details.fold > summary { cursor: pointer; color: var(--sub); width: fit-content; }
details.fold[open] > summary { margin-bottom: 8px; }
/* a secret for another service (a token, an app password, a key): masked like a password, but a text field,
   so the browser does not take the form for a sign-in and offer the panel's own login */
.input.secret { -webkit-text-security: disc; }
.input.secret::placeholder { -webkit-text-security: none; }

/* ---- setup (26.11.9): the setup design of the panel (desktop 26.11.11, mobile 26.11.13). Its own frame,
   .su: sign-in keeps .solo. ---------------------------------------------------------------------------- */
.su { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.su-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 64px; padding: 12px 28px; border-bottom: 1px solid var(--line); justify-content: space-between; }
.su-top .brand { padding: 0; min-width: 0; }
.su-name { display: flex; flex-direction: column; min-width: 0; }
.su-where { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; font-size: 13px; color: var(--muted); min-width: 0; }
.su-where .mono { font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
.su-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 28px 64px; display: flex; flex-direction: column; gap: 24px; min-width: 0; flex: 1 0 auto; }
.su-main.narrow { max-width: 920px; }
.su-main.wide { max-width: 1180px; }
.su [data-errors]:empty { display: none; }
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.su-steps li { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 2px solid var(--line2); min-width: 0; }
.su-steps .n { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.su-steps .w { font-weight: 600; color: var(--sub); }
.su-steps .sn, .su-steps .short { display: none; }
.su-steps li.done, .su-steps li[aria-current="step"] { border-top-color: var(--accent); }
.su-steps li.done .n, .su-steps li[aria-current="step"] .n { color: var(--accent); }
.su-steps li.done .w, .su-steps li[aria-current="step"] .w { color: var(--text); }
.su-steps li.then { border-top-style: dashed; }
.su-steps li.now { border-top: 2px solid var(--ok); }
.su-steps li.now .n { color: var(--ok-text); }
.su-h { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.su-h h1 { font: 600 28px/1.2 var(--display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.su-h p { font-size: 15px; color: var(--sub); max-width: 66ch; }
.su-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px 20px; }
.su-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px 20px; }
.su-hp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.su-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 16px; }
.su .input.su-code { height: 56px; max-width: 420px; padding: 0 16px; border-radius: 8px; font: 500 21px var(--mono); letter-spacing: .12em; }
.su .input.su-file { height: auto; min-height: 36px; padding: 6px 8px; }
/* the page's buttons: Back on the left, words, the main one on the right */
.su-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.su-fnote { flex: 1 1 260px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.su-acts { display: contents; }
.su-more { order: 1; display: flex; gap: 8px; }
.su-foot .su-back { order: -1; }
.su-foot .su-go { order: 2; margin-left: auto; }
.su-foot .btn { height: 40px; padding: 0 18px; }
.su-foot .btn.quiet { padding: 0 12px; }
.su-end { display: block; font-size: 12.5px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.su-end .lk { display: inline-block; vertical-align: -2px; margin-right: 8px; }
.su-end .mono { font-size: 12px; color: var(--sub); }
.su-main > .su-end { margin-top: auto; padding-top: 8px; }
.su-info { display: flex; gap: 10px; align-items: flex-start; max-width: 80ch; font-size: 13px; color: var(--muted); }
.su-info > .ic, .su-next > .ic { margin-top: 2px; }
.su-next { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--sub); font-size: 13.5px; }
.su-next > .ic { color: var(--muted); }
.su .note > .tx { flex-basis: 180px; }
.su .note > .ic { align-self: flex-start; margin-top: 2px; }
/* the key */
.su-key { align-items: center; justify-content: center; gap: 20px; padding: 48px 16px; }
.su-keycard { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.su-keycard .brand { padding: 0; }
.su-keycard .su-h { gap: 8px; } .su-keycard .su-h h1 { font-size: 24px; } .su-keycard .su-h p { font-size: 13.5px; }
.su-keycard .field { gap: 8px; }
.su-keycard .input.key { letter-spacing: .12em; text-transform: uppercase; }
.su-keycard .input.key::placeholder { letter-spacing: .06em; }
.su-keycard > .btn.primary { height: 44px; width: 100%; }
.su-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.su-tip > .ic { margin-top: 1px; }
.su-tip .col { gap: 4px; } .su-tip code { font-size: 12px; color: var(--text); word-break: break-all; }
/* a new server or one brought back */
.su-choices { display: flex; flex-wrap: wrap; gap: 16px; }
.su-choice { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; border-radius: 12px; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.su-choice:hover, .su-choice:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); }
.su-choice .ib { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--hover); color: var(--accent); }
.su-choice .tt { font: 600 18px/1.3 var(--display); }
.su-choice .ds { font-size: 14px; line-height: 21px; color: var(--sub); }
.su-choice .ck { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text2); }
.su-choice .ck > span { display: flex; gap: 8px; align-items: flex-start; }
.su-choice .ck .ic { margin-top: 3px; color: var(--muted); }
.su-pick { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.su-choice.busy { pointer-events: none; opacity: .85; cursor: progress; }
.su-choice.busy .su-pick > svg { display: none; }
.su-choice.busy .su-pick::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vc-spin .8s linear infinite; }
/* the domain's checks */
.su-chk { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.su-chk:last-child { border-bottom: 0; }
.su-chk > span:first-child { padding-top: 2px; }
.su-chk .col { gap: 4px; } .su-chk .h { font-size: 12.5px; color: var(--muted); }
.su-chk.ask { background: var(--accent-soft); }
/* the install, live */
.su-prog { padding: 16px; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; grid-template-areas: "st tm pc" "br br br"; column-gap: 14px; row-gap: 10px; align-items: baseline; }
.su-stept { grid-area: st; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); min-width: 0; }
.su-stept > span:last-child { min-width: 0; }
.su-stept.ok { color: var(--ok-text); } .su-stept.bad { color: var(--bad-text); }
.su-time { grid-area: tm; font-size: 12.5px; color: var(--muted); }
.su-pct { grid-area: pc; font: 500 18px var(--display); font-variant-numeric: tabular-nums; }
.su-prog .bar { grid-area: br; flex: none; height: 8px; align-self: center; }
.su-prog .bar > i { box-shadow: 0 0 12px var(--accent-line); }
.su-prog .bar.ok > i, .su-prog .bar.bad > i { box-shadow: none; }
.su-pnote { grid-column: 1 / -1; } .su-pnote:empty { display: none; }
.su-run { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.su-stepsc { flex: 1 1 340px; }
.su-tl { list-style: none; margin: 0; padding: 12px 16px 14px; display: flex; flex-direction: column; }
.su-tl li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding-bottom: 14px; }
.su-tl li:last-child { padding-bottom: 0; }
.su-tl li::before { content: ""; position: absolute; left: 10.5px; top: 22px; bottom: 0; width: 1px; background: var(--line2); }
.su-tl li:last-child::before { display: none; }
.su-tl li.done::before { background: #2C5A40; }
.su-tl .mk { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line2); background: var(--card); color: var(--muted); font-size: 11px; }
.su-tl li.done .mk { background: var(--ok); border-color: var(--ok); color: #000; }
.su-tl li.run .mk { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px var(--accent-line); }
.su-tl li.bad .mk { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-text); }
.su-tl .col { gap: 0; }
.su-tl .nm { font-size: 13.5px; font-weight: 500; line-height: 22px; }
.su-tl li:not(.done):not(.run):not(.bad) .nm { color: var(--sub); font-weight: 400; }
.su-tl li.run .nm { color: var(--accent); font-weight: 600; }
.su-tl li.bad .nm { color: var(--bad-text); }
.su-tl .ds { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.su-tl li.run .ds { color: var(--sub); }
.su-tl .tm { font-size: 12.5px; color: var(--muted); line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-tl li.run .tm { color: var(--accent); }
.su-logc { flex: 1.6 1 480px; min-width: 0; background: var(--bg); border: 1px solid #1C1C1C; border-radius: 10px; overflow: hidden; }
.su-logh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 12px 9px 16px; background: var(--card); border-bottom: 1px solid #1C1C1C; min-height: 52px; }
.su-logh h2 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.su-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.su-live > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(63, 203, 126, .7); }
.su-live.lost > i { background: var(--warn); box-shadow: none; animation: vc-pulse 1.2s infinite; }
.su-live.end > i, .su-live.stopped > i { background: var(--dim); box-shadow: none; }
.su-live.stopped > i { background: var(--bad); }
.su-log { height: 490px; overflow: auto; overscroll-behavior: contain; padding: 10px 0 14px; font: 12.5px/1.65 var(--mono); color: #CCC; }
.su-log:focus-visible { outline-offset: -2px; }
.ll { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding-right: 14px; }
.ll .ln { color: var(--dim); text-align: right; padding-right: 12px; user-select: none; -webkit-user-select: none; }
.ll .lt { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.ll.step { margin-top: 10px; } .ll.step:first-child { margin-top: 0; }
.ll.step .lt { color: #F2F2F2; font-weight: 500; }
.ll.info .lt { color: var(--ok-text); } .ll.cmd .lt { color: var(--accent); } .ll.warn .lt { color: var(--warn-text); } .ll.err .lt { color: var(--bad-text); }
.su-sum { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
.su-sum > div { background: var(--card); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-sum dt { font-size: 12.5px; color: var(--muted); } .su-sum dd { margin: 0; overflow-wrap: anywhere; }
.su-sum .fill { display: none; }
/* done: the sign-in for the panel's own name, a card like the key's */
.su-okline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ok-text); }
.su-okline > .ic { color: var(--ok); }
.su-ready .su-keycard { gap: 18px; }
.su-ready .su-h h1 { text-wrap: balance; }
.su-ready .btn.primary, .su-goto { height: 44px; width: 100%; }
.su-goto { gap: 8px; }
.su-ready .or { margin: -4px 0; }
.su-ready .su-end { max-width: 460px; }
.su-going { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--accent-soft); font-size: 13.5px; overflow-wrap: anywhere; }
.su-sumd { width: 100%; max-width: 460px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.su-sumd > summary, .su-sumd[open] > summary { display: block; position: relative; width: auto; margin: 0; padding: 13px 16px 13px 36px; cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.su-sumd > summary > span + span { margin-left: 10px; font-weight: 400; }
.su-sumd > summary::-webkit-details-marker { display: none; }
.su-sumd > summary::before { content: ""; position: absolute; left: 17px; top: 20px; width: 7px; height: 7px; border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub); transform: rotate(-45deg); transition: transform .15s; }
.su-sumd[open] > summary::before { transform: rotate(45deg); top: 18px; }
.su-sumd[open] > summary { border-bottom: 1px solid var(--line); }
.su-sumd .su-sum { grid-template-columns: minmax(0, 1fr) !important; }
.su-sumd .su-sum .fill { display: none !important; }
/* which copy comes back */
.su-copies { display: flex; flex-direction: column; }
.su-copy { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.su-copy:last-child { border-bottom: 0; }
.su-copy:hover { background: var(--hover); }
.su-copy:has(input:checked) { background: var(--accent-soft); }
.su-copy input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.su-copy .col { gap: 2px; }
@media (min-width: 818px) { .su-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .su-sum .fill { display: block; } }
@media (min-width: 761px) { .su .m-only { display: none !important; } }
/* a phone: the bar on top stays, the steps are chips, the page's main buttons are a bar at the bottom */
@media (max-width: 760px) {
  .su .d-only { display: none !important; }
  .su-head { position: sticky; top: 0; z-index: 20; background: var(--bg); }
  .su-top { flex-wrap: nowrap; height: 56px; min-height: 56px; padding: 0 16px; gap: 10px; }
  .su-top .brand { flex: 1 1 auto; min-height: 44px; }
  .su-top .brand-name { overflow: hidden; text-overflow: ellipsis; }
  .su-ip { font: 400 12px/1.3 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .su-count { flex: none; font-size: 13px; color: var(--sub); white-space: nowrap; }
  .su-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 0 16px; margin-top: -1px; }
  .su-bar i { height: 3px; border-radius: 2px; background: var(--line); }
  .su-bar i.done { background: var(--ok); } .su-bar i.now { background: var(--accent); }
  .su-main, .su-main.narrow, .su-main.wide { max-width: 640px; padding: 20px 16px 28px; gap: 18px; }
  .su-steps { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .su-steps::-webkit-scrollbar { display: none; }
  .su-steps li { flex: none; flex-direction: row; align-items: center; gap: 8px; padding-top: 0; border-top: 0 !important; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
  .su-steps .n, .su-steps .w { display: none; }
  .su-steps .sn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; background: none; box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--muted); font: 600 12px/1 var(--font); }
  .su-steps .short { display: inline; }
  .su-steps li.done { color: var(--sub); }
  .su-steps li.done .sn, .su-steps li.now .sn { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
  .su-steps li[aria-current="step"] { color: var(--text); }
  .su-steps li[aria-current="step"]:not(.now) .sn { background: var(--accent); color: #000; box-shadow: none; }
  .su-h { gap: 8px; } .su-h h1 { font-size: 24px; } .su-h p { font-size: 14px; }
  .su .card-h .acts:has(.seg) { margin-left: 0; width: 100%; }
  .su .card-h .seg { display: flex; width: 100%; }
  .su .card-h .seg > * { flex: 1 1 0; justify-content: center; min-height: 38px; }
  .su-hp { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
  .su .input.lg { height: 44px; }
  .su .input.su-code { max-width: none; font-size: 20px; }
  .su-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .su-fnote { flex: none; }
  .su-more { order: 0; } .su-more .btn { width: 100%; }
  .su-acts { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .su-acts.one { grid-template-columns: 1fr; }
  .su-acts .btn, .su-foot .su-go { width: 100%; height: 48px; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 15px; }
  .su.has-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .su-choice { padding: 18px; flex-basis: 100%; }
  .su-prog { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st st" "br pc" "tm tm"; align-items: center; row-gap: 8px; }
  .su-stepsc, .su-logc { flex-basis: 100%; }
  .su-log { height: 340px; font-size: 12px; }
  .ll { grid-template-columns: 34px minmax(0, 1fr); padding-right: 10px; } .ll .ln { padding-right: 8px; }
  /* mobile design 26.11.15: buttons without a frame, a lighter pressed segment */
  .su .btn:not(.primary):not(.quiet):not(.danger):not(.icon) { border-color: transparent; background: #1C1C1C; }
  .su .btn.primary { border-color: transparent; }
  .su .seg { padding: 2px; border-radius: 10px; }
  .su .seg > * { padding: 0 8px; min-width: 0; border-radius: 8px; font-size: 14px; }
  .su .seg > [aria-pressed="true"] { background: #262626; box-shadow: none; }
}
/* a phone on its side: nothing sticks, the page has all of the little height there is */
@media (max-width: 760px) and (max-height: 500px) {
  .su-head { position: static; }
  .su-acts { position: static; padding: 0; border-top: 0; background: none; }
  .su.has-foot { padding-bottom: 0; }
}
@media (max-width: 360px) { .su-h h1 { font-size: 22px; } }
@media (max-width: 520px) {
  .su-sumd { border-radius: 10px; }
  .su-key { justify-content: flex-start; padding: 28px 20px; }
  .su-keycard { padding: 0; border: 0; background: none; border-radius: 0; }
  .su-keycard .input.key { font-size: 17px; letter-spacing: .06em; padding: 0 12px; }
}

/* ---- shared parts of the 26.11.15 pages ------------------------------------------------------------- */
.backl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); margin-bottom: -10px; align-self: flex-start; }
.backl:hover { color: var(--text); }
@media (max-width: 760px) { .backl { display: none; } }
.cols-2 { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.cols-2 > .col { gap: 16px; }
@media (max-width: 1100px) { .cols-2 { grid-template-columns: minmax(0, 1fr); } }
.badge.sm { min-height: 20px; padding: 0 8px; font-size: 11.5px; }
.badge.round { width: 22px; height: 22px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; background: var(--hover); color: var(--sub); font-weight: 600; flex: none; }
.btn.sm.icon { width: 30px; padding: 0; justify-content: center; }
.btns.end { justify-content: flex-end; }
.card-f.info { align-items: flex-start; flex-wrap: nowrap; gap: 10px; line-height: 1.5; }
.card-f.info > .ic { flex: none; margin-top: 2px; }
.card-b.sep { border-top: 1px solid var(--line); }
.dl-r { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dl-r:last-child { border-bottom: 0; }
.dl-r > .k { font-size: 12.5px; color: var(--muted); } .dl-r > .v { font-size: 14px; }
.ibox { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--hover); color: var(--sub); box-shadow: inset 0 0 0 1px #2C2C2C; }
.st-dot { display: inline-flex; align-items: center; gap: 8px; }
.st-dot .sdot { position: static; width: 7px; height: 7px; box-shadow: 0 0 8px rgba(63, 203, 126, .6); }
.st-dot .sdot.bad { box-shadow: 0 0 8px rgba(240, 106, 102, .5); } .st-dot .sdot.warn { box-shadow: 0 0 8px rgba(235, 177, 75, .5); }
table.t td .s.ind { margin-left: 15px; font-size: 12px; }
.numl { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.numl li { display: flex; gap: 10px; align-items: flex-start; }
.numl .col0 .n { font-weight: 400; } .numl .col0 .s { font-size: 13px; color: var(--muted); }
.rcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; }
.rcard:hover { border-color: #444; }
.rcard.on { background: var(--accent-soft); border-color: var(--accent-line); }
.rcard input[type=radio] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rcard .col0 .n { font-weight: 500; } .rcard .col0 .s { font-size: 13px; color: var(--sub); }
.rcard .rec { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--accent); }
.rcard .tag { margin-left: auto; white-space: nowrap; }
.how-b { display: flex; flex-direction: column; gap: 10px; }
.cmdbox { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg); min-height: 44px; }
.cmdbox code { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmdbox .btn { flex: none; }
.waitrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; background: var(--accent-soft); font-size: 13.5px; }
.waitrow.bad { background: var(--bad-soft); color: var(--bad-text); } .waitrow.bad .spin { display: none; }
.grid-ap { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
.grid-us { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .grid-us { grid-template-columns: minmax(0, 1fr); } }

/* Servers */
.srv-n { display: flex; align-items: center; gap: 10px; }
.srv-n .nm { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lgs { display: flex; flex-direction: column; gap: 4px; }
.lg-r { display: grid; grid-template-columns: 54px 72px 36px; align-items: center; column-gap: 8px; font-size: 12.5px; }
.lg-r .lg-l { color: var(--muted); } .lg-r .bar { width: 72px; flex: none; } .lg-r .lg-v { color: var(--text2); font-variant-numeric: tabular-nums; }

/* what shows only on a computer, and only on a phone */
@media (max-width: 760px) { .dsk { display: none !important; } }
@media (min-width: 761px) { .mob { display: none !important; } }
.btn.block { width: 100%; justify-content: center; }
.mrow .ibox { position: relative; }
.mrow .ibox .sdot { top: -2px; right: -2px; border: 2px solid var(--card); width: 10px; height: 10px; }
.mrow .mt .t .badge { margin-left: 6px; vertical-align: 1px; }
.mrow > .go { color: var(--muted); flex: none; }
.card > .mlist { border: 0; border-radius: 0; }
.btn.lg { height: 48px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
button.mrow { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
button.mrow:active, a.mrow:active { background: var(--hover); }
@media (max-width: 760px) {
  .cmdbox { flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; }
  .cmdbox code { white-space: pre-wrap; word-break: break-all; overflow: visible; line-height: 1.6; }
  .cmdbox .btn { width: 100%; height: 40px; }
  .rcard { align-items: flex-start; } .rcard input[type=radio] { margin-top: 3px; }
  .rcard .tag { display: none; }
  .waitrow { flex-wrap: wrap; } .waitrow .small { flex-basis: 100%; padding-left: 24px; }
}
.waitrow .grow { flex: 1 1 0; min-width: 0; }

/* Home */
.scanbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; line-height: 20px; }
.scanbar > .ic { color: var(--accent); flex: none; }
.scanbar .btns { flex: none; display: flex; gap: 8px; }
.card-more { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-top: 1px solid var(--line); font-weight: 500; }
.empty.sm { padding: 24px 16px; flex-direction: row; justify-content: center; color: var(--warn-text); }
.btn.primary.icon { width: 40px; height: 40px; padding: 0; border-radius: 10px; color: #000; }
.srvcards { display: flex; flex-direction: column; gap: 16px; }
.srvcard { display: flex; flex-direction: column; gap: 14px; padding: 16px; text-align: left; font: inherit; color: var(--text); cursor: pointer; width: 100%; }
.srvcard-h { display: flex; align-items: center; gap: 12px; } .srvcard-h .col0 { flex: 1; } .srvcard-h .col0 .n { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.srvcard-h > .ic { color: var(--muted); }
.srvcard .gs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.srvcard .g { display: flex; flex-direction: column; gap: 4px; } .srvcard .g .l { font-size: 13px; color: var(--sub); }
.srvcard .g .v { font: 500 18px/1.2 var(--display); } .srvcard .g .v small { font: 400 12px var(--font); color: var(--sub); }
.srvcard .g .bar { flex: none; width: 100%; }
@media (max-width: 760px) {
  .head { order: -1; }
  .o-steps { order: 0; } .o-apps { order: 1; } .o-scan { order: 2; } .o-srv { order: 3; } .o-bell { order: 4; } .o-banner { order: 5; } .o-foot { order: 6; }
  .head-t .tl .mhead-a { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .scanbar { background: none; padding: 0 2px; color: var(--sub); }
  .scanbar .btn.quiet { background: #1C1C1C; color: var(--text); }
  .lrow.bellrow { grid-template-columns: 18px minmax(0, 1fr) 16px; grid-template-rows: auto auto; row-gap: 2px; padding: 12px 16px; align-items: start; }
  .lrow.bellrow > :first-child { grid-row: 1 / 3; margin-top: 2px; } .lrow.bellrow .w { white-space: normal; } .lrow.bellrow .d { grid-column: 2; white-space: normal; }
  .lrow.bellrow .go { grid-column: 3; grid-row: 1; }
  .note > .tx { flex: 1 1 0; }
  .note > .btns { flex-basis: 100%; margin-left: 26px; }
}

/* Server overview */
.tab .tab-n { margin-left: 6px; font-size: 12px; color: var(--muted); }
.tabs .c .n { position: relative; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-text); font-size: 11.5px; font-weight: 600; }
.sect-h { display: flex; align-items: center; gap: 12px; margin-bottom: -8px; }
.sect-h h2 { font-size: 15px; font-weight: 600; } .sect-h .meta { font-size: 12.5px; color: var(--muted); } .sect-h .right { margin-left: auto; }
.seg.sm a, .seg.sm button { height: 28px; padding: 0 10px; font-size: 12.5px; }
.stats.gauges .gauge { background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gauge .g-l { display: flex; align-items: center; font-size: 13px; color: var(--sub); } .gauge .g-i { margin-left: auto; color: var(--muted); display: inline-grid; }
.gauge .g-v { font: 500 26px/1.15 var(--display); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.gauge .g-v small { font: 400 13px var(--font); color: var(--sub); letter-spacing: 0; margin-right: 6px; }
.gauge .g-s { font-size: 12.5px; color: var(--muted); min-height: 19px; }
.gauge .chart { height: 44px; margin-top: 8px; }
.gauge .g-bar { flex: none; width: 100%; height: 6px; margin: 27px 0 11px; }
.gauge .chart-foot { margin-top: 4px; }
.cgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 16px 4px; }
.cgroup { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); min-height: 56px; }
.cgroup:hover { background: var(--hover); color: var(--text); }
.cgroup .col0 { flex: 1; } .cgroup .col0 .s { font-size: 12.5px; } .cgroup .c { font-size: 13px; color: var(--sub); white-space: nowrap; }
.clist { list-style: none; margin: 0; padding: 12px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.clist li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .clist li > span:first-child { margin-top: 2px; display: inline-grid; }
.clist .col0 .n { font-weight: 400; } .clist .col0 .s { font-size: 12.5px; }
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cells .cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-right: 1px solid var(--line); min-width: 0; }
.cells .cell:last-child { border-right: 0; } .cells .k { font-size: 12px; color: var(--muted); } .cells .v { font-size: 13px; overflow-wrap: anywhere; }
.rule { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rule > span:first-child { margin-top: 2px; display: inline-grid; } .rule .col0 { flex: 1; } .rule .col0 .n { font-weight: 500; } .rule .col0 .s { font-size: 12.5px; }
.rule .btn { flex: none; }
.kvs { display: flex; flex-direction: column; }
.kv2 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: center; }
.kv2:last-child { border-bottom: 0; } .kv2 > .k { color: var(--sub); } .kv2 > .v { min-width: 0; overflow-wrap: anywhere; }
.kv2.dk { grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); } .kv2.dk .k { display: flex; flex-direction: column; color: var(--text); } .kv2.dk .k .s { font-size: 12px; color: var(--muted); }
.kv2.dk .v { display: flex; align-items: center; gap: 12px; } .kv2.dk .v .bar { flex: 1; }
.lnk { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
@media (max-width: 1100px) { .stats.gauges { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cgroups, .clist { grid-template-columns: 1fr; } .cells { grid-template-columns: 1fr; } .cells .cell { border-right: 0; border-bottom: 1px solid var(--line); } }
/* the phone: the groups of All checks as rows of the card, the load cards without the words under the chart */
@media (max-width: 760px) {
  .cgroups { display: block; padding: 0; }
  .cgroup { gap: 12px; min-height: 56px; padding: 10px 14px 10px 16px; border: 0; border-radius: 0; border-bottom: 1px solid #1C1C1C; }
  .cgroup .col0 { display: flex; flex-direction: column; gap: 2px; }
  .cgroup .col0 .n { font-size: 15px; font-weight: 500; }
  .cgroup .col0 .s { font-size: 13.5px; color: var(--sub); }
  .cgroup .col0 .s::first-letter { text-transform: uppercase; }
  .cgroup .c { font-size: 14px; color: var(--text2); }
  .cgroup .chev { display: flex; color: var(--muted); }
  .stats.gauges .chart-foot { display: none; }
  .card-h .acts [data-recheck] { background: transparent; border-color: transparent; font-size: 14px; }
}
.card-f a, .kv2 a.small { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
@media (max-width: 760px) {
  .rule { flex-wrap: wrap; } .rule .col0 { flex: 1 1 calc(100% - 30px); } .rule .btn { margin-left: 26px; }
  .gauge .g-v { font-size: 20px; white-space: normal; flex-wrap: wrap; }
  .stats.gauges { grid-template-columns: 1fr 1fr; }
  .head-a .btn { flex: 1 1 auto; }
}

/* one job */
.cancel-note { max-width: 210px; line-height: 18px; }
.jprog { gap: 12px; } .jprog .row { font-size: 13.5px; } .jprog .bar { flex: none; width: 100%; }
.jcols { display: grid; grid-template-columns: minmax(300px, 0.53fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .jcols { grid-template-columns: minmax(0, 1fr); } }
.jsteps { list-style: none; margin: 0; padding: 8px 16px 12px; display: flex; flex-direction: column; }
.jstep { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; font-size: 13.5px; color: var(--sub); }
.jstep .jm { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; color: var(--muted); box-shadow: inset 0 0 0 1px #3A3A3A; }
.jstep.done { color: var(--text); } .jstep.done .jm { background: var(--ok); color: #000; box-shadow: none; }
.jstep.failed { color: var(--bad-text); } .jstep.failed .jm { background: var(--bad); color: #000; box-shadow: none; }
.jstep.run { color: var(--accent); font-weight: 500; } .jstep.run .jm { box-shadow: inset 0 0 0 1px var(--accent-line); }
.jstep.skip { color: var(--muted); text-decoration: line-through; }
.jstep .col0 { flex: 1; } .jstep .t { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .jstep.run .t { color: var(--accent); }
.jlog .card-h { gap: 12px; } .jlog .card-h .row { gap: 6px; }
.jlog .log { min-height: 520px; max-height: 70vh; overflow: auto; background: var(--card); padding: 14px 16px; }
.log.num-lines { counter-reset: ln; }
.log.num-lines .ln { display: block; padding-left: 36px; text-indent: -36px; }
.log.num-lines .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 28px; margin-right: 8px; text-align: right; color: var(--dim); text-indent: 0; }
.scanbar.plain { background: var(--card); border: 1px solid var(--line); color: var(--sub); }
.scanbar.plain > .ic { color: var(--sub); }
/* Jobs */
table.t .strong, .strong { font-weight: 600; color: var(--text); }
table.t td.where { min-width: 200px; } table.t td.where .bar { display: block; margin-top: 6px; width: 100%; max-width: 224px; flex: none; }
table.t tr.grp td { background: none; padding-top: 14px; padding-bottom: 10px; } table.t tr.grp td b { margin-right: 10px; } table.t tr.grp td .muted { font-size: 12.5px; }
table.t tr.paused td { color: var(--muted); }
table.sched td .s { max-width: 360px; }
.badge .muted-in { margin-left: 6px; opacity: .8; font-weight: 400; }
/* Docker */
.note.big { align-items: flex-start; padding: 14px 16px; gap: 12px; } .note.big > .ic { margin-top: 1px; }
.note.big .tx { display: flex; flex-direction: column; gap: 2px; } .note.big .tx b { font-size: 14px; } .note.big .tx .d { color: var(--text2); }
.note.bad.big { background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--text); } .note.bad.big > .ic { color: var(--bad-text); } .note.bad.big .tx b { color: var(--bad-text); }
.dot.ring-o { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dim); }
table.t.auto td { padding-top: 12px; padding-bottom: 12px; }
table.t tr.hl td { background: rgba(240, 190, 99, .04); }
.stat .n .dot { width: 8px; height: 8px; margin-right: 4px; align-self: center; }
/* Events */
.evbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.evbar .select { width: 160px; } .evbar form { min-width: 200px; } .evbar form .input { width: 100%; }
.col16 { display: flex; flex-direction: column; gap: 16px; }
table.evs td { padding-top: 12px; padding-bottom: 12px; }
table.evs .evl { width: 22px; padding-right: 0; } table.evs .evt { width: 64px; font-size: 14.5px; color: var(--text2); }
table.evs .evi { width: 28px; color: var(--accent); padding-left: 4px; padding-right: 4px; }
table.evs .evm .n { display: flex; align-items: center; gap: 8px; font-weight: 500; } table.evs .evm .n a { color: var(--text); } table.evs .evm .n a:hover { color: var(--accent2); }
table.evs tr.unread .evm .n { font-weight: 600; } table.evs .evm .s { margin-top: 2px; }
table.evs .evw { width: 200px; } table.evs .evs { width: 110px; } table.evs .evb { width: 110px; text-align: right; } table.evs .acts { width: 40px; }
.xbtn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.xbtn:hover { background: var(--hover); color: var(--text); }
@media (max-width: 760px) { table.evs .evw, table.evs .evs, table.evs .evi { display: none; } .evbar .select { flex: 1; } }
/* Notifications */
.narrow { width: 100%; max-width: 760px; }
.head.narrow .head-t .row { gap: 8px; }
.ngrp { display: flex; flex-direction: column; gap: 10px; }
.ngrp .kicker { font-size: 12px; } .ngrp .kicker .muted { margin-left: 4px; }
.ncards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ncard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ncard.bad { border-color: var(--bad-line); background: linear-gradient(0deg, rgba(240, 106, 102, .035), rgba(240, 106, 102, .035)), var(--card); }
.nc-h { display: flex; align-items: flex-start; gap: 10px; } .nc-h > span:first-child { margin-top: 2px; display: inline-grid; }
.nc-t { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; } .ncard .xbtn { margin: -4px -6px 0 0; }
.nc-d { margin: 0 0 0 28px; color: var(--text2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.nc-s { margin: 0 0 0 28px; display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-size: 12.5px; } .nc-s .ic { margin-top: 3px; flex: none; }
.nc-a { margin: 8px 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .nc-a.one { grid-template-columns: 1fr; }
.nc-a .btn { width: 100%; }
@media (min-width: 761px) { .nc-a { display: flex; flex-wrap: wrap; } .nc-a .btn { width: auto; } }
/* one app */
.apphead { display: flex; gap: 18px; align-items: flex-start; min-width: 0; flex: 1 1 420px; }
.ap.lg { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font: 600 20px/1 var(--display); letter-spacing: -0.02em; position: relative; flex: none; }
.ap.lg .dot { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--bg); }
.ap.sm { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font: 600 11px/1 var(--display); flex: none; }
.cols-2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .cols-2.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .apphead { gap: 12px; } .ap.lg { width: 52px; height: 52px; font-size: 17px; border-radius: 14px; } }
/* Protection */
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.mtile { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); min-height: 64px; }
.mtile:hover { background: var(--hover); color: var(--text); }
.mtile > span:first-child { margin-top: 1px; display: inline-grid; } .mtile .col0 { flex: 1; } .mtile .col0 .n { font-weight: 500; } .mtile .col0 .s { font-size: 13px; }
.mtile > .ic:last-child { color: var(--muted); margin-top: 2px; }
.kv.rec { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; align-items: center; }
.kv.rec .k { color: var(--text); font-weight: 500; font-size: 14px; }
@media (max-width: 1100px) { .mtiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .mtiles { grid-template-columns: 1fr; } .kv.rec { grid-template-columns: 1fr; gap: 6px; } .kv.rec .btn { justify-self: start; } }
/* the phone: Must have as rows of the card, the way the design has its lists */
@media (max-width: 760px) {
  .mtiles { display: block; padding: 0; }
  .mtile { align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 16px; border: 0; border-radius: 0; }
  .mtile + .mtile { border-top: 1px solid #1C1C1C; }
  .mtile > span:first-child { margin-top: 0; }
  .mtile .col0 { display: flex; flex-direction: column; gap: 2px; }
  .mtile .col0 .n { font-size: 15px; line-height: 1.4; }
  .mtile .col0 .s { font-size: 13.5px; line-height: 1.45; color: var(--sub); }
  .mtile .col0 .s::first-letter { text-transform: uppercase; }
  .mtile > .ic:last-child { margin-top: 0; }
}
/* Backups */
.input.at { width: 80px; text-align: center; } .input.num { width: 64px; text-align: center; } .input.num.sm { width: 56px; height: 30px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; } .stepper .btn { width: 30px; padding: 0; font-size: 16px; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.kv .v .check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hidden-empty:empty { display: none; }
.kv a.small { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
ul.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } ul.checks li { display: flex; gap: 8px; align-items: flex-start; } ul.checks li > span:first-child { margin-top: 3px; display: inline-grid; }
/* Settings */
.kv.row-k { align-items: start; padding-top: 14px; padding-bottom: 14px; }
.kv.row-k:has(> .v > .input, > .v > .select, > .v > select, > .v > input) > .k { padding-top: 8px; }
.kv.row-k > .kv-a { align-self: center; }
.kv.row-k > .k { color: var(--text); font-weight: 500; font-size: 14px; }
.kv.row-k > .v { gap: 6px; }
.kv.act { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; }
.select.w320 { max-width: 320px; } .select.w140 { max-width: 140px; }
@media (max-width: 760px) { .kv.act { grid-template-columns: 1fr; gap: 8px; } .kv.act > .btn, .kv.act > .btns { justify-self: start; } }
.kv .v > .seg { align-self: flex-start; }
.tbtn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* Account */
.avatar.xl { width: 56px; height: 56px; border-radius: 50%; font: 600 18px/1 var(--display); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.kv-a { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.pklist { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; max-width: 520px; }
.pklist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; } .pklist li + li { border-top: 1px solid var(--line); } .pklist .col0 { flex: 1; } .pklist .col0 .n { font-weight: 500; font-size: 13.5px; }
.input.w320 { max-width: 320px; }
/* Files */
.filecols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.filecols .fcol { gap: 16px; }
.plist { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.plist a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.plist a:hover { background: var(--hover); color: var(--text); } .plist a[aria-current="page"] { background: #1A1A1A; box-shadow: inset 0 0 0 1px var(--line2); }
.plist .pi { color: var(--muted); margin-top: 2px; display: inline-grid; } .plist .col0 { flex: 1; } .plist .col0 .n { font-size: 13px; } .plist .col0 .s { font-size: 12px; }
.plist .sz { font-size: 12px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
@media (max-width: 1100px) { .filecols { grid-template-columns: minmax(0, 1fr); } .plist { flex-direction: row; overflow-x: auto; } .plist li { flex: none; } }
/* Confirm it's you */
.dialog.confirm-me .dlg-hero { gap: 12px; }
.or { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.input.code6 { height: 44px; text-align: center; font: 500 20px var(--mono); letter-spacing: .3em; }
.dialog.confirm-me .dlg-f { justify-content: space-between; } .dialog.confirm-me .dlg-f .lnk { margin-left: 8px; }
/* Terminal on a phone: chips for the sessions, saved commands, the keys a phone lacks, a line to type in (26.11.12) */
.tphone { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg); }
.tsaved { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 6px; min-width: 0; }
.tlbl { font-size: 12.5px; color: var(--muted); }
.tchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: #1C1C1C; color: var(--text2); font: 500 13px/1 var(--font); cursor: pointer; white-space: nowrap; }
.chip.mono { font-family: var(--mono); }
.chip:hover { color: var(--text); background: #222; }
.tkeys { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; }
.tkey { flex: none; min-width: 44px; height: 40px; padding: 0 10px; border-radius: 8px; border: 0; background: #1C1C1C; color: var(--text2); font: 500 13.5px/1 var(--mono); cursor: pointer; }
.tkey[data-key="ctrl"] { min-width: 52px; }
.tkey[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tinput { display: flex; gap: 8px; align-items: center; padding: 6px 16px 16px; }
.tinput .input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 8px; border-color: #333; background: #000; font: 16px var(--mono); }
.tinput .btn { width: 48px; height: 48px; padding: 0; border-radius: 8px; flex: none; }
/* Terminal settings */
.tsize { flex: none; display: flex; align-items: center; gap: 6px; }
.tsize .btn { height: 40px; padding: 0 12px; background: #1C1C1C; border-color: transparent; font-size: 14px; }
.tsize .mono { min-width: 52px; text-align: center; font-size: 13.5px; font-weight: 500; }
.card .tsrow { min-height: 56px; }
.tprev-w { padding-top: 0; }
.tprev { padding: 10px 12px; border-radius: 8px; background: #000; border: 1px solid var(--line); font: 400 13px/1.6 var(--mono); color: var(--text2); white-space: pre; overflow: hidden; }
.tcmd { font-size: 12.5px; font-weight: 500; color: var(--sub); }
.tsrow .rm { color: var(--bad-text, #F58A86); width: 40px; height: 40px; }
.addsnip { display: flex; flex-direction: column; gap: 12px; }
.addsnip .h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card .addsnip.card-b { gap: 10px; padding: 14px 16px 16px; border-top: 1px solid #1C1C1C; }
.addsnip .row.end { align-items: flex-end; gap: 10px; }
.addsnip .row .field { min-width: 180px; }
.addsnip .row .field.grow { flex: 1; }
.tset-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tset-a .btn { height: 44px; }
@media (min-width: 761px) { .tset-a { display: flex; } }
@media (max-width: 760px) {
  /* the terminal and its settings have no tab bar: the terminal takes the whole screen */
  body:has(main.term-page) .mnav, body:has(main.term-set) .mnav { display: none; }
  .main-col:has(main.term-page), .main-col:has(main.term-set) { padding-bottom: env(safe-area-inset-bottom); }
  main.term-page { padding: 0; gap: 0; } main.term-page > .head { display: none; }
  main.term-page .term { border: 0; border-radius: 0; background: #000; height: calc(100dvh - 56px - env(safe-area-inset-bottom)); min-height: 440px; }
  .main-col:has(.mjob:not(.hidden)) main.term-page .term { height: calc(100dvh - 100px - env(safe-area-inset-bottom)); }
  main.term-page .term-tabs { gap: 8px; padding: 10px 16px; background: var(--bg); align-items: center; scrollbar-width: none; }
  main.term-page #tabs { gap: 8px; flex-wrap: nowrap; }
  main.term-page .tt { height: 36px; border-radius: 999px; background: #161616; color: var(--sub); box-shadow: none; }
  main.term-page .tt:has(> .term-tab[aria-selected="true"]) { background: #2A2A2A; color: var(--text); box-shadow: none; }
  main.term-page .term-tab { gap: 8px; padding: 0 2px 0 12px; font: 500 13px/1 var(--mono); }
  main.term-page .tclose { width: 28px; height: 28px; margin: 0 4px 0 0; border-radius: 999px; }
  main.term-page .term-tab .dot { width: 7px; height: 7px; }
  main.term-page .term-tab:not([aria-selected="true"]) .dot { display: none; }
  main.term-page .tnew { width: 36px; height: 36px; border: 0; background: transparent; color: var(--sub); flex: none; }
  main.term-page .term .xterm-host { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 12px 6px 8px 14px; background: #000; }
  main.term-page .tstat { padding: 0 16px 16px; border: 0; background: var(--bg); font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
  main.term-set .tset-a { margin-top: 4px; }
}
/* the narrowest phones */
.head-t .row { flex-wrap: wrap; }
.evbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 760px) { .nc-a .btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 10px; line-height: 1.25; text-align: center; } }

/* ---- the phone, closer to its design (26.11.12) ---------------------------------------------------- */
.head-t .tl > .brk { display: none; }
@media (max-width: 760px) {
  /* the page head: the title on a line of its own, its badges under it, then what the page is */
  .head-t { gap: 8px; }
  .head-t .tl > h1.t { flex-basis: 100%; }
  .head-t .tl:has(> .tsw) > h1.t { flex-basis: auto; }
  .head-t .tl > .brk { display: block; flex-basis: 100%; height: 0; margin-top: -8px; }
  .badge { height: 24px; font-size: 12.5px; }
  /* card headers: the title and its words on the left, its buttons on the right */
  .card-h { padding: 10px 12px 10px 16px; gap: 2px 8px; }
  .card-h h2 { font-size: 15.5px; }
  .card-h:has(> .acts:not(.dsk)) { flex-wrap: nowrap; }
  .card-h:has(> .acts:not(.dsk)) > .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-h:has(> .acts:not(.dsk)) > .acts { flex: none; padding: 0; }
  .card-h.long:has(> .acts:not(.dsk)) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .card-h.long:has(> .acts:not(.dsk)) > :not(.acts) { grid-column: 1; justify-self: start; }
  .card-h.long:has(> .acts:not(.dsk)) > .meta { white-space: normal; }
  .card-h.long:has(> .acts:not(.dsk)) > .acts { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .head-t .tl:has(> .mhead-a) > h1.t { flex-basis: auto; }
  .stat .n > .dot { display: none; }
  /* a key and its value side by side, the value on the right, as long as the value is words and links */
  .kv:not(:has(input, textarea, select, .seg, table, .switch, .btns:not(.dsk), .btn:not(.dsk))) { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .kv:not(:has(input, textarea, select, .seg, table, .switch, .btns:not(.dsk), .btn:not(.dsk))) > .v { align-items: flex-end; text-align: right; }
  .stat .s { line-height: 1.4; }
  /* a server's head: its name with the switch beside it, then its badges and one line of facts; its
     buttons go to the end of the page */
  .tsw { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: #1C1C1C; color: var(--sub); cursor: pointer; padding: 0; }
  .mfacts { font-size: 14px; line-height: 1.55; color: var(--text2); } .mfacts .mono { font-size: 13.5px; }
  .mfoot { flex-direction: column; align-items: stretch; } .mfoot .btn { width: 100%; }
  .st-on { color: var(--ok-text); }
  .sect-h { flex-wrap: wrap; row-gap: 12px; }
  .sect-h > .seg.right { flex-basis: 100%; margin-left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sect-h > .seg.right > * { justify-content: center; min-height: 38px; font-size: 14px; }
  /* the numbers: what follows a number is as big as it ("7 of 8", "1 running"); the line under it starts
     with a capital, and red is for the number, not for its words */
  .stat .n small { font: inherit; color: inherit; letter-spacing: inherit; }
  .sect-h .meta::first-letter, .card-h .meta:not(.nc)::first-letter { text-transform: uppercase; }
  .stat .s.bad-t { color: var(--muted); }
  /* filter chips: round, on the page above the list they filter */
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .chips > * { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; background: #161616; color: var(--sub); font-size: 14px; font-weight: 500; }
  .chips > [aria-current="page"], .chips > [aria-pressed="true"] { background: #2A2A2A; color: var(--text); }
  .chips .c { color: var(--muted); }
  /* rows of a list on the phone: what it is on the left, its numbers on the right */
  ul.mlist { list-style: none; margin: 0; padding: 0; }
  ul.mlist > li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 12px; align-items: center; padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
  ul.mlist > li:last-child > a { border-bottom: 0; }
  ul.mlist .col0 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  ul.mlist .col0 > b { font: 500 14px/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  ul.mlist .col0 .s { font-size: 12.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  ul.mlist .col0 .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
  ul.mlist .r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; font-weight: 500; }
  ul.mlist .r > :first-child { color: var(--text2); }
  ul.mlist > li > a > .ic { color: var(--muted); }
  .tabs .tab { font-size: 14.5px; }
  /* Files: the places as a strip of chips, the path with its buttons, the folder as a list */
  .mplaces { display: flex; flex-direction: column; gap: 8px; }
  .mplaces .lbl { font-size: 13px; color: var(--sub); }
  .pchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .pchips > a { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #161616; color: var(--text); max-width: 240px; }
  .pchips > a .mono { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pchips > a .s { font-size: 12px; color: var(--muted); }
  .pchips > a[aria-current="page"] { background: #2A2A2A; }
  .mpath { display: flex; align-items: center; gap: 12px; }
  .mpath .crumbs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; color: var(--text); }
  .mpath .crumbs a { color: var(--sub); } .mpath .crumbs .sep { color: var(--muted); }
  .mpath .btns { flex: none; flex-wrap: nowrap; } .mpath .btn.icon.lg { width: 44px; height: 44px; border-radius: 10px; color: var(--text); }
  ul.flist { list-style: none; margin: 0; padding: 0; }
  ul.flist > li { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-right: 8px; }
  ul.flist > li:last-child { border-bottom: 0; }
  ul.flist > li > button[data-dir], ul.flist > li > button[data-file] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 16px; background: none; border: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
  ul.flist .fi { flex: none; display: grid; color: var(--sub); } ul.flist .fi.dir { color: var(--accent); }
  ul.flist .col0 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  ul.flist .col0 .n { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } ul.flist .col0 .s { font-size: 13px; color: var(--sub); }
  .places + .fcol, .filecols { gap: 16px; }
  /* settings and account rows: the key on the left at the top, the value on the right, its lines under it */
  .kv.row-k { align-items: start; }
  .kv.row-k .v .row.wrap { flex-direction: column; align-items: flex-end; gap: 2px; }
  .kv.row-k .v .sub, .kv.row-k .v > .h { font-size: 12.5px; color: var(--muted); }
  .kv.row-k .v .mono { font-size: 14px; }
  .kv.row-k > .k { font-size: 14px; font-weight: 400; color: var(--sub); }
  .kv.row-k.act:has(> .lnk) { grid-template-columns: auto minmax(0, 1fr); }
  .kv.row-k.act:has(> .lnk) > .lnk { grid-column: 2; justify-self: end; }
  /* Account: a square avatar, the title and its badge beside it, the line about it under both */
  .apphead:has(> .avatar.xl) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center; }
  .apphead > .avatar.xl { width: 56px; height: 56px; border-radius: 14px; background: #2A2A2A; color: var(--text2); font-size: 18px; }
  .apphead:has(> .avatar.xl) > .head-t { display: contents; }
  .apphead:has(> .avatar.xl) .tl { grid-column: 2; grid-row: 1; }
  .apphead:has(> .avatar.xl) .lead { grid-column: 1 / -1; grid-row: 2; }
  .apphead:has(> .avatar.xl) .tl .badge.info { background: #232323; color: var(--sub); }
  #prof .card-h .btn.primary { background: #1C1C1C; border-color: transparent; color: var(--text); font-weight: 500; }
  /* a row with a button: its name and state on the left, the button on the right; the long words stay on the computer */
  .kv.row-k.act { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; }
  .kv.row-k.act > .k { grid-column: 1; color: var(--text); font-size: 15px; font-weight: 500; }
  .kv.row-k.act > .v { grid-column: 1; align-items: flex-start; text-align: left; font-size: 13.5px; color: var(--sub); }
  .kv.row-k.act > .v > .h { display: none; }
  .kv.row-k.act > .kv-a, .kv.row-k.act > .btn, .kv.row-k.act > .btns, .kv.row-k.act > .lnk { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .kv.row-k.act:has(> .kv-a > .lnk.mob) { grid-template-columns: auto minmax(0, 1fr); }
  .kv.row-k.act:has(> .kv-a > .lnk.mob) > .k { font-size: 14px; font-weight: 400; color: var(--sub); }
  .kv.row-k.act:has(> .kv-a > .lnk.mob) > .v { grid-column: 2; grid-row: 1; align-items: flex-end; color: var(--text); font-size: 15px; }
  .kv.row-k.act:has(> .kv-a > .lnk.mob) > .kv-a { grid-column: 2; grid-row: 2; }
  .kv.row-k .v .row.wrap:has(> .badge) { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; }
  /* Events: the filter as chips, then the section and Mark all read in one row; each event a row of its own */
  .evbar { flex-wrap: nowrap; gap: 8px; } .evbar .select { flex: 1; min-width: 0; } .evbar .btn { flex: none; }
  ul.evlist { list-style: none; margin: 0; padding: 0; }
  ul.evlist > li { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  ul.evlist > li:last-child { border-bottom: 0; }
  ul.evlist .t { position: relative; font-size: 13px; color: var(--sub); padding-top: 2px; padding-left: 12px; }
  ul.evlist .t .dot { position: absolute; left: 0; top: 8px; width: 6px; height: 6px; }
  ul.evlist .col0 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  ul.evlist .m { font-size: 15px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } ul.evlist .m b { font-weight: 600; } ul.evlist .m b.sub { color: var(--sub); }
  ul.evlist li:not(.unread) .m { color: var(--sub); }
  ul.evlist .w { font-size: 12.5px; color: var(--muted); }
  ul.evlist .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  ul.evlist .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #1C1C1C; color: var(--sub); font-size: 12px; font-weight: 500; }
  .mfoot-l { display: flex; justify-content: center; padding: 4px 0; }
  .head-t > .row { flex-wrap: wrap; } .head-t > .row > h1.t { flex-basis: 100%; }
  .tabs .c .n { min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; }
  .ncards { display: flex; flex-direction: column; gap: 12px; }
  .stat .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  ul.evlist .m a { color: inherit; }
  /* Processes: the search and the order above the list; each process a row with its numbers on the right */
  .col12 { display: flex; flex-direction: column; gap: 12px; }
  .find.wide { width: 100%; } .find.wide .input { width: 100%; }
  ul.plist-m { list-style: none; margin: 0; padding: 0; }
  ul.plist-m > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); user-select: none; }
  ul.plist-m > li:last-child { border-bottom: 0; }
  ul.plist-m .col0 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  ul.plist-m .col0 b { font: 500 14px/1.4 var(--mono); overflow-wrap: anywhere; }
  ul.plist-m .col0 .s { font-size: 13.5px; color: var(--text2); } ul.plist-m .col0 .w { font-size: 12px; color: var(--muted); }
  ul.plist-m .col0 .lnk { margin-top: 6px; font-size: 14px; }
  ul.plist-m .r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; font-weight: 500; } ul.plist-m .r > :first-child { color: var(--text2); }
  /* Logs: the filters above, each line a row: the time, where from, the level, the words */
  .lgbar .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .lgbar > .row { justify-content: space-between; } .lgbar .chips { margin: 0; padding: 0; flex: 1; min-width: 0; }
  .lgbar .live { gap: 10px; color: var(--sub); flex: none; }
  ul.lglist { list-style: none; margin: 0; padding: 0; font: 400 13px/1.5 var(--mono); }
  ul.lglist > li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  ul.lglist > li:last-child { border-bottom: 0; }
  ul.lglist > li.warn { background: rgba(235, 177, 75, .08); } ul.lglist > li.err { background: rgba(240, 106, 102, .08); }
  ul.lglist .t { color: var(--muted); } ul.lglist .m { color: var(--text2); overflow-wrap: anywhere; } ul.lglist .src { color: var(--sub); }
  ul.lglist b { font-weight: 600; }
  /* segmented buttons are as tall as the other controls on the phone */
  .seg > * { min-height: 36px; padding: 0 14px; font-size: 14px; }
  .seg.sm > * { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
  /* an app's head: its icon, its name and badges beside it, what it is under both; Open first, the rest in a row */
  .head:has(> .apphead > .ap.lg) .apphead { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center; }
  .head:has(> .apphead > .ap.lg) .apphead > .head-t { display: contents; }
  .head:has(> .apphead > .ap.lg) .apphead .tl { grid-column: 2; grid-row: 1; }
  .head:has(> .apphead > .ap.lg) .apphead .lead { grid-column: 1 / -1; grid-row: 2; }
  .apphead .tl > h1.t { flex-basis: 100%; }
  .apph-a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .apph-a > .btn.primary { grid-column: 1 / -1; grid-row: 1; height: 48px; }
  .apph-a > .btn { width: 100%; padding: 0 8px; }
  .apph-a > .btn.icon.lg { width: 100%; height: 44px; }
}

/* the page Copy code opens (letters 26.11.4) */
.cp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cp-host { font-size: 13px; color: var(--muted); }
.cp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cp-card h1 { margin: 4px 0 0; }
.cp-card .lead { margin: 0; }
.cp-code { align-self: stretch; margin-top: 8px; padding: 20px 12px; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px;
  text-align: center; font-size: 30px; line-height: 40px; font-weight: 600; letter-spacing: .12em; color: var(--text); user-select: all; -webkit-user-select: all; }
.cp-code .cp-g { padding-left: .4em; }
.cp-card .btn { align-self: center; margin-top: 8px; }
.cp-note { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); align-self: stretch; }
/* a part of a page a link points to (a letter's "Review sessions") stops below the sticky top bar */
.card[id] { scroll-margin-top: 76px; }
.cp-code::selection, .cp-code *::selection { background: var(--accent-soft); color: var(--text); }

/* ---- setting rows, as the design draws them ------------------------------------------------------------
   The label on a 36 px line; the value and its controls on that line, a switch or buttons at its end; a hint
   under them. A select is as wide as its choices need (150 px, 120 px for short ones), never the whole row. */
.kv.srow { grid-template-columns: clamp(140px, 36%, 240px) minmax(0, 1fr); padding: 14px 16px; }
.kv.srow > .k { color: var(--text); font-size: 14px; font-weight: 500; min-height: 36px; display: flex; align-items: center; padding-top: 0; }
.kv.srow > .v { gap: 6px; }
.srow .line { min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.srow .line > .t { font-size: 13.5px; line-height: 20px; color: var(--text2); min-width: 0; }
.srow .line > .t.mono { font: 13px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.srow .line > .end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.srow .line > .select { width: 150px; max-width: 100%; flex: none; }
.srow .line > .select.w120 { width: 120px; }
.srow .h { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.srow .set-in { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 760px) { .kv.srow { grid-template-columns: minmax(0, 1fr); row-gap: 6px; } .kv.srow > .k { min-height: 0; } }

/* chips: the words of a list, each with its ×, and a field to add one */
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px; background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line); font: 12.5px var(--mono); color: var(--text2); white-space: nowrap; max-width: 100%; }
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip > button { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.chip > button:hover { background: #2A1213; color: var(--bad-text); }
.chip-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-add .input { width: 200px; max-width: 100%; height: 30px; font: 12.5px var(--mono); }

/* a switch between views is as wide as its choices, also where a column stretches what it holds; so is a
   lone button in a card's body */
.seg { width: fit-content; max-width: 100%; }
.card-b > .seg, .kv > .v > .seg, .card-b > .btn, .card-b > a.btn { align-self: flex-start; }

/* AI activity: one call a row, as the design draws it: the time, the tool, what it touched, how it went;
   the rest opens under it */
details.arow { border-bottom: 1px solid var(--line); }
details.arow:last-child { border-bottom: 0; }
.arow > summary { display: grid; grid-template-columns: 64px 130px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: center;
  width: auto; margin: 0; padding: 12px 16px; color: var(--text); list-style: none; cursor: pointer; }
.arow > summary::-webkit-details-marker { display: none; }
.arow > summary:hover { background: var(--hover); }
.arow[open] > summary { background: var(--deep); margin: 0; }
.arow .tm { color: var(--sub); font-variant-numeric: tabular-nums; }
.arow .tool { font: 12.5px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.arow .what { font: 12.5px/1.5 var(--mono); color: var(--text2); overflow-wrap: anywhere; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arow .res { justify-self: end; font-size: 13px; color: var(--sub); text-align: right; }
.arow .more { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 4px 16px 14px 96px; background: var(--deep); }
.arow .more .meta-l { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.arow .more pre { margin: 0; }
@media (max-width: 760px) {
  .arow > summary { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; }
  .arow .tool { grid-column: 2; grid-row: 1; }
  .arow .res { grid-column: 3; grid-row: 1; }
  .arow .what { grid-column: 2 / 4; grid-row: 2; }
  .arow .more { padding-left: 72px; }
}

/* a time of day, chosen in steps of 30 minutes; in a column of fields it is as wide as the others */
.select.time { width: 104px; font-family: var(--mono); }
.field > .select.time { width: 100%; }
/* numbers in a setting: one size, and the stepper's buttons as tall as the box */
.input.num, .input.num.sm { width: 64px; height: 36px; }
.stepper .btn { width: 36px; height: 36px; }
/* "also keep" and the like: a box on every line, all of them in one column */
.keep { display: grid; grid-template-columns: max-content 64px max-content; align-items: center; gap: 8px 10px; }
.keep > .check { align-items: center; }
.keep > .check input { margin: 0; }
@media (max-width: 760px) { .input.num, .input.num.sm, .select.time { height: 44px; } .stepper .btn { width: 44px; height: 44px; } }
/* a key beside a row of 36 px boxes lines up with them */
.kv:has(> .v > .row > .seg, > .v > .row > .select, > .v > .row > .stepper, > .v > .keep) > .k { padding-top: 8px; }
@media (max-width: 760px) { .kv:has(> .v > .row > .seg, > .v > .row > .select, > .v > .row > .stepper, > .v > .keep) > .k { padding-top: 1px; } }

/* the terminal's buttons, as the design draws them: + for a new session is a transparent 32 px square at the
   foot of the tabs, a tab's × a 22 px one, and the toolbar's text and icon buttons are all 30 px, transparent
   and grey until a pointer is on them */
.term-tabs .tnew { width: 32px; height: 32px; margin: 2px 0 2px 2px; align-self: flex-end; border: 0; background: transparent; color: var(--sub); }
.term-tabs .tnew:hover { background: var(--hover); color: var(--text); }
.tclose { width: 22px; height: 22px; border-radius: 5px; }