/* DediGermany panel. One set of markup, three themes chosen in Staff → Settings → Appearance:
     .theme-a  Clean light (default): white cards, light grey page, menu on the left.
     .theme-b  Dark console: dark surfaces, signal-yellow actions.
     .theme-c  Brand industrial: RAL 7035 paper, 7016 anthracite, 1003 signal yellow, condensed headings.
   Components below only use the tokens; each theme block sets the tokens plus a few character tweaks.
   .layout-side = sidebar shell (theme A client area, every staff theme); .layout-top = top bar. */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ---------- tokens ---------- */
:root, .theme-a {
  --bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #F9FAFB; --hover: #F5F7FA; --text: #111827; --text-2: #4B5563;
  --border: #E5E7EB; --border-strong: #8C939D; --input-bg: #FFFFFF;
  --accent: #F2B300; --accent-hover: #DFA500; --on-accent: #1F2937; --accent-soft: #FFF7DB; --accent-text: #8A6100;
  --strong: #111827; --strong-hover: #1F2937; --on-strong: #FFFFFF; --strong-border: #111827;
  --ghost-border: #D1D5DB; --ghost-hover: #F3F4F6;
  --hdr-bg: #FFFFFF; --hdr-text: #4B5563; --hdr-strong: #111827; --hdr-hover: #F3F4F6; --hdr-border: #E5E7EB;
  --cur-bg: #FFF7DB; --cur-text: #111827; --cur-ico: #B07F00;
  --ok: #047857; --ok-bg: #ECFDF5; --ok-line: #A7F3D0; --warn: #92400E; --warn-bg: #FFFBEB; --warn-line: #FDE68A;
  --err: #B42318; --err-bg: #FEF3F2; --err-line: #FECDCA; --info: #1D4ED8; --info-bg: #EFF6FF;
  --code-bg: #111827; --code-text: #F2B300; --focus: #2563EB;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-head: var(--f-body);
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --h-weight: 700; --h-case: none; --h-track: -.02em; --h1: clamp(1.6rem, 2.6vw, 1.85rem); --h2: 1.15rem; --h3: 1rem;
  --label-case: uppercase; --label-track: .04em;
  --r-sm: 8px; --r-md: 12px; --r-pill: 999px; --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --wrap: 1240px; --gutter: clamp(16px, 3.4vw, 36px); --side-w: 252px;
}
.theme-b {
  --bg: #0F1215; --surface: #171B20; --surface-2: #1C2127; --hover: #1E242A; --text: #E6E8EA; --text-2: #A9B0B7;
  --border: #262C33; --border-strong: #5A636C; --input-bg: #0F1215;
  --accent: #F2B300; --accent-hover: #FFC929; --on-accent: #14181C; --accent-soft: #2A230E; --accent-text: #FFD24D;
  --strong: #2A3036; --strong-hover: #343B42; --on-strong: #FFFFFF; --strong-border: #3E464E;
  --ghost-border: #3E464E; --ghost-hover: #22282E;
  --hdr-bg: #14181C; --hdr-text: #A9B0B7; --hdr-strong: #FFFFFF; --hdr-hover: #1E242A; --hdr-border: #262C33;
  --cur-bg: #262D34; --cur-text: #FFFFFF; --cur-ico: #F2B300;
  --ok: #4ADE80; --ok-bg: #0F2A1F; --ok-line: #1E5A3C; --warn: #FFD24D; --warn-bg: #2A230E; --warn-line: #5C4A12;
  --err: #FF8A7A; --err-bg: #3A1714; --err-line: #6E2A22; --info: #8AB8FF; --info-bg: #12243A;
  --code-bg: #0B0D10; --code-text: #FFD24D; --focus: #7DB3FF;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --f-head: var(--f-body);
  --h-weight: 800; --h-case: none; --h-track: -.02em; --h1: clamp(1.6rem, 2.6vw, 1.9rem); --h2: 1.15rem; --h3: 1rem;
  --label-case: uppercase; --label-track: .06em;
  --r-sm: 8px; --r-md: 14px; --shadow: none;
}
.theme-c {
  --bg: #E7E9EA; --surface: #F6F7F7; --surface-2: #ECEEEF; --hover: #EEF0F0; --text: #23282B; --text-2: #535D62;
  --border: #CDD1D3; --border-strong: #868F94; --input-bg: #FBFBFB;
  --accent: #F2B300; --accent-hover: #D49C00; --on-accent: #23282B; --accent-soft: #FCEFC7; --accent-text: #6B4E00;
  --strong: #23282B; --strong-hover: #3A4247; --on-strong: #FBFBFB; --strong-border: #23282B;
  --ghost-border: #23282B; --ghost-hover: #23282B;
  --hdr-bg: #23282B; --hdr-text: #C4CACD; --hdr-strong: #FFFFFF; --hdr-hover: #30373B; --hdr-border: #3A4247;
  --cur-bg: #30373B; --cur-text: #FFFFFF; --cur-ico: #F2B300;
  --ok: #1F6B3A; --ok-bg: #DCEFE3; --ok-line: #9CCBAE; --warn: #6B4E00; --warn-bg: #FCEFC7; --warn-line: #E8D493;
  --err: #9B2C1F; --err-bg: #F6DAD5; --err-line: #E2B1A9; --info: #1E4A78; --info-bg: #DDE6F0;
  --code-bg: #23282B; --code-text: #F2B300; --focus: #1F6FEB;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --f-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --h-weight: 700; --h-case: uppercase; --h-track: .01em; --h1: clamp(2rem, 3.4vw, 2.6rem); --h2: 1.35rem; --h3: 1.12rem;
  --label-case: uppercase; --label-track: .08em;
  --r-sm: 3px; --r-md: 3px; --shadow: none;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15.5px/1.55 var(--f-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.theme-c body { font-size: 16px; }
a { color: inherit; }
main a:not(.btn):not(.stat):hover { color: var(--accent-text); }
h1, h2, h3 { font-family: var(--f-head); font-weight: var(--h-weight); line-height: 1.15; margin: 0 0 .5em; text-transform: var(--h-case); letter-spacing: var(--h-track); }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); margin-top: 1.6em; }
h3 { font-size: var(--h3); font-weight: 600; }
.theme-c h3 { font-weight: 700; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--f-mono); font-size: .9em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--strong); color: var(--on-strong); padding: 8px 14px; z-index: 50; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--text-2); }
.small { font-size: .88rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- shell: header / sidebar ---------- */
.app { min-height: 100vh; }
.top { background: var(--hdr-bg); color: var(--hdr-text); }
.top-row { display: flex; align-items: center; gap: 22px; min-height: 64px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hdr-strong); font: 700 1.08rem/1 var(--f-head); letter-spacing: -.01em; }
.logo b { font-weight: inherit; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-mark .lm-body { fill: #23282B; } .logo-mark .lm-hi { fill: #F2B300; } .logo-mark .lm-line { fill: #8E9296; } .logo-mark .lm-dot { fill: #E7E9EA; }
.logo .tag { white-space: nowrap; font: 600 .68rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 4px 7px; border-radius: 6px; background: var(--surface-2); }
.nav-panel { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; align-items: center; }
.nav a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: .94rem; padding: 9px 12px; border-radius: var(--r-sm); color: var(--hdr-text); }
.nav a:hover { color: var(--hdr-strong); background: var(--hdr-hover); }
.nav a[aria-current="page"] { color: var(--cur-text); background: var(--cur-bg); font-weight: 600; }
.nav a[aria-current="page"] .ico { color: var(--cur-ico); }
.nav .count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.6; }
.nav-h { margin: 14px 12px 4px; font: 600 .7rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--hdr-text); opacity: .85; }
.top-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.top-actions form { margin: 0; }
.who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hdr-strong); font-size: .9rem; font-weight: 600; min-width: 0; }
.who small { display: block; font-weight: 500; color: var(--hdr-text); text-transform: capitalize; font-size: .78rem; }
.who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--hdr-hover); border: 1px solid var(--hdr-border); color: var(--hdr-strong); font-size: .78rem; font-weight: 700; }
.linkbtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--hdr-text); font: inherit; font-size: .92rem; cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.top .linkbtn { text-decoration: none; }
.linkbtn:hover { color: var(--hdr-strong); }
.cart-pill { text-decoration: none; font-weight: 700; font-size: .88rem; padding: 7px 13px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.side-help { display: none; }
.nav-toggle { display: none; align-items: center; gap: 8px; margin-left: auto; font: 600 .9rem/1 var(--f-body); color: var(--hdr-strong); background: var(--hdr-hover); border: 1px solid var(--hdr-border); border-radius: var(--r-sm); padding: 10px 14px; cursor: pointer; }

/* top bar */
.layout-top .top { border-bottom: 1px solid var(--hdr-border); }
.layout-top .nav .ico { display: none; }
.layout-top .nav .count { margin-left: 6px; }
.layout-top .nav-h { display: none; }
.layout-top .who-name { max-width: 160px; }
@media (max-width: 1100px) { .layout-top .who-name { display: none; } }

/* sidebar */
@media (min-width: 901px) {
  .layout-side .app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr);
    background: linear-gradient(to right, var(--hdr-bg) calc(var(--side-w) - 1px), var(--hdr-border) calc(var(--side-w) - 1px), var(--hdr-border) var(--side-w), transparent var(--side-w)); }
  .layout-side .top { align-self: start; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--hdr-border); }
  .layout-side .top-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 22px; min-height: 100%; padding: 22px 14px 18px; max-width: none; }
  .layout-side .logo { padding: 0 8px; gap: 9px; }
  .layout-side:not(.is-staff) .logo .tag { display: none; }
  .layout-side .logo .tag { letter-spacing: .06em; padding: 4px 6px; font-size: .62rem; }
  .layout-side .nav-panel { flex-direction: column; align-items: stretch; gap: 18px; }
  .layout-side .nav { flex-direction: column; align-items: stretch; flex: 0 0 auto; flex-wrap: nowrap; }
  .layout-side .side-help { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--hdr-border); font-size: .85rem; color: var(--hdr-text); }
  .layout-side .side-help b { color: var(--hdr-strong); }
  .layout-side .side-help a { font-weight: 600; color: var(--hdr-strong); }
  .layout-side .top-actions { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding-top: 14px; border-top: 1px solid var(--hdr-border); }
  .layout-side .side-help + .top-actions { margin-top: 0; }
  .layout-side .nav-panel > .top-actions:first-child, .layout-side .nav + .top-actions { margin-top: auto; }
  .layout-side .top-actions .who { padding: 6px 8px; border-radius: var(--r-sm); }
  .layout-side .top-actions a.who:hover { background: var(--hdr-hover); }
  .layout-side .top-actions .linkbtn { padding: 9px 12px; width: 100%; border-radius: var(--r-sm); }
  .layout-side .top-actions .linkbtn:hover { background: var(--hdr-hover); }
  .layout-side .top-actions .cart-pill { align-self: flex-start; margin: 0 8px 8px; }
  .layout-side .app-body { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
  .layout-side .app-body main { flex: 1; }
  .layout-side .wrap { margin: 0; }
  .layout-side main .wrap { padding-top: 6px; }
}

/* phones and small tablets: menu folds behind the button */
@media (max-width: 900px) {
  .top-row { gap: 12px; min-height: 60px; }
  .nav-toggle { display: inline-flex; }
  .nav-panel { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 14px; }
  .js .nav-panel { display: none; }
  .js.nav-open .nav-panel { display: flex; }
  .nav { flex-direction: column; align-items: stretch; }
  .layout-top .nav .ico { display: block; }
  .layout-top .nav .count { margin-left: auto; }
  .layout-top .nav-h, .nav-h { display: block; }
  .top-actions { margin: 0; justify-content: space-between; border-top: 1px solid var(--hdr-border); padding-top: 10px; }
  .layout-top .who-name { display: inline; }
  .logo .tag { display: none; }
}

main { padding: clamp(22px, 3.4vw, 40px) 0 64px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.page-head > :first-child { min-width: 0; }
h1.h1-long { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-2); margin: 0 0 10px; min-width: 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px 0 8px; border: solid var(--text-2); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .55; flex: none; }
.crumbs a { color: var(--text-2); text-decoration: none; font-weight: 500; border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.crumbs a:hover { color: var(--text); background: var(--surface-2); }
.crumbs [aria-current="page"] span { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; display: block; }
.crumbs .crumbs-up { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.crumbs .crumbs-up:hover { background: var(--surface-2); border-color: var(--border-strong); }
.crumbs .crumbs-up:focus-visible, .crumbs a:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 1px; }
@media (max-width: 560px) { .crumbs li:not(:nth-last-child(-n+2)) { display: none; } .crumbs [aria-current="page"] span { max-width: 22ch; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 .94rem/1 var(--f-body); text-decoration: none;
  padding: 11px 17px; min-height: 42px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; color: var(--text); transition: background-color .12s, border-color .12s, color .12s; }
.btn-sm { padding: 7px 12px; min-height: 34px; font-size: .86rem; }
.btn-signal { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-signal:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ink { background: var(--strong); border-color: var(--strong-border); color: var(--on-strong); }
.btn-ink:hover { background: var(--strong-hover); }
.btn-ghost { border-color: var(--ghost-border); background: var(--surface); }
.btn-ghost:hover { background: var(--ghost-hover); }
.btn-danger { border-color: var(--err-line); color: var(--err); background: var(--surface); }
.btn-danger:hover { background: var(--err); border-color: var(--err); color: #FFFFFF; }
.theme-b .btn-danger:hover { color: #14181C; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.actions form { margin: 0; }

/* ---------- cards & layout ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: clamp(18px, 2.2vw, 24px); margin-bottom: 22px; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split > * { min-width: 0; }
.narrow { max-width: 460px; margin: 0 auto; }
.mid { max-width: 760px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.stat small { order: 0; } .stat b { order: 1; } .stat span { order: 2; } .stat:not(:has(small)) span { order: 0; }
.stat b { display: block; font: 700 1.6rem/1.1 var(--f-head); letter-spacing: -.01em; color: var(--text); }
.stat span { color: var(--text-2); font-size: .86rem; }
.stat small { color: var(--text-2); font-size: .86rem; font-weight: 500; }
.stat:has(small) span { font-size: .8rem; }
a.stat:hover { border-color: var(--border-strong); }
.theme-c .stat { border-left: 4px solid var(--accent); }
.theme-c .stat b { font-size: 2.1rem; }
.theme-c .stat small, .theme-c .stat:not(:has(small)) span { font: 600 .86rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .08em; }
.theme-b .stat-hot { border-color: var(--warn-line); }
.theme-a .stat-hot { border-color: var(--warn-line); background: var(--warn-bg); }
.theme-c .stat-hot { background: var(--strong); border-color: var(--strong); }
.theme-c .stat-hot b, .theme-c .stat-hot span { color: #FFFFFF; } .theme-c .stat-hot small, .theme-c .stat-hot:not(:has(small)) span { color: var(--accent); }
.stats { margin-bottom: 26px; }
@media (max-width: 600px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .stats .stat { padding: 13px 14px; } .stats .stat b { font-size: 1.3rem; } .theme-c .stats .stat b { font-size: 1.6rem; } }

/* server card ("plate") */
.plate { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; color: var(--text); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.plate .screw { display: none; }
.plate-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 .76rem/1 var(--f-body); color: var(--text-2); text-transform: uppercase; letter-spacing: .07em; }
.plate-name { font: 700 1.2rem/1.2 var(--f-head); margin: 12px 0 12px; letter-spacing: -.01em; text-transform: none; overflow-wrap: anywhere; }
.plate-name a { text-decoration: none; }
.plate-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.plate-specs { margin: 0 0 16px; padding: 4px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
.plate-specs div { display: grid; grid-template-columns: 7em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.plate-specs div:last-child { border-bottom: 0; }
.plate-specs dt { color: var(--text-2); font-size: .86rem; }
.plate-specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; font-size: .92rem; }
.plate-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.amt { font: 700 1.35rem/1 var(--f-head); color: var(--text); letter-spacing: -.01em; }
.per { font-size: .84rem; line-height: 1.3; color: var(--text-2); }
.plate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 20px; }
.theme-c .plate { border-top: 4px solid var(--strong); }
.theme-c .plate .screw { display: block; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #A9B0B3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.theme-c .plate .screw:nth-of-type(1) { top: 8px; left: 8px; } .theme-c .plate .screw:nth-of-type(2) { top: 8px; right: 8px; }
.theme-c .plate .screw:nth-of-type(3) { bottom: 8px; left: 8px; } .theme-c .plate .screw:nth-of-type(4) { bottom: 8px; right: 8px; }
.theme-c .plate-head { font: 600 .92rem/1 var(--f-head); padding: 4px 6px 10px; border-bottom: 2px solid var(--strong); }
.theme-c .plate-name { font-size: 1.6rem; text-transform: none; letter-spacing: 0; }
.theme-c .plate-specs { background: transparent; border: 0; padding: 0; }
.theme-c .amt { font-size: 1.8rem; background: var(--strong); color: var(--accent); padding: 5px 9px 3px; border-radius: var(--r-sm); }

/* ---------- tables ---------- */
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 22px; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font: 600 .74rem/1.2 var(--f-body); text-transform: var(--label-case); letter-spacing: var(--label-track); color: var(--text-2); background: var(--surface-2); }
.theme-c th { font: 600 .84rem/1.2 var(--f-head); background: transparent; border-bottom: 2px solid var(--strong); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:hover td { background: var(--hover); }
.card table th { background: transparent; }
tfoot td { font-weight: 600; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 .72rem/1 var(--f-body); letter-spacing: .03em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); white-space: nowrap; border: 1px solid var(--border); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.theme-c .badge { border-radius: 2px; letter-spacing: .06em; }
.theme-c .badge::before { display: none; }
.b-ok, .b-active, .b-paid, .b-approved, .b-done, .b-sent { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.b-warn, .b-unpaid, .b-review, .b-pending, .b-provisioning, .b-pending_payment, .b-requested, .b-open { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.b-err, .b-suspended, .b-rejected, .b-failed, .b-denied, .b-refunded { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }

/* ---------- messages ---------- */
.flash { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 18px; border: 1px solid; font-size: .94rem; }
.flash-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.flash-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.flash-err { background: var(--err-bg); border-color: var(--err-line); }
.theme-c .flash { border-width: 0 0 0 5px; }
.theme-c .flash-ok { border-color: var(--ok); } .theme-c .flash-warn { border-color: var(--accent-hover); } .theme-c .flash-err { border-color: var(--err); }
.notice { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 14px; font-size: .94rem; }
.notice a { font-weight: 600; }
.notice form { display: inline; }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.theme-c .notice { background: var(--strong); color: #FFFFFF; border: 0; }
.theme-c .notice a, .theme-c .notice .linkbtn { color: var(--accent); }

/* ---------- forms ---------- */
.field { margin-bottom: 15px; }
.field label, .label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.field .hint { font-size: .84rem; color: var(--text-2); margin-top: 5px; }
.field .error { font-size: .86rem; color: var(--err); margin-top: 5px; font-weight: 500; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=search], input:not([type]), select, textarea {
  width: 100%; font: inherit; font-size: .95rem; padding: 10px 12px; min-height: 42px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); }
input:not([type]), input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search] { line-height: 1.25; }   /* same 42px as selects and buttons */
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; border-color: var(--focus); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--err); }
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.code-input { font: 600 1.6rem/1 var(--f-mono) !important; letter-spacing: .3em; text-align: center; }
.hp { position: absolute; left: -5000px; }
fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px 6px; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0 6px; }
.addon { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.addon:last-child { border-bottom: 0; }
.addon input[type=number] { width: 84px; }

/* ---------- summaries ---------- */
.sum { margin: 0; }
.sum div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sum div:last-child { border-bottom: 0; }
.sum dt { color: var(--text-2); }
.sum dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sum .total dt, .sum .total dd { color: var(--text); font: 700 1.2rem/1.2 var(--f-head); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.secret { font: 600 1.05rem/1.4 var(--f-mono); background: var(--code-bg); color: var(--code-text); padding: 10px 14px; border-radius: var(--r-sm); display: inline-block; word-break: break-all; user-select: all; }
.codes { columns: 2; font: 600 1rem/1.9 var(--f-mono); padding: 12px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); list-style: none; margin: 0 0 14px; }
.qr { background: #fff; padding: 12px; display: inline-block; border: 1px solid var(--border); border-radius: var(--r-md); }
.qr img, .qr canvas { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.empty { text-align: center; padding: 36px 20px; color: var(--text-2); }
.pay-options { display: grid; gap: 10px; }
.pay-options .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.3; }
.pay-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-note { font-weight: 500; font-size: .8rem; opacity: .8; }
.foot { border-top: 1px solid var(--border); padding: 22px 0 32px; color: var(--text-2); font-size: .85rem; }
.foot a { color: var(--text); }
.foot-social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-2); }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--text); border-color: var(--text-2); background: var(--surface-2, transparent); }
.foot-social svg { width: 17px; height: 17px; }
.danger-zone { border-color: var(--err-line); }
details summary { cursor: pointer; font-weight: 600; }
.risk li { margin: 2px 0; }
.center-card { margin: 24px auto; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.split > div > .plate { margin-bottom: 22px; }
.card > input[type=hidden]:first-child + h2, .card > input[type=hidden]:first-child + h3 { margin-top: 0; }
.credit-line { margin-top: 18px; }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctl { border-top: 1px solid var(--border); padding: 12px 0; }
.ctl > summary { font: 600 1rem/1.3 var(--f-body); padding: 4px 0; }
.ctl[open] > summary { margin-bottom: 8px; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.radio input { margin-top: 5px; flex: none; }
.keys { margin: 10px 0; }
.rdns-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rdns-row:last-child { border-bottom: 0; }
.rdns-row label { overflow-wrap: anywhere; font-weight: 500; }
@media (max-width: 560px) { .rdns-row { grid-template-columns: 1fr; } }
.secret-card { border-color: var(--accent); border-width: 2px; }
.page-head .actions { margin-top: 0; }
form.inline { display: inline; margin-left: 10px; }
.thread { display: grid; gap: 14px; margin-bottom: 22px; }
.msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--shadow); }
.msg-staff { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.msg-internal { background: var(--warn-bg); border-color: var(--warn-line); }
.msg header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.msg-body { overflow-wrap: anywhere; }
.att { margin: 10px 0 0; padding-left: 18px; }
main .linkbtn { color: var(--text); padding: 0; }
main .linkbtn:hover { color: var(--accent-text); }
.notice .linkbtn { font-weight: 600; }
.card form + h3, .card h3 { margin-top: 1.2em; }

/* ---------- settings ---------- */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
.settings-layout > * { min-width: 0; }
.settings-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; box-shadow: var(--shadow); }
.settings-nav a { padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-weight: 500; font-size: .92rem; }
.settings-nav a:hover { background: var(--hover); }
.settings-nav a[aria-current] { background: var(--cur-bg); color: var(--cur-text); font-weight: 600; }
.theme-c .settings-nav a[aria-current] { background: var(--strong); color: #FFFFFF; }
.settings-nav-h { margin: 10px 10px 4px; font: 600 .7rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.settings-nav-h:first-child { margin-top: 4px; }
.settings-group { border: 1px solid var(--border); background: var(--surface); }
.settings-group legend { font-weight: 700; font-size: 1rem; padding: 0 6px; }
.switch-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.hookbox { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 14px; overflow-wrap: anywhere; }
.sel { user-select: all; }
.test-row { margin-top: 12px; display: grid; gap: 8px; justify-items: start; }
.test-row .flash { margin: 0; width: 100%; }
.w-sm { max-width: 180px; }
/* Save bar: a plain button at the end of the form; once something is changed it becomes a solid bar that stays in view. */
.save-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; }
.save-bar-msg, .save-undo { display: none; }
.save-bar-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.save-bar.is-dirty { position: sticky; bottom: 14px; z-index: 20; justify-content: space-between; padding: 10px 12px 10px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(15, 18, 21, .16);
  animation: save-bar-in .18s ease-out; }
.save-bar.is-dirty .save-bar-msg { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: .92rem; }
.save-bar.is-dirty .save-undo { display: inline-flex; }
.save-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); flex: none; }
@keyframes save-bar-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .save-bar.is-dirty { animation: none; } }
@media (max-width: 600px) { .save-bar.is-dirty { flex-direction: column; align-items: stretch; gap: 8px; bottom: 8px; padding: 10px 12px; } .save-bar.is-dirty .save-bar-btns .btn { flex: 1; justify-content: center; } }
.status-ok { color: var(--ok); font-weight: 600; } .status-warn { color: var(--warn); font-weight: 600; } .status-err { color: var(--err); font-weight: 600; }
@media (max-width: 820px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } .settings-nav-h { width: 100%; } }
.inline-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline-form select { width: auto; }
.w-xs { max-width: 80px; }
.mt { margin-top: 18px; }
td.has-error input { border-color: var(--err); }

/* activity log: fixed-height scroll box, sticky header, details never widen the page */
.audit-wrap { max-height: 620px; overflow: auto; }
.audit-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.theme-c .audit-table thead th { background: var(--surface); }
.audit-table td.audit-meta-cell { width: 34%; min-width: 220px; max-width: 420px; }
.audit-meta { margin: 0; max-height: 7.5em; max-width: 420px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font: .76rem/1.45 var(--f-mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; }
.robot-edit { margin-top: 8px; } .robot-edit summary { cursor: pointer; } .robot-edit form { margin-top: 10px; max-width: 420px; }
.mt-xs { margin-top: 6px; } .page-head.mt { margin-top: 22px; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.rl-status { min-height: 1.4em; margin: -4px 0 12px; }
.manage-grid { display: grid; gap: 10px; }
.manage-grid details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface); }
.manage-grid details[open] { background: var(--surface-2); }
.manage-grid summary { cursor: pointer; }
.manage-grid form { margin-top: 10px; }
.manage-grid .danger-zone { border-color: var(--err-line); }
.inv-actions { margin: -6px 0 18px; }

