/*
  ACGX License Portal — Simple Dashboard UI v2.3
  UI-only rebuild: solid surfaces, clean hierarchy, no blur, no gradients.
*/
:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --canvas: #f6f7fb;
  --canvas-soft: #eef1f6;
  --surface: #ffffff;
  --surface-muted: #f9fafc;
  --surface-hover: #f2f5fa;
  --sidebar: #111827;
  --sidebar-soft: #1b2537;
  --sidebar-line: #2a364b;
  --input: #ffffff;

  --line: #e4e8ef;
  --line-strong: #cbd3df;
  --text: #172033;
  --text-soft: #354158;
  --muted: #69758b;
  --muted-2: #8a94a6;

  --brand: #2457e6;
  --brand-hover: #1c46bf;
  --brand-soft: #e9efff;
  --brand-ink: #183da7;
  --green: #14804a;
  --green-soft: #e9f8ef;
  --amber: #a96200;
  --amber-soft: #fff4df;
  --red: #c53752;
  --red-soft: #fff0f2;
  --purple: #6d4acb;
  --purple-soft: #f0ebff;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 5px 14px rgba(16, 24, 40, .06);
  --shadow-md: 0 16px 38px rgba(16, 24, 40, .08);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar-width: 250px;
  --content-max: 1480px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101521;
  --canvas-soft: #151b28;
  --surface: #181f2d;
  --surface-muted: #1d2534;
  --surface-hover: #242e40;
  --sidebar: #0d121d;
  --sidebar-soft: #182131;
  --sidebar-line: #2a3548;
  --input: #121927;
  --line: #2b3547;
  --line-strong: #445167;
  --text: #f3f6fb;
  --text-soft: #d6deeb;
  --muted: #9aa7ba;
  --muted-2: #78869a;
  --brand: #7295ff;
  --brand-hover: #92adff;
  --brand-soft: #22345f;
  --brand-ink: #c8d7ff;
  --green: #56cb8d;
  --green-soft: #173a2b;
  --amber: #f4bd59;
  --amber-soft: #453613;
  --red: #ff8da2;
  --red-soft: #4b202c;
  --purple: #bca4ff;
  --purple-soft: #36255d;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .22);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .18);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
code, pre { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid var(--canvas); border-radius: 99px; background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

h1, h2, h3, h4, p { margin: 0; }
h1 { color: var(--text); font-size: clamp(1.7rem, 2.4vw, 2.35rem); line-height: 1.14; letter-spacing: -.04em; }
h2 { color: var(--text); font-size: clamp(1.1rem, 1.65vw, 1.45rem); line-height: 1.24; letter-spacing: -.022em; }
h3 { color: var(--text); font-size: 1rem; line-height: 1.3; }
.muted, p.muted { color: var(--muted); }
.small { font-size: .875rem; }
.smaller { font-size: .8rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--brand);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; }

