:root {
      --ink: #0a0b0e;
      --paper: #f2f2f7;
      --panel: #ffffff;
      --line: rgba(60, 60, 67, 0.12);
      --blue: #007aff;
      --blue-dark: #0a60d1;
      --green: #34c759;
      --green-dark: #248a3d;
      --muted: rgba(60, 60, 67, 0.6);
      --shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.theme-dark {
      --ink: #e8eef9;
      --paper: #0b0f15;
      --panel: #131a24;
      --line: rgba(231, 238, 251, 0.08);
      --blue: #63a2ff;
      --blue-dark: #2f6bd6;
      --green: #48d06a;
      --green-dark: #2aa24a;
      --muted: rgba(231, 238, 251, 0.62);
      --shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Space Grotesk", system-ui, sans-serif;
      background:
        radial-gradient(1000px 520px at 85% -10%, rgba(0, 122, 255, 0.14) 0%, rgba(0, 122, 255, 0) 60%),
        radial-gradient(900px 520px at -10% 15%, rgba(52, 199, 89, 0.12) 0%, rgba(52, 199, 89, 0) 60%),
        var(--paper);
      color: var(--ink);
      height: 100vh;
      overflow: hidden;
    }
    body.theme-dark {
      background:
        radial-gradient(900px 520px at 85% -10%, rgba(99, 162, 255, 0.18) 0%, rgba(11, 15, 21, 0) 60%),
        radial-gradient(800px 520px at -10% 20%, rgba(72, 208, 106, 0.16) 0%, rgba(11, 15, 21, 0) 60%),
        var(--paper);
    }

    .app {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 420px 1fr;
      gap: 16px;
      padding: 16px;
      height: 100vh;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .node-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      transition: opacity 0.15s ease;
    }
    .node-controls.hidden {
      display: none;
    }
    /* Hide WebSerial node controls + composer (read-only messages view). */
    #nodeControlsContainer {
      display: none !important;
    }
    .node-connection-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ff3b30;
      display: inline-flex;
      margin-right: 6px;
    }
    .node-connection-dot.connected {
      background: var(--green);
    }
    .node-status-text {
      font-size: 12px;
      color: var(--muted);
      margin-left: 8px;
    }
    .node-composer {
      border-top: 1px solid var(--line);
      padding: 12px;
      background: var(--panel);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .node-composer.hidden {
      display: none;
    }
    #nodeComposer {
      display: none !important;
    }
    .node-composer textarea {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--line);
      padding: 10px;
      font-family: "Space Grotesk", system-ui, sans-serif;
      min-height: 70px;
      resize: vertical;
      background: var(--paper);
      color: var(--ink);
    }
    .node-composer textarea:disabled {
      opacity: 0.6;
      background: rgba(0, 0, 0, 0.04);
    }
    .node-composer-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .node-composer .composer-status {
      font-size: 12px;
      color: var(--muted);
    }
    .message-mesh .bubble {
      border-color: var(--green);
      background: rgba(52, 199, 89, 0.08);
    }
    .message-internet .bubble {
      border-color: var(--blue);
      background: rgba(0, 122, 255, 0.08);
    }
    .message-mesh .meta .badge.mesh-badge,
    .message-internet .meta .badge.internet-badge {
      font-size: 10px;
      letter-spacing: 0.05em;
    }
    .badge.mesh-badge {
      background: var(--green);
      color: #fff;
    }
    .badge.internet-badge {
      background: var(--blue);
      color: #fff;
    }
    .msg-failed {
      font-size: 12px;
      color: #ff3b30;
    }

    .mesh-live-panel {
      display: none;
      flex-direction: column;
      gap: 16px;
      padding: 16px;
      border-radius: 18px;
      grid-column: 1 / -1;
      min-width: 0;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .mesh-live-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .mesh-live-title {
      font-size: 20px;
      font-weight: 600;
    }
    .mesh-live-header .muted {
      margin: 4px 0 0;
    }
    .mesh-live-daily {
      min-width: 220px;
      font-size: 14px;
      color: var(--muted);
      background: rgba(0, 122, 255, 0.08);
      border-radius: 12px;
      padding: 12px;
    }
    .mesh-live-grid {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px);
      gap: 16px;
      min-width: 0;
    }
    .mesh-live-stats {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    .mesh-live-stats.rank-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 0;
      border-bottom: none;
      background: transparent;
    }
    .mesh-live-card {
      background: rgba(0, 0, 0, 0.03);
      border-radius: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .accordion .mesh-live-card {
      border-color: var(--line);
    }
    .mesh-live-card strong {
      font-size: 28px;
      line-height: 1.2;
    }
    .mesh-live-card-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    /* Map removed: stats-only view */
    .mesh-live-right-pane {
      display: grid;
      gap: 16px;
      min-width: 0;
    }
    .mesh-live-visitor-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .visitor-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
      background: rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .visitor-card strong {
      font-size: 26px;
      line-height: 1.1;
    }
    .visitor-label {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .visitor-note {
      font-size: 13px;
      color: var(--muted);
    }
    .mesh-live-list-wrapper {
      background: rgba(0, 122, 255, 0.03);
      border-radius: 14px;
      padding: 12px;
      border: 1px solid rgba(0, 122, 255, 0.12);
    }
    .mesh-live-list-title {
      font-weight: 600;
      margin-bottom: 8px;
    }
    .mesh-live-list {
      display: grid;
      gap: 8px;
      max-height: 220px;
      overflow-y: auto;
    }
    .mesh-live-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--panel);
      border: 1px solid var(--line);
      gap: 10px;
    }
    .mesh-live-list-item strong {
      font-size: 14px;
      line-height: 1.2;
    }
    .mesh-live-list-item .mesh-live-badge {
      background: rgba(0, 122, 255, 0.12);
      color: var(--blue);
      font-size: 11px;
      border-radius: 999px;
      padding: 2px 8px;
    }
    .mesh-live-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mesh-live-topline-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .mesh-live-banner {
      display: none;
      border: 1px solid rgba(0, 122, 255, 0.16);
      background: rgba(0, 122, 255, 0.06);
      color: var(--muted);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.5;
    }
    .mesh-live-banner.warn {
      border-color: rgba(255, 149, 0, 0.18);
      background: rgba(255, 149, 0, 0.08);
    }
    .mesh-live-banner.error {
      border-color: rgba(255, 59, 48, 0.18);
      background: rgba(255, 59, 48, 0.08);
      color: #b42318;
    }
    .mesh-live-sections {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      min-width: 0;
    }
    .mesh-live-section {
      background: rgba(0, 0, 0, 0.03);
      border-radius: 14px;
      padding: 14px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      min-width: 0;
    }
    .mesh-live-section.panel-wide {
      grid-column: 1 / -1;
    }
    .mesh-live-section-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .mesh-live-stat-rows,
    .mesh-live-server-list,
    .mesh-live-link-list,
    .mesh-live-channel-list,
    .mesh-live-group-list {
      display: grid;
      gap: 8px;
    }
    .mesh-live-stat-row,
    .mesh-live-server-row,
    .mesh-live-link-row,
    .mesh-live-channel-row,
    .mesh-live-group-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--panel);
      border: 1px solid var(--line);
    }
    .mesh-live-stat-row strong,
    .mesh-live-server-row strong,
    .mesh-live-link-row strong,
    .mesh-live-channel-row strong,
    .mesh-live-group-row strong {
      font-size: 14px;
      line-height: 1.2;
    }
    .mesh-live-mini {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
    .mesh-live-node-split {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
    }
    .mesh-live-node-medium {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--panel);
      border: 1px solid var(--line);
      min-width: 0;
    }
    .mesh-live-node-medium-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .mesh-live-node-medium-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .mesh-live-node-medium-copy strong {
      font-size: 14px;
      line-height: 1.2;
    }
    .mesh-live-node-medium-copy span {
      font-size: 12px;
      color: var(--muted);
    }
    .mesh-live-traffic-wrap {
      min-height: 260px;
    }
    #meshLiveTrafficChart {
      width: 100%;
      height: 260px;
      display: block;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.05);
    }
    .mesh-live-bar-track {
      margin-top: 6px;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }
    .mesh-live-bar-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(0, 122, 255, 0.95), rgba(52, 199, 89, 0.85));
    }
    body.view-mesh-live {
      height: auto;
      min-height: 100vh;
      overflow: auto;
    }
    body.view-mesh-live .app {
      grid-template-columns: minmax(0, 1fr);
      height: auto;
      min-height: 100vh;
      align-content: start;
    }
    body.view-mesh-live .mesh-live-panel {
      display: flex;
      align-self: stretch;
    }

    @media (max-width: 1280px) {
      .mesh-live-grid {
        grid-template-columns: 1fr;
      }
      .mesh-live-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 960px) {
      .mesh-live-panel {
        padding: 14px;
        gap: 14px;
      }
      .mesh-live-stats.rank-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mesh-live-sections {
        grid-template-columns: 1fr;
      }
      .mesh-live-section.panel-wide {
        grid-column: auto;
      }
      .mesh-live-node-split {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .mesh-live-panel {
        padding: 12px;
      }
      .mesh-live-topline {
        align-items: flex-start;
      }
      .mesh-live-stats.rank-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mesh-live-right-pane {
        gap: 12px;
      }
      .mesh-live-daily,
      .visitor-card {
        padding: 10px 12px;
      }
      .visitor-card strong,
      .mesh-live-card strong {
        font-size: 22px;
      }
      .mesh-live-node-medium {
        flex-wrap: wrap;
      }
      .channel-discovery-copy,
      .channel-discovery-toolbar,
      .channel-box {
        border-radius: 16px;
      }
      .channel-directory-summary {
        align-items: flex-start;
        flex-direction: column;
      }
      .channel-directory-actions {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 420px) {
      .mesh-live-stats.rank-summary {
        grid-template-columns: 1fr;
      }
    }
    .sidebar-panel {
      min-height: 0;
    }

    .topbar {
      grid-column: 1 / -1;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 2px 12px;
      gap: 12px;
      min-height: 48px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      letter-spacing: 0.2px;
      flex: 0 0 auto;
    }

    .brand-logo {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: block;
      overflow: hidden;
      border: none;
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      min-width: 0;
    }

    .brand-text {
      display: grid;
      gap: 2px;
      line-height: 1.1;
    }

    .brand-text strong {
      font-size: 16px;
    }

    .brand-text span {
      font-size: 12px;
      color: var(--muted);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      display: inline-block;
      background: #ff3b30;
      box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
    }

    .status-dot.ok {
      background: #34c759;
      box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.15);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 16px;
      font-weight: 600;
      color: var(--muted);
      margin-left: auto;
    }

    .nav a {
      color: inherit;
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 10px;
    }

    .nav-menu {
      position: relative;
      flex: 0 0 auto;
    }

    .nav-menu-trigger {
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 10px;
      cursor: pointer;
    }

    .nav-menu-trigger.active {
      color: var(--ink);
      background: rgba(0, 122, 255, 0.12);
    }

    .nav-menu-panel {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      display: none;
      min-width: 180px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      z-index: 1200;
      gap: 6px;
    }

    .nav-menu.open .nav-menu-panel {
      display: grid;
    }

    .nav-menu-panel a {
      display: block;
      color: var(--ink);
      background: rgba(0, 122, 255, 0.08);
    }
    .region-menu-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 168px;
      min-width: 0;
    }
    .region-menu-icon {
      font-size: 16px;
      line-height: 1;
      flex: 0 0 auto;
    }
    .region-menu-label {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .region-menu-panel {
      min-width: 220px;
      max-width: min(320px, calc(100vw - 24px));
      max-height: min(60vh, 420px);
      overflow: auto;
      grid-template-columns: 1fr;
    }
    .region-menu-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      width: 100%;
      border: none;
      border-radius: 10px;
      padding: 8px 10px;
      background: rgba(0, 122, 255, 0.08);
      color: var(--ink);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }
    .region-menu-item.is-active {
      background: rgba(0, 122, 255, 0.16);
      color: var(--blue-dark);
    }
    .region-menu-item-icon {
      font-size: 16px;
      line-height: 1;
    }
    .region-menu-item-label {
      min-width: 0;
    }
    .region-menu-item-state {
      font-size: 11px;
      color: var(--muted);
    }
    .topbar-region-note {
      display: none;
    }

    .nav a.active {
      color: var(--ink);
      background: rgba(0, 122, 255, 0.12);
    }
    .nav [data-view="node-rank"],
    .mobile-menu [data-view="node-rank"] {
      display: none;
    }
    .menu-toggle {
      display: none;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      border-radius: 10px;
      padding: 0;
      width: 38px;
      height: 34px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
    .menu-toggle .burger {
      width: 18px;
      height: 12px;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .menu-toggle .burger span {
      display: block;
      height: 2px;
      border-radius: 999px;
      background: var(--ink);
    }
    .menu-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 900;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 56px;
      right: 0;
      bottom: 12px;
      width: min(86vw, 320px);
      z-index: 950;
      border: 1px solid var(--line);
      border-radius: 12px 0 0 12px;
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 10px;
      gap: 6px;
      flex-direction: column;
      align-items: stretch;
      transform: translateX(110%);
      transition: transform 0.2s ease;
      overflow: auto;
    }
    .mobile-menu a {
      display: block;
      padding: 8px 10px;
      border-radius: 10px;
      text-decoration: none;
      color: var(--ink);
      font-weight: 600;
      background: rgba(0, 122, 255, 0.08);
    }
    .mobile-menu a.active {
      background: rgba(0, 122, 255, 0.18);
    }
    .mobile-region-menu {
      display: grid;
      gap: 6px;
    }
    .mobile-region-menu .region-menu-item {
      background: rgba(0, 122, 255, 0.08);
    }
    .mobile-menu-group-title {
      margin: 6px 2px 2px;
      padding: 2px 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .mobile-nav {
      display: none;
      flex-direction: column;
      gap: 6px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
    }
    .mobile-nav a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(0, 122, 255, 0.08);
    }
    .mobile-nav a.active {
      background: rgba(0, 122, 255, 0.18);
    }
    .theme-toggle {
      position: relative;
      width: 38px;
      height: 34px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
    .theme-toggle:hover { border-color: rgba(0, 122, 255, 0.35); }
    .theme-toggle-icon { font-size: 16px; line-height: 1; color: #0a0b0e; }
    body.theme-dark .theme-toggle-icon { color: #fff; }
    .theme-toggle::after {
      content: attr(data-tooltip);
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      background: rgba(0, 0, 0, 0.86);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #fff;
      padding: 6px 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      z-index: 1200;
    }
    @media (hover: hover) and (pointer: fine) {
      .theme-toggle:hover::after { opacity: 1; }
    }

    .sidebar {
      padding: 14px 12px;
      gap: 10px;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      flex: 1 1 auto;
      max-height: 100%;
    }

    .sidebar-helper {
      display: none;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(0, 122, 255, 0.3);
      background: rgba(0, 122, 255, 0.08);
      color: var(--ink);
      font-size: 13px;
      line-height: 1.4;
    }
    .sidebar-helper p {
      margin: 6px 0 0;
      font-weight: 400;
    }
    body.theme-dark .sidebar-helper {
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.05);
    }

    #channels {
      display: grid;
      gap: 10px;
      overflow-x: hidden;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .content .title {
      position: sticky;
      top: 0;
      z-index: 4;
      background: var(--panel);
    }
    .channel-title {
      justify-content: space-between;
      gap: 8px;
    }
    .channel-title-label {
      font-weight: 700;
    }

    .title.column {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .chip {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-weight: 600;
    }
	    .chip-strong {
	      color: var(--ink);
	      font-weight: 700;
	      border-color: rgba(60, 60, 67, 0.35);
	      background: rgba(0, 0, 0, 0.06);
	    }

	    .kind-badge {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      padding: 2px 8px;
	      border-radius: 999px;
	      border: 1px solid #fff;
	      font-size: 10px;
	      font-weight: 800;
	      letter-spacing: 0.03em;
	      line-height: 1.2;
	      white-space: nowrap;
	      margin-left: 6px;
	      vertical-align: middle;
	    }
	    .kind-badge.kind-meshcore {
	      background: #0d1a2b;
	      color: #fff;
	    }
		    .kind-badge.kind-meshtastic {
		      background: #67EA94;
		      color: #0d1a2b;
		    }

		    .kind-tile {
		      width: 40px;
		      height: 40px;
		      border-radius: 14px;
		      display: inline-grid;
		      place-items: center;
		      flex: 0 0 auto;
		      box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14);
		      overflow: hidden;
		      vertical-align: middle;
		    }
		    .kind-tile-inline {
		      display: inline-flex;
		      margin-left: 6px;
		      vertical-align: middle;
		    }
		    body.theme-dark .kind-tile {
		      box-shadow: 0 16px 28px rgba(0, 0, 0, 0.5);
		    }
		    .kind-tile svg {
		      width: 26px;
		      height: 26px;
		    }
		    .kind-tile img {
		      width: 100%;
		      height: 100%;
		      display: block;
		      border-radius: inherit;
		    }
		    .kind-tile.kind-tile-mini {
		      width: 28px;
		      height: 28px;
		      border-radius: 10px;
		      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
		    }
		    body.theme-dark .kind-tile.kind-tile-mini {
		      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.48);
		    }
		    .kind-tile.kind-tile-mini svg {
		      width: 18px;
		      height: 18px;
		    }
		    .kind-tile.kind-meshtastic {
		      background: linear-gradient(145deg, #7de58a 0%, #4bc95f 45%, #1f8d30 100%);
		      border: 1px solid rgba(255, 255, 255, 0.8);
		      color: #2c323a;
		    }
		    body.theme-dark .kind-tile.kind-meshtastic {
		      border-color: rgba(255, 255, 255, 0.75);
		    }
		    .kind-tile.kind-meshcore {
		      background: linear-gradient(145deg, #2c323a 0%, #0d1a2b 100%);
		      border: 1px solid rgba(255, 255, 255, 0.14);
		      color: #fff;
		    }
		    body.theme-dark .kind-tile.kind-meshcore {
		      background: linear-gradient(145deg, #ffffff 0%, #edf1f7 100%);
		      border-color: rgba(10, 11, 14, 0.08);
		      color: #2c323a;
		    }
		    body.theme-dark .kind-tile.kind-meshcore img {
		      filter: invert(1);
		    }

    .btn {
      border: 1px solid var(--line);
      background: rgba(0, 122, 255, 0.1);
      color: var(--blue);
      padding: 6px 10px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
    }

    .btn:hover {
      background: rgba(0, 122, 255, 0.18);
    }

    .btn.primary {
      background: var(--blue);
      color: #fff;
    }

    .btn.primary:hover {
      background: var(--blue-dark);
    }

    .channel {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid transparent;
      cursor: pointer;
      overflow: hidden;
    }
    .channel > div { min-width: 0; }

    .channel.active {
      background: #e8f0ff;
      border-color: rgba(11, 95, 255, 0.2);
    }
    body.theme-dark .channel.active {
      background: rgba(99, 162, 255, 0.16);
      border-color: rgba(99, 162, 255, 0.4);
    }

    .channel.unread .name {
      font-weight: 800;
    }

    .badge-bubble {
      min-width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #007aff;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 6px;
    }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-weight: 700;
      color: #fff;
    }

    .channel .name {
      font-weight: 700;
      overflow: visible;
      text-overflow: unset;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .channel .snippet {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .channel .muted {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .channel-meta {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-top: 4px;
      min-width: 0;
    }
    .channel-meta .snippet {
      flex: 1 1 auto;
      min-width: 0;
    }
    .channel-time {
      font-size: 10px;
      color: var(--muted);
      white-space: nowrap;
    }

    .content {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .channel-selector {
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      box-shadow: var(--shadow);
    }
    @media (min-width: 861px) {
      .channel-selector { display: none; }
    }
    @media (max-width: 860px) {
      .channel-title-label { display: none; }
    }
    .channel-selector .badge-bubble {
      min-width: 18px;
      height: 18px;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
    }
    .channels-rail {
      display: none;
      position: fixed;
      left: 6px;
      top: 120px;
      z-index: 9;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      padding: 8px 10px;
      border-radius: 12px;
      box-shadow: var(--shadow);
      gap: 6px;
      align-items: center;
      font-weight: 700;
      cursor: pointer;
    }
    .channels-rail .badge-bubble { display: inline-flex; }

    .messages {
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow: auto;
    }

    .message {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 12px;
      animation: slideIn 400ms ease-out;
      min-width: 0;
    }

    .message .meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }
    .sender-gps-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      border: 1px solid rgba(255, 149, 0, 0.35);
      background: rgba(255, 149, 0, 0.12);
      color: #9a5b00;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      user-select: none;
      line-height: 1;
    }
    .sender-gps-indicator::after {
      content: "";
      position: absolute;
      width: 2px;
      height: 14px;
      background: currentColor;
      transform: rotate(-35deg);
      border-radius: 2px;
      opacity: 0.9;
    }
    .sender-gps-indicator.stale {
      border-color: rgba(255, 149, 0, 0.45);
      background: rgba(255, 149, 0, 0.18);
      color: #8a5100;
    }
    .sender-gps-indicator.implausible,
    .sender-gps-indicator.ambiguous {
      border-color: rgba(255, 59, 48, 0.45);
      background: rgba(255, 59, 48, 0.14);
      color: #9f1f1f;
    }
    body.theme-dark .sender-gps-indicator {
      border-color: rgba(255, 159, 10, 0.5);
      background: rgba(255, 159, 10, 0.18);
      color: #ffcf84;
    }
    body.theme-dark .sender-gps-indicator.implausible,
    body.theme-dark .sender-gps-indicator.ambiguous {
      border-color: rgba(255, 69, 58, 0.6);
      background: rgba(255, 69, 58, 0.18);
      color: #ffadad;
    }

    .bubble {
      padding: 10px 14px;
      border-radius: 14px;
      max-width: 520px;
      color: #fff;
      font-weight: 500;
      line-height: 1.35;
      box-shadow: 0 10px 24px rgba(10, 11, 14, 0.16);
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .bubble.mesh {
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    }

    .bubble.observer {
      background: linear-gradient(135deg, var(--green), var(--green-dark));
    }

    .bubble.mixed {
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      outline: 2px solid var(--green);
    }

    .msg-footer {
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .msg-footer a {
      text-decoration: underline;
    }
    .observer-tag {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(0, 200, 83, 0.35);
      background: rgba(0, 200, 83, 0.12);
      color: #00a849;
      font-size: 11px;
      font-weight: 700;
    }
    .repeater-tag {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(0, 122, 255, 0.35);
      background: rgba(0, 122, 255, 0.12);
      color: #007aff;
      font-size: 11px;
      font-weight: 700;
    }

    .msg-hops {
      color: var(--blue);
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }
    .msg-hops:hover { text-decoration: underline; }

    .msg-observers {
      color: var(--blue);
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }
    .msg-observers:hover { text-decoration: underline; }
    .msg-confidence {
      color: var(--blue);
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }
    .msg-confidence:hover { text-decoration: underline; }

    .analysis {
      display: grid;
      grid-template-rows: minmax(280px, 46vh) auto;
      min-height: 0;
      position: relative;
    }
    body.loading-share {
      background: #0a0b0e;
    }
    body.loading-share .analysis-panel {
      display: flex;
    }
    body.loading-share .route-backdrop {
      display: block;
    }
    body.loading-share .route-loading {
      display: flex;
    }
	    .route-loading {
	      position: absolute;
	      inset: 0;
	      display: none;
	      align-items: center;
	      justify-content: center;
	      flex-direction: column;
	      gap: 10px;
	      background: #0a0b0e;
	      color: #fff;
	      z-index: 1200;
	      text-align: center;
	      padding: 12px;
	    }
    .route-loading.active {
      display: flex;
    }
    .route-spinner {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      animation: spin 0.9s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .route-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 10010;
    }
	    .rank-detail-overlay {
	      position: fixed;
	      inset: 0;
	      display: none;
	      background: rgba(0, 0, 0, 0.4);
	      align-items: center;
	      justify-content: center;
	      z-index: 900;
	      padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)) 16px;
	      overflow-y: auto;
	      -webkit-overflow-scrolling: touch;
	    }
    .rank-detail-overlay.open {
      display: flex;
    }
	    .rank-detail-card {
	      background: var(--panel);
	      border-radius: 18px;
	      padding: 20px;
	      padding-right: 64px;
	      width: min(95vw, 820px);
	      max-height: 90vh;
	      overflow-y: auto;
	      box-shadow: 0 20px 50px rgba(0,0,0,0.25);
	      position: relative;
	    }
    .implausible-list {
      display: grid;
      gap: 10px;
      max-height: 70vh;
      overflow-y: auto;
      padding-right: 4px;
    }
    .implausible-row {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.02);
      font-size: 13px;
    }
    body.theme-dark .implausible-row {
      background: rgba(255, 255, 255, 0.04);
    }
    .implausible-title {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }
    .implausible-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12px;
      color: var(--muted);
    }
    .implausible-reason {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
    }
    .implausible-placeholder {
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
    }
    .rank-detail-close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 5;
    }
    .rank-detail-close button {
      font-size: 18px;
    }
    .id-clashes-section {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.02);
      margin-top: 10px;
      display: grid;
      gap: 8px;
    }
    body.theme-dark .id-clashes-section {
      background: rgba(255, 255, 255, 0.04);
    }
    .id-clashes-heading {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.01em;
    }
    .id-clashes-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }
    .id-clashes-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      display: grid;
      gap: 4px;
      background: rgba(0, 0, 0, 0.03);
    }
    .id-clashes-item.is-low {
      border-color: rgba(52, 199, 89, 0.9);
    }
    .id-clashes-item.is-medium {
      border-color: rgba(255, 149, 0, 0.95);
    }
    .id-clashes-item.is-high {
      border-color: rgba(255, 59, 48, 0.95);
    }
    .id-clashes-item.is-critical {
      border-color: rgba(191, 0, 0, 0.98);
      box-shadow: inset 0 0 0 1px rgba(191, 0, 0, 0.25);
    }
    body.theme-dark .id-clashes-item {
      background: rgba(255, 255, 255, 0.05);
    }
    .id-clashes-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }
    .id-clashes-item-meta {
      font-size: 12px;
      color: var(--muted);
    }
    .id-clashes-impact-badge {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .id-clashes-impact-badge.is-low {
      background: rgba(52, 199, 89, 0.16);
      color: #1a7f3e;
    }
    .id-clashes-impact-badge.is-medium {
      background: rgba(255, 149, 0, 0.18);
      color: #9a5a00;
    }
    .id-clashes-impact-badge.is-high {
      background: rgba(255, 59, 48, 0.16);
      color: #b0241b;
    }
    .id-clashes-impact-badge.is-critical {
      background: rgba(191, 0, 0, 0.18);
      color: #8f0000;
    }
    body.theme-dark .id-clashes-impact-badge.is-low {
      color: #7ee2a8;
    }
    body.theme-dark .id-clashes-impact-badge.is-medium {
      color: #ffc165;
    }
    body.theme-dark .id-clashes-impact-badge.is-high {
      color: #ff978f;
    }
    body.theme-dark .id-clashes-impact-badge.is-critical {
      color: #ff7a7a;
    }
    .id-clashes-empty {
      font-size: 12px;
      color: var(--muted);
    }
    .id-clashes-reservation-note {
      font-size: 12px;
      color: var(--muted);
    }
    .id-clashes-reserve-banner {
      border: 1px solid rgba(52, 199, 89, 0.55);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      color: var(--ink);
      background: rgba(52, 199, 89, 0.12);
    }
    body.theme-dark .id-clashes-reserve-banner {
      background: rgba(52, 199, 89, 0.15);
    }
    .id-clashes-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .id-clashes-reserve-btn {
      border: 1px solid #17a94f;
      background: #20c35a;
      color: #fff;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
      padding: 4px 10px;
      cursor: pointer;
    }
    .id-clashes-reserve-btn:hover {
      background: #1aab4f;
    }
    .id-clashes-reserve-btn.is-active {
      background: #0d7d36;
      border-color: #0d7d36;
    }
    .id-clashes-cancel-btn {
      border-color: #c62828;
      background: #d43a3a;
    }
    .id-clashes-cancel-btn:hover {
      background: #ba3030;
    }
    .confidence-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .confidence-meta {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 10px;
    }
    .confidence-map {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      height: 320px;
      margin-bottom: 12px;
      position: relative;
    }
    #confidenceMap {
      width: 100%;
      height: 100%;
    }
    #journeyMap {
      width: 100%;
      height: 100%;
    }
    .journey-loading {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      background: rgba(255, 255, 255, 0.88);
      color: var(--ink);
      z-index: 10;
      text-align: center;
      padding: 12px;
    }
    body.theme-dark .journey-loading {
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
    }
    .journey-loading.active {
      display: flex;
    }
    .journey-loading .spinner {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, 0.18);
      border-top-color: var(--blue);
      animation: rankSpin 1s linear infinite;
    }
    body.theme-dark .journey-loading .spinner {
      border-color: rgba(255, 255, 255, 0.28);
      border-top-color: #fff;
    }
    .journey-loading-text {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .confidence-deadends {
      display: grid;
      gap: 8px;
    }
    .confidence-deadend {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--muted);
    }
    .confidence-deadend strong {
      color: var(--ink);
      font-weight: 600;
    }
    .journey-routes {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }
    .journey-route {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      font-size: 12px;
      color: var(--muted);
      background: rgba(0, 0, 0, 0.02);
    }
    .journey-route.mine {
      border-color: rgba(52, 199, 89, 0.75);
      box-shadow: 0 10px 22px rgba(52, 199, 89, 0.08);
    }
    .journey-route.selected {
      outline: 2px solid rgba(0, 122, 255, 0.25);
    }
    body.theme-dark .journey-route {
      background: rgba(255, 255, 255, 0.04);
    }
    .journey-route strong {
      color: var(--ink);
      font-weight: 700;
    }
    .journey-route-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 6px;
    }
    .journey-route-path {
      margin-top: 8px;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .observed-sticky {
      position: sticky;
      top: 0;
      z-index: 5;
      background: var(--panel);
      padding-bottom: 10px;
    }
    .observed-sticky::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 10px;
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.06));
      pointer-events: none;
    }
    body.theme-dark .observed-sticky::after {
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.22));
    }
    .route-map-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      border-radius: 14px;
      overflow: hidden;
    }
    .route-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 0;
      font-size: 12px;
      color: var(--muted);
    }
    .link-evidence-popup {
      width: min(92vw, 560px);
      max-width: 100%;
      max-height: min(62vh, 520px);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      padding-right: 4px;
      box-sizing: border-box;
    }
    .link-evidence-route {
      margin-top: 5px;
      line-height: 1.45;
      word-break: break-word;
      overflow-wrap: anywhere;
      font-size: 12px;
    }
    .link-evidence-shell .leaflet-popup-content-wrapper {
      max-width: calc(100vw - 24px);
      overflow: hidden;
      box-sizing: border-box;
    }
    .link-evidence-shell .leaflet-popup-content {
      margin: 10px 12px;
      width: min(92vw, 560px) !important;
      max-width: calc(100vw - 48px);
      box-sizing: border-box;
    }
    .link-evidence-hop {
      display: inline-flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px;
      padding: 1px 4px;
      margin: 0 1px;
      border-radius: 6px;
      background: rgba(0, 122, 255, 0.08);
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .link-evidence-hop.hot-a {
      border: 1px solid rgba(11, 90, 212, 0.45);
      background: rgba(11, 90, 212, 0.14);
      color: #0b5ad4;
      font-weight: 700;
    }
	    .link-evidence-hop.hot-b {
	      border: 1px solid rgba(255, 149, 0, 0.48);
	      background: rgba(255, 149, 0, 0.15);
	      color: #b06b00;
	      font-weight: 700;
	    }
	    .link-evidence-hop.hot-focus {
	      border: 1px solid rgba(22, 163, 74, 0.55);
	      background: rgba(22, 163, 74, 0.14);
	      color: #166534;
	      font-weight: 800;
	    }
    .link-evidence-hop-hash {
      opacity: 0.75;
      font-size: 11px;
    }
    .link-evidence-route-arrow {
      opacity: 0.5;
      margin: 0 2px;
    }
    .link-evidence-open-route,
    .link-evidence-observed-route {
      margin-top: 6px;
      border: 1px solid rgba(11, 90, 212, 0.4);
      background: rgba(11, 90, 212, 0.1);
      color: #0b5ad4;
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      max-width: 100%;
      white-space: normal;
      text-align: left;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }
    .link-evidence-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .link-evidence-section-title {
      margin-top: 8px;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .link-evidence-message-box {
      margin-top: 4px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      line-height: 1.35;
      white-space: pre-wrap;
      word-break: break-word;
    }
    body.theme-dark .link-evidence-message-box {
      border-color: rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
    }
    @media (max-width: 860px) {
      .link-evidence-shell .leaflet-popup-content-wrapper {
        max-width: calc(100vw - 16px);
      }
      .link-evidence-shell .leaflet-popup-content {
        width: calc(100vw - 56px) !important;
        max-width: calc(100vw - 56px);
        margin: 8px 10px;
      }
      .link-evidence-popup {
        width: 100%;
        max-height: 52vh;
      }
    }
    .route-legend-floating {
      position: absolute;
      left: 10px;
      bottom: 10px;
      z-index: 600;
      display: grid;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
      max-width: min(88%, 320px);
      pointer-events: none;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    body.theme-dark .route-legend-floating {
      background: rgba(16, 18, 24, 0.9);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    }
    .route-legend-metrics {
      display: grid;
      gap: 4px;
    }
    .route-legend-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 12px;
      color: var(--muted);
    }
    .route-legend-row strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
    }
    .route-legend-items {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .route-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.04);
    }
    body.theme-dark .route-legend-item {
      background: rgba(255, 255, 255, 0.08);
    }
    .route-legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
    .route-metrics-hidden {
      display: none;
    }
	    .meshflow-legend {
	      background: rgba(255,255,255,0.92);
	      border: 1px solid var(--line);
	      border-radius: 12px;
	      padding: 10px 12px;
	      font-size: 13px;
	      color: var(--ink);
	      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	      backdrop-filter: blur(8px);
	      -webkit-backdrop-filter: blur(8px);
	      width: min(320px, calc(100vw - 24px));
	      max-height: min(50vh, 420px);
	      overflow-y: auto;
	      -webkit-overflow-scrolling: touch;
	    }
	    body.theme-dark .meshflow-legend {
	      background: rgba(22,22,26,0.92);
	      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
	    }
	    .meshflow-legend-body {
	      display: grid;
	      gap: 8px;
	    }
	    .meshflow-controls-panel {
	      background: rgba(255,255,255,0.92);
	      border: 1px solid var(--line);
	      border-radius: 12px;
	      padding: 10px 12px;
	      font-size: 13px;
	      color: var(--ink);
	      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	      backdrop-filter: blur(8px);
	      -webkit-backdrop-filter: blur(8px);
	      width: min(320px, calc(100vw - 24px));
	      max-height: min(46vh, 420px);
	      overflow-y: auto;
	      -webkit-overflow-scrolling: touch;
	    }
	    body.theme-dark .meshflow-controls-panel {
	      background: rgba(22,22,26,0.92);
	      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
	    }
	    .meshflow-controls-panel.collapsed {
	      padding-bottom: 10px;
	    }
	    .meshflow-controls-toggle {
	      width: 100%;
	      border: none;
	      background: transparent;
	      color: var(--ink);
	      padding: 0;
	      margin: 0;
	      display: grid;
	      grid-template-columns: 1fr auto;
	      gap: 10px;
	      align-items: center;
	      cursor: pointer;
	      text-align: left;
	    }
	    .meshflow-controls-toggle strong {
	      font-size: 14px;
	      line-height: 1.2;
	    }
	    .meshflow-controls-toggle span {
	      font-size: 11px;
	      color: var(--muted);
	      line-height: 1.3;
	    }
	    .meshflow-controls-toggle-state {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      min-width: 42px;
	      padding: 5px 10px;
	      border-radius: 999px;
	      background: rgba(0, 122, 255, 0.10);
	      color: var(--blue);
	      font-size: 11px;
	      font-weight: 800;
	    }
	    .meshflow-controls-body {
	      display: grid;
	      gap: 10px;
	      margin-top: 10px;
	      padding-top: 10px;
	      border-top: 1px solid rgba(0, 0, 0, 0.08);
	    }
	    body.theme-dark .meshflow-controls-body {
	      border-top-color: rgba(255, 255, 255, 0.10);
	    }
	    .meshflow-controls-panel.collapsed .meshflow-controls-body {
	      display: none;
	    }
	    .meshflow-controls-body .meshflow-legend-dock-source,
	    .meshflow-controls-body .meshflow-controls {
	      display: grid;
	      gap: 10px;
	    }
	    .meshflow-controls-body .meshflow-controls {
	      margin-left: 0;
	      align-items: stretch;
	    }
	    .meshflow-controls-body .meshflow-toggle-wrap,
	    .meshflow-controls-body .meshflow-window,
      .meshflow-controls-body .meshflow-filter {
	      width: 100%;
	    }
	    .meshflow-controls-body .meshflow-window {
	      display: grid;
	      grid-template-columns: auto minmax(0, 1fr) auto;
	    }
	    .meshflow-controls-body .meshflow-window input[type="range"] {
	      width: 100%;
	      min-width: 0;
	    }
      .meshflow-controls-body .meshflow-filter {
        display: grid;
        gap: 6px;
      }
      .meshflow-filter-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
      }
      .meshflow-filter-note {
        font-size: 11px;
        line-height: 1.35;
        color: var(--muted);
      }
	    .meshflow-controls-body .meshflow-switch-block {
	      width: 100%;
	      justify-content: space-between;
	      align-items: flex-start;
	    }
	    .meshflow-controls-body .meshflow-help-link {
	      justify-self: flex-start;
	    }
	    .meshflow-live-list {
	      display: grid;
	      gap: 6px;
	      margin-top: 6px;
	    }
	    .meshflow-live-row {
	      display: grid;
	      grid-template-columns: 12px 1fr auto;
	      align-items: center;
	      gap: 8px;
	      padding: 5px 6px;
	      border-radius: 8px;
	      background: rgba(0,0,0,0.03);
	      min-width: 0;
	    }
	    body.theme-dark .meshflow-live-row {
	      background: rgba(255,255,255,0.07);
	    }
	    .meshflow-live-row.current {
	      outline: 1px solid rgba(11,90,212,0.35);
	      background: rgba(11,90,212,0.10);
	    }
	    .meshflow-live-swatch {
	      width: 10px;
	      height: 10px;
	      border-radius: 999px;
	      display: inline-block;
	      border: 1px solid rgba(0,0,0,0.25);
	    }
	    .meshflow-live-name {
	      font-size: 12px;
	      font-weight: 600;
	      color: var(--ink);
	      white-space: nowrap;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      min-width: 0;
	    }
	    .meshflow-live-count {
	      font-size: 11px;
	      font-variant-numeric: tabular-nums;
	      color: var(--muted);
	      white-space: nowrap;
	    }
	    .meshflow-live-chip {
	      display: inline-flex;
	      align-items: center;
	      gap: 4px;
	      padding: 2px 7px;
	      border-radius: 999px;
	      border: 1px solid rgba(191, 145, 0, 0.35);
	      background: rgba(255, 191, 0, 0.16);
	      color: #8a5a00;
	      font-size: 10px;
	      font-weight: 800;
	      line-height: 1;
	      margin-left: 6px;
	      vertical-align: middle;
	    }
	    body.theme-dark .meshflow-live-chip {
	      border-color: rgba(255, 215, 96, 0.35);
	      background: rgba(255, 215, 96, 0.16);
	      color: #ffd86b;
	    }
	    @media (max-width: 860px) {
	      body.view-meshscore {
	        height: auto;
	        min-height: 100vh;
	        overflow: auto;
	      }
	      body.view-meshscore .app {
	        grid-template-columns: minmax(0, 1fr);
	        height: auto;
	        min-height: 100vh;
	        align-content: start;
          overflow: visible;
	      }
	      body.view-meshscore .meshscore-panel {
	        overflow: visible;
          min-height: 0;
	      }
	      body.view-meshscore .meshscore-body {
	        height: auto;
	        overflow: visible;
	      }
	      body.view-meshscore .meshscore-right {
	        overflow: visible;
          min-height: 0;
	      }
	      .meshflow-legend {
	        width: min(240px, calc(100vw - 18px));
	        max-height: min(20vh, 160px);
	        font-size: 12px;
	        padding: 8px 10px;
	      }
	      .meshflow-controls-panel {
	        width: min(360px, calc(100vw - 18px));
	        padding: 10px 12px;
	        max-height: none;
	        overflow: visible;
	      }
	      .meshflow-controls-body {
	        gap: 8px;
	        margin-top: 8px;
	        padding-top: 8px;
	      }
	      .meshflow-live-row {
	        grid-template-columns: 12px 1fr auto;
	        gap: 6px;
	        padding: 4px 5px;
	      }
	      #meshFlowMap {
	        height: clamp(250px, 42vh, 400px);
	        min-height: 250px;
	        max-height: calc(100vh - 220px);
	      }
	    }
    @supports (height: 1svh) {
      @media (max-width: 860px) {
        .meshflow-legend {
          max-height: min(20svh, 160px);
        }
        .meshflow-controls-panel {
          max-height: none;
        }
        #meshFlowMap {
          height: clamp(250px, 42svh, 400px);
          max-height: calc(100svh - 220px);
        }
      }
    }
    .neighbor-map-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1200;
      padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)) 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .neighbor-map-modal.open { display: flex; }
    .neighbor-map-card {
      width: min(92vw, 720px);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      display: grid;
      gap: 12px;
      padding: 14px;
      max-height: 90vh;
      overflow: hidden;
    }
    .neighbor-map-header {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel);
      padding-bottom: 8px;
    }
    .neighbor-map {
      height: 320px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .neighbor-map-list {
      margin-top: 12px;
      display: grid;
      gap: 8px;
      max-height: 32vh;
      overflow: auto;
      padding-right: 4px;
    }

	    .neighbor-map-item {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 12px;
	      padding: 8px 10px;
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: rgba(0, 0, 0, 0.02);
	      font-size: 12px;
	    }
	    .neighbor-map-item.selected {
	      border-color: rgba(175, 82, 222, 0.65);
	      background: rgba(175, 82, 222, 0.08);
	    }

    body.theme-dark .neighbor-map-item {
      background: rgba(255, 255, 255, 0.04);
    }

    .neighbor-map-item .neighbor-meta {
      color: var(--muted);
      font-size: 11px;
    }
    .neighbor-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .neighbor-badge-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .neighbor-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
    }
    .neighbor-badge {
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
    }
    .neighbor-badge.mutual {
      background: #34c759;
    }
    .neighbor-badge.incoming {
      background: rgba(255, 149, 0, 0.95);
    }
    .neighbor-badge.outgoing {
      background: rgba(0, 122, 255, 0.9);
    }
    .neighbor-map-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }
	    .neighbor-map-legend-item {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      padding: 4px 8px;
	      border-radius: 999px;
	      background: rgba(0, 0, 0, 0.04);
	    }
	    .neighbor-map-legend-item.toggle {
	      cursor: pointer;
	      user-select: none;
	      border: 1px solid rgba(0, 0, 0, 0.08);
	      transition: background 120ms ease, opacity 120ms ease, border-color 120ms ease;
	    }
	    .neighbor-map-legend-item.toggle.inactive {
	      opacity: 0.55;
	      background: rgba(0, 0, 0, 0.025);
	      border-color: rgba(0, 0, 0, 0.05);
	    }
	    body.theme-dark .neighbor-map-legend-item.toggle {
	      border-color: rgba(255, 255, 255, 0.14);
	      background: rgba(255, 255, 255, 0.06);
	    }
	    body.theme-dark .neighbor-map-legend-item.toggle.inactive {
	      opacity: 0.55;
	      background: rgba(255, 255, 255, 0.03);
	      border-color: rgba(255, 255, 255, 0.09);
	    }
    .neighbor-map-legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    .rank-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
    }

    .siblings-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
      overflow: auto;
    }

    .siblings-body {
      display: grid;
      gap: 14px;
      padding: 14px 16px 18px;
      min-height: 0;
    }

    .siblings-stats {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 12px;
      text-align: left;
      min-width: 210px;
    }

    .siblings-legend {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
    }

    .siblings-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.04);
    }

    .siblings-legend-swatch {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      display: inline-block;
    }

    .siblings-grid-wrap {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
      max-height: min(74vh, calc(100dvh - 240px));
    }

    .siblings-table {
      border-collapse: collapse;
      width: max-content;
      min-width: 100%;
      table-layout: auto;
      font-size: clamp(10px, 1.1vw, 13px);
    }

    .siblings-table th,
    .siblings-table td {
      border: 1px solid var(--line);
      text-align: center;
      padding: 0;
      width: clamp(44px, 5vw, 68px);
      min-width: clamp(44px, 5vw, 68px);
      height: clamp(34px, 4.8vw, 58px);
      box-sizing: border-box;
    }

    .siblings-table th {
      background: var(--panel);
      color: var(--muted);
      font-weight: 700;
      position: sticky;
      z-index: 2;
    }

    .siblings-table .corner-head {
      left: 0;
      z-index: 4;
    }

    .siblings-table .col-head {
      top: 0;
      z-index: 3;
    }

    .siblings-table .row-head {
      left: 0;
      z-index: 3;
    }

    .siblings-cell {
      cursor: pointer;
      transition: transform 100ms ease, border-color 100ms ease, background 120ms ease;
      user-select: none;
      position: relative;
    }

    .siblings-cell:hover {
      transform: scale(1.03);
      z-index: 1;
    }

    .siblings-cell-inner {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      line-height: 1;
      gap: 2px;
    }

    .siblings-cell-code {
      font-weight: 700;
      color: var(--ink);
      letter-spacing: 0.02em;
    }

    .siblings-cell-count {
      font-size: 10px;
      color: var(--muted);
      font-weight: 700;
      min-height: 10px;
    }

    .siblings-cell.is-unused {
      background: rgba(52, 199, 89, 0.22);
    }

    .siblings-cell.is-unavailable {
      background: rgba(0, 122, 255, 0.24);
    }

    .siblings-cell.is-amber {
      background: rgba(255, 149, 0, 0.28);
    }

    .siblings-cell.is-red {
      background: rgba(255, 59, 48, 0.33);
    }

    .siblings-cell.is-red-dark {
      background: rgba(186, 26, 26, 0.48);
    }

    .siblings-cell.is-selected {
      box-shadow: inset 0 0 0 2px #007aff;
    }

    .siblings-footer {
      display: grid;
      gap: 10px;
    }

    .siblings-explainer {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .siblings-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      background: rgba(0, 0, 0, 0.02);
      display: grid;
      gap: 4px;
    }

    .siblings-item-main {
      font-size: 13px;
      color: var(--ink);
      font-weight: 700;
      line-height: 1.25;
      word-break: break-word;
    }

    .siblings-item-meta {
      font-size: 11px;
      color: var(--muted);
      word-break: break-all;
    }

    .siblings-status {
      font-size: 12px;
      color: var(--muted);
    }

    .siblings-modal-card {
      width: min(720px, calc(100vw - 28px));
      max-height: min(82vh, calc(100dvh - 28px));
      display: grid;
      gap: 10px;
    }

    .siblings-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .siblings-modal-list {
      display: grid;
      gap: 8px;
      max-height: 58vh;
      overflow: auto;
      padding-right: 4px;
    }

	    .node-rank-panel {
	      grid-column: 1 / -1;
	      display: none;
	      min-height: 0;
	    }

	    .room-rank-panel {
	      grid-column: 1 / -1;
	      display: none;
	      min-height: 0;
	    }

	    .rotm-panel {
	      grid-column: 1 / -1;
	      display: none;
	      min-height: 0;
	      overflow: auto;
	    }

    .rotm-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px;
      min-height: 0;
      overflow: auto;
    }

    .rotm-info-link {
      font-size: inherit;
      font-weight: 700;
      color: var(--blue-dark);
      cursor: pointer;
      border: 0;
      background: transparent;
      padding: 0;
    }

    .rotm-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 16px;
      min-height: 70vh;
    }

    .rotm-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 520px;
      background: var(--panel);
    }

    .rotm-card-title {
      font-weight: 700;
      font-size: 14px;
    }

    .rotm-settings {
      display: grid;
      gap: 10px;
    }

    .rotm-settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .rotm-settings-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .rotm-settings-note {
      font-size: 12px;
      color: var(--muted);
    }

    .rotm-feed {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: auto;
      padding-right: 6px;
      min-height: 420px;
    }

    .rotm-feed-row {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      background: rgba(0, 0, 0, 0.02);
    }

    body.theme-dark .rotm-feed-row {
      background: rgba(255, 255, 255, 0.03);
    }

    .rotm-feed-row-compact {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) minmax(170px, 230px);
      gap: 12px;
      align-items: flex-start;
      background: rgba(0, 0, 0, 0.02);
      font-size: 13px;
      line-height: 1.4;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .rotm-feed-row-compact.rotm-cq-fresh {
      border-color: rgba(52, 199, 89, 0.6);
      background: rgba(52, 199, 89, 0.1);
    }

    .rotm-feed-row-compact.rotm-cq-warm {
      border-color: rgba(255, 149, 0, 0.6);
      background: rgba(255, 149, 0, 0.12);
    }

    .rotm-feed-row-compact.rotm-cq-late {
      border-color: rgba(255, 59, 48, 0.62);
      background: rgba(255, 59, 48, 0.12);
    }

    .rotm-feed-row-compact.rotm-cq-urgent {
      animation: rotmCqUrgentBlink 0.9s steps(2, end) infinite;
    }

    @keyframes rotmCqUrgentBlink {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.08); }
      50% { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.65); }
    }

    .rotm-feed-row-compact.rotm-qso-hit {
      border-color: rgba(52, 199, 89, 0.75);
      box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.25), 0 10px 24px rgba(52, 199, 89, 0.2);
      animation: rotmQsoPulse 1.4s ease-out;
    }

    @keyframes rotmQsoPulse {
      0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); }
      100% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
    }

    body.theme-dark .rotm-feed-row-compact {
      background: rgba(255, 255, 255, 0.03);
    }

    .rotm-feed-time {
      color: var(--muted);
      font-weight: 600;
      min-width: 64px;
      font-size: 12px;
      padding-top: 2px;
    }

    .rotm-feed-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .rotm-feed-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .rotm-feed-cq,
    .rotm-feed-repeater,
    .rotm-feed-response {
      color: var(--ink);
      font-weight: 600;
    }

    .rotm-feed-text {
      color: var(--ink);
      font-size: 12px;
      word-break: break-word;
    }

    .rotm-feed-stats-compact {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .rotm-feed-timer-compact {
      display: grid;
      gap: 2px;
      justify-items: end;
      font-weight: 700;
    }

    .rotm-feed-countdown-label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .rotm-cq-timer {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.03em;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }

    .rotm-feed-right {
      display: grid;
      gap: 8px;
      min-width: 160px;
      align-content: start;
    }

    .rotm-qso-clock {
      display: grid;
      place-items: center;
      border-radius: 14px;
      padding: 10px 8px;
      border: 1px solid rgba(0, 122, 255, 0.25);
      background: rgba(0, 122, 255, 0.08);
      color: #0a60d1;
      font-weight: 800;
      letter-spacing: 0.04em;
      font-size: 30px;
      line-height: 1;
      min-height: 64px;
    }

    .rotm-qso-clock.open {
      border-color: rgba(0, 122, 255, 0.35);
      background: rgba(0, 122, 255, 0.12);
      color: #0a60d1;
    }

    .rotm-qso-clock.urgent {
      border-color: rgba(255, 59, 48, 0.45);
      background: rgba(255, 59, 48, 0.14);
      color: #cc2b22;
      animation: rotmUrgentPulse 1s steps(2, end) infinite;
    }

    .rotm-qso-clock.closed {
      border-color: rgba(52, 199, 89, 0.4);
      background: rgba(52, 199, 89, 0.14);
      color: #1f6d39;
      font-size: 22px;
    }

    @keyframes rotmUrgentPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.03); }
      100% { transform: scale(1); }
    }

    .rotm-qso-clock-label {
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .rotm-method-lights {
      display: grid;
      gap: 6px;
    }

    .rotm-method-light {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 6px;
      border-radius: 10px;
      padding: 4px 6px;
      border: 1px solid rgba(60, 60, 67, 0.18);
      background: rgba(60, 60, 67, 0.06);
      color: var(--muted);
      font-size: 11px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .rotm-method-light strong {
      font-size: 12px;
      color: inherit;
    }

    .rotm-method-light .kind-tile.kind-tile-mini {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      box-shadow: none;
    }

    .rotm-method-icon-web {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      background: rgba(255, 149, 0, 0.2);
      color: #a86400;
      font-size: 12px;
      line-height: 1;
    }

    .rotm-method-light.active {
      color: var(--ink);
      border-color: rgba(52, 199, 89, 0.45);
      background: rgba(52, 199, 89, 0.16);
      box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.2), 0 6px 14px rgba(52, 199, 89, 0.16);
    }

    .rotm-method-light.active.meshcore {
      border-color: rgba(0, 122, 255, 0.45);
      background: rgba(0, 122, 255, 0.14);
      box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.24), 0 6px 14px rgba(0, 122, 255, 0.18);
    }

    .rotm-method-light.active.web {
      border-color: rgba(255, 149, 0, 0.45);
      background: rgba(255, 149, 0, 0.16);
      box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.2), 0 6px 14px rgba(255, 149, 0, 0.18);
    }

    .rotm-feed-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }

    .rotm-qso-added {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      background: rgba(52, 199, 89, 0.18);
      color: #1f6d39;
    }

    body.theme-dark .rotm-qso-added {
      background: rgba(52, 199, 89, 0.26);
      color: #8de9ad;
    }

    .rotm-live-cq-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 4px;
      padding: 2px 7px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: #ffe600;
      color: #101010;
      border: 1px solid rgba(0, 0, 0, 0.35);
      animation: rotmLiveCqFlash 1s steps(2, end) infinite;
    }

    @keyframes rotmLiveCqFlash {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

    .rotm-qso-badges {
      display: grid;
      gap: 6px;
    }

    .rotm-qso-badge-row {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      padding: 4px 6px;
      border: 1px solid rgba(52, 199, 89, 0.35);
      background: rgba(52, 199, 89, 0.12);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }

    .rotm-qso-badge-empty {
      font-size: 11px;
      color: var(--muted);
      text-align: right;
      font-style: italic;
    }

    body.theme-dark .rotm-qso-badge-row {
      border-color: rgba(52, 199, 89, 0.55);
      background: rgba(52, 199, 89, 0.2);
      color: #def9e6;
    }

    .rotm-web-reply {
      display: grid;
      gap: 8px;
      margin-top: 6px;
    }

    .rotm-web-reply textarea {
      min-height: 58px;
      resize: vertical;
      font-family: inherit;
      font-size: 13px;
      line-height: 1.4;
    }

    .rotm-web-reply-actions {
      display: flex;
      justify-content: flex-end;
    }

    .rotm-feed-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .rotm-feed-sender {
      font-weight: 700;
      color: var(--ink);
    }

    .rotm-feed-body {
      font-size: 12px;
      line-height: 1.45;
    }

    .rotm-feed-col {
      display: grid;
      gap: 6px;
    }

    .rotm-feed-col-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    .rotm-feed-timer {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      text-align: right;
    }

    .rotm-badge {
      align-self: flex-start;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(60, 60, 67, 0.12);
      color: var(--muted);
    }

    .rotm-badge.ok {
      background: #d7f3e2;
      color: #1f6d39;
    }

    .rotm-badge.cq {
      background: #e0ecff;
      color: #0a60d1;
    }

    .rotm-badge.response {
      background: #fff1da;
      color: #a86400;
    }

    .rotm-repeater-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 999px;
      background: #fff1da;
      color: #a86400;
    }

    .rotm-repeater-badge.ok {
      background: #d7f3e2;
      color: #1f6d39;
    }

    body.theme-dark .rotm-repeater-badge {
      background: rgba(255, 149, 0, 0.2);
      color: #ffd08a;
    }

    body.theme-dark .rotm-repeater-badge.ok {
      background: rgba(52, 199, 89, 0.2);
      color: #7ae6a1;
    }

    .rotm-feed-stats {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    .rotm-medium-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      border: 1px solid rgba(60, 60, 67, 0.2);
      background: rgba(60, 60, 67, 0.08);
      color: var(--ink);
    }

    .rotm-medium-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 2px;
      border: 1px solid rgba(60, 60, 67, 0.2);
      background: rgba(60, 60, 67, 0.08);
      color: var(--ink);
    }

    .rotm-medium-logo .kind-tile-inline {
      margin-left: 0;
    }

    .rotm-medium-logo.meshcore {
      border-color: rgba(0, 122, 255, 0.35);
      background: rgba(0, 122, 255, 0.12);
      color: #0a60d1;
    }

    .rotm-medium-logo.meshtastic {
      border-color: rgba(52, 199, 89, 0.4);
      background: rgba(52, 199, 89, 0.14);
      color: #1f6d39;
    }

    .rotm-medium-badge.meshcore {
      border-color: rgba(0, 122, 255, 0.35);
      background: rgba(0, 122, 255, 0.12);
      color: #0a60d1;
    }

    .rotm-medium-badge.meshtastic {
      border-color: rgba(52, 199, 89, 0.4);
      background: rgba(52, 199, 89, 0.14);
      color: #1f6d39;
    }

    .rotm-medium-badge.web {
      border-color: rgba(255, 149, 0, 0.35);
      background: rgba(255, 149, 0, 0.14);
      color: #a86400;
    }

    body.theme-dark .rotm-medium-badge.meshcore {
      color: #9dc1ff;
      border-color: rgba(110, 160, 255, 0.45);
      background: rgba(0, 122, 255, 0.2);
    }

    body.theme-dark .rotm-medium-badge.meshtastic {
      color: #7ae6a1;
      border-color: rgba(77, 214, 122, 0.5);
      background: rgba(52, 199, 89, 0.22);
    }

    body.theme-dark .rotm-medium-badge.web {
      color: #ffd08a;
      border-color: rgba(255, 187, 74, 0.5);
      background: rgba(255, 149, 0, 0.22);
    }

    body.theme-dark .rotm-medium-logo.meshcore {
      color: #9dc1ff;
      border-color: rgba(110, 160, 255, 0.45);
      background: rgba(0, 122, 255, 0.2);
    }

    body.theme-dark .rotm-medium-logo.meshtastic {
      color: #7ae6a1;
      border-color: rgba(77, 214, 122, 0.5);
      background: rgba(52, 199, 89, 0.22);
    }

    body.theme-dark .rotm-badge.ok { background: rgba(52, 199, 89, 0.2); color: #7ae6a1; }
    body.theme-dark .rotm-badge.cq { background: rgba(0, 122, 255, 0.2); color: #9dc1ff; }
    body.theme-dark .rotm-badge.response { background: rgba(255, 149, 0, 0.2); color: #ffd08a; }

    .rotm-leaderboard {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: auto;
      min-height: 420px;
    }

    .rotm-leader-row {
      display: grid;
      grid-template-columns: 36px 1fr 86px 86px 86px 110px;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      cursor: pointer;
    }

    .rotm-leader-header {
      cursor: default;
      background: rgba(0, 0, 0, 0.02);
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    body.theme-dark .rotm-leader-header {
      background: rgba(255, 255, 255, 0.04);
    }

    .rotm-leader-row.active {
      border-color: var(--blue);
      box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
    }

    .rotm-leader-rank {
      font-weight: 700;
      color: var(--muted);
    }

    .rotm-leader-node {
      font-weight: 700;
    }

    .rotm-leader-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .rotm-leader-media {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }

    .rotm-map-title {
      font-weight: 700;
      font-size: 13px;
    }

    #rotmQsoMap {
      width: 100%;
      height: 320px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .rotm-claim-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .rotm-claim-chip {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.02);
    }

    body.theme-dark .rotm-claim-chip {
      background: rgba(255, 255, 255, 0.05);
    }

    .rotm-qso-log {
      max-height: 360px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .rotm-qso-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      background: transparent;
    }

    .rotm-qso-table th,
    .rotm-qso-table td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    .rotm-qso-table th {
      position: sticky;
      top: 0;
      background: var(--panel);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    body.theme-dark .rotm-qso-table th {
      background: var(--panel);
    }

    .rotm-qso-table tr:last-child td {
      border-bottom: 0;
    }

    .rotm-qso-msg {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }

    .rotm-qso-override {
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .rotm-qso-select {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 12px;
      background: var(--panel);
      color: inherit;
    }

    .rotm-qso-note {
      font-size: 11px;
      color: var(--muted);
    }

    .rank-body {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 16px;
      padding: 16px;
      min-height: 0;
      height: 100%;
    }

    .rank-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      background: #fafafa;
    }

    .rank-helper-row {
      padding: 8px 14px;
      border-bottom: 1px solid var(--line);
      background: #f8f8f8;
      text-align: right;
    }

    body.theme-dark .rank-helper-row {
      background: var(--panel);
    }

    .rank-helper-row .link-btn {
      font-size: 13px;
      padding: 4px 10px;
    }

      .summary-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        background: #ffffff;
        display: grid;
        gap: 4px;
        font-size: 12px;
        color: var(--muted);
      }

    .summary-card strong {
      font-size: 16px;
      color: var(--ink);
    }

    .rank-map {
      border-radius: 16px;
      border: 1px solid var(--line);
      overflow: hidden;
      min-height: 360px;
      display: flex;
      flex-direction: column;
    }

	    .rank-map-note {
	      font-size: 13px;
	      color: var(--muted);
	      padding: 12px 16px 0;
	      line-height: 1.4;
	      text-align: center;
	    }
	    .rank-map-mode {
	      margin-top: 6px;
	      display: inline-block;
	      padding: 3px 10px;
	      border-radius: 999px;
	      border: 1px solid var(--line);
	      font-size: 11px;
	      font-weight: 700;
	      letter-spacing: 0.02em;
	      color: var(--ink);
	      background: rgba(0, 122, 255, 0.08);
	    }
	    .rank-heat-legend {
	      margin-top: 8px;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      flex-wrap: wrap;
	      gap: 8px;
	    }
	    .rank-heat-key {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      padding: 2px 8px;
	      border-radius: 999px;
	      border: 1px solid var(--line);
	      background: rgba(255, 255, 255, 0.72);
	      color: var(--ink);
	      font-size: 11px;
	      font-weight: 700;
	      letter-spacing: 0.01em;
	    }
	    body.theme-dark .rank-heat-key {
	      background: rgba(20, 20, 20, 0.72);
	    }
	    .rank-heat-key i {
	      width: 9px;
	      height: 9px;
	      border-radius: 50%;
	      display: inline-block;
	      border: 1px solid rgba(0, 0, 0, 0.15);
	    }
	    .rank-heat-key.bad i { background: #ff3b30; }
	    .rank-heat-key.fair i { background: #ff9500; }
	    .rank-heat-key.good i { background: #ffd60a; }
	    .rank-heat-key.strong i { background: #34c759; }

	    #rankMap {
	      width: 100%;
	      flex: 1;
	      min-height: 320px;
	      height: auto;
	    }

	    #roomRankMap {
	      width: 100%;
	      flex: 1;
	      min-height: 320px;
	      height: auto;
	    }

	    #observerRankMap {
	      width: 100%;
	      height: 100%;
	      min-height: 360px;
	    }
      .map-expand-host {
        position: relative;
      }
      body.map-expanded-active {
        overflow: hidden;
      }
      .map-expand-btn {
        position: absolute;
        top: auto;
        bottom: 12px;
        right: 12px;
        z-index: 1100;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.94);
        color: var(--ink);
        border-radius: 999px;
        padding: 7px 12px;
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(10, 11, 14, 0.14);
      }
      .map-expand-btn:hover {
        background: rgba(255, 255, 255, 1);
      }
      body.theme-dark .map-expand-btn {
        background: rgba(19, 26, 36, 0.9);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--ink);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
      }
      body.theme-dark .map-expand-btn:hover {
        background: rgba(19, 26, 36, 0.98);
      }
      .map-expanded-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom)) 14px;
        background: rgba(8, 12, 18, 0.72);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 10060;
      }
      .map-expanded-overlay.open {
        display: flex;
      }
      .map-expanded-dialog {
        width: min(96vw, 1200px);
        height: min(calc(100dvh - 28px - var(--safe-top) - var(--safe-bottom)), 920px);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
      }
      .map-expanded-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.92);
      }
      .map-expanded-title {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .map-expanded-title strong {
        font-size: 15px;
        line-height: 1.2;
      }
      .map-expanded-title span {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.35;
      }
      .map-expanded-body {
        min-height: 0;
        display: flex;
        background:
          radial-gradient(circle at top left, rgba(0, 122, 255, 0.08), transparent 38%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
      }
      .map-expanded-target {
        flex: 1 1 auto;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
      }
      .map-expanded-target .map-expand-btn {
        display: none;
      }
      body.theme-dark .map-expanded-dialog {
        background: #101821;
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
      }
      body.theme-dark .map-expanded-header {
        background: rgba(16, 24, 33, 0.96);
        border-bottom-color: rgba(255, 255, 255, 0.1);
      }
      @media (max-width: 860px) {
        .map-expanded-overlay {
          padding: calc(8px + var(--safe-top)) 8px calc(8px + var(--safe-bottom)) 8px;
        }
        .map-expanded-dialog {
          width: 100%;
          height: min(calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom)), 1000px);
          border-radius: 18px;
        }
        .map-expanded-header {
          padding: 12px 12px 10px;
        }
      }

    .rank-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      height: 100%;
    }

    .spotter-details {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 10px 20px rgba(10, 11, 14, 0.08);
      overflow: hidden;
    }
    body.theme-dark .spotter-details {
      background: rgba(19, 26, 36, 0.92);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    }
    .spotter-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 10px 12px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
      user-select: none;
    }
    .spotter-details > summary::-webkit-details-marker { display: none; }
    .spotter-summary-title { font-weight: 700; }
    .spotter-summary-hint { font-size: 12px; color: var(--muted); }
    .spotter-body {
      border-top: 1px solid var(--line);
      padding: 10px 12px 12px;
      display: grid;
      gap: 10px;
    }
    .spotter-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }
    .spotter-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .spotter-grid .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .spotter-grid .field label {
      font-size: 11px;
      color: var(--muted);
    }
    .spotter-grid .field input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      background: var(--paper);
      color: var(--ink);
      outline: none;
    }
    .spotter-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .spotter-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .spotter-check input { accent-color: var(--blue); }
    .spotter-status {
      font-size: 12px;
      color: var(--muted);
      flex: 1;
      min-width: 160px;
    }
    .spotter-results {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: rgba(10, 11, 14, 0.03);
      display: grid;
      gap: 10px;
    }
    body.theme-dark .spotter-results { background: rgba(0, 0, 0, 0.18); }
    .spotter-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }
    .spotter-metrics strong { color: var(--ink); font-size: 13px; }
    .spotter-list-title {
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .spotter-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 260px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding-right: 2px;
    }
    .spotter-item {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px 10px;
      background: var(--panel);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    .spotter-item:hover {
      border-color: rgba(0, 122, 255, 0.35);
      transform: translateY(-1px);
    }
    .spotter-item-title { font-weight: 700; font-size: 13px; }
    .spotter-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .spotter-pill {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      white-space: nowrap;
      font-family: "IBM Plex Mono", monospace;
    }
    .spotter-pill.ok {
      border-color: rgba(52, 199, 89, 0.35);
      background: rgba(52, 199, 89, 0.14);
    }
    .spotter-pill.bad {
      border-color: rgba(255, 59, 48, 0.35);
      background: rgba(255, 59, 48, 0.14);
    }
    .spotter-advanced,
    .spotter-explain {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.55);
    }
    body.theme-dark .spotter-advanced,
    body.theme-dark .spotter-explain {
      background: rgba(19, 26, 36, 0.55);
    }
    .spotter-advanced > summary,
    .spotter-explain > summary {
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
    }
    .spotter-explain-body p {
      margin: 10px 0 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }
    @media (max-width: 860px) {
      .spotter-grid { grid-template-columns: 1fr; }
      .spotter-metrics { grid-template-columns: 1fr; }
      .spotter-status { min-width: 100%; }
    }

    .rank-search {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      background: #ffffff;
      outline: none;
      box-shadow: 0 6px 16px rgba(10, 11, 14, 0.06);
      margin-bottom: 6px;
    }

    .share-landing {
      position: fixed;
      inset: 0;
      background: rgba(5, 7, 12, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 32px 16px;
      z-index: 2000;
    }
    body.share-active .share-landing {
      display: flex;
    }
    body.share-active {
      height: auto;
      overflow: auto;
    }
    body.share-active .app,
    body.share-active .menu-backdrop,
    body.share-active .route-backdrop {
      display: none;
    }
    .share-card {
      width: min(760px, 100%);
      background: var(--panel);
      border-radius: 18px;
      padding: 28px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .share-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }
    .share-title {
      font-size: 22px;
      font-weight: 600;
    }
    .share-subtitle {
      font-size: 13px;
      color: var(--muted);
    }
    .share-status {
      font-size: 13px;
      color: var(--muted);
    }
    .share-error {
      color: #ff2d55;
      font-size: 13px;
      min-height: 20px;
    }
    .share-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .share-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
      color: var(--muted);
    }
    .share-row strong {
      font-size: 14px;
      color: var(--ink);
    }
    .share-path {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 240px;
      overflow-y: auto;
    }
    .share-path-item {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.02);
    }
    .share-observers {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
      color: var(--muted);
      max-height: 160px;
      overflow-y: auto;
    }
    .share-observer {
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.03);
    }
    .share-actions {
      display: flex;
      justify-content: flex-end;
    }
    .share-close {
      border: none;
      background: none;
      color: var(--muted);
      font-size: 18px;
      cursor: pointer;
    }

    .rank-loading {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .rank-loading.active {
      display: flex;
    }

    .rank-loading .spinner {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, 0.15);
      border-top-color: var(--blue);
      animation: rankSpin 1s linear infinite;
    }

    @keyframes rankSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes pulse {
      0% { opacity: 0.6; }
      50% { opacity: 1; }
      100% { opacity: 0.6; }
    }

    .rank-status {
      display: none;
      font-size: 12px;
      color: var(--muted);
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      margin-top: 8px;
    }

    .rank-status.active {
      display: block;
    }

    .rank-skeleton {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      animation: pulse 1.2s ease-in-out infinite;
    }

    .rank-skeleton-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
    }

    .rank-skeleton-lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .rank-skeleton-lines span {
      height: 10px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
    }

    .rank-skeleton-lines span:nth-child(2) {
      width: 60%;
    }

    .rank-skeleton-lines span:nth-child(3) {
      width: 40%;
    }

    .rank-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }

    .rank-marker-toggle label {
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }


    .rank-debug {
      display: none;
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 1000;
      padding: 10px 12px;
      background: rgba(32, 32, 32, 0.9);
      color: #fff;
      font-size: 11px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      line-height: 1.4;
      min-width: 150px;
    }

    .rank-scroll {
      overflow: auto;
      padding-right: 6px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      flex: 1;
    }
    .rank-scroll #rankList,
    .rank-scroll #nodeRankList,
    .rank-scroll #observerRankList {
      min-height: 0;
    }

    .rank-search::placeholder {
      color: rgba(60, 60, 67, 0.45);
    }
    .rank-search-hint {
      font-size: 11px;
      color: var(--muted);
      min-height: 18px;
      line-height: 1.3;
    }

    .rank-item {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      display: grid;
      gap: 4px;
      background: #fafafa;
    }


    .rank-item.hidden {
      opacity: 0.45;
      filter: grayscale(0.4);
    }

    .observer-admin-controls {
      display: grid;
      gap: 8px;
      margin-top: 6px;
      padding-top: 8px;
      border-top: 1px dashed rgba(15, 23, 42, 0.12);
    }

    .observer-admin-meta {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }

    .observer-admin-meta strong {
      color: var(--ink);
      font-weight: 700;
    }

    .observer-admin-controls .account-gps-edit {
      margin: 0;
    }

    .observer-admin-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .rank-item.focused {
      border-color: rgba(0, 122, 255, 0.4);
      background: rgba(0, 122, 255, 0.1);
      box-shadow: 0 10px 24px rgba(0, 122, 255, 0.18);
    }

    .rank-item .row {
      font-size: 12px;
      color: var(--muted);
    }

	    .rank-item .score {
	      font-weight: 700;
	      font-size: 14px;
	      display: flex;
	      align-items: flex-start;
	      gap: 8px;
	    }
	    .rank-title {
	      display: inline-flex;
	      align-items: center;
	      flex-wrap: wrap;
	      gap: 8px;
	    }

    .observer-status-dots {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
    }

    .observer-status-dots .status-line {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .observer-status-dots .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
    }

    .observer-status-dots .status-dot.green { background: #34c759; }
    .observer-status-dots .status-dot.amber { background: #ffcc00; }
    .observer-status-dots .status-dot.red { background: #ff3b30; }

    .rank-dot {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }

    .observer-repeaters {
      margin-top: 8px;
      border-top: 1px solid var(--line);
      padding-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      display: none;
    }
    .observer-repeaters.open {
      display: flex;
    }
    .observer-repeaters-toggle {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .observer-repeaters-toggle .hint {
      font-weight: 400;
      font-size: 12px;
      color: var(--muted);
    }
    .observer-repeater-row {
      display: grid;
      grid-template-columns: 1fr 110px;
      gap: 10px;
      font-size: 13px;
      color: var(--muted);
      align-items: center;
    }
    .observer-repeater-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .observer-repeater-row.child .observer-repeater-name {
      padding-left: 12px;
      color: var(--muted);
    }
    .observer-repeater-row.unknown .observer-repeater-name {
      color: var(--muted);
      font-style: italic;
    }
    .observer-repeater-row span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .observer-repeater-name {
      font-weight: 500;
      color: var(--ink);
    }
    .observer-repeater-count {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .rank-meta-alert {
      color: #ff3b30;
      font-weight: 600;
    }

    .rank-item .rank-item-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .rank-item .rank-num {
      min-width: 1.8em;
      font-weight: 700;
      color: var(--muted);
    }
    .rank-item .rank-item-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .rank-item .badge-row-wrap {
      margin-top: 6px;
    }
    .score-formula-list {
      margin: 8px 0 0;
      padding-left: 1.2em;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }
    .score-formula-list li { margin-bottom: 6px; }

    .meshscore-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
    }

    .rf-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
    }

    .rf-body {
      display: grid;
      grid-template-columns: 1.4fr 0.9fr;
      gap: 16px;
      padding: 16px;
      min-height: 0;
      height: 100%;
    }

    .rf-table {
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .rf-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: #ffffff;
    }

    .rf-input {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      font-family: "IBM Plex Mono", monospace;
      background: var(--panel);
      color: var(--ink);
    }

    .rf-list {
      overflow: auto;
      min-height: 0;
    }

    .rf-row {
      display: grid;
      grid-template-columns: 90px 110px 90px 140px minmax(160px, 2fr) 140px 60px 60px 60px 60px 70px;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      cursor: pointer;
      align-items: center;
    }
    .rf-row.rf-child {
      font-size: 11px;
      opacity: 0.85;
      padding-left: 28px;
      cursor: default;
    }
    .rf-row.rf-child:hover { background: transparent; }
    .rf-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      font-weight: 700;
      cursor: pointer;
      line-height: 1;
    }
    .rf-row.rf-child.is-hidden { display: none; }

    .rf-row:hover {
      background: #f7f7f7;
    }

    .rf-row.rf-header {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f4f6fb;
      font-weight: 700;
      color: #5b6b84;
      cursor: default;
    }

    .rf-type {
      font-weight: 700;
      color: #fff;
      border-radius: 8px;
      padding: 2px 6px;
      display: inline-flex;
      justify-content: center;
      background: #007aff;
      font-size: 11px;
    }

    .rf-detail {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      background: #ffffff;
      overflow: auto;
      min-height: 0;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .rf-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: #fafafa;
      font-size: 12px;
      color: var(--muted);
    }

    .rf-summary strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      margin-top: 2px;
    }

    .rf-hex {
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      line-height: 1.4;
      background: #f7f7f7;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid var(--line);
      word-break: break-all;
    }

    .rf-kv {
      font-size: 12px;
      color: var(--muted);
      display: grid;
      gap: 4px;
    }

	    .meshscore-body {
	      padding: 0;
	      display: flex;
	      flex: 1;
	      min-height: 0;
	      overflow: hidden;
	    }
	    .meshscore-panel > .title {
	      font-size: 18px;
	      font-weight: 900;
	    }
	    .meshscore-layout {
	      display: grid;
	      grid-template-columns: 1fr;
	      gap: 0;
	      align-items: stretch;
	      width: 100%;
	      min-height: 0;
	    }
	    .meshscore-left {
	      display: none;
	    }
	    .meshscore-right {
	      border: none;
	      border-radius: 0;
	      background: var(--panel);
	      overflow: hidden;
	      min-height: 0;
	      display: grid;
	      grid-template-rows: auto 1fr;
	    }
	    .meshflow-header {
	      padding: 12px 16px 10px;
	      border-bottom: 1px solid var(--line);
	      display: flex;
	      justify-content: space-between;
	      gap: 12px;
	      align-items: center;
	      flex-wrap: wrap;
	      min-height: 0;
	    }
	    .meshflow-head {
	      display: grid;
	      gap: 4px;
	      min-width: 0;
	    }
	    .meshflow-title {
	      font-weight: 900;
	      font-size: 18px;
	      letter-spacing: 0.2px;
	    }
	    .meshflow-meta {
	      font-size: 13px;
	      color: var(--muted);
	    }
	    .meshflow-meta-row {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 10px;
	      align-items: center;
	    }
	    .meshflow-help-link {
	      border: none;
	      background: none;
	      padding: 0;
	      margin: 0;
	      color: var(--blue);
	      font-size: 13px;
	      font-weight: 700;
	      text-decoration: underline;
	      cursor: pointer;
	    }
	    .meshflow-help-link:hover {
	      color: var(--blue-dark);
	    }
	    .meshflow-controls {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 12px;
	      align-items: center;
	      margin-left: auto;
	    }
	    .meshflow-legend-dock-source {
	      display: none;
	    }
	    .meshflow-toggle-wrap {
	      display: inline-flex;
	      flex-direction: column;
	      align-items: flex-start;
	      gap: 6px;
	      min-width: 0;
	    }
	    .meshflow-switch-block {
	      display: inline-flex;
	      align-items: center;
	      gap: 12px;
	      min-width: 0;
	    }
	    .meshflow-switch-copy {
	      display: flex;
	      flex-direction: column;
	      gap: 2px;
	      min-width: 0;
	    }
	    .meshflow-switch-label {
	      font-size: 13px;
	      font-weight: 800;
	      color: var(--ink);
	      line-height: 1.2;
	    }
	    .meshflow-switch-note {
	      font-size: 11px;
	      color: var(--muted);
	      line-height: 1.35;
	    }
	    .meshflow-switch {
	      flex: 0 0 auto;
	    }
	    .meshflow-info {
	      width: 22px;
	      height: 22px;
	      border-radius: 999px;
	      border: 1px solid var(--line);
	      background: rgba(0, 0, 0, 0.04);
	      color: var(--ink);
	      font-weight: 900;
	      font-size: 12px;
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      cursor: pointer;
	      line-height: 1;
	    }
	    body.theme-dark .meshflow-info {
	      background: rgba(0, 0, 0, 0.65);
	      color: #ffffff;
	      border-color: rgba(255, 255, 255, 0.16);
	    }
	    .meshflow-accuracy-card {
	      width: min(760px, 100%);
	      max-height: 90vh;
	    }
	    .meshflow-accuracy-header {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 12px;
	      position: sticky;
	      top: 0;
	      z-index: 3;
	      background: var(--panel);
	      padding-top: 2px;
	      padding-bottom: 10px;
	      border-bottom: 1px solid var(--line);
	    }
	    .meshflow-accuracy-close {
	      margin-left: auto;
	      flex: 0 0 auto;
	    }
	    .meshflow-accuracy-body {
	      display: grid;
	      gap: 10px;
	      color: var(--muted);
	      line-height: 1.55;
	    }
	    .meshflow-accuracy-body h4 {
	      margin: 8px 0 0 0;
	      color: var(--ink);
	      font-size: 15px;
	      line-height: 1.35;
	    }
	    .meshflow-accuracy-body p {
	      margin: 0;
	    }
	    .meshflow-accuracy-body ul {
	      margin: 0;
	      padding-left: 20px;
	      display: grid;
	      gap: 4px;
	    }
	    .meshflow-window {
	      display: inline-flex;
	      gap: 10px;
	      align-items: center;
	      font-size: 13px;
	      color: var(--ink);
	      font-weight: 700;
	    }
	    .meshflow-window input[type="range"] {
	      width: min(220px, 52vw);
	    }
	    .meshflow-window-label {
	      font-size: 12px;
	      letter-spacing: 0.08em;
	      text-transform: uppercase;
	      color: var(--muted);
	      font-weight: 800;
	    }
	    .meshflow-window-value {
	      font-family: "IBM Plex Mono", monospace;
	      font-size: 12px;
	      color: var(--muted);
	      font-weight: 800;
	      min-width: 3.5em;
	      text-align: right;
	    }
	    #meshFlowMap {
	      height: 100%;
	      width: 100%;
	      min-height: 0;
	    }
    .meshscore-hero {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 16px;
      background: #ffffff;
      display: grid;
      gap: 10px;
    }

    .meshscore-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .meshscore-chart {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      background: #ffffff;
      display: grid;
      gap: 10px;
    }

    .range-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .range-tabs button {
      border: 1px solid var(--line);
      background: #f7f7f7;
      border-radius: 999px;
      padding: 6px 10px;
      font-weight: 600;
      cursor: pointer;
    }

    .range-tabs button.active {
      background: rgba(0, 122, 255, 0.12);
      color: var(--blue);
    }

    .meshscore-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    #routeMap {
      height: 100%;
      min-height: 240px;
      width: 100%;
      background: repeating-linear-gradient(
        135deg,
        rgba(10, 11, 14, 0.04),
        rgba(10, 11, 14, 0.04) 14px,
        transparent 14px,
        transparent 28px
      );
    }

    .analysis-body {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: auto;
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      display: none;
      align-items: center;
      justify-content: center;
      padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)) 16px;
      z-index: 9999;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .modal.open {
      display: flex;
    }

    .modal-card {
      width: min(420px, 100%);
      max-height: 75vh;
      overflow: auto;
      background: var(--panel);
      border-radius: 18px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: 18px;
      display: grid;
      gap: 12px;
      position: relative;
    }
    .modal-card.has-top-close {
      padding-right: 60px;
    }
    .popup-close-btn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.94);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 0;
      flex-shrink: 0;
      box-shadow: 0 8px 18px rgba(10, 11, 14, 0.12);
    }
    .popup-close-btn:hover {
      background: rgba(255, 255, 255, 1);
    }
    .popup-close-btn.modal-top-close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 5;
    }
    body.theme-dark .popup-close-btn {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
      color: var(--ink);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .popup-close-btn:hover {
      background: rgba(255, 255, 255, 0.14);
    }
    .score-breakdown-card {
      width: min(520px, 100%);
      max-height: 90vh;
    }
    .score-breakdown-header {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel);
      padding-top: 2px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }
    .score-breakdown-title {
      margin: 0;
      font-size: 1.1rem;
    }
    .score-breakdown-close {
      font-size: 18px;
    }
    .score-breakdown-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .score-breakdown-total {
      font-weight: 600;
    }
    .score-breakdown-focus {
      font-size: 0.9rem;
      color: var(--muted);
    }

    /* Mobile modal ergonomics: avoid iOS "vh" / browser chrome hiding close buttons. */
	    @supports (height: 100dvh) {
	      .modal-card { max-height: min(75vh, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))); }
	      .score-breakdown-card { max-height: min(90vh, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))); }
	      .neighbor-map-card { max-height: min(90vh, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))); }
	      .evidence-packet-modal-card { max-height: min(90vh, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))); }
	      .rank-detail-card { max-height: min(90vh, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))); }
	    }

    @media (max-width: 860px) {
      .modal { align-items: flex-start; }
      .neighbor-map-modal { align-items: flex-start; }
      .neighbor-map-card { overflow: auto; }
      .neighbor-map { height: 240px; }
    }
    .score-factor-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .score-factor {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }
    .score-factor:hover {
      border-color: var(--ink);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    .score-factor-title-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .score-factor-label {
      font-weight: 600;
    }
    .score-factor-pct {
      font-size: 0.9rem;
      font-weight: 600;
    }
    .score-factor-status {
      font-size: 0.85rem;
      color: var(--muted);
    }
    .score-factor-bar-wrap {
      width: 100%;
      height: 6px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
    }
    .score-factor-bar {
      height: 100%;
      border-radius: 999px;
    }
    .score-factor-pts {
      font-size: 0.82rem;
      color: var(--muted);
    }
    .score-breakdown-note {
      font-size: 0.85rem;
      color: var(--muted);
    }
    .score-explain-card {
      width: min(460px, 100%);
      max-height: 90vh;
    }
    .score-explain-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .score-explain-close {
      font-size: 18px;
    }
    .score-explain-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .score-explain-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .score-explain-section strong {
      font-weight: 600;
    }
    .score-explain-grades {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.85rem;
    }
    .score-explain-grades span {
      display: inline-flex;
      gap: 4px;
      font-weight: 500;
    }

    .route-modal-card {
      width: min(760px, 100%);
    }

    .evidence-packet-modal-card {
      width: min(860px, 100%);
      max-height: 90vh;
    }
    .evidence-packet-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .evidence-packet-field {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: rgba(0, 0, 0, 0.02);
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .evidence-packet-label {
      font-size: 12px;
      color: var(--muted);
    }
    .evidence-packet-value {
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      color: var(--ink);
      word-break: break-word;
    }
    .evidence-packet-span2 {
      grid-column: 1 / -1;
    }
	    .evidence-packet-hex {
	      font-family: "IBM Plex Mono", monospace;
	      font-size: 11px;
	      line-height: 1.35;
      white-space: pre-wrap;
      word-break: break-all;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      max-height: 220px;
      overflow: auto;
	      background: rgba(0, 0, 0, 0.04);
	    }
	    .hexviz {
	      border: 1px solid var(--line);
	      border-radius: 12px;
	      overflow: hidden;
	      background: #0c111b;
	    }
	    .hexviz-legend {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 10px;
	      padding: 10px 12px;
	      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	      background: rgba(255, 255, 255, 0.03);
	      color: rgba(210, 217, 230, 0.92);
	      font-size: 12px;
	      line-height: 1.2;
	    }
	    .hexviz-key {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      white-space: nowrap;
	    }
	    .hexviz-swatch {
	      width: 10px;
	      height: 10px;
	      border-radius: 3px;
	      display: inline-block;
	      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
	    }
	    .hexviz-box {
	      padding: 10px 12px;
	      font-family: "IBM Plex Mono", monospace;
	      font-size: 12px;
	      line-height: 1.55;
	      white-space: pre-wrap;
	      word-break: break-word;
	      color: rgba(210, 217, 230, 0.92);
	    }
	    .hexviz-byte {
	      display: inline-block;
	      padding: 2px 4px;
	      border-radius: 6px;
	      margin: 1px 0;
	    }
		    .hexviz-byte.hl-type { background: #ff3b30; color: #ffffff; font-weight: 800; }
		    .hexviz-byte.hl-flags { background: #34c759; color: #04130a; font-weight: 900; }
		    .hexviz-byte.hl-from { background: #64d2ff; color: #04161e; font-weight: 900; }
		    .hexviz-byte.hl-to { background: #ff9f0a; color: #1f1200; font-weight: 900; }
		    .hexviz-byte.hl-pub { background: #0a84ff; color: #ffffff; font-weight: 900; }
		    .hexviz-byte.hl-name { background: #ffd60a; color: #1f1200; font-weight: 900; }
		    .hexviz-byte.hl-path { background: rgba(255, 255, 255, 0.06); }
		    .hexviz-byte.hl-hop0 { box-shadow: 0 0 0 2px rgba(255, 159, 10, 0.95) inset; }
		    .hexviz-byte.hl-hop1 { box-shadow: 0 0 0 2px rgba(175, 82, 222, 0.95) inset; }
		    .hexviz-raw {
		      border-top: 1px solid rgba(255, 255, 255, 0.10);
		      background: rgba(0, 0, 0, 0.28);
		      padding: 10px 12px;
	      max-height: 160px;
	      overflow: auto;
	      font-family: "IBM Plex Mono", monospace;
	      font-size: 11px;
	      line-height: 1.35;
	      white-space: pre-wrap;
	      word-break: break-all;
	      color: rgba(210, 217, 230, 0.86);
	    }
	    .hexviz-note {
	      padding: 10px 12px 0 12px;
	      font-size: 12px;
	      color: rgba(210, 217, 230, 0.78);
	    }
	    @media (max-width: 620px) {
	      .evidence-packet-grid { grid-template-columns: 1fr; }
	    }

    .flash-panel {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      background: #ffffff;
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .flash-panel.open {
      display: flex;
    }

    .flash-log {
      background: #0c111b;
      color: #d2d9e6;
      border-radius: 12px;
      padding: 12px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      min-height: 180px;
      max-height: 280px;
      overflow: auto;
      white-space: pre-wrap;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .flash-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
    }

    .flash-row strong {
      color: var(--ink);
    }

    .route-override-list {
      display: grid;
      gap: 10px;
      max-height: 320px;
      overflow: auto;
      padding-right: 4px;
    }

    .route-override-row {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: #fafafa;
      display: grid;
      gap: 8px;
    }

    .route-override-label {
      display: grid;
      gap: 4px;
      font-size: 12px;
      color: var(--muted);
    }

    .route-override-label strong {
      font-size: 13px;
      color: var(--ink);
    }

    .route-override-select {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      background: #ffffff;
    }

    .route-override-status {
      font-size: 12px;
      color: var(--muted);
      min-height: 18px;
    }

    .route-override-empty {
      font-size: 13px;
      color: var(--muted);
      padding: 12px 0;
    }

    .field {
      display: grid;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
    }

    .field input {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 13px;
      background: var(--panel);
      color: var(--ink);
    }
    body.theme-dark .rf-controls,
    body.theme-dark .rf-detail,
    body.theme-dark .meshscore-hero,
    body.theme-dark .meshscore-chart,
    body.theme-dark .flash-panel {
      background: var(--panel);
    }
    body.theme-dark .rf-row:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    body.theme-dark .rf-row.rf-header {
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
    }
    body.theme-dark .rf-summary,
    body.theme-dark .rf-hex,
    body.theme-dark .route-override-row {
      background: rgba(255, 255, 255, 0.03);
    }
    body.theme-dark .evidence-packet-field {
      background: rgba(255, 255, 255, 0.03);
    }
    body.theme-dark .evidence-packet-hex {
      background: rgba(255, 255, 255, 0.04);
    }
    body.theme-dark .range-tabs button {
      background: rgba(255, 255, 255, 0.04);
      color: var(--ink);
    }
    body.theme-dark .route-override-select,
    body.theme-dark .rf-input {
      background: var(--panel);
      color: var(--ink);
    }

    body.view-rotm {
      overflow: auto;
      height: auto;
    }

    body.view-rotm .app {
      height: auto;
      min-height: 100vh;
    }

    body.view-rotm .rotm-panel,
    body.view-rotm .rotm-body {
      overflow: visible;
      height: auto;
    }
    body.theme-dark .rf-controls,
    body.theme-dark .rf-detail,
    body.theme-dark .rf-summary,
    body.theme-dark .rf-hex,
    body.theme-dark .meshscore-hero,
    body.theme-dark .meshscore-chart,
    body.theme-dark .flash-panel,
    body.theme-dark .route-override-row,
    body.theme-dark .route-override-select,
    body.theme-dark .field input,
    body.theme-dark .observer-grid input,
    body.theme-dark .observer-grid select,
    body.theme-dark .rank-body,
    body.theme-dark .rank-map,
    body.theme-dark .observer-rank-body,
    body.theme-dark .observer-rank-map,
    body.theme-dark .observer-map,
    body.theme-dark .analysis-body,
    body.theme-dark .meshscore-body,
    body.theme-dark .rank-body,
    body.theme-dark .rf-body,
    body.theme-dark .rf-table,
    body.theme-dark .rf-row,
    body.theme-dark .route-override-list,
    body.theme-dark .modal-card {
      background: var(--panel);
      color: var(--ink);
    }
    body.theme-dark .rf-row.rf-header {
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
    }
    body.theme-dark .rf-row:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    body.theme-dark .range-tabs button.active {
      background: rgba(99, 162, 255, 0.16);
      color: var(--blue);
    }
    body.theme-dark .modal {
      background: rgba(0, 0, 0, 0.6);
    }
    body.theme-dark #meshChart {
      background: rgba(255, 255, 255, 0.04) !important;
    }
    body.theme-dark .rank-summary {
      background: rgba(255, 255, 255, 0.03);
    }
    body.theme-dark .summary-card {
      background: var(--panel);
      color: var(--muted);
    }
    body.theme-dark .rank-search {
      background: var(--panel);
      color: var(--ink);
      box-shadow: none;
    }
    body.theme-dark .rank-item {
      background: rgba(255, 255, 255, 0.04);
    }
    body.theme-dark .rank-summary,
    body.theme-dark .summary-card,
    body.theme-dark .rank-search,
    body.theme-dark .rank-item {
      background: var(--panel);
      color: var(--ink);
    }
    body.theme-dark .rank-item .row,
    body.theme-dark .rank-search::placeholder {
      color: var(--muted);
    }
      body.theme-dark .summary-card,
      body.theme-dark .observer-card,
      body.theme-dark .why-card {
        background: var(--panel) !important;
        color: var(--ink);
        border-color: var(--line);
      }
      body.theme-dark .summary-card strong,
      body.theme-dark .observer-card strong,
      body.theme-dark .why-card h3 {
        color: var(--ink);
      }
      body.theme-dark .rank-history .history-item {
        background: var(--panel);
        border-color: var(--line);
        color: var(--muted);
      }
      body.theme-dark .rank-history .history-item .history-time {
        color: var(--ink);
      }
    body.theme-dark .badge,
    body.theme-dark .chip,
    body.theme-dark .list-item {
      background: rgba(255, 255, 255, 0.04) !important;
      color: var(--ink);
      border-color: var(--line);
    }
    body.theme-dark .chip-strong {
      background: rgba(255, 255, 255, 0.1) !important;
      border-color: rgba(231, 238, 251, 0.2);
      color: var(--ink);
    }
    body.theme-dark .badge.badge-green { color: #7bdc98; }
    body.theme-dark .badge.badge-blue { color: #8bb6ff; }
    body.theme-dark .badge.badge-amber { color: #f2c88b; }
    body.theme-dark .badge.badge-purple { color: #b5a9ff; }
    body.theme-dark .badge.badge-gray { color: #c7c7cc; }
    body.theme-dark .observer-step {
      background: rgba(255, 255, 255, 0.04);
      color: var(--ink);
      border-color: var(--line);
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    body.view-channels .rank-panel,
    body.view-channels .meshscore-panel { display: none; }
    body.view-channels .sidebar-panel,
    body.view-channels .content { display: flex; }
    body.view-channel-directory .sidebar-panel,
    body.view-channel-directory .content,
    body.view-channel-directory .analysis-panel,
    body.view-channel-directory .rank-panel,
    body.view-channel-directory .meshscore-panel,
    body.view-channel-directory .rf-panel,
    body.view-channel-directory .observer-panel,
    body.view-channel-directory .observer-rank-panel,
    body.view-channel-directory .node-rank-panel,
    body.view-channel-directory .room-rank-panel,
    body.view-channel-directory .rotm-panel,
    body.view-channel-directory .why-panel,
    body.view-channel-directory .siblings-panel { display: none; }
    body.view-channel-directory .directory-panel {
      display: flex;
      grid-column: 1 / -1;
    }

    body.view-rank .sidebar-panel,
    body.view-rank .content,
    body.view-rank .analysis-panel,
    body.view-rank .meshscore-panel { display: none; }
    body.view-rank .rank-panel { display: flex; }

    body.view-meshscore .sidebar-panel,
    body.view-meshscore .content,
    body.view-meshscore .analysis-panel,
    body.view-meshscore .rank-panel { display: none; }
    body.view-meshscore .meshscore-panel { display: flex; }

    body.view-mesh-live .sidebar-panel,
    body.view-mesh-live .content,
    body.view-mesh-live .analysis-panel,
    body.view-mesh-live .rank-panel,
    body.view-mesh-live .meshscore-panel,
    body.view-mesh-live .rf-panel,
    body.view-mesh-live .observer-panel,
    body.view-mesh-live .observer-rank-panel,
    body.view-mesh-live .node-rank-panel,
    body.view-mesh-live .room-rank-panel,
    body.view-mesh-live .rotm-panel,
    body.view-mesh-live .directory-panel,
    body.view-mesh-live .why-panel,
    body.view-mesh-live .terms-panel,
    body.view-mesh-live .privacy-panel,
    body.view-mesh-live .forum-panel,
    body.view-mesh-live .siblings-panel,
    body.view-mesh-live .repeater-panel { display: none; }
    body.view-mesh-live .mesh-live-panel { display: flex; }

    body.view-rf .sidebar-panel,
    body.view-rf .content,
    body.view-rf .analysis-panel,
    body.view-rf .rank-panel,
    body.view-rf .meshscore-panel { display: none; }
    body.view-rf .rf-panel { display: flex; }

    body.view-observer .sidebar-panel,
    body.view-observer .content,
    body.view-observer .analysis-panel,
    body.view-observer .rank-panel,
    body.view-observer .meshscore-panel,
    body.view-observer .rf-panel,
    body.view-observer .observer-rank-panel,
    body.view-observer .repeater-panel { display: none; }
    body.view-observer .observer-panel { display: flex; }
    body.view-forum .sidebar-panel,
    body.view-forum .content,
    body.view-forum .analysis-panel,
    body.view-forum .rank-panel,
    body.view-forum .meshscore-panel,
    body.view-forum .rf-panel,
    body.view-forum .observer-panel,
    body.view-forum .observer-rank-panel,
    body.view-forum .node-rank-panel,
    body.view-forum .room-rank-panel,
    body.view-forum .rotm-panel,
    body.view-forum .directory-panel,
    body.view-forum .why-panel,
    body.view-forum .terms-panel,
    body.view-forum .privacy-panel,
    body.view-forum .repeater-panel { display: none; }
    body.view-forum .forum-panel { display: flex; }
    body.view-why .sidebar-panel,
    body.view-why .content,
    body.view-why .analysis-panel,
    body.view-why .rank-panel,
    body.view-why .meshscore-panel,
    body.view-why .rf-panel,
    body.view-why .observer-panel,
    body.view-why .observer-rank-panel,
    body.view-why .repeater-panel { display: none; }
    body.view-why .why-panel { display: flex; }
    body.view-terms .sidebar-panel,
    body.view-terms .content,
    body.view-terms .analysis-panel,
    body.view-terms .rank-panel,
    body.view-terms .meshscore-panel,
    body.view-terms .rf-panel,
    body.view-terms .observer-panel,
    body.view-terms .observer-rank-panel,
    body.view-terms .repeater-panel,
    body.view-terms .why-panel,
    body.view-terms .privacy-panel { display: none; }
    body.view-terms .terms-panel { display: flex; }
    body.view-privacy .sidebar-panel,
    body.view-privacy .content,
    body.view-privacy .analysis-panel,
    body.view-privacy .rank-panel,
    body.view-privacy .meshscore-panel,
    body.view-privacy .rf-panel,
    body.view-privacy .observer-panel,
    body.view-privacy .observer-rank-panel,
    body.view-privacy .repeater-panel,
    body.view-privacy .why-panel,
    body.view-privacy .terms-panel { display: none; }
    body.view-privacy .privacy-panel { display: flex; }

    body.view-observer-rank .sidebar-panel,
    body.view-observer-rank .content,
    body.view-observer-rank .analysis-panel,
    body.view-observer-rank .rank-panel,
    body.view-observer-rank .meshscore-panel,
    body.view-observer-rank .rf-panel,
    body.view-observer-rank .observer-panel,
    body.view-observer-rank .repeater-panel { display: none; }
    body.view-observer-rank .observer-rank-panel { display: flex; }

    body.view-node-rank .sidebar-panel,
    body.view-node-rank .content,
    body.view-node-rank .analysis-panel,
    body.view-node-rank .rank-panel,
    body.view-node-rank .meshscore-panel,
    body.view-node-rank .rf-panel,
    body.view-node-rank .observer-panel,
    body.view-node-rank .observer-rank-panel,
    body.view-node-rank .repeater-panel,
    body.view-node-rank .why-panel,
    body.view-node-rank .room-rank-panel { display: none; }
	    body.view-node-rank .node-rank-panel { display: flex; }

	    body.view-room-rank .sidebar-panel,
	    body.view-room-rank .content,
	    body.view-room-rank .analysis-panel,
	    body.view-room-rank .rank-panel,
	    body.view-room-rank .meshscore-panel,
	    body.view-room-rank .rf-panel,
	    body.view-room-rank .observer-panel,
	    body.view-room-rank .observer-rank-panel,
	    body.view-room-rank .node-rank-panel,
	    body.view-room-rank .rotm-panel,
	    body.view-room-rank .why-panel,
	    body.view-room-rank .terms-panel,
	    body.view-room-rank .privacy-panel,
    body.view-room-rank .repeater-panel { display: none; }
    body.view-room-rank .room-rank-panel { display: flex; }

    body.view-siblings .sidebar-panel,
    body.view-siblings .content,
    body.view-siblings .analysis-panel,
    body.view-siblings .rank-panel,
    body.view-siblings .meshscore-panel,
    body.view-siblings .rf-panel,
    body.view-siblings .observer-panel,
    body.view-siblings .observer-rank-panel,
    body.view-siblings .node-rank-panel,
    body.view-siblings .room-rank-panel,
    body.view-siblings .rotm-panel,
    body.view-siblings .directory-panel,
    body.view-siblings .why-panel,
    body.view-siblings .terms-panel,
    body.view-siblings .privacy-panel,
    body.view-siblings .forum-panel,
    body.view-siblings .repeater-panel { display: none; }
    body.view-siblings .siblings-panel { display: flex; }

	    body.route-open {
	      overflow: hidden;
	      overscroll-behavior: none;
	      touch-action: none;
	    }
    .analysis-panel {
      display: none;
      position: fixed;
      top: clamp(90px, 12vh, 140px);
      left: 50%;
      transform: translate(-50%, 0);
      width: min(640px, calc(100vw - 32px));
      max-width: min(640px, calc(100vw - 32px));
      max-height: calc(100vh - 180px);
      z-index: 10011;
      border-radius: 32px;
      margin: 0;
      padding: 0;
      overflow: hidden;
      box-shadow: var(--shadow);
      background: var(--panel);
      flex-direction: column;
      touch-action: none;
      box-sizing: border-box;
    }
    .analysis-panel .analysis {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 20px 20px;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      width: 100%;
    }
    .route-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
      width: 100%;
    }
    .route-share {
      font-size: 13px;
      padding: 4px 10px;
      flex-shrink: 0;
    }
    .route-close {
      font-size: 18px;
    }
    body.route-open .analysis-panel {
      display: flex;
    }

    body.view-rotm .sidebar-panel,
    body.view-rotm .content,
    body.view-rotm .analysis-panel,
    body.view-rotm .rank-panel,
    body.view-rotm .meshscore-panel,
    body.view-rotm .rf-panel,
    body.view-rotm .observer-panel,
    body.view-rotm .observer-rank-panel,
    body.view-rotm .repeater-panel,
    body.view-rotm .why-panel,
    body.view-rotm .node-rank-panel { display: none; }
    body.view-rotm .rotm-panel { display: flex; }

    .helper-banner {
      margin: 0 18px 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 149, 0, 0.15);
      color: #ff9500;
      font-weight: 600;
      font-size: 13px;
    }
    body.theme-dark .helper-banner {
      background: rgba(255, 149, 0, 0.2);
      color: #ffd08a;
    }
    body.theme-dark .siblings-legend-item {
      background: rgba(255, 255, 255, 0.08);
    }
    body.theme-dark .siblings-legend-swatch {
      border-color: rgba(255, 255, 255, 0.2);
    }
    body.theme-dark .siblings-cell.is-unused {
      background: rgba(52, 199, 89, 0.32);
    }
    body.theme-dark .siblings-cell.is-unavailable {
      background: rgba(10, 132, 255, 0.38);
    }
    body.theme-dark .siblings-cell.is-amber {
      background: rgba(255, 149, 0, 0.38);
    }
    body.theme-dark .siblings-cell.is-red {
      background: rgba(255, 59, 48, 0.44);
    }
    body.theme-dark .siblings-cell.is-red-dark {
      background: rgba(186, 26, 26, 0.62);
    }
    body.theme-dark .siblings-cell.is-selected {
      box-shadow: inset 0 0 0 2px #4da3ff;
    }
    body.theme-dark .siblings-item {
      background: rgba(255, 255, 255, 0.04);
    }
    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(16, 24, 40, 0.9);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none;
      z-index: 50;
    }
    body.theme-dark .toast {
      background: rgba(255, 255, 255, 0.12);
      color: var(--ink);
    }
    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }
    .directory-panel { display: none; flex-direction: column; gap: 20px; }
    .directory-content { padding: 0 18px 18px; overflow: auto; }
    .channel-directory-shell {
      display: grid;
      gap: 18px;
      min-width: 0;
    }
    .channel-discovery-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
      gap: 18px;
      align-items: stretch;
    }
    .channel-discovery-copy,
    .channel-discovery-toolbar {
      border-radius: 18px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      min-width: 0;
    }
    .channel-discovery-copy {
      padding: 22px 24px;
      background:
        radial-gradient(circle at top right, rgba(0, 122, 255, 0.16), rgba(0, 122, 255, 0) 52%),
        linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(255, 255, 255, 0.92));
      display: grid;
      gap: 10px;
    }
    .channel-discovery-copy h2 {
      margin: 0;
      font-size: 30px;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }
    .channel-discovery-copy p {
      margin: 0;
      max-width: 60ch;
      color: var(--muted);
      line-height: 1.55;
    }
    .channel-discovery-kicker {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-weight: 800;
      color: #0a60d1;
    }
    .channel-discovery-toolbar {
      padding: 18px;
      background: rgba(255, 255, 255, 0.78);
      display: grid;
      gap: 14px;
      align-content: start;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }
    body.theme-dark .channel-discovery-copy {
      background:
        radial-gradient(circle at top right, rgba(99, 162, 255, 0.22), rgba(99, 162, 255, 0) 52%),
        linear-gradient(135deg, rgba(10, 20, 36, 0.94), rgba(16, 24, 38, 0.82));
      border-color: rgba(120, 160, 255, 0.26);
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
    }
    body.theme-dark .channel-discovery-kicker {
      color: #8bb6ff;
    }
    body.theme-dark .channel-discovery-toolbar {
      background: rgba(12, 18, 28, 0.85);
      border-color: rgba(120, 160, 255, 0.22);
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
    }
    .channel-directory-search {
      display: grid;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }
    .channel-directory-search input {
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.88);
      color: var(--ink);
      font-family: inherit;
      font-size: 14px;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
    }
    .channel-directory-search input:focus {
      outline: 3px solid rgba(0, 122, 255, 0.16);
      outline-offset: 1px;
      border-color: rgba(0, 122, 255, 0.45);
    }
    body.theme-dark .channel-directory-search input {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    }
    .channel-directory-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(0, 122, 255, 0.14);
      background: rgba(0, 122, 255, 0.06);
      color: var(--muted);
      font-size: 13px;
    }
    body.theme-dark .channel-directory-summary {
      border-color: rgba(120, 160, 255, 0.16);
      background: rgba(99, 162, 255, 0.08);
    }
    .channel-directory-summary strong {
      color: var(--ink);
      font-size: 14px;
    }
    .directory-feature-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      min-width: 0;
    }
    .directory-feature-list {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    .directory-feature-list .directory-card,
    .directory-feature-list .directory-row {
      min-width: 0;
    }
    .directory-feature-list-compact .directory-row {
      padding: 12px 14px;
    }
    .channel-page {
      display: grid;
      gap: 18px;
    }
    .channel-box {
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background:
        linear-gradient(160deg, rgba(0, 122, 255, 0.08), rgba(255, 255, 255, 0.92) 42%),
        rgba(255, 255, 255, 0.92);
      padding: 16px;
      display: grid;
      gap: 12px;
    }
    body.theme-dark .channel-box {
      background:
        linear-gradient(160deg, rgba(0, 122, 255, 0.22), rgba(11, 15, 21, 0.85) 40%),
        rgba(12, 18, 28, 0.9);
      border-color: rgba(120, 160, 255, 0.35);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    }
    .channel-box h3 { margin: 0; }
    .channel-box-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }
    .channel-box-head h3 {
      color: #0a60d1;
      letter-spacing: 0.2px;
    }
    body.theme-dark .channel-box-head h3 {
      color: #8bb6ff;
    }
    body.theme-dark .directory-group-header {
      border-color: rgba(120, 160, 255, 0.35);
      background: rgba(12, 18, 28, 0.75);
    }
    body.theme-dark .directory-row {
      border-color: rgba(120, 160, 255, 0.22);
      background: rgba(12, 18, 28, 0.6);
    }
    .directory-strip {
      display: block;
      overflow: hidden;
    }
    .directory-strip-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 8px;
      scroll-snap-type: x proximity;
    }
    .directory-strip-row > .directory-card {
      scroll-snap-align: start;
    }
    .directory-strip-row::-webkit-scrollbar {
      height: 6px;
    }
    .directory-strip-row::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.25);
      border-radius: 999px;
    }
    .directory-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }
    .directory-card {
      padding: 14px;
      border-radius: 14px;
      background:
        linear-gradient(120deg, rgba(0, 122, 255, 0.08), rgba(255, 255, 255, 0.95)),
        rgba(16, 24, 40, 0.04);
      border: 1px solid rgba(15, 23, 42, 0.08);
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    body.theme-dark .directory-card {
      background:
        linear-gradient(120deg, rgba(0, 122, 255, 0.16), rgba(15, 23, 42, 0.75)),
        rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .directory-card h4 { margin: 0; font-size: 15px; }
    .directory-card .muted { font-size: 12px; }
    .directory-channel-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .directory-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .directory-groups { display: grid; gap: 18px; }
    .directory-group { display: grid; gap: 10px; }
    .directory-group-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(0, 122, 255, 0.35);
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.15), rgba(255, 255, 255, 0.85));
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      font-weight: 700;
    }
    .checkbox {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .checkbox input {
      width: 16px;
      height: 16px;
      accent-color: #007aff;
    }
    .switch-list {
      display: grid;
      gap: 12px;
    }
    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.02);
    }
    body.theme-dark .switch-row {
      background: rgba(255, 255, 255, 0.04);
    }
    .switch-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }
    .switch-subtitle {
      font-size: 12px;
      margin-top: 3px;
    }
    .switch {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }
    .switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 1px;
      height: 1px;
    }
    .switch-track {
      width: 44px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(60, 60, 67, 0.28);
      background: rgba(60, 60, 67, 0.18);
      position: relative;
      transition: background 0.18s ease, border-color 0.18s ease;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }
    body.theme-dark .switch-track {
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.10);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    }
    .switch-thumb {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #fff;
      position: absolute;
      top: 1px;
      left: 1px;
      transition: transform 0.18s ease;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }
    body.theme-dark .switch-thumb {
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.46);
    }
    .switch-state {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.01em;
      min-width: 30px;
      text-align: right;
      color: var(--muted);
    }
    .switch-state::before { content: "Off"; }
    .switch input:checked ~ .switch-state::before { content: "On"; }
    .switch input:checked + .switch-track {
      background: rgba(0, 122, 255, 0.95);
      border-color: rgba(0, 122, 255, 0.75);
    }
    .switch input:checked + .switch-track .switch-thumb {
      transform: translateX(20px);
    }
    .switch input:focus-visible + .switch-track {
      outline: 3px solid rgba(0, 122, 255, 0.28);
      outline-offset: 2px;
    }
    .switch input:disabled + .switch-track,
    .switch input:disabled ~ .switch-state {
      opacity: 0.55;
      cursor: not-allowed;
    }
    body.theme-dark .directory-group-header {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.06);
    }
    .directory-group-header h4 { margin: 0; display: flex; gap: 10px; align-items: center; cursor: pointer; }
    .directory-group-toggle {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    }
    body.theme-dark .directory-group-toggle {
      background: rgba(255, 255, 255, 0.08);
      color: var(--ink);
    }
    .directory-group-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
    .directory-group-body {
      display: grid;
      gap: 10px;
      padding-left: 12px;
    }
    .directory-group-title { flex: 1; display: inline-flex; align-items: center; gap: 6px; }
    .directory-group-badge {
      font-size: 11px;
      background: var(--blue);
      color: white;
      border-radius: 999px;
      padding: 2px 8px;
      align-self: center;
    }
    .add-from-screenshot { display: none !important; }
	    .add-from-screenshot-modal { display: none; }
	    .add-from-screenshot-modal.open { display: flex; }
	    .route-correction-list {
	      display: grid;
	      gap: 8px;
	      padding: 10px 12px;
	      border-radius: 12px;
	      border: 1px solid var(--line);
	      background: rgba(255, 255, 255, 0.6);
	      max-height: 240px;
	      overflow: auto;
	    }
	    body.theme-dark .route-correction-list {
	      background: rgba(255, 255, 255, 0.06);
	    }
	    .route-correction-row {
	      display: grid;
	      grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
	      align-items: center;
	      gap: 10px;
	      font-size: 12px;
	      padding: 6px 8px;
	      border-radius: 10px;
	    }
	    .route-correction-row code { font-size: 12px; }
	    .route-correction-row strong { font-weight: 800; }
	    .route-correction-row.route-correction-head {
	      padding: 0 2px 6px;
	      border-radius: 0;
	      font-size: 11px;
	    }
	    .route-correction-row.changed {
	      border-left: 3px solid #ff9500;
	      background: rgba(255, 149, 0, 0.10);
	    }
	    body.theme-dark .route-correction-row.changed {
	      background: rgba(255, 149, 0, 0.16);
	    }
	    @media (max-width: 860px) {
	      .add-from-screenshot { display: inline-flex !important; }
	      .screenshot-modal-card {
	        max-height: 90vh;
        overflow-y: auto;
        width: min(96vw, 400px);
      }
      .screenshot-instructions { font-size: 13px; line-height: 1.45; }
      .screenshot-instructions p { margin: 0 0 8px; }
      .screenshot-result-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
      .screenshot-result-row code { word-break: break-all; font-size: 12px; }
      .channel-discovery-hero,
      .directory-feature-grid {
        grid-template-columns: 1fr;
      }
      .channel-discovery-copy,
      .channel-discovery-toolbar {
        padding: 18px;
      }
      .channel-discovery-copy h2 {
        font-size: 24px;
      }
      .directory-content {
        padding: 0 14px 14px;
      }
      .channel-directory-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }
      .channel-directory-actions .btn:first-child {
        grid-column: 1 / -1;
      }
      .directory-group-body {
        padding-left: 0;
      }
      .directory-group-body .directory-row {
        margin-left: 0;
        padding-left: 14px;
        border-left-width: 0;
      }
      .directory-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
      }
      .directory-row .row-actions,
      .directory-actions {
        justify-content: stretch;
      }
      .directory-row .row-actions .btn,
      .directory-actions .btn {
        flex: 1 1 140px;
      }
      .directory-channel-name {
        font-size: 15px;
      }
      .directory-row .row-meta {
        gap: 4px;
      }
    }
    .directory-group.collapsed .directory-group-body { display: none; }
    .directory-row.dragging { opacity: 0.5; }
    .directory-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.6);
    }
    .directory-group-body .directory-row {
      margin-left: 6px;
      padding-left: 18px;
      background: rgba(0, 122, 255, 0.05);
      border-left: 3px solid rgba(0, 122, 255, 0.4);
    }
    .directory-row.joined {
      opacity: 0.6;
      background: rgba(0, 122, 255, 0.08);
    }
    .directory-row.blocked {
      opacity: 0.5;
      background: rgba(142, 142, 147, 0.12);
    }
    body.theme-dark .directory-row {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
    }
    body.theme-dark .directory-group-body .directory-row {
      background: rgba(0, 122, 255, 0.1);
      border-color: rgba(0, 122, 255, 0.6);
    }
    .directory-row .row-main { display: grid; gap: 6px; min-width: 0; }
    .directory-row .row-title {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .directory-row-heading {
      margin: 0;
      font-size: 15px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }
    .directory-row-heading .directory-channel-label {
      flex: 1 1 auto;
      min-width: 0;
    }
    .directory-row .row-title-badges {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }
    .directory-row .row-description {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }
    .directory-channel-name {
      display: block;
      font-weight: 700;
      line-height: 1.28;
      min-width: 0;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .directory-row .row-meta {
      display: grid;
      gap: 2px;
      font-size: 12px;
      color: var(--muted);
    }
    .directory-row .row-meta-line {
      line-height: 1.4;
    }
    .directory-row .row-meta-group {
      color: #0a60d1;
      font-weight: 700;
    }
    .directory-row .row-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
    .row-title .badge-bubble {
      margin-left: 8px;
      font-size: 10px;
      padding: 2px 6px;
    }
    body.theme-dark .directory-row .row-meta-group {
      color: #8bb6ff;
    }
    @media (max-width: 860px) {
      .directory-group-body .directory-row {
        margin-left: 0;
        padding-left: 14px;
        border-left-width: 0;
      }
      .directory-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
      }
      .directory-row .row-actions,
      .directory-actions {
        justify-content: stretch;
      }
      .directory-row .row-actions .btn,
      .directory-actions .btn {
        flex: 1 1 140px;
      }
      .directory-row-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .directory-row .row-title-badges {
        justify-content: flex-start;
        max-width: none;
      }
      .directory-channel-name {
        font-size: 15px;
      }
      .directory-row .row-meta {
        gap: 4px;
      }
    }
    .directory-preview { display: none; }
    .channel-muted .name { opacity: 0.7; }
    .channel-muted .muted-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .channel-mute {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      padding: 0;
      cursor: pointer;
    }
    .channel-mute:hover { color: var(--ink); }
    body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
    body.theme-dark ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
    body.theme-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
    body.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
    .modal-body { display: grid; gap: 12px; margin-top: 12px; }
    .score-breakdown-total { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
    .score-breakdown-list { display: flex; flex-direction: column; gap: 10px; }
    .score-breakdown-row {
      display: grid;
      grid-template-columns: 1fr minmax(120px, 2fr) 52px;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }
    .score-breakdown-label { font-weight: 500; color: var(--ink); }
    .score-info-btn {
      margin-left: 6px;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
    }
    .score-info-btn:hover { color: var(--text); }
    .score-breakdown-bar-wrap {
      height: 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }
    body.theme-dark .score-breakdown-bar-wrap { background: rgba(255, 255, 255, 0.1); }
    .score-breakdown-bar {
      height: 100%;
      border-radius: 999px;
      min-width: 2px;
      transition: width 0.2s ease;
    }
    .score-breakdown-pts { font-size: 12px; color: var(--muted); text-align: right; }
    .score-breakdown-formulas { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
    .score-breakdown-formulas p { margin: 0 0 10px; }
    .score-breakdown-formulas p:last-child { margin-bottom: 0; }
    .modal-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .modal-row .field { flex: 1 1 160px; }
    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
      gap: 8px;
    }
    .emoji-picker-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }
    .emoji-preview {
      font-size: 20px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      background: #fff;
    }
    body.theme-dark .emoji-preview {
      background: rgba(255, 255, 255, 0.08);
    }
    .emoji-btn {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 6px;
      font-size: 18px;
      background: #fff;
      cursor: pointer;
    }
    body.theme-dark .emoji-btn {
      background: rgba(255, 255, 255, 0.04);
      color: var(--ink);
    }
    .emoji-btn.active { outline: 2px solid var(--accent); }
    .auth-panel, .account-panel { display: none; }
    body.view-auth .auth-panel {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.28);
      z-index: 40;
    }
    body.view-account .account-panel {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.28);
      z-index: 40;
    }
    body.view-account { overflow: hidden; }
    body.view-auth .sidebar-panel,
    body.view-auth .content,
    body.view-auth .analysis-panel,
    body.view-auth .rank-panel,
    body.view-auth .meshscore-panel,
    body.view-auth .rf-panel,
    body.view-auth .observer-panel,
    body.view-auth .observer-rank-panel,
    body.view-auth .node-rank-panel,
    body.view-auth .room-rank-panel,
    body.view-auth .rotm-panel,
    body.view-auth .directory-panel,
    body.view-auth .why-panel,
    body.view-auth .terms-panel,
    body.view-auth .privacy-panel { display: none; }
    body.view-account .sidebar-panel,
    body.view-account .content,
    body.view-account .analysis-panel,
    body.view-account .rank-panel,
    body.view-account .meshscore-panel,
    body.view-account .rf-panel,
    body.view-account .observer-panel,
    body.view-account .observer-rank-panel,
    body.view-account .node-rank-panel,
    body.view-account .rotm-panel,
    body.view-account .directory-panel,
    body.view-account .why-panel,
    body.view-account .terms-panel,
    body.view-account .privacy-panel { display: none; }
    .auth-restore-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(10, 11, 14, 0.72);
      backdrop-filter: blur(6px);
      z-index: 9998;
    }
    .auth-restore-overlay.open { display: flex; }
    .auth-restore-card {
      width: min(100%, 320px);
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: 22px 20px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(10, 11, 14, 0.94);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
      text-align: center;
      color: #fff;
    }
    .auth-restore-card strong {
      font-size: 16px;
      line-height: 1.2;
    }
    .auth-restore-card span {
      font-size: 13px;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.78);
    }
    .auth-restore-spinner {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.24);
      border-top-color: #fff;
      animation: spin 0.9s linear infinite;
    }
    body.auth-restore-active { overflow: hidden; }
    .auth-card {
      max-width: 520px;
      width: 100%;
      padding: 28px;
      border-radius: 18px;
      background: rgba(16, 24, 40, 0.04);
      border: 1px solid rgba(15, 23, 42, 0.08);
      display: grid;
      gap: 16px;
      position: relative;
    }
    .account-modal {
      max-width: 860px;
      width: min(94vw, 860px);
      max-height: 86vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 22px;
      background: var(--panel);
    }
    .account-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding: 6px;
      border-radius: 14px;
      background: rgba(16, 24, 40, 0.04);
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    body.theme-dark .account-tabs {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .account-tab {
      border: 1px solid transparent;
      background: transparent;
      border-radius: 12px;
      padding: 10px 10px;
      font-weight: 800;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
      min-width: 0;
      line-height: 1.15;
    }
    .account-tab.active {
      background: var(--panel);
      border-color: rgba(15, 23, 42, 0.12);
      color: var(--ink);
    }
    body.theme-dark .account-tab.active {
      border-color: rgba(255, 255, 255, 0.12);
    }
    .account-tab.disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .auth-close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 4;
    }
    body.theme-dark .auth-close {
      background: rgba(255, 255, 255, 0.08);
      color: var(--ink);
      border-color: rgba(255, 255, 255, 0.12);
    }
    body.theme-dark .auth-card {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .auth-header h2 { margin: 0; }
    .auth-tabs { display: flex; gap: 8px; }
    .auth-tabs .tab-btn { flex: 1; }
    .auth-tabs .tab-btn.active { background: var(--accent); color: #fff; }
    .auth-providers { display: grid; gap: 8px; }
    .auth-providers #gsiButton { display: flex; justify-content: center; }
    .google-config-hint {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      margin-top: 4px;
      display: none;
    }
    .auth-form { display: grid; gap: 12px; }
    .password-row { display: flex; gap: 8px; align-items: center; }
    .password-row input { flex: 1; }
    .auth-hint { font-size: 12px; color: var(--muted); }
    .auth-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
    .auth-links a {
      color: #0b0f1a;
      font-weight: 600;
    }
    .auth-links a:hover { text-decoration: underline; }
    body.theme-dark .auth-links a {
      color: #ffffff;
    }
    .account-content {
      display: block;
      flex: 1;
      min-height: 0;
      overflow: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .account-tab-panel {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      align-content: start;
      min-width: 0;
    }
    .account-tab-panel[hidden] {
      display: none !important;
    }
    .account-card {
      background: rgba(16, 24, 40, 0.04);
      border: 1px solid rgba(15, 23, 42, 0.08);
      padding: 14px;
      border-radius: 16px;
      display: grid;
      gap: 8px;
      align-content: start;
      min-width: 0;
    }
    .account-card h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: 0.1px;
    }
    .account-card p { margin: 0; }
    .account-header {
      padding: 0;
      border-bottom: 0;
      padding-right: 46px;
      gap: 6px;
    }
    .account-btn-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .account-btn-row .rf-input {
      flex: 1 1 240px;
      min-width: 0;
    }
    .account-channels-list {
      max-height: 260px;
      overflow: auto;
      overscroll-behavior: contain;
    }
    .account-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 4px;
    }
    .account-actions .btn {
      min-width: 160px;
    }
    body.theme-dark .account-card {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .account-value {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      background: var(--panel);
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .account-list { display: grid; gap: 8px; }
    .account-item {
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(15, 23, 42, 0.06);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      min-width: 0;
    }
    .account-item > div { min-width: 0; }
    .account-item strong,
    .account-item .muted {
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
    .account-item .btn { flex: 0 0 auto; }
    .account-gps-edit {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 6px;
    }
    .account-gps-edit .rf-input {
      flex: 1 1 120px;
      min-width: 120px;
    }
    body.theme-dark .account-item {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
    }
    @media (max-width: 860px) {
      body.view-account .account-panel { align-items: stretch; }
      .account-modal {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: 0;
        overflow-x: hidden;
        padding:
          calc(18px + env(safe-area-inset-top, 0px))
          calc(16px + env(safe-area-inset-right, 0px))
          calc(16px + env(safe-area-inset-bottom, 0px))
          calc(16px + env(safe-area-inset-left, 0px));
      }
      .account-content {
        display: block;
      }
      .account-tab-panel {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .account-modal .auth-close {
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: 38px;
        height: 38px;
      }
      .account-btn-row {
        flex-direction: column;
        align-items: stretch;
      }
      .account-btn-row .rf-input { width: 100%; }
      .account-btn-row .btn { width: 100%; }
      .account-actions { justify-content: stretch; }
      .account-actions .btn { width: 100%; min-width: 0; }
      .account-channels-list { max-height: 42vh; }
    }

    .row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
      color: var(--muted);
    }

    .badge {
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      font-weight: 600;
      color: var(--ink);
      background: #f7f7f7;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .badge.badge-coverage {
      cursor: pointer;
    }
    .badge.badge-coverage:hover {
      filter: brightness(0.92);
    }

    .badge.badge-green { background: rgba(52, 199, 89, 0.16); border-color: rgba(52, 199, 89, 0.28); color: #1b6b35; }
    .badge.badge-blue { background: rgba(0, 122, 255, 0.16); border-color: rgba(0, 122, 255, 0.28); color: #0a60d1; }
    .badge.badge-amber { background: rgba(255, 149, 0, 0.18); border-color: rgba(255, 149, 0, 0.28); color: #9a5b00; }
    .badge.badge-purple { background: rgba(88, 86, 214, 0.18); border-color: rgba(88, 86, 214, 0.28); color: #3b39a5; }
    .badge.badge-gray { background: rgba(142, 142, 147, 0.18); border-color: rgba(142, 142, 147, 0.28); color: #4a4a4f; }
    .badge.badge-claimed {
      margin-left: 6px;
      background: linear-gradient(135deg, rgba(255, 122, 0, 0.22), rgba(255, 45, 85, 0.18));
      border-color: rgba(255, 99, 72, 0.55);
      color: #b33010;
      box-shadow: 0 0 0 1px rgba(255, 133, 87, 0.2), 0 6px 16px rgba(255, 99, 72, 0.18);
    }
    .badge.badge-online {
      margin-left: 6px;
      background: linear-gradient(135deg, rgba(52, 199, 89, 0.2), rgba(48, 209, 88, 0.16));
      border-color: rgba(52, 199, 89, 0.45);
      color: #1b6b35;
      box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.2), 0 6px 16px rgba(52, 199, 89, 0.16);
    }
    .badge.badge-stale {
      margin-left: 6px;
      background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), rgba(255, 204, 0, 0.16));
      border-color: rgba(255, 149, 0, 0.4);
      color: #9a5b00;
    }
    .badge.badge-offline {
      margin-left: 6px;
      background: linear-gradient(135deg, rgba(255, 59, 48, 0.2), rgba(255, 105, 97, 0.16));
      border-color: rgba(255, 59, 48, 0.45);
      color: #9e2620;
    }
    body.theme-dark .badge.badge-claimed {
      background: linear-gradient(135deg, rgba(255, 149, 0, 0.22), rgba(255, 55, 95, 0.22));
      border-color: rgba(255, 149, 0, 0.55);
      color: #ffd2b2;
      box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.25), 0 8px 18px rgba(255, 85, 0, 0.2);
    }
    body.theme-dark .badge.badge-online {
      background: linear-gradient(135deg, rgba(52, 199, 89, 0.22), rgba(48, 209, 88, 0.2));
      border-color: rgba(52, 199, 89, 0.55);
      color: #d6f7df;
    }
    body.theme-dark .badge.badge-stale {
      background: linear-gradient(135deg, rgba(255, 149, 0, 0.24), rgba(255, 204, 0, 0.18));
      border-color: rgba(255, 149, 0, 0.55);
      color: #ffe4b8;
    }
    body.theme-dark .badge.badge-offline {
      background: linear-gradient(135deg, rgba(255, 69, 58, 0.24), rgba(255, 105, 97, 0.2));
      border-color: rgba(255, 69, 58, 0.55);
      color: #ffd1cc;
    }
    .list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .list-item {
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      background: #fafafa;
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }
    .route-item-main {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .route-dup-row,
    .neighbor-dup-row {
      font-size: 11px;
      color: var(--muted);
    }
    .route-dup-link,
    .neighbor-dup-link {
      color: #007aff;
      text-decoration: underline;
    }
    #routeOverrideMap {
      height: 240px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      margin-top: 12px;
    }
    .route-override-map-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
      margin-top: 10px;
    }

    .channel-remove {
      border: 0;
      background: transparent;
      color: #ff3b30;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      display: none;
    }
    .channel-leave-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
    }
    .channel-leave-toggle input {
      width: 14px;
      height: 14px;
      accent-color: #007aff;
    }
    .channel-fixed {
      opacity: 0.6;
    }
    body.leave-mode .channel-remove {
      display: none !important;
    }
    .admin-only {
      display: none;
    }
    body:not(.is-admin) .admin-only {
      display: none !important;
    }
    .observer-only {
      display: none;
    }
    body.is-observer .observer-only,
    body.is-admin .observer-only {
      display: inline-flex;
    }
    body:not(.is-admin):not(.is-observer) .observer-only {
      display: none !important;
    }
    .auto-responder-panel {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 8px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      margin-left: 12px;
    }
    .auto-responder-panel span,
    .auto-responder-panel label {
      font-size: 12px;
      color: var(--ink);
    }
    .auto-responder-panel input[type="range"] {
      width: 160px;
    }
    .auto-responder-status {
      font-size: 12px;
      color: var(--ink);
      margin-left: auto;
    }
    .repeater-location-controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .repeater-location-controls input {
      width: 92px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-size: 12px;
    }
    .repeater-location-controls .btn {
      padding: 4px 10px;
      font-size: 12px;
      border-radius: 999px;
    }
    .channel-history-control {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .channel-history-control select {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 2px 8px;
      background: var(--panel);
      color: var(--ink);
      font-size: 12px;
    }

    .slider {
      width: 100%;
    }

    .observer-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
      overflow: auto;
    }
    .observer-location-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1200;
    }
    .observer-location-modal.open { display: flex; }
    .observer-location-card {
      width: min(92vw, 560px);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      display: grid;
      gap: 12px;
      padding: 14px;
      position: relative;
    }
    .observer-location-map {
      height: 260px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
    }
    .observer-location-meta {
      font-size: 12px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .observer-location-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .observer-location-button {
      font-size: 18px;
    }

    .observer-rank-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
    }

    .forum-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
      overflow: hidden;
    }
    .forum-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 16px;
      min-height: 0;
      height: 100%;
      flex: 1;
      overflow: hidden;
    }
    .forum-hero {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 16px;
      background: var(--panel);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .forum-hero strong { font-size: 14px; }
    .forum-hero a { font-weight: 700; }
    .forum-layout {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 12px;
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }
    .forum-sidebar {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .forum-sidebar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }
    .forum-sidebar-head-left {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
    }
    .forum-sidebar-head strong { font-size: 13px; }
    .forum-sidebar-close { display: none; }
    .forum-category-list {
      display: flex;
      flex-direction: column;
      overflow: auto;
      min-height: 0;
    }
    .forum-category-item {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      display: grid;
      gap: 6px;
      background: var(--panel);
      transition: background 0.12s ease, border-color 0.12s ease;
    }
    .forum-category-item:last-child { border-bottom: none; }
    .forum-category-item:hover {
      background: rgba(0, 122, 255, 0.05);
    }
    body.theme-dark .forum-category-item:hover {
      background: rgba(99, 162, 255, 0.08);
    }
    .forum-category-item.active {
      background: rgba(52, 199, 89, 0.08);
      border-bottom-color: rgba(52, 199, 89, 0.18);
    }
    body.theme-dark .forum-category-item.active {
      background: rgba(72, 208, 106, 0.1);
      border-bottom-color: rgba(72, 208, 106, 0.2);
    }
    .forum-category-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .forum-category-title strong {
      font-size: 14px;
      color: var(--ink);
    }
    .forum-category-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
    }
    .forum-main {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .forum-main .forum-toolbar {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }
    .forum-main-content {
      padding: 14px;
      overflow: auto;
      min-height: 0;
      flex: 1;
    }
    .forum-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .forum-toolbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .forum-mobile-cats-btn {
      display: none;
      padding: 8px 10px;
      border-radius: 12px;
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }
    .forum-drawer-scrim { display: none; }
    .forum-breadcrumb {
      font-size: 13px;
      color: var(--muted);
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .forum-breadcrumb button {
      border: none;
      background: transparent;
      padding: 0;
      color: var(--blue);
      font-weight: 700;
      cursor: pointer;
      font-size: 13px;
    }
    .forum-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .forum-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .forum-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 14px;
      background: var(--panel);
      display: grid;
      gap: 10px;
      align-content: start;
      cursor: pointer;
      transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    }
    .forum-card:hover {
      transform: translateY(-1px);
      border-color: rgba(0, 122, 255, 0.32);
      background: rgba(0, 122, 255, 0.04);
    }
    body.theme-dark .forum-card:hover {
      border-color: rgba(99, 162, 255, 0.34);
      background: rgba(99, 162, 255, 0.07);
    }
    .forum-card h3 { margin: 0; font-size: 16px; }
    .forum-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .forum-card .forum-card-meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
    }
    .forum-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
    }
    .forum-row {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px 14px;
      background: var(--panel);
      display: grid;
      gap: 8px;
      cursor: pointer;
      transition: border-color 0.12s ease, background 0.12s ease;
    }
    .forum-row:hover {
      border-color: rgba(52, 199, 89, 0.32);
      background: rgba(52, 199, 89, 0.04);
    }
    body.theme-dark .forum-row:hover {
      border-color: rgba(72, 208, 106, 0.28);
      background: rgba(72, 208, 106, 0.06);
    }
    .forum-row .forum-row-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .forum-row .forum-row-title strong { font-size: 14px; }
    .forum-row .forum-row-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 12px;
    }
    .forum-author {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .forum-author-name {
      font-weight: 800;
      color: var(--ink);
    }
    .forum-thread {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
    }
    .forum-post {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 14px;
      background: var(--panel);
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .forum-post.first {
      border-color: rgba(0, 122, 255, 0.24);
      background: rgba(0, 122, 255, 0.03);
    }
    body.theme-dark .forum-post.first {
      border-color: rgba(99, 162, 255, 0.22);
      background: rgba(99, 162, 255, 0.06);
    }
    .forum-post-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .forum-post-time { color: var(--muted); font-size: 12px; }
    .forum-post-body {
      font-size: 13px;
      line-height: 1.7;
      color: var(--ink);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .forum-post-hidden {
      font-size: 13px;
      color: var(--muted);
      font-style: italic;
    }
    .forum-attachments {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .forum-attachment {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--line);
      color: var(--blue);
      text-decoration: none;
      background: rgba(0, 122, 255, 0.06);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    body.theme-dark .forum-attachment {
      background: rgba(99, 162, 255, 0.1);
    }
    .forum-editor {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      background: var(--panel);
      display: grid;
      gap: 10px;
    }
    .forum-editor textarea, .forum-editor input {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--line);
      padding: 10px;
      background: var(--paper);
      color: var(--ink);
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: 13px;
    }
    .forum-editor textarea { min-height: 120px; resize: vertical; }
    .forum-editor .editor-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .forum-small {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
    .forum-spinner {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 3px solid rgba(60, 60, 67, 0.18);
      border-top-color: var(--blue);
      animation: spin 0.9s linear infinite;
      margin: 20px auto;
    }
    body.theme-dark .forum-spinner {
      border-color: rgba(231, 238, 251, 0.18);
      border-top-color: var(--blue);
    }
    .forum-error {
      border: 1px solid rgba(255, 59, 48, 0.25);
      background: rgba(255, 59, 48, 0.08);
      color: var(--ink);
      border-radius: 16px;
      padding: 14px;
      font-size: 13px;
    }
    @media (max-width: 880px) {
      .forum-layout {
        grid-template-columns: 1fr;
        position: relative;
      }
      .forum-mobile-cats-btn { display: inline-flex; }
      .forum-drawer-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.16s ease;
        z-index: 30;
      }
      body.theme-dark .forum-drawer-scrim {
        background: rgba(0, 0, 0, 0.62);
      }
      .forum-drawer-scrim.open {
        opacity: 1;
        pointer-events: auto;
      }
      .forum-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 84vw);
        border-radius: 0 16px 16px 0;
        z-index: 31;
        transform: translateX(-110%);
        transition: transform 0.18s ease;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
        visibility: hidden;
        pointer-events: none;
      }
      .forum-sidebar.open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
      }
      .forum-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-weight: 900;
      }
      .forum-category-list {
        flex-direction: column;
        overflow: auto;
        padding: 0;
        gap: 0;
      }
      .forum-category-item {
        border: none;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        min-width: 0;
      }
      .forum-category-item:last-child { border-bottom: none; }
    }

    .why-panel,
    .terms-panel,
    .privacy-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
      overflow: auto;
    }

    .why-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      padding: 16px;
      min-height: 0;
      height: 100%;
      overflow: auto;
    }
    .legal-body {
      display: grid;
      gap: 16px;
      padding: 16px;
      min-height: 0;
      height: 100%;
      overflow: auto;
    }
    .legal-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px 18px;
      background: #ffffff;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .legal-card h3 { margin: 0; font-size: 16px; }
    .legal-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink); }
    .legal-card ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }

    .why-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px 18px;
      background: #ffffff;
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .why-card h3 {
      margin: 0;
      font-size: 16px;
    }

    .why-card p {
      margin: 0;
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink);
    }

    .faq-item strong {
      display: block;
      font-size: 13px;
      margin-bottom: 4px;
    }

    .faq-item p {
      margin: 0 0 10px 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
    }

    .observer-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      padding: 16px;
      min-height: 0;
      height: 100%;
      overflow: auto;
    }

    .observer-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px 14px;
      background: #ffffff;
      display: grid;
      gap: 10px;
      align-content: start;
    }

	    .observer-right {
	      display: grid;
	      gap: 16px;
	      align-content: start;
	    }
	    .observer-youtube {
	      width: 100%;
	      aspect-ratio: 16 / 9;
	      border-radius: 16px;
	      border: 1px solid var(--line);
	      overflow: hidden;
	      background: #000;
	    }
	    .observer-youtube iframe {
	      width: 100%;
	      height: 100%;
	      border: 0;
	      display: block;
	    }
	    .observer-youtube-thumb {
	      width: 100%;
	      border-radius: 16px;
	      border: 1px solid var(--line);
	      overflow: hidden;
	      display: block;
	    }

	    .observer-log {
	      border: 1px solid var(--line);
	      border-radius: 14px;
	      background: #0f172a;
      color: #e2e8f0;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      padding: 10px;
      max-height: 220px;
      overflow: auto;
      white-space: pre-wrap;
    }
    .codeblock {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: #0f172a;
    }
    .codeblock-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: rgba(2, 6, 23, 0.65);
      border-bottom: 1px solid rgba(226, 232, 240, 0.12);
    }
    .codeblock-title {
      font-size: 11px;
      font-weight: 700;
      color: #cbd5e1;
      font-family: "IBM Plex Mono", monospace;
    }
    .codeblock-copy {
      border: 1px solid rgba(226, 232, 240, 0.18);
      background: rgba(226, 232, 240, 0.08);
      color: #e2e8f0;
      padding: 4px 8px;
      border-radius: 10px;
      font-weight: 700;
      cursor: pointer;
    }
    .codeblock-copy:hover {
      background: rgba(226, 232, 240, 0.14);
    }
    .codeblock .observer-log {
      border: 0;
      border-radius: 0;
      background: transparent;
      margin: 0;
      max-height: 220px;
    }

    .observer-steps {
      display: grid;
      gap: 8px;
    }

    .observer-step {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px 12px;
      background: #fafafa;
      display: grid;
      gap: 4px;
    }

    .observer-step strong {
      font-size: 13px;
    }

    .observer-grid {
      display: grid;
      gap: 8px;
    }

    .observer-grid label {
      font-size: 12px;
      color: var(--muted);
    }

    .observer-grid input,
    .observer-grid select {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
    }
    .observer-field-error {
      border-color: #ff3b30 !important;
      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.14) !important;
    }
    .observer-location-summary {
      font-size: 12px;
      color: var(--muted);
    }

    .observer-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .observer-mode-tabs {
      display: inline-flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
    }
    .observer-mode-tab {
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.03);
      color: var(--ink);
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
    }
    body.theme-dark .observer-mode-tab {
      background: rgba(231, 238, 251, 0.06);
    }
    .observer-mode-tab.active {
      background: rgba(0, 122, 255, 0.12);
      border-color: rgba(0, 122, 255, 0.35);
      color: var(--blue-dark);
    }
    .observer-mode-panel { display: none; }
    .observer-mode-panel.active { display: block; }
    .observer-mobile-only { display: none; }

    .observer-map {
      width: 100%;
      height: 360px;
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      overflow: hidden;
    }

    .observer-map .leaflet-container {
      width: 100%;
      height: 100%;
    }

    .observer-legend {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
    }

    .observer-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .observer-legend i {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #34c759;
    }

    .observer-legend i.ok { background: #34c759; }
    .observer-legend i.est { background: #0a84ff; }
    .observer-legend i.warn { background: #ff9500; }
    .observer-legend i.bad { background: #ff3b30; }

    .observer-status {
      font-size: 12px;
      color: var(--muted);
      min-height: 18px;
    }

    .link-btn {
      border: 0;
      background: transparent;
      color: var(--blue-dark);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
    }
    body.theme-dark .link-btn {
      color: #ffffff;
      background: rgba(0, 0, 0, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.16);
      padding: 4px 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
    }
    body.theme-dark .link-btn:hover {
      filter: brightness(1.05);
    }

    body.theme-dark .leaflet-popup-content-wrapper,
    body.theme-dark .leaflet-popup-tip {
      background: var(--panel);
      color: var(--ink);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    body.theme-dark .leaflet-container a.leaflet-popup-close-button {
      color: var(--muted);
    }

    .install-log {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #0b1120;
      color: #e2e8f0;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      padding: 10px;
      max-height: 180px;
      overflow: auto;
      white-space: pre-wrap;
      display: none;
    }

    .install-log.active {
      display: block;
    }

    @keyframes slideIn {
      from { transform: translateY(8px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @media (max-width: 1200px) {
      .app { grid-template-columns: 240px 1fr; }
      .analysis-panel { display: none; }
    }

    @media (max-width: 1200px) and (min-width: 861px) {
      .rf-body {
        grid-template-columns: 1fr;
      }
      .rf-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .rf-detail {
        min-height: 240px;
        max-height: 38vh;
      }
      body.view-rf .rf-row {
        grid-template-columns: 80px 96px 92px 62px 74px 60px 60px 60px 70px 52px;
        gap: 8px;
      }
      body.view-rf .rf-row > div:nth-child(4),
      body.view-rf .rf-row > div:nth-child(6) {
        display: none;
      }
    }

    @media (max-width: 860px) {
      body { height: 100vh; overflow: hidden; }
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: 100vh;
        padding: 8px;
      }
      .topbar {
        gap: 6px;
        padding: 6px 8px;
        min-height: 40px;
        position: sticky;
        top: 0;
        z-index: 5;
        flex-wrap: nowrap;
      }
      .brand-logo { width: 32px; height: 32px; }
      .brand { flex: 1 1 auto; min-width: 0; }
      .brand-text { min-width: 0; }
      .brand-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .brand-text span { display: none; }
      .nav { display: none; }
      .menu-toggle { display: inline-flex; }
      .region-menu .nav-menu-panel {
        position: fixed;
        top: 60px;
        right: 8px;
      }
      .region-menu-trigger {
        max-width: 44px;
        justify-content: center;
        padding: 6px;
      }
      .region-menu-label {
        display: none;
      }
      .theme-toggle { margin-left: 0; }
      .topbar > .nav-menu[data-nav-group="region"] { margin-left: auto; }
      #loginBtn { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .menu-toggle { margin-left: 6px; }
      .nav a[data-view="observer"] { display: none; }
      .sidebar-panel {
        display: flex;
        position: fixed;
        top: 52px;
        left: 8px;
        bottom: 8px;
        width: min(86vw, 360px);
        z-index: 960;
        transform: translateX(-110%);
        transition: transform 0.2s ease;
        visibility: hidden;
        pointer-events: none;
      }
      body.view-channels.menu-open-left .sidebar-panel {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
      }
      body.menu-open-left .menu-backdrop,
      body.menu-open-right .menu-backdrop { display: block; }
      body.menu-open-right .mobile-menu { display: flex; transform: translateX(0); }
      .mobile-nav { display: flex; }
      .sidebar { padding: 8px; gap: 8px; }
      .channel { padding: 8px; grid-template-columns: 36px 1fr auto; gap: 8px; }
      .channel .snippet { font-size: 11px; }
      .panel { min-height: 0; }
      .content { min-height: 0; height: 100%; padding-bottom: env(safe-area-inset-bottom); }
      .channel-selector { display: inline-flex; }
      body.view-channels .channels-rail { display: inline-flex; }
      .messages {
        padding: 10px 12px;
        gap: 10px;
        flex: 1;
        overflow: auto;
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom));
        overflow-x: hidden;
      }
      .message { grid-template-columns: 36px 1fr; gap: 10px; min-width: 0; }
      .avatar { width: 32px; height: 32px; font-size: 12px; }
      .bubble { padding: 8px 12px; border-radius: 12px; max-width: 85%; }
      .message .meta { font-size: 11px; }
      .msg-footer { font-size: 11px; gap: 8px; }
      .analysis-panel {
        bottom: max(14px, env(safe-area-inset-bottom, 14px));
        right: auto;
        top: calc(env(safe-area-inset-top, 0px) + 64px);
        left: 50%;
        transform: translate(-50%, 0);
        width: min(520px, calc(100vw - 32px));
        max-height: calc(100vh - 200px);
        height: auto;
        z-index: 10011;
        border-radius: 26px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        box-shadow: var(--shadow);
        display: none;
        touch-action: none;
        box-sizing: border-box;
      }
      .analysis-panel .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
      }
      .analysis-panel .analysis {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 16px 16px;
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
      }
    .route-title-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
    }
    .route-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .route-share {
      font-size: 13px;
      padding: 4px 10px;
    }
      html body.view-rotm { height: auto; overflow: auto; }
      body.view-rotm .app { height: auto; min-height: 100vh; }
      .rotm-grid { grid-template-columns: 1fr; min-height: 0; }
      .rotm-card { min-height: auto; }
      .rotm-feed { min-height: 220px; }
      .rotm-leaderboard { min-height: 220px; }
      .rotm-leader-row {
        grid-template-columns: 28px 1fr 72px 72px;
        gap: 8px;
      }
      .rotm-leader-row > div:nth-child(5),
      .rotm-leader-row > div:nth-child(6) {
        grid-column: 2 / -1;
      }
      .rotm-leader-row .rotm-leader-rank {
        grid-row: span 3;
      }
      .rotm-leader-row .rotm-leader-node {
        font-size: 13px;
      }
      .rotm-leader-row .rotm-leader-meta {
        text-align: left;
      }
      .rotm-settings-grid { grid-template-columns: 1fr; }
      .rotm-feed-row { grid-template-columns: 1fr; }
      .rotm-feed-row-compact { grid-template-columns: 56px minmax(0, 1fr); }
      .rotm-feed-right { grid-column: 1 / -1; min-width: 0; justify-items: stretch; }
      .rotm-feed-timer-compact { justify-items: start; }
      .rotm-cq-timer { font-size: 24px; }
      #rotmQsoMap { height: 260px; }
      body.view-channels .analysis-panel { display: none; }
      body.route-open .analysis-panel { display: flex; }
      body.route-open .route-backdrop { display: block; }
      .analysis { grid-template-rows: 1fr auto; }
      #routeMap { min-height: 240px; }
      .route-legend-floating {
        left: 8px;
        bottom: 8px;
        max-width: min(90%, 300px);
        padding: 8px 10px;
      }
      .rank-panel > .title,
      .observer-rank-panel > .title,
      .room-rank-panel > .title {
        align-items: flex-start;
        gap: 8px;
        flex-wrap: wrap;
      }
      .rank-panel > .title .chip,
      .observer-rank-panel > .title .chip,
      .room-rank-panel > .title .chip {
        width: 100%;
      }
      .rank-body { grid-template-columns: 1fr; }
      .rank-helper-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 10px;
        text-align: left;
      }
      .rank-helper-row .link-btn {
        padding: 0;
        white-space: normal;
      }
      .rank-summary { padding: 8px 10px; gap: 8px; }
      .summary-card { padding: 8px 10px; }
      .summary-card strong { font-size: 14px; }
	      .rank-detail-overlay {
	        position: fixed;
	        inset: 0;
	        display: none;
	        background: rgba(0, 0, 0, 0.4);
	        align-items: flex-start;
	        justify-content: center;
	        z-index: 900;
	        padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)) 16px;
	        overflow-y: auto;
	        -webkit-overflow-scrolling: touch;
	      }
      .rank-detail-overlay.open {
        display: flex;
      }
	      .rank-detail-card {
	        background: var(--panel);
	        border-radius: 18px;
	        padding: 20px;
	        padding-right: 64px;
	        width: min(96vw, 520px);
	        max-height: 90vh;
	        max-height: min(90vh, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)));
	        overflow-y: auto;
	        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
	        position: relative;
	      }
      .rank-detail-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
      }
      .rank-detail-close button {
        font-size: 18px;
      }
      .rank-detail-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
      }
      .route-history-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 4px;
      }
      .route-history-meta {
        color: var(--muted);
        font-size: 12px;
        margin-bottom: 12px;
      }
      .route-history-list {
        display: grid;
        gap: 10px;
      }
      .route-history-item {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        background: var(--panel);
      }
      .route-history-path {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
      }
      .route-history-sub {
        color: var(--muted);
        font-size: 12px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .rank-body { height: auto; }
      .rank-map { display: none; }
      #rankMap { display: none; }
      #observerRankMap { display: none; }
      .node-rank-map { display: none; }
      #nodeRankMap { display: none; }
      .rank-scroll,
      #channels {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .rank-scroll::-webkit-scrollbar,
      #channels::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
      }
      .rank-scroll::-webkit-scrollbar-track,
      #channels::-webkit-scrollbar-track,
      .rank-scroll::-webkit-scrollbar-thumb,
      #channels::-webkit-scrollbar-thumb {
        background: transparent !important;
        border: none !important;
      }
      #channels {
        max-height: 100%;
        overflow: overlay;
        overflow-x: hidden;
      }
      .rf-body { grid-template-columns: 1fr; }
      .rf-table { overflow-x: auto; }
      body.view-rf .rf-row { min-width: 0; grid-template-columns: 70px 70px 1fr 70px 60px 60px; }
      body.view-rf .rf-row > div:nth-child(3),
      body.view-rf .rf-row > div:nth-child(4),
      body.view-rf .rf-row > div:nth-child(5),
      body.view-rf .rf-row > div:nth-child(10),
      body.view-rf .rf-row > div:nth-child(11),
      body.view-rf .rf-row > div:nth-child(12) { display: none; }
      .observer-body { grid-template-columns: 1fr; }
      .observer-map { height: 260px; }
      .observer-desktop-only { display: none !important; }
      .observer-mobile-only { display: block; }
      .observer-rank-body { grid-template-columns: 1fr; }
      .observer-rank-map { display: none; }
      #observerRankMap { display: none; }
      /* Mobile: avoid nested flex scroll issues; let the panel scroll instead. */
      #observerRankScroll {
        overflow: visible;
        flex: none;
        padding-right: 0;
      }
      .why-body { grid-template-columns: 1fr; }
      .meshscore-panel { min-height: 0; overflow: hidden; }
      .meshscore-body { min-height: 0; height: 100%; overflow: auto; }
      body.view-rank .rank-panel,
      body.view-observer-rank .observer-rank-panel,
      body.view-node-rank .node-rank-panel,
      body.view-room-rank .room-rank-panel { overflow: auto; }
    }
    .coverage-popup {
      position: fixed;
      inset: 0;
      background: rgba(10, 11, 14, 0.75);
      display: none;
      justify-content: center;
      align-items: center;
      padding: 20px;
      z-index: 1100;
    }
    .coverage-popup.open {
      display: flex;
    }
    .coverage-popup .coverage-card {
      max-width: 420px;
      width: 100%;
      background: var(--panel);
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }
    .coverage-popup .coverage-card h3 {
      margin: 0;
      font-size: 20px;
    }
    .coverage-popup .coverage-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
    }
    .coverage-popup .coverage-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .coverage-popup .coverage-close {
      position: absolute;
      top: 10px;
      right: 12px;
      z-index: 3;
    }