/* MASKPROXY identity: one lockup and accent system, with accessible surface variants. */
@font-face{font-family:Inter;src:url('/static/fonts/inter-variable.ttf') format('truetype');font-weight:100 900;font-display:optional}
@font-face{font-family:Plex;src:url('/static/fonts/plex-arabic-regular.ttf') format('truetype');font-weight:400;font-display:optional}
@font-face{font-family:Plex;src:url('/static/fonts/plex-arabic-semibold.ttf') format('truetype');font-weight:600 800;font-display:optional}
html[dir]:root{--brand-paper:#f7f8f4;--brand-ink:#202735;--brand-primary:#263449;--brand-primary-hover:#34445d;--brand-purple:#6350df;--brand-purple-hover:#5140c2;--brand-lime:#93c5fd;--brand-soft:#eeebff;--brand-muted:#626a76;--brand-line:#dde0da;--purple:var(--brand-purple);--purple-soft:var(--brand-soft);--mp-teal:var(--brand-primary);--accent:var(--brand-purple);--accent-soft:var(--brand-soft)}
html[dir] body{font-family:Inter,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
html[dir=rtl] body{font-family:Plex,'Segoe UI',sans-serif}
html[dir] body :is(button,input,select,textarea){font-family:inherit}
html[dir] body .mp-brand{display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:row;gap:10px;direction:ltr;unicode-bidi:isolate;flex-shrink:0;width:max-content;max-width:100%;font:750 24px/1 Inter,'Segoe UI',sans-serif;letter-spacing:-1px;color:var(--brand-ink);text-decoration:none;white-space:nowrap}
html[dir] body .mp-brand-mark{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border-radius:11px;background:var(--brand-ink);color:var(--brand-lime);box-shadow:none}
html[dir] body .mp-brand-mark svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:none}
html[dir] body .mp-brand-name{display:inline;direction:ltr;font:inherit;color:inherit;letter-spacing:inherit}
html[dir] body .mp-brand-dot{display:inline;color:var(--brand-purple);font:inherit}
html[dir] body .mp-brand-caption{display:block;margin:12px 0 20px;font-size:11px;font-weight:500;color:var(--brand-muted);letter-spacing:.04em}

/* One light console. Shared tokens own surfaces, controls and semantic states. */
html[dir]:root {
  color-scheme: light;
  --bg:#f5f7fa; --canvas:#f5f7fa; --paper:#fff; --white:#fff;
  --ink:#263341; --muted:#647487; --line:#dbe3ec; --navy:#f8fafc;
  --accent:#2f6fec; --accent-strong:#2458c9; --accent-soft:#eaf2ff;
  --purple:var(--accent); --purple-soft:var(--accent-soft); --green:#2f7a56;
  --danger:#ac3e3e; --shadow:none; --shadow-soft:0 8px 24px #263b4d08;
  --mp-bg:var(--canvas); --mp-panel:var(--paper); --mp-ink:var(--ink);
  --mp-muted:var(--muted); --mp-line:var(--line); --mp-teal:var(--accent);
  --mp-blue:var(--accent); --mp-blue-soft:var(--accent-soft);
  --brand-paper:var(--canvas); --brand-ink:#263341; --brand-lime:#93c5fd;
  --brand-primary:#2563eb; --brand-primary-hover:#1d4ed8;
  --brand-purple:var(--accent); --brand-purple-hover:var(--accent-strong);
  --brand-soft:var(--accent-soft); --brand-line:var(--line); --brand-muted:var(--muted);
  --control:#fff; --control-hover:#f1f5f9; --control-border:#cbd5e1;
  --sidebar-width:246px;
}
html[dir] body:is(.brand-workspace,.brand-portal) {
  background:var(--canvas)!important; color:var(--ink); font-size:14px; line-height:1.65;
}
html[dir] body.brand-workspace .workspace {background:var(--canvas); min-width:0; min-height:100dvh}
html[dir] body.brand-workspace .page-content {max-width:1740px; padding:28px 32px 32px}
html[dir] body:is(.brand-workspace,.brand-portal) :is(h1,h2,h3,h4,strong) {color:var(--ink)}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.muted,.eyebrow,.proxy-owner,.cell-stack small) {color:var(--muted)}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.mono,code) {color:var(--ink)}

