:root {
      --bg: #0b0d10;
      --panel: #111417;
      --text: #e9eef4;
      --muted: #97a3b2;
      --line: #242a31;
      --surface: #171b20;
      --surface-2: #1c2127;
      --brand: #1c8f84;
      --brand-2: #136d64;
      --good: #41c79a;
      --warn: #d89a3a;
      --bad: #d16a68;
      --ink: #f4f7fb;
      --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;
      --surface: #f5f8fc;
      --surface-2: #edf3f9;
      --brand: #0d3b66;
      --brand-2: #1f5f9c;
      --good: #117a65;
      --warn: #b9770e;
      --bad: #b03a2e;
      --ink: #0f1720;
      --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 {
      max-width: 100%;
      overflow-x: hidden;
      -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(28,143,132,0.08), transparent 30%),
        linear-gradient(180deg, #0c0f12 0%, var(--bg) 100%);
      color: var(--text);
    }
    html.light-theme body,
    body.light-theme {
      background:
        radial-gradient(circle at top right, rgba(13,59,102,0.08), transparent 35%),
        linear-gradient(180deg, #f7fafc 0%, var(--bg) 100%);
    }
    .grid {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 14px;
    }
    .grid.auth-grid {
      grid-template-columns: 320px 1fr;
    }
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 15px;
      box-shadow: none;
    }
    .auth-card {
      width: 100%;
      max-width: 560px;
      grid-column: 1 / -1;
      justify-self: center;
    }
    .portal-boot-card {
      min-height: 220px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 12px;
      text-align: center;
    }
    .portal-boot-loader {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 3px solid rgba(151, 163, 178, 0.28);
      border-top-color: var(--brand);
      animation: portalBootSpin 0.9s linear infinite;
    }
    @keyframes portalBootSpin {
      to { transform: rotate(360deg); }
    }
    .portal-shell {
      display: grid;
      gap: 14px;
      align-content: start;
      grid-column: 1 / -1;
      min-width: 0;
      min-height: 0;
      overflow: visible;
    }
    .portal-shell.hidden {
      display: none !important;
    }
    .portal-summary {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 15px;
      box-shadow: none;
    }
    .portal-sections {
      display: grid;
      gap: 14px;
      align-content: start;
      min-width: 0;
      min-height: 0;
      height: auto;
      overflow: visible;
      overscroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 18px;
    }
    .portal-view {
      display: none;
      gap: 14px;
      min-width: 0;
    }
    .portal-view.active {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }
    .portal-view > .card {
      grid-column: 1 / -1;
    }
    .card h2, .card h3 { margin-top: 0; color: var(--ink); }
    .stack { display: grid; gap: 12px; }
    label { display: block; font-size: var(--fs-helper); color: var(--muted); margin-bottom: 5px; }
    input, select, button {
      width: 100%;
      border-radius: 10px;
      border: 1px solid var(--line);
      padding: 11px 13px;
      font: inherit;
      font-size: var(--fs-control);
      line-height: 1.35;
      background: #161a1f;
      color: var(--text);
    }
    select {
      min-height: 44px;
      appearance: auto;
    }
    button {
      cursor: pointer;
      background: linear-gradient(180deg, #1d8e83, #167469);
      color: white;
      border: none;
      font-weight: 600;
    }
    .password-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }
    .password-field input {
      min-width: 0;
    }
    .stepper {
      display: inline-grid;
      grid-template-columns: 36px 64px 36px;
      gap: 8px;
      align-items: center;
    }
    .stepper button {
      width: 36px;
      min-width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 10px;
      text-align: center;
      font-size: 18px;
      line-height: 1;
    }
    .stepper input {
      width: 64px;
      min-width: 64px;
      height: 36px;
      padding: 6px 8px;
      text-align: center;
    }
    .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);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .password-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    button.secondary {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line);
    }
    .hidden { display: none !important; }
    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 0;
    }
    .stat {
      background: #161a1f;
      border: 1px solid #242a31;
      border-radius: 16px;
      padding: 11px;
    }
    .stat .k { color: #9ca7b4; font-size: var(--fs-helper); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
    .stat .v { font-size: 22px; margin-top: 8px; font-weight: 700; color: #fff; }
    .mini-bar {
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
      margin-top: 8px;
    }
    .mini-bar > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(28,143,132,0.65), rgba(28,143,132,1));
    }
    table { width: 100%; border-collapse: collapse; }
    th, td {
      border-bottom: 1px solid var(--line);
      padding: 10px 8px;
      text-align: left;
      vertical-align: top;
      font-size: 12px;
    }
    td { color: var(--text); }
    th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
    tbody tr:hover td {
      background: rgba(255,255,255,0.015);
    }
    td button {
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 700;
    }
    .pill {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      border: 1px solid var(--line);
      background: #171b20;
    }
    .pill.active, .pill.connected, .pill.approved { color: var(--good); background: rgba(17,122,101,0.08); border-color: rgba(17,122,101,0.2); }
    .pill.inactive { color: var(--warn); background: rgba(176,137,58,0.10); border-color: rgba(176,137,58,0.24); }
    .pill.processing,
    .pill.connecting,
    .pill.reconnecting { color: var(--warn); background: rgba(185,119,14,0.08); border-color: rgba(185,119,14,0.2); }
    .pill.canceled,
    .pill.disconnected,
    .pill.invalid-login {
      color: var(--bad);
      background: rgba(176,58,46,0.10);
      border-color: rgba(176,58,46,0.26);
    }
    .master-toggle-deactivate {
      background: rgba(176,58,46,0.12) !important;
      color: #b03a2e !important;
      border: 1px solid rgba(176,58,46,0.28) !important;
    }
    .pill.success { color: var(--good); background: rgba(17,122,101,0.08); border-color: rgba(17,122,101,0.2); }
    .pill.pending { color: var(--warn); background: rgba(185,119,14,0.08); border-color: rgba(185,119,14,0.2); }
    .pill.warning, .pill.info { color: var(--warn); background: rgba(185,119,14,0.08); border-color: rgba(185,119,14,0.2); }
    .pill.suspended, .pill.rejected, .pill.expired { color: var(--bad); background: rgba(176,58,46,0.08); border-color: rgba(176,58,46,0.2); }
    .pill.error, .pill.failed { color: var(--bad); background: rgba(176,58,46,0.08); border-color: rgba(176,58,46,0.2); }
    .trade-flow-stack {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .trade-flow-chip {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .trade-flow-write-both {
      color: #89d8c8;
      border-color: rgba(45, 150, 145, 0.48);
      background: rgba(45, 150, 145, 0.18);
    }
    .trade-flow-write-backend {
      color: #8ea6ea;
      border-color: rgba(58, 88, 160, 0.52);
      background: rgba(58, 88, 160, 0.2);
    }
    .trade-flow-write-local {
      color: #c0a27a;
      border-color: rgba(112, 79, 45, 0.52);
      background: rgba(112, 79, 45, 0.2);
    }
    .trade-flow-read-backend {
      color: #a5bbf5;
      border-color: rgba(72, 103, 176, 0.46);
      background: rgba(72, 103, 176, 0.16);
    }
    .trade-flow-read-local {
      color: #ceb48f;
      border-color: rgba(124, 92, 56, 0.46);
      background: rgba(124, 92, 56, 0.16);
    }
    .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;
    }
    .message.success {
      border-color: rgba(17,122,101,0.24);
      background: rgba(17,122,101,0.08);
    }
    .message.error {
      border-color: rgba(176,58,46,0.24);
      background: rgba(176,58,46,0.08);
    }
    .app-toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1200;
      min-width: 240px;
      max-width: 360px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(10,12,15,0.96);
      color: #eaf2ff;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 600;
      letter-spacing: 0.01em;
      white-space: pre-wrap;
      word-break: break-word;
      box-shadow: 0 18px 40px rgba(0,0,0,0.28);
      transform: translateY(16px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .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); }
    .app-confirm-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1300;
      background: rgba(3, 5, 8, 0.88);
      padding: 18px;
      backdrop-filter: blur(10px) saturate(0.72);
    }
    .app-confirm-backdrop.show { display: flex; }
    .app-confirm {
      width: min(520px, 100%);
      border-radius: 16px;
      border: 1px solid rgba(154, 170, 190, 0.28);
      background: #11161d;
      color: var(--text);
      box-shadow: 0 30px 90px rgba(0,0,0,0.68);
      padding: 24px;
    }
    .app-confirm h4 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.25;
    }
    .app-confirm p {
      color: #c8d2df;
      margin: 0 0 20px;
      line-height: 1.52;
      font-size: 15px;
    }
    .app-confirm-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
    .notice-list {
      display: grid;
      gap: 10px;
    }
    .notice {
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: 12px;
      padding: 10px;
    }
    .notice.info {
      border-color: rgba(17,122,101,0.2);
      background: rgba(17,122,101,0.04);
    }
    .notice.warning {
      border-color: rgba(176,58,46,0.2);
      background: rgba(176,58,46,0.04);
    }
    .notice .title {
      font-weight: 700;
      margin-bottom: 4px;
      color: var(--ink);
    }
    .notice .time {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }
    body.light-theme {
      background:
        radial-gradient(circle at top right, rgba(13,59,102,0.08), transparent 35%),
        linear-gradient(180deg, #f7fafc 0%, var(--bg) 100%);
    }
    body.light-theme .card,
    body.light-theme .portal-summary {
      box-shadow: 0 12px 30px rgba(31, 60, 92, 0.07);
    }
    body.light-theme .stats .stat {
      background: linear-gradient(180deg, #0f3f6b, #144d81);
      border-color: rgba(255,255,255,0.18);
    }
    body.light-theme .stat .k {
      color: rgba(255,255,255,0.78);
    }
    body.light-theme .analysis-stat .v,
    body.light-theme td,
    body.light-theme .notice .title {
      color: var(--ink);
    }
    body.light-theme .app-confirm-backdrop {
      background: rgba(9, 20, 33, 0.68);
    }
    body.light-theme .app-confirm {
      background: #ffffff;
      border-color: rgba(13,59,102,0.18);
      box-shadow: 0 30px 90px rgba(9,20,33,0.32);
    }
    body.light-theme .app-confirm p {
      color: #3d4c5f;
    }
    body.light-theme input,
    body.light-theme select,
    body.light-theme button.secondary {
      background: #fff;
      color: var(--text);
    }
    body.light-theme .app-toast {
      background: #ffffff;
      color: var(--ink);
      border-color: rgba(13,59,102,0.18);
      box-shadow: 0 14px 32px rgba(13,59,102,0.18);
    }
    body.light-theme .app-confirm {
      background: #ffffff;
      color: var(--ink);
      border-color: var(--line);
      box-shadow: 0 18px 36px rgba(13,59,102,0.14);
    }
    body.light-theme .master-toggle-deactivate {
      background: rgba(176,58,46,0.08) !important;
      color: #9f2f24 !important;
      border-color: rgba(159,47,36,0.28) !important;
    }
    body.light-theme .pill.disconnected,
    body.light-theme .pill.invalid-login {
      color: #9f2f24;
      background: rgba(176,58,46,0.10);
      border-color: rgba(159,47,36,0.28);
    }
    body.light-theme .pill.processing,
    body.light-theme .pill.connecting,
    body.light-theme .pill.reconnecting {
      color: #946200;
      background: rgba(185,119,14,0.10);
      border-color: rgba(148,98,0,0.25);
    }
    input::placeholder {
      color: #8a97a8;
    }
    @media (max-width: 860px) {
      input,
      select,
      textarea,
      .password-field input,
      .stepper input {
        font-size: 16px;
      }
      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%);
      }
      .wrap {
        background: transparent;
        overflow-x: hidden;
      }
      .app-shell { grid-template-columns: 1fr; }
      .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(86vw, 320px);
        height: 100dvh;
        transform: translateX(-105%);
        border-right: 1px solid var(--nav-line);
        border-radius: 0;
        box-shadow: none;
        padding-top: calc(18px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      }
      .app-shell.mobile-sidebar-open .sidebar {
        transform: translateX(0);
      }
      .app-shell.sidebar-collapsed .sidebar {
        display: flex;
      }
      .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(6, 10, 15, 0.62);
        z-index: 20;
      }
      .app-shell.mobile-sidebar-open .mobile-sidebar-backdrop {
        display: block;
      }
      .sidebar-close-mobile {
        display: inline-flex;
      }
      .sidebar-hide-desktop {
        display: none;
      }
      .grid { grid-template-columns: 1fr; }
      .grid.auth-grid { grid-template-columns: 1fr; }
      .main {
        padding: 12px 14px 0;
        gap: 12px;
        background: transparent;
      }
      .brand {
        display: block;
        padding: 14px 14px 18px;
        margin-bottom: 12px;
      }
      .sidebar-scroll {
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      #portal-nav-wrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      #portal-nav-wrap::-webkit-scrollbar {
        display: none;
      }
      .auth-card {
        width: 100%;
        max-width: 560px;
        justify-self: center;
      }
      .auth-fields {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .auth-fields.single {
        grid-template-columns: 1fr;
      }
      .auth-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .auth-actions .full {
        grid-column: auto;
      }
      .stats { grid-template-columns: 1fr; }
      .topbar {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 38px 44px;
        align-items: center;
        gap: 8px;
        padding: 14px 0 12px;
      }
      .topbar-actions,
      .hero-profile,
      .profile-dropdown {
        min-width: 0;
      }
      .topbar-actions {
        width: auto;
        display: contents;
        justify-content: flex-start;
      }
      .topbar-actions:first-child {
        display: contents;
      }
      .topbar-actions:last-child {
        display: contents;
      }
      .topbar-search-wrap {
        width: 100%;
        max-width: none;
      }
      .hero-profile {
        width: 44px;
        min-width: 44px;
        padding: 0;
        min-width: 0;
        justify-content: center;
      }
      .profile-dropdown {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 72px);
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
      }
      .page-heading h2 {
        font-size: 24px;
      }
      .theme-toggle {
        width: 38px;
        min-width: 38px;
        padding: 0;
        justify-self: stretch;
      }
      .card,
      .portal-summary {
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(31, 60, 92, 0.06);
      }
      .portal-shell,
      .portal-sections,
      .portal-view {
        gap: 12px;
      }
      .stat {
        border-radius: 12px;
      }
      table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: transparent;
      }
      th, td {
        white-space: nowrap;
      }
    }
    @media (max-width: 620px) {
      .topbar-menu {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
      }
      .topbar-search-wrap {
        width: 100%;
      }
      .theme-toggle {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
      }
      .hero-profile {
        width: 44px;
        min-width: 44px;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        justify-items: center;
      }
      .hero-profile-avatar {
        width: 38px;
        height: 38px;
        font-size: 18px;
      }
      .hero-profile-meta {
        display: none;
      }
      .hero-profile-name,
      .hero-profile-plan {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }