:root {
      --bg: #0b0d10;
      --panel: #111417;
      --text: #e9eef4;
      --muted: #97a3b2;
      --line: #242a31;
      --brand: #1c8f84;
      --brand-2: #136d64;
      --good: #41c79a;
      --warn: #d89a3a;
      --bad: #d16a68;
      --ink: #f4f7fb;
      --surface: #171b20;
      --surface-2: #1c2127;
      --nav: #0e1115;
      --nav-line: rgba(255,255,255,0.06);
      --nav-text: rgba(255,255,255,0.7);
      --nav-active: #ffffff;
      --nav-active-bg: rgba(28,143,132,0.16);
      --fs-helper: 12px;
      --fs-body: 14px;
      --fs-control: 15px;
      --fs-title: 28px;
      --fs-section: 18px;
    }
    html.light-theme,
    body.light-theme {
      --bg: #eef3f8;
      --panel: #fdfefe;
      --text: #14212f;
      --muted: #475467;
      --line: #cfd8e3;
      --brand: #0d3b66;
      --brand-2: #1f5f9c;
      --good: #117a65;
      --warn: #b9770e;
      --bad: #b03a2e;
      --ink: #0f1720;
      --surface: #f5f8fc;
      --surface-2: #edf3f9;
      --nav: #0d2238;
      --nav-line: rgba(255,255,255,0.08);
      --nav-text: rgba(255,255,255,0.8);
      --nav-active: #ffffff;
      --nav-active-bg: rgba(255,255,255,0.12);
    }
    * { box-sizing: border-box; }
    html,
    body {
      -webkit-text-size-adjust: 100%;
    }
    html {
      background: #0c0f12;
    }
    body.light-theme,
    html.light-theme {
      background: #eef3f8;
    }
    body {
      margin: 0;
      font-family: "Avenir Next", Arial, sans-serif;
      font-size: var(--fs-body);
      background:
        radial-gradient(circle at top right, rgba(13,59,102,0.08), transparent 35%),
        linear-gradient(180deg, #f7fafc 0%, var(--bg) 100%);
      color: var(--text);
    }
    html:not(.light-theme) body,
    body.dark-theme {
      background:
        radial-gradient(circle at top right, rgba(28,143,132,0.08), transparent 30%),
        linear-gradient(180deg, #0c0f12 0%, var(--bg) 100%);
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .stat {
      background: #242d38;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 12px;
    }
    .stat .label {
      font-size: var(--fs-helper);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #b8c3cf;
      margin-bottom: 6px;
    }
    .stat .value {
      font-size: 20px;
      font-weight: 700;
      color: #f4f7fb;
    }
    .view {
      display: none;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 18px;
    }
    .view.active {
      display: block;
    }
    .admin-boot-view.active {
      display: grid;
      place-items: center;
    }
    .admin-boot-card {
      width: min(440px, 100%);
      min-height: 220px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 12px;
      text-align: center;
    }
    .admin-boot-loader {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 3px solid rgba(151, 163, 178, 0.28);
      border-top-color: var(--brand);
      animation: adminBootSpin 0.9s linear infinite;
    }
    @keyframes adminBootSpin {
      to { transform: rotate(360deg); }
    }
    .grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 0;
    }
    .overview-grid {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .auth-card {
      width: min(560px, 100%);
      align-self: center;
    }
    .overview-grid .auth-card {
      max-width: 560px;
      align-self: center;
    }
    .overview-section {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .overview-section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding: 2px 2px 0;
    }
    .overview-section-kicker {
      margin-bottom: 6px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #8fd7cb;
      font-weight: 700;
    }
    .overview-section-head h3 {
      margin: 0;
      font-size: 24px;
      letter-spacing: -0.03em;
    }
    .overview-section-note {
      margin-top: 6px;
      max-width: 900px;
      color: var(--muted);
      font-size: var(--fs-body);
      line-height: 1.5;
    }
    .overview-section-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
    }
    .overview-section-grid.overview-section-grid-compact {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .overview-section-grid .card {
      height: 100%;
    }
    .overview-span-full {
      grid-column: 1 / -1;
    }
    .overview-wide {
      grid-column: auto;
    }
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 15px;
      box-shadow: none;
    }
    .card h2,
    .card h3 {
      margin: 0 0 10px;
      font-size: var(--fs-section);
      color: var(--ink);
    }
    .card-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .card-heading h3 {
      margin: 0;
    }
    .card-toggle {
      width: auto;
      min-width: 120px;
      margin-top: 0;
      padding: 8px 12px;
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      font-size: var(--fs-body);
    }
    .card.collapsed .card-heading {
      margin-bottom: 0;
    }
    .card-section-content.hidden {
      display: none;
    }
    .subtle {
      color: var(--muted);
      font-size: var(--fs-body);
      line-height: 1.45;
    }
    label {
      display: block;
      font-size: var(--fs-helper);
      color: var(--muted);
      margin-bottom: 6px;
      margin-top: 12px;
    }
    input, textarea, button, select {
      width: 100%;
      padding: 11px 13px;
      border-radius: 10px;
      border: 1px solid var(--line);
      font: inherit;
      background: var(--panel);
      color: var(--text);
      font-size: var(--fs-control);
      line-height: 1.35;
    }
    input::placeholder,
    textarea::placeholder {
      color: var(--muted);
      opacity: 1;
    }
    textarea {
      min-height: 92px;
      resize: vertical;
    }
    button {
      margin-top: 14px;
      background: linear-gradient(180deg, #1d8e83, #167469);
      color: #fff;
      border: 0;
      cursor: pointer;
      font-weight: 600;
    }
    button.secondary {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line);
    }
    button.ghost {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line);
    }
    button.danger {
      background: #7f1d1d;
      color: #fff;
      border: 1px solid rgba(248, 113, 113, 0.42);
    }
    .staff-delete-button {
      width: 30px;
      height: 30px;
      min-width: 30px;
      margin-top: 0;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 0;
      line-height: 1;
    }
    .staff-delete-icon {
      display: inline-block;
      font-size: 9px;
      line-height: 1;
      transform: scale(0.72);
      transform-origin: center;
    }
    .muted {
      color: var(--muted);
    }
    .message {
      margin-top: 10px;
      padding: 9px 10px;
      border-radius: 10px;
      background: var(--surface);
      border: 1px solid var(--line);
      font-size: 13px;
    }
    .stack {
      display: grid;
      gap: 12px;
    }
    .auth-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }
    .auth-fields.single {
      grid-template-columns: 1fr;
    }
    .auth-fields label,
    .auth-fields input,
    .auth-fields select {
      margin-top: 0;
    }
    .auth-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-items: center;
    }
    .auth-actions button,
    button.full {
      width: 100%;
      min-width: 0;
      margin-top: 0;
    }
    .password-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }
    .password-field input {
      min-width: 0;
    }
    .password-toggle {
      width: auto;
      min-width: 44px;
      min-height: 44px;
      margin-top: 0;
      padding: 10px;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
    }
    .password-toggle svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    body.light-theme .stat {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.16);
    }
    body.light-theme .stat .label {
      color: rgba(255,255,255,0.75);
    }
    body.light-theme .stat .value {
      color: #fff;
    }
    body.light-theme input,
    body.light-theme textarea,
    body.light-theme select,
    body.light-theme button.ghost,
    body.light-theme button.secondary,
    body.light-theme .card-toggle {
      background: #fff;
      color: var(--text);
    }
    body.light-theme .table-wrap,
    body.light-theme .kv-card,
    body.light-theme .mini-stat {
      background: #fff;
    }
    body.light-theme .account-card {
      background: linear-gradient(180deg, #ffffff, #f5f8fc);
    }
    body.light-theme th {
      background: #f3f6fa;
    }
    .inline {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .toolbar button {
      width: auto;
      min-width: 130px;
      margin-top: 0;
    }
    pre {
      background: #121821;
      color: #d9e6f5;
      padding: 14px;
      border-radius: 12px;
      overflow: auto;
      min-height: 140px;
      white-space: pre-wrap;
      margin: 10px 0 0;
    }
    .status {
      font-size: 13px;
      color: var(--muted);
      margin-top: 10px;
    }
    .pill {
      display: inline-block;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 8px;
      background: #eaf3ff;
      color: var(--brand);
    }
    .table-wrap {
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
      margin-top: 12px;
      background: #202731;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    th, td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }
    th {
      background: #26303b;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      position: sticky;
      top: 0;
    }
    tr:last-child td {
      border-bottom: 0;
    }
    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }
    .health-state-pill {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      border: 1px solid transparent;
      text-transform: capitalize;
    }
    .health-state-pill-good {
      background: rgba(65, 199, 154, 0.15);
      color: #58d3aa;
      border-color: rgba(65, 199, 154, 0.35);
    }
    .health-state-pill-warn {
      background: rgba(216, 154, 58, 0.16);
      color: #e3ac56;
      border-color: rgba(216, 154, 58, 0.35);
    }
    .health-state-pill-bad {
      background: rgba(209, 106, 104, 0.16);
      color: #e28886;
      border-color: rgba(209, 106, 104, 0.35);
    }
    .health-state-pill-neutral {
      background: rgba(151, 163, 178, 0.14);
      color: #b3becd;
      border-color: rgba(151, 163, 178, 0.28);
    }
    .badge.buy { background: #e8f8f2; color: var(--good); }
    .badge.sell { background: #fdecea; color: var(--bad); }
    .badge.pending { background: #fff5e6; color: var(--warn); }
    .ops-history-primary {
      font-weight: 600;
    }
    .ops-history-secondary {
      margin-top: 4px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .ops-history-stream-alert {
      background: rgba(104, 165, 255, 0.16);
      color: #8ab8ff;
    }
    .ops-history-stream-notification {
      background: rgba(85, 214, 174, 0.16);
      color: #6ad7b7;
    }
    .ops-history-stream-audit {
      background: rgba(188, 160, 255, 0.16);
      color: #c7b0ff;
    }
    .ops-history-level-critical,
    .ops-history-level-error,
    .ops-history-status-active,
    .ops-history-status-unread {
      background: rgba(209, 106, 104, 0.16);
      color: #e28886;
    }
    .ops-history-level-warning,
    .ops-history-status-recorded {
      background: rgba(216, 154, 58, 0.16);
      color: #e3ac56;
    }
    .ops-history-level-success,
    .ops-history-status-resolved,
    .ops-history-status-read {
      background: rgba(65, 199, 154, 0.16);
      color: #58d3aa;
    }
    .ops-history-level-info,
    .ops-history-status-neutral {
      background: rgba(151, 163, 178, 0.14);
      color: #b3becd;
    }
    .cell-muted {
      color: var(--muted);
      font-size: 12px;
    }
    .subscription-readonly-only {
      display: none;
    }
    body.admin-subscription-readonly .subscription-write-only {
      display: none !important;
    }
    body.admin-subscription-readonly .subscription-readonly-only {
      display: block;
    }
    body.admin-subscription-write .subscription-readonly-only {
      display: none !important;
    }
    .bridge-account-readonly-only {
      display: none;
    }
    body.admin-bridge-account-readonly .bridge-account-write-only {
      display: none !important;
    }
    body.admin-bridge-account-readonly .bridge-account-readonly-only {
      display: block;
    }
    body.admin-bridge-account-write .bridge-account-readonly-only {
      display: none !important;
    }
    .hidden {
      display: none;
    }
    .group-row {
      background: rgba(255,255,255,0.04);
      font-weight: 600;
    }
    .trade-row td {
      background: var(--panel);
    }
    .trade-indent {
      padding-left: 26px;
    }
    .mini-btn {
      width: auto;
      min-width: 0;
      margin-top: 0;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 999px;
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
    }
    .mini-btn-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .group-row-shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .group-row-copy {
      flex: 1 1 260px;
      min-width: 0;
    }
    .kv-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .kv-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: #202731;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .kv-card .k {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 0;
      flex: 1 1 auto;
    }
    .kv-card .v {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      flex: 0 0 auto;
      text-align: right;
      max-width: 62%;
      overflow-wrap: anywhere;
    }
    .kv-card-link {
      cursor: pointer;
      transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    }
    .kv-card-link:hover,
    .kv-card-link:focus-visible {
      border-color: rgba(85, 215, 193, 0.35);
      background: #26323f;
      transform: translateY(-1px);
      outline: none;
    }
    .alert-audience-summary-card {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      text-align: left;
    }
    .alert-audience-summary-card.selected {
      border-color: rgba(85, 215, 193, 0.45);
      background: #26323f;
      box-shadow: inset 0 0 0 1px rgba(85, 215, 193, 0.12);
    }
    .alert-audience-summary-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .alert-audience-summary-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      overflow-wrap: anywhere;
    }
    .alert-audience-summary-count {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .alert-audience-summary-meta {
      font-size: 12px;
      color: var(--muted);
      overflow-wrap: anywhere;
    }
    .account-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .account-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      background: linear-gradient(180deg, #27323e, #1f2731);
    }
    .account-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .account-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      margin: 0;
    }
    .account-subtitle {
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }
    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .chip {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      background: #edf3f8;
      color: var(--ink);
    }
    .chip.good { background: #e8f8f2; color: var(--good); }
    .chip.warn { background: #fff5e6; color: var(--warn); }
    .chip.bad { background: #fdecea; color: var(--bad); }
    .mini-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .mini-stat {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: #2a3440;
    }
    .mini-stat .k {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .analysis-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin: 14px 0 18px;
    }
    .analysis-stat {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      background: var(--panel);
    }
    .analysis-stat .k { font-size: var(--fs-helper); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
    .analysis-stat .v { margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--text); }
    .analysis-stat .sub { margin-top: 6px; font-size: var(--fs-helper); color: var(--muted); }
    .analysis-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
    .analysis-filter {
      border:1px solid var(--line); background:var(--panel); color:var(--text);
      border-radius:999px; padding:8px 12px; cursor:pointer; font:inherit;
    }
    .analysis-filter.active { background:#2f80ed; color:#fff; border-color:#2f80ed; }
    .analysis-layout { display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr); gap:16px; }
    .analysis-table-wrap, .analysis-detail {
      border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:14px;
    }
    .analysis-table { width:100%; border-collapse:collapse; }
    .analysis-table th, .analysis-table td { padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
    .analysis-table tr.active { background: rgba(47,128,237,0.08); }
    .analysis-detail h4 { margin:0 0 10px; }
    .analysis-meta-list { display:grid; gap:8px; }
    .analysis-meta-row { display:grid; grid-template-columns: 170px 1fr; gap:12px; }
    .analysis-meta-row .k { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
    .analysis-meta-row .v { color:var(--text); }
    .analysis-detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:16px; }
    .analysis-detail-card { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px; }
    .analysis-detail-card .k { color:var(--muted); font-size:12px; margin-bottom:8px; text-transform:uppercase; }
    .mini-list {
      display:grid;
      gap:8px;
    }
    .mini-row {
      padding:9px 10px;
      border:1px solid var(--line);
      border-radius:10px;
      background:rgba(255,255,255,0.02);
    }
    .mini-row strong {
      display:block;
      margin-bottom:4px;
      font-size:13px;
    }
    .wallet-amount-positive {
      color: var(--good);
      font-weight: 700;
      white-space: nowrap;
    }
    .wallet-amount-negative {
      color: var(--bad);
      font-weight: 700;
      white-space: nowrap;
    }
    .wallet-amount-neutral {
      color: var(--text);
      font-weight: 700;
      white-space: nowrap;
    }
    .health-pill-live, .health-pill-delayed, .health-pill-offline, .health-pill-needs-approval {
      display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600;
    }
    .health-pill-live { background:rgba(39,174,96,0.14); color:#27ae60; }
    .health-pill-delayed { background:rgba(242,153,74,0.14); color:#f2994a; }
    .health-pill-offline, .health-pill-needs-approval { background:rgba(235,87,87,0.12); color:#eb5757; }
    .value-good { color:#27ae60; }
    .value-bad { color:#eb5757; }
    .value-warn { color:#f2994a; }
    .mini-stat .v {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }
    .app-toast {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 120;
      min-width: 240px;
      max-width: min(420px, calc(100vw - 32px));
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(17,20,23,0.96);
      color: #f4f7fb;
      box-shadow: 0 16px 40px rgba(0,0,0,0.28);
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .app-toast.show { opacity: 1; transform: translateY(0); }
    .app-toast.success { border-color: rgba(17,122,101,0.32); }
    .app-toast.error { border-color: rgba(176,58,46,0.32); }
    .app-toast.info { border-color: rgba(43,108,176,0.32); }

    @media (max-width: 640px) {
      .overview-section-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .card-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
      }

      .card-heading h3,
      .card-heading h4,
      .section-title-row {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .card-toggle {
        width: 100%;
        min-width: 0;
      }
    }