/* ---------- theme picker (Account / My account / Settings) ---------- */
.theme-options { display: grid; gap: 10px; margin-bottom: 16px; }
.theme-opt { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.theme-opt:hover { border-color: var(--border-strong); }
.theme-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-opt input { width: 18px; height: 18px; margin: 0; }
.theme-opt b { display: block; }
.theme-swatch { display: inline-grid; grid-template-columns: 14px 26px; grid-template-rows: 9px 9px; gap: 3px; padding: 5px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); }
.theme-swatch i { display: block; border-radius: 2px; }
.theme-swatch i:nth-child(1) { grid-row: 1 / 3; }
.sw-a { background: #F6F7F9; } .sw-a i:nth-child(1) { background: #FFFFFF; box-shadow: 0 0 0 1px #E5E7EB; } .sw-a i:nth-child(2) { background: #FFFFFF; box-shadow: 0 0 0 1px #E5E7EB; } .sw-a i:nth-child(3) { background: #F2B300; }
.sw-b { background: #0F1215; } .sw-b i:nth-child(1) { background: #14181C; } .sw-b i:nth-child(2) { background: #22282E; } .sw-b i:nth-child(3) { background: #F2B300; }
.sw-c { background: #E7E9EA; } .sw-c i:nth-child(1) { background: #23282B; } .sw-c i:nth-child(2) { background: #F6F7F7; box-shadow: 0 0 0 1px #CDD1D3; } .sw-c i:nth-child(3) { background: #F2B300; }

/* ---------- theme character ---------- */
/* A: staff sidebar gets a small "Staff" chip in yellow so the two areas are never confused */
.is-staff .logo .tag { background: var(--accent-soft); color: var(--accent-text); }
/* B */
.theme-b .logo-mark .lm-body { fill: #F2B300; } .theme-b .logo-mark .lm-hi { fill: #14181C; } .theme-b .logo-mark .lm-line { fill: #14181C; opacity: .55; } .theme-b .logo-mark .lm-dot { fill: #14181C; }
.theme-b .logo .tag { background: #22282E; color: var(--text-2); }
.theme-b.is-staff .logo .tag { background: var(--accent-soft); color: var(--accent-text); }
.theme-b .card, .theme-b .table-wrap, .theme-b .plate, .theme-b .stat { border-color: var(--border); }
.theme-b .qr { background: #FFFFFF; }
/* C */
.theme-c .logo { font: 700 1.3rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.theme-c .logo-mark .lm-body { fill: #3A4146; } .theme-c .logo-mark .lm-line { fill: #8E9296; }
.theme-c .logo .tag { background: transparent; color: var(--accent); padding: 0; }
.theme-c .top { border-bottom: 4px solid var(--accent); }
.theme-c .nav a { font: 600 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; border-radius: 0; }
.theme-c .nav-h { font-family: var(--f-head); font-size: .8rem; letter-spacing: .14em; }
@media (min-width: 901px) {
  .theme-c.layout-top .top-row { min-height: 68px; align-items: stretch; }
  .theme-c.layout-top .logo, .theme-c.layout-top .top-actions { align-self: center; }
  .theme-c.layout-top .nav-panel { align-items: stretch; }
  .theme-c.layout-top .nav { align-items: stretch; }
  .theme-c.layout-top .nav a { padding: 0 14px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
  .theme-c.layout-top .nav a[aria-current="page"] { background: transparent; border-bottom-color: var(--accent); }
  .theme-c.layout-top .nav a:hover { background: transparent; color: #FFFFFF; }
  .theme-c.layout-side .top { border-bottom: 0; }
  .theme-c.layout-side .top-row { padding: 0 0 18px; gap: 14px; }
  .theme-c.layout-side .logo { min-height: 68px; padding: 0 20px; border-bottom: 4px solid var(--accent); }
  .theme-c.layout-side .nav a { padding: 11px 20px; border-left: 4px solid transparent; }
  .theme-c.layout-side .nav a[aria-current="page"] { border-left-color: var(--accent); }
  .theme-c.layout-side .nav-h { margin: 14px 24px 6px; }
  .theme-c.layout-side .top-actions { margin: 0 14px; }
  .theme-c.layout-side .side-help { margin-left: 14px; margin-right: 14px; background: #30373B; border-color: #3A4247; }
}
.theme-c .avatar { border-radius: 3px; }
.theme-c .btn { font-weight: 700; border-width: 2px; }
.theme-c .btn-ghost { background: transparent; }
.theme-c .btn-ghost:hover { color: #FBFBFB; }
.theme-c .card h2, .theme-c main > .wrap > h2 { letter-spacing: .03em; }
.theme-c .cart-pill { border-radius: 3px; }

/* ---------- tabs, reports, ratings ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: -4px 0 22px; }
.tabs a { padding: 10px 14px; text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.theme-c .tabs a { font: 600 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; border-bottom-width: 3px; }
.filters { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; padding-bottom: 6px; }
.filters .field { flex: 1 1 170px; margin-bottom: 12px !important; }
.scroll-x { overflow-x: auto; position: relative; }
.filters .field:last-child { flex: 0 0 auto; }
.filters > .check { min-height: 42px; align-items: center; margin: 0 0 12px; white-space: nowrap; }   /* lines up with the boxes and buttons */
.filters > .check input { margin-top: 0; }
.stars { color: var(--accent); letter-spacing: .06em; font-size: 1.15rem; line-height: 1; }
.theme-a .stars, .theme-c .stars { color: #C98F00; }
.stars-sm { font-size: .95rem; }
.stars-low { color: var(--err) !important; }
.stat .stars { font-size: 1rem; vertical-align: middle; }
.rate-show { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rate-show .stars { font-size: 1.4rem; }
.rate-comment { margin: 0 0 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; font-size: .93rem; }
.rate-low { border-color: var(--err-line); }
.rate-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0 0 14px; }
.rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-stars label { cursor: pointer; font-size: 2rem; line-height: 1; padding: 2px 3px; color: var(--border-strong); transition: color .1s, transform .1s; }
.rate-stars label:hover, .rate-stars label:hover ~ label, .rate-stars input:checked ~ label { color: var(--accent); }
.rate-stars input:checked + label { transform: scale(1.08); }
.rate-stars input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 4px; }
.dist-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 6.5em; gap: 12px; align-items: center; padding: 7px 0; }
.dist-n { text-align: right; font-weight: 600; }
.dist-bar { width: 100%; height: 10px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.dist-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--border); }
.dist-bar::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.dist-bar::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.dist-bar.dist-1::-webkit-progress-value, .dist-bar.dist-2::-webkit-progress-value { background: var(--err); }
.dist-bar.dist-1::-moz-progress-bar, .dist-bar.dist-2::-moz-progress-bar { background: var(--err); }
.theme-c .dist-bar, .theme-c .dist-bar::-webkit-progress-bar, .theme-c .dist-bar::-webkit-progress-value { border-radius: 0; }
tr.row-low td:first-child { box-shadow: inset 3px 0 0 var(--err); }
td.rate-c { min-width: 240px; max-width: 460px; overflow-wrap: anywhere; font-size: .9rem; }
@media (max-width: 560px) { .dist-row { grid-template-columns: 7em minmax(0, 1fr) 5.5em; } }

.reply-foot { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; justify-content: space-between; }
.reply-foot .field { flex: 1 1 260px; }
.reply-card textarea { min-height: 140px; }

.b-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.b-hold { background: var(--surface-2); color: var(--text-2); border-style: dashed; border-color: var(--border-strong); }
.b-closed { background: var(--surface-2); color: var(--text-2); }
.about-bar { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: -6px 0 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.about-bar .ico { margin-top: 3px; color: var(--accent-text); width: 20px; height: 20px; }
.about-bar a { text-decoration: none; } .about-bar a:hover { text-decoration: underline; }
.about-none { background: transparent; box-shadow: none; border-style: dashed; padding: 9px 14px; }
.about-none .ico { color: var(--text-2); margin-top: 0; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -10px 0 16px; font-size: .9rem; }
.ticket-meta .muted { margin-right: 4px; }
.inline-take { display: inline; margin-left: 8px; }
.inline-take .linkbtn { font-size: .88rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.chips-l { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); min-width: 92px; }
.chip { font-size: .85rem; text-decoration: none; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.chip:hover { border-color: var(--border-strong); }
.chip[aria-current] { background: var(--strong); border-color: var(--strong-border); color: var(--on-strong); }
.theme-c .chip { border-radius: 3px; }
.chips + .table-wrap { margin-top: 14px; }
.tab-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.55; }
td.td-svc { min-width: 140px; }
.msg-edit, .msg-history { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.msg-edit summary, .msg-history summary { color: var(--text-2); font-weight: 600; }
.msg-edit form { margin-top: 10px; }
.msg-old { margin-top: 8px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); overflow-wrap: anywhere; font-size: .92rem; }

.secure-box { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); margin: 0 0 16px; }
.secure-box > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.secure-box > summary::-webkit-details-marker { display: none; }
.secure-box > summary::after { content: "+"; margin-left: auto; font-weight: 700; color: var(--text-2); }
.secure-box[open] > summary::after { content: "–"; }
.secure-box > summary .ico { color: var(--accent-text); width: 17px; height: 17px; }
.secure-box[open] { border-color: var(--accent); }
.secure-inner { padding: 0 14px 4px; }
.secure-inner textarea { min-height: 60px; }
.secrets-card { border-color: var(--accent); }
.secrets-card h2 { display: flex; align-items: center; gap: 8px; }
.secrets-card h2 .ico { color: var(--accent-text); }
.secret-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.secret-row:last-of-type { border-bottom: 0; }
.secret-head { margin-bottom: 6px; }
.secret-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.secret-actions form { margin: 0; }
.secret-gone .secret-head strong { color: var(--text-2); text-decoration: line-through; }
.secret-kv { grid-template-columns: max-content minmax(0, 1fr); align-items: center; margin-bottom: 6px; }
.secret-kv .secret { font-size: .92rem; padding: 6px 10px; }

/* ticket list */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.toolbar label { margin: 0; }
.toolbar select { width: auto; min-width: 170px; }
.tb-search { position: relative; flex: 1 1 280px; }
.tb-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); width: 16px; height: 16px; pointer-events: none; }
.tb-search input { padding-left: 36px; }
.tab-n-quiet { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.tickets-table td { vertical-align: middle; padding-top: 13px; padding-bottom: 13px; }
.tickets-table th:first-child, .tickets-table td:first-child { padding-left: 20px; }
.tickets-table th:last-child, .tickets-table td:last-child { padding-right: 20px; }
.tk-main { min-width: 280px; }
.tk-main { max-width: 520px; }
.tk-subject { font-weight: 600; text-decoration: none; color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tk-subject:hover { text-decoration: underline; text-underline-offset: 3px; }
.tk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 0 8px 2px 0; vertical-align: middle; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 3px; font-size: .8rem; color: var(--text-2); }
.tk-svc { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-svc .ico { width: 13px; height: 13px; flex: none; }
.tk-pri { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; padding: 1px 6px; border-radius: 4px; }
.tk-high { background: var(--warn-bg); color: var(--warn); }
.tk-urgent { background: var(--err-bg); color: var(--err); }
.stars-xs { font-size: .8rem; letter-spacing: .02em; }
.tk-client { max-width: 240px; }
.tk-name, .tk-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-name { font-size: .9rem; }
.tk-email { font-size: .8rem; color: var(--text-2); }
.tk-who { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.avatar-sm { width: 26px; height: 26px; font-size: .72rem; background: var(--surface-2); border-color: var(--border); color: var(--text); }
@media (max-width: 700px) {
  .toolbar label:not(.tb-search) { flex: 1 1 40%; } .toolbar select { min-width: 0; width: 100%; } .toolbar .btn { flex: 1 1 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tabs a { white-space: nowrap; }
  .tickets-table thead { display: none; }
  .tickets-table, .tickets-table tbody { display: block; }
  .tickets-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .tickets-table tr:last-child { border-bottom: 0; }
  .tickets-table td { display: block; border: 0; padding: 0 !important; }
  .tickets-table .tk-main { grid-column: 1 / -1; min-width: 0; }
  .tickets-table .tk-client { max-width: none; min-width: 0; }
  .tickets-table td.empty { grid-column: 1 / -1; padding: 24px 0 !important; }
  .tickets-table tbody tr:hover td { background: transparent; }
  .tickets-table td:nth-child(2) { order: 1; } .tickets-table td:nth-child(5) { order: 2; align-self: center; }
  .tickets-table td:nth-child(3) { order: 3; } .tickets-table td:nth-child(4) { order: 4; justify-self: end; }
}

.sum .sum-discount dt, .sum .sum-discount dd { color: var(--ok); }
.coupon-note { margin: 8px 0 0; }
.coupon-box { margin: 14px 0 16px; padding-top: 12px; border-top: 1px dashed var(--border); }
.coupon-form summary { color: var(--text-2); font-weight: 600; }
.coupon-row { display: flex; gap: 8px; margin-top: 10px; }
.coupon-row input { text-transform: uppercase; font-family: var(--f-mono); letter-spacing: .04em; }
.coupon-applied { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px dashed var(--ok); border-radius: var(--r-sm); background: var(--ok-bg); }
.coupon-applied form { margin: 0; }
.coupon-bad { border-color: var(--err); background: var(--err-bg); }
.coupon-wait { border-color: var(--border-strong); background: var(--info-bg); }
.coupon-code { font: 700 .95rem/1 var(--f-mono); letter-spacing: .05em; }

.coupon-input { text-transform: uppercase; letter-spacing: .05em; }
.coupon-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin-top: 6px; max-height: 260px; overflow: auto; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.coupon-products .check { margin: 6px 0; }
.coupon-code-h { font-family: var(--f-mono); letter-spacing: .04em; text-transform: none; }
.stat b.stat-word { font-size: 1.3rem; }

.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.aff-link-card { border-color: var(--accent); }
.aff-link-row { display: flex; gap: 8px; margin-bottom: 10px; }
.aff-link-row input { flex: 1; min-width: 0; font-size: .95rem; }
.aff-link-card p { overflow-wrap: anywhere; }
.aff-chart { width: 100%; height: 140px; display: block; margin-bottom: 8px; }
.aff-chart .bar-c { fill: var(--accent); }
.aff-chart .bar-s { fill: var(--info); }
.aff-chart .axis { stroke: var(--border); stroke-width: 1; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
.key:first-child { margin-left: 0; }
.key-c { background: var(--accent); } .key-s { background: var(--info); }
.sum-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; flex-wrap: wrap; }
.sum-line:last-child { border-bottom: 0; }

.payout-act { display: flex; gap: 6px; margin-bottom: 6px; }
.payout-act input { min-width: 170px; min-height: 34px; padding: 6px 10px; }

.auto-cards { margin: 16px 0 18px; }
.auto-card { display: flex; align-items: stretch; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.auto-card .auto-ico { display: flex; align-items: center; justify-content: center; width: 64px; flex: none; font: 700 1.6rem/1 var(--f-body); color: #fff; }
.auto-card .auto-ico .ico { width: 26px; height: 26px; }
.auto-card > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.auto-card b { font: 700 1.35rem/1.1 var(--f-head); }
.auto-card span:not(.auto-ico) { font-size: .82rem; color: var(--text-2); }
.auto-ok .auto-ico { background: #2F9E5B; } .auto-err .auto-ico { background: var(--err); }
.auto-mid .auto-ico { background: #D98E04; } .auto-idle .auto-ico { background: #7B858C; }
.auto-grid { margin-bottom: 8px; }
.auto-stat b { font-size: 1.5rem; }
.auto-failed { border-color: var(--err-line); background: var(--err-bg); }
.auto-failed b { color: var(--err); }
.cron-line summary { cursor: pointer; }

/* print stays plain whatever the theme */
@media print { .top, .foot, .nav-toggle { display: none !important; } .layout-side .app { display: block; } body { background: #fff; } }
.ctl-block { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.cn-found { border: 1px dashed var(--border); border-radius: 12px; padding: 10px 14px 12px; margin-top: 8px; }
.cn-found .kv { margin-top: 0; margin-bottom: 14px; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }   /* v0.48.2: side by side, with room */
.cn-found .check { margin-top: 10px; }
.cn-off summary { cursor: pointer; color: var(--text-2); }
.ctl-block h3 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ctl-row select { flex: 1 1 220px; width: auto; }
.ctl-row .check { margin: 0; align-items: center; flex: 1 1 220px; }
.ctl-row .check input { margin-top: 0; }
.ctl-row .btn { flex: none; }
.funds-box h3 { margin-bottom: 4px; }
.funds-form { margin: 12px 0 6px; }
.funds-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.funds-row input { flex: 1 1 140px; min-width: 0; padding-left: 28px; }
.funds-row { position: relative; }
.funds-cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.funds-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button.chip { cursor: pointer; font-family: var(--f-body); font-weight: 600; }
.funds-bal { float: right; font: 700 1.3rem/1 var(--f-head); }
.ledger dd { white-space: nowrap; }
.captcha-box { margin: 4px 0 16px; min-height: 65px; }
.pay-due { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--warn-line, #F0D58A); background: var(--warn-bg, #FFF8E1); border-radius: var(--r-md); }
.pay-due > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay-due small { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.pay-due b { font: 700 1.6rem/1.1 var(--f-head); }
.pay-due span { font-size: .9rem; }
.pay-due .btn { flex: none; }
.pay-due-sm { padding: 12px 16px; }
@media (max-width: 560px) { .pay-due .btn { width: 100%; } }
/* Account: tabs on the page + sub-items under Account in the menu */
.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll a { white-space: nowrap; flex: none; }
.subnav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 21px; padding-left: 12px; border-left: 1px solid var(--hdr-border); }
.nav .subnav a { padding: 7px 10px; font-size: .88rem; font-weight: 500; }
.nav .subnav a[aria-current="page"] { background: transparent; color: var(--hdr-strong); font-weight: 700; }
.nav .subnav a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 2px; flex: none; }
.nav a[aria-current="page"] + .subnav { margin-top: 4px; }
@media (min-width: 901px) { .layout-top .subnav { display: none; } }
.theme-c .nav .subnav a { font: 500 .88rem/1.2 var(--f-body); text-transform: none; letter-spacing: 0; border-left: 0; padding: 7px 10px; }
@media (max-width: 480px) { .tabs-scroll { gap: 0; } .tabs-scroll a { padding: 10px 8px; font-size: .84rem; } }
/* Invoice list: every row the same height, buttons lined up on the right */
.inv-table td { vertical-align: middle; }
.inv-table td:first-child { white-space: nowrap; }
.inv-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; white-space: nowrap; margin: 0; }
.inv-table td.nowrap { white-space: nowrap; }
.inv-sub { display: none; }
@media (max-width: 640px) { .inv-table .col-date, .inv-table .col-wide { display: none; } .inv-table th, .inv-table td { padding-left: 10px; padding-right: 10px; }
  .inv-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: .8rem; color: var(--text-2); white-space: normal; } }
/* Continue with Google */
.btn-google { width: 100%; justify-content: center; gap: 10px; background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; font-weight: 600; }
.btn-google:hover { background: #F7F8F8; color: #1F1F1F; }
.g-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #F1F3F4; color: #1F1F1F; font: 700 .85rem/1 var(--f-body); }
.or-line { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-2); font-size: .82rem; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* server list */
.srv-table td { vertical-align: middle; }
.srv-table td.nowrap { white-space: nowrap; }
.srv-table .srv-name { max-width: 420px; }
.srv-sub-line { display: block; margin-top: 2px; font-size: .85rem; color: var(--text-2); }
.srv-table .badge { white-space: nowrap; }
.srv-mobile { display: none; }
@media (max-width: 760px) { .srv-table .col-date, .srv-table .col-wide, .srv-table .col-status { display: none; } .srv-table th, .srv-table td { padding-left: 10px; padding-right: 10px; }
  .srv-mobile { display: block; margin-top: 6px; } .srv-mobile-meta { display: block; margin-top: 6px; font-size: .8rem; color: var(--text-2); line-height: 1.45; } .srv-mobile-meta .mono { font-size: .78rem; } }
/* dashboard */
.stat-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-inv td.nowrap { white-space: nowrap; }
.dash-inv td:first-child { width: 40%; }
.dash-inv td.right { width: 1%; }
.dash-inv .badge { margin-left: 6px; vertical-align: 1px; }
.plate-specs dd.muted-val { color: var(--text-2); font-weight: 500; }
@media (max-width: 640px) { .dash-inv td:first-child { width: auto; } .dash-inv .inv-sub .badge { margin-left: 0; } }
.inline-form { display: inline; margin: 0 0 0 8px; }
.inline-form .linkbtn { padding: 0; color: var(--text); font-size: inherit; }
/* staff passkeys */
.btn-block { width: 100%; justify-content: center; }
.passkey-box .btn .ico { width: 20px; height: 20px; }
.passkey-box p { margin: 10px 0 0; text-align: center; }
.passkey-list { list-style: none; margin: 0 0 16px; padding: 0; }
.passkey-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.passkey-list li .ico { width: 18px; height: 18px; vertical-align: -3px; }
/* staff invoice page */
.inv-head { align-items: center; }
.inv-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin-bottom: 22px; }
.inv-facts > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-left: 1px solid var(--border); min-width: 0; }
.inv-facts > div:first-child { border-left: 0; }
.inv-facts span { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.inv-facts b, .inv-facts a { font-weight: 600; overflow-wrap: anywhere; }
.inv-facts small { color: var(--text-2); font-size: .82rem; overflow-wrap: anywhere; }
.inv-fact-due b { font-size: 1.15rem; }
@media (max-width: 900px) { .inv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv-facts > div { border-left: 0; border-top: 1px solid var(--border); } .inv-facts > div:nth-child(-n+2) { border-top: 0; } .inv-facts > div:nth-child(even) { border-left: 1px solid var(--border); } }
.inv-lines td, .pay-table td { vertical-align: middle; }
.inv-lines tfoot td { padding-top: 7px; padding-bottom: 7px; border: 0; }
.inv-lines tfoot .t-sub td { border-top: 1px solid var(--border); padding-top: 12px; }
.inv-lines tfoot .t-total td { font-weight: 700; }
.inv-lines tfoot .t-due td { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--border); padding-top: 12px; padding-bottom: 12px; }
.inv-lines td.nowrap, .pay-table td.nowrap, .inv-side td.nowrap { white-space: nowrap; }
code.ref { font-size: .82rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.pay-method { min-width: 170px; }
.pay-note { font-style: italic; }
.refund-card > summary, .dz-del > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-weight: 400; }
.refund-card > summary::-webkit-details-marker { display: none; }
.refund-card[open] > summary .btn { visibility: hidden; }
.refund-card form { margin-top: 12px; }
.refund-card:target, .refund-card[open] { border-color: var(--border-strong); }
@media (max-width: 640px) { .split .col-wide, .pay-table .col-act { display: none; } .pay-method { min-width: 0; } }
@media (max-width: 900px) { .inv-fact-due { grid-column: span 2; border-left: 0 !important; } }
.inv-side .card { margin-bottom: 18px; }
.inv-side .card h2 { font-size: 1.1rem; }
.dz-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dz-row { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.dz-del > summary { list-style: none; cursor: pointer; }
.dz-del > summary::-webkit-details-marker { display: none; }
.dz-del[open] > summary .btn { visibility: hidden; }
.dz-del form { margin-top: 12px; }
/* invoice editor */
.edit-lines input[type=text] { width: 100%; }
.edit-lines input.amount { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.edit-lines td { vertical-align: top; }
.edit-lines tr.is-removed td:first-child input, .edit-lines tr.is-removed input.amount { text-decoration: line-through; opacity: .5; }
.edit-lines tr.has-error input { border-color: var(--err); }
.edit-lines tfoot td { border: 0; padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.edit-lines tfoot .t-sub td { border-top: 1px solid var(--border); padding-top: 12px; }
.edit-lines tfoot .t-total td { font-weight: 700; }
.check-inline { display: inline-flex; padding: 10px 6px; cursor: pointer; }
.edit-notes { margin: 12px 0 0; padding-left: 18px; color: var(--text-2); }
.edit-notes li { margin-bottom: 6px; }
.mt-sm { margin-top: 10px; text-align: center; }
/* "What Hetzner charges" on the hand-over form: left-aligned like the fields above it, space before the buttons */
.cost-box { margin: 4px 0 18px; text-align: left; }
.cost-box > summary { padding: 4px 0; }
.cost-box[open] > summary { margin-bottom: 10px; }
.inv-note { margin-top: 16px; }
.inv-note p { margin-top: 4px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 12px; }
.kyc-card h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kyc-ask { margin-top: 10px; }
.kyc-ask > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.kyc-ask .check { margin: 4px 0; }
.kyc-needs .label { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }
.kyc-ask .check { display: flex; align-items: flex-start; gap: 8px; }
.kyc-ask .check span { font-weight: 400; }
.kyc-ask .check input { margin-top: 3px; flex: none; }
.sum-total dt, .sum-total dd { font-size: 1.05em; }
.rr-dest { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.rr-dest legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.rr-dest .radio { font-weight: 400; cursor: pointer; }

.stack-btns { display: grid; gap: 10px; margin-top: 14px; }
.inv-side .card > .btn-block, .inv-side .card form > .btn-block, aside .card > .btn-block, aside .card form > .btn-block { margin-top: 12px; }
.danger-zone .btn-block { margin-top: 4px; }
.split > form.card textarea, #dispute-form textarea, .inv-side textarea { width: 100%; box-sizing: border-box; }
.inv-lines tfoot .right { text-align: right; }
.danger-zone p.small + .btn-block, .danger-zone p.small + form .btn-block { margin-top: 0; }
.inv-note.mt0 { margin-top: 0; }
.aside-btn { margin: 0 0 16px; }

/* Read-only staff (viewer role): hide everything that would change data; the server refuses it anyway. */
.ro-banner { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .92rem; }
.ro-banner svg { width: 18px; height: 18px; flex: none; }
.read-only form[method="post"]:not(.ro-ok) :is(button, [type="submit"]), .read-only button[form], .read-only .save-bar { display: none !important; }
.read-only form[method="post"]:not(.ro-ok) :is(input, select, textarea):disabled { opacity: .75; cursor: default; }
/* Radio / checkbox lists inside a form field: normal weight, aligned with the label column. */
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 4px; font-size: .9rem; }
.field label.check, .field label.radio { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .95rem; margin: 8px 0 0; cursor: pointer; }
.field label.check input[type="radio"], .field label.radio input { width: 16px; height: 16px; margin-top: 3px; flex: none; }

/* Staff accounts list */
.staff-list { padding: 0; }
.staff-row { display: grid; grid-template-columns: minmax(150px, 1fr) 214px 140px 118px 112px; gap: 18px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--border); }
.staff-row:first-child { border-top: 0; }
.staff-row.is-off { opacity: .65; }
.sr-k { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.sr-who { padding-top: 2px; overflow-wrap: anywhere; }
.sr-acts { position: relative; padding-top: 18px; text-align: right; }
.role-form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin: 0; }
.role-form select { width: 116px; min-width: 0; padding-top: 5px; padding-bottom: 5px; min-height: 34px; }
.staff-manage { display: inline-block; text-align: left; }
.staff-manage > summary { list-style: none; cursor: pointer; }
.staff-manage > summary::-webkit-details-marker { display: none; }
.staff-manage > summary::after { content: '\25BE'; font-size: .8em; margin-left: 2px; }
.staff-acts { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 6px; width: 170px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.staff-acts form { margin: 0; }
.staff-acts .btn { width: 100%; }
@media (max-width: 1440px) { .staff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sr-acts { padding-top: 0; text-align: left; } .staff-acts { left: 0; right: auto; } }
.tight { margin: 0; padding-left: 18px; } .tight li { margin: 0 0 6px; }
.section-head { align-items: flex-end; } .section-head > .btn { margin-bottom: 12px; }

/* ---------- Staff dashboard widgets ---------- */
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dash-quick .stat b { font-size: 1.45rem; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 18px; min-width: 0; }
.widget { padding: 18px 20px; margin: 0; }
.widget-flush { padding-bottom: 0; }
.widget-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 14px; }
.widget-head h2 { margin: 0; font-size: 1.02rem; }
.widget-foot { margin: 0; padding: 10px 0 14px; border-top: 1px solid var(--border); }
.seg { display: inline-flex; border: 1px solid var(--ghost-border); border-radius: var(--r-sm); overflow: hidden; }
.seg a { padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--text-2); text-decoration: none; border-left: 1px solid var(--ghost-border); background: var(--surface); }
.seg a:first-child { border-left: 0; }
.seg a:hover { background: var(--ghost-hover); color: var(--text); }
.seg a[aria-current="page"] { background: var(--cur-bg); color: var(--cur-text); }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; color: var(--text-2); margin-bottom: 6px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ch-legend b { color: var(--text); }
.ch-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-new { background: var(--text-2); opacity: .35; }
.lg-act { background: var(--accent); }
.lg-inc { background: var(--ok); height: 3px !important; border-radius: 2px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-base { stroke: var(--border-strong); stroke-width: 1; }
.ch-axis { fill: var(--text-2); font: 11px var(--f-body); }
.ch-new { fill: var(--text-2); opacity: .35; }
.ch-act { fill: var(--accent); }
.ch-inc { fill: none; stroke: var(--ok); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ch-dot { fill: var(--surface); stroke: var(--ok); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ch-hit { fill: transparent; }
.ch-hit:hover { fill: var(--text); opacity: .05; }
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -20px; border-top: 1px solid var(--border); }
.bill-grid > div { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bill-grid > div:nth-child(odd) { border-right: 1px solid var(--border); }
.bill-grid > .span-2 { grid-column: 1 / -1; border-right: 0; }
.bill-grid b { font: 700 1.3rem/1.15 var(--f-head); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.bill-grid span { font-size: .84rem; color: var(--text-2); }
.bill-grid .c-today { color: var(--ok); }
.bill-grid .c-month { color: var(--accent-text); }
.bill-grid .c-year { color: var(--info); }
.widget-flush .bill-grid { margin-bottom: 0; }
.widget-flush .bill-grid > div:nth-last-child(-n+2):not(.span-2), .widget-flush .bill-grid > .span-2:last-child { border-bottom: 0; }
.health { display: flex; align-items: center; gap: 12px; }
.health svg { width: 34px; height: 34px; flex: none; }
.health b { display: block; font: 700 1.35rem/1.2 var(--f-head); }
.health-ok svg, .health-ok b { color: var(--ok); }
.health-warn svg, .health-warn b { color: var(--warn); }
.health-err svg, .health-err b { color: var(--err); }
.meter { height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 14px 0 10px; }
.meter i { display: block; height: 100%; border-radius: 99px; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 8px, transparent 8px 16px); }
.meter-ok { background-color: var(--ok); } .meter-warn { background-color: #D9A400; } .meter-err { background-color: var(--err); }
.health-counts { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; font-weight: 600; }
.health-list { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 6px; }
.health-list li { position: relative; padding-left: 16px; color: var(--text-2); }
.health-list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.health-list li.hl-err::before { background: var(--err); }
.online { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.online-person { display: grid; justify-items: center; text-align: center; gap: 2px; width: 120px; }
.online-person b { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.avatar-lg { width: 52px; height: 52px; font-size: 1rem; position: relative; background: var(--surface-2); border-color: var(--border); color: var(--text); margin-bottom: 4px; }
.dot-on { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
@media (max-width: 1180px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .dash-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 760px) { .dash-quick { grid-template-columns: 1fr 1fr; } }
.dash-main > .widget, .dash-side > .widget { min-width: 0; overflow: hidden; }
.feed { list-style: none; margin: 0 -20px -18px; padding: 0; }
.feed li { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 10px 20px 10px 34px; border-top: 1px solid var(--border); position: relative; font-size: .9rem; }
.feed li::before { content: ''; position: absolute; left: 18px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.feed li.feed-bad::before { background: var(--err); }
.feed-what { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.feed-what b { font-weight: 600; }
.feed-meta { color: var(--text-2); font-size: .82rem; white-space: nowrap; }

.meter .w-0 { width: 0%; } .meter .w-5 { width: 5%; } .meter .w-10 { width: 10%; } .meter .w-15 { width: 15%; } .meter .w-20 { width: 20%; } .meter .w-25 { width: 25%; } .meter .w-30 { width: 30%; } .meter .w-35 { width: 35%; } .meter .w-40 { width: 40%; } .meter .w-45 { width: 45%; } .meter .w-50 { width: 50%; } .meter .w-55 { width: 55%; } .meter .w-60 { width: 60%; } .meter .w-65 { width: 65%; } .meter .w-70 { width: 70%; } .meter .w-75 { width: 75%; } .meter .w-80 { width: 80%; } .meter .w-85 { width: 85%; } .meter .w-90 { width: 90%; } .meter .w-95 { width: 95%; } .meter .w-100 { width: 100%; }
.chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1180px) {
  .dash-grid { display: flex; flex-direction: column; }
  .dash-main, .dash-side { display: contents; }
  .dash-grid > * > .widget { width: 100%; }
  .w-overview { order: 1; } .dash-side > .widget { order: 2; } .w-activity { order: 3; }
}
@media (max-width: 760px) { .chart { min-width: 600px; } }

/* ---------- Staff chat ---------- */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border: 0; border-radius: 999px;
  background: var(--strong); color: var(--on-strong); font: 600 .95rem/1 var(--f-body); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.chat-fab:hover { background: var(--strong-hover); }
.chat-fab[hidden] { display: none; }
.chat-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.chat-badge[hidden] { display: none; }
.chat-panel { position: fixed; right: 22px; bottom: 22px; z-index: 901; width: min(820px, calc(100vw - 44px)); height: min(600px, calc(100vh - 44px));
  display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.22); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel.chat-full { position: relative; right: auto; bottom: auto; width: 100%; height: calc(100vh - 190px); min-height: 480px; box-shadow: var(--shadow); z-index: 1; }
.chat-side { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 12px 8px; }
.chat-tools { display: inline-flex; align-items: center; gap: 2px; }
.chat-icon-btn { border: 0; background: transparent; color: var(--text-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.chat-icon-btn:hover { background: var(--ghost-hover); color: var(--text); }
.chat-winbtns { position: absolute; top: 12px; right: 10px; display: flex; gap: 2px; z-index: 4; background: var(--surface); border-radius: 8px; }
.chat-conv-head { padding-right: 140px !important; }
.chat-full .chat-conv-head { padding-right: 90px !important; }
.chat-status-btn { border: 1px solid var(--ghost-border); background: var(--surface); color: var(--text); border-radius: 99px; padding: 4px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
.chat-search-row { padding: 0 12px 8px; }
.chat-search { width: 100%; padding: 7px 10px; font-size: .86rem; border-radius: 8px; }
.chat-lists { overflow-y: auto; flex: 1; padding: 0 6px 10px; }
.chat-group { margin-top: 6px; }
.chat-group-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.chat-group-h .linkbtn { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.chat-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.chat-item:hover { background: var(--hover); }
.chat-item.is-cur { background: var(--cur-bg); }
.chat-item.has-unread b { font-weight: 800; }
.chat-item-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-item-t b { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-t small { font-size: .76rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hit .chat-item-t small { white-space: normal; }
.chat-hit-text { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-pad { padding: 4px 8px; }
.chat-av { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-av-room { border-radius: 9px; font-size: .95rem; color: var(--text-2); }
.chat-av-bot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: .66rem; }
.pres { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.chat-av .pres { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid var(--surface-2); }
.pres-online { background: #16A34A; } .pres-busy { background: #DC2626; } .pres-away { background: #F59E0B; } .pres-offline { background: #9CA3AF; }
.dot-on.st-busy { background: #DC2626; } .dot-on.st-away { background: #F59E0B; }
.chat-conv { display: flex; flex-direction: column; min-height: 0; position: relative; }
.chat-conv.is-empty > :not(.chat-empty) { display: none; }
.chat-empty { display: none; margin: auto; max-width: 340px; text-align: center; padding: 24px; color: var(--text-2); }
.chat-conv.is-empty .chat-empty { display: block; }
.chat-empty b { color: var(--text); }
.chat-conv-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); min-height: 56px; }
.chat-head-t { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.chat-head-t > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.chat-head-t b { font-size: .95rem; }
.chat-head-t small { font-size: .78rem; color: var(--text-2); }
.chat-head-t .chat-av .pres { border-color: var(--surface); }
.chat-back { display: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 2px; }
.chat-day { align-self: center; margin: 10px 0 6px; padding: 2px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: .72rem; color: var(--text-2); }
.chat-msg { display: flex; gap: 10px; padding: 5px 6px; border-radius: 10px; }
.chat-msg:hover { background: var(--hover); }
.chat-msg .chat-av { width: 30px; height: 30px; margin-top: 2px; }
.chat-col { min-width: 0; flex: 1; }
.chat-meta { display: flex; align-items: baseline; gap: 8px; font-size: .78rem; color: var(--text-2); flex-wrap: wrap; }
.chat-meta b { color: var(--text); font-size: .86rem; }
.chat-acts { margin-left: auto; display: none; gap: 8px; }
.chat-msg:hover .chat-acts, .chat-acts:focus-within { display: inline-flex; }
.chat-acts .linkbtn { font-size: .78rem; }
.chat-bubble { font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-text a { color: var(--info); }
.is-bot .chat-bubble { color: var(--text-2); }
.is-deleted .chat-bubble em { color: var(--text-2); font-size: .85rem; }
.mention { background: var(--info-bg); color: var(--info); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention-me { background: var(--accent-soft); color: var(--accent-text); }
.chat-card { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 2px; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface-2); text-decoration: none; color: var(--text); max-width: 440px; }
.chat-card:hover { border-color: var(--border-strong); }
.chat-card small { text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; font-weight: 700; color: var(--text-2); }
.chat-card b { font-size: .9rem; }
.chat-card span { font-size: .8rem; color: var(--text-2); }
.chat-img img { display: block; max-width: min(320px, 100%); max-height: 240px; border-radius: 8px; border: 1px solid var(--border); margin-top: 4px; }
.chat-filelink { display: inline-block; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; text-decoration: none; color: var(--text); background: var(--surface-2); }
.chat-seen { font-size: .72rem; color: var(--text-2); margin-top: 2px; }
.chat-compose { border-top: 1px solid var(--border); padding: 10px 12px; position: relative; }
.chat-compose[hidden] { display: none; }
.chat-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input { flex: 1; resize: none; min-height: 40px; max-height: 140px; padding: 9px 12px; font: inherit; font-size: .92rem; line-height: 1.4; border-radius: 10px; }
.chat-send { min-height: 40px; }
.chat-warn { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn); border-radius: 8px; font-size: .84rem; }
.chat-warn[hidden] { display: none; }
.chat-file-chip { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 8px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; }
.chat-file-chip[hidden] { display: none; }
.chat-mention-list { position: absolute; left: 52px; bottom: calc(100% - 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 200px; z-index: 3; }
.chat-mention-list[hidden] { display: none; }
.chat-mention-list li { padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: .88rem; display: flex; align-items: center; gap: 6px; }
.chat-mention-list li.is-cur, .chat-mention-list li:hover { background: var(--cur-bg); }
.chat-editbox { margin-top: 4px; }
.chat-edit { width: 100%; }
.chat-edit-btns { display: flex; gap: 6px; margin-top: 6px; }
.chat-toast { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); background: var(--strong); color: var(--on-strong); padding: 8px 14px; border-radius: 8px; font-size: .85rem; z-index: 5; max-width: 90%; }
.chat-toast[hidden] { display: none; }
.chat-dialog { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 6; padding: 16px; }
.chat-dialog-in { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; width: min(420px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 8px; }
.chat-dialog-in > b { font-size: 1rem; }
.chat-dialog-in input, .chat-dialog-in select, .chat-dialog-in textarea { width: 100%; }
.chat-dialog-in .label { margin: 6px 0 2px; }
.chat-pick { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.chat-pick .check { margin: 4px 0; }
@media (max-width: 760px) {
  .chat-fab { right: 14px; bottom: 14px; }
  .chat-fab-label { display: none; }
  .chat-panel:not(.chat-full) { inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .chat-panel { grid-template-columns: 1fr; }
  .chat-panel.chat-full { height: calc(100vh - 150px); }
  .chat-side { border-right: 0; }
  .chat-panel.show-conv .chat-side { display: none; }
  .chat-panel:not(.show-conv) .chat-conv { display: none; }
  .chat-back { display: inline-flex; }
}
.chat-panel .linkbtn { padding: 0 2px; color: var(--text-2); font-size: .8rem; } .chat-panel .linkbtn:hover { color: var(--text); } .chat-panel .linkbtn.danger { color: var(--err); }
.head-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn svg { width: 16px; height: 16px; }
.chat-side-head b { font-size: 1rem; }
.chat-attach { width: 36px; height: 40px; }
@media (max-width: 760px) { .chat-panel:not(.show-conv) .chat-winbtns { top: 10px; } .chat-conv-head { padding-right: 140px !important; } }
@media (max-width: 760px) { .chat-side-head { padding-right: 140px; } }
/* Bank transfer instructions */
.bt-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bt-k { font-size: .88rem; color: var(--text-2); }
.bt-v { display: flex; gap: 8px; align-items: center; min-width: 0; }
.bt-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px 0; font-size: .95rem; color: var(--text); }
.bt-in:focus { outline: none; }
.bt-big .bt-in { font-size: 1.25rem; font-weight: 700; }
.bt-card .notice { margin: 12px 0 4px; }
@media (max-width: 600px) { .bt-row { grid-template-columns: 1fr; gap: 2px; } }
.bt-paylink { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px; margin-bottom: 18px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-md); }
.bt-paylink > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }

/* Waiting for a Wise payment, then a countdown back to the invoice */
.wise-wait { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.wise-wait > div { display: flex; flex-direction: column; gap: 4px; }
.wise-spin { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: wise-spin 0.9s linear infinite; }
.wise-wait.is-done .wise-spin { animation: none; border-color: var(--ok); }
@keyframes wise-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wise-spin { animation-duration: 3s; } }
.wise-done { max-width: 560px; text-align: center; padding: 36px 24px; }
.wise-tick { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border: 2px solid var(--ok-line); }
.wise-done .btn { margin-top: 6px; }

/* Hand-over form: main action plus "save for later" side by side */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
@media (max-width: 520px) { .form-actions .btn { flex: 1 1 100%; } }

/* Staff → Emails */
.mail-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 16px; }
.mail-filters input[type="search"] { flex: 1 1 240px; min-width: 0; }
.mail-filters select { flex: 0 1 auto; width: auto; }
.mail-to { overflow-wrap: anywhere; max-width: 220px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; }
.mail-split { align-items: start; }
.mail-card { padding: 0; overflow: hidden; min-width: 0; }
.mail-frame { display: block; width: 100%; height: 78vh; min-height: 520px; border: 0; background: #fff; }
.mail-none { padding: 28px 24px; }
.mail-kv dd { overflow-wrap: anywhere; }
.mail-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
@media (max-width: 720px) { .mail-frame { height: 70vh; min-height: 420px; } }

/* Reports → Where customers come from */
.src-table .src-ch td { border-top: 1px solid var(--border-strong); }
.src-table .src-sub td { padding-top: 4px; padding-bottom: 4px; font-size: 0.875rem; color: var(--text-2); border-top: 0; }
.src-table .src-sub td:first-child { padding-left: 32px; }
.src-share { min-width: 120px; }
.src-share .src-meter { display: inline-block; width: 70px; margin: 0 6px 0 0; vertical-align: middle; height: 8px; }
.src-tip { margin-top: 22px; line-height: 1.8; }
.src-tip code { overflow-wrap: anywhere; }

/* Staff → Visitors */
.vis-pulse { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.vis-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok-line); animation: vis-pulse 2s infinite; }
@keyframes vis-pulse { 0% { box-shadow: 0 0 0 0 var(--ok-line); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .vis-dot { animation: none; } }
.stat-live b { color: var(--ok); }
.vis-live { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; margin-bottom: 26px; }
.vis-table th:nth-child(1) { width: 26%; } .vis-table th:nth-child(2) { width: 34%; }
.vis-table td { overflow-wrap: anywhere; }
.vis-people { min-width: 0; }
.vis-tw { max-height: 560px; overflow: auto; }
.vis-table tr.vis-hot td { background: var(--warn-bg); }
.vis-now { overflow-wrap: anywhere; }
.vis-now .badge { display: inline-block; margin-top: 4px; }
.vis-list { list-style: none; margin: 0; padding: 0; }
.vis-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.vis-list li:last-child { border-bottom: 0; }
.vis-k { overflow-wrap: anywhere; }
.vis-n { font-weight: 600; font-variant-numeric: tabular-nums; }
.vis-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.vis-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.vis-bar .w-0 { width: 0%; } .vis-bar .w-5 { width: 5%; } .vis-bar .w-10 { width: 10%; } .vis-bar .w-15 { width: 15%; } .vis-bar .w-20 { width: 20%; } .vis-bar .w-25 { width: 25%; } .vis-bar .w-30 { width: 30%; } .vis-bar .w-35 { width: 35%; } .vis-bar .w-40 { width: 40%; } .vis-bar .w-45 { width: 45%; } .vis-bar .w-50 { width: 50%; } .vis-bar .w-55 { width: 55%; } .vis-bar .w-60 { width: 60%; } .vis-bar .w-65 { width: 65%; } .vis-bar .w-70 { width: 70%; } .vis-bar .w-75 { width: 75%; } .vis-bar .w-80 { width: 80%; } .vis-bar .w-85 { width: 85%; } .vis-bar .w-90 { width: 90%; } .vis-bar .w-95 { width: 95%; } .vis-bar .w-100 { width: 100%; }
.vis-chart-card { margin-bottom: 18px; }
.vis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 26px; }
.vis-grid .card { margin: 0; min-width: 0; }
.vis-top h3, .vis-funnel h3 { margin-top: 0; }
.vis-step { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 6px 0; }
.vis-step .vis-bar { grid-column: 1 / 3; }
.vis-span { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1180px) { .vis-live { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .vis-table thead { display: none; }
  .vis-table, .vis-table tbody, .vis-table tr, .vis-table td { display: block; width: 100%; }
  .vis-table tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .vis-table td { padding: 2px 0; border: 0; }
  .vis-table td:first-child b::after { content: ""; }
  .vis-tw { max-height: none; }
}

/* Staff signed in as a client */
.imp-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--warn-bg); border-bottom: 2px solid var(--warn-line); color: var(--warn); font-size: .9rem; }
.imp-bar form { margin: 0; }
.loginas { display: inline-block; position: relative; }
.loginas > summary { list-style: none; cursor: pointer; }
.loginas > summary::-webkit-details-marker { display: none; }
.loginas-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, 86vw); text-align: left; margin: 0; }
.wise-pub { width: 100%; font-size: .75rem; margin: 8px 0 6px; resize: vertical; }

/* Staff → Live chat console */
.lc { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; height: calc(100vh - 190px); min-height: 520px; }
.lc .card { margin: 0; min-width: 0; }
.lc-side { overflow: auto; padding: 14px; }
.lc-group + .lc-group { margin-top: 14px; }
.lc-group h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
.lc-n:not(:empty) { background: var(--accent); color: var(--accent-text, #1a1a1a); border-radius: 99px; padding: 0 7px; font-size: .72rem; }
.lc-list { list-style: none; margin: 0; padding: 0; }
.lc-none { font-size: .85rem; color: var(--text-2); padding: 2px 0 6px; }
.lc-item { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font: inherit; color: inherit; }
.lc-item:hover { border-color: var(--border-strong); }
.lc-item.is-cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lc-item.is-waiting { background: var(--warn-bg); border-color: var(--warn-line); }
.lc-item-top { display: flex; justify-content: space-between; gap: 8px; }
.lc-item-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-item-meta, .lc-item-sub { font-size: .76rem; color: var(--text-2); white-space: nowrap; }
.lc-item-last { font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-dot { position: absolute; right: 8px; bottom: 8px; background: var(--accent); border-radius: 99px; font-size: .7rem; font-weight: 700; padding: 0 6px; }
.lc-main { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lc-empty { margin: auto; max-width: 420px; text-align: center; padding: 24px; }
.lc-conv { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lc-conv[hidden] { display: none; }
.lc-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.lc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lc-transfer { width: auto; padding: 4px 8px; font-size: .85rem; }
.lc-danger { color: var(--err); }
.lc-msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.lc-m { display: flex; flex-direction: column; max-width: 78%; }
.lc-m-visitor { align-self: flex-start; }
.lc-m-staff { align-self: flex-end; align-items: flex-end; }
.lc-m-system { align-self: center; max-width: 90%; }
.lc-bubble { padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.lc-m-visitor .lc-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.lc-m-staff .lc-bubble { background: var(--accent); color: var(--accent-text, #1a1a1a); border-bottom-right-radius: 4px; }
.lc-sys { font-size: .78rem; color: var(--text-2); background: var(--surface-2); border-radius: 99px; padding: 3px 10px; text-align: center; }
.lc-meta, .lc-seen { font-size: .72rem; color: var(--text-2); margin-top: 3px; }
.lc-seen { display: block; text-align: right; }
.lc-typing { padding: 4px 16px; }
.lc-compose { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.lc-compose[hidden] { display: none; }
.lc-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lc-tools select { width: auto; padding: 4px 8px; font-size: .85rem; }
.lc-row { display: flex; gap: 8px; align-items: flex-end; }
.lc-row textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; }
.lc-banner { margin: 0 12px 10px; padding: 8px 12px; border-radius: var(--r-sm); font-size: .88rem; }
.lc-banner.is-bad { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-line); }
.lc-banner.is-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.lc-info { overflow: auto; padding: 14px; }
.lc-info[hidden] { display: none; }
.lc-sec + .lc-sec { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.lc-sec h3 { margin: 0 0 8px; font-size: .95rem; }
.lc-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; margin: 0 0 5px; font-size: .86rem; }
.lc-kv span { color: var(--text-2); }
.lc-kv b { font-weight: 500; overflow-wrap: anywhere; }
.lc-asst { font-size: .82rem; margin: 6px 0; }
.lc-agents.is-on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.lc-agents.is-off { color: var(--warn); }
.lc-pagehead .head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1280px) { .lc { grid-template-columns: 250px minmax(0, 1fr); height: auto; } .lc-side, .lc-main { height: calc(100vh - 190px); min-height: 520px; } .lc-info { grid-column: 1 / -1; } .lc-info:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; } .lc-info .lc-sec + .lc-sec { margin-top: 0; border-top: 0; padding-top: 0; } }
@media (max-width: 820px) { .lc { grid-template-columns: 1fr; height: auto; } .lc-side { height: auto; max-height: 300px; } .lc-main { height: 75vh; min-height: 460px; } }

/* Client area: live chat bubble */
.lcw { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lcw-launch { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--accent); color: var(--on-accent, #1a1a1a); font: 600 .95rem/1 var(--f-body); box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); }
.lcw-launch svg { width: 20px; height: 20px; }
.lcw-launch.lcw-ping { animation: lcw-ping 1.4s 3; box-shadow: 0 0 0 3px var(--text), 0 10px 28px -10px rgba(0,0,0,.45); }
@keyframes lcw-ping { 50% { transform: translateY(-4px); } }
.lcw-open .lcw-launch { display: none; }
.lcw-panel { width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
.lcw-panel[hidden] { display: none; }
.lcw-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 12px 16px; background: var(--hdr-bg, #23282B); color: var(--hdr-text, #fff); border-top: 4px solid var(--accent); }
.lcw-head > div { flex: 1; min-width: 0; }
.lcw-title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.lcw-sub { margin: 2px 0 0; font-size: .8rem; opacity: .8; }
.lcw-end { align-self: center; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: var(--r-sm); padding: 4px 8px; font-size: .76rem; cursor: pointer; opacity: .85; }
.lcw-end[hidden] { display: none; }
.lcw-x { background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.lcw-bar { padding: 7px 14px; font-size: .82rem; font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; gap: 8px; }
.lcw-bar[hidden] { display: none; }
.lcw-bar::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); flex: none; }
.lcw-bar.is-waiting::before { background: var(--accent); animation: vis-pulse 1.6s infinite; }
.lcw-bar.is-active::before { background: var(--ok); }
.lcw-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.lcw-m { display: flex; flex-direction: column; max-width: 88%; }
.lcw-me { align-self: flex-end; align-items: flex-end; }
.lcw-team { align-self: flex-start; }
.lcw-sys { align-self: center; max-width: 95%; }
.lcw-bubble { padding: 8px 11px; border-radius: 12px; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.lcw-bubble p { margin: 0; white-space: pre-wrap; }
.lcw-me .lcw-bubble { background: var(--text); color: var(--bg); border-bottom-right-radius: 3px; }
.lcw-team .lcw-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 3px; border-left: 3px solid var(--accent); }
.lcw-name { display: block; font-size: .72rem; font-weight: 700; color: var(--text-2); margin-bottom: 2px; }
.lcw-time, .lcw-seen { font-size: .68rem; color: var(--text-2); margin-top: 2px; }
.lcw-sysline { margin: 0; font-size: .74rem; color: var(--text-2); background: var(--surface-2); border-radius: 99px; padding: 3px 10px; text-align: center; }
.lcw-typing .lcw-bubble { display: flex; gap: 4px; }
.lcw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: lcw-dot 1s infinite ease-in-out; }
.lcw-typing span:nth-child(2) { animation-delay: .15s; } .lcw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lcw-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.lcw-form { display: grid; gap: 8px; }
.lcw-form p { margin: 0; }
.lcw-field { display: grid; gap: 3px; font-size: .82rem; font-weight: 600; }
.lcw-field input, .lcw-field textarea { font: inherit; font-weight: 400; padding: 7px 8px; }
.lcw-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface); }
.lcw-input[hidden] { display: none; }
.lcw-input input { flex: 1; min-width: 0; }
.lcw-send { background: var(--text); color: var(--bg); border: 0; border-radius: var(--r-sm); padding: 0 14px; font-weight: 600; cursor: pointer; }
.lcw-endbox p { margin: 0 0 8px; }
.lcw-rate, .lcw-copy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: .86rem; }
.lcw-copy input { flex: 1; min-width: 140px; padding: 6px 8px; }
.lcw-invite { position: relative; width: min(300px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--r-md); padding: 12px 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); }
.lcw-invite-who { margin: 0 0 4px; font-weight: 700; }
.lcw-invite-text { margin: 0 0 10px; font-size: .9rem; padding-right: 14px; }
.lcw-invite-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--text-2); }
@media (max-width: 600px) { .lcw { right: 12px; bottom: 12px; } .lcw-launch span { display: none; } .lcw-launch { padding: 14px; } .lcw-open { left: 8px; right: 8px; bottom: 8px; } .lcw-panel { width: 100%; height: calc(100dvh - 24px); } }
@media (prefers-reduced-motion: reduce) { .lcw-launch.lcw-ping, .lcw-typing span, .lcw-bar.is-waiting::before { animation: none; } }

/* Staff → Backups */
.bk-status { display: flex; flex-direction: column; gap: 6px; }
.bk-status-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk-status-main p { margin: 0; font-weight: 500; }
.bk-busy { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .92rem; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: wise-spin .8s linear infinite; vertical-align: -2px; flex: none; }
.bk-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.bk-steps li.done { color: var(--text-2); }
.bk-cards .card { margin-bottom: 0; }
.bk-cards { margin-bottom: 22px; }
.bk-sched { width: 100%; margin-bottom: 10px; }
.bk-sched td { padding: 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.bk-sched tr:last-child td { border-bottom: 0; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row form { display: inline; }
.bk-table td { vertical-align: top; }
.bk-table .bk-tag { margin: 0 2px 4px 0; }
.bk-failed td { background: var(--err-bg, transparent); }
.bk-help summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.bk-help summary::-webkit-details-marker { display: none; }
.bk-help summary::before { content: "▸"; color: var(--text-2); transition: transform .15s; }
.bk-help[open] summary::before { transform: rotate(90deg); }
.bk-help summary h2 { margin: 0; font-size: 1.1rem; }
.bk-help[open] summary { margin-bottom: 12px; }
.bk-guide { display: grid; gap: 10px; padding-left: 1.3em; }
.copy-row { display: flex; gap: 8px; margin: 8px 0; max-width: 640px; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--f-mono, monospace); font-size: .85rem; }
.count-err { background: var(--err, #c0392b) !important; color: #fff !important; }
.bk-dir code { word-break: break-all; }
.bk-table td:nth-child(6) { white-space: nowrap; }
@media (max-width: 720px) {
  .bk-table thead { display: none; }
  .bk-table, .bk-table tbody, .bk-table tr, .bk-table td { display: block; width: 100%; }
  .bk-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .bk-table td { border: 0; padding: 3px 0; }
  .bk-table td[data-l] { display: flex; justify-content: space-between; gap: 12px; }
  .bk-table td[data-l]::before { content: attr(data-l); color: var(--text-2); }
  .bk-table td.right { text-align: left; padding-top: 8px; }
  .bk-table td:nth-child(6) { white-space: normal; }
}

/* Formatted staff replies (RichText) */
.rt p { margin: 0 0 .8em; }
.rt > :last-child { margin-bottom: 0; }
.rt ul, .rt ol { margin: 0 0 .8em; padding-left: 1.4em; }
.rt li { margin: 0 0 .25em; }
.rt .rt-h { font: 700 1.02rem/1.3 var(--f-head); margin: 1em 0 .45em; }
.rt .rt-h:first-child { margin-top: 0; }
.rt blockquote { margin: 0 0 .8em; padding: 2px 0 2px 12px; border-left: 3px solid var(--border); color: var(--text-2); }
.rt code { font-family: var(--f-mono, ui-monospace, Menlo, Consolas, monospace); font-size: .88em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.rt pre { margin: 0 0 .8em; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-x: auto; }
.rt pre code { background: none; padding: 0; font-size: .85rem; }
.rt a { overflow-wrap: anywhere; }

/* Reply editor: toolbar + Write/Preview */
.rt-editor { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.rt-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(242,179,0,.25)); }
.rt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.rt-tabs { display: inline-flex; gap: 2px; }
.rt-tab { border: 0; background: none; padding: 6px 12px; border-radius: 6px; font: 600 .86rem var(--f-body); color: var(--text-2); cursor: pointer; }
.rt-tab[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.rt-tools { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.rt-tools[hidden] { display: none; }
.rt-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; border-radius: 6px; color: var(--text); cursor: pointer; }
.rt-btn svg { width: 17px; height: 17px; }
.rt-btn:hover, .rt-btn:focus-visible { background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.rt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.rt-editor textarea { border: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: none !important; width: 100%; resize: vertical; display: block; }
.rt-editor textarea[hidden] { display: none; }
.rt-preview { padding: 12px 14px; overflow-wrap: anywhere; }
.rt-hint { margin: 6px 0 0; }
@media (max-width: 560px) { .rt-hint { display: none; } }
.rt-editor textarea:focus, .rt-editor textarea:focus-visible { outline: none; border: 0; }
/* Remote console (KVM) card: buttons sit in their own forms */
.console-card .form-actions form { margin: 0; }
@media (max-width: 520px) { .console-card .form-actions form { flex: 1 1 100%; } .console-card .form-actions form .btn { width: 100%; } }
.kvm-paste { font-family: var(--mono, ui-monospace, monospace); font-size: .85rem; }
.kvm-steps { margin-top: 14px; }

/* Fleet & Profit (v0.9) */
.fl-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fl-alert { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--warn-line); background: var(--warn-bg); font-size: .92rem; }
.fl-alert.fl-err { border-color: var(--err-line); background: var(--err-bg); }
.fl-alert-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fl-alert-acts form { display: inline; margin: 0; }
.fl-table td { vertical-align: top; }
.fl-steps { margin: 0 0 14px; padding-left: 20px; }
.fl-steps li { margin-bottom: 4px; }
.fl-import-ok { border-color: var(--ok-line); }
.fl-bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -10px 0 16px; }
.fl-wipe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fl-wipe input[type=text] { flex: 1 1 260px; width: auto; }
/* Header buttons: badges, links, <button> and <details> on one centred line */
.page-head > span:not(.small):not(.muted) { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head > span > form { margin: 0; display: inline-flex; }


/* ---------- v0.10: traffic graphs, firewall, private networks, extra IPs ---------- */
.tr-nav { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; }
.tr-nav a { text-decoration: none; font-weight: 700; padding: 2px 10px; border-radius: var(--r-sm); }
.tr-nav a:hover { background: var(--ghost-hover); }
.tr-legend { margin: 6px 0 0; }
.tr-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; }
.tr-key:first-child { margin-left: 0; }
.tr-in { background: var(--accent); }
.tr-out { background: var(--text-2); opacity: .35; }
.fw-table td { vertical-align: top; padding: 6px 4px; }
.fw-table input, .fw-table select { width: 100%; min-width: 0; font-size: .88rem; padding: 6px 7px; }
.fw-table .fw-name { min-width: 110px; }
.fw-table .fw-port { min-width: 72px; }
.fw-table .fw-ip { min-width: 110px; }
.fw-table .fw-narrow { min-width: 70px; }
.fw-table tr.fw-base td { color: var(--text-2); }
.fw-row-err td { background: var(--err-bg, #fdecec); }
.fw-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.net-list { list-style: none; margin: 0; padding: 0; }
.net-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.net-list li:first-child { border-top: 0; }
.net-list form { margin: 0; }
.ip-list { margin: 0; padding: 0; list-style: none; }
.ip-list li { padding: 3px 0; }
.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .split-even { grid-template-columns: minmax(0, 1fr); } }
.flash-form { display: inline; margin: 0; }
.flash-form .linkbtn { padding: 0; font-size: inherit; }

/* Network card on the server page: one clickable row per item (icon · label and status · pill button) */
.net-card h2 { margin-bottom: 12px; }
.net-tiles { display: flex; flex-direction: column; gap: 10px; }
.net-tile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.net-tile:hover, .net-tile:visited, .net-tile:hover .net-value { color: var(--text); }
.net-tile:hover { border-color: var(--accent); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .4); }
.net-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.net-head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.net-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.net-ico svg { width: 19px; height: 19px; }
.net-tile.is-on .net-ico { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.net-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.net-label { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.net-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.net-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: .84rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s, border-color .15s, color .15s; }
.net-go span { transition: transform .15s; }
.net-tile:hover .net-go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.net-tile:hover .net-go span { transform: translateX(3px); }
@media (max-width: 460px) { .net-tile { flex-wrap: wrap; } .net-go { margin-left: 50px; } }
@media (prefers-reduced-motion: reduce) { .net-tile, .net-go, .net-go span { transition: none; } }
.fw-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fw-fieldset[disabled] input, .fw-fieldset[disabled] select { background: var(--surface-2); color: var(--text-2); cursor: not-allowed; }

/* Firewall: "Remove" toggle per rule (deleted on Save) */
.fw-del-cell { width: 1%; white-space: nowrap; vertical-align: middle !important; }
.fw-del { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.fw-del input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fw-del span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: .82rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.fw-del i { font-style: normal; }
.fw-del .fw-del-on { display: none; }
.fw-del:hover span { border-color: var(--err); color: var(--err); }
.fw-del input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fw-del input:checked + span { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.fw-del input:checked + span .fw-del-off { display: none; }
.fw-del input:checked + span .fw-del-on { display: inline; }
.fw-table tr:has(.fw-del input:checked) td:not(.fw-del-cell) { opacity: .45; }
.fw-table tr:has(.fw-del input:checked) input[type=text] { text-decoration: line-through; }

/* Fleet: stage legend that wraps on phones */
.stage-legend-h { margin: 22px 0 8px; font-size: .9rem; color: var(--text-2); }
.stage-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px 22px; margin: 0; }
.stage-legend > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.stage-legend dt { flex: none; margin: 0; }
.stage-legend dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

/* Label/value lists (.kv) never push the page wider than a phone screen */
.kv { grid-template-columns: max-content minmax(0, 1fr); }
@media (max-width: 520px) {
  .kv { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 8px 14px; }
  .kv dt { overflow-wrap: anywhere; }
  .kv dd .badge { white-space: normal; }
}

/* ---- Blog (v0.11) */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 22px; align-items: start; }
.blog-side .card h2 { font-size: 1rem; }
@media (max-width: 1100px) { .blog-layout { grid-template-columns: 1fr; } }
.blog-title { font-size: 1.15rem; font-weight: 600; }
.blog-slug { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.blog-slug input { flex: 1 1 220px; width: auto; }
.blog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.blog-schedule { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-schedule input { flex: 1 1 180px; width: auto; }
.blog-tips { margin: 0 0 14px; border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: var(--r-sm); padding: 8px 12px; }
.blog-tips summary { cursor: pointer; font-weight: 600; color: var(--warn); }
.blog-tips ul { margin: 8px 0 0; padding-left: 18px; }
.blog-checks { display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.blog-cover-preview { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--border); margin-bottom: 12px; }
.blog-faq-row { border-top: 1px dashed var(--border); padding-top: 12px; }
.blog-faq-row:first-child { border-top: 0; padding-top: 0; }
.blog-revs { list-style: none; padding: 0; margin: 0 0 10px; max-height: 260px; overflow: auto; }
.blog-revs li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.blog-danger form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.err-text { color: var(--err); }
.cols-2 { columns: 2 260px; }
.be-count { display: block; text-align: right; margin-top: 3px; }
.be-count.be-over { color: var(--err); font-weight: 600; }
.be-status { margin: 6px 0 0; min-height: 1.2em; }
.be-area { min-height: 420px; max-height: 75vh; overflow: auto; padding: 14px 18px; background: var(--input-bg); border-radius: 0 0 var(--r-sm) var(--r-sm); line-height: 1.6; font-size: .98rem; overflow-wrap: anywhere; }
.be-area:focus { outline: none; }
.be-area[hidden] { display: none; }
.be-area > :first-child { margin-top: 0; }
.be-area h2 { font-size: 1.3rem; margin: 1.4em 0 .5em; }
.be-area h3 { font-size: 1.08rem; margin: 1.2em 0 .4em; }
.be-area p, .be-area ul, .be-area ol, .be-area blockquote, .be-area pre, .be-area table { margin: 0 0 .9em; }
.be-area ul, .be-area ol { padding-left: 1.5em; }
.be-area blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; color: var(--text-2); }
.be-area pre { background: var(--code-bg); color: #E6E8EA; padding: 12px 14px; border-radius: var(--r-sm); overflow: auto; font: .88rem/1.5 var(--f-mono); white-space: pre-wrap; }
.be-area code { font-family: var(--f-mono); font-size: .9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.be-area pre code { background: none; border: 0; padding: 0; color: inherit; }
.be-area table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.be-area th, .be-area td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; }
.be-area th { background: var(--surface-2); }
.be-area img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.be-area a { color: var(--info); text-decoration: underline; }
.be-editor textarea { min-height: 420px; font: .86rem/1.5 var(--f-mono); padding: 12px 14px; }
.serp { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: 14px; font-family: Arial, sans-serif; }
.serp-url { font-size: .8rem; color: var(--text-2); overflow-wrap: anywhere; }
.serp-title { font-size: 1.05rem; color: var(--info); line-height: 1.3; }
.serp-desc { font-size: .85rem; color: var(--text-2); line-height: 1.45; }

/* ---- Website editor (v0.11) */
.site-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
.site-tabs a { padding: 9px 14px; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.site-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.site-tabs a:hover { color: var(--text); }
.site-tabs .site-tabs-dl { margin-left: auto; font-weight: 500; }
.site-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; }
.site-actions { margin-left: auto; display: flex; gap: 8px; }
.site-tools .rt-btn { font-size: .95rem; }
.site-status.is-ok { color: var(--ok); font-weight: 600; }
.site-status.is-err { color: var(--err); font-weight: 600; }
.site-status.is-info { color: var(--info); }
.site-frame { display: block; width: 100%; height: 78vh; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: #fff; margin-bottom: 22px; }
.site-seo { margin: 0; border-radius: 0; border-top: 0; }
.site-seo summary { cursor: pointer; font-weight: 600; }
.site-recent { list-style: none; padding: 0; margin: 0 0 10px; }
.site-recent li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.site-check li { margin-bottom: 8px; }
.site-found { display: grid; gap: 6px; max-height: 420px; overflow: auto; margin-bottom: 12px; }
.site-prices input { text-align: right; }
.row-warn td { background: var(--warn-bg); }
.inline-check { display: inline-flex; margin: 0 10px 0 0; }

/* ---------- Security Command Center (v0.12) ---------- */
.scc-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.scc-gauge { position: relative; width: 132px; height: 132px; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; text-align: center; }
.scc-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scc-gauge b { position: relative; font: 800 2.3rem/1 var(--f-head); color: var(--text); }
.scc-gauge span { position: relative; font-size: .78rem; color: var(--text-2); }
.scc-ring { fill: none; stroke: var(--border); stroke-width: 10; }
.scc-arc { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; }
.scc-good { color: var(--ok); } .scc-mid { color: var(--warn); } .scc-bad { color: var(--err); }
.scc-sevs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scc-sev { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; }
.scc-sev b { font: 800 1.5rem/1.1 var(--f-head); color: var(--text); }
.scc-sev span { font-size: .8rem; font-weight: 600; text-transform: var(--label-case); letter-spacing: var(--label-track); color: var(--text-2); }
.scc-sev-critical { border-left: 4px solid var(--err); } .scc-sev-critical b { color: var(--err); }
.scc-sev-high { border-left: 4px solid color-mix(in srgb, var(--err) 70%, var(--warn)); }
.scc-sev-medium { border-left: 4px solid var(--warn); }
.scc-sev-low { border-left: 4px solid var(--info); }
.scc-when { font-size: .92rem; }
.scc-crit { font-weight: 800; box-shadow: 0 0 0 1px var(--err); }
.scc-later { display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-pill); border: 1px dashed var(--border-strong); color: var(--text-2); }
.scc-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.scc-dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.scc-text { white-space: normal; overflow-wrap: anywhere; }
.scc-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 900px) { .scc-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; } .scc-sevs { width: 100%; } }
.scc-fix { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.scc-fix form { display: inline; }

/* ---------- Security Command Center overview (v0.17): compact dashboard ---------- */
.sccx { --sccx-good: var(--ok); --sccx-mid: #E0A000; --sccx-bad: var(--err); --sccx-r: var(--ui-r); }
.sccx a { text-decoration: none; }
.sccx-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px 28px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: var(--ui-r-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sccx-tone) 16%, transparent) 0%, transparent 55%),
              radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%), var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px color-mix(in srgb, var(--sccx-tone) 45%, transparent); }
.sccx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 85% 50%, #000 0%, transparent 70%); }
.sccx-good { --sccx-tone: var(--sccx-good); } .sccx-mid { --sccx-tone: var(--sccx-mid); } .sccx-bad { --sccx-tone: var(--sccx-bad); }
.sccx-ring { position: relative; width: 132px; height: 132px; flex: none; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--sccx-tone) 35%, transparent)); }
.sccx-ring svg { width: 100%; height: 100%; display: block; }
.sccx-track { fill: none; stroke: color-mix(in srgb, var(--sccx-tone) 14%, var(--border)); stroke-width: 11; }
.sccx-arc { fill: none; stroke-width: 11; stroke-linecap: round; animation: sccx-fill 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.sccx-g1 { stop-color: var(--sccx-tone); } .sccx-g2 { stop-color: color-mix(in srgb, var(--sccx-tone) 55%, var(--accent)); }
@keyframes sccx-fill { from { stroke-dasharray: 0 400; } }
.sccx-ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sccx-ring-in b { font: 800 2.6rem/1 var(--f-head); letter-spacing: -.03em; color: var(--text); }
.sccx-ring-in span { font-size: .78rem; color: var(--text-2); margin-top: 4px; }
.sccx-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--text-2); }
.sccx-kicker .ico { width: 15px; height: 15px; color: var(--sccx-tone); }
.sccx-title { margin: 0; font: var(--h-weight) clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--f-head); letter-spacing: -.02em; color: var(--text); }
.sccx-sub { margin: 6px 0 14px; color: var(--text-2); }
.sccx-sevs { display: flex; flex-wrap: wrap; gap: 8px; }
.sccx-sev { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-size: .8rem; font-weight: 600; color: var(--text-2); transition: transform .15s ease, border-color .15s ease; }
.sccx-sev:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.sccx-sev b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); display: inline-grid; place-content: center; font-size: .82rem; background: var(--surface-2); color: var(--text-2); }
.sccx-sev.is-on.sccx-sev-critical b, .sccx-sev.is-on.sccx-sev-high b { background: var(--err); color: #fff; }
.sccx-sev.is-on.sccx-sev-medium b { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.sccx-sev.is-on.sccx-sev-low b { background: var(--info-bg); color: var(--info); }
.sccx-hero-side { display: grid; gap: 14px; justify-items: end; align-self: stretch; align-content: space-between; }
.sccx-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sccx-actions form { margin: 0; }
.sccx-when { margin: 0; display: grid; gap: 4px; text-align: right; font-size: .84rem; }
.sccx-when div { display: flex; gap: 10px; justify-content: flex-end; }
.sccx-when dt { color: var(--text-2); } .sccx-when dd { margin: 0; font-weight: 600; color: var(--text); }

.sccx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 18px; }
.sccx-kpi { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 12px 14px; border-radius: var(--ui-r-sm); border: 1px solid var(--border); background: var(--surface);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow: hidden; }
.sccx-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(16, 24, 40, .35); border-color: var(--border-strong); }
.sccx-kpi-l { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.sccx-kpi b { grid-row: span 2; font: 800 1.5rem/1 var(--f-head); color: var(--text); letter-spacing: -.02em; }
.sccx-kpi small { font-size: .74rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sccx-kpi.is-alert { border-color: var(--warn-line); background: linear-gradient(135deg, var(--warn-bg), var(--surface) 70%); }
.sccx-kpi.is-alert b { color: var(--warn); }
.sccx-kpi::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--border); }
.sccx-kpi.is-alert::before { background: var(--warn); }

.sccx-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sccx-col { display: grid; gap: 18px; min-width: 0; }
.sccx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--sccx-r); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.sccx-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: -2px 0 12px; }
.sccx-card-h h2 { margin: 0; font-size: 1rem; }
.sccx-card-h a { font-size: .84rem; font-weight: 600; color: var(--text-2); } .sccx-card-h a:hover { color: var(--text); }
.sccx-muted { color: var(--text-2); font-size: .86rem; }

.sccx-list { list-style: none; margin: 0 -8px; padding: 0; }
.sccx-list a { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--ui-r-sm); color: inherit; transition: background .15s ease; }
.sccx-list a:hover { background: var(--hover); }
.sccx-list li + li { border-top: 1px solid var(--border); }
.sccx-bar { width: 4px; height: 34px; border-radius: 4px; background: var(--border-strong); }
.sccx-bar-critical, .sccx-bar-high { background: var(--err); } .sccx-bar-medium { background: var(--warn); } .sccx-bar-low { background: var(--info); }
.sccx-list-main { min-width: 0; display: grid; gap: 2px; }
.sccx-list-main b { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sccx-list-main small, .sccx-list-side small { color: var(--text-2); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sccx-list-side { display: grid; gap: 4px; justify-items: end; }
.sccx-more { margin: 8px 0 0; font-size: .84rem; }
.sccx-note { margin: -4px 0 8px; }
.sccx-accept { display: flex; flex-wrap: wrap; gap: 6px; }
.sccx-accept form { margin: 0; }
.sccx-accept .btn { padding: 5px 11px; font-size: .8rem; min-height: 0; }
.sccx-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 10px; text-align: center; }
.sccx-empty-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center; color: var(--ok); background: var(--ok-bg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok-bg) 50%, transparent); margin-bottom: 8px; }
.sccx-empty-ico .ico { width: 26px; height: 26px; }
.sccx-empty small { color: var(--text-2); }

.sccx-chart svg { width: 100%; height: auto; display: block; }
.scc-area-1 { stop-color: var(--accent); stop-opacity: .28; } .scc-area-2 { stop-color: var(--accent); stop-opacity: 0; }
.sccx-details { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.sccx-details summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--text-2); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.sccx-details summary::-webkit-details-marker { display: none; }
.sccx-details summary::before { content: "›"; display: inline-block; transition: transform .15s ease; font-size: 1.1em; }
.sccx-details[open] summary::before { transform: rotate(90deg); }
.sccx-details > :not(summary) { margin-top: 10px; }
.sccx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sccx-chip { font-size: .76rem; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.sccx-mono { font-family: var(--f-mono); }

.sccx-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.sccx-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.sccx-tabs > label { padding: 7px 12px; border-radius: var(--r-pill); font-size: .84rem; font-weight: 600; color: var(--text-2); cursor: pointer; border: 1px solid transparent; }
.sccx-tabs > label:hover { color: var(--text); background: var(--hover); }
.sccx-tabs > input:checked + label { background: var(--cur-bg); color: var(--cur-text); border-color: var(--border); }
.sccx-tabs > label:focus, .sccx-tabs > input:focus + label { outline: none; }
.sccx-tabs > input:focus-visible + label { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }   /* keyboard only, soft accent ring */
.sccx-pane { display: none; width: 100%; margin-top: 12px; }
#sccx-t1:checked ~ .sccx-p1, #sccx-t2:checked ~ .sccx-p2, #sccx-t3:checked ~ .sccx-p3 { display: block; animation: sccx-in .25s ease both; }
@keyframes sccx-in { from { opacity: 0; transform: translateY(4px); } }
.sccx-pane-t { margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: var(--text-2); letter-spacing: var(--label-track); text-transform: var(--label-case); }
.sccx-kv { list-style: none; margin: 0; padding: 0; }
.sccx-kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .88rem; }
.sccx-kv li:first-child { border-top: 0; }
.sccx-kv span { color: var(--text-2); }
.sccx-kv b { font-weight: 600; text-align: right; display: grid; justify-items: end; }
.sccx-kv b small { font-weight: 500; font-size: .74rem; color: var(--text-2); }
.sccx-kv b.is-ok, .sccx-kv b.is-warn, .sccx-kv b.is-bad { display: inline-flex; flex-direction: column; align-items: flex-end; }
.sccx-kv b.is-ok::before, .sccx-kv b.is-warn::before, .sccx-kv b.is-bad::before { content: none; }
.sccx-kv b.is-ok { color: var(--ok); } .sccx-kv b.is-warn { color: var(--warn); } .sccx-kv b.is-bad { color: var(--err); }

.sccx-feed { list-style: none; margin: 0; padding: 0 0 0 4px; }
.sccx-feed li { position: relative; padding: 0 0 12px 20px; display: grid; gap: 2px; font-size: .86rem; }
.sccx-feed li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.sccx-feed li::after { content: ""; position: absolute; left: 4px; top: 18px; bottom: 0; width: 1px; background: var(--border); }
.sccx-feed li:last-child::after { display: none; }
.sccx-feed li.sccx-dot-bad::before { background: var(--err); } .sccx-feed li.sccx-dot-good::before { background: var(--ok); }
.sccx-feed a { color: var(--text); } .sccx-feed a:hover { text-decoration: underline; }
.sccx-feed small { color: var(--text-2); font-size: .75rem; }

@media (max-width: 1100px) { .sccx-grid { grid-template-columns: minmax(0, 1fr); } .sccx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sccx-hero { grid-template-columns: auto minmax(0, 1fr); padding: 20px; gap: 18px; }
  .sccx-hero-side { grid-column: 1 / -1; justify-items: start; } .sccx-actions { justify-content: flex-start; } .sccx-when, .sccx-when div { text-align: left; justify-content: flex-start; }
  .sccx-ring { width: 104px; height: 104px; } .sccx-ring-in b { font-size: 2.1rem; }
}
@media (max-width: 460px) { .sccx-kpis { grid-template-columns: minmax(0, 1fr); } .sccx-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
@media (prefers-reduced-motion: reduce) { .sccx-arc, .sccx-pane { animation: none !important; } .sccx-kpi, .sccx-sev { transition: none; } }

/* ---------- Staff dashboard (v0.19) ---------- */
.dsx a { text-decoration: none; }
.dsx-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 30px; margin-bottom: 16px;
  border-radius: var(--ui-r-lg); border: 1px solid var(--border); overflow: hidden; isolation: isolate; --dsx-tone: var(--accent);
  background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--dsx-tone) 22%, transparent) 0%, transparent 55%),
              radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--info) 14%, transparent) 0%, transparent 60%), var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -26px color-mix(in srgb, var(--dsx-tone) 60%, transparent); }
.dsx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%); mask-image: linear-gradient(105deg, transparent 35%, #000 100%); }
.dsx-hero.is-busy { --dsx-tone: var(--warn); }
.dsx-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .76rem; font-weight: 700; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--text-2); }
.dsx-kicker .ico { width: 15px; height: 15px; color: var(--accent-text); }
.dsx-title { margin: 0; font: var(--h-weight) clamp(1.8rem, 3.2vw, 2.5rem)/1.08 var(--f-head); letter-spacing: -.025em; color: var(--text); }
.dsx-sub { margin: 8px 0 0; color: var(--text-2); font-size: 1rem; }
.dsx-hero-money { display: grid; justify-items: end; gap: 2px; padding: 14px 18px; border-radius: var(--ui-r-sm); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: right; }
.dsx-hero-money span { font-size: .78rem; font-weight: 600; color: var(--text-2); }
.dsx-hero-money b { font: 800 1.9rem/1.1 var(--f-head); letter-spacing: -.02em; color: var(--text); }
.dsx-hero-money small { font-size: .76rem; color: var(--text-2); }

.dsx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dsx-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ui-r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dsx-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 12px 26px -18px rgba(16, 24, 40, .4); }
.dsx-tile-ico { width: 38px; height: 38px; border-radius: var(--ui-r-sm); display: grid; place-content: center; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.dsx-tile-ico .ico { width: 19px; height: 19px; }
.dsx-tile-txt { min-width: 0; display: grid; gap: 1px; }
.dsx-tile-txt span { font-size: .86rem; font-weight: 600; line-height: 1.25; color: var(--text-2); }
.dsx-tile-txt small { font-size: .74rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsx-tile b { font: 800 1.7rem/1 var(--f-head); letter-spacing: -.02em; }
.dsx-tile.is-hot { border-color: var(--warn-line); background: linear-gradient(135deg, var(--warn-bg), var(--surface) 75%); }
.dsx-tile.is-hot .dsx-tile-ico { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.dsx-tile.is-hot b { color: var(--warn); }

.dsx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dsx-col { display: grid; gap: 18px; min-width: 0; }
.dsx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.dsx-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 14px; }
.dsx-card-h h2 { margin: 0; font-size: 1.02rem; }
.dsx-card-h > a { font-size: .84rem; font-weight: 600; color: var(--text-2); } .dsx-card-h > a:hover { color: var(--text); }
.dsx-muted { color: var(--text-2); font-size: .84rem; margin: 0; }
.dsx-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); }
.dsx-seg a { padding: 5px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; color: var(--text-2); }
.dsx-seg a:hover { color: var(--text); }
.dsx-seg a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.dsx-figures { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; margin-bottom: 6px; }
.dsx-figures > div:not(.dsx-figures-note) { display: grid; gap: 2px; }
.dsx-figures span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--text-2); }
.dsx-figures span i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.dsx-figures b { font: 800 1.45rem/1.1 var(--f-head); letter-spacing: -.02em; color: var(--text); }
.dsx-figures-note { margin-left: auto; font-size: .76rem; color: var(--text-2); }
.dsx-chart { margin-top: 6px; }

.dsx-feed { list-style: none; margin: 0 -6px; padding: 0; }
.dsx-feed li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 6px; border-radius: var(--ui-r-sm); }
.dsx-feed li:hover { background: var(--hover); }
.dsx-feed li + li { border-top: 1px solid var(--border); }
.dsx-who { width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--text); border: 1px solid var(--border); }
.dsx-feed li.is-bad .dsx-who { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }
.dsx-feed-main { min-width: 0; font-size: .88rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsx-feed-main b { color: var(--text); font-weight: 600; }
.dsx-feed-main a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.dsx-feed-meta { font-size: .76rem; color: var(--text-2); white-space: nowrap; }
.dsx-pill-bad { margin-left: 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); background: var(--err-bg); color: var(--err); }

.dsx-money { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dsx-money div { padding: 12px 14px; border-radius: var(--ui-r-sm); background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 2px; }
.dsx-money span { font-size: .76rem; font-weight: 600; color: var(--text-2); }
.dsx-money b { font: 800 1.25rem/1.15 var(--f-head); letter-spacing: -.015em; color: var(--text); }
.dsx-money .is-today { background: linear-gradient(135deg, var(--ok-bg), var(--surface-2)); } .dsx-money .is-today b { color: var(--ok); }
.dsx-money .is-month { background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); } .dsx-money .is-month b { color: var(--accent-text); }
.dsx-money .is-year { background: linear-gradient(135deg, var(--info-bg), var(--surface-2)); } .dsx-money .is-year b { color: var(--info); }

.dsx-health { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: center; --dsx-h: var(--ok); }
.dsx-h-warn { --dsx-h: #D9A400; } .dsx-h-err { --dsx-h: var(--err); }
.dsx-health svg { width: 52px; height: 52px; grid-row: span 2; }
.dsx-h-track { fill: none; stroke: color-mix(in srgb, var(--dsx-h) 15%, var(--border)); stroke-width: 6; }
.dsx-h-arc { fill: none; stroke: var(--dsx-h); stroke-width: 6; stroke-linecap: round; animation: sccx-fill 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.dsx-health > div:first-of-type { display: grid; } .dsx-health > div:first-of-type span { font-size: .76rem; color: var(--text-2); }
.dsx-health > div:first-of-type b { font: 800 1.35rem/1.15 var(--f-head); color: var(--dsx-h); }
.dsx-health-counts { display: flex; gap: 14px; font-size: .78rem; font-weight: 600; color: var(--text-2); }
.dsx-health-counts .is-warn { color: var(--warn); } .dsx-health-counts .is-err { color: var(--err); }
.dsx-issues { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; font-size: .84rem; }
.dsx-issues li { display: flex; align-items: center; gap: 8px; }
.dsx-issues li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); flex: none; }
.dsx-issues li.is-warn::before { background: #D9A400; } .dsx-issues li.is-err::before { background: var(--err); }

.dsx-servers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dsx-servers div { padding: 12px 14px; border-radius: var(--ui-r-sm); background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 2px; }
.dsx-servers b { font: 800 1.35rem/1.15 var(--f-head); color: var(--text); } .dsx-servers span { font-size: .76rem; color: var(--text-2); }
.dsx-servers .dsx-span { grid-column: 1 / -1; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface-2)), var(--surface-2)); }

.dsx-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dsx-people li { display: flex; align-items: center; gap: 12px; }
.dsx-people li > span:last-child { display: grid; } .dsx-people small { font-size: .76rem; color: var(--text-2); }
.dsx-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; font-size: .8rem; font-weight: 700; flex: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, var(--surface-2)), var(--surface-2)); color: var(--text); border: 1px solid var(--border); }
.dsx-avatar .dot-on { position: absolute; right: -1px; bottom: -1px; }

@media (max-width: 1180px) { .dsx-grid { grid-template-columns: minmax(0, 1fr); } .dsx-grid > aside { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 640px) { .dsx-hero { padding: 22px 20px; } .dsx-hero-money { justify-items: start; text-align: left; width: 100%; } .dsx-feed-meta { display: none; } .dsx-figures-note { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dsx-h-arc { animation: none; } .dsx-tile { transition: none; } }

/* ---------- Design layer (v0.20): every staff and client page in the dashboard style ----------
   Visual only (radius, depth, colour, motion): no layout changes, so every page keeps working as before.
   Theme C (brand industrial) keeps its square corners and flat look through the --ui-* tokens. */
:root, .theme-a, .theme-b { --ui-r: 16px; --ui-r-lg: 20px; --ui-r-sm: 12px; --ui-ctl: 10px;
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -20px rgba(16, 24, 40, .28); --ui-lift: 0 14px 30px -18px rgba(16, 24, 40, .35); }
.theme-b { --ui-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 12px 30px -22px rgba(0, 0, 0, .9); --ui-lift: 0 16px 34px -20px rgba(0, 0, 0, .95); }
.theme-c { --ui-r: 3px; --ui-r-lg: 3px; --ui-r-sm: 3px; --ui-ctl: 3px; --ui-shadow: none; --ui-lift: none; }

/* Page background: a soft wash of the accent at the top (A and B). */
.theme-a #main, .theme-b #main { background: radial-gradient(1100px 380px at 12% -120px, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }

/* Page header becomes a hero band, like the dashboards. */
#main .page-head { position: relative; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--ui-r-lg); isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 170% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
              radial-gradient(80% 150% at 100% 0%, color-mix(in srgb, var(--info) 9%, transparent) 0%, transparent 60%), var(--surface);
  box-shadow: var(--ui-shadow); }
#main .page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(105deg, transparent 45%, #000 100%); mask-image: linear-gradient(105deg, transparent 45%, #000 100%); }
.theme-c #main .page-head { background: var(--surface); }
.theme-c #main .page-head::after { display: none; }
#main .page-head h1 { letter-spacing: -.02em; }
.theme-c #main .page-head h1 { letter-spacing: var(--h-track); }
#main .crumbs + h1, #main .page-head .crumbs { margin-bottom: 4px; }

/* Cards, tables, stat tiles. */
.card, .table-wrap { border-radius: var(--ui-r); box-shadow: var(--ui-shadow); }
.stat { border-radius: var(--ui-r-sm); box-shadow: var(--ui-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--ui-lift); border-color: var(--border-strong); }
.theme-a .stat-hot, .theme-b .stat-hot { background: linear-gradient(135deg, var(--warn-bg), var(--surface) 75%); border-color: var(--warn-line); }
.theme-a .stat-hot b, .theme-b .stat-hot b { color: var(--warn); }
th { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
tbody tr { transition: background .12s ease; }
tbody tr:hover > td { background: color-mix(in srgb, var(--hover) 70%, transparent); }
tbody tr:last-child > td { border-bottom: 0; }

/* Controls. */
.btn { border-radius: var(--ui-ctl); transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.btn-signal { box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.btn-signal:hover, .btn-ink:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.theme-c .btn, .theme-c .btn-signal { box-shadow: none; transform: none; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=search], input:not([type]), select, textarea { border-radius: var(--ui-ctl); }
.theme-a input:focus, .theme-a select:focus, .theme-a textarea:focus, .theme-b input:focus, .theme-b select:focus, .theme-b textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--accent) 75%, var(--border-strong)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }

/* Tabs as a soft pill bar (A and B); theme C keeps its underlined tabs. */
.theme-a .tabs, .theme-b .tabs { border-bottom: 0; gap: 4px; padding: 4px; margin: 0 0 20px; width: fit-content; max-width: 100%; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); }
.theme-a .tabs a, .theme-b .tabs a { border-bottom: 0; margin-bottom: 0; padding: 7px 14px; border-radius: var(--r-pill); font-size: .88rem; }
.theme-a .tabs a[aria-current="page"], .theme-b .tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.theme-b .tabs a[aria-current="page"] { background: var(--strong); color: #fff; }

/* Notices and flashes with a coloured edge. */
.flash, .notice { border-radius: var(--ui-r-sm); border-left-width: 4px; box-shadow: var(--ui-shadow); }
.flash-ok { border-left-color: var(--ok); } .flash-warn, .notice { border-left-color: var(--warn); } .flash-err { border-left-color: var(--err); }

/* Menu: rounded active item with a glow (A and B). */
.theme-a .nav a, .theme-b .nav a { border-radius: var(--ui-ctl); transition: background .15s ease, color .15s ease; }
.theme-a .nav a[aria-current="page"], .theme-b .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent), 0 6px 16px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.theme-a.layout-top .nav a[aria-current="page"], .theme-b.layout-top .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }

.badge { letter-spacing: .04em; }
.empty { padding: 40px 20px; }

@media (max-width: 640px) { #main .page-head { padding: 18px; } .theme-a .tabs, .theme-b .tabs { width: auto; overflow-x: auto; flex-wrap: nowrap; } .theme-a .tabs a, .theme-b .tabs a { white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .stat, .btn, tbody tr { transition: none; } a.stat:hover, .btn-signal:hover, .btn-ink:hover { transform: none; } }
.cdx-hero { align-items: center; }
.cdx-hero-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Marketing (v0.21) */
.b-won, .b-live, .b-running { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.b-new, .b-scheduled, .b-sending { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.b-contacted, .b-quoted { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.b-lost, .b-draft, .b-ended, .b-stopped, .b-cancelled { background: var(--surface-2); color: var(--text-2); }
.check.is-locked { opacity: .6; }
.notice-ok { border-left-color: var(--ok); }
.notice-warn { border-left-color: var(--warn); }
.notice-info { border-left-color: var(--info); }
.plain-list { margin: 0; padding-left: 1.1em; }
.plain-list li { margin: 0 0 6px; }
.msg-body { white-space: normal; overflow-wrap: anywhere; }
.dsx-mkt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dsx-mkt > div { padding: 12px 14px; border-radius: var(--ui-r-sm); background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 2px; min-width: 0; }
.dsx-mkt > div span { font-size: .76rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsx-mkt > div b { font: 800 1.25rem/1.15 var(--f-head); letter-spacing: -.015em; color: var(--text); }
.dsx-mkt .is-rev { background: linear-gradient(135deg, var(--ok-bg), var(--surface-2)); } .dsx-mkt .is-rev b { color: var(--ok); }
.dsx-mkt .is-ret { grid-column: 1 / -1; margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: .86rem; color: var(--text-2); }
.dsx-mkt .is-ret b { color: var(--text); font-weight: 700; }
.dsx-mkt .is-ret small { flex-basis: 100%; font-size: .76rem; opacity: .85; }

/* v0.21.6: "How does this work?" links to the Help centre guides */
.help-link { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.help-link svg { flex: none; opacity: .8; }
.help-link:hover, .help-link:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.help-row { margin: 10px 0 0; }
.ctl-head .help-link, .page-head .help-link { margin-left: auto; }
.page-head .help-link { align-self: center; }

/* v0.21.8 — client list: services column, filter buttons, per-month column */
.cl-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 14px 0 16px; }
.seg-n { font-weight: 500; opacity: .7; margin-left: 3px; }
.cl-svc-link { display: inline-flex; flex-wrap: wrap; gap: 4px; text-decoration: none; }
.cl-svc-link:hover .badge { filter: brightness(.96); }
@media (max-width: 640px) { .cl-bar .seg { flex-wrap: wrap; } }

/* v0.21.8 — leads: close / reopen */
.lead-close { position: relative; }
.lead-close > summary { list-style: none; }
.lead-close > summary::-webkit-details-marker { display: none; }
.lead-close[open] { flex-basis: 100%; }
.lead-close[open] > summary { display: none; }
.lead-close-form { max-width: 560px; margin: 4px 0 0; box-shadow: none; }
.lc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lc-choices { border: 0; padding: 0; margin: 0 0 12px; }
.lc-choices legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.lc-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 6px; cursor: pointer; }
.lc-opt input { margin-top: 3px; flex: none; }
.lc-opt span { display: grid; gap: 2px; }
.lc-opt small { color: var(--text-2); font-size: .82rem; }
.lc-opt:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.lead-close-form:not(:has(input[value="lost"]:checked)) .lc-reason[data-for="lost"],
.lead-close-form:not(:has(input[value="junk"]:checked)) .lc-reason[data-for="junk"] { display: none; }
.lead-closed { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lead-closed form { margin: 0; }
.lead-seg { margin-bottom: 6px; }
.lead-rate { margin: 6px 0 14px; }
.b-junk { background: var(--surface-2); color: var(--text-2); }


/* v0.21.9: server page. One pattern for every card: title left, its main button right; actions in a bar under a rule. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.card-head .head-acts { margin-left: auto; }
.act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.act-bar form { margin: 0; display: contents; }
.act-bar .act-end { margin-left: auto; }
.act-note { margin: 10px 0 0; }
.kvm-form .check { margin-top: 4px; }
.ctl-row .btn, .rdns-row .btn { min-width: 112px; }
.rdns-row .btn { min-width: 84px; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.task-list li:first-child { border-top: 0; padding-top: 0; }
.task-list li:last-child { padding-bottom: 0; }
.task-list a { font-weight: 500; }
.side-card .btn-block-sm { width: 100%; }
.side-card .side-save { margin-top: 8px; }
@media (max-width: 520px) {
  .act-bar .btn { flex: 1 1 100%; }
  .act-bar .act-end { margin-left: 0; }
  .card-head .head-acts { margin-left: 0; }
}
#kvm .act-note + details.ctl, #kvm > details.ctl { margin-top: 14px; }
.side-card .rl-status:empty { display: none; }
.side-card [data-rl-go] { margin-bottom: 4px; }

/* v0.21.11: customers online (client page, client list, Live chat) */
.dot-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); margin-right: 8px; vertical-align: middle; flex: none; animation: dg-pulse 2s ease-in-out infinite; }
@keyframes dg-pulse { 50% { box-shadow: 0 0 0 5px var(--ok-bg); } }
@media (prefers-reduced-motion: reduce) { .dot-online { animation: none; } }
.badge.b-online { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge.b-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lc-online { border-top: 1px solid var(--border); padding-top: 12px; }
.lc-online h3 { gap: 0; align-items: center; }
.lc-on { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.lc-on:first-child { border-top: 0; padding-top: 2px; }
.lc-on-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-on-name { font-weight: 600; text-decoration: none; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-on-name:hover { text-decoration: underline; }
.lc-on .lc-item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-on .btn { flex: none; }
.lc-on-state { font-size: .8rem; color: var(--text-2); white-space: nowrap; }
.chatinv .loginas-pop textarea { min-height: 84px; }
/* Pop-ups that open from the page header (Start chat, Log in as client) must not be cut off by the header's rounded box. */
#main .page-head:has(details[open]) { overflow: visible; z-index: 20; }
.lc-online h3 .lc-n { margin-left: 6px; }
/* v0.21.12: the KVM login appears inside the console card */
.kvm-login { margin-top: 16px; border: 2px solid var(--accent); border-radius: var(--r-sm); background: var(--warn-bg); padding: 14px 16px; }
.kvm-login-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.kvm-login-head .small { color: var(--text-2); }
.kvm-login-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.kvm-login-rows label { font-weight: 600; font-size: .9rem; }
.kvm-login-rows .copy-row { margin: 0; max-width: none; }
.kvm-login-rows input { background: var(--surface); }
@media (max-width: 560px) { .kvm-login-rows { grid-template-columns: 1fr; } .kvm-login-rows label { margin-top: 6px; } }

/* v0.21.16: long lists on the client page show their first rows and a "Show all" button (no scrolling inside the page) */
.is-collapsible tr[hidden], .is-collapsible > li[hidden] { display: none; }
.table-wrap.is-collapsible { margin-bottom: 0; }
.more-bar { display: flex; justify-content: center; margin: 10px 0 22px; }
.ledger-list + .more-bar { margin: 8px 0 0; }
.more-btn { min-width: 140px; }
/* Recent activity for one client: no sideways scrolling */
.act-table { table-layout: fixed; }
.act-table th:nth-child(1) { width: 25%; } .act-table th:nth-child(2) { width: 32%; } .act-table th:nth-child(3) { width: 13%; } .act-table th:nth-child(4) { width: 30%; }
.act-table td { vertical-align: top; overflow-wrap: anywhere; }
.act-sub { display: block; margin-top: 3px; font-size: .8rem; color: var(--text-2); }
.act-action { display: block; overflow-wrap: anywhere; }
.act-meta dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 8px; margin: 0; }
.act-meta dt { color: var(--text-2); font-weight: 500; }
.act-meta dd { margin: 0; overflow-wrap: anywhere; font-family: var(--f-mono, monospace); font-size: .78rem; }
@media (max-width: 640px) { .act-table th:nth-child(4), .act-table td:nth-child(4) { display: none; } .act-table th:nth-child(1) { width: 34%; } .act-table th:nth-child(2) { width: 44%; } .act-table th:nth-child(3) { width: 22%; } }
.act-meta dl { align-items: baseline; line-height: 1.45; }
.act-meta dd:empty::before { content: "–"; color: var(--text-2); }
.act-table th:nth-child(1) { width: 21%; } .act-table th:nth-child(2) { width: 38%; } .act-table th:nth-child(3) { width: 12%; } .act-table th:nth-child(4) { width: 29%; }
.act-action { overflow-wrap: break-word; word-break: normal; }

/* v0.21.14: Credit card on the client page */
.credit-card .card-head { margin-bottom: 10px; }
.credit-bal { font: 700 1.25rem/1 var(--f-body); font-variant-numeric: tabular-nums; }
.btn-block-sm { width: 100%; }
.ledger-h { margin: 20px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.ledger-list li:first-child { border-top: 0; }
.ledger-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .88rem; overflow-wrap: anywhere; }
.ledger-date { font-size: .78rem; color: var(--text-2); }
.ledger-amt { flex: none; white-space: nowrap; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ledger-amt.is-plus { color: var(--ok); }
.ledger-amt.is-minus { color: var(--err); }

/* v0.21.15: client list fits the page, no sideways scrolling */
.cl-table td { vertical-align: top; }
.cl-who { min-width: 200px; }
.cl-who > a { font-weight: 600; }
.cl-id { margin-left: 6px; font-size: .78rem; color: var(--text-2); }
.cl-sub { display: block; margin-top: 2px; font-size: .84rem; color: var(--text-2); overflow-wrap: anywhere; }
.cl-table .cl-svc-link { max-width: 220px; }
.cl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.cl-meta .badge { padding: 3px 7px; font-size: .66rem; }
.cl-table th:first-child { width: 42%; }
@media (max-width: 640px) {
  .cl-table th:nth-child(2), .cl-table td:nth-child(2), .cl-table th:nth-child(3), .cl-table td:nth-child(3) { display: none; }
  .cl-table th, .cl-table td { padding-left: 10px; padding-right: 10px; }
  .cl-who { min-width: 0; }
  .cl-table .cl-svc-link { max-width: 120px; }
}
@media (max-width: 640px) { .cl-table .cl-svc .badge { white-space: normal; } .cl-table th { white-space: normal; } }

/* v0.21.17: live chat composer: one box (text on top, quick replies + send underneath) */
.lc-compose { padding: 12px; }
.lc-box { border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-md, 10px); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.lc-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.lc-box textarea { display: block; width: 100%; border: 0; box-shadow: none; outline: 0; background: transparent; resize: none; min-height: 64px; max-height: 200px; padding: 12px 14px 6px; font: inherit; line-height: 1.5; }
.lc-box textarea:focus { box-shadow: none; outline: 0; }
.lc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 8px 10px; }
.lc-bar .lc-tools { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 10px; }
.lc-bar select[data-quick] { width: auto; flex: none; min-height: 32px; height: 32px; padding: 4px 28px 4px 10px; font-size: .84rem; border-radius: var(--r-sm, 8px); }
.lc-hint { font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lc-bar .btn { flex: none; min-width: 84px; }
@media (max-width: 560px) { .lc-hint { display: none; } }
.lc-bar select[data-quick] { max-width: 170px; }
/* Keep the reply box clear of the floating team "Chat" button */
body:has(.chat-fab) .lc { height: calc(100vh - 262px); }
@media (max-width: 1280px) { body:has(.chat-fab) .lc { height: auto; } body:has(.chat-fab) .lc-side, body:has(.chat-fab) .lc-main { height: calc(100vh - 262px); } }
@media (max-width: 820px) { body:has(.chat-fab) .lc-side { height: auto; } body:has(.chat-fab) .lc-main { height: 75vh; } body:has(.chat-fab) .lc { margin-bottom: 76px; } }
.act-time { display: block; white-space: nowrap; }

/* v0.22 multi-currency: price editor, currency chooser */
.price-table td { vertical-align: middle; }
.price-in { width: 110px; max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.price-in::placeholder { color: var(--text-3, #9aa3ad); }
.cur-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cur-pick select { width: auto; min-width: 150px; }

/* v0.22.4: a note right under buttons, a form, a summary or a chooser gets breathing room (it had only a bottom margin). */
:is(.actions, form, dl, .sum, .cur-row, select, .table-wrap, .act-bar, .btn, .btn-block) + p,
:is(.actions, form, dl, .sum, .cur-row, .act-bar) + .small,
.cur-box > p:first-child { margin-top: 12px; }
.cur-box { margin-top: 14px; }
.cur-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }

/* v0.23 billing terms: the term chooser on the order page */
.term-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.term-opt { position: relative; display: block; border: 1.5px solid var(--line, #d5d9dc); border-radius: 10px; padding: 12px 14px 12px 40px; cursor: pointer; background: var(--card, #fff); transition: border-color .15s, box-shadow .15s; }
.term-opt:hover { border-color: var(--ink-3, #8a949a); }
.term-opt.is-on, .term-opt:has(input:checked) { border-color: var(--signal, #F2B300); box-shadow: 0 0 0 3px rgba(242,179,0,.18); }
.term-opt input { position: absolute; left: 14px; top: 15px; margin: 0; width: 16px; height: 16px; accent-color: var(--signal, #F2B300); }
.term-body { display: flex; flex-direction: column; gap: 3px; }
.term-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.term-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.term-line { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.term-line select { width: auto; padding: 3px 6px; font-size: .85rem; }
.term-price { white-space: nowrap; }
.term-price .muted { font-weight: 500; font-size: .85em; }
.term-pick + p { margin-top: 12px; }
/* v0.23.1: plan code / location sit clear of the spec box; term card prices fit narrow cards (long ₹ amounts) */
.plate-head + .plate-specs { margin-top: 12px; }
.term-price { white-space: normal; display: flex; flex-direction: column; gap: 1px; }
.term-price .amt-n { white-space: nowrap; font-size: 1.05rem; }
.term-price .muted { font-size: .82em; }
.term-opt { min-width: 0; }
.term-body > .small { white-space: nowrap; }

/* v0.25.1 Provisioning nodes (Settings → Server controls) */
.pn { display: grid; gap: 18px; }
.pn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pn-head h3 { margin: 0 0 4px; font-size: var(--h2); }
.pn-head p { margin: 0; color: var(--text-2); font-size: .9rem; max-width: 60ch; }
.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-node { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pn-node.is-paused { opacity: .7; }
.pn-node-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.pn-node-text { flex: 1; min-width: 0; }
.pn-node-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-node-meta { color: var(--text-2); font-size: .85rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-node-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-node-actions form { margin: 0; }
.pn-danger { color: var(--err); }
.pn-logo { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.pn-logo.vz { background: var(--info-bg); color: var(--info); }
.pn-logo.sv { background: var(--ok-bg); color: var(--ok); }
.pn-edit { border-top: 1px solid var(--border); }
.pn-edit > summary { padding: 8px 16px; font-size: .85rem; font-weight: 600; color: var(--text-2); cursor: pointer; list-style: none; }
.pn-edit > summary::-webkit-details-marker { display: none; }
.pn-edit > summary::after { content: " ▾"; }
.pn-edit[open] > summary::after { content: " ▴"; }
.pn-edit .pn-form { padding: 0 16px 16px; }
.pn-form { display: grid; gap: 14px; }
.pn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.pn-grid .field { margin: 0; }
@media (max-width: 720px) { .pn-grid { grid-template-columns: 1fr; } .pn-node-main { flex-wrap: wrap; } }
.pn-add { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 0 18px; background: var(--surface-2); }
.pn-add[open] { border-style: solid; border-color: var(--border); background: var(--surface); padding-bottom: 18px; }
.pn-add > summary { padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.pn-add > summary::-webkit-details-marker { display: none; }
.pn-add > summary::before { content: "+ "; color: var(--accent-text); }
.pn-types { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pn-types legend { font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; padding: 0; }
.pn-type { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.pn-type input { position: absolute; opacity: 0; pointer-events: none; }
.pn-type b { display: block; }
.pn-type small { color: var(--text-2); font-size: .8rem; }
.pn-type:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pn-type:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pn-adv > summary { font-size: .88rem; font-weight: 600; color: var(--text-2); cursor: pointer; padding: 4px 0; }
.pn-adv[open] { display: grid; gap: 10px; padding-top: 4px; }
.pn-note { margin: 0; font-size: .85rem; color: var(--text-2); }
.pn-how { margin-top: 4px; font-size: .82rem; }
.pn-how summary { cursor: pointer; color: var(--accent-text); }
.pn-how code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--code-bg); color: var(--code-text); white-space: pre-wrap; word-break: break-all; font-size: .78rem; }
.pn-check { display: flex; gap: 10px; align-items: flex-start; grid-column: 1 / -1; padding: 6px 0; }
.pn-check.inline { grid-column: auto; padding: 0; align-items: center; }
.pn-check small { display: block; color: var(--text-2); font-size: .8rem; }
.pn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-foot .btn:only-child { margin-left: auto; }
/* Show only what fits the chosen type (needs :has; older browsers simply show both). */
.pn-form.is-vz .for-sv, .pn-form.is-sv .for-vz { display: none; }
.pn-form:not(.is-vz):not(.is-sv):has(input[name="provider"][value="solusvm1"]:checked) .for-vz { display: none; }
.pn-form:not(.is-vz):not(.is-sv):not(:has(input[name="provider"][value="solusvm1"]:checked)) .for-sv { display: none; }
@media (max-width: 720px) {
  .pn-node-text { flex: 1 1 calc(100% - 52px); }
  .pn-node-actions { flex: 1 1 100%; }
  .pn-types { grid-template-columns: 1fr; }
  .pn-head p { font-size: .85rem; }
}
.pn-logo.rb { background: var(--err-bg); color: var(--err); }
.pn-foot .pn-note { flex: 1; }
.pn, .pn-list { grid-template-columns: minmax(0, 1fr); }
.pn > *, .pn-node, .pn-node-main { min-width: 0; }
@media (max-width: 720px) { .pn-node-meta { white-space: normal; } }

/* v0.26 plan provisioning card */
.pp { display: grid; gap: 16px; }
.pp-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-modes a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: inherit; text-decoration: none; min-width: 0; }
.pp-modes a:hover { border-color: var(--text-3, var(--border)); }
.pp-modes a[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pp-modes a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-modes b { display: block; }
.pp-modes small { display: block; color: var(--text-2); font-size: .8rem; }
.pp-modes a > span:last-child { min-width: 0; }
.pp-node { display: flex; align-items: flex-end; gap: 10px; }
.pp-node .field { flex: 1; margin: 0; }
.pp-form { display: grid; gap: 16px; }
.pp-form .field { min-width: 0; }
.pp-copy { margin-top: 8px; font-size: .85rem; font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }
.pp-copy input { margin-top: 3px; }
.pp-os-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.pp-label { font-size: .85rem; font-weight: 600; }
.pp-os { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pp-os li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); }
.pp-os li + li { border-top: 1px solid var(--border); }
.pp-os li:has(.pp-os-pick input:checked) { background: var(--accent-soft); }
.pp-os li:not(:has(.pp-os-pick input:checked)) > input[type="text"],
.pp-os li:not(:has(.pp-os-pick input:checked)) .pp-def { opacity: .45; }
.pp-os-pick { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; cursor: pointer; min-width: 0; margin: 0; }
.pp-os-src { min-width: 0; overflow-wrap: anywhere; }
.pp-os-src small { font-weight: 500; font-size: .7rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 99px; }
.pp-os li > input[type="text"] { width: 100%; min-width: 0; padding: 7px 10px; font-size: .9rem; }
.pp-def { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-2); cursor: pointer; margin: 0; white-space: nowrap; }
.pp-def:has(input:checked) { color: var(--accent); font-weight: 600; }
.pp-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.pp-link:hover { text-decoration: none; }
.pp-empty { padding: 18px; border: 1.5px dashed var(--border); border-radius: var(--r-md); color: var(--text-2); text-align: center; }
@media (max-width: 640px) {
  .pp-modes { grid-template-columns: 1fr; }
  .pp-os li { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-os li > input[type="text"] { grid-column: 1 / -1; grid-row: 2; }
  .pp .pn-foot { flex-direction: column; align-items: stretch; }
  .pp .pn-foot .btn { width: 100%; }
}

/* v0.27 masters list on the plan provisioning card */
.pp-list-head, .pp-edit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pp-list-head { flex-direction: column; align-items: flex-start; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-pl { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pp-pl.is-off { opacity: .6; }
.pp-num { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--surface-2, var(--border)); color: var(--text-2); }
.pp-pl-main { min-width: 0; display: grid; gap: 2px; }
.pp-pl-main .pn-meta { display: block; white-space: normal; overflow-wrap: anywhere; }
.pp-role { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.pp-role.is-first { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.pp-warn { color: var(--warn, #9a6700); }
.pp-pl-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pp-pl-act form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.pp-icon { min-width: 32px; padding-inline: 8px; }
.pp-remove { color: var(--danger, #b42318); }
.pp-add { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: var(--r-md); color: var(--text); text-decoration: none; font-weight: 600; }
.pp-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.pp-add small { font-weight: 400; color: var(--text-2); }
.pp-add > span { color: var(--accent); font-size: 1.1rem; }
.pp-login { display: grid; gap: 10px; }
@media (max-width: 640px) {
  .pp-pl { grid-template-columns: auto auto minmax(0, 1fr); }
  .pp-pl-act { grid-column: 1 / -1; justify-content: flex-start; }
}
.pp-pl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pp-pl-main .pn-meta { font-size: .85rem; color: var(--text-2); }
.pp-pl-main .pp-warn { color: var(--warn, #9a6700); }

/* v0.32 order page groups */
.order-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.order-groups a { padding: 4px 10px; border: 1px solid var(--border); border-radius: 99px; font-size: .85rem; text-decoration: none; color: var(--text); }
.order-groups a:hover { border-color: var(--accent); background: var(--accent-soft); }
.order-group-h { margin: 18px 0 8px; font-size: 1.05rem; }
.plan-features { margin: 12px 0 0; padding-left: 18px; columns: 2; column-gap: 24px; font-size: .9rem; color: var(--text-2); }
.plan-features li { break-inside: avoid; margin: 2px 0; }
@media (max-width: 640px) { .plan-features { columns: 1; } }
/* v0.33 Website → Prices for generator websites */
.site-links { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-links .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.site-links form { margin: 0; }
.filters-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.filters-row select, .filters-row input[type=search] { width: auto; min-width: 160px; }
.site-prices .row-group th { background: var(--bg-2, #f4f5f7); text-align: left; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); padding: 10px 14px; }
.site-prices input.w-sm { width: 96px; }
.filters-row.plain { padding: 0 0 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg a { padding: 7px 12px; font-size: .9rem; text-decoration: none; color: var(--text-2); }
.seg a[aria-current] { background: var(--ink, #14181c); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* v0.34.2 currency picker on order pages */
.cur-pick-order { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: .9rem; color: var(--text-2); }
.cur-pick-order select { width: auto; min-width: 104px; padding: 6px 30px 6px 10px; }
.cfg-head { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; justify-content: space-between; margin: 0 0 24px; }
.cfg-head h1 { margin: 0 auto 0 0; }
@media (max-width: 640px) { .cur-pick-order { margin: 0; } .cfg-head { margin-bottom: 20px; } .cfg-head .cur-pick-order { margin: 0; } }
/* v0.35: short sign-up and welcome discount */
.mid-narrow { max-width: 460px; }
.welcome-pitch { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin: 0 0 16px; border: 1px dashed var(--ok); border-radius: var(--r-sm); background: var(--ok-bg); font-weight: 600; font-size: .95rem; }
.welcome-pitch .ico { flex: none; width: 20px; height: 20px; color: var(--ok); }

/* ---------- v0.35.3: header cart button, cart slide-over (desktop) / bottom sheet (phones), "added" toast ---------- */
.cart-btn { position: relative; order: 2; flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--hdr-strong); border: 1px solid var(--hdr-border); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.cart-btn:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(17, 24, 39, .08); }
.cart-btn:active { transform: scale(.96); }
.cart-btn .ico { width: 20px; height: 20px; }
.cart-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--hdr-bg); font: 800 .7rem/16px var(--f-body); text-align: center; }
.top-row > .logo { order: 0; } .top-row > .nav-panel, .top-row > .top-actions { order: 1; } .top-row > .nav-toggle { order: 3; }
.layout-top .top-row > .cart-btn { margin-left: 4px; }
@media (min-width: 901px) {
  .layout-side .top-row > .cart-btn { position: fixed; top: 18px; right: 24px; z-index: 30; box-shadow: 0 6px 18px rgba(17, 24, 39, .08); }
  .layout-side.has-cart main .wrap { padding-right: 88px; }
}
@media (max-width: 900px) {
  .top-row > .cart-btn { margin-left: auto; }
  .top-row > .cart-btn ~ .nav-toggle { margin-left: 0; }
  .top-row > .cart-btn ~ .top-actions { margin-left: 0; }
  .layout-top .top-row > .top-actions { order: 1; }
}

.cart-drawer[hidden] { display: none; }
.cart-drawer { position: fixed; inset: 0; z-index: 90; }
.cd-scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, .38); opacity: 0; transition: opacity .25s ease; }
.cd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); box-shadow: -24px 0 60px rgba(17, 24, 39, .2); transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.cart-drawer.is-open .cd-scrim { opacity: 1; }
.cart-drawer.is-open .cd-panel { transform: none; }
.cd-grab { display: none; }
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.cd-head h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.cd-head p { margin: 2px 0 0; font-size: .8rem; color: var(--text-2); }
.cd-x { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cd-x:hover { background: var(--hover); }
.cd-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.cd-line { display: flex; gap: 12px; align-items: flex-start; }
.cd-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; }
.cd-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cd-what b { font-size: .95rem; }
.cd-what span { font-size: .8rem; color: var(--text-2); }
.cd-what .cd-err { color: var(--err); font-weight: 600; }
.cd-line.is-bad .cd-price { text-decoration: line-through; color: var(--text-2); }
.cd-price { flex: none; font-weight: 700; font-size: .95rem; }
.cd-disc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: .85rem; font-weight: 600; }
.cd-disc span { display: inline-flex; align-items: center; gap: 8px; }
.cd-disc .ico { width: 16px; height: 16px; }
.cd-disc.is-wait { background: var(--surface-2); color: var(--text-2); font-weight: 500; }
.cd-edit { align-self: flex-start; font-size: .82rem; color: var(--text-2); }
.cd-foot { padding: 18px 24px 22px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.cd-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--text-2); }
.cd-total { color: var(--text); font-weight: 700; }
.cd-total b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.cd-go { min-height: 52px; font-size: 1rem; gap: 8px; border-radius: 14px; }
.cd-go .ico { width: 18px; height: 18px; }
.cd-go[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.cd-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .78rem; color: var(--text-2); }
.cd-note .ico { width: 14px; height: 14px; }
html.cart-open { overflow: hidden; }
@media (max-width: 640px) {
  .cd-panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; transform: translateY(100%); box-shadow: 0 -20px 50px rgba(17, 24, 39, .22); }
  .cd-grab { display: block; align-self: center; width: 40px; height: 5px; margin: 10px 0 0; border-radius: 3px; background: var(--border); }
  .cd-head { padding: 14px 20px 16px; } .cd-body { padding: 16px 20px; } .cd-foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .cd-panel, .cd-scrim, .toast { transition: none; } }

.toast { position: fixed; left: 50%; top: 20px; z-index: 95; transform: translate(-50%, -16px); opacity: 0; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 9px 16px 9px 9px; border-radius: 999px; background: #111827; color: #FFFFFF; font-size: .88rem; box-shadow: 0 14px 34px rgba(17, 24, 39, .28); transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.no-js .toast, html:not(.js) .toast { position: static; transform: none; opacity: 1; margin: 12px auto; width: max-content; }
.toast-ok { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #047857; display: inline-flex; align-items: center; justify-content: center; }
.toast-ok .ico { width: 16px; height: 16px; color: #FFFFFF; stroke-width: 2.6; }
.toast a { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 4px; white-space: nowrap; }
.toast a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .toast { left: 12px; right: 12px; top: 12px; transform: translateY(-16px); border-radius: 16px; padding: 10px 14px 10px 10px; font-size: .85rem; }
  .toast.is-on { transform: none; }
  .toast > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
}

/* ---------- v0.36: plan list (order page): line tabs, category strip, sticky tools, plan cards ---------- */
.cat-intro { margin: -4px 0 18px; }
.cat-bar { position: sticky; top: 0; z-index: 20; margin: 0 0 22px; padding: 10px 0 12px; display: flex; flex-direction: column; gap: 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.cat-bar.is-stuck { box-shadow: 0 10px 24px -18px rgba(17, 24, 39, .35); }
.cat-lines { display: flex; width: max-content; margin: 0 0 12px; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; }
.cat-lines a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.cat-lines a span { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.cat-lines a:hover { color: var(--text); background: var(--hover); }
.cat-lines a[aria-current="page"] { background: var(--strong); color: var(--on-strong); }
.cat-lines a[aria-current="page"] span { background: var(--accent); color: var(--on-accent); }
.cat-groups { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: thin; }
.cat-groups a { scroll-snap-align: start; flex: none; display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cat-groups a b { font-size: .9rem; font-weight: 700; white-space: nowrap; }
.cat-groups a span { font-size: .74rem; color: var(--text-2); white-space: nowrap; }
.cat-groups a:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.cat-groups a[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -8px rgba(242, 179, 0, .6); background: var(--accent-soft); }
.cat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cat-tools[hidden] { display: none; }
.cat-search { flex: 1 1 260px; position: relative; display: flex; align-items: center; }
.cat-search .ico { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--text-2); pointer-events: none; }
.cat-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: .92rem; color: var(--text); box-sizing: border-box; }
.cat-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.cat-sel select { height: 44px; padding: 0 34px 0 12px; border-radius: 12px; border: 1px solid var(--border); background-color: var(--surface); font: inherit; font-size: .9rem; color: var(--text); width: auto; }
.cat-count { margin-left: auto; font-size: .82rem; color: var(--text-2); white-space: nowrap; }
.cat-sec { margin: 0 0 30px; scroll-margin-top: 190px; }
.cat-sec[hidden] { display: none; }
.cat-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.cat-sec-h h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.cat-sec-h span { font-size: .82rem; color: var(--text-2); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.cat-empty { padding: 40px 20px; text-align: center; color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: 16px; }
.cat-empty[hidden] { display: none; }

.pc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pc[hidden] { display: none; }
.pc:hover, .pc:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow: 0 18px 36px -20px rgba(17, 24, 39, .35); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.pc-tier { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.pc-t2 .pc-tier { background: #EAF1FF; color: #1D4ED8; }
.pc-t3 .pc-tier { background: var(--accent-soft); color: var(--accent-text); }
.pc-t4 .pc-tier { background: var(--strong); color: var(--on-strong); }
.pc-loc { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--text-2); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-loc .ico { width: 14px; height: 14px; flex: none; }
.pc-name { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.pc-name a { color: var(--text); text-decoration: none; }
.pc-name a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.pc-name a:focus-visible { outline: none; }
.pc:has(.pc-name a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.pc-specs li { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--text); line-height: 1.35; }
.pc-specs .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--text-2); }
.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }
.pc-price { display: flex; flex-direction: column; min-width: 0; }
.pc-amt { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.pc-amt small { font-size: .62em; font-weight: 700; color: var(--text-2); letter-spacing: 0; }
.pc-per { font-size: .74rem; color: var(--text-2); }
.pc-setup { font-size: .72rem; color: var(--ok); font-weight: 600; margin-top: 2px; }
.pc-go { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .86rem; text-decoration: none; transition: background .15s, gap .15s; }
.pc-go .ico { width: 16px; height: 16px; }
.pc:hover .pc-go { background: var(--accent-hover); gap: 9px; }
@media (max-width: 640px) {
  .cat-bar { position: static; padding-top: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .cat-count { margin-left: 0; width: 100%; }
  .cat-sel { flex: 1 1 140px; } .cat-sel select { width: 100%; }
  .pc-amt { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .pc, .cat-groups a { transition: none; } .pc:hover { transform: none; } }

/* v0.36.1: arrows on the category strip (shown only when it overflows; edges fade) */
.cat-strip { position: relative; }
.cat-strip.can-prev .cat-groups { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px); mask-image: linear-gradient(to right, transparent 0, #000 64px); }
.cat-strip.can-next .cat-groups { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 64px); mask-image: linear-gradient(to left, transparent 0, #000 64px); }
.cat-strip.can-prev.can-next .cat-groups { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.cat-arrow { position: absolute; top: calc(50% - 4px); z-index: 2; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(17, 24, 39, .14); cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; }
.cat-arrow[hidden] { display: none; }
.cat-arrow:hover { box-shadow: 0 8px 22px rgba(17, 24, 39, .2); border-color: var(--border-strong); }
.cat-arrow:active { transform: translateY(-50%) scale(.94); }
.cat-arrow .ico { width: 18px; height: 18px; }
.cat-prev { left: -6px; } .cat-prev .ico { transform: rotate(180deg); }
.cat-next { right: -6px; }
.cat-groups { scroll-behavior: smooth; }
@media (hover: none) and (max-width: 640px) { .cat-arrow { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .cat-groups { scroll-behavior: auto; } }

/* =====================================================================================================
   v0.37: website themes for HomeRDP (D top menu, E navy sidebar, F light sidebar). Colours, type and shapes from
   homerdp.com: ink #0E1B33, orange #FF7A45, blue #2F7BFF, Bricolage Grotesque headings over Inter, big radii.
   Shared rules use .site-look; each theme then sets its own header / menu.
   ===================================================================================================== */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
.theme-d, .theme-e, .theme-f {
  --bg: #F6F8FC; --surface: #FFFFFF; --surface-2: #F3F6FB; --hover: #EEF2F8; --text: #0E1B33; --text-2: #3C4A66;
  --border: #E2E8F3; --border-strong: #7D8AA3; --input-bg: #FFFFFF;
  --accent: #0E1B33; --accent-hover: #1E2D4D; --on-accent: #FFFFFF; --accent-soft: #FFF4EE; --accent-text: #B4471B;
  --strong: #0E1B33; --strong-hover: #1E2D4D; --on-strong: #FFFFFF; --strong-border: #0E1B33;
  --ghost-border: #D3DDEE; --ghost-hover: #EEF2F8;
  --hdr-bg: #FFFFFF; --hdr-text: #3C4A66; --hdr-strong: #0E1B33; --hdr-hover: #EEF2F8; --hdr-border: #E2E8F3;
  --cur-bg: #FFF4EE; --cur-text: #0E1B33; --cur-ico: #FF7A45;
  --ok: #15803D; --ok-bg: #ECFDF3; --ok-line: #A6E9BF; --warn: #8A3A12; --warn-bg: #FFF4EE; --warn-line: #FFD9C6;
  --err: #B42318; --err-bg: #FEF3F2; --err-line: #FECDCA; --info: #1D5FD6; --info-bg: #EAF3FF;
  --code-bg: #0E1B33; --code-text: #FFB089; --focus: #2F7BFF;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-head: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --h-weight: 800; --h-case: none; --h-track: -.03em; --h1: clamp(1.8rem, 3vw, 2.35rem); --h2: 1.25rem; --h3: 1.05rem;
  --label-case: uppercase; --label-track: .06em;
  --r-sm: 12px; --r-md: 18px; --shadow: 0 1px 2px rgba(14, 27, 51, .04);
  --ui-r: 18px; --ui-r-lg: 22px; --ui-r-sm: 12px; --ui-ctl: 12px;
  --ui-shadow: 0 1px 2px rgba(14, 27, 51, .04), 0 18px 40px -30px rgba(14, 27, 51, .35); --ui-lift: 0 24px 50px -28px rgba(14, 27, 51, .4);
  --site-orange: #FF7A45; --site-blue: #2F7BFF; --site-orange-ink: #8A3A12; --site-blue-bg: #EAF3FF; --site-blue-ink: #12408F;
}
/* the website's dotted paper with soft orange and blue light */
.theme-d body, .theme-e #main, .theme-f #main {
  background-color: var(--bg);
  background-image: radial-gradient(640px 420px at 6% 0%, rgba(255, 122, 69, .11), transparent 70%), radial-gradient(700px 460px at 100% 0%, rgba(47, 123, 255, .11), transparent 70%),
    radial-gradient(rgba(14, 27, 51, .085) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px; background-attachment: scroll; }
.site-look h1, .site-look h2, .site-look .pc-name, .site-look .cd-head h2 { font-family: var(--f-head); }
.site-look .logo { font: 800 1.3rem/1 var(--f-head); letter-spacing: -.02em; }
.site-look .logo-mark { width: 32px; height: 32px; }
.site-look .btn { border-radius: 14px; font-weight: 700; }
.site-look .btn-signal { box-shadow: 0 10px 22px -14px rgba(14, 27, 51, .7); }
.site-look .card, .site-look .stat, .site-look .table-wrap { border-radius: var(--ui-r); }
.site-look main a:not(.btn):not(.stat):not(.pc-go):not(.cd-go):hover { color: var(--site-orange-ink); }
.site-look .avatar { border-radius: 12px; background: var(--site-blue); color: #FFFFFF; border: 0; font-weight: 800; }
.site-look #main .page-head { background: radial-gradient(120% 170% at 0% 0%, rgba(255, 122, 69, .12) 0%, transparent 55%), radial-gradient(80% 150% at 100% 0%, rgba(47, 123, 255, .12) 0%, transparent 60%), var(--surface); }
.site-look #main .page-head h1 { font-weight: 800; letter-spacing: -.035em; }
/* plan list and cart in the website style: orange highlights, navy actions */
.site-look .cart-n { background: var(--site-orange); color: #0E1B33; }
.site-look .cat-lines { border-radius: 999px; padding: 5px; }
.site-look .cat-lines a { border-radius: 999px; }
.site-look .cat-lines a[aria-current="page"] span { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.site-look .cat-groups a { border-radius: 16px; }
.site-look .cat-groups a[aria-current="true"] { border-color: var(--site-orange); box-shadow: 0 0 0 1px var(--site-orange), 0 10px 22px -14px rgba(255, 122, 69, .7); background: #FFF4EE; }
.site-look .cat-search input, .site-look .cat-sel select { border-radius: 14px; height: 48px; }
.site-look .cat-search input:focus { outline-color: var(--site-blue); }
.site-look .pc { border-radius: 22px; padding: 20px; }
.site-look .pc:hover, .site-look .pc:focus-within { border-color: var(--site-orange); box-shadow: 0 24px 50px -28px rgba(14, 27, 51, .4); }
.site-look .pc-name { font-size: 1.2rem; letter-spacing: -.02em; }
.site-look .pc-specs .ico { color: var(--site-orange); }
.site-look .pc-loc { font-family: var(--f-mono); font-size: .72rem; }
.site-look .pc-t1 .pc-tier { background: #EEF2F8; color: #3C4A66; }
.site-look .pc-t2 .pc-tier { background: var(--site-blue-bg); color: var(--site-blue-ink); }
.site-look .pc-t3 .pc-tier { background: #FFF4EE; color: var(--site-orange-ink); box-shadow: inset 0 0 0 1px #FFD9C6; }
.site-look .pc-t4 .pc-tier { background: #0E1B33; color: #FFFFFF; }
.site-look .pc-amt { font-family: var(--f-head); font-size: 1.75rem; letter-spacing: -.035em; }
.site-look .pc-foot { border-top-style: solid; }
.site-look .pc-go { height: 44px; border-radius: 14px; background: #0E1B33; color: #FFFFFF; }
.site-look .pc:hover .pc-go { background: #1E2D4D; }
.site-look .cd-ico { background: #FFF4EE; color: var(--site-orange); }
.site-look .cd-total b { font-family: var(--f-head); }
.site-look .cd-go { background: #0E1B33; color: #FFFFFF; }
.site-look .welcome-pitch { border-color: var(--site-orange); background: #FFF4EE; }
.site-look .welcome-pitch .ico { color: var(--site-orange); }
.site-look .toast-ok { background: #16A34A; }
.site-look .toast a { color: #FFB089; }
.sw-d { background: #F6F8FC; } .sw-d i:nth-child(1) { background: #FFFFFF; box-shadow: 0 0 0 1px #E2E8F3; } .sw-d i:nth-child(2) { background: #0E1B33; } .sw-d i:nth-child(3) { background: #FF7A45; }
.sw-e { background: #F6F8FC; } .sw-e i:nth-child(1) { background: #0E1B33; } .sw-e i:nth-child(2) { background: #FFFFFF; box-shadow: 0 0 0 1px #E2E8F3; } .sw-e i:nth-child(3) { background: #FF7A45; }
.sw-f { background: #F6F8FC; } .sw-f i:nth-child(1) { background: #EEF2F8; box-shadow: 0 0 0 1px #E2E8F3; } .sw-f i:nth-child(2) { background: #FFFFFF; box-shadow: 0 0 0 1px #E2E8F3; } .sw-f i:nth-child(3) { background: #2F7BFF; }

/* D: website top menu: a floating white pill bar like homerdp.com */
.theme-d.layout-top .top { background: transparent; color: var(--hdr-text); padding: 14px 0 0; position: sticky; top: 0; z-index: 40; }
.theme-d.layout-top .top-row { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 40px -30px rgba(14, 27, 51, .45); padding: 8px 10px 8px 18px; min-height: 64px; }
.theme-d.layout-top .nav { justify-content: center; }
.theme-d.layout-top .nav a { border-radius: 999px; font-weight: 600; color: var(--text); padding: 9px 14px; }
.theme-d.layout-top .nav a[aria-current="page"] { background: #FFF4EE; color: var(--site-orange-ink); }
.theme-d.layout-top .nav a[aria-current="page"] .ico { color: var(--site-orange); }
.theme-d.layout-top .logo .tag { background: #EEF2F8; color: #5B6884; }
.theme-d.layout-top .who { padding: 4px 12px 4px 4px; border-radius: 16px; background: #0E1B33; color: #FFFFFF; }
.theme-d.layout-top .who-name { color: #FFFFFF; }
.theme-d.layout-top .top-actions .linkbtn { color: var(--text-2); }
.theme-d.layout-top .cart-btn { border-radius: 14px; }
.theme-d.layout-top .cat-bar { top: 92px; }
@media (max-width: 900px) {
  .theme-d.layout-top .top { padding-top: 10px; }
  .theme-d.layout-top .top-row { border-radius: 18px; padding: 8px 10px 8px 14px; }
  .theme-d.layout-top .cat-bar { top: 0; }
  .theme-d.layout-top .nav { justify-content: flex-start; }
}

/* E: navy sidebar with an orange current item */
.theme-e { --hdr-bg: #0E1B33; --hdr-text: #B8C2D6; --hdr-strong: #FFFFFF; --hdr-hover: rgba(255, 255, 255, .07); --hdr-border: rgba(255, 255, 255, .1);
  --cur-bg: rgba(255, 122, 69, .16); --cur-text: #FFFFFF; --cur-ico: #FF7A45; }
.theme-e .logo-house .hm-body { fill: #FFFFFF; }
.theme-e .logo .tag { background: rgba(255, 255, 255, .1); color: #B8C2D6; }
.theme-e .nav a { border-radius: 14px; font-weight: 600; }
.theme-e .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 #FF7A45; }
.theme-e .nav-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #FFFFFF; }
.theme-e .top .cart-btn { background: #FFFFFF; color: #0E1B33; border-color: #E2E8F3; }
.theme-e .cart-n { border-color: #0E1B33; }
@media (min-width: 901px) {
  .theme-e.layout-side .side-help { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #B8C2D6; }
  .theme-e.layout-side .side-help b, .theme-e.layout-side .side-help a { color: #FFFFFF; }
  .theme-e.layout-side .top-row > .cart-btn { border-color: #E2E8F3; }
  .theme-e .cart-n { border-color: #FFFFFF; }
}
.theme-e .avatar { background: var(--site-blue); }
.theme-e .linkbtn:hover { color: #FFFFFF; }

/* F: light sidebar (the site's soft grey-blue) with white current item */
.theme-f { --hdr-bg: #EEF2F8; --hdr-hover: rgba(255, 255, 255, .7); --cur-bg: #FFFFFF; --cur-text: #0E1B33; --cur-ico: #FF7A45; }
.theme-f .nav a { border-radius: 14px; font-weight: 600; border: 1px solid transparent; }
.theme-f .nav a[aria-current="page"] { border-color: var(--border); box-shadow: 0 6px 18px -10px rgba(14, 27, 51, .35); }
.theme-f .side-help { background: #FFFFFF !important; }
.theme-f .avatar { background: #0E1B33; }
.theme-f .logo .tag { background: #FFFFFF; }

/* v0.37.1: order page header: title (+ help link) left, currency picker on the right; price above a full-width Configure */
.cat-head { align-items: center; }
.cat-title { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cat-title .help-link, .cat-title a { font-size: .85rem; }
.page-head .cat-title .help-link { margin-left: 0; align-self: flex-start; }
.cat-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cat-head-side .cur-pick-order { margin: 0; }
.pc-foot { flex-direction: column; align-items: stretch; gap: 14px; }
.pc-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; }
.pc-price .pc-setup { flex-basis: 100%; margin-top: 0; }
.pc-go { justify-content: center; width: 100%; height: 46px; }
@media (max-width: 640px) { .cat-head-side { margin-left: 0; width: 100%; } }

/* ---------- v0.38: cart page: server cards with descriptions + a clean order summary ---------- */
.co-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.co-head h1 { margin: 0 0 4px; }
.co-head p { margin: 0; }
.co-more { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--text); }
.co-more .ico { width: 16px; height: 16px; }
.co-more:hover { border-color: var(--border-strong); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .co-grid { grid-template-columns: 1fr; } }
.co-items { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.co-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r-lg, 18px); padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--ui-shadow, none); }
.co-item.is-bad { border-color: var(--err-line); }
.co-item-top { display: flex; align-items: flex-start; gap: 14px; }
.co-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-text); }
.co-ico .ico { width: 22px; height: 22px; }
.co-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.co-what h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.co-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.co-tag { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.co-tag-soft { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .74rem; }
.co-loc { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--text-2); }
.co-loc .ico { width: 14px; height: 14px; }
.co-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; }
.co-price b { font: 800 1.35rem/1.15 var(--f-head); letter-spacing: -.02em; white-space: nowrap; }
.co-price span { font-size: .78rem; color: var(--text-2); }
.co-price .co-pm { color: var(--ok); font-weight: 600; }
.co-specs { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px dashed var(--border); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; }
.co-specs li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; line-height: 1.35; }
.co-specs .ico { width: 17px; height: 17px; margin-top: 1px; color: var(--text-2); }
.site-look .co-specs .ico { color: var(--site-orange); }
.co-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.co-meta > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; color: var(--text); }
.co-meta .ico { width: 14px; height: 14px; color: var(--text-2); }
.co-meta .co-setup { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); font-weight: 600; }
.co-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--err-bg); color: var(--err); font-weight: 600; font-size: .88rem; }
.co-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
.co-term { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 280px; }
.co-term label { font-size: .85rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.co-term select { flex: 1 1 auto; max-width: 340px; height: 44px; border-radius: 12px; }
.co-remove { margin: 0; }
.co-remove .linkbtn { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: .88rem; }
.co-remove .linkbtn .ico { width: 15px; height: 15px; }
.co-remove .linkbtn:hover { color: var(--err); }

.co-sum { position: sticky; top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r-lg, 20px); padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--ui-lift, 0 14px 30px -18px rgba(16, 24, 40, .35)); }
.theme-d .co-sum { top: 100px; }
.co-sum h2 { margin: 0; font-size: 1.15rem; }
.co-rows { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.co-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--text-2); }
.co-rows dt { display: inline-flex; align-items: center; gap: 6px; }
.co-rows dd { margin: 0; color: var(--text); font-weight: 600; white-space: nowrap; }
.co-rows .ico { width: 15px; height: 15px; }
.co-rows .co-off, .co-rows .co-off dd { color: var(--ok); }
.co-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 2px; border-top: 1px solid var(--border); }
.co-total span { font-weight: 700; font-size: 1rem; }
.co-total b { font: 800 2rem/1 var(--f-head); letter-spacing: -.03em; white-space: nowrap; }
.co-fine { margin: 0; font-size: .8rem; color: var(--text-2); line-height: 1.5; }
.co-fine-tight { margin-top: -8px; }
.co-gift { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ok-bg); border: 1px dashed var(--ok); color: var(--text); }
.co-gift > .ico { width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }
.co-gift > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; }
.co-gift > div span { color: var(--text-2); font-size: .8rem; }
.co-gift form { margin: 0; }
.co-gift.is-wait { background: var(--surface-2); border-color: var(--border-strong); }
.co-gift.is-wait > .ico { color: var(--text-2); }
.co-gift.is-bad { background: var(--err-bg); border-color: var(--err); }
.site-look .co-gift:not(.is-wait):not(.is-bad) { background: #FFF4EE; border-color: var(--site-orange); }
.site-look .co-gift:not(.is-wait):not(.is-bad) > .ico { color: var(--site-orange); }
.co-coupon summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--text); }
.co-coupon summary span { font-weight: 400; color: var(--text-2); }
.co-coupon .coupon-row { margin-top: 10px; }
.co-cur { display: flex; align-items: center; gap: 10px; margin: 0; }
.co-cur label { font-size: .85rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.co-cur select { flex: 1 1 auto; height: 44px; border-radius: 12px; }
.co-go-box { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.co-terms { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-2); }
.co-terms a { color: var(--text); }
.co-go { width: 100%; min-height: 56px; justify-content: center; text-align: center; gap: 10px; font-size: 1.02rem; border-radius: 16px; }
.co-go .ico { width: 18px; height: 18px; }
.co-go-alt { width: 100%; justify-content: center; }
.co-pay { margin: -4px 0 0; text-align: center; font-size: .78rem; color: var(--text-2); }
@media (max-width: 640px) {
  .co-item { padding: 16px; }
  .co-item-top { flex-wrap: wrap; }
  .co-price { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
  .co-sum { position: static; }
}

/* ---------- v0.38.1: modern dropdowns everywhere: chevron in a soft round chip, solid on hover/focus ---------- */
select:not([multiple]):not([size]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23EEF2F8'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%233C4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 24px 24px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
select:not([multiple]):not([size]):hover { border-color: var(--border-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230E1B33'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select:not([multiple]):not([size]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230E1B33'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select:not([multiple]):not([size]):disabled { cursor: default; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23EEF2F8'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%233C4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: .7; }
select::-ms-expand { display: none; }
.theme-b select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23262C33'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%23E6E8EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.theme-b select:not([multiple]):not([size]):hover, .theme-b select:not([multiple]):not([size]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23F2B300'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%2314181C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.theme-c select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23CDD1D3'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%2323282B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.theme-c select:not([multiple]):not([size]):hover, .theme-c select:not([multiple]):not([size]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2323282B'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%23F2B300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.site-look select:not([multiple]):not([size]):hover, .site-look select:not([multiple]):not([size]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230E1B33'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-color: #0E1B33; }
/* small dropdowns (tables, compact tools) keep a smaller chip */
.role-form select, .lc-tools select, .lc-bar select[data-quick], .fw-table select, .term-line select { padding-right: 34px; background-size: 20px 20px; background-position: right 7px center; }
select option { color: var(--text); background: var(--surface); }

/* ---------- v0.38.4: invoice page: hero with amount due, the invoice as a sheet, pay panel with progress ---------- */
.iv-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 28px; margin: 0 0 22px;
  border: 1px solid var(--border); border-radius: var(--ui-r-lg, 20px); overflow: hidden; isolation: isolate; box-shadow: var(--ui-shadow, none);
  background: radial-gradient(120% 170% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%), radial-gradient(80% 150% at 100% 0%, color-mix(in srgb, var(--info) 10%, transparent) 0%, transparent 60%), var(--surface); }
.site-look .iv-hero { background: radial-gradient(120% 170% at 0% 0%, rgba(255, 122, 69, .13) 0%, transparent 55%), radial-gradient(80% 150% at 100% 0%, rgba(47, 123, 255, .12) 0%, transparent 60%), var(--surface); }
.iv-hero-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.iv-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.iv-kicker .ico { width: 15px; height: 15px; }
.iv-hero h1 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.035em; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.iv-chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .8rem; color: var(--text); }
.iv-chips .ico { width: 14px; height: 14px; color: var(--text-2); }
.iv-chips .is-soon { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.iv-chips .is-late { border-color: var(--err-line); background: var(--err-bg); color: var(--err); font-weight: 600; }
.iv-hero-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.iv-hero-amt b { font: 800 clamp(2rem, 4vw, 2.9rem)/1 var(--f-head); letter-spacing: -.04em; white-space: nowrap; }
.iv-hero-amt > span:last-child { font-size: .82rem; color: var(--text-2); }
.iv-paid .iv-hero-amt b { color: var(--ok); }
.iv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .iv-grid { grid-template-columns: 1fr; } .iv-hero-amt { align-items: flex-start; text-align: left; } }
.iv-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.iv-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r-lg, 20px); padding: 26px 28px; box-shadow: var(--ui-shadow, none); display: flex; flex-direction: column; gap: 22px; }
.iv-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--border); }
@media (max-width: 640px) { .iv-parties { grid-template-columns: 1fr; } .iv-sheet, .iv-hero { padding: 20px; } }
.iv-parties > div { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.iv-parties b { color: var(--text); font-size: .98rem; margin-bottom: 2px; }
.iv-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.iv-lines, .iv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.iv-lines li, .iv-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.iv-lines li:first-child, .iv-list li:first-child { padding-top: 0; }
.iv-lines li:last-child, .iv-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.iv-li-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-text); }
.site-look .iv-li-ico { background: #FFF4EE; color: var(--site-orange); }
.iv-li-ico .ico { width: 19px; height: 19px; }
.iv-li-ico.ok, .iv-lines .is-off .iv-li-ico { background: var(--ok-bg); color: var(--ok); }
.iv-li-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.iv-li-what b { font-size: .95rem; font-weight: 600; line-height: 1.4; }
.iv-li-what span { font-size: .8rem; color: var(--text-2); }
.iv-li-amt { flex: none; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.iv-lines .is-off .iv-li-amt, .iv-lines .is-off .iv-li-what b { color: var(--ok); }
.iv-totals { margin: 0 0 0 auto; width: min(100%, 340px); display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.iv-totals > div { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; color: var(--text-2); }
.iv-totals dd { margin: 0; color: var(--text); font-weight: 600; white-space: nowrap; }
.iv-totals .iv-total { align-items: baseline; color: var(--text); font-weight: 700; font-size: 1rem; }
.iv-totals .iv-total dd { font: 800 1.6rem/1 var(--f-head); letter-spacing: -.03em; }
.iv-totals .iv-incl { font-size: .8rem; }
.iv-totals .iv-incl dd { font-weight: 500; color: var(--text-2); }
.iv-totals .iv-paid, .iv-totals .iv-paid dd { color: var(--ok); }
.iv-note { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: .88rem; }
.iv-note p { margin: 4px 0 0; }
.iv-docs { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-docs .btn { border-radius: 14px; gap: 8px; }
.iv-docs .btn .ico { width: 16px; height: 16px; transform: rotate(90deg); }
.iv-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r-lg, 20px); padding: 22px 26px; }
.iv-block h2 { margin: 0 0 14px; font-size: 1.05rem; }
.iv-pay { position: sticky; top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r-lg, 20px); padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--ui-lift, 0 14px 30px -18px rgba(16, 24, 40, .35)); }
.theme-d .iv-pay { top: 100px; }
@media (max-width: 1000px) { .iv-pay { position: static; } }
.iv-steps { list-style: none; margin: 0 0 4px; padding: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-bottom: 1px solid var(--border); position: relative; }
.iv-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .74rem; font-weight: 600; color: var(--text-2); position: relative; }
.iv-steps li::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.iv-steps li:first-child::before { display: none; }
.iv-steps li.is-done::before, .iv-steps li.is-now::before { background: var(--ok); }
.iv-steps span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; background: var(--surface-2); border: 2px solid var(--border); color: var(--text-2); }
.iv-steps span .ico { width: 15px; height: 15px; stroke-width: 3; }
.iv-steps .is-done span { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.iv-steps .is-done { color: var(--text); }
.iv-steps .is-now span { background: var(--strong); border-color: var(--strong); color: var(--on-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--strong) 15%, transparent); }
.site-look .iv-steps .is-now span { background: var(--site-orange); border-color: var(--site-orange); color: #0E1B33; box-shadow: 0 0 0 4px rgba(255, 122, 69, .2); }
.iv-steps .is-now { color: var(--text); }
.iv-pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.iv-pay-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.iv-pay-head .help-link { margin-left: 0; }
.iv-fine { margin: -6px 0 0; font-size: .82rem; color: var(--text-2); }
.iv-methods { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.iv-method { width: 100%; min-height: 54px; justify-content: space-between; border-radius: 14px; padding: 10px 18px; font-size: .98rem; }
.iv-nopay { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.iv-nopay .ico { flex: none; width: 20px; height: 20px; color: var(--text-2); margin-top: 2px; }
.iv-nopay p { margin: 0; font-size: .9rem; }
.iv-secure { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-2); }
.iv-secure .ico { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ok); }
.iv-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0; }
.iv-state h2 { margin: 6px 0 0; font-size: 1.1rem; }
.iv-state p { margin: 0; }
.iv-state-ico { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); }
.iv-state-ico .ico { width: 26px; height: 26px; }
.iv-state-paid .iv-state-ico { background: var(--ok-bg); color: var(--ok); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 10%, transparent); }
@media (max-width: 1000px) { .iv-g-unpaid .iv-pay { order: -1; } }

/* v0.38.5 ticket form: full width, editor grows with the page */
.tk-form { max-width: none; }
.tk-form .row2 { grid-template-columns: 1fr 1fr; }
.tk-form .rt-editor textarea { min-height: 260px; font-size: .98rem; line-height: 1.55; padding: 14px 16px; }
.tk-form .rt-editor { border-radius: 12px; }
.tk-form .rt-bar { border-radius: 12px 12px 0 0; padding: 6px 10px; }
.tk-form > .btn-signal[type=submit] { min-width: 180px; }
.reply-card .rt-editor textarea { min-height: 140px; }
@media (max-width: 640px) { .tk-form .row2 { grid-template-columns: 1fr; } .tk-form > .btn-signal[type=submit] { width: 100%; } }
.tk-form input[type=file], .reply-card input[type=file] { font: .9rem var(--f-body); color: var(--text-2); }
.tk-form input[type=file]::file-selector-button, .reply-card input[type=file]::file-selector-button { font: 600 .88rem var(--f-body); color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; margin-right: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.tk-form input[type=file]::file-selector-button:hover, .reply-card input[type=file]::file-selector-button:hover { border-color: var(--accent); background: var(--surface); }

/* v0.38.6 guest header: Log in / Sign up pills, aligned on every screen size */
.top-actions.guest-actions { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; border-top: 0; padding-top: 0; }
.guest-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; font: 600 .9rem/1 var(--f-body); text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.guest-btn .ico { width: 16px; height: 16px; flex: none; }
.guest-login { color: var(--hdr-strong, #fff); border: 1px solid var(--hdr-border, rgba(255,255,255,.18)); background: rgba(255, 255, 255, .06); }
.guest-login:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); }
.guest-join { color: #fff; background: var(--accent); border: 1px solid transparent; box-shadow: 0 6px 16px -6px var(--accent); }
.guest-join:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px var(--accent); }
.guest-join .ico { transition: transform .15s; } .guest-join:hover .ico { transform: translateX(2px); }
.guest-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-d.layout-top .guest-login { color: var(--text); border-color: var(--border); background: var(--surface); }
.theme-d.layout-top .guest-login:hover { border-color: var(--accent); background: var(--surface); }
@media (max-width: 900px) {
  .top-actions.guest-actions { margin-left: auto; border-top: 0; padding-top: 0; justify-content: flex-end; }
  .top-row:has(.guest-actions) { flex-wrap: nowrap; }
}
@media (max-width: 420px) {
  .guest-btn { height: 38px; padding: 0 13px; font-size: .86rem; }
  .guest-login .ico { display: none; }
  .guest-join .ico { display: none; }
}
.theme-e .guest-join { background: linear-gradient(135deg, #FF8A4C, #FF5B3A); box-shadow: 0 8px 20px -8px rgba(255, 106, 64, .8); }
.theme-e .guest-join:hover { box-shadow: 0 12px 26px -8px rgba(255, 106, 64, .9); }
/* guest with items in the cart: logo, Log in, Sign up, cart; on small phones Sign up folds into Log in (the login page links to sign-up) */
.top-row:has(.guest-actions) > .cart-btn { order: 2; margin-left: 0; }
.top-row:has(.guest-actions) { flex-wrap: nowrap; }
.top-row:has(.guest-actions) > .logo { min-width: 0; }
@media (max-width: 480px) {
  .top-row:has(.guest-actions) { gap: 8px; }
  .top-row:has(.guest-actions):has(> .cart-btn) .guest-join { display: none; }
  .top-row:has(.guest-actions):has(> .cart-btn) .guest-login { background: var(--accent); border-color: transparent; color: #fff; }
  .theme-e .top-row:has(.guest-actions):has(> .cart-btn) .guest-login { background: linear-gradient(135deg, #FF8A4C, #FF5B3A); }
}
.top-row > .top-actions.guest-actions, .top-row > .cart-btn ~ .top-actions.guest-actions { margin-left: auto; }
.theme-c .cart-btn { background: rgba(255, 255, 255, .06); }
.cart-btn:focus:not(:focus-visible), .guest-btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* v0.38.8 cart: Remove is a small pill at the right end of the actions row, on every screen size */
.co-remove { margin: 0 0 0 auto; }
.co-remove .linkbtn, main .co-remove .linkbtn { height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .85rem; line-height: 1; transition: color .15s, border-color .15s, background .15s; }
main .co-remove .linkbtn:hover, main .co-remove .linkbtn:focus-visible { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
@media (max-width: 560px) {
  .co-actions { row-gap: 12px; }
  .co-term { flex-basis: 100%; }
  .co-term select { max-width: none; }
}

/* v0.38.9 order page on phones: product lines as a full-width segmented control, categories as compact swipeable chips */
.cat-groups a span em, .cat-groups a span i { font-style: normal; }
.cat-lines::-webkit-scrollbar, .cat-groups::-webkit-scrollbar { display: none; }
.cat-lines, .cat-groups { scrollbar-width: none; }
@media (max-width: 640px) {
  .cat-lines, .site-look .cat-lines { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 4px; padding: 4px; border-radius: 16px; overflow: visible; }
  .cat-lines a, .site-look .cat-lines a { flex-direction: column; justify-content: center; gap: 3px; padding: 9px 4px; min-width: 0; border-radius: 12px; font-size: .84rem; line-height: 1.15; text-align: center; white-space: normal; }
  .cat-lines a span { font-size: .68rem; padding: 1px 7px; }
  .cat-arrow { display: none !important; }
  .cat-strip { margin: 0 calc(-1 * var(--gutter)); }
  .cat-groups { gap: 8px; padding: 2px var(--gutter) 4px; margin: 0; scroll-padding-inline: var(--gutter); }
  .cat-strip.can-prev .cat-groups, .cat-strip.can-next .cat-groups, .cat-strip.can-prev.can-next .cat-groups { -webkit-mask-image: none; mask-image: none; }
  .cat-groups a, .site-look .cat-groups a { flex-direction: row; align-items: center; gap: 8px; min-width: 0; height: 42px; padding: 0 8px 0 15px; border-radius: 999px; }
  .cat-groups a b { font-size: .86rem; }
  .cat-groups a span { display: inline-flex; }
  .cat-groups a span i { display: none; }
  .cat-groups a span em { min-width: 22px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); font-size: .72rem; font-weight: 700; }
  .cat-groups a[aria-current="true"] span em { background: var(--accent); color: var(--on-accent); }
  .site-look .cat-groups a[aria-current="true"] span em { background: var(--site-orange, var(--accent)); color: #fff; }
  .cat-groups a:hover { transform: none; }
}

/* v0.39 SWIFT bank transfer page */
.sw { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.sw-main { display: grid; gap: 18px; min-width: 0; }
.sw-side { display: grid; gap: 16px; position: sticky; top: 88px; }
.sw-send { padding: 22px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 60%); }
.sw-eyebrow { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.sw-h { margin: 6px 0 -4px; font-size: 1.05rem; }
.sw-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.sw-bank { padding: 18px 20px 10px; }
.sw-bank header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.sw-bank header b { display: block; font-size: 1.02rem; }
.sw-bank header span:not(.sw-bank-ico) { font-size: .78rem; color: var(--text-2); }
.sw-bank-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft, var(--surface-2)); color: var(--accent); }
.sw-bank-ico .ico { width: 20px; height: 20px; }
.sw-row { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.sw-row:last-child { border-bottom: 0; }
.sw-k { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.sw-v { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sw-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 2px 0; font-size: .93rem; color: var(--text); text-overflow: ellipsis; }
.sw-in:focus { outline: none; }
.sw-key .sw-in { font-weight: 700; letter-spacing: .02em; }
.sw-big { border-bottom: 0; padding: 6px 0; }
.sw-big .sw-in { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.sw-copy { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 .78rem var(--f-body); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.sw-copy:hover { border-color: var(--accent); color: var(--accent); }
.sw-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.sw-tip .ico { width: 18px; height: 18px; flex: none; color: var(--ok, #16a34a); margin-top: 2px; }
.sw-tip p { margin: 0; font-size: .88rem; color: var(--text-2); }
.sw-tip b { color: var(--text); }
.sw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sw-steps li { display: flex; gap: 12px; }
.sw-steps li > span { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; background: var(--strong); color: var(--on-strong); }
.sw-steps b { font-size: .93rem; }
.sw-steps p { margin: 3px 0 0; font-size: .85rem; color: var(--text-2); line-height: 1.5; }
.sw-report .field { margin-bottom: 12px; }
.sw-fine { margin: 10px 0 0; text-align: center; }
.sw-reported { display: flex; gap: 12px; }
.sw-reported > span { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ok, #16a34a) 14%, transparent); color: var(--ok, #16a34a); }
.sw-reported p { margin: 4px 0 0; font-size: .88rem; color: var(--text-2); }
.site-look .sw-send { background: linear-gradient(135deg, #FFF4EE, var(--surface) 65%); }
.site-look .sw-bank-ico { background: #FFF1EA; color: var(--site-orange, var(--accent)); }
@media (max-width: 980px) { .sw { grid-template-columns: 1fr; } .sw-side { position: static; } }
@media (max-width: 560px) { .sw-send { padding: 18px; } .sw-big .sw-in { font-size: 1.25rem; } .sw-report .row2 { grid-template-columns: 1fr; } }
.sw .sw-in { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sw-v { position: relative; justify-content: space-between; }
.sw-t { min-width: 0; font-size: .95rem; font-weight: 500; color: var(--text); overflow-wrap: anywhere; line-height: 1.4; }
.sw-key .sw-t { font-family: var(--f-mono, ui-monospace, monospace); font-weight: 700; letter-spacing: .03em; }
.sw-big .sw-t { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; font-family: var(--f-display, inherit); }
.sw-big + .sw-big .sw-t { font-family: var(--f-mono, ui-monospace, monospace); font-size: 1.3rem; letter-spacing: .02em; }
.sw-row { padding: 10px 0; }
@media (max-width: 560px) { .sw-big .sw-t { font-size: 1.35rem; } }
/* v0.39.3 cart: switch between the welcome discount and a coupon code */
.co-swap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--border); font-size: .85rem; color: var(--text-2); }
.co-swap .linkbtn { font-weight: 600; font-size: .85rem; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.co-swap .linkbtn:hover { color: var(--accent); }
.site-look .co-swap .linkbtn:hover { color: var(--site-orange, var(--accent)); }

/* v0.39.4: the chat buttons move up above the sticky "unsaved changes" bar instead of covering its Save button */
.chat-fab, .lcw { transition: bottom .2s ease; }
body:has(.save-bar.is-dirty) .chat-fab { bottom: 98px; }
body:has(.save-bar.is-dirty) .lcw:not(.lcw-open) { bottom: 96px; }
@media (max-width: 600px) {
  body:has(.save-bar.is-dirty) .chat-fab { bottom: 150px; }
  body:has(.save-bar.is-dirty) .lcw:not(.lcw-open) { bottom: 148px; }
}
@media (prefers-reduced-motion: reduce) { .chat-fab, .lcw { transition: none; } }

/* v0.40 Staff → Settings: find a setting, grouped menu, filters, parts strip, review page */
.settings-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-attn { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg, #FEF3C7); color: var(--warn, #92400E); font: 700 .7rem/1 var(--f-body); flex: none; }
.ss { position: relative; margin: 2px 0 6px; }
.ss-box { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg, var(--surface)); color: var(--text-2); cursor: text; transition: border-color .15s, box-shadow .15s; }
.ss-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ss-box .ico { width: 16px; height: 16px; flex: none; }
.ss-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; height: auto; font: 500 .9rem var(--f-body); color: var(--text); box-shadow: none; }
.ss-box input::-webkit-search-cancel-button { display: none; }
.ss-kbd { font: 600 .66rem/1 var(--f-body); padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); background: var(--surface); white-space: nowrap; }
.ss-box:focus-within .ss-kbd { display: none; }
.ss-results { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); width: min(420px, calc(100vw - 40px)); max-height: 60vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .28); }
.ss-results li a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.ss-results li b { font-weight: 600; font-size: .9rem; }
.ss-results li span { font-size: .76rem; color: var(--text-2); }
.ss-results li.is-cur a { background: var(--cur-bg, var(--hover)); }
.ss-results mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ss-none { padding: 10px; font-size: .86rem; color: var(--text-2); }
.settings-nav a.ss-review { margin-bottom: 2px; font-size: .86rem; color: var(--text-2); border: 1px dashed var(--border); }
.sf { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sf-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 .84rem var(--f-body); cursor: pointer; }
.sf-chip span { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); font-size: .72rem; }
.sf-chip.is-on { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
.sf-chip.is-on span { background: rgba(255, 255, 255, .2); color: inherit; }
.sf-chip.sf-attn:not([disabled]) span { background: var(--warn-bg, #FEF3C7); color: var(--warn, #92400E); }
.sf-chip[disabled] { opacity: .5; cursor: default; }
.sg-strip { position: sticky; top: 0; z-index: 15; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 8px 0; background: color-mix(in srgb, var(--bg, #F6F7F9) 92%, transparent); backdrop-filter: blur(6px); }
.sg-strip::-webkit-scrollbar { display: none; }
.sg-strip a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .82rem; font-weight: 600; }
.sg-strip a:hover { border-color: var(--border-strong); }
.sg-strip a.is-cur { border-color: var(--accent); color: var(--accent); }
.settings-group { scroll-margin-top: 64px; }
.set-item { scroll-margin-top: 90px; border-radius: 10px; transition: background .4s, box-shadow .4s; }
.set-item[hidden], .settings-group[hidden] { display: none; }
.set-item.is-attn { box-shadow: inset 3px 0 0 var(--warn, #D97706); padding-left: 10px; }
.set-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.set-item.is-flash { animation: setFlash 2.2s ease-out; }
@keyframes setFlash { 0%, 35% { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .set-item.is-flash { animation: none; outline: 2px solid var(--accent); } }
.rv { padding: 0; overflow: hidden; }
.rv-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rv-h h3 { margin: 0; font-size: 1rem; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.rv-list li:last-child { border-bottom: 0; }
.rv-list li.is-attn { box-shadow: inset 3px 0 0 var(--warn, #D97706); }
.rv-list a { text-decoration: none; color: var(--text); min-width: 0; }
.rv-list a:hover b { text-decoration: underline; }
.rv-v { flex: none; max-width: 50%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .ss { width: 100%; } .settings-nav a.ss-review { width: 100%; } .ss-results { width: 100%; } }
.settings-nav { z-index: 30; }
.ss-results, .ss-results li a { text-align: left; align-items: flex-start; }
.sn-all { display: flex; flex-direction: column; gap: 2px; }
.sn-all > summary { display: none; }
@media (max-width: 820px) {
  .sn-all { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .sn-all > summary { display: flex; align-items: center; justify-content: space-between; width: 100%; list-style: none; cursor: pointer; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, var(--hover)); font-weight: 600; font-size: .9rem; }
  .sn-all > summary::-webkit-details-marker { display: none; }
  .sn-all > summary small { font-weight: 500; color: var(--text-2); }
  .sn-all > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 10px; transition: transform .15s; }
  .sn-all[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
}
.sn-all > summary::after { display: block; flex: none; box-sizing: border-box; }
@media (max-width: 820px), (hover: none) { .ss-kbd { display: none; } }

/* v0.40.1 settings toolbar: segmented filter, status, "On this page" */
.stb { position: sticky; top: 10px; z-index: 16; margin: 4px 0 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35); overflow: hidden; }
.stb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 10px 8px 8px; }
.stb .sf { display: inline-flex; gap: 2px; margin: 0; padding: 4px; border-radius: 12px; background: var(--surface-2, #F1F3F7); }
.stb .sf-chip { height: 36px; gap: 7px; padding: 0 14px 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 600 .86rem var(--f-body); transition: background .18s, color .18s, box-shadow .18s; }
.stb .sf-chip .ico { width: 16px; height: 16px; opacity: .8; }
.stb .sf-chip span { min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: inherit; font-size: .72rem; font-weight: 700; }
.stb .sf-chip:not([disabled]):hover { color: var(--text); }
.stb .sf-chip.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px -6px rgba(15, 23, 42, .25); }
.stb .sf-chip.is-on .ico { opacity: 1; color: var(--accent); }
.stb .sf-chip.is-on span { background: var(--accent); color: var(--on-accent, #fff); }
.stb .sf-chip.sf-attn span, .stb .sf-chip.sf-attn.is-on span { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line, transparent); }
.stb .sf-chip.sf-attn.is-on .ico { color: var(--warn); }
.stb .sf-chip[disabled] { opacity: .45; }
.stb-state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: 600 .8rem var(--f-body); white-space: nowrap; }
.stb-state .ico { width: 15px; height: 15px; }
.stb-state.is-ok { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line, transparent); }
.stb-state.is-warn { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line, transparent); }
.stb-state.is-warn i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); animation: stbPulse 2s ease-in-out infinite; }
@keyframes stbPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); } }
.stb .sg-strip { position: static; margin: 0; padding: 0 14px; gap: 2px; background: transparent; backdrop-filter: none; border-top: 1px solid var(--border); align-items: stretch; }
.stb .sg-lab { flex: none; align-self: center; margin-right: 8px; font: 700 .66rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.stb .sg-strip a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 10px; border: 0; border-radius: 0; background: transparent; color: var(--text-2); font-size: .84rem; font-weight: 600; text-decoration: none; transition: color .15s; }
.stb .sg-strip a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s ease; }
.stb .sg-strip a:hover { color: var(--text); }
.stb .sg-strip a.is-cur { color: var(--text); }
.stb .sg-strip a.is-cur::after { transform: scaleX(1); }
.sg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.site-look .stb .sf-chip.is-on .ico { color: var(--site-orange, var(--accent)); }
.site-look .stb .sf-chip.is-on:not(.sf-attn) span, .site-look .stb .sg-strip a::after { background: var(--site-orange, var(--accent)); }
@media (prefers-reduced-motion: reduce) { .stb-state.is-warn i { animation: none; } }
@media (max-width: 640px) {
  .stb { top: 6px; border-radius: 14px; }
  .stb-top { padding: 6px; }
  .stb .sf { width: 100%; }
  .stb .sf-chip { flex: 1; justify-content: center; padding: 0 8px; font-size: .8rem; }
  .stb .sf-chip .ico { display: none; }
  .stb-state { width: 100%; justify-content: center; }
  .stb .sg-lab { display: none; }
}
.stb .sf-chip { white-space: nowrap; }
.stb .sf-chip em { font-style: normal; }
.stb .sf-s { display: none; }
@media (max-width: 640px) {
  .stb .sf-l { display: none; }
  .stb .sf-s { display: inline; }
  .stb-state.is-warn { display: none; }
}
/* v0.40.2 "customised" label: hover or focus shows the starting value and the current one */
.set-cust { position: relative; cursor: help; }
.set-cust-tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 25; width: max-content; max-width: 340px; padding: 8px 11px; border-radius: 9px; background: var(--strong, #0F172A); color: #fff; font: 500 .78rem/1.4 var(--f-body); letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .5); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.set-cust:hover .set-cust-tip, .set-cust:focus .set-cust-tip { opacity: 1; transform: none; }
.rv-was { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-2); }

/* v0.40.4 Settings menu: group names read as headings, sections sit under them */
.settings-nav .settings-nav-h { margin: 16px 6px 6px; padding-top: 14px; border-top: 1px solid var(--border); font: 700 1.02rem/1.2 var(--f-head, var(--f-body)); letter-spacing: -.01em; text-transform: none; color: var(--text); }
.settings-nav .sn-all > .settings-nav-h:first-of-type { margin-top: 8px; padding-top: 12px; }
.settings-nav a:not(.ss-review) { padding: 7px 10px 7px 14px; font-size: .88rem; font-weight: 500; color: var(--text-2); }
.settings-nav a:not(.ss-review):hover { color: var(--text); }
.settings-nav a[aria-current]:not(.ss-review) { color: var(--cur-text, var(--text)); font-weight: 600; }
.site-look .settings-nav .settings-nav-h { font-family: var(--f-display, var(--f-head, var(--f-body))); }
@media (max-width: 820px) { .settings-nav .settings-nav-h { width: 100%; margin: 12px 4px 4px; } }

/* v0.40.5 settings groups fold: a compact header row, open to see the settings */
.sg-tools { display: flex; justify-content: flex-end; gap: 16px; margin: 0 0 10px; }
.sg-tools .linkbtn { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--text-2); text-decoration: none; }
.sg-tools .linkbtn:hover { color: var(--text); }
.sg-tools .ico { width: 14px; height: 14px; }
details.sg-fold { padding: 0; margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
details.sg-fold[open] { box-shadow: 0 12px 30px -20px rgba(15, 23, 42, .35); }
.sg-sum { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; user-select: none; }
.sg-sum::-webkit-details-marker { display: none; }
.sg-sum:hover { background: var(--hover); }
.sg-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: inherit; }
.sg-chev { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s; }
.sg-chev::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); margin-left: -2px; }
details.sg-fold[open] > .sg-sum .sg-chev { transform: rotate(90deg); background: var(--cur-bg, var(--surface-2)); }
.sg-title { font: 700 1rem/1.25 var(--f-head, var(--f-body)); color: var(--text); flex: 1; min-width: 0; }
.sg-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sg-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 700 .72rem/1 var(--f-body); }
.sg-pill.is-on { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line, transparent); }
.sg-pill.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sg-pill.is-off { color: var(--text-2); background: var(--surface-2); }
.sg-pill.is-warn { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line, transparent); }
.sg-pill.is-cust { color: var(--info, #1D4ED8); background: var(--info-bg, #EFF6FF); }
.sg-count { font-size: .78rem; color: var(--text-2); min-width: 74px; text-align: right; }
.sg-body { padding: 4px 20px 18px; border-top: 1px solid var(--border); }
.sg-body > .hookbox:first-child, .sg-body > .set-item:first-child { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .sg-chev { transition: none; } }
@media (max-width: 640px) { .sg-sum { flex-wrap: wrap; padding: 14px; } .sg-meta { width: 100%; justify-content: flex-start; padding-left: 38px; } .sg-count { min-width: 0; text-align: left; } .sg-body { padding: 4px 14px 16px; } }

/* v0.40.6 flash messages: icon badge, short title, close button, soft tint, success fades out */
.flash.fl { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; margin-bottom: 20px; border: 1px solid var(--fl-line); border-left-width: 1px; border-radius: 16px; background: linear-gradient(100deg, var(--fl-bg) 0%, var(--surface) 70%); box-shadow: 0 14px 34px -22px var(--fl-shadow), 0 1px 2px rgba(15, 23, 42, .05); overflow: hidden; animation: flIn .45s cubic-bezier(.2, .8, .2, 1.1) both; }
.flash.fl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fl-c); }
.flash.fl.flash-ok { --fl-c: var(--ok); --fl-bg: var(--ok-bg); --fl-line: var(--ok-line); --fl-shadow: color-mix(in srgb, var(--ok) 55%, transparent); }
.flash.fl.flash-err { --fl-c: var(--err); --fl-bg: var(--err-bg); --fl-line: var(--err-line); --fl-shadow: color-mix(in srgb, var(--err) 55%, transparent); }
.flash.fl.flash-warn, .flash.fl.flash-info { --fl-c: var(--warn); --fl-bg: var(--warn-bg); --fl-line: var(--warn-line); --fl-shadow: color-mix(in srgb, var(--warn) 50%, transparent); }
.fl-ico { position: relative; width: 38px; height: 38px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--fl-c); box-shadow: 0 6px 16px -6px var(--fl-c); }
.fl-ico .ico { width: 20px; height: 20px; stroke-width: 2.6; }
.flash-ok .fl-ico .ico path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: flTick .5s .25s ease-out forwards; }
.fl-ico::after { content: ""; position: absolute; inset: -5px; border-radius: 15px; border: 2px solid var(--fl-c); opacity: 0; animation: flRing 1.1s .2s ease-out; }
.fl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.fl-title { font: 700 .95rem/1.2 var(--f-head, var(--f-body)); color: var(--text); }
.fl-msg { font-size: .9rem; color: var(--text-2); }
.fl-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.fl-x:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.fl-x .ico { width: 16px; height: 16px; }
.fl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fl-c); opacity: .55; transform-origin: left; animation: flBar 7s linear forwards; }
.fl.is-paused .fl-bar { animation-play-state: paused; }
.fl.is-out { animation: flOut .3s ease-in forwards; }
@keyframes flIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes flOut { to { opacity: 0; transform: translateY(-8px) scale(.98); margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: 0; } }
@keyframes flTick { to { stroke-dashoffset: 0; } }
@keyframes flRing { 0% { opacity: .6; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes flBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .flash.fl, .fl-ico::after, .flash-ok .fl-ico .ico path, .fl-bar { animation: none; } .flash-ok .fl-ico .ico path { stroke-dashoffset: 0; } .fl-bar { display: none; } }
@media (max-width: 560px) { .flash.fl { gap: 12px; padding: 12px; border-radius: 14px; } .fl-ico { width: 34px; height: 34px; } }

/* v0.40.7 plan specs on hover / focus (staff pages) */
.spop { position: relative; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.spop > a, .spop-l { text-decoration-style: dotted; text-decoration-line: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
.spop-i { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); transition: background .15s, color .15s; }
.spop-i .ico { width: 13px; height: 13px; }
.spop-i:hover, .spop.is-open .spop-i { background: var(--accent); color: var(--on-accent, #fff); }
.spop:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.spop-card { position: absolute; z-index: 40; left: 0; top: calc(100% + 10px); width: 320px; max-width: calc(100vw - 40px); display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 50px -20px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .06); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: top left; transition: opacity .16s, transform .16s, visibility 0s .16s; cursor: default; font-size: .86rem; color: var(--text); text-align: left; }
.spop-card::before { content: ""; position: absolute; left: 22px; top: -7px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.spop.is-open .spop-card { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
.spop-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.spop-h b { font: 700 .95rem/1.25 var(--f-head, var(--f-body)); }
.spop-h i { font-style: normal; font: 700 .66rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.spop-r { display: grid; grid-template-columns: 18px 72px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 0; }
.spop-r .ico { width: 16px; height: 16px; color: var(--accent); }
.spop-r em { font-style: normal; color: var(--text-2); font-size: .8rem; }
.spop-r strong { font-weight: 600; }
.spop-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.spop-meta > span { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 9px; border-radius: 9px; background: var(--surface-2); font-size: .78rem; font-weight: 600; }
.spop-meta em { font-style: normal; font-weight: 500; color: var(--text-2); }
.site-look .spop-r .ico, .theme-d .spop-r .ico { color: var(--site-orange, var(--accent)); }
@media (prefers-reduced-motion: reduce) { .spop-card { transition: none; } }
.spop-f { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.spop-f > span { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-2); }
.spop-f .ico { width: 14px; height: 14px; color: var(--ok); flex: none; }

/* v0.40.8 spec cards on every staff page: fixed placement (panel.js), arrow follows the name, flips above */
.spop-card.spop-fx { position: fixed; }
.spop-card.spop-fx::before { left: var(--spop-arrow, 22px); }
.spop-card.spop-up { transform-origin: bottom left; }
.spop-card.spop-up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.spop:not(.is-open) .spop-card.spop-up { transform: translateY(-6px) scale(.98); }
.tk-svc .spop, .tk-svc .spop-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-svc .spop { overflow: visible; }
.tk-svc .spop-l { white-space: nowrap; }
.tk-svc .spop-i { width: 16px; height: 16px; }
.inv-lines .srv-sub-line .spop-i, .tk-svc .spop-i { margin-left: 0; }
.spop-card.spop-fx { overflow: auto; overscroll-behavior: contain; }
.spop-card.spop-side::before { display: none; }
.spop:not(:hover):not(:focus-within) .spop-card.spop-side { transform: translateX(-6px) scale(.98); }

/* v0.40.9 invoice: Payments sit under the pay / status card in the right column */
.iv-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.iv-side > .iv-pay { position: static; }
.iv-payments { padding: 20px 22px; box-shadow: var(--ui-lift, 0 14px 30px -18px rgba(16, 24, 40, .35)); }
.iv-payments h2 { font-size: 1rem; }
.iv-payments .iv-list li { gap: 12px; }
.iv-payments .iv-li-amt { white-space: nowrap; font-weight: 700; }
.iv-payments .iv-li-what span { font-size: .8rem; }

/* v0.40.10 a form whose Save button sits outside its cards (plan page): space before the next card */
form:has(.save-bar):not(:has(.card .save-bar)) + :is(.card, section, form) { margin-top: 30px; }

/* v0.41 shared RDP: plan provisioning choice, staff hand-over form, customer login card */
.pp-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .pp-modes { grid-template-columns: 1fr; } }
.pn-logo.sh { background: var(--ok-bg, #e8f6ee); color: var(--ok, #1a7f4b); }
.sh-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.sh-head h2 { margin: 0 0 4px; }
.sh-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sh-ico .ico { width: 22px; height: 22px; }
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.sh-pass { display: flex; gap: 8px; align-items: stretch; }
.sh-pass input { flex: 1; min-width: 0; }
@media (max-width: 700px) { .sh-grid { grid-template-columns: 1fr; } .sh-grid > .field { grid-column: 1 / -1 !important; } }
.rdp-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rdp-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
.rdp-row + .rdp-row { border-top: 1px solid var(--border); }
.rdp-k { color: var(--text-2); font-size: .86rem; }
.rdp-v { font-weight: 600; overflow-wrap: anywhere; }
.rdp-v form { margin: 0; }
.rdp-go { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rdp-go .btn { align-self: flex-start; gap: 8px; }
.rdp-go .btn .ico { width: 16px; height: 16px; }
.rdp-go p { margin: 0; }
@media (max-width: 520px) { .rdp-row { grid-template-columns: 1fr auto; } .rdp-k { grid-column: 1 / -1; } .rdp-go .btn { align-self: stretch; justify-content: center; } }
/* v0.41.1 shared RDP hand-over: saved-login notice, email choice, two buttons */
.sh-saved { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--r-md); background: var(--ok-bg, #e8f6ee); color: var(--text); font-size: .9rem; }
.sh-saved .ico { flex: none; width: 18px; height: 18px; color: var(--ok, #1a7f4b); margin-top: 2px; }
.sh-notify { margin: 6px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); align-items: flex-start; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .sh-actions .btn { flex: 1 1 100%; justify-content: center; } }
/* v0.41.2 hand-over form: room between the email box, the buttons and the note under them */
.sh-form .sh-notify { margin: 10px 0 0; }
.sh-form .sh-actions { margin-top: 24px; gap: 12px; }
.sh-form .sh-actions + p { margin-top: 14px; }

/* v0.42 Staff → Transactions */
.tx-head { align-items: flex-end; }
.tx-head .btn .ico { width: 15px; height: 15px; }
.tx-periods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 16px; }
.tx-periods > a, .tx-custom > summary { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .86rem; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.tx-custom > summary::-webkit-details-marker { display: none; }
.tx-periods > a:hover, .tx-custom > summary:hover { border-color: var(--text-3, var(--border)); color: var(--text); }
.tx-periods > a[aria-current="page"], .tx-custom > summary[aria-current="page"] { background: var(--ink, #0f172a); border-color: var(--ink, #0f172a); color: #fff; }
.tx-custom { position: relative; }
.tx-custom[open] > .tx-dates { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: flex; gap: 10px; align-items: flex-end; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .35); }
.tx-dates label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--text-2); }
.tx-dates input { min-width: 150px; }
@media (max-width: 600px) { .tx-custom[open] > .tx-dates { position: static; flex-wrap: wrap; margin-top: 8px; } }
.tx-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r, 16px); padding: 16px 18px; box-shadow: var(--ui-shadow, var(--shadow)); display: flex; flex-direction: column; }
.tx-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.tx-card-top small { color: var(--text-2); font-size: .78rem; }
.tx-cur { font: 800 .72rem/1 var(--f-body); letter-spacing: .08em; padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.tx-net { font: 800 1.65rem/1.1 var(--f-head, var(--f-body)); letter-spacing: -.02em; color: var(--ok, #15803d); }
.tx-net.is-neg { color: var(--err, #b42318); }
.tx-sub { font-size: .76rem; color: var(--text-2); margin-top: 2px; }
.tx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.tx-split dt { font-size: .74rem; color: var(--text-2); }
.tx-split dd { margin: 2px 0 0; font-weight: 700; font-size: .92rem; }
.tx-in { color: var(--ok, #15803d); }
.tx-out { color: var(--err, #b42318); }
.tx-usd { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.tx-warn { margin: 10px 0 0; font-size: .76rem; color: var(--warn, #b54708); }
.tx-empty-card b { font-size: 1.4rem; }
.tx-table td { vertical-align: top; }
.tx-ref { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tx-row-out { background: color-mix(in srgb, var(--err, #b42318) 4%, transparent); }
.tx-row-credit td { color: var(--text-2); }
.tx-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 24px; }
.tx-table .srv-sub-line { display: block; }
.tx-split .tx-zero { color: var(--text-2); font-weight: 600; }

/* v0.42.1 shared RDP: connect section (navy header, login tiles, three steps) */
.card.rdpx { padding: 0; overflow: hidden; border-radius: 24px; }
.rdpx-hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 28px 30px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #2A4B8F 0%, #0E1B33 55%); color: #fff; }
.rdpx-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 69, .42), transparent 65%); pointer-events: none; }
.rdpx-id, .rdpx-go { position: relative; z-index: 1; min-width: 0; }
.rdpx-st { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(46, 204, 113, .15); color: #9FE3BF; font: 600 .78rem/1.2 var(--f-body); }
.rdpx-st i { width: 8px; height: 8px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 4px rgba(46, 204, 113, .25); animation: rdpx-pulse 2.4s ease-in-out infinite; }
.rdpx-st.is-off { background: rgba(255, 179, 0, .16); color: #FFD38A; }
.rdpx-st.is-off i { background: #FFB300; box-shadow: 0 0 0 4px rgba(255, 179, 0, .25); animation: none; }
@keyframes rdpx-pulse { 50% { box-shadow: 0 0 0 7px rgba(46, 204, 113, .08); } }
.rdpx-ip { margin: 12px 0 4px; font: 700 clamp(1.6rem, 3.4vw, 2.2rem)/1.1 var(--f-head, var(--f-body)); letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; }
.rdpx-sub { margin: 0; color: #AAB6D3; font-size: .88rem; }
.rdpx-go { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: none; }
.rdpx-go > span { font-size: .76rem; color: #AAB6D3; text-align: center; }
.rdpx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 14px; background: #FF7A45; color: #0E1B33 !important; font: 700 1rem/1.2 var(--f-body); text-decoration: none !important;
  box-shadow: 0 14px 30px -12px rgba(255, 122, 69, .85); transition: transform .15s, box-shadow .15s, background .15s; }
.rdpx-btn:hover { background: #FF8B5C; transform: translateY(-1px); box-shadow: 0 18px 34px -12px rgba(255, 122, 69, .95); }
.rdpx-btn:focus-visible, .rdpx-dl:focus-visible, .rdpx-ic:focus-visible { outline: 3px solid #FFB08C; outline-offset: 2px; }
.rdpx-btn .ico, .rdpx-dl .ico { width: 18px; height: 18px; }
.rdpx-creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.rdpx-cell { padding: 18px 22px; min-width: 0; }
.rdpx-cell + .rdpx-cell { border-left: 1px solid var(--border); }
.rdpx-k { font: 600 .7rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rdpx-v { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 36px; }
.rdpx-v > .mono { flex: 1; min-width: 0; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.rdpx-v form { margin: 0; }
.rdpx-pw { background: #0E1B33; color: #FFB08C; padding: 3px 9px; border-radius: 8px; flex: 0 1 auto !important; margin-right: auto; }
.rdpx-dots { flex: 1; letter-spacing: .14em; font-weight: 700; color: var(--text); }
.rdpx-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.rdpx-ic:hover { border-color: #FF7A45; color: #B4471B; background: #FFF4EE; }
.rdpx-ic .ico { width: 16px; height: 16px; }
.rdpx-steps-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 0; }
.rdpx-steps-head h3 { margin: 0; font: 700 1.02rem/1.2 var(--f-head, var(--f-body)); }
.rdpx-steps { list-style: none; margin: 0; padding: 14px 24px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rdpx-steps li { padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.rdpx-steps li.is-first { border-color: #FF7A45; box-shadow: 0 0 0 3px rgba(255, 122, 69, .14); background: linear-gradient(180deg, #FFF6F1, var(--surface)); }
.rdpx-n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 10px; background: #0E1B33; color: #fff; font: 700 .85rem/1 var(--f-body); }
.is-first .rdpx-n { background: #FF7A45; color: #0E1B33; }
.rdpx-steps b { display: block; margin-bottom: 4px; font: 700 1rem/1.25 var(--f-head, var(--f-body)); }
.rdpx-steps p { margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; }
.rdpx-steps p b { display: inline; font: inherit; font-weight: 600; color: var(--text); margin: 0; }
.rdpx-dl { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #0E1B33; color: #fff !important; font: 700 .86rem/1.2 var(--f-body); text-decoration: none !important; }
.rdpx-dl:hover { background: #1E2D4D; }
@media (max-width: 860px) {
  .rdpx-hero { flex-direction: column; align-items: stretch; }
  .rdpx-creds { grid-template-columns: 1fr; }
  .rdpx-cell + .rdpx-cell { border-left: 0; border-top: 1px solid var(--border); }
  .rdpx-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rdpx-st i { animation: none; } .rdpx-btn { transition: none; } }
@media (max-width: 480px) { .rdpx-hero { padding: 24px 20px; } .rdpx-btn { white-space: nowrap; font-size: .92rem; padding: 14px 16px; } .rdpx-cell { padding: 16px 20px; } .rdpx-steps, .rdpx-steps-head { padding-left: 16px; padding-right: 16px; } }

/* v0.43 server status checks */
.rdpx-st.is-down { background: rgba(255, 99, 82, .18); color: #FFB4A8; }
.rdpx-st.is-down i { background: #FF6352; box-shadow: 0 0 0 4px rgba(255, 99, 82, .28); animation: rdpx-pulse-err 1.4s ease-in-out infinite; }
@keyframes rdpx-pulse-err { 50% { box-shadow: 0 0 0 7px rgba(255, 99, 82, .06); } }
.live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font: 600 .76rem/1.3 var(--f-body); background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); white-space: nowrap; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-down { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }
.live-maint { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.ctl-head .live-chip { margin-left: auto; margin-right: 8px; }
/* v0.44.10: chip and help link share the right side (two auto margins put the chip in the middle) */
.ctl-head:has(.live-chip) { align-items: center; }
.ctl-head .live-chip + .help-link { margin-left: 0; }
.live-note { margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.mon-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.mon-k { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.mon-k i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3, #94A3B8); }
.mon-k b { font: 700 1.5rem/1.1 var(--f-head, var(--f-body)); }
.mon-k span { font-size: .8rem; color: var(--text-2); }
.mon-k.mon-up i { background: #22C55E; } .mon-k.mon-down i { background: #EF4444; } .mon-k.mon-maint i { background: #F59E0B; }
.mon-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: #94A3B8; }
.mon-up .mon-dot { background: #22C55E; } .mon-down .mon-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } .mon-maint .mon-dot { background: #F59E0B; }
.mon-table tr.mon-down td { background: var(--err-bg); }
.mon-host { font-weight: 600; }
.mon-proto { margin-left: 6px; font-size: .68rem; }
.mon-svc { display: block; font-weight: 600; }
.mon-table td:first-child { white-space: nowrap; }
.mon-table td:nth-child(2) { min-width: 170px; }
.mon-act { width: 230px; }
.mon-act-in { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mon-act form { display: flex; gap: 6px; align-items: center; margin: 0; }
.mon-act form .btn { flex: 1; }
.mon-act select { padding: 5px 8px; font-size: .8rem; width: 84px; flex: none; }
.mon-list { list-style: none; margin: 0 0 14px; padding: 0; }
.mon-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.mon-task .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.mon-task .actions form { margin: 0; }
@media (max-width: 860px) { .mon-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mon-act { white-space: normal; text-align: left; } }
.rdpx-id { flex: 1 1 auto; }
.rdpx-ip { overflow-wrap: normal; font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.rdpx-ip span { display: inline-block; }
/* v0.43.1: a closed spec card is fixed (taken out of the page) so it never makes a table box scroll on its own */
.spop-card { position: fixed; top: 0; left: 0; }
/* v0.43.2: login details as rows (label · value · copy), so the address and long passwords never break mid-way */
.rdpx-creds { grid-template-columns: 1fr; }
.rdpx-cell { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 24px; }
.rdpx-cell + .rdpx-cell { border-left: 0; border-top: 1px solid var(--border); }
.rdpx-v { margin-top: 0; }
.rdpx-v > .mono { overflow-wrap: normal; word-break: normal; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.rdpx-v > .mono::-webkit-scrollbar { display: none; }
.rdpx-pw { max-width: calc(100% - 44px); }
.rdpx-v .rdpx-ic, .rdpx-v form { margin-left: auto; }
@media (max-width: 480px) {
  .rdpx-cell { grid-template-columns: 1fr; gap: 8px; padding: 14px 20px; }
  .rdpx-v > .mono { white-space: normal; overflow-wrap: anywhere; }
}

/* v0.44 suspension holds */
.hold-card { position: relative; scroll-margin-top: 90px; }
.hold-card h2 { margin: 0 0 6px; padding-right: 44px; min-height: 36px; display: flex; align-items: center; }
.hold-ic { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #FFF4EE; color: #C2561F; }
.hold-ic .ico { width: 18px; height: 18px; }
.hold-card.is-on { border-color: var(--ok-line); background: linear-gradient(180deg, var(--ok-bg), var(--surface) 70%); }
.hold-card.is-on .hold-ic { background: var(--ok-bg); color: var(--ok); }
.hold-card.is-wait .hold-ic { background: var(--info-bg); color: var(--info); }
.hold-card.is-no { border-color: var(--err-line); }
.hold-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; border: 0; padding: 0; margin: 12px 0 14px; }
.hold-days label { position: relative; display: block; cursor: pointer; }
.hold-days input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hold-days span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s, background .15s; }
.hold-days b { font-size: .92rem; }
.hold-days small { color: var(--text-2); font-size: .76rem; }
.hold-days input:checked + span { border-color: #FF7A45; background: #FFF6F1; box-shadow: 0 0 0 3px rgba(255, 122, 69, .16); }
.hold-days input:focus-visible + span { outline: 2px solid #FF7A45; outline-offset: 2px; }
.hold-card input[type=text] { margin-top: 6px; }
dd > .inline-form { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.hold-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.hold-acts form { display: flex; gap: 8px; align-items: center; margin: 0; }
.hold-acts .hold-no { flex: 1 1 260px; }
.hold-acts .hold-no input { flex: 1; min-width: 0; }
.hold-acts select { width: auto; }
.theme-picker > .btn { margin-top: 18px; }
/* v0.44.2 staff holds until a date */
.hold-row .hold-set { margin-top: 6px; }
.hold-row .hold-set summary { cursor: pointer; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.hold-until { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 6px; }
.hold-until input[type=date] { width: auto; }
.hold-until input[type=text] { flex: 1 1 220px; min-width: 0; }
.hold-until + form { margin: 0; }
.hold-list { margin: 0 0 10px; padding-left: 18px; }
/* v0.44.3 staff shared RDP login rows */
.cp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-row .inline-form { display: inline-flex; margin: 0; }
.cp-row .btn .ico { width: 14px; height: 14px; }
.cp-ic { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 0; }
.cp-ic:hover { border-color: var(--accent); color: var(--text); }
.cp-ic .ico { width: 14px; height: 14px; }
.cp-ic.is-copied, .rdpx-ic.is-copied { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
/* v0.44.4 RDP account steps on tasks */
.rdp-steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* ---------- v0.45.0: VPS page, design A ("command center") ---------- */
.vpx { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px); margin-bottom: 18px; color: #fff;
  background: radial-gradient(900px 380px at 88% -25%, rgba(255,122,69,.55), transparent 60%), radial-gradient(700px 400px at -10% 125%, rgba(47,123,255,.42), transparent 60%), linear-gradient(135deg, #0E1B33, #13244A);
  box-shadow: 0 24px 60px -30px rgba(14,27,51,.55); }
.vpx::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.vpx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.vpx-tag { font: 600 .74rem/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #9FB3D9; }
.vpx-name { font-family: var(--f-head); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 6px 0 12px; color: #fff; letter-spacing: -.02em; }
.vpx-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.vpx-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .82rem; color: #E6ECF7; }
.vpx-meta .ico { width: 14px; height: 14px; color: #FFB08C; }
.vpx-live { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: 14px; font-weight: 600; font-size: .9rem; white-space: nowrap;
  background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: #DCFCE7; }
.vpx-live i { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 5px rgba(74,222,128,.2), 0 0 16px #4ADE80; }
.vpx-live.is-down { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.45); color: #FEE2E2; } .vpx-live.is-down i { background: #F87171; box-shadow: 0 0 0 5px rgba(248,113,113,.2); }
.vpx-live.is-maint, .vpx-live.is-off { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.45); color: #FEF3C7; } .vpx-live.is-maint i, .vpx-live.is-off i { background: #FBBF24; box-shadow: 0 0 0 5px rgba(251,191,36,.2); }
.vpx-addr { display: flex; align-items: flex-end; gap: 18px 24px; flex-wrap: wrap; margin-top: clamp(20px, 3vw, 30px); }
.vpx-ip { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 600; letter-spacing: .02em; line-height: 1.15; overflow-wrap: anywhere; }
.vpx-ip small { font-size: .95rem; color: #9FB3D9; margin-left: 6px; }
.vpx-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.vpx-acts form { margin: 0; }
.vpx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; font: 600 .92rem/1.2 var(--f-body); cursor: pointer; text-decoration: none;
  color: #fff !important; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); transition: background .15s, transform .15s; }
.vpx-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.vpx-btn .ico { width: 17px; height: 17px; }
.vpx-btn.is-main { background: linear-gradient(135deg, #FF7A45, #FF9A5C); border: 0; box-shadow: 0 10px 28px -8px rgba(255,122,69,.75); }
.vpx-btn.is-main:hover { background: linear-gradient(135deg, #FF6A30, #FF8C49); }
.vpx-k { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: .82rem; }
.vpx-k .ico { width: 15px; height: 15px; }
.vpx-login .vpx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.vpx-login .vpx-row:first-of-type { border-top: 0; }
.vpx-row > span { color: var(--text-2); }
.vpx-row > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; text-align: right; font-weight: 600; min-width: 0; }
.vpx-row > div form { margin: 0; }
.vpx-row .mono { overflow-wrap: anywhere; }
.vpx-dots { letter-spacing: .12em; }
.vpx-manage .ctl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.ctl.tile { border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); margin: 0; padding: 0; }
.ctl.tile > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 16px; font-weight: 600; font-size: .9rem; text-align: center; border: 0; }
.ctl.tile > summary::-webkit-details-marker { display: none; }
.ctl.tile > summary::before, .ctl.tile > summary::after { display: none; }
.ctl.tile > summary i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #EAF1FF; color: #2F7BFF; }
.ctl.tile > summary i.t-or { background: #FFF1EA; color: #FF7A45; }
.ctl.tile > summary .ico { width: 20px; height: 20px; }
.ctl.tile:hover { border-color: #C9D6EE; box-shadow: 0 8px 22px -14px rgba(14,27,51,.35); }
.ctl.tile[open] { grid-column: 1 / -1; padding: 0 18px 18px; }
.ctl.tile[open] > summary { flex-direction: row; justify-content: flex-start; padding: 14px 0; font-size: 1rem; }
.ctl.tile[open] > summary i { width: 36px; height: 36px; border-radius: 11px; }
.vpx-due { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.vpx-due b { font: 700 1.9rem/1.2 var(--f-head); }
.vpx-due span { color: var(--text-2); font-size: .9rem; }
.vpx-bar { height: 8px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); margin: 10px 0 14px; overflow: hidden; }
.vpx-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #FF7A45, #FFA36E); }
.vpx-bar.is-soon i { background: linear-gradient(90deg, #EF4444, #F97316); }
.vpx-bar i.w-5{width:5%}.vpx-bar i.w-10{width:10%}.vpx-bar i.w-15{width:15%}.vpx-bar i.w-20{width:20%}.vpx-bar i.w-25{width:25%}.vpx-bar i.w-30{width:30%}.vpx-bar i.w-35{width:35%}.vpx-bar i.w-40{width:40%}.vpx-bar i.w-45{width:45%}.vpx-bar i.w-50{width:50%}
.vpx-bar i.w-55{width:55%}.vpx-bar i.w-60{width:60%}.vpx-bar i.w-65{width:65%}.vpx-bar i.w-70{width:70%}.vpx-bar i.w-75{width:75%}.vpx-bar i.w-80{width:80%}.vpx-bar i.w-85{width:85%}.vpx-bar i.w-90{width:90%}.vpx-bar i.w-95{width:95%}.vpx-bar i.w-100{width:100%}
@media (max-width: 640px) {
  .vpx-acts { margin-left: 0; width: 100%; }
  .vpx-acts .vpx-btn, .vpx-acts form { flex: 1 1 auto; justify-content: center; }
  .vpx-acts form .vpx-btn { width: 100%; justify-content: center; }
  .vpx-login .vpx-row { flex-direction: column; align-items: flex-start; }
  .vpx-row > div { justify-content: flex-start; text-align: left; }
}

/* v0.45.1: real usage — live tiles, Performance and Traffic cards (usage.js) */
.ux-card { position: relative; }
.ux-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ux-head h2 { margin: 0; }
.ux-upd { font-size: .8rem; color: var(--text-2); }
.ux-upd.is-stale { color: #B45309; }
.ux-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ux-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); gap: 2px; }
.ux-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); font: 600 .84rem/1 var(--f-body); padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.ux-seg button .ico { width: 15px; height: 15px; }
.ux-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(14,27,51,.08), 0 0 0 1px var(--border); }
.ux-seg button:focus-visible { outline: 2px solid #2F7BFF; outline-offset: 1px; }
.ux-sum { margin: 14px 0 6px; font-size: .88rem; color: var(--text-2); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.ux-chart { position: relative; height: 220px; }
.ux-chart.is-bars { height: 180px; }
.ux-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.ux-grid { stroke: var(--border); stroke-width: 1; }
.ux-ax { fill: var(--text-2); font: 500 11px var(--f-body); font-variant-numeric: tabular-nums; }
.ux-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ux-guide { stroke: var(--border-strong); stroke-dasharray: 3 3; }
.ux-pt { stroke: var(--surface); stroke-width: 2; }
.ux-hit { fill: transparent; cursor: crosshair; }
.ux-c0.ux-line { stroke: #2F7BFF; } .ux-c0.ux-st { stop-color: #2F7BFF; } .ux-c0.ux-pt { fill: #2F7BFF; }
.ux-c1.ux-line { stroke: #FF7A45; } .ux-c1.ux-st { stop-color: #FF7A45; } .ux-c1.ux-pt { fill: #FF7A45; }
.ux-c2.ux-line { stroke: #8B5CF6; } .ux-c2.ux-st { stop-color: #8B5CF6; } .ux-c2.ux-pt { fill: #8B5CF6; }
.ux-c3.ux-line { stroke: #0EA5A4; } .ux-c3.ux-st { stop-color: #0EA5A4; } .ux-c3.ux-pt { fill: #0EA5A4; }
.ux-in { fill: #2F7BFF; } .ux-out { fill: #FF7A45; }
.ux-col:hover .ux-in { fill: #1F63E0; } .ux-col:hover .ux-out { fill: #F2622A; }
.ux-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: 9px 11px; border-radius: 11px; background: #0E1B33; color: #fff; font-size: .8rem; line-height: 1.45; box-shadow: 0 10px 28px -10px rgba(14,27,51,.55); font-variant-numeric: tabular-nums; }
.ux-tip b { display: block; font-weight: 600; margin-bottom: 3px; color: #C9D6EE; }
.ux-tip span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ux-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ux-bg0, .ux-dot.is-in { background: #2F7BFF; } .ux-bg1, .ux-dot.is-out { background: #FF7A45; } .ux-bg2 { background: #8B5CF6; } .ux-bg3 { background: #0EA5A4; }
.ux-empty { margin: 0; padding: 40px 0; text-align: center; }
.ux-live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: #EAF1FF; color: #1F4FB8; font: 600 .82rem/1 var(--f-body); white-space: pre; font-variant-numeric: tabular-nums; }
.ux-live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: uxPulse 2s infinite; }
@keyframes uxPulse { 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .ux-live-pill::before { animation: none; } .ut-bar i { transition: none; } }
.ux-bw { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 18px; }
.ux-bw-main, .ux-bw-side > div { border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.ux-bw-side { display: grid; gap: 10px; }
.ux-bw-side > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 12px 16px; }
.ux-bw-side b { font-variant-numeric: tabular-nums; }
.ux-k { font-size: .8rem; color: var(--text-2); }
.ux-bw-big { margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.ux-bw-big b { font: 700 1.9rem/1.1 var(--f-head); letter-spacing: -.01em; }
.ux-bw-big span { color: var(--text-2); font-weight: 600; margin-left: 4px; }
.ux-meter { height: 10px; border-radius: 99px; background: #EAF1FF; overflow: hidden; margin-bottom: 8px; }
.ux-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2F7BFF, #6AA2FF); transition: width .6s ease; }
.ux-meter i.is-warm { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.ux-meter i.is-hot { background: linear-gradient(90deg, #EF4444, #FF7A45); }
.ux-sub { font-size: .95rem; margin: 6px 0 10px; }
.ux-mon { margin-top: 22px; }
.ux-mon .ux-sub { margin: 0; }
@media (max-width: 720px) {
  .ux-bw { grid-template-columns: 1fr; }
  .ux-bar-row { align-items: stretch; }
  .ux-bar-row > .ux-seg { width: 100%; }
  .ux-seg button { flex: 1 1 0; justify-content: center; padding: 9px 6px; }
  .ux-chart { height: 200px; }
}

/* v0.45.2: Performance and Traffic open and close from their heading */
.ux-card .ux-head { margin-bottom: 0; }
.ux-toggle { display: inline-flex; align-items: center; gap: 10px; margin: -6px -10px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.ux-toggle:hover { background: var(--hover); }
.ux-toggle:focus-visible { outline: 2px solid #2F7BFF; outline-offset: 2px; }
.ux-toggle:disabled { cursor: default; background: transparent; }
.ux-toggle .ico { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 8px; background: #EAF1FF; color: #2F7BFF; transform: rotate(-90deg); transition: transform .2s ease; box-sizing: content-box; }
.ux-card.is-open .ux-toggle .ico { transform: rotate(0deg); }
.ux-peek { margin: 8px 0 0 40px; font-size: .88rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ux-peek:empty { display: none; }
.ux-card.is-open .ux-peek { display: none; }
.ux-body { margin-top: 16px; }
.ux-err { margin: 10px 0 0 40px; }
@media (prefers-reduced-motion: reduce) { .ux-toggle .ico { transition: none; } }

/* v0.45.3: metric tiles — colour per metric, ring gauge, trend line along the bottom edge */
.vpx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ut-ring[hidden] { display: none; }
.ut-spark:empty { display: none; }
.vpx-tile { --c: #2F7BFF; --c2: #EAF1FF; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  min-height: 168px; padding: 16px 18px 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 12px 28px -18px rgba(14,27,51,.28); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.vpx-tile::before { content: ""; position: absolute; z-index: -1; width: 160px; height: 160px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(circle, var(--c2) 0%, transparent 70%); opacity: .9; }
.vpx-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 18px 34px -18px color-mix(in srgb, var(--c) 45%, transparent); }
.vpx-tile.ut-cpu { --c: #2F7BFF; --c2: #E6EFFF; }
.vpx-tile.ut-ram { --c: #8B5CF6; --c2: #F0E9FF; }
.vpx-tile.ut-disk { --c: #0EA5A4; --c2: #DDF6F4; }
.vpx-tile.ut-net { --c: #FF7A45; --c2: #FFEDE4; }
.vpx-tile.is-warm { --c: #F59E0B; --c2: #FEF3D7; }
.vpx-tile.is-hot { --c: #EF4444; --c2: #FDE4E4; }
.ut-top { display: flex; align-items: center; gap: 9px; }
.ut-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--c2); color: var(--c); flex: none; }
.ut-ic .ico { width: 17px; height: 17px; }
.ut-lbl { font: 600 .86rem/1 var(--f-body); color: var(--text); }
.ut-spec { margin-left: auto; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font: 600 .72rem/1 var(--f-body); color: var(--text-2); white-space: nowrap; }
.vpx-tile:not(.has-live) .ut-spec { display: none; }
.ut-main { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.ut-ring { width: 52px; height: 52px; flex: none; transform: rotate(-90deg); }
.ut-ring-bg { fill: none; stroke: var(--c2); stroke-width: 6; }
.ut-ring-fg { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2,.7,.2,1); }
.ut-fig { min-width: 0; }
.ut-fig b { display: block; font: 700 1.55rem/1.1 var(--f-head); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vpx-tile.has-live .ut-fig b { color: var(--c); }
.ut-fig small { display: block; margin-top: 4px; font-size: .8rem; color: var(--text-2); line-height: 1.3; }
.ut-spark { display: block; height: 44px; width: calc(100% + 36px); margin: auto -18px 0; }
.ut-spark .ut-st { stop-color: var(--c); }
.ut-spark .ut-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.vpx-tile:not(.has-live) { min-height: 0; padding-bottom: 16px; }
.vpx-tile:not(.has-live) .ut-spark { display: none; }
@media (prefers-reduced-motion: reduce) { .vpx-tile, .ut-ring-fg { transition: none; } .vpx-tile:hover { transform: none; } }
@media (max-width: 520px) { .vpx-tiles { gap: 10px; } .vpx-tile { min-height: 150px; padding: 14px 14px 0; } .ut-spark { width: calc(100% + 28px); margin: auto -14px 0; } .ut-ring { width: 40px; height: 40px; } .ut-fig b { font-size: 1.2rem; } .ut-spec { display: none; } }

/* v0.45.4: tiles that are switched off leave no gap */
.vpx-tiles.n-1 { grid-template-columns: 1fr; }
.vpx-tiles.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .vpx-tiles.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vpx-tiles.n-3 > :last-child { grid-column: 1 / -1; } }

/* v0.45.5: Manage tiles stay in one row; the open tile is highlighted and its options show in a panel below */
.ctl-grid.is-tabs .ctl.tile[open] { grid-column: auto; padding: 0; border-color: #2F7BFF; background: linear-gradient(180deg, #F3F7FF, #EAF1FF); box-shadow: 0 0 0 3px rgba(47,123,255,.14); }
.ctl-grid.is-tabs .ctl.tile[open] > summary { flex-direction: column; justify-content: center; padding: 18px 10px 16px; font-size: .9rem; color: #1F4FB8; }
.ctl-grid.is-tabs .ctl.tile[open] > summary i { width: 44px; height: 44px; border-radius: 14px; background: #2F7BFF; color: #fff; }
.ctl-grid.is-tabs .ctl.tile[open] > summary i.t-or { background: #FF7A45; }
.ctl-grid.is-tabs .ctl.tile { position: relative; }
.ctl-grid.is-tabs .ctl.tile[open]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: #EAF1FF; border-right: 1px solid #2F7BFF; border-bottom: 1px solid #2F7BFF; }
.ctl-panel { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); animation: ctlIn .18s ease; }
.ctl-panel > :first-child { margin-top: 0; }
.ctl-panel > :last-child { margin-bottom: 0; }
@keyframes ctlIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ctl-panel { animation: none; } }
@media (max-width: 720px) { .ctl-grid.is-tabs .ctl.tile[open]::after { display: none; } }

/* v0.45.6: staff VPS page (admin/_vpsx.php) */
.vpx-tag a { color: #C9D6EE; text-decoration: none; border-bottom: 1px dashed rgba(201,214,238,.5); }
.vpx-tag a:hover { color: #fff; }
.vpx-meta a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(47,123,255,.22); border: 1px solid rgba(122,168,255,.45); font-size: .82rem; color: #fff; text-decoration: none; }
.vpx-meta a:hover { background: rgba(47,123,255,.34); }
.vpx-meta a .ico { color: #9CC0FF; }
.vpx-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.vpx-head-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vpx-head-acts .btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #E6ECF7; }
.vpx-head-acts .btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.vpx-head-acts .btn .ico { width: 15px; height: 15px; }
.vpx-ip .cp-ic.is-dark { margin-left: 12px; vertical-align: middle; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #C9D6EE; }
.vpx-ip .cp-ic.is-dark:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.sx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sx-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 12px 28px -20px rgba(14,27,51,.3); }
.sx-k { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--text-2); }
.sx-k .ico { width: 15px; height: 15px; color: #2F7BFF; }
.sx-fact b { font: 700 1.05rem/1.25 var(--f-body); color: var(--text); overflow-wrap: anywhere; }
.sx-fact b .badge, .sx-fact b .live-chip { font-size: .78rem; }
.sx-fact small { font-size: .76rem; color: var(--text-2); overflow-wrap: anywhere; }
.ctl.tile > summary i.t-red { background: #FDECEC; color: #DC2626; }
.ctl-grid.is-tabs .ctl.tile.is-danger[open] { border-color: #DC2626; background: linear-gradient(180deg, #FFF6F6, #FDECEC); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.ctl-grid.is-tabs .ctl.tile.is-danger[open] > summary { color: #B91C1C; }
.ctl-grid.is-tabs .ctl.tile.is-danger[open] > summary i { background: #DC2626; color: #fff; }
.ctl-grid.is-tabs .ctl.tile.is-danger[open]::after { background: #FDECEC; border-color: #DC2626; }
.ctl-panel .ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ctl-panel .ctl-row select, .ctl-panel .ctl-row input[type=text] { flex: 1 1 220px; width: auto; }
.ctl-panel .hold-until { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.ctl-panel .hold-until input[type=text] { flex: 1 1 260px; }
.sx-kv dd { min-width: 0; }
.sx-jobs { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.sx-jobs > summary { cursor: pointer; font-weight: 600; }
.sx-jobs[open] > summary { margin-bottom: 10px; }
.vpx-page .sx-off, .sx-off { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }   /* v0.48.1: room above, quieter than the jobs */
.sx-off > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); }
.sx-off[open] > summary { margin-bottom: 8px; }
.sx-term { margin-top: 12px; }
.sx-edit > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sx-edit > summary::-webkit-details-marker { display: none; }
.sx-edit > summary h2 { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.sx-edit > summary h2::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; }
.sx-edit[open] > summary h2::after { transform: rotate(-135deg); }
.sx-edit[open] > summary { margin-bottom: 14px; }
@media (max-width: 980px) { .sx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .vpx-side { align-items: flex-start; } .vpx-head-acts { justify-content: flex-start; } }
.sx-edit > summary .small { font-weight: 400; }

/* v0.46.0: dashboard + servers list (command-center style) */
:is(.cdx-stat, .cdx-card, .sl-row, .cdx-empty) { --c: #2F7BFF; --c2: #E6EFFF; }
:is(.cdx-stat, .cdx-card, .sl-row).ut-ram { --c: #8B5CF6; --c2: #F0E9FF; }
:is(.cdx-stat, .cdx-card, .sl-row).ut-disk { --c: #0EA5A4; --c2: #DDF6F4; }
:is(.cdx-stat, .cdx-card, .sl-row).ut-net { --c: #FF7A45; --c2: #FFEDE4; }
.cdx-stat.is-hot { --c: #EF4444; --c2: #FDE4E4; }
.vpx.cdx .vpx-name { margin-bottom: 6px; }
.cdx-sub { margin: 0; color: #C9D6EE; font-size: 1rem; max-width: 52ch; }
.cdx-health { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cdx-acts { margin-top: clamp(18px, 2.6vw, 26px); }
.vpx.cdx.is-slim { padding-top: clamp(20px, 2.6vw, 28px); padding-bottom: clamp(20px, 2.6vw, 28px); }
.vpx.cdx.is-slim .vpx-top { align-items: center; }
.vpx.cdx.is-slim .vpx-name { margin: 4px 0 0; }
.vpx.cdx.is-slim .cdx-acts { margin-top: 0; }
.cdx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cdx-stat { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic lbl" "val val" "sub sub"; align-items: center; gap: 6px 10px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 12px 28px -20px rgba(14,27,51,.3); transition: transform .2s ease, border-color .2s ease; }
.cdx-stat::before { content: ""; position: absolute; z-index: -1; width: 140px; height: 140px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(circle, var(--c2) 0%, transparent 70%); }
a.cdx-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
.cdx-stat .ut-ic { grid-area: ic; }
.cdx-stat small { grid-area: lbl; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.cdx-stat b { grid-area: val; font: 700 1.6rem/1.15 var(--f-head); letter-spacing: -.02em; margin-top: 4px; color: var(--c); }
.cdx-stat > span:last-child { grid-area: sub; font-size: .8rem; color: var(--text-2); min-width: 0; }
.cdx-stat .stat-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdx-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.cdx-h2 h2 { margin: 0; }
.cdx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.cdx-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 14px 32px -22px rgba(14,27,51,.35); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cdx-card::before { content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; right: -80px; top: -100px; border-radius: 50%; background: radial-gradient(circle, var(--c2) 0%, transparent 70%); }
.cdx-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 18px 36px -20px color-mix(in srgb, var(--c) 40%, transparent); }
.cdx-card-top { display: flex; align-items: center; gap: 10px; }
.cdx-kind { display: flex; flex-direction: column; gap: 2px; font: 600 .84rem/1.2 var(--f-body); color: var(--text); min-width: 0; }
.cdx-kind small { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: .76rem; color: var(--text-2); }
.cdx-kind small .ico { width: 12px; height: 12px; }
.cdx-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font: 600 .76rem/1 var(--f-body); white-space: nowrap; background: #E8F7EE; color: #15803D; border: 1px solid #BBE5CB; }
.cdx-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.cdx-pill.is-maint { background: #FEF6E4; color: #B45309; border-color: #F5DDA8; }
.cdx-pill.is-down { background: #FDECEC; color: #B91C1C; border-color: #F5C2C2; }
.cdx-pill.is-off { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.cdx-name { margin: 6px 0 0; font: 700 1.25rem/1.2 var(--f-head); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cdx-name a { color: var(--text); text-decoration: none; }
.cdx-name a:hover { color: var(--c); }
.cdx-plan { margin: -6px 0 0; font-size: .84rem; color: var(--text-2); }
.cdx-ip { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.cdx-ip .mono { font-size: .98rem; font-weight: 600; }
.cdx-renew-t { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--text-2); margin-bottom: 6px; }
.cdx-renew-t b { color: var(--text); font-weight: 600; }
.cdx-renew-t b.is-soon { color: #EA580C; }
.cdx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.cdx-price { font-size: .84rem; color: var(--text-2); }
.cdx-price b { font: 700 1.2rem/1 var(--f-head); color: var(--text); }
.cdx-btns { display: flex; gap: 8px; }
.cdx-btns .btn .ico { width: 15px; height: 15px; }
.cdx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.cdx-empty .ut-ic { width: 46px; height: 46px; border-radius: 14px; }
.cdx-empty > span:not(.ut-ic) { color: var(--text-2); font-size: .9rem; }
.cdx-empty .btn { margin-top: 6px; }
/* servers list */
.sl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sl-chips button .sl-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .72rem; }
.sl-chips button[aria-pressed="true"] .sl-n { background: #EAF1FF; border-color: #C9D6EE; color: #1F4FB8; }
.sl-search { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sl-search:focus-within { border-color: #2F7BFF; box-shadow: 0 0 0 3px rgba(47,123,255,.15); }
.sl-search .ico { width: 16px; height: 16px; color: var(--text-2); flex: none; }
.sl-search input { border: 0; box-shadow: none; background: transparent; padding: 10px 0; width: 100%; outline: none; }
.sl-list { display: flex; flex-direction: column; gap: 10px; }
.sl-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.4fr) auto minmax(0, 1.3fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(14,27,51,.04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sl-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); opacity: .8; }
.sl-row:hover { border-color: color-mix(in srgb, var(--c) 35%, var(--border)); box-shadow: 0 12px 26px -18px rgba(14,27,51,.35); transform: translateY(-1px); }
.sl-row.is-ended { opacity: .72; }
.sl-row[hidden] { display: none; }
.sl-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sl-name { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.sl-name:hover { color: var(--c); }
.sl-sub { font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-ip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sl-ip .mono { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row .cdx-pill { margin-left: 0; }
.sl-renew { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--text-2); }
.sl-price { text-align: right; white-space: nowrap; }
.sl-price b { display: block; font: 700 1.02rem/1.1 var(--f-head); }
.sl-price span { font-size: .76rem; color: var(--text-2); }
.sl-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.sl-go:hover { background: var(--c); border-color: var(--c); color: #fff; }
.sl-go .ico { width: 16px; height: 16px; }
@media (max-width: 1100px) { .sl-row { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.3fr) auto auto auto; } .sl-renew { display: none; } }
@media (max-width: 980px) { .cdx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cdx-health { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .sl-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic main go" "ip ip pill" "renew renew price"; gap: 10px 12px; }
  .sl-row > .ut-ic { grid-area: ic; } .sl-main { grid-area: main; } .sl-go { grid-area: go; } .sl-ip { grid-area: ip; } .sl-row .cdx-pill { grid-area: pill; justify-self: end; }
  .sl-renew { grid-area: renew; display: flex; } .sl-price { grid-area: price; align-self: end; }
  .sl-search { flex: 1 1 100%; }
  .sl-chips { width: 100%; overflow-x: auto; }
  .sl-chips button { flex: none; }
}
@media (max-width: 520px) { .cdx-stats { gap: 10px; } .cdx-stat { padding: 14px; } .cdx-stat b { font-size: 1.3rem; } }
/* v0.46.0: fixed columns so rows line up */
.sl-row { grid-template-columns: 34px minmax(0, 1fr) 190px 136px 170px 84px 34px; }
@media (max-width: 1100px) { .sl-row { grid-template-columns: 34px minmax(0, 1fr) 180px 130px 84px 34px; } }
@media (max-width: 720px) { .sl-row { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* v0.46.1: shared RDP connect guide as its own card (hero + login details come from _vpx) */
.rdpx-guide .rdpx-steps-head { padding: 0; }
.rdpx-guide .rdpx-steps-head h2 { margin: 0; }
.rdpx-guide .rdpx-steps { padding: 14px 0 0; }
@media (max-width: 860px) { .rdpx-guide .rdpx-steps { grid-template-columns: 1fr; } }
/* v0.46.1: tiles without live figures (shared RDP, dedicated): the plan value wraps instead of being cut off */
.vpx-tile:not(.has-live) .ut-fig b { white-space: normal; font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
.ut-fig small:empty { display: none; }
.vpx-tile:not(.has-live) .ut-main { margin-bottom: 0; }
.ctl-panel > p.small.muted.mt0:first-child::first-letter { text-transform: uppercase; }

/* ---------- v0.46.2: invoices, invoice page, order pages and cart in the command-center style ---------- */
.il-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cdx-stat.is-late, .sl-row.is-late { --c: #EF4444; --c2: #FDE4E4; }
.il-row { grid-template-columns: 34px minmax(0, 1fr) 120px 160px 110px 136px; }
.il-row .cdx-pill { justify-self: start; }
.il-date { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; white-space: nowrap; }
.il-date small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.il-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.il-acts .btn { border-radius: 11px; }
@media (max-width: 1100px) { .il-row { grid-template-columns: 34px minmax(0, 1fr) 150px 110px 136px; } .il-date { display: none; } }
@media (max-width: 720px) {
  .il-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-stats .cdx-stat:first-child { grid-column: 1 / -1; }
  .il-stats .cdx-stat:not(:first-child) .ut-ic { display: none; }
  .il-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic main main" "pill pill price" "date date acts"; }
  .il-row .il-date { grid-area: date; display: flex; } .il-row .il-acts { grid-area: acts; } .il-row .cdx-pill { justify-self: start; }
}
/* help link and currency picker on the dark hero */
.vpx .help-link { color: #C9D6EE; padding: 0 4px; }
.vpx .help-link:hover { color: #fff; }
.vpx .cur-pick-order { margin: 0; color: #C9D6EE; padding: 4px 6px 4px 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.vpx .cur-pick-order select { background-color: #fff; border-color: transparent; }
.ox-acts { align-items: center; }
.ox-hero + .cat-intro, .ox-hero + .notice { margin-top: 0; }
/* order steps in the cart hero */
.ox-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ox-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .82rem; font-weight: 600; color: #9FB3D9; }
.ox-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: .74rem; font-weight: 800; color: #fff; }
.ox-steps li span .ico { width: 13px; height: 13px; stroke-width: 3; }
.ox-steps .is-done span { background: #22C55E; }
.ox-steps .is-now { color: #fff; border-color: rgba(255,122,69,.6); background: rgba(255,122,69,.16); }
.ox-steps .is-now span { background: linear-gradient(135deg, #FF7A45, #FF9A5C); }
/* invoice page hero: the dark command-center look */
.iv-hero, .site-look .iv-hero { color: #fff; border: 0; border-radius: 26px; padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px); box-shadow: 0 24px 60px -30px rgba(14,27,51,.55);
  background: radial-gradient(900px 380px at 88% -25%, rgba(255,122,69,.55), transparent 60%), radial-gradient(700px 400px at -10% 125%, rgba(47,123,255,.42), transparent 60%), linear-gradient(135deg, #0E1B33, #13244A); }
.iv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.iv-hero h1 { color: #fff; }
.iv-kicker, .iv-hero-amt > span:last-child { color: #9FB3D9; }
.iv-chips > span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E6EDFA; }
.iv-chips .ico { color: #9FB3D9; }
.iv-chips .is-soon { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.5); color: #FCD34D; }
.iv-chips .is-late { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.55); color: #FCA5A5; }
.iv-hero-amt b { color: #fff; }
.iv-paid .iv-hero-amt b { color: #4ADE80; }
.iv-unpaid .iv-hero-amt b { background: linear-gradient(135deg, #FFB088, #FF7A45); -webkit-background-clip: text; background-clip: text; color: transparent; }
.iv-sheet, .iv-block, .iv-pay { border-radius: 22px; }
@media (max-width: 640px) { .iv-hero { padding: 22px 20px; } }

/* ---------- v0.46.3: support tickets and account pages in the command-center style ---------- */
/* ticket list */
.tl-row { grid-template-columns: 34px minmax(0, 1fr) 170px 150px 34px; }
.tl-row .cdx-pill { justify-self: start; }
.tl-row.ut-net .sl-name { color: var(--text); }
@media (max-width: 720px) {
  .tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .tl-row .sl-main { flex: 1 1 calc(100% - 104px); order: 1; } .tl-row > .ut-ic { order: 0; } .tl-row .sl-go { order: 2; }
  .tl-row .cdx-pill { order: 3; } .tl-row .il-date { order: 4; display: flex; margin-left: auto; text-align: right; align-items: flex-end; }
  .tl-row .sl-sub { white-space: normal; }
}
/* ticket page hero */
.tkx .vpx-name { margin-bottom: 10px; }
.tkx .vpx-name.h1-long { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.tkx-main { min-width: 0; flex: 1 1 420px; }
.tkx-st { align-self: flex-start; }
.tkx-st.is-off { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #C9D6EE; } .tkx-st.is-off i { background: #94A3B8; box-shadow: none; }
.tkx-about { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #E6ECF7; text-decoration: none; max-width: 640px; }
.tkx-about:hover { background: rgba(255,255,255,.12); }
.tkx-about .ut-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(47,123,255,.3); color: #fff; }
.tkx-about .ut-ic .ico { width: 18px; height: 18px; }
.tkx-about > span:nth-child(2) { flex: 1 1 auto; min-width: 0; font-size: .86rem; overflow-wrap: anywhere; }
.tkx-about small { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #9FB3D9; }
.tkx-about b { color: #fff; }
.tkx-about > .ico { width: 16px; height: 16px; color: #9FB3D9; flex: none; }
.tkx .cdx-acts { margin-top: 16px; }
/* account hero */
.acx-who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.acx-av { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font: 800 1.4rem/1 var(--f-head); color: #fff; background: linear-gradient(135deg, #FF7A45, #2F7BFF); box-shadow: 0 12px 30px -12px rgba(255,122,69,.7); }
.acx .vpx-name { margin-bottom: 10px; }
.vpx-meta .is-ok .ico { color: #86EFAC; }
.vpx-meta .is-warn { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.16); color: #FDE68A; }
.vpx-meta .is-warn .ico { color: #FCD34D; }
.acx-tabs { display: flex; gap: 6px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.acx-tabs::-webkit-scrollbar { display: none; }
.acx-tabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; color: #C9D6EE; text-decoration: none; font: 600 .88rem/1.2 var(--f-body); border: 1px solid transparent; }
.acx-tabs a .ico { width: 16px; height: 16px; }
.acx-tabs a:hover { background: rgba(255,255,255,.08); color: #fff; }
.acx-tabs a[aria-current="page"] { background: #fff; color: #0E1B33; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.acx-tabs a[aria-current="page"] .ico { color: #FF7A45; }
@media (max-width: 640px) { .acx-av { width: 52px; height: 52px; border-radius: 16px; font-size: 1.15rem; } .acx-who { align-items: flex-start; } }
/* account details: forms + checklist side column */
.tkx .vpx-name { margin-bottom: 14px; }
.acx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.acx-forms > .card.mid, .acx-forms > .card, .acx-forms > form { max-width: none; }
.acx-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
@media (max-width: 1100px) { .acx-grid { grid-template-columns: 1fr; } .acx-side { position: static; order: -1; } }
.acx-chk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acx-chk-head h2 { margin: 0; font-size: 1.05rem; }
.acx-chk .vpx-bar { margin-bottom: 14px; }
.acx-chk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.acx-chk li { display: flex; gap: 12px; align-items: flex-start; }
.acx-chk li > div { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; min-width: 0; }
.acx-chk li > div span { color: var(--text-2); font-size: .8rem; }
.acx-tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #FEF6E4; color: #B45309; }
.acx-tick .ico { width: 15px; height: 15px; stroke-width: 2.5; }
.acx-chk li.is-ok .acx-tick { background: #E8F7EE; color: #15803D; }
.acx-help h2 { margin: 0 0 6px; font-size: 1rem; }

/* ---------- v0.46.4: staff dashboard, tasks, clients, orders (+ their pages) in the command-center style ---------- */
/* slim staff hero: figures on the right, search inside, popovers allowed to overflow */
.sxh-pop { overflow: visible; }
.sxh-figs { display: flex; gap: 10px; flex-wrap: wrap; }
.sxh-figs > * { display: flex; flex-direction: column; gap: 2px; min-width: 104px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.sxh-figs > a:hover { background: rgba(255,255,255,.13); }
.sxh-figs b { font: 800 1.45rem/1.1 var(--f-head); letter-spacing: -.02em; }
.sxh-figs span { font-size: .74rem; color: #9FB3D9; }
.sxh-figs .is-hot { background: rgba(255,122,69,.2); border-color: rgba(255,122,69,.55); }
.sxh-figs .is-hot b { color: #FFB088; }
.sxh-search { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 6px 6px 14px; max-width: 620px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.sxh-search .ico { width: 17px; height: 17px; color: #9FB3D9; flex: none; }
.sxh-search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; box-shadow: none; color: #fff; padding: 8px 0; outline: none; }
.sxh-search input::placeholder { color: #9FB3D9; }
.sxh-search .vpx-btn { padding: 9px 16px; }
.sxh-badges .badge { align-self: center; }
.vpx-meta a .ico { color: #9FB3D9; }
.vpx-meta .is-late { border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.2); color: #FECACA; }
.sxh-acts { margin-top: 0; align-items: center; }
.vpx .head-acts .btn-ghost, .vpx .head-acts summary.btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.vpx .head-acts .btn-ghost:hover { background: rgba(255,255,255,.16); }
.vpx .head-acts .btn-ink, .vpx .head-acts summary.btn-ink { background: #fff; color: #0E1B33; border-color: #fff; }
.vpx .head-acts .small.muted { color: #C9D6EE; }
.vpx .loginas-pop { color: var(--text); text-align: left; }
.acx-av.is-on { box-shadow: 0 0 0 3px #0E1B33, 0 0 0 5px #4ADE80; }
.sxh + .crumbs, .crumbs + .sxh { margin-top: 0; }
/* tabs and segmented filters become chips */
.tabs.sx-chips, .seg.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0 0 14px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); overflow: visible; width: fit-content; max-width: 100%; }
.sx-chips a { border: 0 !important; margin: 0; padding: 8px 13px; border-radius: 11px; font-size: .86rem; font-weight: 600; color: var(--text-2); background: transparent; text-decoration: none; }
.sx-chips a:hover { background: var(--surface-2); color: var(--text); }
.sx-chips a[aria-current] { background: #0E1B33; color: #fff; }
.sx-chips a[aria-current] .tab-n, .sx-chips a[aria-current] .seg-n { background: rgba(255,255,255,.18); color: #fff; opacity: 1; }
.cl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-bar .sx-chips { margin-bottom: 0; }
.cl-bar + .sx-list { margin-top: 14px; }
/* rows */
.sx-list { margin-top: 4px; }
.sx-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-weight: 700; font-size: .98rem; min-width: 0; overflow-wrap: anywhere; }
.sx-title a { color: var(--text); text-decoration: none; }
.sx-title a:hover { color: var(--c); }
.sx-id { font: 600 .82rem/1 var(--f-mono, ui-monospace, monospace); color: var(--text-2) !important; }
.sx-row .sl-sub { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sx-row .il-date.is-late span { color: #DC2626; font-weight: 700; }
.tk-row { grid-template-columns: 34px minmax(0, 1fr) 120px 150px 34px; }
.or-row { grid-template-columns: 34px minmax(0, 1fr) 110px 130px 90px 100px 34px; }
.cl-row { grid-template-columns: 38px minmax(0, 1fr) 70px 120px minmax(0, 220px) 100px 34px; }
.or-geo { font-size: .86rem; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.or-risk { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; font-size: .78rem; color: var(--text-2); }
.or-risk b { font-size: .95rem; color: var(--text); text-align: right; }
.or-risk i { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #22C55E, #F59E0B, #EF4444); background-size: 100px 5px; display: block; }
.or-risk.is-hi i { background: #EF4444; }
.or-risk i.w-5{width:5%}.or-risk i.w-10{width:10%}.or-risk i.w-15{width:15%}.or-risk i.w-20{width:20%}.or-risk i.w-25{width:25%}.or-risk i.w-30{width:30%}.or-risk i.w-35{width:35%}.or-risk i.w-40{width:40%}.or-risk i.w-45{width:45%}.or-risk i.w-50{width:50%}.or-risk i.w-55{width:55%}.or-risk i.w-60{width:60%}.or-risk i.w-65{width:65%}.or-risk i.w-70{width:70%}.or-risk i.w-75{width:75%}.or-risk i.w-80{width:80%}.or-risk i.w-85{width:85%}.or-risk i.w-90{width:90%}.or-risk i.w-95{width:95%}.or-risk i.w-100{width:100%}
.sx-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font: 800 .82rem/1 var(--f-head); color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #0E1B33)); }
.sx-av.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #22C55E; }
.cl-svc .badge { margin: 1px 0; }
@media (max-width: 1200px) { .cl-row { grid-template-columns: 38px minmax(0, 1fr) 120px minmax(0, 200px) 100px 34px; } .cl-row .or-geo { display: none; } .or-row { grid-template-columns: 34px minmax(0, 1fr) 130px 90px 100px 34px; } .or-row .or-geo { display: none; } }
@media (max-width: 720px) {
  .sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .sx-row .sl-main { flex: 1 1 calc(100% - 110px); order: 1; } .sx-row > .ut-ic, .sx-row > .sx-av { order: 0; } .sx-row .sl-go { order: 2; }
  .sx-row > :not(.sl-main):not(.ut-ic):not(.sx-av):not(.sl-go) { order: 3; }
  .sx-row .sl-price { margin-left: auto; }
  .sx-row .il-date { display: flex; }
  .sx-row .or-geo { display: flex; }
  .sxh-figs { width: 100%; } .sxh-figs > * { flex: 1 1 0; min-width: 0; }
  .tabs.sx-chips, .seg.sx-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .sx-chips a { flex: none; }
}
/* staff dashboard: dark hero and tile look */
.dsx-hero, .dsx-hero.is-busy { color: #fff; border: 0; border-radius: 26px; padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px); overflow: hidden; isolation: isolate; box-shadow: 0 24px 60px -30px rgba(14,27,51,.55);
  background: radial-gradient(900px 380px at 88% -25%, rgba(255,122,69,.55), transparent 60%), radial-gradient(700px 400px at -10% 125%, rgba(47,123,255,.42), transparent 60%), linear-gradient(135deg, #0E1B33, #13244A); }
.dsx-hero::after { opacity: 1; background: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; }
.dsx-kicker { color: #9FB3D9; } .dsx-kicker .ico { color: #FFB08C; }
.dsx-title { color: #fff; }
.dsx-sub { color: #C9D6EE; }
.dsx-hero-money { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); border-radius: 18px; }
.dsx-hero-money span, .dsx-hero-money small { color: #9FB3D9; }
.dsx-hero-money b { color: #fff; }
.dsx-tile { position: relative; overflow: hidden; border-radius: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); --c: #2F7BFF; --c2: #E6EFFF; }
.dsx-tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 18%, transparent), transparent); pointer-events: none; }
.dsx-tile:nth-child(2) { --c: #8B5CF6; --c2: #F0E9FF; } .dsx-tile:nth-child(3) { --c: #FF7A45; --c2: #FFEDE4; } .dsx-tile:nth-child(4) { --c: #0EA5A4; --c2: #DDF6F4; }
.dsx-tile-ico { border: 0; border-radius: 12px; background: var(--c2); color: var(--c); }
.dsx-tile b { color: var(--c); }
.dsx-tile.is-hot { --c: #EF4444; --c2: #FDE4E4; background: var(--surface); border-color: color-mix(in srgb, #EF4444 35%, var(--border)); }
.dsx-tile.is-hot .dsx-tile-ico { background: var(--c2); color: var(--c); border: 0; }
.dsx-tile.is-hot b { color: var(--c); }
.dsx-card { border-radius: 22px; }
/* v0.46.4 fixes: chip state wins over theme tab rules, wider columns */
.tabs.sx-chips a[aria-current], .seg.sx-chips a[aria-current] { background: #0E1B33 !important; color: #fff !important; box-shadow: none !important; }
.tabs.sx-chips a::after, .tabs.sx-chips a::before { display: none !important; }
.sx-row .il-date { white-space: normal; }
.tk-row { grid-template-columns: 34px minmax(0, 1fr) 110px 200px 34px; }
.or-row { grid-template-columns: 34px minmax(0, 1fr) 100px 170px 90px 100px 34px; }
@media (max-width: 1200px) { .or-row { grid-template-columns: 34px minmax(0, 1fr) 170px 90px 100px 34px; } }
.sxh-pop .sxh-acts { margin-top: 16px; }

/* ---------- v0.46.5: every remaining page in the command-center style ----------
   Any page heading (.page-head with an h1) becomes the slim dark hero; tabs become chips; tables and cards get the
   rounder, softer look. Markup is unchanged, so every form, link and test hook stays as it was. */
#main .page-head.page-head:has(h1) { position: relative; isolation: isolate; align-items: center; gap: 14px 20px; margin: 0 0 18px; padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 38px); border-radius: 26px; color: #fff;
  background: radial-gradient(900px 380px at 88% -25%, rgba(255,122,69,.55), transparent 60%), radial-gradient(700px 400px at -10% 125%, rgba(47,123,255,.42), transparent 60%), linear-gradient(135deg, #0E1B33, #13244A);
  box-shadow: 0 24px 60px -30px rgba(14,27,51,.55); }
#main .page-head.page-head:has(h1)::after { opacity: 1; content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
#main .page-head.page-head:has(h1) h1 { color: #fff; font-family: var(--f-head); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.12; letter-spacing: -.02em; }
#main .page-head.page-head:has(h1) h1.h1-long { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
#main .page-head.page-head:has(h1) h1 .muted { color: #9FB3D9; }
#main .page-head.page-head:has(h1) p, #main .page-head.page-head:has(h1) .muted, #main .page-head.page-head:has(h1) .small { color: #C9D6EE; }
#main .page-head.page-head:has(h1) p.muted { margin-top: 6px; max-width: 760px; }
#main .page-head.page-head:has(h1) a:not(.btn) { color: #fff; }
#main .page-head.page-head:has(h1) .help-link { color: #C9D6EE; }
#main .page-head.page-head:has(h1) .help-link:hover { color: #fff; }
#main .page-head.page-head:has(h1) .status-err { color: #FCA5A5; font-weight: 700; }
#main .page-head.page-head:has(h1) .btn-ghost, #main .page-head.page-head:has(h1) .btn-white { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
#main .page-head.page-head:has(h1) .btn-ghost:hover, #main .page-head.page-head:has(h1) .btn-white:hover { background: rgba(255,255,255,.16); }
#main .page-head.page-head:has(h1) .btn-ink { background: #fff; color: #0E1B33; border-color: #fff; }
#main .page-head.page-head:has(h1) .loginas-pop, #main .page-head.page-head:has(h1) .card { color: var(--text); }
#main .page-head.page-head:has(h1) .card p, #main .page-head.page-head:has(h1) .card .muted, #main .page-head.page-head:has(h1) .card .small { color: var(--text-2); }
#main .page-head.page-head:has(h1) .card a:not(.btn) { color: var(--link, var(--text)); }
#main .page-head.page-head:has(h1) label { color: #C9D6EE; }
#main .page-head.page-head:has(h1) .vis-pulse { color: #C9D6EE; }
/* any heading straight after a breadcrumb sits snug under it */
.crumbs + #main .page-head.page-head:has(h1) { margin-top: 2px; }
/* tabs and segmented links: chips everywhere */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--border) !important; margin: 0 0 18px; padding: 5px; border-radius: 16px; background: var(--surface); width: fit-content; max-width: 100%; box-shadow: none; }
.tabs a { border: 0 !important; margin: 0 !important; padding: 8px 13px; border-radius: 11px; font-size: .86rem; font-weight: 600; color: var(--text-2); background: transparent; box-shadow: none !important; }
.tabs a:hover { background: var(--surface-2); color: var(--text); }
.tabs a[aria-current="page"], .theme-a .tabs a[aria-current="page"], .theme-b .tabs a[aria-current="page"] { background: #0E1B33 !important; color: #fff !important; }
.tabs a[aria-current="page"] .tab-n { background: rgba(255,255,255,.18); color: #fff; }
.tabs a::after, .tabs a::before { display: none !important; }
@media (max-width: 720px) { .tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; } .tabs a { flex: none; } }
/* tables and cards: same rounding and softness as the new rows */
.table-wrap { border-radius: 20px; box-shadow: 0 1px 2px rgba(14,27,51,.04); }
.table-wrap > table th:first-child { border-top-left-radius: 20px; } .table-wrap > table th:last-child { border-top-right-radius: 20px; }
tbody tr { transition: background .15s ease; }
tbody tr:hover > td { background: color-mix(in srgb, #2F7BFF 4%, transparent); }
.card { border-radius: 20px; }
.split > aside .card, .grid > .card { border-radius: 20px; }
/* website editor tabs: same chips */
.site-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border) !important; padding: 5px; border-radius: 16px; background: var(--surface); margin-bottom: 18px; }
.site-tabs a { border: 0 !important; margin: 0 !important; padding: 8px 13px; border-radius: 11px; font-size: .86rem; font-weight: 600; color: var(--text-2); text-decoration: none; }
.site-tabs a:hover { background: var(--surface-2); color: var(--text); }
.site-tabs a[aria-current="page"] { background: #0E1B33; color: #fff; }
/* v0.46.7: client page hero aligned: buttons under the name column, status badges top right, even chips */
.sxh-pop .vpx-top { align-items: flex-start; }
.sxh-pop .acx-who { align-items: flex-start; flex: 1 1 auto; }
.sxh-pop .acx-who > div { min-width: 0; }
.sxh-pop .vpx-name { margin: 2px 0 14px; }
.sxh-st { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; max-width: 46%; }
.sxh-st .badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: .74rem; letter-spacing: .06em; }
.sxh-pop .sxh-acts { margin: 20px 0 0 calc(64px + 18px); gap: 10px; }
.vpx .head-acts .btn, .vpx .head-acts summary.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; line-height: 1; }
.vpx .head-acts .btn-signal, .vpx .head-acts summary.btn-signal { background: linear-gradient(135deg, #FF7A45, #FF9A5C); border: 1px solid transparent; color: #fff; box-shadow: 0 10px 24px -12px rgba(255,122,69,.8); }
.vpx .head-acts .btn-signal:hover, .vpx .head-acts summary.btn-signal:hover { filter: brightness(1.06); }
.vpx .head-acts details { position: relative; }
@media (max-width: 900px) { .sxh-st { max-width: none; justify-content: flex-start; width: 100%; } .sxh-pop .sxh-acts { margin-left: 0; } }
section.vpx.sxh-pop > .vpx-acts.sxh-acts { margin-top: 22px; }
section.vpx.sxh-pop .sxh-st { align-self: flex-start; margin-top: 0; }

/* v0.46.8: plan details open on click */
.spop-i { border: 0; padding: 0; cursor: pointer; font: inherit; flex: none; }
.spop-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spop-l { cursor: pointer; }

/* v0.46.11: staff VPS status-check tile */
.sx-k .sx-k-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: .74rem; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 2px 6px 2px 8px; border-radius: 999px; }
.sx-k .sx-k-more:hover { color: #2F7BFF; background: color-mix(in srgb, #2F7BFF 10%, transparent); }
.sx-k .sx-k-more .ico { width: 13px; height: 13px; color: currentColor; }
.sx-mon .mon-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sx-mon .mon-top .live-chip { font-size: .78rem; }
.sx-mon .mon-proto { font-size: .72rem; color: var(--text-2); background: var(--surface-2, #F3F6FB); border: 1px solid var(--border); border-radius: 8px; padding: 2px 7px; }
.sx-mon .mon-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.sx-mon .mon-stats > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sx-mon .mon-stats b { font: 700 1rem/1.2 var(--f-mono, ui-monospace, monospace); color: var(--text); }
.sx-mon .mon-stats em { font-style: normal; font-size: .72rem; color: var(--text-2); }
.sx-mon .mon-up-ok b { color: #15803D; } .sx-mon .mon-up-warn b { color: #B45309; } .sx-mon .mon-up-bad b { color: #DC2626; }
.sx-mon .mon-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; }
.sx-mon .mon-days i { height: 8px; border-radius: 3px; background: #E5E9F0; }
.sx-mon .mon-days i.is-ok { background: #22C55E; } .sx-mon .mon-days i.is-warn { background: #F59E0B; } .sx-mon .mon-days i.is-bad { background: #EF4444; }
.sx-mon .sx-k { white-space: nowrap; }
@media (max-width: 720px) { .sx-facts .sx-mon, .sx-facts .sx-runs { grid-column: 1 / -1; } }
/* v0.46.12: create a plan on the master */
.pp-newplan > summary { font-weight: 600; }
.pp-newplan .pp-np-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* v0.46.14: IP pool picker — even grid, filter, tick all/none */
.pp-newplan .pp-pools { margin-top: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.pp-pools-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); }
.pp-pools-bar .pp-pools-q { flex: 1 1 240px; width: auto; min-height: 36px; padding: 6px 12px; }
.pp-pools-n { font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pp-pool-grid { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; }
.pp-pool-grid > li { min-width: 0; }
.pp-pool-grid > li[hidden] { display: none; }
.pp-pool { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); min-width: 0; }
.pp-pool:hover { border-color: color-mix(in srgb, #2F7BFF 45%, var(--border)); }
.pp-pool.is-on { border-color: color-mix(in srgb, #2F7BFF 55%, var(--border)); background: color-mix(in srgb, #2F7BFF 6%, var(--surface)); }
.pp-pool input { margin: 0; }
.pp-pool-name { font: 600 .84rem/1.25 var(--f-mono, ui-monospace, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pp-pool-meta { display: flex; gap: 6px; align-items: center; font-size: .72rem; color: var(--text-2); white-space: nowrap; }
.pp-pool-meta b { font-weight: 600; color: #15803D; }
.pp-pool-meta b.is-zero { color: #B45309; }
.pp-pool-grid label.pp-pool { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; margin: 0; font-weight: 400; }
.pp-pool-grid label.pp-pool > input { grid-row: 1 / 3; align-self: center; }
.pp-pool-grid label.pp-pool > .pp-pool-meta { grid-column: 2; }

/* v0.46.15/16: Set up provisioning (many plans at once), modern look */
.bp-head-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.bp-master { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 16px 20px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 16px 32px -24px rgba(14,27,51,.35); }
.bp-master-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #2F7BFF, #1D4ED8); color: #fff; box-shadow: 0 8px 18px -8px rgba(47,123,255,.7); }
.bp-master-ic .ico { width: 22px; height: 22px; }
.bp-master-main { display: grid; gap: 4px; min-width: 260px; }
.bp-master-main label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0; }
.bp-master-main select { min-height: 42px; font-weight: 600; border-radius: 12px; }
.bp-master-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bp-master-stats > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: .8rem; color: var(--text-2); }
.bp-master-stats > span b { font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.bp-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--text); background: var(--surface); }
.bp-refresh:hover { border-color: #2F7BFF; color: #1D4ED8; }
.bp-refresh .ico { width: 15px; height: 15px; }
.bp-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.bp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: .84rem; font-weight: 600; color: var(--text-2); cursor: pointer; }
.bp-chip b { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: .74rem; text-align: center; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-variant-numeric: tabular-nums; }
.bp-chip.is-warn b { background: #FFF1D6; color: #B45309; } .bp-chip.is-blue b { background: #E1ECFF; color: #1D4ED8; } .bp-chip.is-ok b { background: #DDF5E7; color: #15803D; }
.bp-chip:hover { color: var(--text); }
.bp-chip[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(14,27,51,.08), 0 4px 12px -6px rgba(14,27,51,.25); }
.bp-find { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-find .bp-line { width: auto; min-height: 40px; border-radius: 12px; }
.bp-search { position: relative; display: flex; align-items: center; margin: 0; }
.bp-search .ico { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-2); pointer-events: none; }
.bp-search input { width: 260px; min-height: 40px; padding-left: 36px; border-radius: 12px; }
.bp-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 12px; position: sticky; top: 8px; z-index: 6; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.bp-bulk.has-ticked { border-color: color-mix(in srgb, #2F7BFF 45%, var(--border)); box-shadow: 0 10px 28px -18px rgba(47,123,255,.6); }
.bp-bulk-n { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; }
.bp-count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: #0E1B33; color: #fff; font-size: .82rem; font-variant-numeric: tabular-nums; }
.bp-mini { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--text); cursor: pointer; }
.bp-mini:hover { border-color: #2F7BFF; color: #1D4ED8; }
.bp-mini .ico { width: 14px; height: 14px; }
.bp-sep { width: 1px; height: 26px; background: var(--border); margin: 0 2px; }
.bp-bulk-l { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.bp-bulk select { width: auto; min-height: 38px; max-width: 280px; border-radius: 10px; }
.bp-os-pick { position: relative; }
.bp-os-pick > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: .84rem; font-weight: 600; list-style: none; background: var(--surface); }
.bp-os-pick > summary .ico { width: 15px; height: 15px; }
.bp-os-pick > summary::-webkit-details-marker { display: none; }
.bp-os-pick[open] > summary { border-color: #2F7BFF; color: #1D4ED8; }
.bp-os-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 0 18px 40px -16px rgba(14,27,51,.4); display: grid; gap: 4px; min-width: 300px; max-height: 360px; overflow-y: auto; }
.bp-os-menu .btn { margin-top: 6px; }
.bp-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 9px; border-radius: 9px; font-size: .84rem; font-weight: 500; cursor: pointer; }
.bp-check:hover { background: color-mix(in srgb, #2F7BFF 7%, transparent); }
.bp-check input, .bp-tick { width: 18px; height: 18px; margin: 0; accent-color: #2F7BFF; cursor: pointer; }
.bp-wrap { border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 2px rgba(14,27,51,.04), 0 18px 36px -28px rgba(14,27,51,.4); }
.bp-table { table-layout: fixed; width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; }
.bp-table thead th { position: sticky; top: 0; background: color-mix(in srgb, var(--text) 3%, var(--surface)); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); padding: 12px 12px; border-bottom: 1px solid var(--border); }
.bp-table th:nth-child(1), .bp-table td.bp-c-on { width: 48px; text-align: center; }
.bp-table th:nth-child(2) { width: 22%; } .bp-table th:nth-child(3) { width: 19%; } .bp-table th:nth-child(4) { width: 27%; } .bp-table th:nth-child(5) { width: 17%; } .bp-table th:nth-child(6) { width: 130px; }
.bp-table td { vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--border); }
.bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-row { transition: background .15s ease; }
.bp-row:hover { background: color-mix(in srgb, var(--text) 2%, transparent); }
.bp-row.is-on { background: color-mix(in srgb, #2F7BFF 5%, transparent); }
.bp-row.is-on td:first-child { box-shadow: inset 3px 0 0 #2F7BFF; }
.bp-row.is-skip { background: color-mix(in srgb, var(--text) 2%, transparent); }
.bp-row.is-skip .bp-name { color: var(--text-2); }
.bp-row[hidden] { display: none; }
.bp-name { display: block; font-weight: 700; font-size: .95rem; color: var(--text); text-decoration: none; line-height: 1.3; }
.bp-name:hover { color: #1D4ED8; }
.bp-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: .76rem; color: var(--text-2); }
.bp-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.bp-meta .ico { width: 12px; height: 12px; }
.bp-specs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.bp-specs i { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 7px; font-style: normal; font-size: .72rem; font-weight: 600; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font-variant-numeric: tabular-nums; }
.bp-specs .ico { width: 12px; height: 12px; color: var(--text-2); }
.bp-sel { width: 100%; min-height: 40px; font-size: .84rem; border-radius: 11px; }
.bp-note { font-size: .84rem; color: var(--text-2); }
.bp-note .ico { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.bp-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .76rem; margin-top: 7px; font-weight: 600; }
.bp-hint > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; }
.bp-hint .ico { width: 13px; height: 13px; }
.bp-hint .is-ok { color: #15803D; background: #E7F7EE; } .bp-hint .is-bad { color: #B91C1C; background: #FDECEC; } .bp-hint .is-warn { color: #B45309; background: #FFF4E0; }
.bp-hint a { font-weight: 700; color: #1D4ED8; }
.bp-os > summary { position: relative; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; list-style: none; padding: 8px 10px; min-height: 40px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.bp-os > summary::-webkit-details-marker { display: none; }
.bp-os > summary > .ico { width: 14px; height: 14px; color: var(--text-2); transition: transform .2s ease; }
.bp-os[open] > summary { border-color: #2F7BFF; }
.bp-os[open] > summary > .ico { transform: rotate(180deg); }
.bp-os-n { font-size: .74rem; padding: 2px 8px; border-radius: 7px; background: #E1ECFF; color: #1D4ED8; white-space: nowrap; }
.bp-os-n.is-warn { background: #FFF4E0; color: #B45309; }
.bp-os-names { font-size: .76rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bp-os-list { display: grid; gap: 2px; padding: 6px 0 0; max-height: 230px; overflow-y: auto; }
.bp-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: #EEF1F6; color: #475569; }
.bp-st > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bp-st-set { background: #E7F7EE; color: #15803D; } .bp-st-suggested { background: #E8F0FF; color: #1D4ED8; }
.bp-st-needs_plan, .bp-st-incomplete { background: #FFF4E0; color: #B45309; }
.bp-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px; color: var(--text-2); font-size: .9rem; }
.bp-empty[hidden] { display: none; }
.bp-empty .ico { width: 18px; height: 18px; }
.bp-save { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 150px 12px 14px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, rgba(47,123,255,.35), transparent 55%), #0E1B33; border-radius: 18px; box-shadow: 0 18px 40px -16px rgba(14,27,51,.6); z-index: 6; }
.bp-save-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.1); }
.bp-save-ic .ico { width: 18px; height: 18px; }
.bp-save-txt { flex: 1; font-size: .86rem; color: #C9D6EE; }
.bp-save-txt b { color: #fff; }
.bp-save .btn { flex: none; }
.bp-errs { margin: 6px 0 0 18px; }
@media (max-width: 720px) {
  .bp-master-stats { margin-left: 0; } .bp-master-main { min-width: 0; flex: 1; }
  .bp-find, .bp-search, .bp-search input, .bp-find .bp-line { width: 100%; flex: 1 1 100%; }
  .bp-bulk { position: static; } .bp-sep { display: none; } .bp-bulk select { max-width: 100%; flex: 1 1 100%; }
  .bp-save { flex-wrap: wrap; padding: 12px 14px 74px; } .bp-save-ic { display: none; }
}
/* v0.46.18: save bar vs. chat button; save button always orange on the dark bar */
/* the bar stops short of the chat button, which sits beside it */
@media (min-width: 721px) { body:has(.chat-fab) .bp-save { margin-right: 170px; } }
.bp-save { padding-right: 16px; }
.bp-save[hidden] { display: none; }
.bp-save .btn.btn-signal { background: linear-gradient(135deg, #FFB547, #F58A1F); border-color: transparent; color: #1A1206; font-weight: 700; padding: 11px 22px; box-shadow: 0 10px 22px -10px rgba(245,138,31,.75); }
.bp-save .btn.btn-signal:hover { background: linear-gradient(135deg, #FFC266, #F79A3A); color: #1A1206; }
@media (max-width: 720px) { .bp-save { padding-bottom: 12px; bottom: 84px; } }

/* v0.46.19: "Change website to …" next to a spec difference */
.bp-fix { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 8px; border: 1px solid #BFD3FF; background: #EEF4FF; color: #1D4ED8; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.bp-fix:hover { background: #DCE8FF; border-color: #93B4FF; }
.bp-fix:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.bp-fix .ico { width: 13px; height: 13px; }
.bp-fix[hidden] { display: none; }

/* v0.46.24: "Create HR …" / "Use HR …" under the plan on Set up provisioning */
.bp-hr { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 4px 11px; border-radius: 8px; border: 1px dashed #F5A04A; background: #FFF6EC; color: #B45309; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-hr:hover { background: #FFEBD4; border-style: solid; }
.bp-hr:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }
.bp-hr .ico { width: 13px; height: 13px; flex: none; }
.bp-hr[hidden] { display: none; }

/* v0.47.0: location choice on the order page */
.loc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.loc-opt { position: relative; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line, #d5d9dc); border-radius: 12px; padding: 12px 14px 12px 40px; cursor: pointer; background: var(--card, #fff); transition: border-color .15s, box-shadow .15s; }
.loc-opt:hover { border-color: var(--ink-3, #8a949a); }
.loc-opt.is-on, .loc-opt:has(input:checked) { border-color: var(--signal, #F2B300); box-shadow: 0 0 0 3px rgba(242,179,0,.18); }
.loc-opt input { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0; width: 16px; height: 16px; accent-color: var(--signal, #F2B300); }
.loc-flag { font-size: 1.5rem; line-height: 1; width: 28px; text-align: center; flex: none; }
.loc-flag .ico { width: 20px; height: 20px; color: var(--ink-3, #8a949a); }
.loc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.loc-body b { font-weight: 700; }
.loc-opt.is-out { opacity: .5; cursor: not-allowed; }

/* v0.47.1: location rows and "Set up all N locations" on Set up provisioning */
.bp-loc { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 3px 10px; border-radius: 999px; background: #EEF4FF; color: #1E3A8A; font-weight: 700; font-size: .82rem; }
.bp-loc small { font-weight: 600; color: #475569; }
.bp-loc .is-out { color: #B91C1C; }
.bp-loc .ico { width: 13px; height: 13px; }
.bp-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 9px; border: 0; background: linear-gradient(135deg,#FFB547,#F58A1F); color: #1A1206; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(245,138,31,.25); }
.bp-all:hover { filter: brightness(1.05); }
.bp-all:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }
.bp-all .ico { width: 14px; height: 14px; }

/* v0.47.4: the settings menu is sticky; when it is taller than the window its list scrolls on its own
   (the search box stays on top so its results pop-up is not cut off). */
@media (min-width: 821px) {
  .settings-nav { max-height: calc(100vh - 32px); }
  .settings-nav > .sn-all { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -6px; padding-right: 6px; scrollbar-width: thin; }
}

/* v0.47.6: plan type badges and filter */
.badge.kind-shared { background: #EEF4FF; color: #2952CC; border-color: #C9D8FF; }
.badge.kind-vps { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.badge.kind-dedicated { background: #F4F3FF; color: #5925DC; border-color: #D9D6FE; }
.kind-tabs { margin: 10px 0 14px; }
.bp-kinds { margin: -4px 0 14px; }

/* v0.47.10: Set up provisioning without tick boxes: a Save button on each row */
.bp-rowsave { display: block; margin-top: 8px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: 600 .8rem/1.2 var(--f-body); color: var(--text); cursor: pointer; }
.bp-rowsave[hidden] { display: none; }
.bp-rowsave .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.bp-rowsave:hover { border-color: #2F7BFF; color: #2F7BFF; }
.bp-row.is-on .bp-rowsave { background: #2F7BFF; border-color: #2F7BFF; color: #fff; }

/* v0.49.7: calmer, even Settings pages.
   - section header: title + one short line, Open all / Close all on the same line
   - every setting is one row: name and help on the left, the box on the right (all boxes the same width)
   - on/off settings are a switch at the right end of the row
   - Robot accounts and Provisioning nodes fold like the other groups
   - the settings menu is tighter so it fits on a laptop screen */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 2px 0 14px; }
.sec-head h2 { margin: 0 0 3px; font-size: 1.3rem; letter-spacing: -.01em; }
.sec-head p { margin: 0; font-size: .86rem; color: var(--text-2); }
.sec-head .sg-tools { margin: 0; }
.sg-sub { display: inline; margin-left: 8px; font: 500 .82rem/1.2 var(--f-body); color: var(--text-2); }
.sg-intro { margin: 14px 0 14px; font-size: .88rem; color: var(--text-2); max-width: 70ch; }
details.sg-fold.pn { padding: 0; display: block; }
details.sg-fold.pn .pn-add { margin-top: 12px; }
details.sg-fold.pn .pn-list + .pn-add { margin-top: 12px; }
.sg-body > .set-item:first-child { margin-top: 0; }
.sg-body > .hookbox { margin: 14px 0 6px; }

@media (min-width: 761px) {
  .sg-body > .set-item { padding: 16px 0; margin: 0; border-radius: 0; }
  .sg-body > .test-row { padding-top: 14px; border-top: 1px solid var(--border); }
  .sg-body > .set-item + .set-item, .sg-body > .hookbox + .set-item { border-top: 1px solid var(--border); }
  .sg-body > .set-item.is-attn { padding-left: 12px; }
  .sg-body .set-item > .field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-rows: auto 1fr; column-gap: 36px; align-items: start; margin: 0; }
  .sg-body .set-item > .field > * { grid-column: 2; }
  .sg-body .set-item > .field > label:first-child { grid-column: 1; grid-row: 1; margin: 9px 0 0; font-weight: 600; font-size: .92rem; }
  .sg-body .set-item > .field > .hint { grid-column: 1; grid-row: 2; margin-top: 3px; }
  .sg-body .set-item > .field > input, .sg-body .set-item > .field > select, .sg-body .set-item > .field > textarea { grid-row: 1 / span 2; width: 100%; max-width: none; }
  .sg-body .set-item > .field > .error, .sg-body .set-item > .field > label.check { grid-row: auto; }
  .sg-body .set-item > .field > label.check { margin: 8px 0 0; }
  .sg-body .set-item > .set-flags { margin-bottom: 6px; }
}
.sg-body .set-item > .field > .w-sm { width: 100%; }

/* on/off rows: text on the left, a switch on the right */
.sg-body .switch-row { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.sg-body .switch-row > span { flex: 1; min-width: 0; order: 1; }
.sg-body .switch-row > span > b { font-weight: 600; font-size: .92rem; }
.sg-body .switch-row > input[type="checkbox"] { order: 2; -webkit-appearance: none; appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 99px;
  background: var(--border-strong, #CBD5E1); position: relative; cursor: pointer; transition: background .15s; border: 0; }
.sg-body .switch-row > input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .15s; }
.sg-body .switch-row > input[type="checkbox"]:checked { background: var(--ok, #16A34A); }
.sg-body .switch-row > input[type="checkbox"]:checked::after { transform: translateX(18px); }
.sg-body .switch-row > input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sg-body .switch-row > input, .sg-body .switch-row > input::after { transition: none; } }
@media (max-width: 760px) { .sg-body > .set-item { padding: 12px 0; } .sg-body > .set-item + .set-item { border-top: 1px solid var(--border); } }

/* tighter settings menu */
@media (min-width: 821px) {
  .settings-nav { padding: 8px; }
  .settings-nav .settings-nav-h { margin: 8px 6px 2px; padding-top: 8px; font: 700 .7rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
  .site-look .settings-nav .settings-nav-h { font-family: var(--f-body); }
  .settings-nav a:not(.ss-review) { padding: 5px 10px; font-size: .86rem; }
  .settings-nav a.ss-review { padding: 6px 10px; font-size: .82rem; }
  .settings-nav > .sn-all { mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); padding-bottom: 14px; }
}

/* v0.50.0: Add a client / Add a server */
.mc-form h2 { margin: 22px 0 10px; font-size: 1.05rem; }
.mc-form > h2:first-of-type { margin-top: 14px; }
.mc-more { margin: 6px 0 4px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 14px; }
.mc-more > summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.mc-more[open] { padding-bottom: 6px; }
.mc-how { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mc-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-weight: 600; font-size: .9rem; background: var(--surface); }
.mc-opt input { margin: 0; flex: none; }
.mc-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, var(--hover)); }
.mc-form .for-vps, .mc-form .for-shared, .mc-form .for-server { display: none; }
.mc-form[data-how="vps"] .for-vps, .mc-form[data-how="shared"] .for-shared, .mc-form[data-how="server"] .for-server { display: block; }
.mc-form .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 640px) { .mc-how { grid-template-columns: 1fr; } }
.section-head .sh-btns { display: inline-flex; gap: 8px; align-items: center; }
.section-head .sh-btns form { margin: 0; }
.sxh-row { display: flex; align-items: stretch; gap: 12px; margin-top: 18px; }
.sxh-row .sxh-search { margin-top: 0; flex: 1 1 auto; }
.sxh-row .cl-add { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 0 20px; border-radius: 16px; font-weight: 700; white-space: nowrap; text-decoration: none;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.sxh-row .cl-add:hover { background: rgba(255,255,255,.18); }
.sxh-row .cl-add .ico { width: 16px; height: 16px; }
@media (max-width: 640px) { .sxh-row { flex-direction: column; } .sxh-row .cl-add { justify-content: center; padding: 12px 20px; } }

/* v0.51.0: server requests (servers run by hand) */
.sr-card .sr-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sr-card .sr-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2, var(--surface)); }
.sr-card .sr-list li > span:nth-child(2), .sr-card .sr-list.is-past li > span:first-child { flex: 1; min-width: 0; }
.sr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn, #D97706); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn, #D97706) 20%, transparent); }
.sreq-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; align-items: start; }
.sr-act { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.sr-act[open] { grid-column: 1 / -1; box-shadow: 0 10px 26px -18px rgba(15, 23, 42, .35); }
.sr-act > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; cursor: pointer; list-style: none; }
.sr-act > summary::-webkit-details-marker { display: none; }
.sr-act > summary .ico { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.sr-act > summary:hover { background: var(--hover); border-radius: inherit; }
.sr-act form { padding: 0 14px 14px; }
.sr-warn { padding: 10px 12px; border-radius: var(--r-sm); background: var(--err-bg, #FEF2F2); }
.sr-probs { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.sr-past { margin-top: 14px; }
.sr-past > summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.sr-past .sr-list { margin-top: 10px; }

/* v0.52.0: Fleet → Other suppliers, supplier cost card */
.sup-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sup-stats .stat.is-alert b { color: var(--err); }
.sup-table tr.is-alert td { background: color-mix(in srgb, var(--err, #DC2626) 6%, transparent); }
.sup-table td { vertical-align: top; }
@media (max-width: 900px) { .sup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.sc-figs div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.sc-figs b { display: block; font-size: 1.05rem; }
.sc-figs span { font-size: .8rem; color: var(--text-2); }
.sup-table td .btn { white-space: normal; text-align: left; }
.mc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* v0.53.1: Staff accounts page even */
.staff-row { grid-template-columns: minmax(170px, 1.4fr) minmax(200px, 1fr) minmax(150px, 1.1fr) minmax(120px, .9fr) auto; gap: 20px; padding: 18px 22px; }
.staff-row .role-form { display: flex; gap: 6px; align-items: center; }
.staff-row .role-form select { flex: 1 1 auto; min-width: 110px; }
.staff-row .sr-who b { font-size: 1rem; }
.staff-row .srv-sub-line { overflow-wrap: anywhere; }
.staff-row .sr-acts { align-self: center; padding-top: 0; }
.role-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.role-pick .role-opt { display: flex; align-items: flex-start; margin: 0; font-weight: 400; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.role-pick .role-opt input { margin: 3px 0 0; flex: none; }
.role-pick .role-opt span { display: grid; gap: 2px; }
.role-opt small { color: var(--text-2); font-size: .84rem; line-height: 1.35; }
.role-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, var(--hover)); }
.role-pick { border: 0; padding: 0; margin: 4px 0 0; }
.staff-add-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.staff-list { container-type: inline-size; }
@media (max-width: 1440px) { .staff-row { grid-template-columns: minmax(170px, 1.4fr) minmax(200px, 1fr) minmax(150px, 1.1fr) minmax(120px, .9fr) auto; } .staff-row .sr-acts { align-self: center; text-align: right; } .staff-acts { left: auto; right: 0; } }
.staff-row .sr-acts .btn { width: auto; white-space: nowrap; }
@container (max-width: 880px) {
  .staff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; row-gap: 14px; }
  .staff-row .sr-acts { grid-column: 3; grid-row: 1; align-self: start; }
}
@container (max-width: 520px) { .staff-row { grid-template-columns: minmax(0, 1fr) auto; } .staff-row .sr-acts { grid-column: 2; } }
@media (max-width: 760px) { .role-opts { grid-template-columns: 1fr; } }
.staff-add-note { margin: 16px 0 12px; }

/* v0.54.0: staff roles and permissions */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 22px; margin: 14px 0; }
.perm-group { display: grid; gap: 4px; align-content: start; }
.perm-group > b { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 2px; }
.perm-group .check.perm { margin: 0; padding: 4px 0; font-size: .9rem; align-items: flex-start; }
.perm-group .check.perm input:disabled + span { color: var(--text-2); }
.staff-row .staff-perms { grid-column: 1 / -1; margin-top: -4px; }
.staff-row .staff-perms > summary { cursor: pointer; color: var(--text-2); }
.staff-row .staff-perms[open] { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2, var(--surface)); }
.role-del { margin-top: 10px; }
.role-h { margin: 10px 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; }

/* v0.55.0: customer numbers in staff views — the number customers see, a copy button, the internal number in grey */
.refn { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.refn-m { font-family: var(--f-mono, ui-monospace, monospace); letter-spacing: .01em; }
.refn-id { font-size: .78em; font-weight: 400; color: var(--text-3, var(--text-2)); font-family: var(--f-mono, ui-monospace, monospace); }
h1 .refn-id { font-size: .55em; color: inherit; opacity: .55; }
h1 .refn-m { font-family: inherit; letter-spacing: -.01em; }
h1 .refn-copy { width: 24px; height: 24px; color: inherit; opacity: .7; }
h1 .refn-copy:hover { opacity: 1; background: rgba(127,127,127,.18); color: inherit; }
h1 .refn-copy::before { inset: 4px 8px 8px 4px; }
h1 .refn-copy::after { inset: 8px 4px 4px 8px; }
.refn-copy { align-self: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-2); position: relative; }
.refn-copy::before { content: ""; position: absolute; inset: 3px 6px 6px 3px; border: 1.5px solid currentColor; border-right: 0; border-bottom: 0; border-radius: 2px 0 0 0; }
.refn-copy::after { content: ""; position: absolute; inset: 6px 3px 3px 6px; border: 1.5px solid currentColor; border-radius: 2px; }
.refn-copy:hover { color: var(--accent, #2563eb); background: var(--surface-2, rgba(0,0,0,.05)); }
.refn-copy.is-copied::before { inset: 3px 6px 5px 7px; border: solid var(--ok, #16a34a); border-width: 0 2px 2px 0; border-radius: 0; transform: rotate(45deg); }
.refn-copy.is-copied::after { display: none; }
.refn-copy:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
/* v0.55.0: Find any number */
.nav-find { position: relative; margin: 0 0 10px; }
.nav-find svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.nav-find input { width: 100%; padding: 7px 10px 7px 32px; font-size: .85rem; border-radius: 8px; }
.find-box label { display: block; font-weight: 600; margin-bottom: 8px; }
.find-row { display: flex; gap: 8px; }
.find-row input { flex: 1; min-width: 0; font-family: var(--f-mono, ui-monospace, monospace); }
.find-list { padding: 4px; }
.find-hit { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; }
.find-hit + .find-hit { border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.find-hit:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.find-kind { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.find-main { display: flex; flex-direction: column; min-width: 0; }
.find-main b { font-family: var(--f-mono, ui-monospace, monospace); font-weight: 600; overflow-wrap: anywhere; }
.find-main small { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-how { font-size: .78rem; color: var(--text-2); text-align: right; }
.find-hit.is-internal { opacity: .72; }
@media (max-width: 640px) { .find-hit { grid-template-columns: 1fr; gap: 2px; } .find-how { text-align: left; } }
.ni-form { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 260px) auto; gap: 12px; align-items: end; }
.ni-form .field { margin: 0; }
@media (max-width: 640px) { .ni-form { grid-template-columns: 1fr; } }
/* v0.56.0: Website → Seasonal */
.sn-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.sn-status .badge { margin-right: 8px; }
.sn-pv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sn-ev { margin: 16px 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.sn-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sn-theme { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; cursor: pointer; background: var(--surface, #fff); }
.sn-theme input { position: absolute; opacity: 0; pointer-events: none; }
.sn-theme:has(input:checked) { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px var(--accent, #2563eb); }
.sn-theme:has(input:focus-visible) { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.sn-name { font-weight: 600; font-size: .92rem; }
.sn-sw { position: relative; display: block; height: 86px; border-radius: 8px; overflow: hidden; background: #F6F8FC; border: 1px solid rgba(0,0,0,.06); }
.sn-sw i { position: absolute; left: 0; right: 0; top: 0; height: 14px; }
.sn-sw b { position: absolute; left: 26%; right: 26%; top: 34px; height: 9px; border-radius: 3px; background: #0E1B33; box-shadow: 0 14px 0 -1px #0E1B33; }
.sn-sw s { position: absolute; left: 40%; right: 40%; bottom: 10px; height: 10px; border-radius: 4px; }
.sn-sw-frost { background: linear-gradient(180deg, #EAF3FD, #F6F8FC); }
.sn-sw-frost i { background: #DCEBFA; } .sn-sw-frost s { background: #123A63; }
.sn-sw-frost::after { content: ""; position: absolute; inset: 14px 0 0; background: radial-gradient(circle, #fff 1.6px, transparent 2.2px) 0 0/22px 18px; opacity: .9; filter: drop-shadow(0 0 2px #7AA9DA); }
.sn-sw-evergreen i { background: #0F3B2E; } .sn-sw-evergreen s { background: #0F3B2E; }
.sn-sw-evergreen::after { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 8px; background: radial-gradient(circle, #C9A24A 2px, transparent 2.5px) 0 0/16px 8px, radial-gradient(circle, #B23A3A 2px, transparent 2.5px) 8px 0/16px 8px; }
.sn-sw-lights i { background: #0B1220; } .sn-sw-lights s { background: #0E1B33; }
.sn-sw-lights::after { content: ""; position: absolute; left: 4px; right: 4px; top: 18px; height: 6px; background: radial-gradient(circle, #FF5A5F 2.4px, transparent 3px) 0 0/40px 6px, radial-gradient(circle, #3EE07E 2.4px, transparent 3px) 10px 0/40px 6px, radial-gradient(circle, #FFC93C 2.4px, transparent 3px) 20px 0/40px 6px, radial-gradient(circle, #4DA3FF 2.4px, transparent 3px) 30px 0/40px 6px; filter: drop-shadow(0 0 2px rgba(255,255,255,.5)); }
.sn-sw-blackout i { background: #000; } .sn-sw-blackout s { background: #000; box-shadow: inset -6px 0 0 #FFE14D; }
.sn-sw-blackout::after { content: "−60%"; position: absolute; left: 0; right: 0; top: 16px; text-align: center; font: 800 46px/1 var(--f-head, system-ui); color: transparent; -webkit-text-stroke: 1px rgba(14,27,51,.12); }
.sn-sw-gold { background: linear-gradient(180deg, #FBF8F1, #F6F8FC); } .sn-sw-gold i { background: #0D0D0F; border-bottom: 2px solid #D9B865; } .sn-sw-gold s { background: #0D0D0F; box-shadow: 0 0 0 1px #B08A3E; }
.sn-sw-terminal i { background: #070B1A; } .sn-sw-terminal s { background: #0B1226; box-shadow: 0 0 8px rgba(34,211,238,.6); }
.sn-sw-terminal::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -6px; height: 34px; background: linear-gradient(rgba(34,211,238,.4) 1px, transparent 1px) 0 0/100% 8px, linear-gradient(90deg, rgba(139,92,246,.35) 1px, transparent 1px) 0 0/14px 100%; transform: perspective(60px) rotateX(45deg); }
.sn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.sn-grid .sn-wide { grid-column: span 2; }
.sn-dates { grid-template-columns: repeat(2, minmax(0, 260px)); margin-top: 12px; }
.sn-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sn-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; cursor: pointer; }
.sn-mode:has(input:checked) { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 1px var(--accent, #2563eb); }
.sn-mode input { margin-top: 3px; }
.sn-mode span { display: flex; flex-direction: column; gap: 2px; }
.sn-mode small { color: var(--text-2); font-size: .84rem; }
@media (max-width: 760px) { .sn-grid, .sn-modes, .sn-dates { grid-template-columns: 1fr; } .sn-grid .sn-wide { grid-column: auto; } }
/* v0.56.1: swatches for the other periods */
.sn-sw-midnight i { background: #0B1530; } .sn-sw-midnight s { background: #0B1530; box-shadow: inset -6px 0 0 #F5D98B; }
.sn-sw-midnight::after { content: ""; position: absolute; inset: 14px 0 0; background: radial-gradient(circle, #F5C451 1.6px, transparent 2px) 0 0/19px 15px, radial-gradient(circle, #8FB3FF 1.4px, transparent 1.8px) 9px 7px/23px 17px; }
.sn-sw-backup i { background: #0D3B3A; } .sn-sw-backup s { background: #0D3B3A; }
.sn-sw-backup::after { content: ""; position: absolute; left: 22%; right: 22%; top: 21px; height: 5px; border-radius: 9px; background: linear-gradient(90deg, #14B8A6, #38BDF8); }
.sn-sw-colours { background: radial-gradient(40px 30px at 15% 40%, rgba(236,72,153,.45), transparent), radial-gradient(40px 30px at 85% 35%, rgba(34,197,94,.4), transparent), radial-gradient(40px 30px at 30% 90%, rgba(245,158,11,.45), transparent), radial-gradient(40px 30px at 75% 90%, rgba(59,130,246,.4), transparent), #F6F8FC; }
.sn-sw-colours i { background: linear-gradient(90deg, #FFD3E6, #FFF0BF, #D4F5DC, #D6E7FF); } .sn-sw-colours s { background: #0E1B33; }
.sn-sw-uptime i { background: #0A0F0C; } .sn-sw-uptime s { background: #0A0F0C; box-shadow: 0 0 6px rgba(74,222,128,.7); }
.sn-sw-uptime::after { content: "99.99%"; position: absolute; left: 0; right: 0; top: 22px; text-align: center; font: 700 30px/1 ui-monospace, monospace; color: transparent; -webkit-text-stroke: 1px rgba(22,163,74,.25); }
.sn-sw-hex i { background: #1E1B2E; } .sn-sw-hex s { background: #1E1B2E; box-shadow: inset -6px 0 0 #86EFAC; }
.sn-sw-hex::after { content: "0x100"; position: absolute; left: 0; right: 0; top: 22px; text-align: center; font: 700 32px/1 ui-monospace, monospace; color: transparent; -webkit-text-stroke: 1px rgba(124,58,237,.25); }
.sn-sw-diya { background: linear-gradient(180deg, #FFF3E2, #F6F8FC); } .sn-sw-diya i { background: #7A2410; } .sn-sw-diya s { background: #7A2410; }
.sn-sw-diya::after { content: ""; position: absolute; left: 6px; right: 6px; top: 17px; height: 10px; background: radial-gradient(ellipse 4px 6px at 50% 40%, #FCD34D 70%, transparent 100%) 0 0/24px 10px; filter: drop-shadow(0 0 3px rgba(249,115,22,.8)); }
.sn-sw-pumpkin i { background: #1F1530; } .sn-sw-pumpkin s { background: #1F1530; box-shadow: inset -6px 0 0 #FDBA74; }
.sn-sw-pumpkin { background: radial-gradient(50px 40px at 20% 90%, rgba(249,115,22,.3), transparent), radial-gradient(50px 40px at 85% 85%, rgba(124,58,237,.25), transparent), #F6F8FC; }
.sn-sw-pumpkin::after { content: "︶ ︶"; position: absolute; left: 10px; right: 10px; top: 18px; display: flex; justify-content: space-between; color: #4C3575; font-size: 14px; letter-spacing: 60px; }
.sn-name small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-2); margin-top: 1px; }
/* v0.56.3: real thumbnails of each theme; hover shows it large */
.sn-sw { height: auto; aspect-ratio: 480 / 273; background: #F6F8FC; }
.sn-sw::after, .sn-sw::before { content: none !important; }
.sn-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-zoom { position: fixed; left: 50%; top: 50%; z-index: 300; width: min(960px, 88vw); transform: translate(-50%, -48%) scale(.97); opacity: 0; visibility: hidden; pointer-events: none;
  border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -20px rgba(10,20,40,.55), 0 0 0 1px rgba(0,0,0,.08); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.sn-zoom img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (min-width: 900px) {
  .sn-theme:hover .sn-zoom { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition-delay: .35s, .35s, 0s; }
}
.sn-view { align-self: flex-start; margin-top: -2px; color: var(--text-2); }
@media (hover: hover) and (min-width: 900px) { .sn-view { display: none; } }
@media (prefers-reduced-motion: reduce) { .sn-zoom { transition: none; } }
/* v0.57.0: Website → Site-wide → Footer design */
.fd-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.fd-style { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; cursor: pointer; }
.fd-style:has(input:checked) { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px var(--accent, #2563eb); }
.fd-style input { position: absolute; opacity: 0; pointer-events: none; }
.fd-style:has(input:focus-visible) { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.fd-style img { width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(0,0,0,.06); }
.fd-style span { display: flex; flex-direction: column; gap: 2px; } .fd-style small { color: var(--text-2); font-size: .84rem; }
.fd-mid { margin-top: 6px; }
@media (max-width: 760px) { .fd-styles { grid-template-columns: 1fr; } }
/* v0.59.0: preparation mode */
.prep-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 18px; border-radius: 10px; font-size: .92rem;
  background: repeating-linear-gradient(135deg, rgba(245,158,11,.12) 0 12px, rgba(245,158,11,.06) 12px 24px); border: 1px solid rgba(217,119,6,.45); }
.prep-banner a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.prep-dot { width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,.2); flex: none; }
.prep-card { border-color: rgba(217,119,6,.45); }
.prep-card h2 small { font-size: .8rem; font-weight: 500; margin-left: 8px; }
.prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.prep-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2, rgba(0,0,0,.03)); border: 1px solid var(--line, rgba(0,0,0,.08)); }
.prep-grid b { font-size: 1.5rem; line-height: 1; }
.prep-grid span { font-size: .86rem; color: var(--text-2); }
.prep-grid .is-warn { border-color: rgba(217,119,6,.5); background: rgba(245,158,11,.08); }
.badge.b-held { background: rgba(245,158,11,.14); color: #92400E; }

/* v0.60.0: Move from WHMCS */
.wm-intro ol.wm-steps { margin: .4rem 0 .8rem 1.2rem; padding: 0; }
.wm-intro ol.wm-steps li { margin: .25rem 0; }
.wm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; }
.wm-grid .card { margin: 0; }
.wm-grid h2, .wm-table + h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.wm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.wm-kpis .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.wm-kpis .stat b { font-size: 1.3rem; }
.wm-kpis .stat span { font-size: .85rem; color: var(--text-2); }
.wm-scroll { overflow-x: auto; }
.wm-table th, .wm-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wm-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.wm-table tr.wm-has-warn td { border-bottom: 0; }
.wm-warn-row td { padding-top: 0; }
ul.wm-warn { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--warn); }
ul.wm-warn li { margin: 2px 0; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary h2 { display: inline; font-size: 1.05rem; }
details.card > summary::before { content: '▸ '; color: var(--text-2); }
details.card[open] > summary::before { content: '▾ '; }
.wm-kpis .stat b { order: -1; }
.wm-live .wm-now { font-size: 1.1rem; font-weight: 600; margin: .6rem 0 .4rem; }
.wm-log pre { max-height: 360px; overflow: auto; font-size: .82rem; line-height: 1.45; background: var(--code-bg); color: var(--code-text); padding: 10px 12px; border-radius: 8px; margin: .5rem 0 0; white-space: pre-wrap; }
/* v0.60.8: Server status tabs */
.mon-sum.mon-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
a.mon-k { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.mon-k:hover { border-color: var(--accent, #3B82F6); transform: translateY(-1px); }
a.mon-k.is-on { border-color: var(--accent, #3B82F6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #3B82F6) 25%, transparent); }
a.mon-k.mon-down.is-on { border-color: #EF4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .2); }
a.mon-k.mon-up.is-on { border-color: #22C55E; box-shadow: 0 0 0 2px rgba(34, 197, 94, .2); }
a.mon-k.mon-maint.is-on { border-color: #F59E0B; box-shadow: 0 0 0 2px rgba(245, 158, 11, .2); }
.mon-k.mon-all i { background: var(--text-2); }
@media (max-width: 860px) { .mon-sum.mon-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v0.60.12: client page, ended servers folded */
details.svc-ended { margin: 10px 0 4px; }
details.svc-ended > summary { cursor: pointer; font-weight: 600; padding: 8px 2px; color: var(--text-2); }
details.svc-ended > summary:hover { color: var(--text); }
details.svc-ended .table-wrap { margin-top: 6px; opacity: .85; }

/* v0.60.18: "Can't check" (firewalled, switched off, checks off): grey, never red */
.mon-sum.mon-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mon-sum.mon-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .mon-sum.mon-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mon-k.mon-quiet i { background: #64748B; }
.mon-quiet .mon-dot { background: #94A3B8; }
.mon-table tr.mon-quiet td { background: var(--surface-2, #F8FAFC); }
.mon-off { width: 100%; }
.mon-off > summary { list-style: none; width: 100%; text-align: center; cursor: pointer; }
.mon-off > summary::-webkit-details-marker { display: none; }
.mon-off[open] > summary { margin-bottom: 6px; }
.mon-off form { display: grid; gap: 6px; }
.mon-off input[type="text"] { width: 100%; font-size: .8rem; padding: 6px 8px; }
.mon-off .check span { font-size: .78rem; }
.live-nocheck { background: var(--surface-2, #F1F5F9); color: var(--text-2, #475569); border-color: var(--border, #E2E8F0); }
.vpx-live.is-nocheck { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.45); color: #E2E8F0; } .vpx-live.is-nocheck i { background: #94A3B8; box-shadow: none; }

/* v0.60.19: Server status actions: one row of round tools; maintenance and "Don't check" live in the ⋯ menu */
.mon-table td.mon-act { width: 1%; white-space: nowrap; vertical-align: middle; }
.mon-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.mon-tools form { margin: 0; display: contents; }
.mon-ico, .mon-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; font: 600 .8rem/1 var(--f-body); transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.mon-ico { width: 34px; padding: 0; list-style: none; }
.mon-ico::-webkit-details-marker { display: none; }
.mon-pill { padding: 0 14px 0 11px; color: var(--text); }
.mon-ico svg, .mon-pill svg { width: 16px; height: 16px; }
.mon-ico:hover, .mon-pill:hover { border-color: var(--accent, #3B82F6); color: var(--accent, #3B82F6); box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--accent, #3B82F6) 50%, transparent); }
.mon-ico:active, .mon-pill:active { transform: scale(.96); }
.mon-ico:focus-visible, .mon-pill:focus-visible { outline: 2px solid var(--accent, #3B82F6); outline-offset: 2px; }
.mon-pill.is-signal { background: linear-gradient(135deg, #EF4444, #DC2626); border-color: transparent; color: #fff; box-shadow: 0 4px 14px -6px rgba(220, 38, 38, .7); }
.mon-pill.is-signal:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 6px 18px -6px rgba(220, 38, 38, .8); }
.mon-menu { position: relative; }
.mon-menu[open] > .mon-ico { background: var(--text, #0F172A); color: #fff; border-color: transparent; }
.mon-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 300px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 18px 50px -12px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06); white-space: normal; text-align: left; animation: mon-pop .14s ease-out; }
.mon-pop.is-fixed { position: fixed; right: auto; top: auto; }
@keyframes mon-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.mon-pop-h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3, #64748B); }
.mon-pop-h svg { width: 14px; height: 14px; }
.mon-pop-sep { height: 1px; background: var(--border); margin: 12px -14px; }
.mon-chips { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; }
.mon-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2, #F8FAFC); color: var(--text); font: 600 .78rem/1 var(--f-body); cursor: pointer; transition: all .15s; }
.mon-chip:hover { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
.mon-chip.is-end { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
.mon-offf { display: grid !important; gap: 8px; }
.mon-offf input[type="text"] { width: 100%; height: 34px; border-radius: 10px; font-size: .82rem; padding: 0 10px; }
.mon-offf .check span { font-size: .8rem; }
.mon-offf .btn { justify-self: start; border-radius: 999px; }
@media (max-width: 860px) { .mon-tools { justify-content: flex-start; } }
.mon-offf .btn { height: 32px; padding: 0 16px; background: var(--text, #0F172A); color: #fff; border: 0; font-weight: 600; }
.mon-offf .btn:hover { filter: brightness(1.15); }
.mon-offf p { margin-top: 2px; }
.mon-chips .mon-chip { flex: 1 0 auto; }
/* v0.60.20: Stop checking lines up with the reason box (same width, height and corners) */
.mon-offf input[type="text"], .mon-offf .btn { height: 38px; border-radius: 10px; box-sizing: border-box; }
.mon-offf .btn { justify-self: stretch; width: 100%; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.mon-offf .check { margin: 0; }
.mon-offf p { margin: 0; text-align: center; font-size: .76rem; }
.mon-chips { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mon-chips .mon-chip { width: 100%; height: 34px; border-radius: 10px; }
.mon-chips > span { grid-column: span 2; align-self: center; }