/* Navigation belongs to the same surface family as the rest of the console. */
html[dir] body.brand-workspace .sidebar {
  background:#f8fafc; color:var(--ink); border-color:var(--line); box-shadow:none; padding:26px 18px 18px;
}
html[dir] body.brand-workspace .sidebar .mp-brand {font-size:23px; gap:9px}
html[dir] body.brand-workspace .workspace-switch {
  background:#f1f5f9; border:1px solid #dde6ef; border-radius:9px; color:var(--ink); margin:26px 0 24px; padding:12px;
}
html[dir] body.brand-workspace :is(.workspace-avatar,.admin-avatar,.top-avatar) {
  background:#e8eef4; color:#4f6579; border:1px solid #d5e0ea; border-radius:9px;
}
html[dir] body.brand-workspace :is(.workspace-switch small,.sidebar-foot small,.nav-label,.sidebar-support) {color:var(--muted)}
html[dir] body.brand-workspace .sidebar .nav {
  background:transparent; color:#596b7d; border:0; border-inline-start:3px solid transparent;
  border-radius:8px; font-size:13px; padding:12px 11px; gap:11px; min-height:46px; text-align:start; white-space:normal;
}
html[dir] body.brand-workspace .sidebar .nav:hover {background:#eef3f7; color:var(--ink)}
html[dir] body.brand-workspace .sidebar .nav.active {
  background:#e5edf4; color:#3e5870; border-inline-start-color:#7f9bb4; box-shadow:none; font-weight:650;
}
html[dir] body.brand-workspace .sidebar .nav.active .icon {color:#56738c}
html[dir] body.brand-workspace .nav-count {background:#dde8f1; color:#456279; border:0}
html[dir] body.brand-workspace .sidebar-foot {color:var(--ink); border-color:var(--line); gap:10px}
html[dir] body.brand-workspace .sidebar-download {
  background:transparent; color:#5b6f82; border:1px solid #d2dce6; border-radius:8px; min-height:43px;
}
html[dir] body.brand-workspace .sidebar-support {font-size:12px; text-align:start}
html[dir] body.brand-workspace .topbar {
  height:66px; background:#f8fafc; color:var(--muted); border-color:var(--line); padding-inline:32px;
}
html[dir] body.brand-workspace :is(.breadcrumb,.breadcrumb strong,.update-label) {color:var(--muted); font-size:12px}
html[dir] body.brand-workspace .breadcrumb strong {color:var(--ink); font-weight:600}
html[dir] body.brand-workspace .separator {color:#aeb9c9}
html[dir] body.brand-workspace .topbar-end {gap:12px; min-width:0}
html[dir] body.brand-workspace .workspace-live {
  background:#ebf3ec; border:1px solid #d0e2d2; color:#2d6941; border-radius:6px; font-size:11px;
}
html[dir] body.brand-workspace .workspace-live::before {background:#3f8a55}
html[dir] body.brand-workspace .workspace-live[data-state=pending] {background:#f0f2ed; border-color:var(--line); color:var(--muted)}
html[dir] body.brand-workspace .workspace-live[data-state=failed] {background:#fcf3e4; border-color:#e9d5ad; color:#85601c}

/* Three levels: solid primary, outlined secondary, unboxed utility. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(button,.button) {
  background:var(--control); border:1px solid var(--control-border); color:#425466;
  border-radius:7px; min-height:38px; padding:8px 13px; font-size:12px; font-weight:600;
  box-shadow:none; transition:background .15s,border-color .15s,color .15s; transform:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(button,.button):hover {
  background:var(--control-hover); border-color:#a9b9c8; color:var(--ink); box-shadow:none; transform:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.primary,.support-primary,.support-launcher) {
  background:var(--brand-primary); border-color:var(--brand-primary); color:#fff;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.primary,.support-primary,.support-launcher):hover {
  background:var(--brand-primary-hover); border-color:var(--brand-primary-hover); color:#fff;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.link-button,.fleet-sort,.workspace-plan-action,.back-link) {
  background:transparent; color:var(--accent-strong); border:0; border-radius:4px; min-height:0; padding:0; box-shadow:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.link-button,.fleet-sort,.workspace-plan-action,.back-link):hover {
  background:transparent; color:#2e4a60; border-color:transparent; text-decoration:underline; text-underline-offset:4px;
}
html[dir] body:is(.brand-workspace,.brand-portal) .icon-button {
  background:transparent!important; color:#637485!important; border:1px solid transparent!important;
  width:36px; height:36px; min-height:36px; padding:7px; border-radius:7px; box-shadow:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) .icon-button:hover {
  background:#edf2f6!important; color:#435e73!important; border-color:#cbd8e3!important;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.danger,button.danger) {
  background:#fff7f5; color:#a33c3a; border-color:#e8c7c1;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.danger,button.danger):hover {
  background:#fbece7; color:#8c2f2d; border-color:#d8a69d;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(button,.button):disabled {
  background:#eef2f6!important; color:#8491a0!important; border-color:#d9e1e9!important;
  opacity:1; cursor:not-allowed; box-shadow:none; text-decoration:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(a,button,input,select,textarea,summary):focus-visible {
  outline:3px solid #8ca6bd; outline-offset:3px;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(input,select,textarea) {
  color:var(--ink); background:#fff; border-color:var(--control-border); border-radius:7px; box-shadow:none; color-scheme:light;
}
html[dir] body:is(.brand-workspace,.brand-portal) input[readonly] {background:#f4f7fa}
html[dir] body:is(.brand-workspace,.brand-portal) :is(input,textarea)::placeholder {color:#7a8795; opacity:1}
html[dir] body:is(.brand-workspace,.brand-portal) :is(input,select,textarea):focus {border-color:#8aa2b8}
html[dir] body:is(.brand-workspace,.brand-portal) label {color:#536273}
html[dir] body:is(.brand-workspace,.brand-portal) label small {color:var(--muted)}
html[dir] body:is(.brand-workspace,.brand-portal) input[type=checkbox] {accent-color:#2f6fec}

/* Inventory: compact title and summaries, then the user's working list. */
html[dir] body.brand-workspace .workspace-intro {padding:0; gap:24px; margin:0 0 24px; align-items:center}
html[dir] body.brand-workspace .workspace-kicker {display:none}
html[dir] body.brand-workspace .workspace-intro h1 {color:var(--ink); font-size:27px; margin:0 0 6px; letter-spacing:-.6px}
html[dir] body.brand-workspace .workspace-intro p {color:var(--muted); font-size:12px; line-height:1.8; max-width:610px}
html[dir] body.brand-workspace .workspace-identity {margin-top:10px; gap:8px}
html[dir] body.brand-workspace .workspace-email {color:var(--muted); font-size:11px}
html[dir] body.brand-workspace .workspace-customer-code {background:#eef3f7; color:#506678; border-color:#d7e1ea; font-size:10px}
html[dir] body.brand-workspace .workspace-verification {background:#f9f2df; color:#866725; border-color:#e9dbb3; font-size:10px}
html[dir] body.brand-workspace .workspace-verification.verified {background:#edf4ea; color:#46713e; border-color:#d6e4cf}
html[dir] body.brand-workspace .workspace-intro-actions {flex-shrink:0; max-width:none}
html[dir] body.brand-workspace .workspace-intro-actions .primary {min-height:42px; padding-inline:18px; font-size:13px}
html[dir] body.brand-workspace .page-heading {min-height:0; padding:0; margin:0 0 24px; border:0; background:transparent; box-shadow:none}
html[dir] body.brand-workspace .page-heading h1 {color:var(--ink); font-size:27px}
html[dir] body.brand-workspace .page-heading p {color:var(--muted); font-size:13px}
html[dir] body.brand-workspace .fleet-stats {gap:0; padding:0; background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:24px; overflow:hidden}
html[dir] body.brand-workspace .fleet-stats .fleet-stat {
  background:transparent; border:0; border-inline-end:1px solid var(--line); border-radius:0; padding:15px 20px;
}
html[dir] body.brand-workspace .fleet-stats .fleet-stat:last-child {border-inline-end:0}
html[dir] body.brand-workspace .fleet-stat::before {display:none}
html[dir] body.brand-workspace .fleet-stat-label {font-size:11px; color:var(--muted)}
html[dir] body.brand-workspace .fleet-stat-label .icon {color:#7d91a4; width:15px; height:15px}
html[dir] body.brand-workspace .fleet-stat-value {margin-top:7px}
html[dir] body.brand-workspace .fleet-stat-value strong {font-size:25px; font-weight:650; color:var(--ink)}
html[dir] body.brand-workspace .fleet-stat-value small {color:var(--muted); font-size:12px}
html[dir] body.brand-workspace .fleet-stat-note {font-size:10px; color:var(--muted); margin-top:4px}
html[dir] body.brand-workspace .fleet-stat-note.online-note {color:#43713c}

html[dir] body:is(.brand-workspace,.brand-portal) :is(.panel,.relay-card,.access-card,.api-key-card,.action-card,.integration-bridge,.phone-card,.metric,.billing-plan,.billing-phone-card,.billing-wallet) {
  background:#fff; border-color:var(--line); border-radius:10px; box-shadow:none; color:var(--ink);
}
html[dir] body.brand-workspace .fleet-panel {overflow:visible; border-color:var(--line)}
html[dir] body.brand-workspace .fleet-panel-heading {padding:20px 22px; border-color:var(--line)}
html[dir] body.brand-workspace .fleet-panel-heading h2 {font-size:16px}
html[dir] body.brand-workspace .fleet-panel-heading p {font-size:12px; color:var(--muted); margin-top:3px}
html[dir] body.brand-workspace .filter-bar {background:#fff; border:0; border-block:1px solid var(--line); border-radius:0; padding:14px 22px; gap:10px}
html[dir] body.brand-workspace .filter-bar :is(.search-input,select,.filter-more>summary) {
  background:#f8fafc; border-color:var(--control-border); color:#4b5c6b; border-radius:7px; min-height:40px;
}
html[dir] body.brand-workspace .filter-bar .search-input input {background:transparent; border:0; box-shadow:none; font-size:12px}
html[dir] body.brand-workspace .fleet-controls {background:#fafcff; border:0; border-bottom:1px solid var(--line); padding:9px 22px; gap:8px}
html[dir] body.brand-workspace .fleet-controls :is(select,summary) {background:transparent; color:var(--muted); border-color:#d6e0e9; border-radius:5px; font-size:11px; min-height:30px}
html[dir] body.brand-workspace .fleet-totals {color:var(--muted); font-size:11px}
html[dir] body.brand-workspace .fleet-totals strong {font-size:11px; color:#4b5d6d}
html[dir] body.brand-workspace :is(.fleet-column-options,.filter-more-body) {background:#fff; border-color:#d5e0e9; color:var(--ink); box-shadow:0 12px 32px #263d4a12}
html[dir] body.brand-workspace .view-switch {background:#f1f5f9; border-color:#dbe4ed; border-radius:7px}
html[dir] body.brand-workspace :is(.view-switch .active,.view-switch button[aria-pressed=true]) {background:#e2ebf3!important; color:#45657d!important; border-color:transparent!important}
html[dir] body.brand-workspace .fleet-scroll {background:#fff; border:0; padding:0 14px; border-radius:0; container-type:inline-size}
html[dir] body.brand-workspace .fleet-table {border-collapse:collapse; border-spacing:0; background:transparent; margin:0; min-width:0; width:100%}
html[dir] body.brand-workspace .fleet-table th {background:#fff; color:#68798a; border-color:var(--line); padding-block:14px; font-size:11px}
html[dir] body.brand-workspace .fleet-table .fleet-sort {font:inherit; color:inherit; background:transparent; border:0; min-height:0; padding:0}
html[dir] body.brand-workspace .fleet-table td {background:#fff; color:#4a5a69; border:0; border-bottom:1px solid #e4eaf2; padding:18px 10px; font-size:12px}
html[dir] body.brand-workspace .fleet-table :is(.fleet-row:hover,.fleet-expanded) td {background:#f3f7fa}
html[dir] body.brand-workspace .fleet-table .fleet-action-cell {background:inherit!important; border-inline:0!important; position:static!important}
html[dir] body.brand-workspace .fleet-table .fleet-name {background:transparent!important; color:#354f65!important; border:0!important; min-height:0; padding:0; font-size:13px; line-height:1.6}
html[dir] body.brand-workspace .fleet-table .link-button {background:transparent; border:0; padding:0; font-size:12px; color:#526b80; min-height:0; text-align:start}
html[dir] body.brand-workspace .fleet-phone-symbol {background:#eef3f7; border-color:#d7e1eb; color:#6e8295}
html[dir] body.brand-workspace .fleet-table .fleet-count {background:#eef3f7!important; color:#4c657b!important; border:1px solid #d7e1eb!important; padding:4px 8px; font-size:11px; min-height:29px}
html[dir] body.brand-workspace .fleet-actions {gap:5px}
html[dir] body.brand-workspace .fleet-actions {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; min-width:0}
html[dir] body.brand-workspace .fleet-actions .fleet-create {background:transparent!important; color:#4c6b84!important; border:1px solid #cbd9e4!important; font-size:11px; padding:7px 9px; min-height:34px; box-shadow:none}
html[dir] body.brand-workspace .fleet-actions .fleet-create:hover {background:#edf3f8!important; border-color:#9ab2c7!important}
@media(min-width:861px) {
  html[dir] body.brand-workspace .fleet-actions .fleet-create {flex:1 1 92px; min-width:0; max-width:132px; padding-inline:6px}
  html[dir] body.brand-workspace .fleet-actions .icon-button {width:32px; min-width:32px; flex:0 0 32px; padding:6px}
  html[dir] body.brand-workspace .fleet-table .fleet-action-cell {padding-inline:4px}
}
html[dir] body.brand-workspace .fleet-pagination {background:#fff; border:0; padding:14px 22px; color:var(--muted); font-size:11px; border-radius:0 0 10px 10px}
html[dir] body.brand-workspace .fleet-pagination :is(button,select) {font-size:11px; min-height:32px}
html[dir] body.brand-workspace :is(.fleet-details,.bulk-bar) {background:#f1f5f9; border-color:#d7e1ea; color:#526779}
html[dir] body.brand-workspace .fleet-details {margin:0; border-radius:8px; padding:20px}
html[dir] body.brand-workspace .fleet-details-row>td {padding:0 0 14px; background:#fff}
html[dir] body.brand-workspace .fleet-health {background:#fff; border-color:var(--line); border-radius:10px}
html[dir] body.brand-workspace :is(.fleet-health summary,.fleet-alert) {color:var(--muted)}

/* Desktop device navigation is a readable rail; it becomes a scrollable row
   only when the page genuinely needs the compact layout. */
@media(min-width:1001px) {
  html[dir] body.brand-workspace .device-layout {grid-template-columns:210px minmax(0,1fr); gap:24px; align-items:start}
  html[dir] body.brand-workspace .device-tabs {display:flex; flex-direction:column; gap:3px; overflow:visible; padding:8px; margin:0; border:1px solid var(--line); border-radius:9px}
  html[dir] body.brand-workspace .device-tabs button {width:100%; min-width:0; white-space:normal; justify-content:flex-start; padding:11px 12px; line-height:1.45}
}
@media(min-width:861px) {
  html[dir] body.brand-workspace .fleet-table {min-width:0!important; width:100%!important; table-layout:fixed}
  html[dir] body.brand-workspace .fleet-table th,
  html[dir] body.brand-workspace .fleet-table td {overflow-wrap:anywhere}
  html[dir] body.brand-workspace .fleet-table th:nth-child(3),html[dir] body.brand-workspace .fleet-table td:nth-child(3) {width:17%}
  html[dir] body.brand-workspace .fleet-table th:nth-child(4),html[dir] body.brand-workspace .fleet-table td:nth-child(4) {width:14%}
  html[dir] body.brand-workspace .fleet-table th:nth-child(5),html[dir] body.brand-workspace .fleet-table td:nth-child(5) {width:11%}
  html[dir] body.brand-workspace .fleet-table th:nth-child(6),html[dir] body.brand-workspace .fleet-table td:nth-child(6) {width:11%}
  html[dir] body.brand-workspace .fleet-table th:nth-child(7),html[dir] body.brand-workspace .fleet-table td:nth-child(7) {width:15%}
  html[dir] body.brand-workspace .fleet-table th:nth-child(8),html[dir] body.brand-workspace .fleet-table td:nth-child(8) {width:10%}
  html[dir] body.brand-workspace .fleet-table th:nth-child(9),html[dir] body.brand-workspace .fleet-table td:nth-child(9) {width:16%}
}

/* Device, proxy and export workspaces use the same materials as inventory. */
html[dir] body.brand-workspace .device-tabs {background:#f8fafc; border-color:var(--line); border-radius:9px}
html[dir] body.brand-workspace .device-tabs button {background:transparent; border:0; color:#607284; text-align:start; font-size:12px}
html[dir] body.brand-workspace .device-tabs button:hover {background:#eef3f7; color:var(--ink)}
html[dir] body.brand-workspace :is(.device-tabs button.active,.device-tabs button[aria-current=page]) {background:#e5eef5; color:#3f5f79; font-weight:650}
html[dir] body.brand-workspace .device-tabs button.active::after {display:none}
html[dir] body.brand-workspace :is(.device-avatar,.square-icon,.relay-icon,.protocol-icon,.metric-icon,.integration-node-icon,.connection-symbol,.workspace-phone-mark) {
  background:#edf3f8; color:#6d8295; border-color:#d8e3ec; box-shadow:none;
}
html[dir] body.brand-workspace :is(.connection-row,.connection-empty,.phone-card) {background:#fff; color:var(--ink); border-color:#dbe4ed; box-shadow:none}
html[dir] body.brand-workspace .connection-row::before {background:#7da5ed}
html[dir] body.brand-workspace :is(.connection-name,.fleet-name) {color:#3e596b}
html[dir] body.brand-workspace .connection-endpoint {background:#f6f8fb; color:#415465; border-color:#d8e2eb; padding:10px 12px; font-size:12px}
html[dir] body.brand-workspace :is(.connection-copy-row button,.connection-tools>.connection-button,.phone-card .open-phone) {
  background:#f5f8fb; color:#4d657b; border:1px solid #d5e0ea; box-shadow:none;
}
html[dir] body.brand-workspace .fleet-credentials input {background:transparent; color:var(--ink); border:0}
html[dir] body.brand-workspace :is(.connection-usage,.connection-identity span,.access-host,.credential-line,.access-meta) {color:var(--muted)}
html[dir] body.brand-workspace :is(.access-meta,.integration-flow,.integration-node,.integration-node.active,.proxy-phone-context) {background:#f3f7fa; border-color:#d8e3ec; color:#50677b; box-shadow:none}
html[dir] body.brand-workspace :is(.quota-meter,.latency-bar,.workspace-capacity) {background:#e7eef5}
html[dir] body.brand-workspace :is(.quota-meter span,.latency-bar span,.workspace-capacity>span,.chart-column) {background:#6f91ad}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.code-dark,pre,.panel pre:not(.code-dark),.billing-address) {
  background:#f5f8fb; color:#405466; border:1px solid #d5e0e9; border-radius:8px; box-shadow:none;
}
html[dir] body.brand-workspace :is(.setting-row,.settings-section,.form-disclosure,.endpoint-row,.event-row,.panel-heading,.panel-bottom) {border-color:var(--line)}
html[dir] body.brand-workspace :is(.setting-row small,.settings-section p,.content-heading p,.relay-detail,.relay-detail strong,.event-row p,.event-row small) {color:var(--muted)}
html[dir] body.brand-workspace :is(.account-tabs,.connection-nav) {border-color:var(--line)}
html[dir] body.brand-workspace :is(.account-tabs button.active,.connection-nav button.active) {background:#e5eef5; color:#3f5f79; border-color:#cbd9e5; box-shadow:none}

/* Billing, statuses and account panels: colors always have written labels. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(.badge,.billing-status,.tag) {background:#f2f5f8; color:#647487; border-color:#d9e3ec}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.badge.online,.badge.ready,.billing-status-active,.billing-status-approved) {background:#eaf4e7; color:#3b7135; border-color:#cfe4c7}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.badge.offline,.badge.phone_offline,.billing-status-rejected) {background:#faeeea; color:#9a483a; border-color:#ebcec3}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.badge.paused,.badge.plan_limit,.badge.network_unavailable,.badge.relay_unavailable,.badge.degraded,.billing-status-expired,.billing-attention,.notice.warning) {background:#fbf4e5; color:#866421; border-color:#e9dbb8}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.notice.info,.billing-status-submitted,.billing-scheduled) {background:#edf3f8; color:#4a667d; border-color:#d6e1ec}
html[dir] body:is(.brand-workspace,.brand-portal) .notice.error {background:#fcf0ed; color:#9d4036; border-color:#e9c9c1}
html[dir] body.brand-workspace :is(.billing-price strong,.billing-plan-name,.billing-invoice-amount) {color:var(--ink)}
html[dir] body.brand-workspace :is(.billing-speed,.billing-phone-card .setting-row span) {color:#607c95}
html[dir] body.brand-workspace .billing-plan-plus {border-color:#98afc4}
html[dir] body.brand-workspace .billing-payment-destination {background:#f5f8fb; border-color:#d7e2eb}
html[dir] body.brand-workspace .workspace-bottom {align-items:start; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; margin-top:22px}
html[dir] body.brand-workspace :is(.workspace-section-heading,.workspace-subscription,.workspace-task,.workspace-activity-row) {border-color:var(--line)}
html[dir] body.brand-workspace .workspace-section-heading {padding:18px 20px}
html[dir] body.brand-workspace .workspace-subscription {grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; padding:16px 20px; gap:8px 12px}
html[dir] body.brand-workspace :is(.workspace-subscription-identity,.workspace-subscription-identity>div,.workspace-subscription-details,.workspace-side) {min-width:0}
html[dir] body.brand-workspace :is(.workspace-subscription strong,.workspace-subscription small,.workspace-subscription-details span) {overflow-wrap:anywhere}
html[dir] body.brand-workspace :is(.workspace-subscription small,.workspace-section-heading p,.workspace-task p,.workspace-empty,.workspace-activity-row small) {color:var(--muted)}
html[dir] body.brand-workspace .workspace-subscription-details span {color:#50667a}
html[dir] body.brand-workspace .workspace-activity-row {background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; text-align:start; padding:16px 20px}
html[dir] body.brand-workspace .workspace-activity-row:hover {background:#f5f8fb}
html[dir] body.brand-workspace .workspace-quick-help {background:#eef4f8; border-color:#d8e3ec; padding:18px 20px}
html[dir] body.brand-workspace .workspace-quick-help p {color:#68798a}

/* Every dialog is light as well, including support nested in the console. */
html[dir] body:is(.brand-workspace,.brand-portal) .modal-overlay {background:#24364a66; backdrop-filter:blur(3px)}
html[dir] body:is(.brand-workspace,.brand-portal) .modal-card {background:#fff; color:var(--ink); border:1px solid #d8e3ec; border-radius:12px; box-shadow:0 24px 80px #24394d22}
html[dir] body:is(.brand-workspace,.brand-portal) .modal-heading {border-color:var(--line)}
html[dir] body.brand-workspace :is(.support-widget,.support-inbox) {
  --sw-bg:#fff; --sw-line:#dbe4ed; --sw-text:#33485c; --sw-muted:#6c7c8c; --sw-accent:#4c6b84;
  --sc-bg:#f8fafc; --sc-panel:#fff; --sc-border:#dbe4ed; --sc-text:#33485c; --sc-muted:#6c7c8c; --sc-accent:#4c6b84;
}
html[dir] body.brand-workspace :is(.support-drawer,.support-drawer-heading,.support-drawer-footer,.support-compact,.support-entry,.support-compose-footer,.support-welcome) {background:#fff; color:var(--ink); border-color:#dbe4ed}
html[dir] body.brand-workspace .support-drawer {box-shadow:0 20px 60px #24394d20}
html[dir] body.brand-workspace :is(.support-symbol,.support-footer-mark) {background:#edf3f8; color:#607c95; border-color:#d3e0eb}
html[dir] body.brand-workspace :is(.support-drawer p,.support-drawer small,.support-drawer-heading p,.support-drawer-footer) {color:var(--muted)}
html[dir] body.brand-workspace .support-message {background:#f4f7fa; color:var(--ink); border-color:#d8e3ec}
html[dir] body.brand-workspace .support-message.mine {background:#eaf0f5; border-color:#cbd9e5}
html[dir] body.brand-workspace .support-message.internal {background:#faf2dc; color:#856321; border-color:#e4d2a1}
html[dir] body.brand-workspace .support-launcher {box-shadow:0 4px 16px #263b4d18}
html[dir] body:is(.brand-workspace,.brand-portal) .toast {background:#edf3f8; color:#3f5f79; border:1px solid #c3d4e2; box-shadow:0 8px 24px #263b4d14}
html[dir] body.brand-portal .portal-shell {max-width:1380px; padding:32px}
html[dir] body.brand-portal .portal-header {border-color:var(--line)}

/* The standalone support center is internal product UI too; keep it in the
   same calm material system as the dashboard and customer portal. */
html[dir] body.support-center-page {background:var(--canvas); color:var(--ink); font-family:Inter,'Segoe UI',sans-serif}
html[dir] body.support-center-page .auth-header {background:#f8fafc; border-color:var(--line); color:var(--ink)}
html[dir] body.support-center-page :is(.auth-brand,.support-center-heading h1) {color:var(--ink)}
html[dir] body.support-center-page .support-center-heading p {color:var(--muted)}
html[dir] body.support-center-page .support-email,
html[dir] body.support-center-page .support-entry,
html[dir] body.support-center-page .support-guide article {background:#fff; border-color:var(--line); color:var(--ink); box-shadow:none}
html[dir] body.support-center-page :is(.support-email small,.support-entry p,.support-guide p,.support-faq p,.support-links a) {color:var(--muted)}
html[dir] body.support-center-page .support-guide h2 {color:var(--ink)!important}
html[dir] body.support-center-page .support-guide article>span {color:#5f7f9a}
html[dir] body.support-center-page :is(.support-email a,.support-links a) {color:var(--accent-strong)!important}
html[dir] body.support-center-page .support-entry button,
html[dir] body.support-center-page .support-guest a,
html[dir] body.support-center-page :is(.support-floating,.support-launcher) {background:var(--brand-primary)!important; border-color:var(--brand-primary)!important; color:#fff}
html[dir] body.support-center-page .support-entry button:hover,
html[dir] body.support-center-page .support-guest a:hover,
html[dir] body.support-center-page :is(.support-floating,.support-launcher):hover {background:var(--brand-primary-hover)!important; border-color:var(--brand-primary-hover)!important}
html[dir] body.support-center-page .support-center .support-inbox {
  --sc-bg:#f8fafc; --sc-panel:#fff; --sc-border:#dbe4ed; --sc-text:#33485c; --sc-muted:#6c7c8c; --sc-accent:#4c6b84; box-shadow:none
}

/* Container layout keeps the same hierarchy on tablets and phone screens. */
@container (max-width:860px) {
  html[dir] body.brand-workspace .fleet-table>tbody>.fleet-row {background:#fff; border-color:#dbe4ed; border-radius:8px; padding:16px 12px}
  html[dir] body.brand-workspace .fleet-table>tbody>.fleet-row>td {background:transparent!important; border:0!important}
  html[dir] body.brand-workspace .fleet-table .fleet-row>.fleet-action-cell {grid-column:1/-1; grid-row:6; border-top:1px solid #e1e7ee!important; padding-top:12px!important}
  html[dir] body.brand-workspace .fleet-table .fleet-row>[data-column=subscription] {grid-column:3/-1; grid-row:5}
  html[dir] body.brand-workspace .fleet-details {padding:16px 12px}
}
@media(max-width:1200px) {
  html[dir] body.brand-workspace .workspace-bottom {grid-template-columns:minmax(0,1fr)}
  html[dir] body.brand-workspace .workspace-side {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px) {
  html[dir] body.brand-workspace .page-content {padding:24px}
  html[dir] body.brand-workspace .topbar {padding-inline:24px}
  html[dir] body.brand-workspace .update-label {display:none}
}
@media(max-width:700px) {
  html[dir] body.brand-workspace .page-content {padding:20px 14px}
  html[dir] body.brand-workspace .topbar {padding-inline:14px; height:62px}
  html[dir] body.brand-workspace .topbar-end {gap:7px}
  html[dir] body.brand-workspace .workspace-live {display:none}
  html[dir] body.brand-workspace .breadcrumb {font-size:11px; gap:7px}
  html[dir] body.brand-workspace .breadcrumb>span:first-of-type {display:none}
  html[dir] body.brand-workspace .breadcrumb .separator {display:none}
  html[dir] body.brand-workspace .workspace-intro {align-items:flex-start; gap:16px; margin-bottom:20px}
  html[dir] body.brand-workspace :is(.workspace-intro h1,.page-heading h1) {font-size:23px}
  html[dir] body.brand-workspace .workspace-intro-actions {width:100%}
  html[dir] body.brand-workspace .workspace-intro-actions .primary {min-height:43px}
  html[dir] body.brand-workspace .fleet-stats {grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:20px}
  html[dir] body.brand-workspace .fleet-stats .fleet-stat {padding:13px 15px; border-bottom:1px solid var(--line)}
  html[dir] body.brand-workspace .fleet-stats .fleet-stat:nth-child(2) {border-inline-end:0}
  html[dir] body.brand-workspace .fleet-stats .fleet-stat:nth-last-child(-n+2) {border-bottom:0}
  html[dir] body.brand-workspace .fleet-stat-value strong {font-size:23px}
  html[dir] body.brand-workspace .fleet-stat-note {font-size:10px; line-height:1.7}
  html[dir] body.brand-workspace :is(.fleet-panel-heading,.filter-bar,.fleet-controls,.fleet-pagination) {padding-inline:14px}
  html[dir] body.brand-workspace .filter-bar {display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  html[dir] body.brand-workspace .filter-bar .search-input {grid-column:1/-1; min-width:0}
  html[dir] body.brand-workspace .filter-bar select {min-width:0; width:100%; font-size:12px}
  html[dir] body.brand-workspace .filter-more {grid-column:1/-1}
  html[dir] body.brand-workspace .filter-more>summary {width:max-content; padding:8px 12px}
  html[dir] body.brand-workspace .fleet-scroll {padding:0 6px}
  html[dir] body.brand-workspace .fleet-actions .icon-button {min-height:40px; min-width:40px}
  html[dir] body.brand-workspace .workspace-side {display:flex; flex-direction:column; min-width:0}
  html[dir] body.brand-workspace .workspace-subscription {grid-template-columns:minmax(0,1fr) auto; padding:16px}
  html[dir] body.brand-workspace .workspace-subscription-details {grid-column:1}
  html[dir] body.brand-workspace .workspace-subscription>.billing-status {grid-column:2; grid-row:1}
  html[dir] body.brand-workspace .workspace-plan-action {grid-column:1/-1}
  html[dir] body.brand-workspace .workspace-section-heading {padding:16px}
  html[dir] body:is(.brand-workspace,.brand-portal) .modal-overlay {padding:14px}
  html[dir] body.brand-portal .portal-shell {padding:20px 14px}
}
@media(prefers-reduced-motion:reduce) {
  html[dir] body:is(.brand-workspace,.brand-portal) :is(button,a,input,select,textarea) {transition:none}
}




/* WEB-10: brighter cobalt action tier. The cool neutral surfaces stay quiet;
   actions get a clear, confident blue that reads as interactive immediately. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(.primary,.support-primary,.support-launcher) {
  background:#2563eb; border-color:#2563eb; color:#fff;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.primary,.support-primary,.support-launcher):hover {
  background:#1d4ed8; border-color:#1d4ed8; color:#fff;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.primary,.support-primary,.support-launcher):focus-visible {
  outline-color:#7aa7ff;
}
html[dir] body.brand-workspace .sidebar .nav.active {
  background:#eaf2ff; color:#2458c9; border-inline-start-color:#4f83ef;
}
html[dir] body.brand-workspace .sidebar .nav.active .icon {color:#2f6fec}
html[dir] body.brand-workspace .nav-count {background:#e2edff; color:#2458c9}
html[dir] body.brand-workspace :is(.device-tabs button.active,.device-tabs button[aria-current=page]) {
  background:#eaf2ff; color:#2458c9;
}
html[dir] body.brand-workspace :is(.account-tabs button.active,.connection-nav button.active) {
  background:#eaf2ff; color:#2458c9; border-color:#c4d8ff;
}
html[dir] body.brand-workspace :is(.view-switch .active,.view-switch button[aria-pressed=true]) {
  background:#e7f0ff!important; color:#2458c9!important;
}
html[dir] body.brand-workspace .fleet-actions .fleet-create {
  color:#2563eb!important; border-color:#b9d0ff!important;
}
html[dir] body.brand-workspace .fleet-actions .fleet-create:hover {
  background:#edf4ff!important; border-color:#8fb3ff!important;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.link-button,.fleet-sort,.workspace-plan-action,.back-link) {
  color:#2458c9;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.link-button,.fleet-sort,.workspace-plan-action,.back-link):hover {
  color:#173f9e;
}
html[dir] body.brand-workspace .support-center-heading a,
html[dir] body.brand-workspace .support-email a,
html[dir] body.brand-workspace .support-links a {color:#2458c9!important}

/* Mobile navigation stays within the viewport; support never covers content. */
html[dir] body.brand-workspace .mobile-support{display:none}
@media(min-width:701px) and (max-width:1000px){
 html[dir] body.brand-workspace .topbar{gap:12px}
 html[dir] body.brand-workspace .workspace-live{display:none}
 html[dir] body.brand-workspace .breadcrumb{min-width:0;flex:1}
 html[dir] body.brand-workspace .breadcrumb>span{display:none}
 html[dir] body.brand-workspace .breadcrumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html[dir] body.brand-workspace .topbar-end{flex-shrink:0}
}
@media(max-width:700px){
 html[dir] body.brand-workspace .topbar{gap:8px;padding-inline:12px;min-height:68px;height:auto;flex-wrap:nowrap}
 html[dir] body.brand-workspace .breadcrumb{flex:0 0 44px;min-width:0}
 html[dir] body.brand-workspace #breadcrumb-current{display:none}
 html[dir] body.brand-workspace .topbar-end{flex:0 1 auto;gap:4px;min-width:0}
 html[dir] body.brand-workspace .topbar select[data-language-select]{min-width:102px;width:110px;max-width:118px;min-height:44px;padding-inline:9px}
 html[dir] body.brand-workspace .topbar .icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:10px}
 html[dir] body.brand-workspace .topbar-shortcuts{display:none}
 html[dir] body.brand-workspace .mobile-support svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 html[dir] body.brand-workspace .support-launcher{display:none}
 html[dir] body.brand-workspace .support-drawer{inset-inline:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;max-width:none;height:min(640px,calc(100dvh - 90px));max-height:calc(100dvh - 90px)}
 html[dir] body.brand-workspace .page-content{padding:20px 14px calc(24px + env(safe-area-inset-bottom));min-width:0}
 html[dir] body.brand-workspace :is(.page-heading,.content-heading){min-width:0;gap:12px}
 html[dir] body.brand-workspace :is(.page-heading,.content-heading)>div{min-width:0}
 html[dir] body.brand-workspace :is(.page-heading h1,.content-heading h2){overflow-wrap:anywhere}
 html[dir] body.brand-workspace .modal-overlay{padding:10px}
 html[dir] body.brand-workspace .modal-card{max-width:100%;max-height:calc(100dvh - 20px);overflow:auto}
 html[dir] body.brand-workspace .modal-heading{align-items:flex-start;gap:12px}
 html[dir] body.brand-workspace .modal-heading>div{min-width:0}
 html[dir] body.brand-workspace .modal-heading h2{overflow-wrap:anywhere}
 html[dir] body.brand-workspace .modal-heading>.icon-button{flex-shrink:0;min-width:44px;min-height:44px}
 html[dir] body.brand-workspace .form-actions{flex-wrap:wrap;gap:10px}
 html[dir] body.brand-workspace .form-actions>button{min-height:44px;white-space:normal}
}
@media(max-width:359px){
 html[dir] body.brand-workspace .topbar{padding-inline:8px;gap:4px}
 html[dir] body.brand-workspace .topbar-end{gap:0}
 html[dir] body.brand-workspace .topbar select[data-language-select]{min-width:98px;width:98px}
}