/* Application shell */
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.portal-main {
  width: min(100%, calc(var(--content-max) - var(--sidebar-width)));
  min-width: 0;
  margin: 0 auto;
  padding: 32px clamp(20px, 3.25vw, 52px) 56px;
}
.customer-shell { min-height: 100vh; background: var(--canvas); }
.customer-main { width: min(100%, var(--content-max)); min-width: 0; margin: 0 auto; padding: 30px clamp(20px, 3.25vw, 52px) 56px; }

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px 14px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-line);
  color: #e8edf7;
  background: var(--sidebar);
}
.sidebar-brand, .customer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-brand > div:not(.brand-mark), .customer-brand > div:not(.brand-mark) { min-width: 0; }
.sidebar-brand strong, .customer-brand strong { display: block; color: inherit; font-size: .92rem; font-weight: 780; white-space: nowrap; }
.sidebar-brand span, .customer-brand span { display: block; margin-top: 1px; overflow: hidden; color: #9aa9c0; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #527df0;
  border-radius: 11px;
  color: #ffffff;
  background: #2457e6;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: -.1em;
  box-shadow: none;
}
.brand-mark.small { width: 36px; height: 36px; border-radius: 10px; font-size: .73rem; }
.sidebar-nav { display: grid; gap: 3px; margin: 30px 0 14px; }
.nav-label { margin: 18px 10px 6px; color: #7c899e; font-size: .64rem; font-weight: 850; letter-spacing: .12em; }
.sidebar-nav a, .side-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #acb8cb;
  font-size: .84rem;
  font-weight: 690;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.sidebar-nav a span { display: inline-grid; width: 17px; place-items: center; color: #8ea0bc; font-size: .92rem; }
.sidebar-nav a:hover, .side-link:hover { color: #ffffff; background: var(--sidebar-soft); }
.sidebar-nav a.active { border-color: #365cb6; color: #ffffff; background: #244aa8; }
.sidebar-nav a.active span { color: #ffffff; }
.sidebar-nav a b, .customer-nav a b {
  display: grid;
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  place-items: center;
  border-radius: 99px;
  color: #ffffff;
  background: #d6445f;
  font-size: .62rem;
  font-weight: 850;
}
.sidebar-bottom { display: grid; gap: 3px; margin-top: auto; }
.side-link { min-height: 34px; padding-block: 7px; font-size: .76rem; }
.side-link.danger-link { color: #ffacb9; }
.sidebar-user { display: grid; gap: 3px; margin-top: 12px; padding: 11px; border: 1px solid var(--sidebar-line); border-radius: 10px; background: var(--sidebar-soft); }
.sidebar-user span { color: #89a9ff; font-size: .64rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-user strong { font-size: .8rem; }
.sidebar-user small { overflow: hidden; color: #9cabc0; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-only { display: none !important; }

/* Header and customer nav */
.topbar, .customer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.topbar { margin-bottom: 28px; }
.topbar-main, .topbar-actions, .inline-actions, .inline-form, .card-actions, .panel-actions, .command-actions, .key-action, .activation-actions, .ticket-card-top, .ticket-badges, .detail-header, .context-row, .customer-license-stats, .customer-activation, .customer-user, .item-right, .compact-item, .activation { display: flex; gap: 10px; }
.topbar-main { align-items: flex-start; min-width: 0; }
.topbar-main > div { min-width: 0; }
.topbar .muted { max-width: 700px; margin-top: 8px; }
.topbar-actions, .inline-actions, .panel-actions, .card-actions, .command-actions, .key-action, .activation-actions, .ticket-badges { align-items: center; flex-wrap: wrap; }
.customer-header {
  position: sticky;
  top: 0;
  z-index: 25;
  align-items: center;
  min-height: 72px;
  padding: 14px clamp(20px, 3.25vw, 52px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.customer-nav { display: flex; align-items: center; gap: 4px; }
.customer-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.customer-nav a:hover { color: var(--text); background: var(--surface-hover); }
.customer-nav a.active { border-color: var(--line); color: var(--text); background: var(--surface-muted); }
.customer-user { align-items: center; }
.customer-user > div { display: grid; gap: 1px; min-width: 0; text-align: right; }
.customer-user span { max-width: 190px; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-user strong { font-size: .8rem; }

/* Controls */
button, .primary, .primary-button, .ghost, .link-button, .icon-button, .warning-button, .danger-button, .text-link, .back-link { font: inherit; }
.primary, .primary-button, .ghost, .link-button, .warning-button, .danger-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.primary, .primary-button, .link-button:not(.ghost) { border-color: var(--brand); color: #ffffff; background: var(--brand); }
.primary:hover, .primary-button:hover, .link-button:not(.ghost):hover { border-color: var(--brand-hover); background: var(--brand-hover); }
.ghost { border-color: var(--line); color: var(--text-soft); background: var(--surface); }
.ghost:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-hover); }
.warning-button { border-color: #ecd297; color: var(--amber); background: var(--amber-soft); }
.warning-button:hover { border-color: var(--amber); }
.danger-button { border-color: #eeb7c2; color: var(--red); background: var(--red-soft); }
.danger-button:hover { border-color: var(--red); }
.icon-button { min-width: 38px; padding: 8px; border-color: var(--line); color: var(--text-soft); background: var(--surface); font-size: 1rem; }
.icon-button:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-hover); }
.small-btn { min-height: 30px; padding: 6px 9px; font-size: .73rem; }
.text-link { color: var(--brand); font-size: .78rem; font-weight: 780; }
.text-link:hover { color: var(--brand-hover); text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 10px; color: var(--brand); font-size: .78rem; font-weight: 760; }
.danger-link { color: var(--red) !important; }

label { display: grid; gap: 6px; color: var(--text-soft); font-size: .78rem; font-weight: 720; }
label small { color: var(--muted); font-size: .69rem; font-weight: 550; }
input, select, textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  background: var(--input);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(36, 87, 230, .12); }
input:disabled { cursor: not-allowed; opacity: .58; }
textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
select option { color: var(--text); background: var(--surface); }
.stack { display: grid; gap: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

/* Feedback and shell panels */
.flash { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: var(--surface); box-shadow: var(--shadow-xs); font-size: .84rem; }
.flash.success { border-color: #b9e7ca; color: var(--green); background: var(--green-soft); }
.flash.error { border-color: #f0bec8; color: var(--red); background: var(--red-soft); }
.flash button { padding: 0; border: 0; color: currentColor; background: transparent; font-size: 1.1rem; }
.panel { position: relative; margin-bottom: 18px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading .muted { margin-top: 6px; }
.new-key { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; padding: 18px; border: 1px solid #b9e7ca; border-radius: var(--radius); background: var(--green-soft); }
.new-key h2 { margin-bottom: 4px; }
.new-key p { max-width: 640px; color: var(--text-soft); }
.key-action { justify-content: flex-end; }
.key-action code { padding: 10px 11px; overflow-wrap: anywhere; border: 1px dashed #8acda3; border-radius: 8px; color: var(--green); background: var(--surface); font-weight: 800; }

/* Overview */
.metric-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 130px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: .75rem; font-weight: 680; }
.metric-card strong { display: block; margin: 12px 0 4px; color: var(--text); font-size: 2rem; line-height: 1; letter-spacing: -.055em; }
.metric-card.accent-blue { border-top: 3px solid var(--brand); }
.metric-card.accent-gold { border-top: 3px solid var(--amber); }
.metric-card.accent-purple { border-top: 3px solid var(--purple); }
.metric-card.accent-green { border-top: 3px solid var(--green); }
.command-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 0 18px; padding: 24px; border: 1px solid #314879; border-radius: var(--radius-lg); color: #f8fbff; background: #17294d; box-shadow: none; }
.command-hero h2 { margin-bottom: 7px; color: #ffffff; font-size: 1.5rem; }
.command-hero p:not(.eyebrow) { max-width: 650px; color: #c7d5ee; }
.command-hero .eyebrow { color: #a9c5ff; }
.command-hero .primary { border-color: #ffffff; color: #183da7; background: #ffffff; }
.command-hero .primary:hover { color: #123081; background: #edf3ff; }
.command-hero .ghost { border-color: #6079a9; color: #edf4ff; background: transparent; }
.command-hero .ghost:hover { background: #223b6d; }
.command-actions { justify-content: flex-end; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.dashboard-grid.wide-left { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); }
.compact-list { display: grid; gap: 8px; }
.compact-item { align-items: center; justify-content: space-between; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); transition: border-color .16s ease, background .16s ease; }
.compact-item:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.compact-item > div:first-child { min-width: 0; }
.compact-item strong, .compact-item span, .compact-item small { display: block; }
.compact-item strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.compact-item span, .compact-item small { overflow: hidden; margin-top: 2px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.item-right { align-items: flex-end; flex: 0 0 auto; text-align: right; }
.item-right b { color: var(--brand); font-size: .86rem; }
.plan-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-summary { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.plan-summary h3 { margin: 10px 0 5px; }
.plan-summary p { min-height: 40px; color: var(--muted); font-size: .78rem; }
.plan-summary footer { display: grid; gap: 3px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan-summary footer strong { color: var(--brand); font-size: .83rem; }
.plan-summary footer span { color: var(--muted); font-size: .71rem; }
.health-stack { display: grid; gap: 13px; }
.health-stack > div { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.health-stack strong { font-size: .81rem; }
.health-stack small { grid-column: 2; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.health-dot { display: inline-block; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--muted-2); }
.health-dot.good { background: var(--green); }
.health-dot.neutral { background: var(--amber); }

/* Tables, status, records */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; min-width: 730px; border-collapse: collapse; background: var(--surface); }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: var(--surface-muted); font-size: .69rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
td { color: var(--text-soft); font-size: .78rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-hover); }
td strong, td span { display: block; }
td span { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.table-code { display: inline-block; max-width: 320px; overflow: hidden; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-soft); background: var(--surface-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.table-link { color: var(--brand); font-weight: 750; }
.empty-cell, .empty-inline, .empty-state { color: var(--muted); }
.empty-cell { padding: 28px !important; text-align: center; }
.empty-inline { padding: 16px; border: 1px dashed var(--line-strong); border-radius: 9px; text-align: center; font-size: .8rem; }
.empty-state { display: grid; place-items: center; min-height: 180px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 10px; text-align: center; }
.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--surface-muted); font-size: .66rem; font-weight: 800; line-height: 1; text-transform: capitalize; }
.badge.active, .badge.good, .badge.resolved, .badge.closed, .badge.owner { border-color: #b9e7ca; color: var(--green); background: var(--green-soft); }
.badge.warning, .badge.high, .badge.urgent, .badge.suspended, .badge.waiting_staff, .badge.admin { border-color: #ecd297; color: var(--amber); background: var(--amber-soft); }
.badge.inactive, .badge.revoked, .badge.error, .badge.low, .badge.support { border-color: #f0bec8; color: var(--red); background: var(--red-soft); }
.badge.medium, .badge.open, .badge.claimed, .badge.neutral { border-color: #cdd7f5; color: var(--brand-ink); background: var(--brand-soft); }
.badge.purple { border-color: #d5c7fc; color: var(--purple); background: var(--purple-soft); }

/* License / account detail */
.detail-grid, .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-header { align-items: flex-start; justify-content: space-between; }
.detail-header > div { min-width: 0; }
.license-key-preview, .key-facts { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
.license-key-preview code { color: var(--brand-ink); font-size: .83rem; font-weight: 800; }
.key-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.key-facts div { min-width: 0; }
.key-facts span, .key-facts strong { display: block; }
.key-facts span { color: var(--muted); font-size: .68rem; }
.key-facts strong { overflow: hidden; margin-top: 3px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.activation-list, .event-stream, .ticket-list-simple { display: grid; gap: 9px; }
.activation, .event-row { align-items: center; justify-content: space-between; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
.activation > div:first-child, .event-row > div:nth-child(2) { min-width: 0; }
.activation strong, .activation span, .activation small, .event-row strong, .event-row span { display: block; }
.activation span, .activation small, .event-row span { overflow: hidden; margin-top: 2px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .71rem; }
.event-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; }
.event-row time { flex: 0 0 auto; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.event-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: var(--brand); background: var(--brand-soft); font-weight: 900; }
.event-stream.tall { max-height: 420px; overflow-y: auto; padding-right: 2px; }

/* Support */
.filter-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.filter-pills button { min-height: 30px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); font-size: .72rem; font-weight: 740; }
.filter-pills button:hover, .filter-pills button.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ticket-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.45fr); gap: 18px; align-items: start; }
.ticket-sidebar { display: grid; gap: 18px; }
.ticket-list-simple { max-height: 680px; overflow-y: auto; padding-right: 2px; }
.ticket-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ticket-card:hover, .ticket-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.ticket-card-top { align-items: flex-start; justify-content: space-between; }
.ticket-card h3 { font-size: .86rem; }
.ticket-card p { color: var(--muted); font-size: .73rem; }
.ticket-card small { color: var(--muted); font-size: .69rem; }
.ticket-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.conversation-panel { min-height: 440px; }
.conversation-list { display: grid; gap: 11px; max-height: 550px; overflow-y: auto; padding-right: 3px; }
.message { max-width: min(86%, 720px); padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.message.staff { margin-left: auto; border-color: #bdcdfb; background: var(--brand-soft); }
.message header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.message header strong { font-size: .75rem; }
.message header span { color: var(--muted); font-size: .67rem; }
.message p { color: var(--text-soft); font-size: .78rem; }
.reply-box { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.closed-ticket-note { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-muted); }
.claim-form { display: inline; }

/* Plan and team */
.plan-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan-editor { margin: 0; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title strong { color: var(--muted); font-size: .72rem; }
details { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); }
details summary { padding: 8px 10px; color: var(--text-soft); cursor: pointer; font-size: .75rem; font-weight: 720; }
details form { padding: 0 10px 10px; }

/* Customer portal */
.customer-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; padding: 22px; border: 1px solid #cbd8fb; border-radius: var(--radius-lg); background: var(--brand-soft); }
.customer-hero h1 { margin-bottom: 7px; }
.customer-hero p:not(.eyebrow) { max-width: 640px; color: var(--text-soft); }
.hero-stat { min-width: 145px; padding: 14px; border: 1px solid #c7d5ff; border-radius: 10px; text-align: right; background: var(--surface); }
.hero-stat strong, .hero-stat span { display: block; }
.hero-stat strong { color: var(--brand); font-size: 1.45rem; }
.hero-stat span { color: var(--muted); font-size: .7rem; }
.customer-license-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.customer-license-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.customer-license-card h2 { font-size: 1.15rem; }
.customer-license-stats { flex-wrap: wrap; padding-top: 13px; border-top: 1px solid var(--line); }
.customer-license-stats > div { min-width: 90px; }
.customer-license-stats span, .customer-license-stats strong { display: block; }
.customer-license-stats span { color: var(--muted); font-size: .67rem; }
.customer-license-stats strong { margin-top: 3px; font-size: .78rem; }
.customer-activation-list { display: grid; gap: 8px; }
.customer-activation { align-items: center; justify-content: space-between; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); }
.customer-activation strong, .customer-activation small { display: block; }
.customer-activation small { color: var(--muted); font-size: .69rem; }
.customer-ticket-layout { display: grid; grid-template-columns: minmax(240px, .78fr) minmax(0, 1.4fr); gap: 18px; }
.customer-ticket-detail { min-width: 0; }
.customer-user { color: var(--text); }

/* Auth / install */
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--canvas); }
.auth-card { width: min(100%, 440px); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.auth-card.wide { width: min(100%, 620px); }
.auth-card .brand-mark { margin-bottom: 20px; }
.auth-card h1 { margin-bottom: 8px; font-size: 1.85rem; }
.auth-card .muted { margin-bottom: 22px; }
.auth-foot { margin-top: 18px; color: var(--muted); font-size: .78rem; text-align: center; }
.auth-foot a { color: var(--brand); font-weight: 760; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.install-owner-card { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }

/* Responsive */
@media (max-width: 1200px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid.wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: min(290px, 86vw); transform: translateX(-104%); transition: transform .2s ease; box-shadow: var(--shadow-md); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after { position: fixed; z-index: 25; inset: 0; content: ""; background: rgba(15, 23, 42, .38); }
  .portal-main { width: min(100%, var(--content-max)); padding-inline: clamp(18px, 3vw, 34px); }
  .mobile-only { display: inline-flex !important; }
  .topbar, .customer-header { gap: 14px; }
  .customer-header { padding-inline: 20px; }
  .customer-nav { overflow-x: auto; max-width: 54vw; }
  .ticket-layout, .customer-ticket-layout { grid-template-columns: 1fr; }
  .ticket-list-simple { max-height: 340px; }
}
@media (max-width: 720px) {
  body { font-size: 13px; }
  .portal-main, .customer-main { padding: 22px 16px 38px; }
  .topbar, .customer-header, .command-hero, .customer-hero, .new-key, .panel-heading { align-items: flex-start; flex-direction: column; }
  .topbar-actions, .command-actions, .panel-actions { width: 100%; }
  .topbar-actions .primary, .command-actions .primary, .command-actions .ghost { flex: 1 1 auto; }
  .metric-grid, .dashboard-grid, .detail-grid, .profile-grid, .customer-license-grid, .form-grid, .compact-form, .two-col, .plan-summary-grid, .plan-editor-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .metric-card { min-height: 112px; }
  .key-facts { grid-template-columns: 1fr; }
  .customer-header { position: static; }
  .customer-nav { width: 100%; max-width: none; padding-bottom: 2px; }
  .customer-user { display: none; }
  .table-wrap { margin-inline: -2px; }
  .message { max-width: 100%; }
  .event-row { grid-template-columns: 24px minmax(0, 1fr); }
  .event-row time { grid-column: 2; }
  .key-action { width: 100%; justify-content: stretch; }
  .key-action code { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* --------------------------------------------------------------------------
   Customer workspace v2.4
   Flat, simple product dashboard. Customer-only styles; admin UI is unchanged.
   -------------------------------------------------------------------------- */
.customer-app {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--canvas);
}
.customer-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 256px;
  height: 100vh;
  padding: 22px 14px 14px;
  border-right: 1px solid var(--sidebar-line);
  color: #dce4f2;
  background: #111827;
}
.customer-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 3px 7px 20px;
  color: #ffffff;
}
.customer-sidebar-brand > span:last-child { min-width: 0; }
.customer-sidebar-brand strong { display: block; overflow: hidden; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 820; }
.customer-sidebar-brand small { display: block; margin-top: 2px; color: #94a3b8; font-size: .71rem; }
.customer-logo {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #4167d6;
  border-radius: 10px;
  color: #ffffff;
  background: #2856d7;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: -.08em;
}
.customer-side-nav { display: grid; gap: 4px; margin-top: 8px; }
.customer-side-nav a {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 11px;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #aebbd0;
  font-size: .84rem;
  font-weight: 720;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.customer-side-nav a:hover { color: #ffffff; background: #1c2638; }
.customer-side-nav a.active { border-color: #355fc5; color: #ffffff; background: #244aa8; }
.customer-nav-icon { display: inline-grid; width: 17px; place-items: center; color: #9fbbff; font-size: 1rem; font-weight: 760; }
.customer-side-nav a.active .customer-nav-icon { color: #ffffff; }
.customer-side-nav b { display: grid; min-width: 19px; height: 19px; margin-left: auto; place-items: center; border-radius: 999px; color: #ffffff; background: #d84a63; font-size: .62rem; font-weight: 850; }
.customer-sidebar-footer { display: grid; gap: 11px; margin-top: auto; padding: 14px 6px 4px; border-top: 1px solid #273247; }
.customer-account-chip { display: flex; align-items: center; gap: 9px; min-width: 0; }
.customer-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #dce8ff; background: #29466f; font-size: .74rem; font-weight: 850; }
.customer-account-chip > div { min-width: 0; }
.customer-account-chip strong, .customer-account-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-account-chip strong { color: #f8fbff; font-size: .75rem; }
.customer-account-chip small { margin-top: 2px; color: #8e9caf; font-size: .65rem; }
.customer-signout { padding: 6px 3px; color: #aab7c8; font-size: .74rem; font-weight: 720; }
.customer-signout:hover { color: #ffffff; }

.customer-workspace { min-width: 0; background: var(--canvas); }
.customer-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 16px;
  padding: 0 clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.customer-topbar-context { display: grid; gap: 2px; }
.customer-topbar-context strong { font-size: .9rem; }
.customer-topbar-label { color: var(--muted-2); font-size: .62rem; font-weight: 850; letter-spacing: .105em; }
.customer-topbar-actions { display: flex; align-items: center; gap: 8px; }
.customer-mobile-menu { display: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); font-size: 1rem; }
.customer-theme-toggle { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); background: var(--surface); font-size: 1rem; }
.customer-theme-toggle:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.customer-help-link { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); background: var(--surface); font-size: .74rem; font-weight: 760; }
.customer-help-link:hover { color: var(--brand); border-color: #b7c8ff; background: var(--brand-soft); }
.customer-content { width: min(100%, 1440px); margin: 0 auto; padding: 34px clamp(20px, 3.15vw, 48px) 58px; }

.customer-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.customer-page-heading > div:first-child { min-width: 0; }
.customer-page-heading h1 { max-width: 760px; margin: 0; font-size: clamp(1.75rem, 2.8vw, 2.45rem); letter-spacing: -.05em; }
.customer-page-heading p:not(.customer-kicker) { max-width: 720px; margin-top: 9px; color: var(--muted); font-size: .92rem; }
.customer-kicker { margin: 0 0 8px; color: var(--brand); font-size: .66rem; font-weight: 880; letter-spacing: .12em; text-transform: uppercase; }
.customer-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; flex-wrap: wrap; }
.customer-inline-link { color: var(--brand); font-size: .76rem; font-weight: 800; }
.customer-inline-link:hover { text-decoration: underline; }

.customer-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.customer-stat-card { min-height: 126px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
.customer-stat-card span, .customer-stat-card small { display: block; color: var(--muted); font-size: .72rem; }
.customer-stat-card span { font-weight: 750; }
.customer-stat-card strong { display: block; margin: 11px 0 5px; color: var(--text); font-size: 1.7rem; line-height: 1.05; letter-spacing: -.05em; }
.customer-stat-card small { color: var(--muted-2); font-size: .69rem; }
.customer-overview-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(280px, .72fr); gap: 18px; margin-bottom: 18px; }
.customer-overview-bottom { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); }
.customer-section-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
.customer-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.customer-section-header h2 { font-size: 1rem; }
.customer-section-header .customer-kicker { margin-bottom: 5px; }
.customer-empty-block { display: grid; justify-items: start; gap: 8px; min-height: 178px; align-content: center; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: left; }
.customer-empty-block strong { color: var(--text); font-size: .94rem; }
.customer-empty-block span { max-width: 520px; font-size: .8rem; }
.customer-empty-block.compact { min-height: 132px; }
.customer-access-list, .customer-recent-ticket-list, .customer-ticket-list { display: grid; gap: 9px; }
.customer-access-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .48fr); gap: 18px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.customer-access-item:first-child { padding-top: 0; border-top: 0; }
.customer-access-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.customer-plan-mark { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--brand-ink); background: var(--brand-soft); font-size: .78rem; font-weight: 900; }
.customer-access-main > div:last-child { min-width: 0; }
.customer-access-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.customer-access-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.customer-access-main small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.customer-slot-block { display: grid; gap: 6px; }
.customer-slot-block > div:first-child { display: flex; justify-content: space-between; gap: 7px; color: var(--muted); font-size: .68rem; }
.customer-slot-block b { color: var(--text-soft); font-size: .68rem; font-weight: 760; }
.customer-progress { height: 6px; overflow: hidden; border-radius: 99px; background: var(--canvas-soft); }
.customer-progress i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.customer-status-card { display: flex; flex-direction: column; }
.customer-validation-state { display: flex; align-items: center; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
.customer-live-dot { display: block; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }
.customer-validation-state strong, .customer-validation-state small { display: block; }
.customer-validation-state strong { font-size: .84rem; }
.customer-validation-state small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.customer-detail-list { display: grid; gap: 10px; margin: 16px 0 0; }
.customer-detail-list > div { display: flex; justify-content: space-between; gap: 14px; font-size: .75rem; }
.customer-detail-list dt { color: var(--muted); }
.customer-detail-list dd { max-width: 65%; margin: 0; overflow: hidden; color: var(--text-soft); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.customer-recent-ticket { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.customer-recent-ticket:first-child { padding-top: 0; border-top: 0; }
.customer-recent-ticket > div { min-width: 0; }
.customer-recent-ticket strong, .customer-recent-ticket span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-recent-ticket strong { color: var(--text); font-size: .8rem; }
.customer-recent-ticket > div span { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.customer-next-card { display: grid; align-content: start; }
.customer-next-card h2 { margin-bottom: 8px; }
.customer-next-card > p:not(.customer-kicker) { color: var(--muted); font-size: .8rem; }
.customer-action-list { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--line); }
.customer-action-list a { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: .78rem; font-weight: 760; }
.customer-action-list a:hover { color: var(--brand); }
.customer-action-list b { color: var(--brand); font-size: 1rem; }

.customer-support-summary { display: grid; min-width: 100px; justify-items: end; }
.customer-support-summary strong { color: var(--text); font-size: 1.65rem; letter-spacing: -.05em; }
.customer-support-summary span { color: var(--muted); font-size: .7rem; }
.customer-support-layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); gap: 18px; align-items: start; }
.customer-support-sidebar { display: grid; gap: 14px; }
.customer-new-ticket-card .stack { gap: 12px; }
.customer-form-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.customer-support-tip { border-color: #cbd8fb; background: var(--brand-soft); }
.customer-support-tip strong { display: block; color: var(--brand-ink); font-size: .8rem; }
.customer-support-tip p { margin-top: 5px; color: var(--text-soft); font-size: .75rem; }
.customer-ticket-workspace { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
.customer-ticket-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.customer-ticket-workspace-head h2 { font-size: 1rem; }
.customer-ticket-workspace-head .customer-kicker { margin-bottom: 5px; }
.customer-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); transition: border-color .16s ease, background .16s ease; }
.customer-ticket-row:hover { border-color: #b5c7fb; background: var(--surface-muted); }
.customer-ticket-row-main { min-width: 0; }
.customer-ticket-reference { display: block; margin-bottom: 4px; color: var(--brand); font-size: .66rem; font-weight: 850; letter-spacing: .07em; }
.customer-ticket-row strong, .customer-ticket-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-ticket-row strong { font-size: .84rem; }
.customer-ticket-row small { margin-top: 4px; color: var(--muted); font-size: .69rem; }
.customer-ticket-row-state { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }
.customer-ticket-thread { min-width: 0; }
.customer-ticket-thread-head { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.customer-ticket-thread-head h2 { margin-top: 9px; }
.customer-ticket-thread-head p { margin-top: 5px; color: var(--muted); font-size: .73rem; }
.customer-ticket-thread-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.customer-conversation-list { display: grid; gap: 10px; max-height: 560px; overflow-y: auto; padding-right: 3px; }
.customer-message { max-width: min(83%, 720px); padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.customer-message.staff { margin-left: auto; border-color: #c4d4fd; background: var(--brand-soft); }
.customer-message header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.customer-message header strong { font-size: .75rem; }
.customer-message header span { color: var(--muted); font-size: .66rem; }
.customer-message p { color: var(--text-soft); font-size: .78rem; }
.customer-reply-box { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.customer-reply-box > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; }
.customer-closed-note { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-muted); font-size: .76rem; }
.customer-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 960px; }

.customer-license-grid.modern-license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modern-license-card { display: grid; gap: 18px; padding: 20px; }
.customer-license-card-head { display: flex; justify-content: space-between; gap: 16px; }
.customer-license-topline { display: flex; gap: 7px; align-items: center; margin-bottom: 10px; }
.customer-plan-code { color: var(--muted-2); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-license-card-head h2 { font-size: 1.25rem; }
.customer-license-card-head p { margin-top: 7px; color: var(--muted); font-size: .78rem; }
.customer-license-ref { display: grid; height: max-content; gap: 3px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); text-align: right; }
.customer-license-ref span { color: var(--muted); font-size: .63rem; }
.customer-license-ref code { color: var(--brand-ink); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.customer-license-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.customer-license-metrics span, .customer-license-metrics strong { display: block; }
.customer-license-metrics span { color: var(--muted); font-size: .65rem; }
.customer-license-metrics strong { overflow: hidden; margin-top: 4px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: .73rem; }
.customer-capacity { display: grid; gap: 7px; }
.customer-capacity > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .69rem; }
.customer-capacity b { color: var(--text-soft); font-weight: 780; }
.customer-plan-features > span, .customer-subsection-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.customer-plan-features ul { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.customer-plan-features li { position: relative; padding-left: 16px; color: var(--text-soft); font-size: .75rem; }
.customer-plan-features li::before { position: absolute; left: 0; color: var(--green); content: '✓'; font-weight: 900; }
.modern-activation-list { display: grid; gap: 7px; }
.customer-muted-note { margin: 0; color: var(--muted); font-size: .75rem; }
.modern-license-card footer { padding-top: 2px; }

html[data-theme="dark"] .customer-sidebar { background: #0d121c; }
html[data-theme="dark"] .customer-side-nav a:hover { background: #182234; }
html[data-theme="dark"] .customer-side-nav a.active { background: #244a9f; }
html[data-theme="dark"] .customer-support-tip { border-color: #3b5291; background: #1c2a4a; }
html[data-theme="dark"] .customer-support-tip strong { color: #b5c9ff; }
html[data-theme="dark"] .customer-message.staff { border-color: #3e5698; background: #20345e; }

@media (max-width: 1120px) {
  .customer-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-overview-grid, .customer-overview-bottom { grid-template-columns: 1fr; }
  .customer-support-layout { grid-template-columns: 1fr; }
  .customer-support-sidebar { grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); align-items: start; }
}
@media (max-width: 900px) {
  .customer-app { display: block; }
  .customer-sidebar { position: fixed; z-index: 50; left: 0; width: min(274px, 86vw); transform: translateX(-104%); transition: transform .18s ease; box-shadow: var(--shadow-md); }
  body.customer-nav-open .customer-sidebar { transform: translateX(0); }
  body.customer-nav-open::after { position: fixed; z-index: 40; inset: 0; content: ''; background: rgba(15, 23, 42, .35); }
  .customer-mobile-menu { display: grid; place-items: center; }
  .customer-topbar { padding-inline: 20px; }
  .customer-content { padding-inline: 20px; }
}
@media (max-width: 720px) {
  .customer-topbar { min-height: 60px; }
  .customer-topbar-context strong { font-size: .82rem; }
  .customer-help-link { display: none; }
  .customer-content { padding: 24px 16px 40px; }
  .customer-page-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .customer-heading-actions { width: 100%; }
  .customer-heading-actions a { flex: 1 1 0; }
  .customer-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .customer-stat-card { min-height: 112px; padding: 14px; }
  .customer-stat-card strong { font-size: 1.35rem; }
  .customer-access-item { grid-template-columns: 1fr; gap: 10px; }
  .customer-support-sidebar { grid-template-columns: 1fr; }
  .customer-form-split, .customer-profile-grid, .customer-license-grid.modern-license-grid { grid-template-columns: 1fr; }
  .customer-ticket-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .customer-ticket-row-state { grid-template-columns: auto auto; justify-items: start; }
  .customer-ticket-thread-head, .customer-license-card-head { flex-direction: column; }
  .customer-license-ref { width: 100%; text-align: left; }
  .customer-license-metrics { grid-template-columns: 1fr; gap: 9px; }
  .customer-message { max-width: 100%; }
  .customer-reply-box > div { align-items: flex-start; flex-direction: column; }
}


/* ============================================================
   Customer license details — v2.4.5
   ============================================================ */
.customer-detail-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.customer-detail-heading h1 { margin:4px 0 7px; }
.customer-detail-heading p { max-width:700px; margin:0; color:var(--customer-muted, #64748b); }
.customer-back-link { display:inline-flex; margin-bottom:12px; color:var(--customer-accent, #2563eb); font-size:13px; font-weight:750; }
.customer-detail-state { display:grid; min-width:210px; gap:8px; padding:14px 16px; border:1px solid var(--customer-line, #e5e7eb); border-radius:14px; background:var(--customer-surface, #fff); color:var(--customer-muted, #64748b); font-size:12px; }
.customer-license-detail-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:18px; margin-bottom:18px; }
.customer-key-card, .customer-license-facts-card { min-height:250px; }
.customer-key-display { display:flex; align-items:center; min-height:66px; margin:12px 0 12px; padding:15px 16px; overflow:auto; border:1px solid var(--customer-line, #e5e7eb); border-radius:12px; background:var(--customer-soft, #f8fafc); color:var(--customer-text, #172033); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:15px; font-weight:760; letter-spacing:.03em; }
.customer-key-display.is-revealed { border-color:rgba(22,163,74,.38); background:rgba(22,163,74,.06); color:var(--customer-text, #172033); }
.customer-security-note { margin:0 0 15px; color:var(--customer-muted, #64748b); font-size:13px; line-height:1.55; }
.customer-action-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.customer-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.customer-license-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:2px 0 0; border-top:1px solid var(--customer-line, #e5e7eb); }
.customer-license-facts > div { min-height:73px; padding:14px 14px 13px 0; border-bottom:1px solid var(--customer-line, #e5e7eb); }
.customer-license-facts > div:nth-child(odd) { padding-right:16px; }
.customer-license-facts dt { margin-bottom:6px; color:var(--customer-muted, #64748b); font-size:11px; font-weight:760; text-transform:uppercase; letter-spacing:.07em; }
.customer-license-facts dd { margin:0; color:var(--customer-text, #172033); font-size:13px; font-weight:700; line-height:1.35; }
.customer-detail-actions-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 18px; padding:19px 20px; border:1px solid var(--customer-line, #e5e7eb); border-radius:15px; background:var(--customer-surface, #fff); }
.customer-detail-actions-panel h2 { margin:3px 0 6px; font-size:17px; }
.customer-detail-actions-panel p:not(.customer-kicker) { max-width:610px; margin:0; color:var(--customer-muted, #64748b); font-size:13px; }
.customer-detail-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.customer-detail-actions form { margin:0; }
.customer-detail-content-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:18px; margin-bottom:18px; }
.customer-table-count { padding:6px 9px; border:1px solid var(--customer-line, #e5e7eb); border-radius:999px; color:var(--customer-muted, #64748b); background:var(--customer-soft, #f8fafc); font-size:11px; font-weight:750; white-space:nowrap; }
.customer-activation-history, .customer-license-event-list { display:grid; gap:0; margin-top:12px; border-top:1px solid var(--customer-line, #e5e7eb); }
.customer-history-row, .customer-license-event { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--customer-line, #e5e7eb); }
.customer-history-main, .customer-license-event > div { display:grid; min-width:0; gap:4px; }
.customer-history-main strong, .customer-license-event strong { overflow:hidden; color:var(--customer-text, #172033); text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.customer-history-main span, .customer-license-event span { overflow:hidden; color:var(--customer-muted, #64748b); text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.customer-history-meta { display:grid; justify-items:end; gap:5px; text-align:right; }
.customer-history-meta small, .customer-license-event small { color:var(--customer-muted, #64748b); font-size:10px; }
.customer-empty-inline { display:grid; gap:4px; padding:20px 0; color:var(--customer-muted, #64748b); font-size:13px; }
.customer-empty-inline strong { color:var(--customer-text, #172033); }
.customer-included-features { margin-bottom:20px; }
.customer-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:12px 0 0; list-style:none; }
.customer-feature-grid li { position:relative; padding:12px 12px 12px 31px; border:1px solid var(--customer-line, #e5e7eb); border-radius:11px; color:var(--customer-text, #172033); background:var(--customer-soft, #f8fafc); font-size:12px; font-weight:650; line-height:1.35; }
.customer-feature-grid li::before { content:'✓'; position:absolute; left:12px; top:11px; color:#16a34a; font-weight:900; }
.customer-license-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.customer-empty-page { max-width:620px; padding:48px 0; }
.customer-empty-page h1 { margin:4px 0 10px; }
.customer-empty-page p:not(.customer-kicker) { margin:0 0 20px; color:var(--customer-muted, #64748b); }
html[data-theme="dark"] .customer-detail-state,
html[data-theme="dark"] .customer-detail-actions-panel,
html[data-theme="dark"] .customer-key-display { background:var(--customer-surface, #101827); }
html[data-theme="dark"] .customer-key-display.is-revealed { background:rgba(34,197,94,.09); }
html[data-theme="dark"] .customer-feature-grid li { background:var(--customer-soft, #0b1220); }
@media (max-width: 980px) {
  .customer-license-detail-grid, .customer-detail-content-grid { grid-template-columns:1fr; }
  .customer-detail-heading, .customer-detail-actions-panel { align-items:flex-start; flex-direction:column; }
  .customer-detail-actions { justify-content:flex-start; }
}
@media (max-width: 640px) {
  .customer-license-facts { grid-template-columns:1fr; }
  .customer-license-facts > div, .customer-license-facts > div:nth-child(odd) { padding-right:0; }
  .customer-feature-grid { grid-template-columns:1fr; }
  .customer-detail-actions, .customer-detail-actions form, .customer-detail-actions .link-button, .customer-detail-actions button { width:100%; }
  .customer-detail-actions .link-button, .customer-detail-actions button { justify-content:center; }
  .customer-history-row, .customer-license-event { align-items:flex-start; flex-direction:column; }
  .customer-history-meta { justify-items:start; text-align:left; }
}

/* ============================================================
   Customer required two-factor authentication — v2.4.6
   ============================================================ */
.customer-nav-lock {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--customer-line, #e5e7eb);
  border-radius: 999px;
  color: var(--customer-muted, #64748b);
  background: var(--customer-soft, #f8fafc);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
}
.customer-side-nav a.active .customer-nav-lock { border-color: currentColor; color: inherit; background: transparent; }
.customer-security-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #166534;
  background: #f0fdf4;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}
.customer-security-status i { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; }
.customer-security-status.is-required { border-color: #fed7aa; color: #9a3412; background: #fff7ed; }
.customer-security-status.is-required i { background: #ea580c; }
.customer-twofactor-required {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -3px 0 18px;
  padding: 13px 15px;
  border: 1px solid #fed7aa;
  border-radius: 13px;
  color: #9a3412;
  background: #fff7ed;
  font-size: 13px;
}
.customer-twofactor-required strong { color: inherit; }
.customer-recovery-codes {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(250px,.9fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid #86efac;
  border-radius: 16px;
  color: #14532d;
  background: #f0fdf4;
}
.customer-recovery-codes h2 { margin: 3px 0 7px; color: #14532d; font-size: 18px; }
.customer-recovery-codes p:not(.customer-kicker) { margin: 0; color: #166534; font-size: 13px; line-height: 1.55; }
.customer-recovery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.customer-recovery-grid code { display: block; padding: 10px; border: 1px dashed #86efac; border-radius: 9px; color: #14532d; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 800; text-align: center; }
.customer-twofactor-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--customer-line, #e5e7eb);
  border-radius: 16px;
  background: var(--customer-surface, #fff);
}
.customer-twofactor-panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--customer-line, #e5e7eb); }
.customer-twofactor-panel-head h2 { margin: 3px 0 7px; font-size: 18px; }
.customer-twofactor-panel-head p:not(.customer-kicker) { max-width: 670px; margin: 0; color: var(--customer-muted, #64748b); font-size: 13px; line-height: 1.55; }
.customer-twofactor-start, .customer-twofactor-enabled {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding-top: 18px;
}
.customer-twofactor-start strong, .customer-twofactor-enabled strong { display: block; margin-bottom: 4px; color: var(--customer-text, #172033); font-size: 14px; }
.customer-twofactor-start span, .customer-twofactor-enabled span { display: block; color: var(--customer-muted, #64748b); font-size: 13px; line-height: 1.5; }
.customer-twofactor-steps { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--customer-line, #e5e7eb); }
.customer-twofactor-step { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--customer-line, #e5e7eb); }
.customer-twofactor-step > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: var(--customer-accent, #2563eb); font-size: 12px; }
.customer-twofactor-step.subtle > b { color: #7c2d12; background: #ffedd5; }
.customer-twofactor-step strong { display: block; margin: 1px 0 5px; color: var(--customer-text, #172033); font-size: 13px; }
.customer-twofactor-step span { display: block; color: var(--customer-muted, #64748b); font-size: 12px; line-height: 1.55; }
.customer-twofactor-step span code { color: var(--customer-text, #172033); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.customer-manual-secret { display: flex; gap: 9px; align-items: center; margin-top: 12px; }
.customer-manual-secret code { min-width: 0; flex: 1; padding: 10px 11px; overflow: auto; border: 1px solid var(--customer-line, #e5e7eb); border-radius: 9px; color: var(--customer-text, #172033); background: var(--customer-soft, #f8fafc); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 760; white-space: nowrap; }
.customer-twofactor-confirm { display: flex; gap: 9px; align-items: center; margin-top: 12px; }
.customer-twofactor-confirm input { max-width: 180px; letter-spacing: .14em; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.customer-twofactor-cancel { margin-top: 14px; }
.customer-twofactor-cancel .text-link { border: 0; background: transparent; cursor: pointer; }
.customer-twofactor-disable { margin-top: 18px; padding: 14px 15px; border: 1px solid #fecaca; border-radius: 12px; background: #fffafa; }
.customer-twofactor-disable summary { color: #b91c1c; cursor: pointer; font-size: 13px; font-weight: 760; }
.customer-twofactor-disable p { margin: 11px 0 14px; color: #7f1d1d; font-size: 12px; line-height: 1.5; }
.customer-disable-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: end; }
.customer-twofactor-gate { width: min(100%, 540px); margin: 7vh auto 0; padding: 30px; border: 1px solid var(--customer-line, #e5e7eb); border-radius: 18px; background: var(--customer-surface, #fff); box-shadow: 0 18px 48px rgba(15,23,42,.08); text-align: center; }
.customer-twofactor-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 16px; place-items: center; border-radius: 14px; color: #fff; background: var(--customer-accent, #2563eb); font-size: 15px; font-weight: 900; letter-spacing: -.04em; }
.customer-twofactor-gate h1 { margin: 3px 0 9px; color: var(--customer-text, #172033); font-size: 25px; letter-spacing: -.035em; }
.customer-twofactor-gate > p:not(.customer-kicker) { margin: 0 auto 20px; color: var(--customer-muted, #64748b); font-size: 13px; line-height: 1.6; }
.customer-twofactor-form { display: grid; gap: 11px; margin-top: 18px; text-align: left; }
.customer-twofactor-form input { text-align: center; letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.customer-twofactor-form button { width: 100%; justify-content: center; }
.customer-twofactor-gate-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; color: var(--customer-muted, #64748b); font-size: 11px; }
.customer-twofactor-gate-footer a { color: var(--customer-accent, #2563eb); font-weight: 750; }
html[data-theme="dark"] .customer-security-status { border-color: #166534; color: #bbf7d0; background: #112b1c; }
html[data-theme="dark"] .customer-security-status.is-required { border-color: #9a3412; color: #fed7aa; background: #35180c; }
html[data-theme="dark"] .customer-twofactor-required { border-color: #9a3412; color: #fed7aa; background: #35180c; }
html[data-theme="dark"] .customer-recovery-codes { border-color: #166534; color: #bbf7d0; background: #112b1c; }
html[data-theme="dark"] .customer-recovery-codes h2, html[data-theme="dark"] .customer-recovery-codes p:not(.customer-kicker), html[data-theme="dark"] .customer-recovery-grid code { color: #dcfce7; }
html[data-theme="dark"] .customer-recovery-grid code { border-color: #166534; background: #0d2015; }
html[data-theme="dark"] .customer-twofactor-disable { border-color: #7f1d1d; background: #2d1117; }
html[data-theme="dark"] .customer-twofactor-disable summary { color: #fecaca; }
html[data-theme="dark"] .customer-twofactor-disable p { color: #fecaca; }
@media (max-width: 800px) {
  .customer-recovery-codes { grid-template-columns: 1fr; }
  .customer-twofactor-panel-head, .customer-twofactor-start, .customer-twofactor-enabled { align-items: flex-start; flex-direction: column; }
  .customer-disable-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .customer-security-status { margin-top: -4px; }
  .customer-twofactor-gate { margin-top: 2vh; padding: 22px 16px; }
  .customer-recovery-grid { grid-template-columns: 1fr; }
  .customer-manual-secret, .customer-twofactor-confirm, .customer-twofactor-gate-footer { align-items: stretch; flex-direction: column; }
  .customer-manual-secret code { width: 100%; }
  .customer-twofactor-confirm input { max-width: none; width: 100%; }
}


/* ============================================================
   Customer 2FA QR setup + dark mode contrast repair — v2.4.7
   Uses existing portal palette. No external QR service is used.
   ============================================================ */
:root {
  --customer-text: var(--text);
  --customer-muted: var(--muted);
  --customer-line: var(--line);
  --customer-surface: var(--surface);
  --customer-soft: var(--surface-muted);
  --customer-accent: var(--brand);
}

.customer-twofactor-qr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.customer-twofactor-qr-actions > span {
  color: var(--customer-muted);
  font-size: 12px;
}
.customer-twofactor-qr-modal[hidden] { display: none !important; }
.customer-twofactor-qr-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.customer-twofactor-qr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .64);
}
.customer-twofactor-qr-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  padding: 26px;
  border: 1px solid var(--customer-line);
  border-radius: 18px;
  color: var(--customer-text);
  background: var(--customer-surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
}
.customer-twofactor-qr-dialog h2 {
  margin: 4px 0 9px;
  color: var(--customer-text);
  font-size: 1.35rem;
  letter-spacing: -.025em;
}
.customer-twofactor-qr-dialog > p:not(.customer-kicker) {
  margin: 0;
  color: var(--customer-muted);
  font-size: .86rem;
  line-height: 1.6;
}
.customer-twofactor-qr-dialog > p strong { color: var(--customer-text); }
.customer-twofactor-qr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--customer-line);
  border-radius: 8px;
  color: var(--customer-text-soft, var(--text-soft));
  background: var(--customer-soft);
  font-size: 22px;
  line-height: 1;
}
.customer-twofactor-qr-close:hover { border-color: var(--line-strong); color: var(--customer-text); background: var(--surface-hover); }
.customer-twofactor-qr-frame {
  display: grid;
  min-height: 260px;
  margin: 20px 0 14px;
  padding: 18px;
  place-items: center;
  border: 1px solid var(--customer-line);
  border-radius: 14px;
  background: #ffffff;
}
#customer-twofactor-qr-canvas {
  display: grid;
  width: 222px;
  height: 222px;
  place-items: center;
}
#customer-twofactor-qr-canvas img,
#customer-twofactor-qr-canvas canvas,
#customer-twofactor-qr-canvas table {
  display: block !important;
  max-width: 100%;
  max-height: 100%;
}
.customer-twofactor-qr-fallback {
  color: #9a3412;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.customer-twofactor-qr-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--customer-line);
  border-radius: 10px;
  color: var(--customer-muted);
  background: var(--customer-soft);
  font-size: .75rem;
}
.customer-twofactor-qr-account strong {
  overflow: hidden;
  color: var(--customer-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}
.customer-twofactor-qr-dialog .customer-twofactor-qr-actions { justify-content: flex-end; margin-top: 16px; }
body.customer-twofactor-modal-open { overflow: hidden; }

/* The customer detail/2FA blocks formerly used light hard-coded fallbacks.
   Explicit theme aliases make all customer text follow the portal theme. */
html[data-theme="dark"] .customer-detail-heading,
html[data-theme="dark"] .customer-detail-heading h1,
html[data-theme="dark"] .customer-key-card,
html[data-theme="dark"] .customer-license-facts-card,
html[data-theme="dark"] .customer-detail-actions-panel,
html[data-theme="dark"] .customer-twofactor-panel,
html[data-theme="dark"] .customer-twofactor-gate,
html[data-theme="dark"] .customer-twofactor-qr-dialog,
html[data-theme="dark"] .customer-twofactor-step strong,
html[data-theme="dark"] .customer-twofactor-start strong,
html[data-theme="dark"] .customer-twofactor-enabled strong,
html[data-theme="dark"] .customer-twofactor-gate h1,
html[data-theme="dark"] .customer-twofactor-step span code,
html[data-theme="dark"] .customer-manual-secret code,
html[data-theme="dark"] .customer-license-facts dd,
html[data-theme="dark"] .customer-history-main strong,
html[data-theme="dark"] .customer-license-event strong,
html[data-theme="dark"] .customer-empty-inline strong,
html[data-theme="dark"] .customer-feature-grid li {
  color: var(--text);
}
html[data-theme="dark"] .customer-detail-heading p,
html[data-theme="dark"] .customer-security-note,
html[data-theme="dark"] .customer-license-facts dt,
html[data-theme="dark"] .customer-history-main span,
html[data-theme="dark"] .customer-license-event span,
html[data-theme="dark"] .customer-history-meta small,
html[data-theme="dark"] .customer-license-event small,
html[data-theme="dark"] .customer-empty-inline,
html[data-theme="dark"] .customer-twofactor-panel-head p:not(.customer-kicker),
html[data-theme="dark"] .customer-twofactor-start span,
html[data-theme="dark"] .customer-twofactor-enabled span,
html[data-theme="dark"] .customer-twofactor-step span,
html[data-theme="dark"] .customer-twofactor-gate > p:not(.customer-kicker),
html[data-theme="dark"] .customer-twofactor-gate-footer,
html[data-theme="dark"] .customer-twofactor-qr-dialog > p:not(.customer-kicker),
html[data-theme="dark"] .customer-twofactor-qr-account,
html[data-theme="dark"] .customer-twofactor-qr-actions > span {
  color: var(--muted);
}
html[data-theme="dark"] .customer-detail-state,
html[data-theme="dark"] .customer-detail-actions-panel,
html[data-theme="dark"] .customer-key-display,
html[data-theme="dark"] .customer-feature-grid li,
html[data-theme="dark"] .customer-twofactor-panel,
html[data-theme="dark"] .customer-twofactor-gate,
html[data-theme="dark"] .customer-manual-secret code,
html[data-theme="dark"] .customer-twofactor-qr-dialog,
html[data-theme="dark"] .customer-twofactor-qr-account {
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .customer-twofactor-qr-close { color: var(--text-soft); background: var(--surface-muted); }
html[data-theme="dark"] .customer-twofactor-qr-frame { border-color: var(--line); }

@media (max-width: 560px) {
  .customer-twofactor-qr-modal { padding: 12px; }
  .customer-twofactor-qr-dialog { padding: 22px 16px 16px; border-radius: 14px; }
  .customer-twofactor-qr-frame { min-height: 238px; padding: 12px; }
  #customer-twofactor-qr-canvas { width: 206px; height: 206px; }
  .customer-twofactor-qr-actions > .primary,
  .customer-twofactor-qr-dialog .customer-twofactor-qr-actions button { width: 100%; justify-content: center; }
  .customer-twofactor-qr-account { align-items: flex-start; flex-direction: column; gap: 4px; }
}


/* ==========================================================
   v2.4.8 — Reliable local TOTP QR + customer setup reminder
   Flat surfaces only. No external QR API is used.
   ========================================================== */
.customer-twofactor-qr-status {
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
  text-align: center;
}
.customer-twofactor-qr-status[data-level="success"] { color: var(--green); }
.customer-twofactor-qr-status[data-level="error"] { color: var(--red); }
.customer-twofactor-qr-fallback {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 14px;
  border: 1px solid var(--amber);
  border-radius: 10px;
  color: var(--text);
  background: var(--amber-soft);
  text-align: center;
}
.customer-twofactor-qr-fallback strong { color: var(--amber); font-size: .82rem; }
.customer-twofactor-qr-fallback span { color: var(--text-soft); font-size: .76rem; }
.customer-twofactor-qr-frame { display: grid; align-content: center; justify-items: center; }
#customer-twofactor-qr-canvas { min-width: 248px; min-height: 248px; background: #fff; }
#customer-twofactor-qr-canvas > * { max-width: 248px !important; max-height: 248px !important; }

.customer-twofactor-reminder[hidden] { display: none !important; }
.customer-twofactor-reminder {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.customer-twofactor-reminder-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .56);
}
.customer-twofactor-reminder-card {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.customer-twofactor-reminder-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: -.05em;
}
.customer-twofactor-reminder-card h2 {
  margin: 3px 0 10px;
  color: var(--text);
  font-size: 1.4rem;
}
.customer-twofactor-reminder-card > p:not(.customer-kicker) {
  margin: 0 auto;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.65;
}
.customer-twofactor-reminder-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.customer-twofactor-reminder-card > small {
  display: block;
  margin-top: 15px;
  color: var(--muted-2);
  font-size: .72rem;
}
.customer-twofactor-reminder-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 20px;
  line-height: 1;
}
.customer-twofactor-reminder-close:hover { border-color: var(--line-strong); background: var(--surface-hover); }
body.customer-twofactor-reminder-open { overflow: hidden; }
html[data-theme="dark"] .customer-twofactor-qr-frame,
html[data-theme="dark"] #customer-twofactor-qr-canvas { background: #ffffff; }
html[data-theme="dark"] .customer-twofactor-reminder-card { color: var(--text); background: var(--surface); }
html[data-theme="dark"] .customer-twofactor-reminder-card h2 { color: var(--text); }
html[data-theme="dark"] .customer-twofactor-reminder-card > p:not(.customer-kicker) { color: var(--muted); }
html[data-theme="dark"] .customer-twofactor-qr-fallback { border-color: var(--amber); background: var(--amber-soft); }
html[data-theme="dark"] .customer-twofactor-qr-fallback strong { color: var(--amber); }
html[data-theme="dark"] .customer-twofactor-qr-fallback span { color: var(--text-soft); }
@media (max-width: 560px) {
  .customer-twofactor-reminder { padding: 14px; }
  .customer-twofactor-reminder-card { padding: 26px 18px 20px; }
  .customer-twofactor-reminder-actions { display: grid; grid-template-columns: 1fr; }
  .customer-twofactor-reminder-actions > * { width: 100%; justify-content: center; }
  #customer-twofactor-qr-canvas { min-width: 220px; min-height: 220px; }
  #customer-twofactor-qr-canvas > * { max-width: 220px !important; max-height: 220px !important; }
}

/* ==========================================================
   v2.4.9 — QR code render containment and fallback repair
   QRCode.js creates both a canvas and a generated image. The
   previous grid layout stacked those two nodes vertically.
   ========================================================== */
.customer-twofactor-qr-frame {
  display: flex;
  min-height: 288px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

#customer-twofactor-qr-canvas {
  display: flex;
  width: min(220px, calc(100vw - 92px));
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  height: auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
}

/* Keep the dependable canvas output and suppress QRCode.js's second image.
   This guarantees one QR code only, with no overflow below the popup. */
#customer-twofactor-qr-canvas canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 0 0 auto !important;
}
#customer-twofactor-qr-canvas img { display: none !important; }
#customer-twofactor-qr-canvas svg,
#customer-twofactor-qr-canvas table {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.customer-twofactor-qr-fallback[hidden] { display: none !important; }
.customer-twofactor-qr-fallback:not([hidden]) { width: 100%; box-sizing: border-box; }
#customer-twofactor-qr-canvas[aria-busy="true"] { opacity: .68; }
#customer-twofactor-qr-canvas.is-ready { opacity: 1; }

@media (max-width: 560px) {
  .customer-twofactor-qr-frame { min-height: 272px; }
  #customer-twofactor-qr-canvas { width: min(208px, calc(100vw - 72px)); }
}

/* ==========================================================
   v2.5.0 — Security Center and device passkeys
   ========================================================== */
.customer-security-heading { align-items: flex-start; }
.customer-security-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.customer-security-summary-card {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.customer-security-summary-card.is-good { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); }
.customer-security-summary-card.is-alert { border-color: color-mix(in srgb, var(--amber) 46%, var(--line)); }
.customer-security-summary-icon,
.customer-passkey-device-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.customer-security-summary-card > div { min-width: 0; }
.customer-security-summary-card span:not(.customer-security-summary-icon) { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.customer-security-summary-card strong { display: block; margin: 2px 0 3px; color: var(--text); font-size: 1rem; }
.customer-security-summary-card small { display: block; color: var(--muted); font-size: .77rem; line-height: 1.45; }
.customer-security-panel { margin-bottom: 18px; }
.customer-account-security-link {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.customer-account-security-link > div { max-width: 650px; }
.customer-account-security-link p:not(.customer-kicker) { margin-top: 6px; color: var(--muted); }
.customer-passkey-section { margin-top: 18px; }
.customer-passkey-locked,
.customer-passkey-enroll {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted);
}
.customer-passkey-locked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
}
.customer-passkey-locked strong,
.customer-passkey-enroll strong { display: block; color: var(--text); font-size: .9rem; }
.customer-passkey-locked span,
.customer-passkey-enroll span { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.customer-passkey-enroll { grid-template-columns: minmax(0, 1fr) minmax(290px, .9fr); align-items: end; }
.customer-passkey-enroll-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.customer-passkey-enroll-actions label { margin: 0; }
.customer-passkey-enroll-actions input { width: 100%; }
.customer-passkey-enroll-actions button { min-height: 42px; white-space: nowrap; }
.customer-passkey-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}
.customer-passkey-status[data-state="success"] { color: var(--green); }
.customer-passkey-status[data-state="error"] { color: var(--red); }
.customer-passkey-list { display: grid; gap: 9px; margin-top: 14px; }
.customer-passkey-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.customer-passkey-row-main { display: flex; min-width: 0; gap: 11px; align-items: center; }
.customer-passkey-row-main > div { min-width: 0; }
.customer-passkey-row-main strong { display: block; color: var(--text); font-size: .9rem; }
.customer-passkey-row-main span:not(.customer-passkey-device-icon) { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-passkey-remove { min-width: 96px; }
.customer-passkey-remove summary { color: var(--red); cursor: pointer; font-size: .8rem; font-weight: 800; text-align: right; }
.customer-passkey-remove .customer-disable-form { display: grid; width: min(100%, 330px); gap: 9px; margin-top: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.customer-passkey-remove .customer-disable-form label { display: grid; gap: 4px; color: var(--text-soft); font-size: .76rem; font-weight: 750; }
.customer-passkey-remove .customer-disable-form input { width: 100%; }
.customer-passkey-footnote { margin: 14px 0 0; color: var(--muted-2); font-size: .74rem; }
.customer-passkey-gate { display: grid; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.customer-passkey-gate > span { color: var(--muted-2); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.customer-passkey-gate .ghost { width: 100%; justify-content: center; }
.customer-passkey-gate small { min-height: 1.2em; color: var(--muted); font-size: .76rem; }
.customer-passkey-gate small[data-state="success"] { color: var(--green); }
.customer-passkey-gate small[data-state="error"] { color: var(--red); }
.customer-security-gate { max-width: 580px; }
.customer-key-card .customer-security-note::before {
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-soft);
  content: "✓";
  font-size: .66rem;
  font-weight: 900;
  vertical-align: -1px;
}

@media (max-width: 980px) {
  .customer-security-summary-grid { grid-template-columns: 1fr; }
  .customer-passkey-enroll { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .customer-account-security-link,
  .customer-passkey-locked { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; }
  .customer-account-security-link { display: flex; }
  .customer-account-security-link .link-button,
  .customer-passkey-locked .link-button { width: 100%; justify-content: center; }
  .customer-passkey-enroll-actions { grid-template-columns: 1fr; }
  .customer-passkey-enroll-actions button { width: 100%; justify-content: center; }
  .customer-passkey-row { grid-template-columns: 1fr; }
  .customer-passkey-remove { width: 100%; }
  .customer-passkey-remove summary { text-align: left; }
  .customer-passkey-remove .customer-disable-form { width: 100%; }
}

/* ============================================================
   ACGX Portal v2.6 — Dedicated Support Center / Staff Desk
   ============================================================ */
.support-shell { min-height: 100vh; background: var(--canvas); }
.support-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: 18px clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
}
.support-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.support-brand > span:last-child { display: grid; min-width: 0; }
.support-brand strong { color: var(--text); font-size: .9rem; letter-spacing: -.01em; }
.support-brand small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.support-nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.support-nav a { padding: 8px 11px; border-radius: 8px; color: var(--muted); font-size: .82rem; font-weight: 760; }
.support-nav a:hover, .support-nav a.active { color: var(--brand); background: var(--brand-soft); }
.support-user { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; font-weight: 720; }
.support-user > span { max-width: 170px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.support-user small { margin-left: 3px; color: var(--muted); font-weight: 600; text-transform: capitalize; }
.support-user a { color: var(--brand); }
.support-main { width: min(100%, 1500px); margin: 0 auto; padding: 30px clamp(20px, 3vw, 48px) 56px; }
.support-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 4px 0 26px; }
.support-hero > div:first-child { max-width: 740px; }
.support-hero .muted { margin-top: 9px; }
.support-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(116px, 1fr)); gap: 10px; flex: 0 0 auto; }
.support-hero-stats > div { min-width: 116px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.support-hero-stats strong { display: block; color: var(--text); font-size: 1.28rem; line-height: 1; letter-spacing: -.04em; }
.support-hero-stats span { display: block; margin-top: 5px; color: var(--muted); font-size: .72rem; font-weight: 730; text-transform: uppercase; letter-spacing: .055em; }
.support-grid { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 22px; align-items: start; }
.support-compose-column { display: grid; gap: 16px; }
.support-card, .support-thread-card, .support-ticket-list, .staff-filter-card, .staff-empty-workspace { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.support-card { padding: 20px; }
.support-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.support-card-title .eyebrow { margin-bottom: 5px; }
.support-card h2 { font-size: 1.1rem; }
.support-form-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.support-upload-label { display: grid; gap: 6px; }
.support-upload-label > span { color: var(--muted); font-size: .74rem; line-height: 1.45; }
.support-upload-label input[type="file"] { max-width: 100%; padding: 8px 9px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--text-soft); background: var(--surface-muted); font-size: .78rem; }
.support-upload-label.compact { display: inline-grid; min-width: 205px; margin: 0; }
.support-upload-label.compact input[type="file"] { display: none; }
.support-upload-label.compact > span { padding: 8px 11px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--text-soft); background: var(--surface-muted); cursor: pointer; }
.support-upload-label.compact:hover > span { border-color: var(--brand); color: var(--brand); }
.support-tip-card { background: var(--surface-muted); }
.support-tip-card strong { display: block; color: var(--text); font-size: .86rem; }
.support-tip-card p { margin-top: 7px; color: var(--muted); font-size: .79rem; }
.support-workspace { min-width: 0; }
.support-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; margin-bottom: 11px; }
.support-workspace-head .eyebrow { margin-bottom: 4px; }
.support-ticket-list { overflow: hidden; }
.support-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 88px; padding: 15px 18px; border-bottom: 1px solid var(--line); transition: background .14s ease; }
.support-ticket-row:last-child { border-bottom: 0; }
.support-ticket-row:hover { background: var(--surface-hover); }
.support-ticket-row-main { display: grid; gap: 3px; min-width: 0; }
.support-ticket-row-main strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-row-main small { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-ref { color: var(--brand); font-family: var(--font-mono); font-size: .71rem; font-weight: 800; letter-spacing: .035em; }
.support-ticket-row-state { display: flex; align-items: flex-end; gap: 6px; flex-direction: column; flex: 0 0 auto; }
.support-thread-card { overflow: hidden; }
.support-thread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 22px 24px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.support-thread-head h2 { margin-top: 9px; }
.support-thread-head p { margin-top: 6px; color: var(--muted); font-size: .8rem; }
.support-thread-head > small { flex: 0 0 auto; color: var(--muted); font-size: .73rem; white-space: nowrap; }
.support-message-list { display: grid; gap: 13px; padding: 20px 24px; }
.support-message { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.support-message.customer { border-color: var(--brand-soft); background: var(--surface-muted); }
.support-message.staff { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
.support-message.system { opacity: .82; }
.support-message header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.support-message header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.support-message-avatar { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: .7rem; font-weight: 900; }
.support-message.staff .support-message-avatar { color: var(--green); background: var(--green-soft); }
.support-message header strong { color: var(--text); font-size: .8rem; }
.support-message header small { color: var(--muted); font-size: .71rem; }
.support-message time { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.support-message-body { margin: 12px 0 0 35px; color: var(--text-soft); font-size: .84rem; line-height: 1.62; }
.support-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 0 35px; }
.support-attachment { display: flex; align-items: center; gap: 8px; min-width: min(100%, 185px); max-width: 270px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); transition: border-color .14s ease, background .14s ease; }
.support-attachment:hover { border-color: var(--brand); background: var(--brand-soft); }
.support-attachment > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: var(--brand); background: var(--brand-soft); font-weight: 900; }
.support-attachment div { display: grid; min-width: 0; }
.support-attachment strong { overflow: hidden; color: var(--text); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.support-attachment small { color: var(--muted); font-size: .67rem; }
.support-history { padding: 0 24px 20px; }
.support-history h3 { margin: 2px 0 11px; color: var(--text-soft); font-size: .82rem; }
.support-history-list { display: grid; gap: 8px; }
.support-history-list > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: flex-start; }
.support-history-list > div > span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--line-strong); }
.support-history-list p { display: grid; gap: 1px; }
.support-history-list strong { color: var(--text-soft); font-size: .76rem; font-weight: 720; }
.support-history-list small { color: var(--muted); font-size: .7rem; }
.support-reply-form { display: grid; gap: 11px; padding: 20px 24px 22px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.support-reply-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.support-reply-actions > div { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.support-reply-actions > div > span { color: var(--muted); font-size: .72rem; }
.support-close-form { padding: 0 24px 22px; background: var(--surface-muted); }
.support-close-form .text-link { color: var(--muted); font-size: .74rem; }
.support-close-form .text-link:hover { color: var(--red); }
.support-closed-note { display: grid; gap: 2px; padding: 18px 24px; color: var(--muted); background: var(--surface-muted); font-size: .8rem; }
.support-closed-note strong { color: var(--text-soft); }

/* Staff queue */
.staff-ticket-metrics { grid-template-columns: repeat(3, minmax(105px, 1fr)); }
.staff-support-layout { display: grid; grid-template-columns: minmax(290px, 365px) minmax(0, 1fr); gap: 22px; align-items: start; }
.staff-ticket-queue { display: grid; gap: 14px; min-width: 0; }
.staff-filter-card { display: grid; gap: 11px; padding: 18px; }
.staff-filter-card .support-card-title { margin-bottom: 2px; }
.staff-queue-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.staff-queue-ticket { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface); transition: background .14s ease, border-color .14s ease; }
.staff-queue-ticket:last-child { border-bottom: 0; }
.staff-queue-ticket:hover, .staff-queue-ticket.active { background: var(--brand-soft); }
.staff-queue-ticket.active { box-shadow: inset 3px 0 0 var(--brand); }
.staff-queue-ticket > div:first-child { display: grid; min-width: 0; gap: 3px; }
.staff-queue-ticket strong { overflow: hidden; color: var(--text); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-queue-ticket small { overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-queue-ticket-meta { display: grid; gap: 5px; justify-items: end; flex: 0 0 auto; }
.staff-ticket-workspace { min-width: 0; }
.staff-empty-workspace { display: grid; min-height: 460px; place-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; }
.staff-empty-workspace .brand-mark { color: var(--brand); border-color: var(--brand-soft); background: var(--brand-soft); font-size: 1.1rem; }
.staff-empty-workspace p { max-width: 340px; color: var(--muted); font-size: .85rem; }
.staff-thread-card { min-height: 500px; }
.staff-ticket-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.staff-ticket-context > div { display: grid; gap: 2px; min-width: 0; padding: 13px 16px; background: var(--surface); }
.staff-ticket-context span { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.staff-ticket-context strong, .staff-ticket-context small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-ticket-context strong { color: var(--text); font-size: .78rem; }
.staff-ticket-context small { color: var(--muted); font-size: .7rem; }
.staff-ticket-actions { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.staff-ticket-actions form { margin: 0; }
.staff-ticket-settings { margin-left: auto; }
.staff-ticket-settings summary { color: var(--brand); font-size: .77rem; font-weight: 780; cursor: pointer; }
.staff-ticket-settings[open] { width: 100%; margin-left: 0; }
.staff-settings-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-top: 12px; }
.staff-settings-form label { min-width: 0; }
.staff-reply-form { background: var(--surface-muted); }

@media (max-width: 980px) {
  .support-topbar { align-items: flex-start; flex-wrap: wrap; }
  .support-nav { order: 3; width: 100%; justify-content: flex-start; }
  .support-grid, .staff-support-layout { grid-template-columns: 1fr; }
  .support-compose-column { grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); align-items: start; }
  .staff-ticket-queue { grid-template-columns: minmax(245px, .42fr) minmax(0, 1fr); align-items: start; }
  .staff-filter-card { position: sticky; top: 14px; }
}
@media (max-width: 690px) {
  .support-topbar { gap: 14px; padding-block: 14px; }
  .support-brand { flex: 1 1 auto; }
  .support-user { margin-left: auto; }
  .support-user > span { max-width: 125px; }
  .support-nav { gap: 1px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .support-nav a { flex: 0 0 auto; padding-inline: 9px; }
  .support-main { padding-top: 22px; }
  .support-hero { align-items: flex-start; flex-direction: column; gap: 16px; }
  .support-hero-stats, .staff-ticket-metrics { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-ticket-metrics > div:last-child { grid-column: span 2; }
  .support-compose-column, .staff-ticket-queue { grid-template-columns: 1fr; }
  .staff-filter-card { position: static; }
  .support-ticket-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .support-ticket-row-state { align-items: flex-start; flex-direction: row; }
  .support-thread-head { align-items: flex-start; flex-direction: column; gap: 8px; padding: 18px; }
  .support-thread-head > small { white-space: normal; }
  .support-message-list { padding: 14px; }
  .support-message { padding: 13px; }
  .support-message header { gap: 8px; }
  .support-message header > div { align-items: flex-start; flex-wrap: wrap; }
  .support-message-body, .support-attachments { margin-left: 0; }
  .support-history { padding-inline: 18px; }
  .support-reply-form { padding: 16px 18px 18px; }
  .support-reply-actions { align-items: stretch; flex-direction: column; }
  .support-reply-actions > div { justify-content: space-between; }
  .support-upload-label.compact { width: 100%; }
  .support-close-form { padding-inline: 18px; }
  .staff-ticket-context { grid-template-columns: 1fr; gap: 1px; }
  .staff-ticket-actions { align-items: stretch; flex-direction: column; }
  .staff-ticket-settings, .staff-ticket-settings[open] { width: 100%; margin-left: 0; }
  .staff-settings-form { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Staff licensing workspace v2.7
   -------------------------------------------------------------------------- */
.admin-workspace .sidebar-brand small { display: block; margin-top: 2px; color: #9aa9c0; font-size: .71rem; }
.admin-filter-form { align-items: end; margin-bottom: 18px; }
.admin-filter-submit { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.admin-filter-submit .text-link { white-space: nowrap; }
.admin-side-note { align-self: start; }
.admin-side-note h2, .admin-license-actions h2 { margin: 5px 0 9px; }
.admin-side-note ol { display: grid; gap: 10px; margin: 18px 0; padding-left: 19px; color: var(--text-soft); font-size: .81rem; }
.admin-side-note li::marker { color: var(--brand); font-weight: 850; }
.admin-side-note .muted { font-size: .78rem; }
.license-account-option { padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.license-account-option > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: .81rem; font-weight: 760; }
.license-account-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.license-account-option small { margin-top: 4px; }
.admin-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; }
.admin-form-actions > span { color: var(--muted); font-size: .73rem; }
.admin-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.admin-facts-grid > div { display: grid; min-width: 0; gap: 3px; padding: 13px 14px; background: var(--surface-muted); }
.admin-facts-grid span { color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.admin-facts-grid strong, .admin-facts-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-facts-grid strong { color: var(--text); font-size: .81rem; }
.admin-facts-grid small { color: var(--muted); font-size: .7rem; }
.admin-edit-license { padding-top: 2px; border-top: 1px solid var(--line); }
.admin-license-actions { align-self: start; }
.admin-license-actions > p.muted { margin-bottom: 18px; font-size: .79rem; line-height: 1.6; }
.admin-license-actions .stack form { margin: 0; }
.admin-license-actions .stack button, .admin-license-actions .stack .link-button { width: 100%; justify-content: center; }
.admin-event-list { max-height: 500px; overflow: auto; padding-right: 2px; }
.admin-search-form { align-items: center; margin-bottom: 15px; }
.admin-search-form input { min-width: min(100%, 300px); }
.plan-card-action { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan-card-action .ghost { width: 100%; justify-content: center; }

@media (max-width: 980px) {
  .admin-facts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .admin-form-actions { align-items: stretch; flex-direction: column; }
  .admin-form-actions .primary { width: 100%; }
  .admin-filter-submit { min-height: 0; }
  .admin-search-form { align-items: stretch; flex-direction: column; }
  .admin-search-form .ghost { width: 100%; }
}

/* --------------------------------------------------------------------------
   Server activation monitor v2.8
   -------------------------------------------------------------------------- */
.badge.online { border-color: #b9e7ca; color: var(--green); background: var(--green-soft); }
.badge.offline { border-color: #ecd297; color: var(--amber); background: var(--amber-soft); }
.badge.reset { border-color: #cdd7f5; color: var(--brand-ink); background: var(--brand-soft); }
.badge.blocked { border-color: #f0bec8; color: var(--red); background: var(--red-soft); }

.server-monitor-app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; background: var(--canvas); }
.server-monitor-main { width: min(100%, var(--content-max)); padding-bottom: 64px; }
.server-monitor-main .customer-topbar { margin-bottom: 24px; }
.server-monitor-main .customer-topbar > div:first-child { min-width: 0; max-width: 760px; }
.server-monitor-main .customer-topbar h1 { margin: 1px 0 8px; }
.server-monitor-main .customer-topbar p:not(.customer-kicker) { max-width: 740px; color: var(--muted); font-size: .86rem; line-height: 1.65; }

.server-monitor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.server-monitor-stats > article { display: grid; gap: 3px; min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
.server-monitor-stats span { color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.server-monitor-stats strong { color: var(--text); font-size: 1.42rem; letter-spacing: -.045em; }
.server-monitor-stats small { overflow: hidden; color: var(--muted-2); font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }

.server-filter-card { margin-bottom: 18px; }
.server-filter-card .customer-section-header { margin-bottom: 13px; }
.server-filter-links { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.server-filter-links a { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 35px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text-soft); background: var(--surface-muted); font-size: .76rem; font-weight: 760; }
.server-filter-links a:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.server-filter-links a.active { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.server-filter-links code { max-width: 145px; overflow: hidden; color: inherit; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }

.server-license-stack { display: grid; gap: 18px; }
.server-license-card { padding: 0; overflow: hidden; }
.server-license-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 21px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.server-license-head > div:first-child { min-width: 0; }
.server-license-head h2 { margin-bottom: 4px; }
.server-license-head p:not(.customer-kicker) { color: var(--muted); font-size: .79rem; line-height: 1.55; }
.server-slot-summary { display: grid; flex: 0 0 min(220px, 33%); gap: 4px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.server-slot-summary span { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.server-slot-summary strong { color: var(--text); font-size: .98rem; }
.server-slot-summary i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: var(--line); }
.server-slot-summary b { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.server-license-card > .customer-empty-inline { margin: 20px; }

.server-activation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.server-activation-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 19px; background: var(--surface); }
.server-activation-card.offline { box-shadow: inset 3px 0 0 var(--amber); }
.server-activation-card.online { box-shadow: inset 3px 0 0 var(--green); }
.server-activation-card.blocked { box-shadow: inset 3px 0 0 var(--red); }
.server-activation-card.reset { box-shadow: inset 3px 0 0 var(--brand); }
.server-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.server-card-head > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.server-binding-state { color: var(--muted); font-size: .68rem; font-weight: 740; text-transform: capitalize; }
.server-card-version { max-width: 160px; overflow: hidden; color: var(--muted); font-family: var(--font-mono); font-size: .68rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.server-activation-card h3 { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.server-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.server-card-facts > div { display: grid; min-width: 0; gap: 2px; }
.server-card-facts dt { color: var(--muted-2); font-size: .62rem; font-weight: 820; letter-spacing: .075em; text-transform: uppercase; }
.server-card-facts dd { min-width: 0; margin: 0; overflow: hidden; color: var(--text-soft); font-size: .73rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.server-card-facts code { color: var(--brand-ink); font-size: .69rem; }
.server-revoke-form { padding-top: 3px; }
.server-revoke-form .danger-button { width: 100%; justify-content: center; }
.server-revoked-note { margin: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-muted); font-size: .73rem; line-height: 1.5; }

.server-monitor-admin-main { width: min(100%, calc(var(--content-max) - var(--sidebar-width))); }
.server-monitor-panel { overflow: hidden; }
.server-monitor-panel > .panel-heading { padding: 20px 21px 0; }
.server-monitor-filter { padding: 17px 21px 19px; margin: 0; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.server-monitor-table-wrap { margin: 0; border: 0; border-radius: 0; }
.server-monitor-table { min-width: 1220px; }
.server-monitor-table td { vertical-align: top; }
.server-monitor-table td > strong, .server-monitor-table td > span, .server-monitor-table td > small, .server-monitor-table td code { display: block; }
.server-monitor-table td > span, .server-monitor-table td > small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.server-monitor-table td > code { max-width: 190px; overflow: hidden; color: var(--brand-ink); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.server-monitor-table .table-subline { margin-top: 5px; color: var(--muted); font-size: .67rem; }
.server-table-action { min-width: 118px; }
.server-table-action .small-btn { width: 100%; justify-content: center; }
.server-license-link { display: grid; gap: 2px; min-width: 0; }
.server-license-link strong { color: var(--text); font-size: .75rem; }
.server-license-link span, .server-license-link code { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.server-license-link code { color: var(--brand-ink); }

@media (max-width: 1080px) {
  .server-monitor-app { grid-template-columns: 1fr; }
  .server-monitor-main { width: min(100%, var(--content-max)); }
  .server-activation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .server-monitor-main .customer-topbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .server-monitor-main .customer-topbar-actions { width: 100%; }
  .server-monitor-main .customer-topbar-actions .link-button { flex: 1 1 auto; justify-content: center; }
  .server-monitor-stats { grid-template-columns: 1fr; }
  .server-license-head { align-items: stretch; flex-direction: column; }
  .server-slot-summary { flex: 1 1 auto; }
  .server-card-facts { grid-template-columns: 1fr; }
  .server-filter-links { margin-inline: -2px; }
  .server-monitor-filter { grid-template-columns: 1fr; padding-inline: 16px; }
  .server-monitor-panel > .panel-heading { padding-inline: 16px; }
}

/* ============================================================
   ACGX Portal v2.9 — Shared customer and staff sidebar system
   Every authenticated workspace uses this navigation renderer.
   ============================================================ */
:root {
  --portal-sidebar-width: 272px;
}

.portal-shell {
  --sidebar-width: var(--portal-sidebar-width);
  display: grid;
  grid-template-columns: var(--portal-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--canvas);
}

.portal-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--portal-sidebar-width);
  height: 100vh;
  padding: 17px 13px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-line);
  color: #dbe5f4;
  background: var(--sidebar);
}

.portal-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 3px 7px 12px;
}
.portal-sidebar-brand > span:last-child { min-width: 0; }
.portal-sidebar-brand strong,
.portal-sidebar-brand small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-sidebar-brand strong { color: #ffffff; font-size: .91rem; font-weight: 830; letter-spacing: -.015em; }
.portal-sidebar-brand small { margin-top: 2px; color: #93a4bd; font-size: .7rem; }

.portal-sidebar-workspace {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 7px 16px;
  color: #8fa1ba;
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.portal-presence-dot {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #45c486;
  box-shadow: 0 0 0 3px rgba(69, 196, 134, .12);
}

.portal-sidebar-nav { display: grid; gap: 3px; }
.portal-nav-section {
  margin: 16px 10px 6px;
  color: #7788a1;
  font-size: .61rem;
  font-weight: 860;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.portal-sidebar-nav .portal-nav-section:first-child { margin-top: 0; }
.portal-nav-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 41px;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #aebbd0;
  font-size: .82rem;
  font-weight: 720;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.portal-nav-link:hover { color: #ffffff; background: var(--sidebar-soft); }
.portal-nav-link:focus-visible,
.portal-side-link:focus-visible,
.portal-sidebar-close:focus-visible {
  outline: 2px solid #8aa8ff;
  outline-offset: 2px;
}
.portal-nav-link.active {
  border-color: #3e65c5;
  color: #ffffff;
  background: #264caa;
  box-shadow: inset 3px 0 0 #9eb7ff;
}
.portal-nav-icon {
  display: inline-grid;
  width: 17px;
  flex: 0 0 17px;
  place-items: center;
  color: #9db8ff;
  font-size: .96rem;
  font-weight: 820;
}
.portal-nav-link.active .portal-nav-icon { color: #ffffff; }
.portal-nav-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-nav-badge,
.portal-nav-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 19px;
  min-height: 19px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffffff;
  background: #d84a63;
  font-size: .61rem;
  font-style: normal;
  font-weight: 860;
  line-height: 1;
}
.portal-nav-tag {
  border: 1px solid #3f5d98;
  color: #b9cbff;
  background: rgba(70, 105, 180, .18);
  font-size: .58rem;
  letter-spacing: .02em;
}
.portal-nav-link.active .portal-nav-tag { border-color: rgba(255,255,255,.48); color: #ffffff; background: rgba(255,255,255,.12); }

.portal-sidebar-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 15px 6px 2px;
  border-top: 1px solid var(--sidebar-line);
}
.portal-sidebar-security,
.portal-sidebar-account {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  padding: 9px;
  border: 1px solid #2c384c;
  border-radius: 10px;
  background: var(--sidebar-soft);
}
.portal-sidebar-security-icon,
.portal-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 8px;
  color: #d7e4ff;
  background: #2a4f87;
  font-size: .72rem;
  font-weight: 900;
}
.portal-sidebar-security.ready .portal-sidebar-security-icon { color: #dffbec; background: #1b6645; }
.portal-sidebar-security.attention .portal-sidebar-security-icon { color: #fff1ca; background: #765214; }
.portal-avatar { border-radius: 50%; color: #dfeaff; background: #29466f; }
.staff-avatar { color: #e4dcff; background: #4b3a83; }
.portal-sidebar-security > div,
.portal-sidebar-account > div { min-width: 0; }
.portal-sidebar-security strong,
.portal-sidebar-security small,
.portal-sidebar-account strong,
.portal-sidebar-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-sidebar-security strong,
.portal-sidebar-account strong { color: #eef3fb; font-size: .72rem; font-weight: 800; }
.portal-sidebar-security small,
.portal-sidebar-account small { margin-top: 2px; color: #94a5bd; font-size: .65rem; }
.portal-sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.portal-side-link,
.portal-sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 7px 8px;
  border: 1px solid #2b394d;
  border-radius: 8px;
  color: #aebbd0;
  background: transparent;
  font-size: .69rem;
  font-weight: 750;
  text-align: center;
}
.portal-side-link:hover,
.portal-sidebar-close:hover { color: #ffffff; background: var(--sidebar-soft); }
.portal-side-link.danger-link { color: #ffabb9 !important; }
.portal-sidebar-close { width: 100%; color: #c6d1e2; background: var(--sidebar-soft); }

.portal-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--line);
}
.portal-pagebar-title,
.portal-pagebar-actions { display: flex; align-items: center; gap: 10px; }
.portal-pagebar-title > div { display: grid; gap: 1px; }
.portal-pagebar-title strong { color: var(--text); font-size: .87rem; font-weight: 830; }
.portal-pagebar-kicker { color: var(--muted-2); font-size: .62rem; font-weight: 860; letter-spacing: .1em; text-transform: uppercase; }
.portal-pagebar-actions { flex-wrap: wrap; justify-content: flex-end; }

/* The customer pages now use the same shell without altering their content cards. */
.portal-shell.customer-portal-shell .customer-workspace { min-width: 0; background: var(--canvas); }
.portal-shell.customer-portal-shell .customer-main { width: min(100%, var(--content-max)); }
.portal-shell.support-shell .support-main { width: min(100%, 1500px); min-width: 0; }

@media (max-width: 980px) {
  .portal-shell { display: block; }
  .portal-sidebar {
    position: fixed;
    z-index: 60;
    left: 0;
    width: min(var(--portal-sidebar-width), 88vw);
    transform: translateX(-104%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-md);
  }
  body.sidebar-open .portal-sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    position: fixed;
    z-index: 50;
    inset: 0;
    content: '';
    background: rgba(10, 15, 25, .48);
  }
  .portal-shell .portal-main,
  .portal-shell .customer-main,
  .portal-shell .support-main { width: min(100%, var(--content-max)); }
  .portal-pagebar { padding-top: 0; }
}

@media (max-width: 720px) {
  .portal-sidebar { padding-top: 16px; }
  .portal-pagebar { align-items: flex-start; }
  .portal-pagebar-actions .ghost { display: none; }
  .portal-shell .support-main { padding: 20px 16px 40px; }
  .portal-shell .customer-main { padding: 24px 16px 40px; }
  .portal-sidebar-actions { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .customer-mobile-menu { display: grid; place-items: center; }
}

/* ========================================================================== 
   ACGX Portal v3.0 — Mission-control UI refinement
   Visual layer only: no license, security, ticket, activation, or API logic
   has been changed. The goal is stronger hierarchy, clearer actions, and a
   calmer workspace on desktop and mobile.
   ========================================================================== */
:root {
  --canvas: #f3f6fb;
  --canvas-soft: #ebf0f7;
  --surface: #ffffff;
  --surface-muted: #f7f9fc;
  --surface-hover: #f0f5ff;
  --input: #ffffff;
  --line: #dde5f0;
  --line-strong: #b9c7d9;
  --text: #162238;
  --text-soft: #30415c;
  --muted: #64748b;
  --muted-2: #8b9ab0;
  --brand: #315fe8;
  --brand-hover: #234bc4;
  --brand-soft: #e8efff;
  --brand-ink: #1f429f;
  --green: #10834d;
  --green-soft: #e6f6ed;
  --amber: #9a5a00;
  --amber-soft: #fff2db;
  --red: #c23454;
  --red-soft: #fff0f3;
  --purple: #6f4ed0;
  --purple-soft: #f1edff;
  --sidebar: #0c1423;
  --sidebar-soft: #16233a;
  --sidebar-line: #26354e;
  --shadow-xs: 0 1px 2px rgba(19, 37, 67, .04);
  --shadow-sm: 0 8px 22px rgba(19, 37, 67, .06);
  --shadow-md: 0 20px 48px rgba(19, 37, 67, .12);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --focus-ring: 0 0 0 4px rgba(49, 95, 232, .16);
  --customer-accent: var(--brand);
  --customer-text: var(--text);
  --customer-muted: var(--muted);
  --customer-line: var(--line);
  --customer-surface: var(--surface);
}

html[data-theme="dark"] {
  --canvas: #0f1624;
  --canvas-soft: #141e2f;
  --surface: #182235;
  --surface-muted: #1d293d;
  --surface-hover: #24334b;
  --input: #121b2a;
  --line: #2b3a53;
  --line-strong: #4b5f7f;
  --text: #f3f7ff;
  --text-soft: #d8e2f1;
  --muted: #a1b0c6;
  --muted-2: #7d8ea9;
  --brand: #83a2ff;
  --brand-hover: #abc0ff;
  --brand-soft: #213863;
  --brand-ink: #d6e1ff;
  --green: #62d596;
  --green-soft: #163a2a;
  --amber: #fac46a;
  --amber-soft: #483714;
  --red: #ff93aa;
  --red-soft: #4a2130;
  --purple: #c4adff;
  --purple-soft: #3b2d63;
  --sidebar: #09111f;
  --sidebar-soft: #142036;
  --sidebar-line: #293952;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-sm: 0 9px 24px rgba(0, 0, 0, .22);
  --shadow-md: 0 20px 50px rgba(0, 0, 0, .36);
}

body {
  font-size: 14px;
  letter-spacing: -.003em;
  text-rendering: optimizeLegibility;
}

::selection { color: #ffffff; background: var(--brand); }

h1 { font-weight: 820; }
h2 { font-weight: 800; }
h3 { font-weight: 780; }

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* App frame --------------------------------------------------------------- */
.portal-shell { background: var(--canvas); }
.portal-main,
.customer-content,
.support-main {
  padding-top: clamp(28px, 3.2vw, 44px);
}

.portal-main { padding-bottom: 72px; }
.customer-content { padding-bottom: 72px; }

/* Unified navigation ------------------------------------------------------ */
.portal-sidebar {
  padding: 20px 14px 14px;
  background: var(--sidebar);
  box-shadow: 10px 0 30px rgba(4, 11, 23, .12);
}

.portal-sidebar-brand {
  align-items: center;
  min-height: 58px;
  margin: 0 1px;
  padding: 5px 8px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.portal-sidebar-brand .brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid #6288ff;
  border-radius: 12px;
  color: #ffffff;
  background: #315fe8;
  box-shadow: 0 7px 18px rgba(49, 95, 232, .28);
}

.portal-sidebar-brand strong {
  font-size: .92rem;
  letter-spacing: -.025em;
}

.portal-sidebar-brand small { color: #90a3c1; }

.portal-sidebar-workspace {
  width: max-content;
  max-width: calc(100% - 14px);
  margin: 15px 7px 14px;
  padding: 6px 9px;
  border: 1px solid rgba(110, 139, 191, .26);
  border-radius: 8px;
  color: #adc0db;
  background: rgba(22, 35, 58, .64);
  font-size: .61rem;
}

.portal-presence-dot {
  width: 6px;
  height: 6px;
  background: #53d69a;
  box-shadow: 0 0 0 4px rgba(83, 214, 154, .12);
}

.portal-sidebar-staff .portal-presence-dot {
  background: #a78bfa;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, .14);
}

.portal-nav-section {
  margin: 19px 11px 7px;
  color: #7284a2;
  font-size: .60rem;
  letter-spacing: .14em;
}

.portal-nav-link {
  min-height: 44px;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 11px;
  color: #b4c1d7;
  font-size: .82rem;
  font-weight: 730;
}

.portal-nav-link::after {
  display: block;
  width: 4px;
  height: 4px;
  margin-left: 1px;
  border-radius: 50%;
  background: transparent;
  content: '';
}

.portal-nav-link:hover {
  color: #ffffff;
  background: rgba(43, 63, 96, .72);
}

.portal-nav-link.active {
  border-color: #395caa;
  color: #ffffff;
  background: #224895;
  box-shadow: inset 3px 0 0 #9ab4ff, 0 4px 12px rgba(1, 11, 31, .18);
}

.portal-nav-link.active::after { background: #b8caff; }
.portal-sidebar-staff .portal-nav-link.active {
  border-color: #574a9c;
  background: #36306d;
  box-shadow: inset 3px 0 0 #c2b0ff, 0 4px 12px rgba(1, 11, 31, .18);
}
.portal-sidebar-staff .portal-nav-link.active::after { background: #d1c4ff; }

.portal-nav-icon {
  width: 19px;
  flex-basis: 19px;
  color: #9cb9ff;
}
.portal-sidebar-staff .portal-nav-icon { color: #c6b9ff; }
.portal-nav-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.portal-nav-link.active .portal-nav-icon { color: #ffffff; }

.portal-nav-badge,
.portal-nav-tag {
  min-width: 20px;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 7px;
  font-size: .60rem;
}
.portal-nav-badge { background: #d64b66; }
.portal-nav-tag {
  border-color: rgba(145, 171, 238, .5);
  color: #c2d2ff;
  background: rgba(69, 99, 165, .20);
}

.portal-sidebar-footer {
  gap: 9px;
  padding: 14px 5px 3px;
}
.portal-sidebar-security,
.portal-sidebar-account {
  padding: 10px;
  border-color: rgba(136, 158, 194, .24);
  border-radius: 12px;
  background: rgba(21, 34, 56, .78);
}
.portal-sidebar-security-icon,
.portal-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 10px;
}
.portal-avatar { border-radius: 50%; }
.portal-sidebar-security strong,
.portal-sidebar-account strong { font-size: .73rem; }
.portal-sidebar-security small,
.portal-sidebar-account small { font-size: .66rem; }
.portal-sidebar-actions { gap: 7px; }
.portal-side-link,
.portal-sidebar-close {
  min-height: 34px;
  border-color: rgba(136, 158, 194, .26);
  border-radius: 9px;
  font-size: .70rem;
}

/* Page chrome ------------------------------------------------------------- */
.portal-pagebar {
  position: relative;
  min-height: 54px;
  margin-bottom: 30px;
  padding: 0 0 17px;
}
.portal-pagebar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--line);
  content: '';
}
.portal-pagebar-title strong { font-size: .90rem; }
.portal-pagebar-kicker { font-size: .61rem; }

.customer-topbar {
  min-height: 70px;
  padding: 14px clamp(20px, 3.15vw, 48px);
  border-bottom-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(16, 36, 72, .02);
}
.customer-topbar-context { gap: 3px; }
.customer-topbar-context strong { font-size: .92rem; font-weight: 820; }
.customer-topbar-label { font-size: .60rem; }
.customer-help-link,
.customer-theme-toggle,
.customer-mobile-menu {
  min-height: 36px;
  border-radius: 10px;
}
.customer-theme-toggle,
.customer-mobile-menu,
.icon-button {
  display: inline-grid;
  place-items: center;
}
.customer-theme-toggle svg,
.customer-mobile-menu svg,
.icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.topbar {
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.topbar .eyebrow,
.customer-kicker,
.eyebrow { letter-spacing: .12em; }
.topbar .muted { line-height: 1.65; }

.customer-page-heading,
.support-hero {
  margin-bottom: 28px;
}
.customer-page-heading h1,
.support-hero h1,
.topbar h1 {
  max-width: 820px;
  font-size: clamp(1.82rem, 2.85vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.customer-page-heading p:not(.customer-kicker),
.support-hero .muted {
  font-size: .92rem;
  line-height: 1.68;
}

/* Controls and forms ------------------------------------------------------ */
.primary,
.primary-button,
.ghost,
.link-button,
.warning-button,
.danger-button,
.icon-button {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: .79rem;
  font-weight: 790;
}
.primary,
.primary-button,
.link-button:not(.ghost) {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 6px 14px rgba(49, 95, 232, .18);
}
.primary:hover,
.primary-button:hover,
.link-button:not(.ghost):hover {
  border-color: var(--brand-hover);
  background: var(--brand-hover);
  box-shadow: 0 9px 18px rgba(49, 95, 232, .22);
  transform: translateY(-1px);
}
.ghost {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(20, 40, 75, .02);
}
.ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.warning-button,
.danger-button { box-shadow: none; }
.warning-button:hover,
.danger-button:hover { transform: translateY(-1px); }
.icon-button { min-width: 40px; padding: 9px; }
.small-btn { min-height: 33px; padding: 7px 10px; border-radius: 8px; }

label { gap: 7px; color: var(--text-soft); font-size: .77rem; }
input,
select,
textarea {
  min-height: 42px;
  padding: 10px 12px;
  border-color: var(--line);
  border-radius: 10px;
  background: var(--input);
  font-size: .84rem;
}
textarea { min-height: 108px; }
input:hover,
select:hover,
textarea:hover { border-color: var(--line-strong); }
input:focus,
textarea:focus,
select:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Shared cards ------------------------------------------------------------ */
.panel,
.customer-section-card,
.customer-license-card,
.customer-stat-card,
.metric-card,
.support-card,
.support-thread-card,
.support-ticket-list,
.staff-filter-card,
.staff-empty-workspace,
.server-monitor-stats > article,
.plan-summary,
.new-key {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.panel,
.customer-section-card,
.customer-license-card,
.support-card,
.support-thread-card,
.support-ticket-list,
.staff-filter-card,
.staff-empty-workspace { border-radius: 16px; }

.panel { padding: 22px; }
.panel-heading { margin-bottom: 20px; }
.panel-heading .muted { line-height: 1.65; }

.customer-section-card,
.customer-license-card { padding: 21px; }
.customer-section-card:hover,
.customer-license-card:hover,
.metric-card:hover,
.customer-stat-card:hover,
.plan-summary:hover {
  border-color: #bbcaf0;
  box-shadow: 0 12px 30px rgba(27, 53, 92, .09);
}
html[data-theme="dark"] .customer-section-card:hover,
html[data-theme="dark"] .customer-license-card:hover,
html[data-theme="dark"] .metric-card:hover,
html[data-theme="dark"] .customer-stat-card:hover,
html[data-theme="dark"] .plan-summary:hover { border-color: #516588; }

.customer-section-header { margin-bottom: 18px; }
.customer-section-header h2 { font-size: 1.05rem; }
.customer-section-header .customer-kicker { margin-bottom: 6px; }

.customer-stat-grid,
.metric-grid { gap: 16px; margin-bottom: 22px; }
.customer-stat-card,
.metric-card {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  padding: 18px;
  border-radius: 16px;
}
.customer-stat-card::before,
.metric-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--brand);
  content: '';
}
.customer-stat-card:nth-child(2)::before,
.metric-card.accent-green::before { background: var(--green); }
.customer-stat-card:nth-child(3)::before,
.metric-card.accent-gold::before { background: var(--amber); }
.customer-stat-card:nth-child(4)::before,
.metric-card.accent-purple::before { background: var(--purple); }
.customer-stat-card span,
.metric-card span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.customer-stat-card strong,
.metric-card strong { margin-top: 14px; font-size: 1.85rem; font-weight: 820; }
.customer-stat-card small,
.metric-card small { margin-top: 7px; line-height: 1.45; }

.customer-overview-grid,
.dashboard-grid { gap: 20px; }
.customer-access-item,
.compact-item {
  min-height: 72px;
  padding: 13px;
  border-radius: 12px;
}
.customer-access-item:hover,
.compact-item:hover { border-color: #aebff0; background: var(--surface-hover); }
.customer-plan-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--brand-ink);
  background: var(--brand-soft);
}
.customer-progress { height: 7px; border-radius: 999px; background: var(--canvas-soft); }
.customer-progress i { border-radius: inherit; background: var(--brand); }
.customer-live-dot { box-shadow: 0 0 0 5px rgba(16, 131, 77, .13); }

/* License and activation readability ------------------------------------- */
.customer-license-card-head { gap: 18px; }
.customer-license-ref {
  min-width: 132px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--surface-muted);
}
.customer-license-metrics { gap: 14px; padding: 16px 0; }
.customer-license-metrics strong { font-size: .78rem; }
.customer-activation {
  padding: 11px 12px;
  border-radius: 10px;
}
.customer-license-footer { padding-top: 3px; }
.customer-key-display {
  padding: 14px;
  border-radius: 12px;
  font-size: .86rem;
}
.customer-license-facts > div,
.customer-detail-list > div {
  min-height: 44px;
  padding-block: 11px;
}

.server-monitor-stats > article {
  min-height: 116px;
  padding: 17px;
  border-radius: 15px;
}
.server-monitor-stats > article:first-child { border-top: 3px solid var(--brand); }
.server-monitor-stats > article:nth-child(2) { border-top: 3px solid var(--green); }
.server-monitor-stats > article:nth-child(3) { border-top: 3px solid var(--amber); }
.server-license-card { overflow: hidden; }
.server-activation-grid { background: var(--line); }
.server-activation-card { padding: 21px; }
.server-activation-card:hover { background: var(--surface-hover); }
.server-card-head { gap: 14px; }
.server-card-facts > div { padding: 11px 0; }

/* Ticket workspace -------------------------------------------------------- */
.support-hero { align-items: flex-end; }
.support-hero-stats > div {
  min-width: 128px;
  padding: 15px 16px;
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
}
.support-hero-stats strong { font-size: 1.45rem; }
.support-grid,
.staff-support-layout { gap: 22px; }
.support-card,
.support-thread-card,
.staff-filter-card { overflow: hidden; }
.support-compose-card,
.staff-filter-card { padding: 20px; }
.support-ticket-row,
.staff-queue-ticket {
  min-height: 76px;
  padding: 14px 15px;
}
.support-ticket-row:hover,
.staff-queue-ticket:hover { border-color: #b5c7fb; }
.staff-queue-ticket.active { box-shadow: inset 4px 0 0 var(--brand); }
.support-message-list { gap: 14px; }
.support-message {
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(21, 39, 68, .035);
}
.support-message.staff { border-color: #b8caff; }
.support-reply-form {
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
}
.support-reply-actions { padding-top: 12px; }
.support-history { padding-top: 20px; }
.support-history-list > div > span { width: 10px; height: 10px; border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.staff-ticket-context > div { padding: 15px 17px; }
.staff-ticket-actions { padding: 14px 17px; }

/* Tables and data surfaces ------------------------------------------------ */
.table-wrap { border-radius: 14px; box-shadow: var(--shadow-xs); }
table { min-width: 760px; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 13px 14px;
  color: var(--muted);
  font-size: .64rem;
  background: var(--surface-muted);
}
td { padding: 14px; font-size: .78rem; }
tbody tr { transition: background .14s ease; }
tbody tr:hover td { background: var(--surface-hover); }
.table-code { padding: 5px 7px; border-radius: 7px; }

/* State labels ------------------------------------------------------------ */
.badge {
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: .63rem;
  font-weight: 820;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge.active,
.badge.online,
.badge.resolved,
.badge.closed,
.badge.good { border-color: rgba(16, 131, 77, .26); }
.badge.waiting_customer,
.badge.waiting_staff,
.badge.pending,
.badge.offline { border-color: rgba(154, 90, 0, .28); }
.badge.revoked,
.badge.blocked,
.badge.expired,
.badge.error { border-color: rgba(194, 52, 84, .28); }

/* Security and passkeys --------------------------------------------------- */
.customer-security-status,
.customer-twofactor-required {
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.customer-twofactor-panel,
.customer-passkey-panel,
.customer-twofactor-gate,
.customer-twofactor-qr-dialog {
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.customer-twofactor-step > b { box-shadow: 0 5px 12px rgba(49, 95, 232, .16); }
.customer-twofactor-qr-frame {
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(19, 37, 67, .04);
}
.customer-passkey-row { border-radius: 12px; }

/* Alerts and empty states ------------------------------------------------ */
.flash {
  min-height: 50px;
  padding: 13px 15px;
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
}
.flash.success { border-color: #aedfbe; }
.flash.error { border-color: #f1bac5; }
.empty-inline,
.empty-state,
.customer-empty-block,
.customer-empty-inline {
  border-radius: 14px;
}

/* Polished dark-mode exceptions ------------------------------------------ */
html[data-theme="dark"] .portal-sidebar-brand { border-bottom-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .portal-sidebar-workspace { border-color: rgba(126, 151, 206, .28); background: rgba(20, 35, 60, .7); }
html[data-theme="dark"] .portal-nav-link:hover { background: rgba(33, 52, 83, .9); }
html[data-theme="dark"] .portal-nav-link.active { background: #2a4f9e; }
html[data-theme="dark"] .portal-sidebar-staff .portal-nav-link.active { background: #40377c; }
html[data-theme="dark"] .customer-topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, .025); }
html[data-theme="dark"] .primary,
html[data-theme="dark"] .link-button:not(.ghost) { color: #101a2b; }
html[data-theme="dark"] .customer-twofactor-qr-frame { background: #ffffff; }
html[data-theme="dark"] .support-message.staff { border-color: #4d669f; background: #213861; }

/* Mobile-first improvements ---------------------------------------------- */
@media (max-width: 980px) {
  .portal-sidebar {
    width: min(294px, 88vw);
    padding: 18px 14px 16px;
    border-right: 1px solid var(--sidebar-line);
  }
  .portal-main,
  .customer-content,
  .support-main { padding-top: 26px; }
  .customer-topbar { min-height: 64px; }
  .customer-mobile-menu { width: 38px; }
}

@media (max-width: 720px) {
  .portal-main,
  .customer-content,
  .support-main { padding-bottom: 52px; }
  .topbar {
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 18px;
  }
  .topbar h1,
  .customer-page-heading h1,
  .support-hero h1 { font-size: 1.78rem; }
  .topbar-actions,
  .customer-heading-actions { width: 100%; }
  .topbar-actions .primary,
  .topbar-actions .ghost,
  .customer-heading-actions .primary,
  .customer-heading-actions .ghost { flex: 1 1 0; }
  .customer-stat-grid,
  .metric-grid { gap: 11px; }
  .customer-stat-card,
  .metric-card { min-height: 116px; padding: 15px; border-radius: 14px; }
  .customer-stat-card strong,
  .metric-card strong { margin-top: 11px; font-size: 1.5rem; }
  .panel,
  .customer-section-card,
  .customer-license-card { padding: 16px; border-radius: 14px; }
  .support-compose-card,
  .staff-filter-card,
  .support-reply-form { padding: 16px; }
  .customer-license-ref { min-width: 0; }
  .support-hero-stats > div { padding: 13px; }
  .portal-pagebar { margin-bottom: 24px; }
  .portal-pagebar-actions .icon-button { display: inline-grid; }
}

@media (prefers-reduced-motion: no-preference) {
  .portal-nav-link,
  .primary,
  .link-button,
  .ghost,
  .warning-button,
  .danger-button,
  .customer-section-card,
  .customer-license-card,
  .metric-card,
  .customer-stat-card,
  .plan-summary,
  .support-ticket-row,
  .staff-queue-ticket,
  .server-activation-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
  }
}

/* ============================================================
   Ban & Appeal Center · v3.1.0
   Scoped to the existing portal visual system.
   ============================================================ */
.ban-hero-stats { grid-template-columns: repeat(3, minmax(112px, 1fr)); }
.ban-center-layout { display:grid; grid-template-columns:minmax(292px,365px) minmax(0,1fr); gap:22px; align-items:start; }
.ban-center-sidebar { display:grid; gap:14px; min-width:0; }
.ban-filter-card, .ban-record-card, .ban-empty-workspace, .ban-compose-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-xs); }
.ban-queue-list { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-xs); }
.ban-queue-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 15px; border-bottom:1px solid var(--line); color:var(--text); transition:background .14s ease,border-color .14s ease; }
.ban-queue-row:last-child { border-bottom:0; }
.ban-queue-row:hover, .ban-queue-row.active { background:var(--brand-soft); }
.ban-queue-row.active { box-shadow:inset 4px 0 0 var(--brand); }
.ban-queue-main { display:grid; gap:3px; min-width:0; }
.ban-queue-main strong, .ban-queue-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ban-queue-main strong { color:var(--text); font-size:.81rem; }
.ban-queue-main small { color:var(--muted); font-size:.7rem; }
.ban-ref { color:var(--brand); font-family:var(--font-mono); font-size:.7rem; font-weight:820; letter-spacing:.035em; }
.ban-queue-state { display:grid; justify-items:end; gap:5px; flex:0 0 auto; }
.ban-workspace { min-width:0; }
.ban-empty-workspace { display:grid; place-items:center; min-height:470px; padding:46px 28px; text-align:center; }
.ban-empty-workspace .brand-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; margin-bottom:14px; }
.ban-empty-workspace h2 { font-size:1.05rem; }
.ban-empty-workspace p { max-width:360px; margin-top:7px; color:var(--muted); font-size:.82rem; line-height:1.65; }
.ban-record-card { overflow:hidden; }
.ban-record-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:23px 24px; border-bottom:1px solid var(--line); background:var(--surface-muted); }
.ban-record-head h2 { margin-top:8px; font-size:1.25rem; }
.ban-record-head p { margin-top:6px; color:var(--muted); font-size:.78rem; }
.ban-record-head > small { flex:0 0 auto; color:var(--muted); font-size:.73rem; white-space:nowrap; }
.ban-status-summary { display:flex; align-items:center; gap:10px; padding:14px 17px; border-bottom:1px solid var(--line); background:var(--surface); }
.ban-status-summary > div { display:grid; gap:2px; }
.ban-status-summary small { color:var(--muted); font-size:.71rem; }
.ban-timer { color:var(--text); font-size:.78rem; font-weight:800; }
.ban-timer.is-expired { color:var(--danger); }
.ban-context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.ban-context-grid > div { display:grid; gap:3px; min-width:0; padding:14px 17px; background:var(--surface); }
.ban-context-grid span { color:var(--muted); font-size:.64rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
.ban-context-grid strong, .ban-context-grid small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ban-context-grid strong { color:var(--text); font-size:.79rem; }
.ban-context-grid small { color:var(--muted); font-size:.7rem; }
.ban-section { padding:20px 23px; border-bottom:1px solid var(--line); }
.ban-section:last-child { border-bottom:0; }
.ban-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.ban-section-title h3 { font-size:.91rem; }
.ban-section-title small { color:var(--muted); font-size:.72rem; }
.ban-reason { padding:14px 15px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface-muted); font-size:.81rem; line-height:1.65; white-space:pre-wrap; }
.ban-identifier-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ban-identifier { display:grid; gap:4px; min-width:0; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.ban-identifier span { color:var(--muted); font-size:.65rem; font-weight:780; letter-spacing:.065em; text-transform:uppercase; }
.ban-identifier code { overflow:hidden; color:var(--text); font-family:var(--font-mono); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.ban-appeal-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; }
.ban-appeal-tab { display:grid; gap:2px; min-width:178px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); }
.ban-appeal-tab:hover, .ban-appeal-tab.active { border-color:#b5c7fb; background:var(--brand-soft); }
.ban-appeal-tab strong { font-size:.75rem; }
.ban-appeal-tab small { color:var(--muted); font-size:.67rem; }
.ban-appeal-thread { margin-top:14px; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.ban-appeal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); background:var(--surface-muted); }
.ban-appeal-head h4 { margin-top:7px; font-size:.91rem; }
.ban-appeal-head p { margin-top:5px; color:var(--muted); font-size:.72rem; }
.ban-appeal-message-list { display:grid; gap:10px; padding:16px; background:var(--surface); }
.ban-appeal-message { padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
.ban-appeal-message.customer { border-color:#bfd0ff; background:var(--brand-soft); }
.ban-appeal-message.staff { background:var(--surface); }
.ban-appeal-message header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ban-appeal-message header div { display:flex; align-items:center; gap:8px; min-width:0; }
.ban-appeal-message header strong { overflow:hidden; color:var(--text); font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.ban-appeal-message header small, .ban-appeal-message time { color:var(--muted); font-size:.67rem; }
.ban-appeal-message-body { color:var(--text); font-size:.79rem; line-height:1.6; }
.ban-history { margin-top:14px; padding:15px 16px; border-top:1px solid var(--line); background:var(--surface-muted); }
.ban-history h4 { margin-bottom:10px; font-size:.8rem; }
.ban-history-list { display:grid; gap:9px; }
.ban-history-list > div { display:grid; grid-template-columns:10px minmax(0,1fr); gap:9px; align-items:start; }
.ban-history-list > div > span { width:8px; height:8px; margin-top:4px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.ban-history-list p { display:grid; gap:2px; }
.ban-history-list strong { color:var(--text); font-size:.73rem; }
.ban-history-list small { color:var(--muted); font-size:.67rem; }
.ban-reply-form { display:grid; gap:12px; padding:16px; border-top:1px solid var(--line); background:var(--surface); }
.ban-reply-form textarea { min-height:118px; }
.ban-reply-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ban-reply-actions > div { display:flex; align-items:center; gap:12px; }
.ban-reply-actions span { color:var(--muted); font-size:.69rem; }
.ban-note-list { display:grid; gap:9px; }
.ban-note { padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface-muted); }
.ban-note header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ban-note strong { color:var(--text); font-size:.75rem; }
.ban-note time { color:var(--muted); font-size:.67rem; }
.ban-note p { color:var(--text); font-size:.77rem; line-height:1.55; white-space:pre-wrap; }
.ban-management-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ban-management-grid .wide { grid-column:span 2; }
.ban-unban-card { padding:15px 16px; border:1px solid rgba(220,38,38,.24); border-radius:12px; background:rgba(220,38,38,.04); }
.ban-unban-card h4 { color:var(--danger); font-size:.82rem; }
.ban-unban-card p { margin-top:5px; color:var(--muted); font-size:.73rem; line-height:1.5; }
.ban-unban-card form { display:grid; gap:10px; margin-top:12px; }
.ban-compose-card { padding:18px; }
.ban-compose-card summary { color:var(--brand); font-size:.82rem; font-weight:820; cursor:pointer; }
.ban-compose-card[open] summary { margin-bottom:15px; }
.ban-compose-card form { display:grid; gap:12px; }
.badge.low, .badge.active, .badge.submitted { background:#eaf1ff; color:#245fd0; }
.badge.medium, .badge.under_review { background:#fff3d9; color:#9a5b00; }
.badge.high, .badge.needs_info { background:#fee8e8; color:#b42318; }
.badge.critical { background:#291b3c; color:#fff; }
.badge.expired, .badge.closed { background:var(--surface-muted); color:var(--muted); }
.badge.unbanned, .badge.approved { background:#e3f9ed; color:#0f7a45; }
.badge.denied { background:#fee8e8; color:#b42318; }
@media (max-width: 1050px) {
  .ban-center-layout { grid-template-columns:1fr; }
  .ban-center-sidebar { grid-template-columns:minmax(240px,.42fr) minmax(0,1fr); align-items:start; }
}
@media (max-width: 760px) {
  .ban-hero-stats { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ban-center-sidebar { grid-template-columns:1fr; }
  .ban-record-head, .ban-appeal-head { align-items:flex-start; flex-direction:column; gap:8px; padding:18px; }
  .ban-record-head > small { white-space:normal; }
  .ban-context-grid { grid-template-columns:1fr; }
  .ban-section { padding:17px; }
  .ban-identifier-grid, .ban-management-grid { grid-template-columns:1fr; }
  .ban-management-grid .wide { grid-column:span 1; }
  .ban-reply-actions, .ban-reply-actions > div { align-items:stretch; flex-direction:column; }
}
@media (max-width: 460px) {
  .ban-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ban-hero-stats > div:last-child { grid-column:span 2; }
  .ban-status-summary { align-items:flex-start; flex-direction:column; }
}

/* ============================================================
   ACGX Console & Staff Access v3.2.0
   Portal-side player presence and in-game permission workspace.
   ============================================================ */
.console-workspace .customer-main,
.console-admin-workspace .portal-main { max-width: 1540px; }
.console-topbar { margin-bottom: 26px; }
.console-server-switcher { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.console-server-switcher .customer-section-header { margin:0; }
.console-select-form { width:min(100%, 430px); }
.console-select-form label,
.console-verify-form label,
.console-grant-form > label { display:grid; gap:7px; color:var(--text-soft); font-size:.73rem; font-weight:760; }
.console-select-form select,
.console-verify-form input,
.console-grant-form input,
.console-grant-form select { width:100%; min-height:42px; }
.console-overview-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr); gap:16px; margin-bottom:16px; }
.console-server-hero,
.console-bridge-card { min-width:0; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-xs); }
.console-server-hero.online { border-color:color-mix(in srgb, var(--green) 28%, var(--line)); }
.console-server-hero.offline { border-color:color-mix(in srgb, var(--amber) 28%, var(--line)); }
.console-server-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; color:var(--muted); font-size:.72rem; font-weight:760; }
.console-server-hero h2 { margin-bottom:7px; }
.console-server-hero > p { overflow:hidden; color:var(--muted); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.console-server-hero dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0 0; }
.console-server-hero dl div { min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-muted); }
.console-server-hero dt { margin-bottom:4px; color:var(--muted); font-size:.64rem; font-weight:790; letter-spacing:.06em; text-transform:uppercase; }
.console-server-hero dd { overflow:hidden; margin:0; color:var(--text); font-size:.82rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.console-bridge-card { display:flex; align-items:flex-start; gap:14px; background:var(--surface-muted); }
.console-bridge-icon { display:grid; flex:0 0 auto; width:36px; height:36px; place-items:center; border:1px solid var(--line-strong); border-radius:10px; color:var(--brand); background:var(--surface); font-size:1.2rem; font-weight:800; }
.console-bridge-card h2 { margin:4px 0 7px; font-size:1rem; }
.console-bridge-card p:last-child { color:var(--muted); font-size:.78rem; line-height:1.62; }
.console-security-lock { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:16px; border-color:color-mix(in srgb, var(--amber) 36%, var(--line)); background:var(--amber-soft); }
.console-security-lock h2 { margin:4px 0 6px; font-size:1.05rem; }
.console-security-lock p { max-width:660px; color:var(--text-soft); font-size:.79rem; }
.console-verify-form { display:flex; align-items:end; gap:10px; min-width:min(100%, 410px); }
.console-verify-form label { flex:1 1 auto; }
.console-verify-form button { min-height:42px; white-space:nowrap; }
.console-layout-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.8fr); gap:16px; align-items:start; margin-bottom:16px; }
.console-players-card,
.console-grant-card,
.console-grants-card,
.console-activity-card { min-width:0; }
.console-players-card .customer-section-header,
.console-grant-card .customer-section-header,
.console-grants-card .customer-section-header,
.console-activity-card .customer-section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:17px; }
.console-players-card h2,
.console-grant-card h2,
.console-grants-card h2,
.console-activity-card h2 { margin-top:3px; font-size:1.08rem; }
.console-players-card p,
.console-grant-card p,
.console-grants-card p,
.console-activity-card p { margin-top:5px; color:var(--muted); font-size:.76rem; line-height:1.55; }
.console-count { display:inline-flex; align-items:center; min-height:27px; padding:5px 9px; border:1px solid color-mix(in srgb, var(--green) 35%, var(--line)); border-radius:99px; color:var(--green); background:var(--green-soft); font-size:.69rem; font-weight:820; white-space:nowrap; }
.console-pending-state { display:grid; place-items:center; min-height:235px; padding:26px; border:1px dashed var(--line-strong); border-radius:13px; text-align:center; background:var(--surface-muted); }
.console-pending-state > span { display:grid; width:40px; height:40px; margin-bottom:10px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--brand); background:var(--surface); font-size:1.1rem; }
.console-pending-state strong { color:var(--text); font-size:.84rem; }
.console-pending-state p { max-width:400px; margin-top:6px; color:var(--muted); font-size:.75rem; line-height:1.55; }
.console-table-wrap { border:1px solid var(--line); border-radius:12px; }
.console-player-table,
.console-grants-table { width:100%; min-width:680px; border-collapse:collapse; }
.console-player-table th,
.console-grants-table th { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--muted); background:var(--surface-muted); font-size:.64rem; font-weight:800; letter-spacing:.07em; text-align:left; text-transform:uppercase; }
.console-player-table td,
.console-grants-table td { padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text-soft); font-size:.76rem; }
.console-player-table tbody tr:last-child td,
.console-grants-table tbody tr:last-child td { border-bottom:0; }
.console-player-table strong,
.console-grants-table strong { display:block; color:var(--text); font-size:.78rem; }
.console-player-table small,
.console-grants-table small { display:block; margin-top:3px; color:var(--muted); font-size:.66rem; }
.console-player-table code,
.console-grants-table code { display:block; max-width:250px; margin-top:4px; overflow:hidden; color:var(--text-soft); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.console-player-table .badge { margin-right:6px; vertical-align:middle; }
.console-grant-form { display:grid; gap:13px; }
.console-grant-form .field-hint { display:block; margin-top:-7px; color:var(--muted); font-size:.68rem; line-height:1.45; }
.console-grant-form .field-hint code { color:var(--text-soft); font-size:.66rem; }
.console-role-summary { padding:10px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text-soft); background:var(--surface-muted); font-size:.72rem; line-height:1.52; }
.console-custom-permissions { display:grid; gap:8px; margin:0; padding:11px; border:1px solid var(--line); border-radius:11px; background:var(--surface-muted); }
.console-custom-permissions legend { padding:0 4px; color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.console-permission-check { display:flex; align-items:flex-start; gap:8px; padding:8px; border-radius:8px; }
.console-permission-check:hover { background:var(--surface-hover); }
.console-permission-check input { width:15px !important; min-height:auto !important; margin:2px 0 0; }
.console-permission-check span { display:grid; gap:2px; }
.console-permission-check strong { color:var(--text); font-size:.72rem; }
.console-permission-check small { color:var(--muted); font-size:.65rem; line-height:1.42; }
.console-grant-form button { min-height:42px; }
.console-grant-form button:disabled,
.console-grants-table button:disabled { cursor:not-allowed; opacity:.55; }
.console-role-pill { display:inline-flex; align-items:center; min-height:23px; padding:4px 8px; border:1px solid var(--line); border-radius:99px; color:var(--text-soft); background:var(--surface-muted); font-size:.64rem; font-weight:800; white-space:nowrap; }
.console-role-pill.observer { border-color:color-mix(in srgb, var(--brand) 25%, var(--line)); color:var(--brand-ink); background:var(--brand-soft); }
.console-role-pill.moderator { border-color:color-mix(in srgb, var(--amber) 30%, var(--line)); color:var(--amber); background:var(--amber-soft); }
.console-role-pill.administrator { border-color:color-mix(in srgb, var(--purple) 30%, var(--line)); color:var(--purple); background:var(--purple-soft); }
.console-role-pill.custom { border-color:var(--line-strong); }
.console-timeline { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.console-timeline li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.console-timeline li:last-child { border-bottom:0; }
.console-timeline-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.console-timeline strong { display:block; color:var(--text); font-size:.75rem; }
.console-timeline p { margin:3px 0 0; color:var(--muted); font-size:.67rem; }
.console-timeline-empty { display:block !important; padding:15px 0 !important; color:var(--muted); font-size:.76rem; }
.console-timeline-empty::before { display:none; }
.console-admin-metrics { margin-bottom:16px; }
.console-admin-filter,
.console-admin-server-summary,
.console-admin-empty { margin-bottom:16px; }
.console-admin-server-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.console-admin-server-summary h2 { margin:4px 0 7px; }
.console-admin-summary-numbers { display:grid; grid-template-columns:repeat(3,minmax(100px,1fr)); gap:10px; min-width:420px; }
.console-admin-summary-numbers > div { min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); }
.console-admin-summary-numbers span { display:block; margin-bottom:4px; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.console-admin-summary-numbers strong { display:block; overflow:hidden; color:var(--text); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.console-admin-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
.console-admin-layout .panel { min-width:0; }
.console-admin-main .console-activity-card { margin-top:0; }
.console-empty-page { min-height:420px; }
@media (max-width: 1100px) {
  .console-overview-grid,
  .console-layout-grid { grid-template-columns:1fr; }
  .console-grant-card { order:2; }
}
@media (max-width: 760px) {
  .console-server-switcher,
  .console-security-lock,
  .console-admin-server-summary { align-items:stretch; flex-direction:column; }
  .console-select-form,
  .console-verify-form { width:100%; min-width:0; }
  .console-verify-form { align-items:stretch; flex-direction:column; }
  .console-verify-form button { width:100%; }
  .console-server-hero dl { grid-template-columns:1fr; }
  .console-admin-summary-numbers { width:100%; min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .console-admin-layout { grid-template-columns:1fr; }
}
@media (max-width: 470px) {
  .console-server-hero,
  .console-bridge-card,
  .console-security-lock { padding:17px; }
  .console-admin-summary-numbers { grid-template-columns:1fr; }
  .console-grants-card .customer-section-header { align-items:stretch; flex-direction:column; }
}


/* ============================================================
   v3.3 Staff Command Dashboard
   ============================================================ */
.staff-command-hero {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin:0 0 22px; padding:28px 30px; overflow:hidden; position:relative;
  border:1px solid #30486f; border-radius:20px; color:#f6f9ff;
  background:linear-gradient(135deg,#14274d 0%,#17376c 58%,#204d85 100%);
  box-shadow:0 22px 44px rgba(11,31,70,.16);
}
.staff-command-hero::after { content:""; position:absolute; width:360px; height:360px; right:-155px; top:-205px; border-radius:50%; background:radial-gradient(circle,rgba(120,188,255,.32),rgba(120,188,255,0) 67%); pointer-events:none; }
.staff-command-hero > * { position:relative; z-index:1; }
.staff-command-hero h2 { max-width:720px; margin:4px 0 8px; color:#fff; font-size:clamp(1.36rem,2.2vw,1.85rem); letter-spacing:-.04em; }
.staff-command-hero p:not(.eyebrow) { max-width:760px; margin:0; color:#c8d8f2; line-height:1.65; }
.staff-command-hero .eyebrow { color:#b8d2ff; }
.staff-command-hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.staff-command-hero .primary { border-color:#fff; color:#143776; background:#fff; }
.staff-command-hero .primary:hover { color:#0d2b65; background:#edf4ff; }
.staff-command-hero .ghost { border-color:rgba(215,233,255,.45); color:#f5f9ff; background:rgba(255,255,255,.07); }
.staff-command-hero .ghost:hover { background:rgba(255,255,255,.14); }

.staff-command-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.metric-card.accent-red::before { background:var(--red,#d64c5c); }
.metric-card.accent-teal::before { background:#0f9d8a; }

.staff-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:0 0 22px; }
.staff-quick-action { display:flex; align-items:center; gap:12px; min-height:86px; padding:15px 16px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface); box-shadow:var(--shadow-xs); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.staff-quick-action:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:0 16px 30px rgba(26,57,107,.10); }
.staff-quick-icon { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:12px; color:var(--brand); background:var(--brand-soft); font-size:1.13rem; font-weight:800; }
.staff-quick-action span:nth-child(2) { min-width:0; }
.staff-quick-action strong { display:block; font-size:.84rem; }
.staff-quick-action small { display:block; margin-top:4px; color:var(--muted); font-size:.7rem; line-height:1.42; }
.staff-quick-action b { margin-left:auto; padding:5px 8px; border-radius:999px; color:var(--brand); background:var(--brand-soft); font-size:.69rem; white-space:nowrap; }

.staff-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.staff-dashboard-grid-primary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.staff-live-panel { min-width:0; }
.staff-activity-feed { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.staff-activity-feed li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); }
.staff-activity-feed li:last-child { border-bottom:0; }
.staff-feed-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.staff-feed-dot.low { background:#6386c6; box-shadow:0 0 0 4px rgba(99,134,198,.14); }
.staff-feed-dot.medium { background:var(--amber); box-shadow:0 0 0 4px rgba(210,147,20,.14); }
.staff-feed-dot.high { background:#df7847; box-shadow:0 0 0 4px rgba(223,120,71,.14); }
.staff-feed-dot.critical { background:var(--red,#d64c5c); box-shadow:0 0 0 4px rgba(214,76,92,.14); }
.staff-activity-feed strong { display:block; color:var(--text); font-size:.78rem; }
.staff-activity-feed p { margin:3px 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }
.staff-activity-feed small { display:block; margin-top:4px; color:var(--muted); font-size:.68rem; line-height:1.4; }
.staff-activity-empty { grid-template-columns:30px minmax(0,1fr) !important; align-items:center !important; min-height:115px; border-bottom:0 !important; }
.staff-activity-empty > span { display:grid; width:28px; height:28px; place-items:center; border-radius:9px; color:var(--brand); background:var(--brand-soft); }
.tiny-link { align-self:center; color:var(--brand); font-size:.7rem; font-weight:800; }

.staff-watchlist { display:grid; gap:0; }
.staff-watchlist-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:11px 14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.staff-watchlist-row:last-child { border-bottom:0; }
.staff-watchlist-row strong { display:block; font-size:.79rem; }
.staff-watchlist-row small { display:block; margin-top:4px; color:var(--muted); font-size:.68rem; overflow-wrap:anywhere; }
.staff-watchlist-badges { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.staff-watchlist-meta { grid-column:1 / -1; margin-top:-5px !important; }
.badge.not_reported, .badge.unknown { color:var(--muted); background:var(--surface-2); border-color:var(--line); }
.badge.outdated { color:#9a5a06; background:#fff0d6; border-color:#efca8f; }
.badge.current { color:#13725f; background:#ddf8ed; border-color:#a8e5cc; }
.badge.newer { color:#335a9a; background:#e6efff; border-color:#b9cff7; }
html[data-theme="dark"] .badge.outdated { color:#ffd58c; background:rgba(180,111,16,.20); border-color:rgba(241,183,77,.38); }
html[data-theme="dark"] .badge.current { color:#8ef0cc; background:rgba(20,137,104,.20); border-color:rgba(79,204,166,.35); }
html[data-theme="dark"] .badge.newer { color:#b8d0ff; background:rgba(66,108,185,.22); border-color:rgba(126,164,233,.35); }

.staff-roster-list { display:grid; gap:0; }
.staff-roster-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.staff-roster-row:last-child { border-bottom:0; }
.staff-roster-row .portal-avatar { width:32px; height:32px; font-size:.72rem; }
.staff-roster-row strong { display:block; font-size:.76rem; }
.staff-roster-row small { display:block; margin-top:3px; color:var(--muted); font-size:.66rem; overflow-wrap:anywhere; }

.compact-item-link { transition:background .15s ease, transform .15s ease; }
.compact-item-link:hover { background:var(--surface-2); transform:translateX(2px); }
.staff-dashboard-help { display:flex; min-height:190px; flex-direction:column; justify-content:center; }
.staff-dashboard-help code { padding:2px 5px; border-radius:5px; color:var(--brand); background:var(--brand-soft); font-size:.78em; }
.staff-help-checks { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.staff-help-checks span { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-2); font-size:.68rem; font-weight:750; }

@media (max-width:1100px) {
  .staff-command-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .staff-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .staff-command-hero { align-items:flex-start; flex-direction:column; padding:22px 19px; border-radius:17px; }
  .staff-command-hero-actions { width:100%; }
  .staff-command-hero-actions a { flex:1; text-align:center; }
  .staff-command-metrics, .staff-quick-actions, .staff-dashboard-grid, .staff-dashboard-grid-primary { grid-template-columns:1fr; }
  .staff-quick-action { min-height:76px; }
  .staff-watchlist-row { grid-template-columns:1fr; }
  .staff-watchlist-badges { justify-content:flex-start; }
}


/* v3.4 Owner-only license deletion controls */
.license-table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 142px;
}
.inline-danger-action {
    display: inline-flex;
    margin: 0;
}
.license-table-actions .small-btn {
    white-space: nowrap;
}
.license-danger-zone {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
}
.license-danger-zone h3 {
    margin: 4px 0 8px;
    font-size: 1rem;
}
.license-danger-zone p:not(.eyebrow) {
    margin: 0 0 14px;
    color: var(--muted, #9aa8bd);
    line-height: 1.55;
    font-size: .9rem;
}
@media (max-width: 720px) {
    .license-table-actions {
        flex-wrap: wrap;
    }
}


/* v3.4 staff role badges */
.badge.license_manager {
    border-color: color-mix(in srgb, #7c9cff 48%, transparent);
    color: #aebeff;
    background: color-mix(in srgb, #5875d8 18%, transparent);
}
.badge.staff {
    border-color: color-mix(in srgb, #2dd4bf 48%, transparent);
    color: #6ee7d7;
    background: color-mix(in srgb, #0f9d8a 16%, transparent);
}


/* ============================================================
   v3.4.1 — dashboard readiness and safe owner deletion modal
   ============================================================ */
body.portal-dialog-open { overflow:hidden; }

/* Staff command dashboard: a readable, action-first priority strip. */
.staff-priority-strip {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:20px;
  align-items:stretch;
  margin:0 0 22px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-muted) 100%);
  box-shadow:var(--shadow-xs);
}
.staff-priority-intro { min-width:0; padding:4px 4px 2px; }
.staff-priority-intro h2 { margin:5px 0 7px; color:var(--text); font-size:1.22rem; letter-spacing:-.035em; }
.staff-priority-intro p:not(.eyebrow) { max-width:650px; margin:0; color:var(--muted); font-size:.76rem; line-height:1.62; }
.staff-priority-list { display:grid; gap:9px; }
.staff-priority-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px;
  align-items:center;
  min-height:62px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:12px;
  color:var(--text);
  background:var(--surface);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.staff-priority-item:hover { transform:translateY(-1px); border-color:var(--brand); box-shadow:0 12px 24px rgba(26,57,107,.09); }
.staff-priority-item span { grid-column:1; color:var(--muted); font-size:.62rem; font-weight:850; letter-spacing:.075em; text-transform:uppercase; }
.staff-priority-item strong { grid-column:1; margin-top:3px; color:var(--text); font-size:.76rem; line-height:1.35; }
.staff-priority-item b { grid-column:2; grid-row:1 / span 2; color:var(--brand); font-size:.68rem; white-space:nowrap; }
.staff-priority-item.is-alert { border-left-color:var(--red); }
.staff-priority-item.is-alert b { color:var(--red); }
.staff-priority-item.is-review { border-left-color:var(--amber); }
.staff-priority-item.is-review b { color:var(--amber); }
.staff-priority-item.is-update { border-left-color:var(--purple); }
.staff-priority-item.is-update b { color:var(--purple); }
.staff-priority-item.is-clear { border-left-color:var(--green); }
.staff-priority-item.is-clear b { color:var(--green); }

/* Customer overview: clear security readiness and a single next action. */
.customer-dashboard-brief {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:16px;
  margin:0 0 20px;
}
.customer-security-pulse,
.customer-next-best-action {
  min-width:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.customer-security-pulse { position:relative; overflow:hidden; }
.customer-security-pulse::after {
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-130px;
  top:-125px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(99,137,237,.16),rgba(99,137,237,0) 70%);
  pointer-events:none;
}
.customer-dashboard-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; position:relative; z-index:1; }
.customer-dashboard-card-heading h2 { margin:4px 0 0; color:var(--customer-text,var(--text)); font-size:1.08rem; letter-spacing:-.03em; }
.customer-readiness-pill { display:inline-flex; align-items:center; min-height:25px; padding:4px 9px; border:1px solid var(--line); border-radius:999px; font-size:.64rem; font-weight:800; white-space:nowrap; }
.customer-readiness-pill.is-ready { border-color:#a7e3c2; color:#147644; background:#ecfdf3; }
.customer-readiness-pill.is-action { border-color:#f4d28f; color:#986300; background:#fff9e7; }
.customer-security-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:17px 0 14px; position:relative; z-index:1; }
.customer-security-checks > div { display:flex; align-items:center; gap:10px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
.customer-security-checks > div > span { display:grid; width:26px; height:26px; flex:0 0 26px; place-items:center; border-radius:9px; font-size:.82rem; font-weight:900; }
.customer-security-checks .is-complete > span { color:#13843f; background:#dcfce7; }
.customer-security-checks .is-pending > span { color:#a86500; background:#fff1c9; }
.customer-security-checks strong,
.customer-security-checks small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-security-checks strong { color:var(--customer-text,var(--text)); font-size:.72rem; }
.customer-security-checks small { margin-top:3px; color:var(--customer-muted,var(--muted)); font-size:.64rem; }
.customer-security-pulse > .customer-inline-link { position:relative; z-index:1; }
.customer-security-pulse > .customer-inline-link b { margin-left:5px; }
.customer-next-best-action { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; background:linear-gradient(145deg,var(--surface) 0%,var(--brand-soft) 175%); }
.customer-next-best-action p:not(.customer-kicker) { margin:12px 0 17px; color:var(--customer-muted,var(--muted)); font-size:.75rem; line-height:1.6; }
.customer-next-best-action p strong { color:var(--customer-text,var(--text)); }
.customer-next-best-action .primary { margin-top:auto; }

/* Owner destructive action: typed confirmation instead of a browser prompt. */
.license-delete-modal[hidden] { display:none !important; }
.license-delete-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; }
.license-delete-modal-backdrop { position:absolute; inset:0; background:rgba(7,14,30,.68); backdrop-filter:blur(5px); }
.license-delete-dialog {
  position:relative;
  z-index:1;
  width:min(100%,530px);
  padding:27px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  color:var(--text);
  background:var(--surface);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  outline:none;
  animation:licenseDeleteDialogIn .18s ease-out;
}
@keyframes licenseDeleteDialogIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.license-delete-close { position:absolute; top:13px; right:13px; display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-muted); font-size:1.18rem; line-height:1; }
.license-delete-close:hover { color:var(--text); border-color:var(--line-strong); }
.license-delete-symbol { display:grid; width:42px; height:42px; margin-bottom:15px; place-items:center; border:1px solid #f7b9c0; border-radius:13px; color:#b42335; background:#fff0f2; font-size:1.25rem; font-weight:900; }
.license-delete-dialog h2 { max-width:430px; margin:5px 0 8px; color:var(--text); font-size:1.28rem; letter-spacing:-.035em; }
.license-delete-dialog > p:not(.eyebrow) { margin:0; color:var(--muted); font-size:.75rem; line-height:1.65; }
.license-delete-target { display:grid; gap:4px; margin:17px 0; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--surface-muted); }
.license-delete-target span { color:var(--muted); font-size:.62rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.license-delete-target strong { overflow:hidden; color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.83rem; text-overflow:ellipsis; white-space:nowrap; }
.license-delete-target small { overflow:hidden; color:var(--muted); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.license-delete-type-field { display:grid; gap:7px; color:var(--text); font-size:.73rem; font-weight:760; }
.license-delete-type-field code { width:max-content; padding:2px 5px; border-radius:5px; color:var(--danger,#b42335); background:#fff0f2; font-size:.72rem; }
.license-delete-type-field input { min-height:43px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:10px; color:var(--text); background:var(--surface); font:700 .82rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.license-delete-type-field input:focus { outline:3px solid var(--focus-ring,rgba(99,137,237,.24)); border-color:var(--brand); }
.license-delete-error { min-height:18px; margin:8px 0 0; color:var(--danger,#b42335); font-size:.68rem; }
.license-delete-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.license-delete-actions .danger-button:disabled { cursor:not-allowed; opacity:.48; transform:none; }
html[data-theme="dark"] .license-delete-symbol { border-color:#733040; color:#fecdd3; background:#351319; }
html[data-theme="dark"] .license-delete-type-field code { color:#fecdd3; background:#351319; }
html[data-theme="dark"] .customer-readiness-pill.is-ready { border-color:#216f47; color:#bbf7d0; background:#112b1c; }
html[data-theme="dark"] .customer-readiness-pill.is-action { border-color:#875e13; color:#fde68a; background:#34230b; }
html[data-theme="dark"] .customer-security-checks .is-complete > span { color:#bbf7d0; background:#143520; }
html[data-theme="dark"] .customer-security-checks .is-pending > span { color:#fde68a; background:#3a2809; }

@media (max-width:900px) {
  .staff-priority-strip,
  .customer-dashboard-brief { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .staff-priority-strip,
  .customer-security-pulse,
  .customer-next-best-action { padding:16px; border-radius:15px; }
  .customer-security-checks { grid-template-columns:1fr; }
  .staff-priority-item { min-height:58px; }
  .license-delete-modal { align-items:end; padding:10px; }
  .license-delete-dialog { padding:23px 17px 17px; border-radius:17px; }
  .license-delete-actions { align-items:stretch; flex-direction:column-reverse; }
  .license-delete-actions button { width:100%; justify-content:center; }
}


/* ============================================================
   ACGX Portal v3.5 — operational visual system
   Cleaner surfaces, strong hierarchy, one primary accent, and
   consistent SVG iconography across customer and staff workspaces.
   ============================================================ */
:root {
  --canvas: #f6f8fb;
  --canvas-soft: #edf1f6;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-hover: #f1f5f9;
  --input: #ffffff;
  --line: #dce3ec;
  --line-strong: #b7c3d4;
  --text: #172033;
  --text-soft: #334155;
  --muted: #64748b;
  --muted-2: #8995a6;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-ink: #1e40af;
  --sidebar: #111827;
  --sidebar-soft: #1b2638;
  --sidebar-line: #2a3850;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 14px 32px rgba(15, 23, 42, .14);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, .20);
}

html[data-theme="dark"] {
  --canvas: #0b1017;
  --canvas-soft: #101722;
  --surface: #141b26;
  --surface-muted: #192230;
  --surface-hover: #202c3d;
  --input: #0f1620;
  --line: #2a3749;
  --line-strong: #43546a;
  --text: #f1f5f9;
  --text-soft: #d6deeb;
  --muted: #9ba9bb;
  --muted-2: #718096;
  --brand: #78a2ff;
  --brand-hover: #a5c1ff;
  --brand-soft: #152d55;
  --brand-ink: #cbdcff;
  --green: #65d69a;
  --green-soft: #133422;
  --amber: #f4bf5d;
  --amber-soft: #3a2a0e;
  --red: #ff98a9;
  --red-soft: #3a1720;
  --purple: #c5b6ff;
  --purple-soft: #302257;
  --sidebar: #0b1018;
  --sidebar-soft: #141d2a;
  --sidebar-line: #273447;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .26);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .24);
  --shadow-md: 0 18px 36px rgba(0, 0, 0, .32);
}

/* No glass, no decorative gradients, no oversized rounded surfaces. */
.staff-priority-strip,
.customer-next-best-action,
.customer-security-pulse,
.customer-twofactor-reminder-card,
.customer-twofactor-qr-dialog,
.license-delete-dialog,
.portal-sidebar-workspace,
.portal-sidebar-security,
.portal-sidebar-account,
.portal-nav-link.active,
.portal-sidebar-staff .portal-nav-link.active {
  background-image: none !important;
}
.customer-security-pulse::after { display: none !important; }
.license-delete-modal-backdrop { backdrop-filter: none; background: rgba(2, 6, 23, .66); }

/* Shared interaction rhythm: 160ms, with motion reduced where requested. */
.portal-nav-link,
.portal-side-link,
.primary,
.ghost,
.warning-button,
.danger-button,
.link-button,
.icon-button,
.customer-theme-toggle,
.customer-mobile-menu,
.panel,
.customer-section-card,
.customer-license-card,
.metric-card,
.customer-stat-card,
.support-card,
.support-thread-card,
.table-wrap,
input,
select,
textarea,
.staff-priority-item,
.license-delete-dialog,
.portal-sidebar,
.portal-shell,
.app-shell {
  transition-duration: 160ms !important;
  transition-timing-function: ease !important;
}

/* Operational surfaces: border-led hierarchy. */
.panel,
.customer-section-card,
.customer-license-card,
.customer-stat-card,
.metric-card,
.support-card,
.support-thread-card,
.support-ticket-list,
.staff-filter-card,
.staff-empty-workspace,
.server-monitor-stats > article,
.plan-summary,
.new-key,
.staff-priority-strip,
.customer-security-pulse,
.customer-next-best-action,
.table-wrap {
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
}
.panel,
.customer-section-card,
.customer-license-card,
.support-card,
.support-thread-card,
.staff-filter-card,
.staff-empty-workspace,
.customer-security-pulse,
.customer-next-best-action { padding: 20px !important; }

.customer-section-card:hover,
.customer-license-card:hover,
.metric-card:hover,
.customer-stat-card:hover,
.plan-summary:hover,
.staff-priority-item:hover {
  border-color: var(--line-strong) !important;
  background: var(--surface-hover) !important;
  box-shadow: var(--shadow-xs) !important;
  transform: none !important;
}

/* Buttons: one primary accent. Amber and red remain reserved for risk states. */
.primary,
.primary-button,
.link-button:not(.ghost) {
  border-color: var(--brand) !important;
  color: #ffffff !important;
  background: var(--brand) !important;
  box-shadow: none !important;
}
.primary:hover,
.primary-button:hover,
.link-button:not(.ghost):hover {
  border-color: var(--brand-hover) !important;
  background: var(--brand-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
.ghost,
.icon-button,
.customer-theme-toggle,
.customer-mobile-menu {
  border-color: var(--line) !important;
  color: var(--text-soft) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.ghost:hover,
.icon-button:hover,
.customer-theme-toggle:hover,
.customer-mobile-menu:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}
.warning-button { border-color: #d69a2d !important; color: #7a4c00 !important; background: var(--amber-soft) !important; }
.danger-button { border-color: #df8e9e !important; color: #ad263f !important; background: var(--red-soft) !important; }
html[data-theme="dark"] .warning-button { color: #f8ce79 !important; border-color: #745315 !important; }
html[data-theme="dark"] .danger-button { color: #ffc3cc !important; border-color: #793544 !important; }

/* Inputs use crisp state changes rather than decorative effects. */
input,
select,
textarea {
  border-color: var(--line) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  background: var(--input) !important;
  box-shadow: none !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Sidebar visual cleanup. */
.portal-sidebar {
  background: var(--sidebar) !important;
  box-shadow: none !important;
}
.portal-sidebar-brand { padding-right: 42px !important; border-bottom-color: var(--sidebar-line) !important; }
.portal-sidebar-brand .brand-mark { border-radius: 9px !important; border-color: #4f7cf6 !important; background: #2563eb !important; box-shadow: none !important; }
.portal-sidebar-workspace { border-radius: 7px !important; border-color: #33455f !important; background: #172235 !important; }
.portal-nav-link { border-radius: 7px !important; }
.portal-nav-link:hover { background: #1b293c !important; }
.portal-nav-link.active,
.portal-sidebar-staff .portal-nav-link.active { border-color: #3764bf !important; background: #1d438c !important; box-shadow: inset 3px 0 0 #8eb2ff !important; }
.portal-sidebar-staff .portal-nav-link.active { border-color: #4e5c79 !important; background: #27354a !important; box-shadow: inset 3px 0 0 #9eb2d4 !important; }
.portal-nav-badge { border-radius: 6px !important; background: var(--red) !important; }
.portal-nav-tag { border-radius: 6px !important; border-color: #38527a !important; color: #b9ceff !important; background: #172844 !important; }
.portal-sidebar-security,
.portal-sidebar-account { border-radius: 8px !important; border-color: #2c3a50 !important; background: #141f2f !important; }
.portal-side-link { border-radius: 7px !important; }

/* Consistent inline SVG language for all navigation, empty states and status blocks. */
.portal-nav-icon svg,
.portal-sidebar-security-icon svg,
.staff-quick-icon svg,
.ui-status-icon svg,
.customer-security-summary-icon svg,
.customer-passkey-device-icon svg,
.customer-security-checks > div > span svg,
.staff-help-checks svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}
.portal-sidebar-security-icon svg { width: 15px; height: 15px; }
.staff-quick-icon,
.ui-status-icon,
.customer-security-summary-icon,
.customer-passkey-device-icon {
  display: inline-grid;
  place-items: center;
}
.customer-security-checks > div > span { display: inline-grid; place-items: center; }
.customer-security-checks > div > span svg { width: 15px; height: 15px; }
.staff-help-checks span { display: inline-flex; align-items: center; gap: 6px; }
.staff-help-checks svg { width: 14px; height: 14px; }

/* Statuses: restrained square pills, with colour reserved for meaning. */
.badge,
.portal-nav-badge,
.portal-nav-tag,
.customer-readiness-pill,
.console-role-pill {
  border-radius: 6px !important;
}
.badge { font-weight: 800 !important; letter-spacing: .05em !important; }
.badge.purple { color: var(--brand-ink) !important; background: var(--brand-soft) !important; border-color: #b8cdf5 !important; }

/* Tighter table chrome with a stronger information hierarchy. */
.table-wrap { overflow: auto; }
th {
  border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important;
  background: var(--surface-muted) !important;
}
tbody tr + tr td { border-top-color: var(--line) !important; }
tbody tr:hover td { background: var(--surface-hover) !important; }
.table-code,
code { border-radius: 5px !important; }

/* Dashboard priority surface becomes a flat, usable control panel. */
.staff-priority-strip {
  background: var(--surface) !important;
}
.staff-priority-item {
  border-left-width: 3px !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.customer-next-best-action { background: var(--surface) !important; border-left: 3px solid var(--brand) !important; }
.customer-security-pulse { background: var(--surface) !important; }

/* Desktop sidebar collapse. The state is saved locally per browser. */
.portal-sidebar-collapse {
  position: absolute;
  top: 25px;
  right: 14px;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #9fb1c9;
  background: transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.portal-sidebar-collapse:hover { border-color: #3b4c64; color: #ffffff; background: #1c293b; }
.portal-sidebar-collapse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

@media (min-width: 981px) {
  body.sidebar-compact .portal-shell,
  body.sidebar-compact .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
  body.sidebar-compact .portal-sidebar { width: 76px; padding-inline: 11px; }
  body.sidebar-compact .portal-sidebar-brand { min-height: 56px; justify-content: center; padding: 5px 0 14px !important; }
  body.sidebar-compact .portal-sidebar-brand > span:last-child,
  body.sidebar-compact .portal-sidebar-workspace,
  body.sidebar-compact .portal-nav-section,
  body.sidebar-compact .portal-nav-label-text,
  body.sidebar-compact .portal-nav-tag,
  body.sidebar-compact .portal-sidebar-security > div,
  body.sidebar-compact .portal-sidebar-account > div,
  body.sidebar-compact .portal-sidebar-actions,
  body.sidebar-compact .portal-nav-link::after { display: none !important; }
  body.sidebar-compact .portal-sidebar-collapse { transform: rotate(180deg); }
  body.sidebar-compact .portal-nav-link { justify-content: center; min-height: 42px; padding-inline: 8px; }
  body.sidebar-compact .portal-nav-icon { width: 20px; flex-basis: 20px; }
  body.sidebar-compact .portal-nav-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; min-height: 16px; padding: 1px 4px; font-size: .56rem; }
  body.sidebar-compact .portal-nav-link { position: relative; }
  body.sidebar-compact .portal-sidebar-footer { justify-items: center; }
  body.sidebar-compact .portal-sidebar-security,
  body.sidebar-compact .portal-sidebar-account { justify-content: center; width: 42px; padding: 6px; }
  body.sidebar-compact .portal-main,
  body.sidebar-compact .customer-main { width: min(100%, calc(var(--content-max) - 76px)); }
}

@media (max-width: 980px) {
  .portal-sidebar-collapse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   ACGX Portal v3.6 — Navigation & theme-control refinement
   ============================================================ */

.portal-sidebar {
  scrollbar-width: thin;
  scrollbar-color: #40536f transparent;
}
.portal-sidebar::-webkit-scrollbar { width: 7px; }
.portal-sidebar::-webkit-scrollbar-thumb { border: 2px solid var(--sidebar); border-radius: 999px; background: #40536f; }

.portal-sidebar-nav {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 0 2px 12px;
}

.portal-nav-group {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
}
.portal-nav-group + .portal-nav-group {
  padding-top: 10px;
  border-top: 1px solid rgba(147, 166, 194, .12);
}
.portal-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 27px;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  color: #8fa0b8;
  background: transparent;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.portal-nav-group-toggle:hover { color: #dce6f6; background: rgba(255,255,255,.045); }
.portal-nav-group-toggle:focus-visible,
.portal-sidebar-account-toggle:focus-visible,
.portal-sidebar-collapse:focus-visible,
.portal-theme-toggle:focus-visible {
  outline: 2px solid #9fc2ff;
  outline-offset: 2px;
}
.portal-nav-group-toggle svg,
.portal-sidebar-account-chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform .16s ease;
}
.portal-nav-group.is-collapsed .portal-nav-group-toggle svg { transform: rotate(-90deg); }
.portal-nav-group-panel { display: grid; gap: 2px; }
.portal-nav-group-panel[hidden] { display: none; }

.portal-nav-link {
  position: relative;
  min-height: 42px;
  padding: 9px 10px;
}
.portal-nav-link.active { background: #23427a !important; }
.portal-sidebar-staff .portal-nav-link.active { background: #2c3b53 !important; }
.portal-nav-link:hover { transform: translateX(2px); }
.portal-nav-link.active:hover { transform: none; }
.portal-nav-active-indicator {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  margin-left: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

.portal-sidebar-footer {
  position: relative;
  gap: 8px;
  padding-top: 12px;
}
.portal-sidebar-security { min-height: 47px; }
.portal-sidebar-account-toggle {
  width: 100%;
  min-height: 49px;
  padding: 9px;
  border: 1px solid #2c3a50;
  border-radius: 8px;
  color: inherit;
  background: #141f2f;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.portal-sidebar-account-toggle:hover {
  border-color: #425675;
  background: #19283a;
}
.portal-sidebar-account-toggle > span:nth-child(2) {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}
.portal-sidebar-account-toggle[aria-expanded="true"] .portal-sidebar-account-chevron { transform: rotate(180deg); }
.portal-sidebar-account-menu {
  display: grid;
  gap: 5px;
  padding: 6px;
  border: 1px solid #2c3a50;
  border-radius: 8px;
  background: #111b29;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.portal-sidebar-account-menu[hidden] { display: none; }
.portal-sidebar-account-menu .portal-side-link { justify-content: flex-start; min-height: 30px; padding-inline: 9px; }
.portal-sidebar-account-menu .danger-link { border-color: rgba(232, 104, 122, .22); background: rgba(232, 104, 122, .04); }

.portal-sidebar-collapse {
  width: 30px;
  height: 30px;
  border-color: rgba(142, 163, 194, .18);
  color: #b6c6dc;
  background: rgba(255,255,255,.025);
}
.portal-sidebar-collapse:hover { border-color: #526984; background: #1a2a3c; }

.portal-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 70px;
  height: 36px;
  padding: 0 10px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}
.portal-theme-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.portal-theme-toggle-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.portal-sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 6, 16, .58);
  cursor: default;
}
.portal-sidebar-scrim[hidden] { display: none; }
body.portal-nav-locked { overflow: hidden; }

@media (min-width: 981px) {
  body.sidebar-compact .portal-sidebar { overflow: visible; }
  body.sidebar-compact .portal-sidebar-nav { gap: 5px; padding-inline: 0; }
  body.sidebar-compact .portal-nav-group { display: block; padding: 0; border: 0; }
  body.sidebar-compact .portal-nav-group + .portal-nav-group { padding-top: 0; }
  body.sidebar-compact .portal-nav-group-toggle { display: none; }
  body.sidebar-compact .portal-nav-group-panel { display: grid !important; gap: 4px; }
  body.sidebar-compact .portal-nav-link { overflow: visible; }
  body.sidebar-compact .portal-nav-link::before {
    position: absolute;
    z-index: 100;
    left: calc(100% + 13px);
    top: 50%;
    width: max-content;
    max-width: 190px;
    padding: 7px 9px;
    border: 1px solid #3c4e69;
    border-radius: 7px;
    color: #e7eef9;
    background: #111c2c;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    content: attr(data-nav-tooltip);
    font-size: .69rem;
    font-weight: 760;
    letter-spacing: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(-5px,-50%);
    transition: opacity .14s ease, transform .14s ease;
  }
  body.sidebar-compact .portal-nav-link:hover::before,
  body.sidebar-compact .portal-nav-link:focus-visible::before { opacity: 1; transform: translate(0,-50%); }
  body.sidebar-compact .portal-nav-active-indicator { display: none; }
  body.sidebar-compact .portal-sidebar-account-menu {
    position: absolute;
    z-index: 100;
    left: calc(100% + 10px);
    bottom: 6px;
    width: 195px;
  }
  body.sidebar-compact .portal-sidebar-account-toggle { width: 42px; padding: 6px; }
  body.sidebar-compact .portal-sidebar-account-toggle .portal-sidebar-account-chevron { display: none; }
  body.sidebar-compact .portal-theme-toggle-label { display: none; }
}

@media (max-width: 980px) {
  .portal-sidebar { transition: transform .18s ease; }
  .portal-sidebar-account-menu { box-shadow: none; }
  .portal-theme-toggle { min-width: 38px; width: 38px; padding: 0 !important; }
  .portal-theme-toggle-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav-link,
  .portal-nav-group-toggle,
  .portal-sidebar-account-toggle,
  .portal-sidebar-account-chevron,
  .portal-theme-toggle,
  .portal-sidebar-collapse,
  .portal-nav-link::before { transition: none !important; }
}

/* Compact account cards must keep icon-only sizing. */
.portal-theme-toggle { width: auto !important; }
@media (min-width: 981px) {
  body.sidebar-compact .portal-sidebar-account-toggle > span:nth-child(2) { display: none !important; }
}

@media (max-width: 980px) {
  body.sidebar-open::after { display: none !important; }
  .portal-sidebar-scrim { z-index: 55; }
}

/* ============================================================
   CUSTOMER SECURITY ACTIVITY / PORTAL EVENT MIRROR
   ============================================================ */
.customer-activity-content { max-width: 1440px; }
.customer-activity-heading { margin-bottom: 18px; }
.activity-mirror-note { display:flex; align-items:flex-start; gap:13px; margin:0 0 16px; padding:15px 16px; border:1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius:14px; background:var(--brand-soft); }
.activity-mirror-icon { display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius:10px; color:var(--brand); background:var(--surface); }
.activity-mirror-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.activity-mirror-note strong { display:block; color:var(--text); font-size:.8rem; }
.activity-mirror-note p { max-width:900px; margin:4px 0 0; color:var(--text-soft); font-size:.75rem; line-height:1.58; }
.activity-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.activity-summary-grid > article { min-width:0; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-xs); }
.activity-summary-grid span { display:block; margin-bottom:8px; color:var(--muted); font-size:.65rem; font-weight:790; letter-spacing:.065em; text-transform:uppercase; }
.activity-summary-grid strong { display:block; overflow:hidden; color:var(--text); font-size:1.42rem; font-weight:820; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.activity-summary-grid small { display:block; margin-top:7px; color:var(--muted); font-size:.68rem; line-height:1.35; }
.activity-filter-card { margin-bottom:16px; }
.activity-filter-form { display:grid; grid-template-columns:minmax(180px,1.55fr) repeat(4,minmax(130px,.85fr)) auto; gap:11px; align-items:end; }
.activity-filter-form label { display:grid; gap:6px; min-width:0; color:var(--muted); font-size:.66rem; font-weight:790; letter-spacing:.045em; text-transform:uppercase; }
.activity-filter-form input, .activity-filter-form select { width:100%; min-height:42px; text-transform:none; letter-spacing:normal; }
.activity-filter-actions { display:flex; gap:8px; align-items:center; min-height:42px; }
.activity-filter-actions .link-button { min-height:42px; }
.activity-log-card { min-width:0; }
.activity-log-card .customer-section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.activity-log-card h2 { margin-top:3px; font-size:1.1rem; }
.activity-log-card p { margin-top:4px; color:var(--muted); font-size:.76rem; line-height:1.55; }
.activity-result-count { display:inline-flex; align-items:center; min-height:27px; padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--text-soft); background:var(--surface-muted); font-size:.66rem; font-weight:790; white-space:nowrap; }
.activity-log-list { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.activity-log-row { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; padding:13px; border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:13px; background:var(--surface); transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.activity-log-row:hover { border-color:var(--line-strong); background:var(--surface-hover); transform:translateY(-1px); }
.activity-log-row.severity-low { border-left-color:var(--brand); }
.activity-log-row.severity-medium { border-left-color:var(--amber); }
.activity-log-row.severity-high { border-left-color:var(--red); }
.activity-log-row.severity-critical { border-left-color:var(--red); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--red) 18%, transparent); }
.activity-log-marker { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--brand); background:var(--surface-muted); }
.activity-log-marker svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.severity-medium .activity-log-marker { color:var(--amber); background:var(--amber-soft); }
.severity-high .activity-log-marker, .severity-critical .activity-log-marker { color:var(--red); background:var(--red-soft); }
.activity-log-main { min-width:0; }
.activity-log-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.activity-log-topline > div { min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.activity-log-type { color:var(--muted); font-size:.61rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.activity-log-topline strong { overflow:hidden; color:var(--text); font-size:.81rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.activity-log-topline time { flex:0 0 auto; color:var(--muted); font-size:.67rem; white-space:nowrap; }
.activity-log-facts { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:8px; color:var(--text-soft); font-size:.69rem; }
.activity-log-facts > span:not(.badge) { overflow:hidden; max-width:260px; text-overflow:ellipsis; white-space:nowrap; }
.activity-log-identifier { display:block; max-width:100%; margin-top:8px; overflow:hidden; color:var(--muted); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.activity-log-details { margin-top:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); }
.activity-log-details summary { cursor:pointer; padding:9px 10px; color:var(--text-soft); font-size:.7rem; font-weight:760; user-select:none; }
.activity-log-details summary::marker { color:var(--brand); }
.activity-log-details pre { max-height:360px; margin:0; padding:10px; overflow:auto; border-top:1px solid var(--line); color:var(--text-soft); font:600 .66rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.activity-ban-link { display:inline-flex; gap:6px; margin-top:10px; color:var(--brand-ink); font-size:.7rem; font-weight:790; text-decoration:none; }
.activity-ban-link:hover { color:var(--brand); }
.activity-empty-state { display:grid; justify-items:center; min-height:260px; padding:28px; border:1px dashed var(--line-strong); border-radius:13px; text-align:center; background:var(--surface-muted); }
.activity-empty-state > span { display:grid; width:42px; height:42px; margin-bottom:10px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--brand); background:var(--surface); }
.activity-empty-state > span svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.activity-empty-state strong { color:var(--text); font-size:.84rem; }
.activity-empty-state p { max-width:500px; margin:6px 0 13px; color:var(--muted); font-size:.75rem; line-height:1.55; }
@media (max-width:1180px) { .activity-filter-form { grid-template-columns:repeat(3,minmax(0,1fr)); } .activity-filter-form label:first-child { grid-column:span 3; } .activity-filter-actions { grid-column:span 3; } }
@media (max-width:860px) { .activity-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .activity-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .activity-filter-form label:first-child, .activity-filter-actions { grid-column:span 2; } }
@media (max-width:580px) { .activity-summary-grid, .activity-filter-form { grid-template-columns:1fr; } .activity-filter-form label:first-child, .activity-filter-actions { grid-column:auto; } .activity-filter-actions { width:100%; } .activity-filter-actions > * { flex:1 1 0; justify-content:center; } .activity-log-row { grid-template-columns:32px minmax(0,1fr); gap:9px; padding:11px; } .activity-log-marker { width:30px; height:30px; } .activity-log-topline { display:grid; gap:4px; } .activity-log-topline time { white-space:normal; } .activity-log-facts > span:not(.badge) { max-width:100%; } }


/* ACGX Portal v3.8 - live Discord-to-Portal activity stream */
.activity-live-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.activity-live-status { display:inline-flex; align-items:center; gap:7px; min-height:27px; padding:5px 9px; border:1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); border-radius:999px; color:var(--brand-ink); background:var(--brand-soft); font-size:.66rem; font-weight:790; white-space:nowrap; }
.activity-live-status i { width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 17%, transparent); animation:acgx-live-pulse 1.8s ease-in-out infinite; }
.activity-live-status.is-paused { color:var(--muted); border-color:var(--line); background:var(--surface-muted); }
.activity-live-status.is-paused i { background:var(--muted); box-shadow:none; animation:none; }
.activity-live-toggle { min-height:29px; padding:5px 10px; font-size:.66rem; }
.activity-discord-message { margin-top:10px; padding:10px 11px; border:1px solid var(--line); border-left:2px solid var(--brand); border-radius:10px; background:var(--surface-muted); }
.activity-discord-message > span { display:block; margin-bottom:5px; color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.activity-discord-message p { margin:0; color:var(--text-soft); font-size:.69rem; line-height:1.58; white-space:normal; overflow-wrap:anywhere; }
.activity-log-row-new { animation:acgx-log-arrive .22s ease both; }
@keyframes acgx-live-pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.72); opacity:.66; } }
@keyframes acgx-log-arrive { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .activity-live-status i, .activity-log-row-new { animation:none; } }
@media (max-width:580px) { .activity-log-card .customer-section-header { display:grid; } .activity-live-controls { justify-content:flex-start; } }


/* ACGX Portal v4.0 — Server Command Center */
.command-bridge-card small { display:block; margin-top:8px; color:var(--muted); font-size:.68rem; }
.command-center-card,
.command-history-card { min-width:0; margin-bottom:16px; }
.command-center-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.command-center-heading h2 { margin-top:3px; font-size:1.1rem; }
.command-center-heading p { max-width:720px; margin-top:5px; color:var(--muted); font-size:.77rem; line-height:1.58; }
.command-bridge-state {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border:1px solid var(--line-strong);
  border-radius:99px;
  color:var(--muted);
  background:var(--surface-muted);
  font-size:.67rem;
  font-weight:840;
  letter-spacing:.02em;
  white-space:nowrap;
}
.command-bridge-state::before { width:6px; height:6px; margin-right:7px; border-radius:50%; content:""; background:currentColor; }
.command-bridge-state.online { border-color:color-mix(in srgb, var(--green) 36%, var(--line)); color:var(--green); background:var(--green-soft); }
.command-bridge-state.offline { border-color:color-mix(in srgb, var(--amber) 36%, var(--line)); color:var(--amber); background:var(--amber-soft); }

.command-center-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,.7fr); gap:16px; align-items:stretch; }
.command-composer { display:grid; gap:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }
.command-terminal-bar {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  margin:-16px -16px 0;
  padding:8px 13px;
  border-bottom:1px solid var(--sidebar-line);
  border-radius:14px 14px 0 0;
  color:#d7e1f2;
  background:var(--sidebar);
  font-size:.68rem;
}
.command-terminal-bar code { overflow:hidden; color:#f0f5ff; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.command-terminal-bar > span:last-child { margin-left:auto; color:#94a7c5; font-size:.62rem; font-weight:760; letter-spacing:.05em; text-transform:uppercase; }
.command-terminal-dot { width:8px; height:8px; border-radius:50%; background:#56cb8d; box-shadow:0 0 0 3px rgba(86,203,141,.16); }
.command-input-label { display:grid; gap:7px; color:var(--text-soft); font-size:.72rem; font-weight:780; }
.command-text {
  width:100%;
  min-height:46px;
  padding:12px 13px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  color:var(--text);
  outline:0;
  background:var(--input);
  font-family:var(--font-mono);
  font-size:.78rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.command-text:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.command-text:disabled { cursor:not-allowed; opacity:.58; }
.command-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.command-quick-action {
  min-height:34px;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--text-soft);
  background:var(--surface);
  font-size:.68rem;
  font-weight:760;
  text-align:left;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.command-quick-action:hover { border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft); }
.command-quick-action:disabled { cursor:not-allowed; opacity:.52; }
.command-quick-action:disabled:hover { border-color:var(--line); color:var(--text-soft); background:var(--surface); }
.command-quick-action:focus-visible { outline:3px solid var(--brand-soft); outline-offset:2px; }
.command-confirm-check { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text-soft); background:var(--surface); font-size:.71rem; line-height:1.45; }
.command-confirm-check input { width:15px; min-height:auto; margin:2px 0 0; accent-color:var(--brand); }
.command-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.command-composer-footer p { max-width:570px; color:var(--muted); font-size:.66rem; line-height:1.5; }
.command-composer-footer code { color:var(--text-soft); font-size:.65rem; }
.command-composer-footer button { flex:0 0 auto; min-height:40px; }
.command-composer-footer button:disabled { cursor:not-allowed; opacity:.58; }

.command-rules-card { display:flex; flex-direction:column; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.command-rules-card h3 { margin:4px 0 9px; font-size:.95rem; }
.command-rules-card ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.command-rules-card li { position:relative; padding-left:16px; color:var(--text-soft); font-size:.72rem; line-height:1.5; }
.command-rules-card li::before { position:absolute; left:0; top:.51em; width:6px; height:6px; border-radius:50%; content:""; background:var(--brand); }
.command-rules-card code { color:var(--text); font-size:.67rem; }
.command-rules-note { margin-top:auto; padding-top:14px; color:var(--muted); font-size:.66rem; line-height:1.5; }

.command-metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.command-metrics-grid article { min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.command-metrics-grid span { display:block; margin-bottom:5px; color:var(--muted); font-size:.63rem; font-weight:820; letter-spacing:.06em; text-transform:uppercase; }
.command-metrics-grid strong { display:block; color:var(--text); font-size:1.15rem; line-height:1; letter-spacing:-.04em; }
.command-metrics-grid small { display:block; margin-top:6px; overflow:hidden; color:var(--muted); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }

.command-history-card .customer-section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:17px; }
.command-history-card .customer-section-header h2 { margin-top:3px; font-size:1.08rem; }
.command-history-card .customer-section-header p { margin-top:5px; color:var(--muted); font-size:.76rem; line-height:1.55; }
.command-history-table { width:100%; min-width:890px; border-collapse:collapse; }
.command-history-table th { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--muted); background:var(--surface-muted); font-size:.64rem; font-weight:800; letter-spacing:.07em; text-align:left; text-transform:uppercase; }
.command-history-table td { padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text-soft); font-size:.74rem; }
.command-history-table tbody tr:last-child td { border-bottom:0; }
.command-history-table td > code { display:block; max-width:320px; overflow:hidden; color:var(--text); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.command-history-table strong { display:block; color:var(--text); font-size:.75rem; }
.command-history-table small { display:block; max-width:300px; margin-top:4px; overflow:hidden; color:var(--muted); font-size:.65rem; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.command-status { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:var(--surface-muted); font-size:.64rem; font-weight:820; white-space:nowrap; }
.command-status.queued { border-color:color-mix(in srgb, var(--amber) 35%, var(--line)); color:var(--amber); background:var(--amber-soft); }
.command-status.running { border-color:color-mix(in srgb, var(--brand) 34%, var(--line)); color:var(--brand-ink); background:var(--brand-soft); }
.command-status.completed { border-color:color-mix(in srgb, var(--green) 35%, var(--line)); color:var(--green); background:var(--green-soft); }
.command-status.failed { border-color:color-mix(in srgb, var(--red) 35%, var(--line)); color:var(--red); background:var(--red-soft); }
.command-status.cancelled,
.command-status.expired { border-color:var(--line-strong); color:var(--muted); background:var(--surface-muted); }

@media (max-width: 980px) {
  .command-center-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .command-center-heading,
  .command-history-card .customer-section-header,
  .command-composer-footer { align-items:stretch; flex-direction:column; }
  .command-bridge-state { align-self:flex-start; }
  .command-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .command-metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .command-composer-footer button { width:100%; }
}


/* ============================================================
   v4.2 txAdmin-style Command Center workspace
   ============================================================ */
.acgx-console-studio { min-width:0; margin:0 0 16px; overflow:hidden; border:1px solid #253a59; border-radius:18px; background:#0b1321; box-shadow:0 18px 42px rgba(7,16,30,.18); color:#e8effb; }
.acgx-console-studio-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:23px 24px 19px; border-bottom:1px solid #23344f; background:linear-gradient(135deg,#101d31 0%,#0d1728 58%,#111e31 100%); }
.acgx-console-studio-heading .customer-kicker { color:#82b7ff; }
.acgx-console-studio-heading h2 { margin:4px 0 7px; color:#f7fbff; font-size:1.2rem; letter-spacing:-.03em; }
.acgx-console-studio-heading p:not(.customer-kicker) { max-width:760px; margin:0; color:#aabbd5; font-size:.79rem; line-height:1.62; }
.acgx-console-heading-state { display:flex; align-items:flex-end; flex-direction:column; gap:8px; padding-top:4px; }
.acgx-console-muted-status { display:inline-flex; align-items:center; color:#9dafc9; font-size:.67rem; font-weight:760; white-space:nowrap; }
.acgx-console-muted-status i { width:7px; height:7px; margin-right:7px; border-radius:50%; background:#55cc91; box-shadow:0 0 0 3px rgba(85,204,145,.13); }
.acgx-console-muted-status.is-paused i { background:#f3b35d; box-shadow:0 0 0 3px rgba(243,179,93,.13); }
.acgx-console-grid { display:grid; grid-template-columns:minmax(0,1.78fr) minmax(285px,.62fr); min-height:560px; }
.acgx-console-terminal { display:flex; flex-direction:column; min-width:0; border-right:1px solid #23344f; background:#0b1321; }
.acgx-console-terminal-topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:68px; padding:14px 17px; border-bottom:1px solid #1f3049; background:#0e192a; }
.acgx-console-terminal-identity { display:flex; align-items:center; min-width:0; gap:11px; }
.acgx-console-terminal-mark { display:grid; width:31px; height:31px; flex:0 0 auto; place-items:center; border:1px solid #2d4b72; border-radius:8px; color:#9ac5ff; background:#112a4b; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:850; }
.acgx-console-terminal-identity div { display:grid; min-width:0; gap:3px; }
.acgx-console-terminal-identity strong { overflow:hidden; color:#f1f6ff; font-size:.79rem; text-overflow:ellipsis; white-space:nowrap; }
.acgx-console-terminal-identity small { overflow:hidden; color:#8fa4c2; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.acgx-console-terminal-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.acgx-console-terminal-actions .ghost { min-height:30px; padding:6px 9px; border-color:#2c405f; color:#b9c9df; background:#111f33; font-size:.64rem; }
.acgx-console-terminal-actions .ghost:hover { border-color:#4f7fb8; color:#edf5ff; background:#162b49; }
.acgx-console-stat-strip { display:flex; align-items:center; gap:0; overflow:auto; border-bottom:1px solid #1c2b43; background:#0c1625; white-space:nowrap; scrollbar-width:thin; }
.acgx-console-stat-strip span { display:inline-flex; align-items:center; min-height:39px; padding:0 13px; border-right:1px solid #1d2c44; color:#95a9c5; font-size:.65rem; }
.acgx-console-stat-strip b { margin-right:4px; color:#deebfb; font-size:.66rem; }
.status-pip { width:7px; height:7px; margin-right:7px; border-radius:50%; background:#e5a95d; box-shadow:0 0 0 3px rgba(229,169,93,.12); }
.status-pip.online { background:#5bd293; box-shadow:0 0 0 3px rgba(91,210,147,.12); }
.status-pip.offline { background:#f3ae5b; }
.acgx-console-filterbar { display:flex; align-items:center; gap:5px; padding:10px 12px; border-bottom:1px solid #20314b; background:#0d1829; }
.acgx-console-filterbar > button { min-height:28px; padding:5px 8px; border:1px solid transparent; border-radius:7px; color:#94a9c7; background:transparent; font-size:.64rem; font-weight:760; }
.acgx-console-filterbar > button:hover { color:#eaf3ff; background:#172941; }
.acgx-console-filterbar > button.is-active { border-color:#355e8e; color:#d8eaff; background:#173454; box-shadow:inset 0 0 0 1px rgba(123,183,255,.06); }
.acgx-console-search { display:flex; align-items:center; gap:6px; min-width:130px; margin-left:auto; padding:0 8px; border:1px solid #273c5b; border-radius:7px; color:#8095b3; background:#0a1422; }
.acgx-console-search input { width:130px; min-height:28px; padding:0; border:0; outline:0; color:#dce8f8; background:transparent; box-shadow:none; font-size:.65rem; }
.acgx-console-search input::placeholder { color:#617796; }
.acgx-console-scroll { flex:1 1 auto; min-height:285px; max-height:510px; overflow:auto; padding:12px 0; background:#0a101b; scrollbar-color:#314a6d #0a101b; scrollbar-width:thin; }
.acgx-console-lines { display:grid; gap:0; margin:0; padding:0; list-style:none; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }
.acgx-console-line { display:grid; grid-template-columns:150px 86px 155px minmax(0,1fr); align-items:start; min-width:0; gap:10px; padding:5px 16px; border-left:3px solid transparent; color:#c4d2e6; font-size:.69rem; line-height:1.52; }
.acgx-console-line:nth-child(2n) { background:rgba(255,255,255,.012); }
.acgx-console-line:hover { background:#101d2f; }
.acgx-console-line time { color:#7185a1; white-space:nowrap; }
.acgx-console-channel { overflow:hidden; color:#8aa8ce; font-weight:800; letter-spacing:.045em; text-overflow:ellipsis; white-space:nowrap; }
.acgx-console-source { overflow:hidden; color:#9bacbf; text-overflow:ellipsis; white-space:nowrap; }
.acgx-console-message { overflow-wrap:anywhere; color:#d7e2f2; }
.acgx-console-line.level-command { border-left-color:#5b9cf2; }
.acgx-console-line.level-command .acgx-console-channel { color:#8abaff; }
.acgx-console-line.level-success { border-left-color:#4fca89; }
.acgx-console-line.level-success .acgx-console-message { color:#bcefd2; }
.acgx-console-line.level-warning { border-left-color:#e4a550; }
.acgx-console-line.level-warning .acgx-console-message { color:#f1d19e; }
.acgx-console-line.level-error { border-left-color:#e55f68; background:rgba(229,95,104,.055); }
.acgx-console-line.level-error .acgx-console-message { color:#ffc4c8; }
.acgx-console-line.level-security { border-left-color:#bf8aff; background:rgba(191,138,255,.042); }
.acgx-console-line.level-security .acgx-console-message { color:#e1c8ff; }
.acgx-console-line-new { animation:acgx-console-line-in .24s ease both; }
@keyframes acgx-console-line-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.acgx-console-empty { display:grid; justify-items:start; gap:5px; min-height:255px; padding:72px 28px; color:#9baeC6; font-family:inherit; }
.acgx-console-empty span { color:#6da9ed; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85rem; font-weight:800; }
.acgx-console-empty strong { color:#e5eefb; font-size:.82rem; }
.acgx-console-empty p { max-width:440px; margin:0; color:#8ea2bf; font-size:.72rem; line-height:1.55; }
.acgx-command-dock { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:12px; border-top:1px solid #253753; background:#111d2f; }
.acgx-command-prompt { display:flex; align-items:center; gap:4px; color:#75aff8; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.72rem; font-weight:800; }
.acgx-command-prompt b { color:#e5eefb; }
.acgx-command-input-wrap { position:relative; min-width:0; }
.acgx-command-text { width:100%; min-height:38px; padding:0 11px; border:1px solid #2b4466; border-radius:8px; outline:0; color:#e8f1ff; background:#0a1321; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.72rem; box-shadow:none; }
.acgx-command-text::placeholder { color:#65809f; }
.acgx-command-text:focus { border-color:#5d9fea; box-shadow:0 0 0 3px rgba(93,159,234,.15); }
.acgx-command-text:disabled { cursor:not-allowed; opacity:.55; }
.acgx-command-run { min-height:38px; padding:8px 12px; border-color:#86bbff; color:#0b1d35; background:#a8d0ff; font-size:.67rem; white-space:nowrap; }
.acgx-command-run:hover { background:#c2defe; }
.acgx-command-run span { padding-left:4px; font-size:.78rem; }
.acgx-command-confirm { display:inline-flex; align-items:center; gap:6px; padding:0 4px; color:#91a5c3; font-size:.61rem; line-height:1.25; }
.acgx-command-confirm input { width:14px; min-height:auto; margin:0; accent-color:#7caef0; }
.acgx-command-help { grid-column:2 / -1; margin:-2px 0 0; color:#7690b1; font-size:.58rem; line-height:1.45; }
.acgx-command-help code { color:#a4bddc; font-size:.58rem; }
.acgx-command-suggestions { position:absolute; z-index:30; right:0; bottom:calc(100% + 8px); left:0; overflow:hidden; border:1px solid #36577f; border-radius:9px; background:#13243a; box-shadow:0 16px 35px rgba(3,10,20,.38); }
.acgx-command-suggestions button { display:grid; width:100%; grid-template-columns:170px minmax(0,1fr); gap:9px; padding:9px 10px; border:0; border-bottom:1px solid #294362; color:#c9d9ed; background:#13243a; text-align:left; }
.acgx-command-suggestions button:last-child { border-bottom:0; }
.acgx-command-suggestions button:hover { background:#1a3555; }
.acgx-command-suggestions code { color:#a6cbff; font-size:.65rem; }
.acgx-command-suggestions span { overflow:hidden; color:#97acc8; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.acgx-console-control-rail { display:grid; align-content:start; gap:0; background:#0d1727; }
.acgx-console-rail-card { padding:17px; border-bottom:1px solid #23344f; }
.acgx-console-rail-card:last-child { border-bottom:0; }
.acgx-console-rail-title { display:grid; gap:4px; margin-bottom:12px; }
.acgx-console-rail-title span { color:#9ebce2; font-size:.62rem; font-weight:850; letter-spacing:.085em; }
.acgx-console-rail-title small { color:#788da9; font-size:.64rem; line-height:1.4; }
.acgx-console-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.acgx-console-quick-grid button { min-height:44px; padding:8px; border:1px solid #2b4567; border-radius:8px; color:#c7d7eb; background:#111f33; font-size:.65rem; font-weight:760; text-align:left; }
.acgx-console-quick-grid button:hover { border-color:#5c91ce; color:#eff6ff; background:#193353; }
.acgx-console-quick-grid button:disabled { cursor:not-allowed; opacity:.5; }
.acgx-resource-composer { display:grid; gap:9px; }
.acgx-resource-composer .acgx-console-rail-title { margin-bottom:2px; }
.acgx-resource-composer label { display:grid; gap:5px; color:#9cb0ca; font-size:.63rem; font-weight:750; }
.acgx-resource-composer select,.acgx-resource-composer input { min-height:35px; padding:0 9px; border:1px solid #2a4567; border-radius:7px; outline:0; color:#dce8f8; background:#0b1625; font-size:.68rem; box-shadow:none; }
.acgx-resource-composer select:focus,.acgx-resource-composer input:focus { border-color:#5d9fea; box-shadow:0 0 0 3px rgba(93,159,234,.12); }
.acgx-resource-composer .ghost { min-height:35px; border-color:#324e70; color:#b8cce5; background:#142640; font-size:.65rem; }
.acgx-resource-composer .ghost:hover { color:#edf5ff; background:#1b3555; }
.acgx-console-command-reference { display:grid; gap:6px; }
.acgx-console-command-reference .acgx-console-rail-title { margin-bottom:4px; }
.acgx-console-command-reference code { display:block; overflow:hidden; padding:6px 8px; border:1px solid #243d5c; border-radius:6px; color:#a6c9f7; background:#0a1422; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.acgx-console-footer-strip { display:flex; align-items:center; flex-wrap:wrap; gap:0; padding:11px 17px; border-top:1px solid #23344f; color:#879bb8; background:#0e192a; font-size:.62rem; }
.acgx-console-footer-strip span { padding:0 11px; border-right:1px solid #253852; }
.acgx-console-footer-strip span:first-child { padding-left:0; }
.acgx-console-footer-strip span:last-child { border-right:0; }
.acgx-console-footer-strip b { color:#d3e2f4; }
@media (max-width:1200px) { .acgx-console-grid { grid-template-columns:1fr; } .acgx-console-terminal { border-right:0; border-bottom:1px solid #23344f; } .acgx-console-control-rail { grid-template-columns:repeat(3,minmax(0,1fr)); } .acgx-console-rail-card { border-right:1px solid #23344f; border-bottom:0; } .acgx-console-rail-card:last-child { border-right:0; } }
@media (max-width:860px) { .acgx-console-studio-heading { align-items:stretch; flex-direction:column; } .acgx-console-heading-state { align-items:flex-start; flex-direction:row; flex-wrap:wrap; } .acgx-console-terminal-topbar { align-items:flex-start; flex-direction:column; } .acgx-console-terminal-actions { justify-content:flex-start; } .acgx-console-filterbar { flex-wrap:wrap; } .acgx-console-search { order:2; width:100%; margin-left:0; } .acgx-console-search input { width:100%; } .acgx-console-line { grid-template-columns:132px 80px minmax(0,1fr); } .acgx-console-source { display:none; } .acgx-console-control-rail { grid-template-columns:1fr; } .acgx-console-rail-card { border-right:0; border-bottom:1px solid #23344f; } .acgx-command-dock { grid-template-columns:auto minmax(0,1fr) auto; } .acgx-command-confirm { grid-column:2 / -1; } }
@media (max-width:600px) { .acgx-console-studio-heading { padding:18px; } .acgx-console-stat-strip span { padding:0 10px; } .acgx-console-line { grid-template-columns:1fr; gap:2px; padding:9px 13px; } .acgx-console-line time,.acgx-console-channel,.acgx-console-source { font-size:.59rem; } .acgx-console-message { font-size:.67rem; } .acgx-command-dock { grid-template-columns:auto minmax(0,1fr); } .acgx-command-run { grid-column:1 / -1; width:100%; } .acgx-command-confirm { grid-column:1 / -1; } .acgx-command-help { grid-column:1 / -1; } .acgx-command-suggestions button { grid-template-columns:1fr; gap:3px; } .acgx-console-footer-strip { display:grid; gap:6px; } .acgx-console-footer-strip span { padding:0; border:0; } }

.console-player-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.console-player-actions .ghost { min-height:29px; padding:5px 8px; font-size:.62rem; }

/* ============================================================
   ACGX Portal v4.3 — Navigation reliability + premium workspace shell
   Crisp operational UI. No blur, no gradients, no decorative glass.
   ============================================================ */
:root {
  --portal-sidebar-width: 286px;
  --sidebar: #0b1220;
  --sidebar-soft: #121d2e;
  --sidebar-line: #24344c;
}

.portal-shell {
  grid-template-columns: var(--portal-sidebar-width) minmax(0, 1fr);
  background: var(--canvas);
}

.portal-sidebar {
  position: sticky;
  z-index: 60;
  width: var(--portal-sidebar-width);
  padding: 14px 12px 12px;
  border-right-color: var(--sidebar-line);
  background: var(--sidebar);
}

.portal-sidebar-brand {
  min-height: 62px;
  align-items: center;
  padding: 8px 9px 15px;
  border-bottom: 1px solid rgba(147, 166, 194, .16);
}
.portal-sidebar-brand .brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid #4d78e0;
  border-radius: 9px;
  color: #fff;
  background: #2457d5;
  font-size: .73rem;
}
.portal-sidebar-brand strong { font-size: .94rem; }
.portal-sidebar-brand small { color: #91a4c1; font-size: .68rem; }

.portal-sidebar-workspace {
  margin: 13px 8px 10px;
  color: #9baec8;
  font-size: .62rem;
  letter-spacing: .12em;
}
.portal-presence-dot { width: 6px; height: 6px; background: #46c58a; box-shadow: 0 0 0 3px rgba(70, 197, 138, .13); }

.portal-sidebar-utility { margin: 0 5px 12px; }
.portal-quick-open {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 39px;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid #2a405e;
  border-radius: 8px;
  color: #d9e5f7;
  background: #101c2d;
  font: inherit;
  font-size: .73rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}
.portal-quick-open:hover { border-color: #4f73ab; background: #16263d; }
.portal-quick-open:focus-visible { outline: 2px solid #9fc2ff; outline-offset: 2px; }
.portal-quick-open-icon { display: grid; width: 18px; height: 18px; place-items: center; color: #a7c3ff; font-size: 1.04rem; line-height: 1; }
.portal-quick-open kbd {
  min-width: 35px;
  margin-left: auto;
  padding: 3px 5px;
  border: 1px solid #334964;
  border-radius: 5px;
  color: #9fb0c8;
  background: #0a1525;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 700;
  text-align: center;
}

.portal-sidebar-nav { gap: 8px; padding: 0 3px; }
.portal-nav-group { display: grid; gap: 4px; padding: 0 2px; }
.portal-nav-group + .portal-nav-group { padding-top: 12px; border-top-color: rgba(147, 166, 194, .13); }
.portal-nav-group-toggle { min-height: 25px; padding: 4px 6px; color: #8396b2; font-size: .59rem; letter-spacing: .13em; }
.portal-nav-group-toggle:hover { color: #d9e5f7; background: #121e30; }
.portal-nav-group-panel { gap: 3px; }
.portal-nav-link {
  min-height: 42px;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #afbdd0;
  font-size: .79rem;
  font-weight: 735;
}
.portal-nav-link:hover { color: #fff; background: #142238; transform: none; }
.portal-nav-link.active {
  border-color: #3b609b !important;
  color: #fff;
  background: #1c3b70 !important;
  box-shadow: inset 3px 0 0 #a7c2ff;
}
.portal-sidebar-staff .portal-nav-link.active { border-color: #4f5f7b !important; background: #27364d !important; box-shadow: inset 3px 0 0 #c0cce2; }
.portal-nav-icon { width: 18px; flex-basis: 18px; color: #a9c1f3; }
.portal-nav-badge { min-width: 20px; min-height: 20px; border: 1px solid rgba(255, 255, 255, .15); background: #b33f58; }
.portal-nav-tag { border-color: #375889; color: #b6cbff; background: #172842; }

.portal-sidebar-operations-card {
  display: grid;
  gap: 6px;
  margin: auto 4px 10px;
  padding: 11px;
  border: 1px solid #283d5b;
  border-radius: 9px;
  background: #101d2f;
}
.portal-sidebar-operations-heading { display: flex; align-items: center; gap: 7px; color: #8ca5c8; font-size: .59rem; font-weight: 840; letter-spacing: .11em; text-transform: uppercase; }
.portal-sidebar-operations-heading .portal-presence-dot { width: 5px; height: 5px; }
.portal-sidebar-operations-card strong { color: #eef5ff; font-size: .76rem; line-height: 1.32; }
.portal-sidebar-operations-card small { color: #9aabc4; font-size: .65rem; line-height: 1.4; }
.portal-sidebar-operations-card a { display: inline-flex; align-items: center; justify-content: space-between; min-height: 30px; margin-top: 3px; padding: 6px 8px; border: 1px solid #35527b; border-radius: 6px; color: #d5e4ff; background: #142746; font-size: .66rem; font-weight: 800; }
.portal-sidebar-operations-card a:hover { border-color: #6e93d5; background: #1a3156; }
.portal-sidebar-operations-card a span { font-size: .9rem; }

.portal-sidebar-footer { gap: 7px; padding: 0 4px; }
.portal-sidebar-security,
.portal-sidebar-account-toggle { border-color: #2b3e58; border-radius: 8px; background: #101b2b; }
.portal-sidebar-security { min-height: 45px; }
.portal-sidebar-account-toggle { min-height: 48px; }
.portal-sidebar-security:hover,
.portal-sidebar-account-toggle:hover { border-color: #405e86; background: #142337; }
.portal-sidebar-account-menu { border-color: #2b3e58; background: #0e1928; }
.portal-sidebar-collapse { top: 20px; right: 17px; }

/* Command palette is generated from the actual authenticated sidebar. */
.acgx-command-palette[hidden] { display: none; }
.acgx-command-palette { position: fixed; z-index: 200; inset: 0; display: grid; place-items: start center; padding: min(12vh, 110px) 18px 22px; }
.acgx-command-palette-backdrop { position: absolute; inset: 0; border: 0; background: rgba(3, 8, 16, .68); cursor: default; }
.acgx-command-palette-dialog { position: relative; z-index: 1; display: grid; width: min(100%, 640px); max-height: min(700px, 78vh); overflow: hidden; border: 1px solid #344a69; border-radius: 12px; background: #111c2c; box-shadow: 0 20px 50px rgba(0,0,0,.42); }
.acgx-command-palette-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 17px 12px; border-bottom: 1px solid #2c405d; }
.acgx-command-palette-dialog header p { margin: 0 0 4px; color: #91a8cb; font-size: .6rem; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
.acgx-command-palette-dialog h2 { margin: 0; color: #f4f8ff; font-size: 1rem; }
.acgx-command-palette-dialog .icon-button { width: 32px; height: 32px; padding: 0; border-color: #334a69 !important; color: #d7e4f7 !important; background: #17263b !important; }
.acgx-command-palette-search { display: grid; gap: 7px; padding: 14px 17px; border-bottom: 1px solid #2c405d; color: #9cb0cb; font-size: .64rem; font-weight: 770; letter-spacing: .04em; text-transform: uppercase; }
.acgx-command-palette-search input { min-height: 44px; border-color: #41597b !important; color: #eff5ff; background: #0b1422 !important; font-size: .82rem; }
.acgx-command-palette-results { display: grid; gap: 3px; min-height: 126px; max-height: min(420px, 50vh); padding: 10px; overflow-y: auto; }
.acgx-command-palette-results button { display: grid; grid-template-columns: 28px minmax(0,1fr) 20px; align-items: center; gap: 10px; width: 100%; min-height: 51px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: #dce7f6; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.acgx-command-palette-results button:hover,
.acgx-command-palette-results button[aria-selected="true"] { border-color: #3e6090; background: #182b45; }
.acgx-command-palette-item-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #3b5275; border-radius: 7px; color: #b8cfff; background: #0f1d31; font-weight: 800; }
.acgx-command-palette-results strong,
.acgx-command-palette-results small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acgx-command-palette-results strong { color: #edf3fb; font-size: .75rem; }
.acgx-command-palette-results small { margin-top: 2px; color: #94a5bd; font-size: .62rem; }
.acgx-command-palette-item-arrow { color: #9bb6de; font-size: 1rem; text-align: center; }
.acgx-command-palette-empty { display: grid; min-height: 110px; place-items: center; color: #9baac0; font-size: .75rem; }
.acgx-command-palette-dialog footer { display: flex; gap: 13px; padding: 11px 17px; border-top: 1px solid #2c405d; color: #8497b1; font-size: .61rem; }
.acgx-command-palette-dialog footer span { display: inline-flex; align-items: center; gap: 4px; }
.acgx-command-palette-dialog footer kbd { padding: 2px 4px; border: 1px solid #405574; border-radius: 4px; color: #c8d6ea; background: #17263a; font-family: var(--font-mono); font-size: .55rem; }
body.portal-palette-open { overflow: hidden; }

/* Reliable responsive drawer. Desktop hides mobile controls, mobile always opens. */
@media (min-width: 981px) {
  .mobile-only,
  .customer-mobile-menu { display: none !important; }
  body.sidebar-compact .portal-shell { grid-template-columns: 76px minmax(0, 1fr); }
  body.sidebar-compact .portal-sidebar { width: 76px; }
  body.sidebar-compact .portal-sidebar-utility,
  body.sidebar-compact .portal-sidebar-operations-card { display: none; }
}
@media (max-width: 980px) {
  .portal-shell { display: block; }
  .mobile-only,
  .customer-mobile-menu { display: inline-grid !important; place-items: center; }
  .portal-sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    width: min(var(--portal-sidebar-width), 88vw);
    height: 100dvh;
    transform: translateX(-112%) !important;
    box-shadow: 16px 0 40px rgba(0,0,0,.32);
    transition: transform .2s ease !important;
  }
  body.sidebar-open .portal-sidebar { transform: translateX(0) !important; }
  .portal-sidebar-scrim { z-index: 65 !important; background: rgba(3, 8, 16, .62) !important; }
  .portal-sidebar-collapse { display: none !important; }
  .portal-sidebar-close { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
  .portal-sidebar-operations-card { margin-top: 16px; }
  .acgx-command-palette { padding: 58px 12px 12px; }
  .acgx-command-palette-dialog { max-height: calc(100dvh - 70px); }
  .acgx-command-palette-dialog footer { gap: 8px; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 540px) {
  .portal-sidebar { width: min(316px, 92vw); }
  .portal-sidebar-brand { min-height: 58px; }
  .acgx-command-palette { padding: 12px 10px; }
  .acgx-command-palette-dialog { max-height: calc(100dvh - 24px); border-radius: 10px; }
  .acgx-command-palette-dialog footer { display: none; }
}

/* ============================================================
   v4.4.0 — Customer page upgrade
   Operations-first page surfaces, built on the existing portal system.
   ============================================================ */
.customer-operations-command {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(520px,1.35fr);
  gap:18px;
  align-items:stretch;
  margin:20px 0;
  padding:18px;
  border:1px solid #d8e1ed;
  border-radius:14px;
  background:linear-gradient(135deg,#f7faff 0%,#eef4fb 100%);
  box-shadow:0 10px 26px rgba(21,40,69,.06);
}
.customer-operations-command-intro { display:flex; align-items:flex-start; gap:13px; min-width:0; padding:4px; }
.customer-operations-command-icon { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border:1px solid #b8c9e2; border-radius:11px; color:#1d4e9d; background:#fff; }
.customer-operations-command-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.customer-operations-command h2 { margin:3px 0 6px; color:#172b49; font-size:1.05rem; letter-spacing:-.025em; }
.customer-operations-command p:not(.customer-kicker) { max-width:560px; margin:0; color:#61718a; font-size:.76rem; line-height:1.55; }
.customer-operations-command-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.customer-operation-signal { display:grid; grid-template-columns:30px minmax(0,1fr) 14px; gap:8px; align-items:center; min-width:0; padding:11px 10px; border:1px solid #d7e1ee; border-radius:10px; color:inherit; background:#fff; text-decoration:none; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.customer-operation-signal:hover { border-color:#82a5dc; transform:translateY(-1px); box-shadow:0 8px 16px rgba(24,58,106,.09); }
.customer-operation-signal-icon { display:grid; width:30px; height:30px; place-items:center; border:1px solid #cad8e9; border-radius:8px; color:#49637f; background:#f7faff; }
.customer-operation-signal-icon.live { border-color:#9ccfb9; color:#19724a; background:#edf8f1; }
.customer-operation-signal-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; }
.customer-operation-signal small { display:block; overflow:hidden; color:#77879e; font-size:.58rem; font-weight:820; letter-spacing:.07em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.customer-operation-signal strong { display:block; overflow:hidden; margin-top:3px; color:#1c2e48; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.customer-operation-signal b { color:#6b7d97; font-size:.9rem; }
.customer-readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.customer-readiness-card { min-height:212px; display:flex; flex-direction:column; padding:18px; border:1px solid #dfe6f0; border-radius:13px; background:#fff; box-shadow:0 6px 20px rgba(15,35,63,.045); }
.customer-readiness-card-security { border-color:#d2dfef; background:#fbfdff; }
.customer-readiness-card-head { display:flex; gap:10px; align-items:center; min-width:0; }
.customer-readiness-icon { display:grid; width:33px; height:33px; flex:0 0 auto; place-items:center; border:1px solid #cad6e5; border-radius:9px; color:#61728a; background:#f5f8fb; }
.customer-readiness-icon.is-ready { border-color:#9bd0b4; color:#176d49; background:#eef9f2; }
.customer-readiness-icon.is-action { border-color:#edcc8d; color:#9c6304; background:#fff8e9; }
.customer-readiness-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.customer-readiness-card-head h2 { overflow:hidden; margin:3px 0 0; color:#1c2d47; font-size:.92rem; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.customer-readiness-card-head > strong { margin-left:auto; color:#315b91; font-size:1.12rem; letter-spacing:-.04em; }
.customer-readiness-card p { margin:14px 0 12px; color:#65748c; font-size:.73rem; line-height:1.58; }
.customer-readiness-card .customer-inline-link { margin-top:auto; }
.customer-readiness-progress { height:6px; overflow:hidden; margin-top:13px; border-radius:999px; background:#e8eef6; }
.customer-readiness-progress i { display:block; height:100%; border-radius:inherit; background:#315e9c; }
.customer-readiness-meta { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 13px; }
.customer-readiness-meta span { padding:5px 7px; border:1px solid #e0e7f0; border-radius:7px; color:#65748b; background:#f8fafc; font-size:.64rem; font-weight:720; }

.server-command-deck { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:16px; margin:20px 0; }
.server-fleet-health-card { padding:18px; border:1px solid #d9e4f0; border-radius:13px; background:#fff; box-shadow:0 7px 18px rgba(17,39,70,.045); }
.server-fleet-health-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.server-fleet-health-head h2 { margin:3px 0 6px; color:#1d2f4b; font-size:1.04rem; letter-spacing:-.025em; }
.server-fleet-health-head p:not(.customer-kicker) { max-width:570px; margin:0; color:#67778f; font-size:.74rem; line-height:1.5; }
.server-fleet-health-head > strong { min-width:54px; padding:10px 8px; border:1px solid #b9cce3; border-radius:9px; color:#28558e; background:#f4f8fd; font-size:1.05rem; text-align:center; }
.server-fleet-health-bar { height:7px; overflow:hidden; margin:16px 0 13px; border-radius:999px; background:#e7edf5; }
.server-fleet-health-bar i { display:block; height:100%; border-radius:inherit; background:#2c629d; }
.server-fleet-health-meta { display:flex; flex-wrap:wrap; gap:7px; }
.server-fleet-health-meta span { padding:6px 8px; border:1px solid #e1e8f0; border-radius:7px; color:#60728d; background:#fafcff; font-size:.66rem; }
.server-fleet-health-meta b { color:#233a5c; }
.server-command-deck-actions { display:grid; gap:9px; }
.server-deck-action { display:grid; grid-template-columns:34px minmax(0,1fr) 14px; align-items:center; gap:10px; padding:13px; border:1px solid #dce5f0; border-radius:11px; color:inherit; background:#fff; text-decoration:none; box-shadow:0 4px 12px rgba(17,40,72,.03); transition:border-color .16s ease,transform .16s ease; }
.server-deck-action:hover { border-color:#83a6d9; transform:translateY(-1px); }
.server-deck-action > span { display:grid; width:34px; height:34px; place-items:center; border:1px solid #cbd8e8; border-radius:9px; color:#396190; background:#f7faff; }
.server-deck-action svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.server-deck-action small { display:block; color:#7a899f; font-size:.58rem; font-weight:820; letter-spacing:.07em; text-transform:uppercase; }
.server-deck-action strong { display:block; margin-top:3px; color:#20344f; font-size:.76rem; }
.server-deck-action b { color:#70839f; }
.server-card-workbench { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.server-card-workbench a { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:7px 9px; border:1px solid #d2deec; border-radius:8px; color:#315b8f; background:#f8fbff; font-size:.66rem; font-weight:790; text-decoration:none; }
.server-card-workbench a:hover { border-color:#8aaadc; background:#f0f6ff; }
.server-card-workbench svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
.server-card-open-console { color:#496278 !important; background:#fafbfd !important; }

.ban-operations-strip { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:18px 0; padding:14px 16px; border:1px solid #d9e3ef; border-radius:12px; background:#f8fbff; }
.ban-operations-strip > div:first-child { display:flex; gap:11px; align-items:flex-start; min-width:0; }
.ban-operations-icon { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border:1px solid #bdcee2; border-radius:9px; color:#315b8e; background:#fff; }
.ban-operations-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; }
.ban-operations-strip strong { display:block; margin:2px 0 4px; color:#203550; font-size:.79rem; }
.ban-operations-strip small { display:block; color:#6c7d94; font-size:.68rem; line-height:1.45; }
.ban-operations-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.ban-record-toolbar { display:flex; justify-content:space-between; gap:18px; align-items:center; margin:-2px -2px 16px; padding:10px 12px; border:1px solid #e0e7f1; border-radius:10px; background:#f8fafc; }
.ban-record-toolbar > div { min-width:0; }
.ban-record-toolbar span { display:block; color:#8190a4; font-size:.57rem; font-weight:820; letter-spacing:.08em; text-transform:uppercase; }
.ban-record-toolbar strong { display:block; margin-top:3px; color:#2c466c; font-size:.74rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ban-record-toolbar > div:last-child { text-align:right; }
.ban-record-toolbar > div:last-child span { max-width:340px; text-transform:none; letter-spacing:0; font-weight:650; }
.ban-record-toolbar a { display:inline-block; margin-top:4px; color:#2d5d98; font-size:.68rem; font-weight:800; text-decoration:none; }
.ban-record-toolbar a:hover { text-decoration:underline; }

.support-checklist-card { margin-top:14px; }
.support-checklist-title { display:flex; gap:10px; align-items:flex-start; }
.support-checklist-title > span { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border:1px solid #b7d8c2; border-radius:8px; color:#18714a; background:#eef9f2; }
.support-checklist-title svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.support-checklist-title h3 { margin:3px 0 0; color:#23354e; font-size:.84rem; }
.support-checklist-card ul { display:grid; gap:8px; margin:15px 0 0; padding:0; list-style:none; }
.support-checklist-card li { position:relative; padding-left:18px; color:#63738a; font-size:.7rem; line-height:1.45; }
.support-checklist-card li::before { content:'✓'; position:absolute; left:0; top:0; color:#24794f; font-weight:900; }

/* Higher signal presentation for existing pages. */
.customer-page-heading { position:relative; overflow:hidden; padding:5px 0 2px; }
.customer-page-heading::after { content:''; position:absolute; width:230px; height:230px; right:-122px; top:-135px; border:1px solid #dae6f5; border-radius:50%; pointer-events:none; }
.customer-page-heading h1 { max-width:690px; color:#172d4b; letter-spacing:-.045em; }
.customer-stat-card { position:relative; overflow:hidden; border-color:#dfe7f0; box-shadow:0 4px 14px rgba(19,42,73,.035); }
.customer-stat-card::after { content:''; position:absolute; right:-14px; bottom:-22px; width:76px; height:76px; border:1px solid #e4ebf4; border-radius:50%; }
.customer-section-card, .support-card, .ban-record-card, .server-license-card { border-color:#dde6f0; box-shadow:0 5px 16px rgba(19,42,73,.035); }
.customer-access-item:hover, .customer-recent-ticket:hover, .support-ticket-row:hover, .ban-queue-row:hover { transform:translateX(2px); }
.customer-access-item, .customer-recent-ticket, .support-ticket-row, .ban-queue-row { transition:transform .14s ease,border-color .14s ease,background .14s ease; }
.customer-security-summary-card, .customer-passkey-section, .customer-profile-grid .customer-section-card { border-color:#dce6f1; }
.activity-log-card { border-color:#dce6f1; }
.activity-log-row { border-radius:10px; }

html[data-theme="dark"] .customer-operations-command { border-color:#29415e; background:#111f31; box-shadow:none; }
html[data-theme="dark"] .customer-operations-command h2, html[data-theme="dark"] .customer-operation-signal strong, html[data-theme="dark"] .customer-readiness-card-head h2, html[data-theme="dark"] .server-fleet-health-head h2, html[data-theme="dark"] .server-deck-action strong, html[data-theme="dark"] .ban-operations-strip strong, html[data-theme="dark"] .support-checklist-title h3 { color:#edf4ff; }
html[data-theme="dark"] .customer-operations-command p:not(.customer-kicker), html[data-theme="dark"] .customer-readiness-card p, html[data-theme="dark"] .server-fleet-health-head p:not(.customer-kicker), html[data-theme="dark"] .ban-operations-strip small { color:#9eb0c8; }
html[data-theme="dark"] .customer-operations-command-icon, html[data-theme="dark"] .customer-operation-signal, html[data-theme="dark"] .customer-operation-signal-icon, html[data-theme="dark"] .customer-readiness-card, html[data-theme="dark"] .customer-readiness-icon, html[data-theme="dark"] .server-fleet-health-card, html[data-theme="dark"] .server-fleet-health-head > strong, html[data-theme="dark"] .server-deck-action, html[data-theme="dark"] .server-deck-action > span, html[data-theme="dark"] .server-card-workbench a, html[data-theme="dark"] .ban-operations-strip, html[data-theme="dark"] .ban-operations-icon, html[data-theme="dark"] .ban-record-toolbar, html[data-theme="dark"] .support-checklist-title > span { border-color:#304760; background:#111e2f; }
html[data-theme="dark"] .customer-operation-signal:hover, html[data-theme="dark"] .server-deck-action:hover, html[data-theme="dark"] .server-card-workbench a:hover { border-color:#628bc4; background:#162a43; }
html[data-theme="dark"] .customer-operation-signal small, html[data-theme="dark"] .customer-operation-signal b, html[data-theme="dark"] .customer-readiness-meta span, html[data-theme="dark"] .server-fleet-health-meta span, html[data-theme="dark"] .ban-record-toolbar span { color:#9eafc5; background:#152439; border-color:#31465e; }
html[data-theme="dark"] .customer-readiness-card-security { background:#101f32; }
html[data-theme="dark"] .customer-readiness-progress, html[data-theme="dark"] .server-fleet-health-bar { background:#24354b; }
html[data-theme="dark"] .ban-record-toolbar strong { color:#b7d0f6; }
html[data-theme="dark"] .ban-record-toolbar a { color:#9ec4fb; }
html[data-theme="dark"] .customer-page-heading h1 { color:#edf5ff; }
html[data-theme="dark"] .customer-stat-card::after { border-color:#2a405c; }

@media (max-width:1100px) {
  .customer-operations-command { grid-template-columns:1fr; }
  .customer-operations-command-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .customer-readiness-grid { grid-template-columns:1fr; }
  .customer-readiness-card { min-height:0; }
  .server-command-deck { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .customer-operations-command { padding:13px; border-radius:11px; }
  .customer-operations-command-actions { grid-template-columns:1fr; }
  .customer-operation-signal { grid-template-columns:30px minmax(0,1fr) 12px; }
  .server-fleet-health-head, .ban-operations-strip, .ban-record-toolbar { align-items:flex-start; flex-direction:column; }
  .ban-operations-actions { justify-content:flex-start; }
  .ban-record-toolbar > div:last-child { text-align:left; }
  .server-deck-action { min-height:62px; }
}


/* ============================================================
   V4.5 Customer Reports Desk
   Dense operational workspace for in-game player reports.
   ============================================================ */
.customer-reports-shell .reports-desk-main{max-width:1680px}
.reports-desk-topbar{align-items:flex-start}
.reports-server-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid var(--border);background:var(--panel);border-radius:18px;margin-bottom:18px}
.reports-server-title{display:flex;align-items:center;gap:12px;min-width:0}.reports-server-title>div{display:grid;gap:2px}.reports-server-title strong{font-size:1rem}.reports-server-title small{color:var(--muted);font-size:.78rem}.reports-server-title .eyebrow{margin:0;font-size:.64rem}
.reports-server-switcher label{display:grid;gap:6px;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.reports-server-switcher select{min-width:260px}
.reports-metrics{margin-bottom:18px}
.report-security-gate{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:3px solid var(--accent);margin-bottom:18px}.report-security-gate h2{margin:.2rem 0 .35rem}.report-security-gate p{margin:0}
.report-security-form{display:flex;align-items:end;gap:10px}.report-security-form label{min-width:235px;display:grid;gap:6px;font-size:.77rem;font-weight:700}.report-security-form input{min-width:0}
.reports-filter-panel{padding:14px 16px;margin-bottom:18px}.reports-filter-form{display:grid;grid-template-columns:minmax(200px,1.35fr) minmax(130px,.7fr) minmax(130px,.7fr) auto;gap:12px;align-items:end}.reports-filter-form label{display:grid;gap:6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted)}.reports-filter-actions{display:flex;align-items:center;gap:12px;min-height:40px}
.reports-workspace{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:18px;align-items:start}
.reports-list-panel,.reports-dossier{background:var(--panel);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.reports-list-heading{padding:17px 18px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.reports-list-heading h2{margin:2px 0 0;font-size:1.05rem}.reports-list-heading .eyebrow{margin:0}
.reports-live-indicator{font-size:.72rem;color:var(--muted);display:flex;gap:7px;align-items:center}.reports-live-indicator i{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}.reports-live-indicator.is-new{color:var(--text);font-weight:700}.reports-live-indicator.is-new i{background:#ffbd59}
.reports-list{max-height:720px;overflow:auto;display:grid}.report-row{display:grid;gap:7px;padding:15px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background .16s ease,box-shadow .16s ease}.report-row:hover{background:var(--surface-hover)}.report-row.active{background:color-mix(in srgb,var(--accent) 11%,var(--panel));box-shadow:inset 3px 0 0 var(--accent)}.report-row-top,.report-row-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.report-row code{font-size:.72rem;color:var(--muted)}.report-row strong{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-row p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.45}.report-row-meta{font-size:.68rem;color:var(--muted)}.report-priority,.report-status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-weight:800;font-size:.62rem;letter-spacing:.05em;border:1px solid transparent}.report-priority.low{color:#8bc6ff;background:color-mix(in srgb,#8bc6ff 13%,transparent);border-color:color-mix(in srgb,#8bc6ff 25%,transparent)}.report-priority.normal{color:#b9c3d3;background:color-mix(in srgb,#b9c3d3 12%,transparent);border-color:color-mix(in srgb,#b9c3d3 22%,transparent)}.report-priority.high{color:#ffbc68;background:color-mix(in srgb,#ffbc68 13%,transparent);border-color:color-mix(in srgb,#ffbc68 26%,transparent)}.report-priority.urgent{color:#ff7777;background:color-mix(in srgb,#ff7777 13%,transparent);border-color:color-mix(in srgb,#ff7777 28%,transparent)}.report-status.open{color:#8bc6ff}.report-status.claimed,.report-status.in_progress{color:#c6a6ff}.report-status.resolved,.report-status.closed{color:#79d89e}
.reports-dossier{min-height:600px}.reports-dossier-header{display:flex;justify-content:space-between;gap:22px;padding:23px 24px;border-bottom:1px solid var(--border);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel) 62%)}.reports-dossier-header h2{font-size:1.25rem;text-transform:capitalize;margin:11px 0 6px}.reports-dossier-header p{margin:0;max-width:760px;color:var(--muted);white-space:pre-wrap}.dossier-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.dossier-badges code{font-size:.72rem;color:var(--muted);padding:4px 7px;border:1px solid var(--border);border-radius:8px}.dossier-time{display:grid;align-content:start;gap:4px;min-width:135px;color:var(--muted);font-size:.72rem}.dossier-time strong{font-size:.79rem;color:var(--text);font-weight:700}
.report-identity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border-bottom:1px solid var(--border)}.report-identity-grid article{display:grid;gap:5px;padding:16px;background:var(--panel)}.report-identity-grid span{font-size:.65rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.report-identity-grid strong{font-size:.85rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.report-identity-grid code,.report-identity-grid small{font-size:.68rem;color:var(--muted);word-break:break-all}
.report-evidence-note{margin:18px 22px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,#ffbc68 7%,var(--panel));border:1px solid color-mix(in srgb,#ffbc68 20%,var(--border))}.report-evidence-note .eyebrow{margin:0 0 6px;color:#d69b4c}.report-evidence-note p:last-child{margin:0;font-size:.85rem;line-height:1.5;color:var(--text)}
.report-actions-panel{margin:0 22px 22px;padding:18px;border:1px solid var(--border);background:var(--surface);border-radius:16px}.report-actions-panel .panel-heading{margin-bottom:14px}.report-actions-panel h2{margin:.2rem 0 .35rem;font-size:1rem}.report-actions-panel p{margin:0}.report-action-grid{display:grid;grid-template-columns:auto minmax(190px,1fr) minmax(210px,1fr);gap:10px;align-items:end}.report-mini-action,.report-inline-action{display:flex;align-items:end;gap:8px}.report-inline-action label{display:grid;gap:5px;font-size:.68rem;text-transform:uppercase;font-weight:800;letter-spacing:.07em;color:var(--muted);flex:1}.report-inline-action select{width:100%}.report-note-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin-top:14px}.report-note-form label{display:grid;gap:6px;font-size:.7rem;text-transform:uppercase;font-weight:800;letter-spacing:.07em;color:var(--muted)}.report-note-form textarea{min-height:74px;resize:vertical}
.report-timeline-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 22px 24px}.report-timeline-card{border:1px solid var(--border);border-radius:16px;padding:16px;min-width:0}.report-timeline-card h2{font-size:.95rem;margin:.2rem 0}.report-timeline{display:grid;gap:12px;max-height:305px;overflow:auto;padding-right:3px}.report-timeline>div{display:grid;grid-template-columns:12px 1fr;gap:8px}.report-timeline>div>span{width:8px;height:8px;margin-top:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}.report-timeline p{display:grid;gap:3px;margin:0;font-size:.79rem}.report-timeline small{font-size:.68rem;color:var(--muted)}.reports-list-empty,.reports-empty-dossier{padding:42px 24px;color:var(--muted);text-align:center}.reports-list-empty strong{color:var(--text);display:block;margin-bottom:5px}.reports-list-empty p,.reports-empty-dossier p{margin:.35rem 0 0}.reports-empty-dossier{display:grid;place-content:center;min-height:600px}.reports-empty-dossier h2{color:var(--text);margin:.2rem 0}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1180px){.reports-workspace{grid-template-columns:320px minmax(0,1fr)}.report-identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-action-grid{grid-template-columns:1fr}.report-inline-action{max-width:100%}}
@media(max-width:860px){.reports-server-strip,.report-security-gate{align-items:flex-start;flex-direction:column}.reports-server-switcher{width:100%}.reports-server-switcher select{width:100%;min-width:0}.reports-filter-form{grid-template-columns:1fr 1fr}.reports-filter-form>label:first-of-type{grid-column:1/-1}.reports-workspace{grid-template-columns:1fr}.reports-list{max-height:380px}.report-timeline-grid{grid-template-columns:1fr}.reports-dossier-header{padding:19px}.dossier-time{display:none}.report-note-form{grid-template-columns:1fr}.report-note-form button{justify-self:start}}
@media(max-width:560px){.reports-filter-form{grid-template-columns:1fr}.report-identity-grid{grid-template-columns:1fr}.reports-dossier-header,.report-actions-panel{margin-left:0;margin-right:0;border-radius:0}.report-actions-panel{border-left:0;border-right:0}.report-timeline-grid{padding-left:0;padding-right:0}.report-timeline-card{border-radius:0;border-left:0;border-right:0}.report-security-form{width:100%;flex-direction:column;align-items:stretch}.report-security-form label{min-width:0}.reports-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.report-status-note{display:grid;gap:5px;font-size:.68rem;text-transform:uppercase;font-weight:800;letter-spacing:.07em;color:var(--muted);flex:1}.report-status-note small{font-size:.62rem;text-transform:none;letter-spacing:0;font-weight:600}.report-status-note input{width:100%}


/* ========================================================================== 
   ACGX Portal v4.5.3 — Staff sidebar repair and owner operations refinement
   Prevents staff navigation from flowing behind fleet controls, and improves
   the readability of high-priority staff/owner information in a compact area.
   ========================================================================== */
.portal-sidebar {
  align-items: stretch;
}
.portal-sidebar-nav {
  flex: 0 0 auto;
  width: 100%;
  min-height: max-content;
}
.portal-sidebar-operations-card {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 14px 4px 10px !important;
  overflow: hidden;
}
.portal-sidebar-footer {
  flex: 0 0 auto;
  width: auto;
  margin-top: auto;
}
.portal-sidebar-staff .portal-nav-group {
  padding: 9px 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(11, 20, 35, .34);
}
.portal-sidebar-staff .portal-nav-group + .portal-nav-group {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(147, 166, 194, .13);
}
.portal-sidebar-staff .portal-nav-group:has(.portal-staff-desk-note) {
  border-color: rgba(143, 123, 215, .30);
  background: rgba(65, 53, 112, .18);
}
.portal-sidebar-staff .portal-nav-group:has(.portal-owner-scope-note) {
  border-color: rgba(142, 164, 206, .24);
  background: rgba(25, 43, 68, .36);
}
.portal-sidebar-staff .portal-nav-group-toggle {
  min-height: 27px;
  padding-inline: 5px;
  color: #a2b4d0;
}
.portal-sidebar-staff .portal-nav-group:has(.portal-staff-desk-note) .portal-nav-group-toggle {
  color: #cfc3ff;
}
.portal-sidebar-staff .portal-nav-group-panel {
  gap: 5px;
}
.portal-sidebar-group-note {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0 2px 3px;
  padding: 8px 9px;
  border-left: 2px solid #506888;
  border-radius: 5px;
  background: rgba(12, 24, 41, .52);
}
.portal-sidebar-group-note span {
  color: #8ea3c2;
  font-size: .58rem;
  font-weight: 820;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.portal-sidebar-group-note strong {
  overflow: hidden;
  color: #e8f0ff;
  font-size: .70rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-staff-desk-note { border-left-color: #9f8cf1; }
.portal-owner-scope-note { border-left-color: #86b6ee; }
.portal-sidebar-staff .portal-nav-link {
  min-height: 40px;
  padding-block: 8px;
}
.portal-sidebar-staff .portal-nav-link .portal-nav-tag {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-operations-card {
  gap: 10px;
  padding: 12px;
  border-color: #344b6d;
  background: #101f34;
}
.staff-operations-card .portal-sidebar-operations-heading {
  min-width: 0;
}
.staff-operations-card .portal-sidebar-operations-heading em {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid rgba(93, 209, 152, .34);
  border-radius: 5px;
  color: #8fe6b8;
  background: rgba(26, 103, 67, .25);
  font-size: .55rem;
  font-style: normal;
  font-weight: 840;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}
.portal-staff-fleet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.portal-staff-fleet-grid > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(101, 134, 181, .24);
  border-radius: 7px;
  background: rgba(7, 18, 33, .46);
}
.portal-staff-fleet-grid span,
.portal-staff-fleet-grid small {
  overflow: hidden;
  color: #91a5c1;
  font-size: .57rem;
  font-weight: 760;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-staff-fleet-grid span { letter-spacing: .05em; text-transform: uppercase; }
.portal-staff-fleet-grid strong {
  color: #f0f6ff;
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1;
}
.staff-operations-card > a {
  min-height: 34px;
  margin-top: 0;
  border-color: #486997;
  border-radius: 7px;
  color: #e6efff;
  background: #173153;
}
.staff-operations-card > a:hover { border-color: #79a3e1; background: #1b3c67; }
@media (min-width: 981px) {
  body.sidebar-compact .portal-sidebar-group-note { display: none; }
}
@media (max-width: 980px) {
  .portal-sidebar-footer { margin-top: 14px; }
}


/* Official Discord Bot connection & staff desk */
.discord-connection-shell .portal-main, .discord-desk-shell .portal-main { max-width: 1380px; }
.discord-connection-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:18px; margin:20px 0; }
.discord-connection-card { min-height:280px; padding:28px; position:relative; overflow:hidden; }
.discord-connection-card h2 { margin:8px 0 10px; font-size:1.45rem; }
.discord-connection-card p { max-width:62ch; }
.discord-card-icon { width:46px; height:46px; display:grid; place-items:center; border:1px solid #4f46e5; border-radius:14px; color:#c4b5fd; background:#1a153b; font-size:1.35rem; margin-bottom:20px; }
.discord-status-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:22px 0; }
.discord-status-list div { padding:12px; border:1px solid #253753; background:#0e1928; border-radius:10px; }
.discord-status-list dt { color:#8ca4c5; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.discord-status-list dd { margin:5px 0 0; color:#eff6ff; font-weight:700; font-size:.85rem; }
.discord-link-steps { margin:16px 0; padding-left:20px; display:grid; gap:11px; color:#d3deed; line-height:1.55; }
.discord-link-code-card { display:flex; align-items:center; gap:24px; justify-content:space-between; padding:24px 28px; border-color:#4f46e5; background:linear-gradient(125deg,#111b32,#18143a); }
.discord-link-code { display:block; flex:0 0 auto; font-size:1.45rem; font-weight:900; letter-spacing:.08em; color:#ede9fe; padding:16px 20px; border:1px solid #6d5de7; border-radius:12px; background:#0a1020; user-select:all; }
.discord-features-card { margin-top:18px; padding:24px 28px; }
.discord-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.discord-feature-grid div { padding:16px; border:1px solid #243a58; border-radius:12px; background:#0c1726; min-height:112px; }
.discord-feature-grid strong { display:block; color:#f4f7ff; margin-bottom:8px; }
.discord-feature-grid span { display:block; color:#9eb1c9; line-height:1.45; font-size:.84rem; }
.discord-desk-metrics { margin-bottom:18px; }
.discord-desk-card { padding:0; overflow:hidden; }
.discord-desk-card .staff-toolbar { padding:16px 18px; border-bottom:1px solid #233752; }
.discord-desk-list { display:grid; }
.discord-desk-row { display:flex; gap:18px; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #1d3049; }
.discord-desk-row:last-child { border-bottom:0; }
.discord-desk-row-main { min-width:0; display:grid; gap:5px; }
.discord-desk-row-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discord-desk-row-main small { color:#9cb1cb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discord-desk-row-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; color:#92a7c0; font-size:.76rem; }
@media (max-width: 900px) { .discord-connection-grid { grid-template-columns:1fr; } .discord-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .discord-link-code-card { align-items:flex-start; flex-direction:column; } }
@media (max-width: 560px) { .discord-feature-grid { grid-template-columns:1fr; } .discord-status-list { grid-template-columns:1fr; } .discord-link-code { font-size:1rem; width:100%; overflow:auto; } .discord-desk-row { align-items:flex-start; flex-direction:column; } .discord-desk-row-meta { justify-content:flex-start; } }


/* Discord connection hotfix v4.7.1 ---------------------------------------- */
.discord-link-form { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.discord-generate-code-button { min-height: 46px; padding: 0 18px; border-radius: 12px; font-size: .82rem; font-weight: 850; letter-spacing: .01em; box-shadow: 0 12px 28px rgba(79,70,229,.22); }
.discord-generate-code-button::before { content: '🔐'; font-size: .92rem; }
.discord-setup-warning { margin-top: 20px; display: grid; gap: 7px; padding: 14px 15px; border: 1px solid #74491f; border-radius: 12px; color: #ffe2ac; background: linear-gradient(135deg, rgba(116,73,31,.32), rgba(41,26,14,.45)); }
.discord-setup-warning span { display: block; color: #d7c6a8; font-size: .78rem; line-height: 1.55; }
.discord-link-code-card-top { margin: 18px 0 22px; flex-wrap: wrap; align-items: center; }
.discord-code-copy-stack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.discord-copy-code-button { min-height: 42px; white-space: nowrap; }
.primary-button { text-decoration: none; white-space: nowrap; cursor: pointer; }
@media (max-width: 640px) { .discord-link-form, .discord-code-copy-stack { width: 100%; } .discord-generate-code-button, .discord-copy-code-button { width: 100%; } }