/* 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; }
.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-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; }
.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); }