: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;
    }
    .app > *,
    .rank-body > *,
    .rank-list,
    .rank-scroll,
    #rankList {
      min-width: 0;
    }
    @supports (height: 100dvh) {
      body { height: 100dvh; }
      .app { height: 100dvh; }
    }

    .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;
    }
    .meshrank-ad-shell {
      margin: 16px 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(60, 60, 67, 0.04);
      overflow: hidden;
    }
    body.theme-dark .meshrank-ad-shell {
      background: rgba(231, 238, 251, 0.04);
    }
    .meshrank-ad-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .meshrank-ad-shell .adsbygoogle {
      display: block;
      min-height: 120px;
    }
    .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;
    }
    .badge.bot-badge {
      background: rgba(88, 86, 214, 0.16);
      border-color: rgba(88, 86, 214, 0.28);
      color: #3b39a5;
    }
    .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));
    }
    .mesh-live-countries {
      display: grid;
      gap: 8px;
    }
    .mesh-live-country-list {
      display: grid;
      gap: 6px;
    }
    .mesh-live-country-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--panel);
      border: 1px solid var(--line);
      font-size: 13px;
    }
    .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;
    }

    body.view-mesh-live .mesh-live-panel {
      display: block;
      padding: 16px;
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--ink);
    }

    .meshlive-topline {
      margin-bottom: 14px;
    }

    .meshlive-title {
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: clamp(24px, 2.2vw, 32px);
      line-height: 1.04;
      letter-spacing: -0.03em;
      font-weight: 700;
    }

    .meshlive-top-grid,
    .meshlive-network-grid,
    .meshlive-bottom-grid,
    .meshlive-ops-grid,
    .meshlive-system-metrics,
    .meshlive-reach-grid {
      display: grid;
      gap: 16px;
    }

    .meshlive-top-grid,
    .meshlive-bottom-grid {
      align-items: stretch;
    }

    .meshlive-top-grid > .meshlive-panel-block,
    .meshlive-bottom-grid > .meshlive-panel-block {
      height: 100%;
    }

    .meshlive-snapshot-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .meshlive-snapshot-grid-hero {
      margin-bottom: 16px;
    }

    .meshlive-snapshot,
    .meshlive-panel-block,
    .meshlive-network-card {
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.03);
    }
    body.theme-dark .meshlive-snapshot,
    body.theme-dark .meshlive-panel-block,
    body.theme-dark .meshlive-network-card {
      background: rgba(255, 255, 255, 0.03);
    }

    .meshlive-snapshot {
      padding: 14px 16px;
    }

    .meshlive-snapshot span,
    .meshlive-metric-chip span,
    .meshlive-summary-card span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .meshlive-snapshot strong,
    .meshlive-metric-chip strong,
    .meshlive-summary-card strong {
      display: block;
      font-size: 18px;
      line-height: 1.1;
      color: var(--ink);
    }

    .meshlive-summary-meta {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .meshlive-top-grid {
      grid-template-columns: minmax(0, 1.6fr) minmax(420px, 1fr);
      align-items: start;
      margin-bottom: 16px;
    }

    .meshlive-top-grid > .meshlive-panel-block {
      height: auto;
    }

    .meshlive-ops-grid {
      grid-template-columns: minmax(280px, 0.72fr) minmax(0, 2.28fr);
      align-items: stretch;
      margin-bottom: 16px;
    }

    .meshlive-ops-main {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .meshlive-system-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .meshlive-services-card {
      align-self: start;
    }

    .meshlive-reach-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .meshlive-reach-section {
      min-width: 0;
    }

    .meshlive-reach-section + .meshlive-reach-section {
      border-left: 1px solid var(--line);
      padding-left: 14px;
    }

    .meshlive-reach-title {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
    }

    .meshlive-network-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 16px;
    }

    .meshlive-bottom-grid {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }

    .meshlive-panel-block {
      padding: 16px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .meshlive-panel-head,
    .meshlive-network-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }

    .meshlive-panel-title {
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: 18px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .meshlive-panel-sub,
    .meshlive-network-head p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .meshlive-metric-row,
    .meshlive-summary-grid,
    .meshlive-legend {
      display: grid;
      gap: 10px;
    }

    .meshlive-metric-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-bottom: 6px;
    }

    .meshlive-metric-chip,
    .meshlive-summary-card {
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.03);
      border: 1px solid var(--line);
    }
    body.theme-dark .meshlive-metric-chip,
    body.theme-dark .meshlive-summary-card {
      background: rgba(255, 255, 255, 0.03);
    }

    .meshlive-canvas {
      width: 100%;
      display: block;
      height: auto;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.025);
    }
    body.theme-dark .meshlive-canvas {
      background: rgba(255, 255, 255, 0.02);
    }

    .meshlive-spark {
      height: 108px;
      min-height: 108px;
      max-height: 108px;
    }

    .meshlive-country-list,
    .meshlive-legend {
      display: grid;
      gap: 12px;
    }

    .meshlive-country-list {
      align-content: start;
    }

    .meshlive-top-grid .meshlive-country-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
    }

    .meshlive-top-grid .meshlive-country-row {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
    }

    .meshlive-top-grid .meshlive-country-value {
      grid-column: 2;
      justify-self: start;
      margin-top: -4px;
    }

    .meshlive-country-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .meshlive-country-rank {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: 16px;
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid var(--line);
    }
    body.theme-dark .meshlive-country-rank {
      background: rgba(255, 255, 255, 0.04);
    }

    .meshlive-country-name {
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .meshlive-country-meta,
    .meshlive-network-meta,
    .meshlive-empty {
      color: var(--muted);
      font-size: 12px;
    }

    .meshlive-track {
      width: 100%;
      height: 10px;
      margin-top: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.08);
    }
    body.theme-dark .meshlive-track {
      background: rgba(255, 255, 255, 0.08);
    }

    .meshlive-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #62a9ff, #48d79c);
    }

    .meshlive-country-value {
      color: var(--ink);
      font-weight: 600;
      white-space: nowrap;
    }

    .meshlive-network-card {
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .meshlive-network-head h3 {
      margin: 0;
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: 17px;
      letter-spacing: -0.02em;
    }

    .meshlive-network-total {
      display: block;
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: 30px;
      line-height: 1;
      color: var(--ink);
    }

    .meshlive-network-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .meshlive-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 6px;
    }

    .meshlive-route-card {
      min-width: 0;
    }

    .meshlive-route-funnel {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .meshlive-funnel-stage {
      --stage-color: #62a9ff;
      --stage-pct: 0;
      display: grid;
      grid-template-columns: minmax(118px, 0.85fr) minmax(120px, 1fr) minmax(76px, auto);
      gap: 10px;
      align-items: center;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.025);
      min-width: 0;
    }
    body.theme-dark .meshlive-funnel-stage {
      background: rgba(255, 255, 255, 0.025);
    }

    .meshlive-funnel-stage.is-ok { --stage-color: #34c759; }
    .meshlive-funnel-stage.is-warn { --stage-color: #ffb84d; }
    .meshlive-funnel-stage.is-bad { --stage-color: #ff3b30; }
    .meshlive-funnel-stage.is-info { --stage-color: #62a9ff; }
    .meshlive-funnel-stage.is-idle { --stage-color: #8e8e93; }

    .meshlive-funnel-stage.is-bottleneck {
      border-color: var(--stage-color);
      box-shadow: inset 3px 0 0 var(--stage-color);
    }

    .meshlive-funnel-main {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .meshlive-funnel-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      flex: 0 0 auto;
      background: var(--stage-color);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
    }
    body.theme-dark .meshlive-funnel-dot {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    }

    .meshlive-funnel-name {
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meshlive-funnel-meta {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meshlive-funnel-bar {
      position: relative;
      height: 18px;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.08);
      min-width: 0;
    }
    body.theme-dark .meshlive-funnel-bar {
      background: rgba(255, 255, 255, 0.08);
    }

    .meshlive-funnel-fill {
      width: calc(var(--stage-pct) * 1%);
      max-width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--stage-color);
      clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
      transition: width 0.2s ease;
    }

    .meshlive-funnel-stage.has-value .meshlive-funnel-fill {
      min-width: 16px;
    }

    .meshlive-funnel-value {
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      text-align: right;
      white-space: nowrap;
    }

    .meshlive-service-list {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .meshlive-service-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
    }

    .meshlive-service-main {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .meshlive-service-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #8e8e93;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
    }

    .meshlive-service-dot.is-up {
      background: #34c759;
    }

    .meshlive-service-dot.is-down {
      background: #ff3b30;
    }

    .meshlive-service-dot.is-idle {
      background: #ffb84d;
    }

    .meshlive-service-name {
      font-weight: 600;
      color: var(--ink);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meshlive-service-meta {
      font-size: 11px;
      color: var(--muted);
    }

    .meshlive-service-value {
      text-align: right;
      font-weight: 700;
      white-space: nowrap;
    }

    .meshlive-summary-grid-tight {
      margin-bottom: 6px;
    }

    .meshlive-legend {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 8px;
    }

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

    .meshlive-legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      flex: 0 0 auto;
    }

    .meshlive-empty {
      padding: 16px;
      border-radius: 16px;
      border: 1px dashed var(--line);
      background: rgba(0, 0, 0, 0.02);
      line-height: 1.5;
    }
    body.theme-dark .meshlive-empty {
      background: rgba(255, 255, 255, 0.02);
    }

    @media (max-width: 1280px) {
      .mesh-live-grid {
        grid-template-columns: 1fr;
      }
      .mesh-live-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .meshlive-top-grid,
      .meshlive-bottom-grid,
      .meshlive-ops-grid {
        grid-template-columns: 1fr;
      }

      .meshlive-network-grid {
        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;
      }

      .meshlive-snapshot-grid,
      .meshlive-network-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .meshlive-system-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .meshlive-route-card {
        grid-column: 1 / -1;
      }
    }
    @media (max-width: 640px) {
      .mesh-live-panel {
        padding: 12px;
      }
      .mesh-live-topline {
        align-items: flex-start;
      }
      .meshlive-summary-grid,
      .meshlive-network-grid,
      .meshlive-system-metrics,
      .meshlive-reach-grid {
        grid-template-columns: 1fr;
      }
      .meshlive-snapshot-grid,
      .meshlive-bottom-grid .meshlive-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .meshlive-reach-section + .meshlive-reach-section {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 14px;
      }
      .meshlive-top-grid .meshlive-country-list {
        grid-template-columns: 1fr;
      }
      .meshlive-route-card {
        grid-column: 1 / -1;
      }
      .meshlive-funnel-stage {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .meshlive-funnel-bar {
        grid-column: 1 / -1;
      }
      .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;
      }
      .meshlive-country-row {
        grid-template-columns: auto 1fr;
      }
      .meshlive-country-value {
        grid-column: 2;
      }
      .meshlive-network-meta {
        flex-direction: column;
        gap: 4px;
      }
      .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;
      }
      .meshlive-metric-row {
        grid-template-columns: repeat(3, minmax(0, 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;
    }

	    .feed-status-indicator {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      gap: 0;
	      border: 1px solid rgba(15, 23, 42, 0.08);
	      background: rgba(15, 23, 42, 0.04);
	      color: var(--muted);
	      width: 30px;
	      height: 30px;
	      padding: 0;
	      border-radius: 999px;
	      font-size: 12px;
	      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: default;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      flex: 0 0 auto;
    }

    .feed-status-indicator.is-live {
      background: rgba(52, 199, 89, 0.1);
      border-color: rgba(52, 199, 89, 0.2);
      color: #1d6f3b;
    }

	    .feed-status-indicator.is-offline {
	      background: rgba(255, 59, 48, 0.1);
	      border-color: rgba(255, 59, 48, 0.22);
	      color: #b42318;
	    }

    .feed-status-indicator.is-paused {
      background: rgba(255, 59, 48, 0.12);
      border-color: rgba(255, 59, 48, 0.24);
      color: #b42318;
      cursor: pointer;
    }

    body.theme-dark .feed-status-indicator {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.74);
    }

    body.theme-dark .feed-status-indicator.is-live {
      background: rgba(52, 199, 89, 0.16);
      border-color: rgba(52, 199, 89, 0.22);
      color: #9ee7b0;
    }

	    body.theme-dark .feed-status-indicator.is-offline {
	      background: rgba(255, 59, 48, 0.16);
	      border-color: rgba(255, 105, 97, 0.24);
	      color: #ffb4ab;
	    }

    body.theme-dark .feed-status-indicator.is-paused {
      background: rgba(255, 59, 48, 0.18);
      border-color: rgba(255, 105, 97, 0.24);
      color: #ffb4ab;
    }

    .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-logo img.brand-logo-dark { display: none; }
    body.theme-dark .brand-logo img.brand-logo-light { display: none; }
    body.theme-dark .brand-logo img.brand-logo-dark { display: block; }

    .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);
    }
    .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: 1800;
	    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 56px;
      right: 0;
	      bottom: 12px;
	      width: min(86vw, 320px);
	      z-index: 1810;
      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;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .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;
    }
    .channel-unread-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 75%, transparent);
      flex: 0 0 auto;
    }

    .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 {
      box-sizing: border-box;
      padding: 10px 14px;
      border-radius: 14px;
      max-width: min(68ch, 640px);
      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);
    }
    .bubble a {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 2px;
      overflow-wrap: anywhere;
    }

    .msg-bubble-stack {
      position: relative;
      display: inline-block;
      width: fit-content;
      min-width: min(55ch, 100%);
      max-width: min(68ch, 100%);
      padding-bottom: 18px;
    }

    .msg-bubble-stack .bubble {
      position: relative;
      width: 100%;
      max-width: 100%;
    }

    /* 2026-06-14: site-wide Twemoji styling. Twemoji parses emoji into <img
       class="emoji">; this sizes them inline with the surrounding text and
       keeps them aligned vertically. Without this, the default img display
       offsets emoji baseline by ~3px and they look wrong in chips/buttons. */
    img.emoji {
      height: 1em;
      width: 1em;
      margin: 0 .05em 0 .1em;
      vertical-align: -0.1em;
      display: inline-block;
    }
    /* 2026-06-14: #worldcup2026 avatar swap — flag replaces initial letter. */
    .avatar.avatar-flag {
      background: var(--panel) !important;
      color: inherit;
      padding: 0;
      overflow: hidden;
    }
    body.theme-dark .avatar.avatar-flag {
      background: var(--panel-strong, rgba(255,255,255,0.05)) !important;
    }
    .avatar.avatar-flag img {
      width: 75%;
      height: 75%;
      display: block;
      object-fit: contain;
      margin: 0;
      vertical-align: middle;
    }

    .world-cup-flag {
      position: absolute;
      right: -9px;
      bottom: -9px;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 2px solid var(--panel);
      border-radius: 50%;
      background: var(--panel);
      box-shadow: 0 4px 12px rgba(10, 11, 14, 0.28);
      font-size: 18px;
      line-height: 1;
    }

    .kind-worldcup {
      color: #082f49;
      background:
        linear-gradient(145deg, #ffffff 0 46%, #16a34a 46% 63%, #ef4444 63% 80%, #2563eb 80%);
      border: 1px solid rgba(15, 23, 42, 0.14);
      font-size: 20px;
      font-weight: 900;
    }

    .msg-reactions {
      position: absolute;
      right: 10px;
      bottom: 0;
      z-index: 2;
      margin-top: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 5px;
      transform: translateY(-8px);
      max-width: min(460px, 100%);
    }
    .msg-bubble-stack.outgoing .msg-reactions {
      left: 10px;
      right: auto;
      justify-content: flex-start;
    }
    .msg-reaction-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 26px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.52);
      background: transparent;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.14);
      cursor: pointer;
    }
    .msg-reaction-emoji {
      display: inline-block;
      font-size: 18px;
      line-height: 1;
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
    }
    .msg-reaction-count {
      font-size: 12px;
      line-height: 1;
    }
    .msg-reaction-chip.pending {
      border-color: rgba(255, 255, 255, 0.68);
      background: transparent;
    }
    body:not(.theme-dark) .msg-reaction-chip {
      background: transparent;
      backdrop-filter: none;
    }
    body:not(.theme-dark) .msg-reaction-chip.pending {
      background: transparent;
    }
    body.theme-dark .msg-reaction-chip {
      border-color: rgba(232, 238, 245, 0.18);
      background: rgba(10, 11, 14, 0.72);
      backdrop-filter: blur(8px);
      color: #e8eef5;
      text-shadow: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .msg-reaction-chip.pending {
      border-color: rgba(232, 238, 245, 0.4);
      background: rgba(255, 255, 255, 0.08);
    }
    .msg-reply-preview {
      margin-bottom: 10px;
      padding: 9px 11px;
      border-radius: 12px;
      border: 1px solid rgba(232, 238, 245, 0.18);
      background: rgba(0, 0, 0, 0.16);
    }
    .msg-reply-sender {
      color: #e8eef5;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 3px;
    }
    .msg-reply-body {
      color: rgba(232, 238, 245, 0.86);
      font-size: 12px;
      line-height: 1.3;
    }

    .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-region {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 8px;
      border-radius: 999px;
      background: rgba(52, 199, 89, 0.12);
      color: var(--green-dark, #248a3d);
      border: 1px solid rgba(52, 199, 89, 0.25);
      white-space: nowrap;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    body.theme-dark .msg-region {
      background: rgba(72, 208, 106, 0.14);
      color: #9ee7b0;
      border-color: rgba(72, 208, 106, 0.28);
    }
    .msg-region a.msg-region-link,
    .msg-region.msg-region-multi {
      color: inherit;
      text-decoration: none;
      font-weight: 700;
    }
    .msg-region a.msg-region-link:hover,
    .msg-region.msg-region-multi:hover { text-decoration: underline; }
    .msg-region.msg-region-multi { cursor: pointer; }

    .region-scope-popup {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 18px 36px rgba(0,0,0,0.25);
      padding: 12px 14px;
      min-width: 220px;
      max-width: 280px;
      color: var(--ink);
      font-size: 12px;
    }
    body.theme-dark .region-scope-popup { box-shadow: 0 18px 36px rgba(0,0,0,0.55); }
    .region-scope-popup-head { font-weight: 700; font-size: 12px; margin-bottom: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .region-scope-popup-body { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .region-scope-chip {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(52, 199, 89, 0.14);
      color: var(--green-dark, #248a3d);
      font-weight: 700;
      text-decoration: none;
      font-family: "IBM Plex Mono", ui-monospace, monospace;
      font-size: 11px;
    }
    body.theme-dark .region-scope-chip { color: #9ee7b0; background: rgba(72, 208, 106, 0.16); }
    .region-scope-chip:hover { background: rgba(52, 199, 89, 0.22); }
    .region-scope-popup-foot a { color: var(--blue); text-decoration: none; font-weight: 600; }
    .region-scope-popup-foot a: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;
	      overflow-x: hidden;
	      overscroll-behavior: contain;
	      -webkit-overflow-scrolling: touch;
	      touch-action: pan-y;
	      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;
    }
    /* Rich repeater detail panel */
    .rd-header {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .rd-score-ring {
      flex-shrink: 0;
      width: 62px;
      height: 62px;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    }
    .rd-score-ring .rd-score-num { font-size: 26px; letter-spacing: -1px; }
    .rd-score-ring .rd-score-lbl { font-size: 9px; font-weight: 600; opacity: 0.85; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 1px; }
    .rd-title-block { flex: 1; min-width: 0; }
    .rd-title-block h2 { font-size: 18px; font-weight: 700; margin: 0 0 5px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.3; }
    .rd-kind-chip { font-size: 10px; font-weight: 700; background: var(--blue); color: #fff; border-radius: 5px; padding: 2px 6px; letter-spacing: 0.4px; text-transform: uppercase; }
    .rd-meta-row { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
    .rd-meta-item { display: flex; align-items: center; gap: 4px; }
    .rd-meta-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .rd-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
    @media (max-width: 560px) { .rd-stats-strip { grid-template-columns: repeat(2, 1fr); } }
    .rd-stat { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: rgba(0,0,0,0.025); display: flex; flex-direction: column; gap: 3px; }
    body.theme-dark .rd-stat { background: rgba(255,255,255,0.04); }
    .rd-stat-val { font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
    .rd-stat-label { font-size: 11px; color: var(--muted); font-weight: 500; line-height: 1.3; }
    .rd-stat-sub { font-size: 10px; color: var(--muted); opacity: 0.7; }
    .rd-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
    .rd-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    .rd-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); }
    .rd-section-badge { font-size: 11px; font-weight: 600; background: var(--line); border-radius: 10px; padding: 1px 7px; color: var(--ink); }
    .rd-nb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
    .rd-nb-chip { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
    .rd-nb-chip strong { font-size: 16px; font-weight: 800; }
    .rd-nb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .rd-observer-list { display: grid; gap: 5px; }
    .rd-observer-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,0.02); }
    body.theme-dark .rd-observer-item { background: rgba(255,255,255,0.03); }
    .rd-observer-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rd-observer-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
    .rd-observer-age { font-size: 11px; color: var(--muted); white-space: nowrap; }
    .rd-sender-list { display: grid; gap: 6px; }
    .rd-sender-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,0.02); }
    body.theme-dark .rd-sender-item { background: rgba(255,255,255,0.03); }
    .rd-sender-main { min-width: 0; display: grid; gap: 2px; }
    .rd-sender-name { font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rd-sender-meta { font-size: 11px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rd-sender-metric { font-size: 12px; color: var(--muted); white-space: nowrap; }
    .rd-sender-metric strong { font-size: 14px; color: var(--ink); }
    .rd-type-chip { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 2px 5px; flex-shrink: 0; letter-spacing: 0.3px; text-transform: uppercase; }
    .rd-type-observer { background: #0ea5e9; color: #fff; }
    .rd-type-repeater { background: #8b5cf6; color: #fff; }
    .rd-type-mqtt { background: #f97316; color: #fff; }
    .rd-mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    @media (max-width: 420px) { .rd-mb-grid { grid-template-columns: repeat(2, 1fr); } }
    .rd-mb-cell { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(139,92,246,0.06); }
    .rd-mb-val { font-size: 20px; font-weight: 800; }
    .rd-mb-lbl { font-size: 11px; color: var(--muted); }
    .rd-score-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(0,0,0,0.03); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; cursor: pointer; transition: background 0.15s; }
    body.theme-dark .rd-score-summary { background: rgba(255,255,255,0.04); }
    .rd-score-summary:hover { background: rgba(0,0,0,0.06); }
    body.theme-dark .rd-score-summary:hover { background: rgba(255,255,255,0.07); }
    .rd-score-summary-label { font-weight: 600; }
    .rd-score-summary-arrow { color: var(--muted); font-size: 16px; }
    .rd-note { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 8px; line-height: 1.5; }
    .rd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
    .rd-action-btn { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.03); color: var(--ink); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; display: inline-block; }
    body.theme-dark .rd-action-btn { background: rgba(255,255,255,0.05); }
	    .rd-action-btn:hover { background: rgba(0,0,0,0.07); border-color: var(--blue); color: var(--blue); }
	    .rd-action-btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
	    .rd-action-btn-primary:hover { opacity: 0.88; color: #fff; }
	    .repeater-profile-card { max-width: 1120px; }
	    .repeater-profile-hero { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; margin-bottom: 16px; }
	    .repeater-profile-photo { width: 92px; height: 92px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; background: rgba(0,0,0,0.05); }
	    .repeater-profile-placeholder { display: grid; place-items: center; font-weight: 800; color: var(--muted); }
	    .repeater-profile-frame { width: 100%; min-height: 360px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
	    .repeater-profile-editor { display: grid; gap: 10px; }
	    .repeater-profile-editor textarea { min-height: 440px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
	    .repeater-profile-choice-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
	    .repeater-profile-toolbar { display:flex; gap:6px; flex-wrap:wrap; }
	    .repeater-profile-toolbar button { min-width:36px; padding:6px 9px; border-radius:8px; border:1px solid var(--line); background:rgba(0,0,0,0.04); color:var(--ink); cursor:pointer; font-weight:700; }
	    body.theme-dark .repeater-profile-toolbar button { background:rgba(255,255,255,0.06); }
	    .repeater-profile-richbox { min-height: 440px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color:#111827; line-height:1.55; overflow:auto; }
	    .repeater-profile-richbox:focus { outline: 2px solid rgba(10,132,255,0.35); outline-offset: 2px; }
	    .repeater-profile-meta-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
	    .repeater-profile-warning { border:1px solid rgba(255,149,0,0.35); background:rgba(255,149,0,0.1); color:var(--ink); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.4; }
	    .repeater-profile-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 24px; font-weight: 800; letter-spacing: 0.08em; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; display: inline-block; background: rgba(10,132,255,0.08); }
	    @media (max-width: 560px) {
	      .repeater-profile-hero { grid-template-columns: 1fr; }
	      .repeater-profile-photo { width: 72px; height: 72px; }
	      .repeater-profile-meta-grid { grid-template-columns: 1fr; }
	    }
	    .rd-loading { color: var(--muted); font-size: 13px; padding: 10px 0; display: flex; align-items: center; gap: 8px; }
    .rd-loading::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--muted); animation: rd-spin 0.8s linear infinite; flex-shrink: 0; }
    @keyframes rd-spin { to { transform: rotate(360deg); } }
    .rd-empty { font-size: 13px; color: var(--muted); padding: 6px 0; }
    .badge-more { cursor: pointer; opacity: 0.7; transition: opacity 0.15s; }
    .badge-more:hover { opacity: 1; }
    .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;
    }
    .id-clashes-usage.good {
      color: #34c759;
      font-weight: 700;
    }
    .id-clashes-usage.warn {
      color: #ffcc00;
      font-weight: 700;
    }
    .id-clashes-usage.bad {
      color: #ff3b30;
      font-weight: 700;
    }
    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: 6px;
      padding: 8px 9px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
      max-width: min(74%, 250px);
      min-width: 148px;
      pointer-events: auto;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    body.theme-dark .route-legend-floating {
      background: rgba(16, 18, 24, 0.84);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }
    .route-legend-floating.is-collapsed {
      gap: 0;
      max-width: 168px;
      min-width: 0;
    }
    .route-legend-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .route-legend-title {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .route-legend-toggle {
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.04);
      color: var(--muted);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
    }
    .route-legend-toggle:hover {
      background: rgba(0, 0, 0, 0.08);
      color: var(--ink);
    }
    body.theme-dark .route-legend-toggle {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.08);
    }
    body.theme-dark .route-legend-toggle:hover {
      background: rgba(255, 255, 255, 0.14);
    }
    .route-legend-metrics {
      display: grid;
      gap: 3px;
    }
    .route-legend-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
    }
    .route-legend-row strong {
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
    }
    .route-legend-items {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .route-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 6px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.04);
      font-size: 10px;
      line-height: 1.2;
    }
    body.theme-dark .route-legend-item {
      background: rgba(255, 255, 255, 0.08);
    }
    .route-legend-swatch {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
    .route-legend-body {
      display: grid;
      gap: 6px;
    }
    .route-legend-floating.is-collapsed .route-legend-body {
      display: none;
    }
    .route-legend-summary {
      display: none;
      font-size: 11px;
      font-weight: 700;
      color: var(--ink);
    }
    .route-legend-floating.is-collapsed .route-legend-summary {
      display: 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);
	    }
	    .meshrank-map-default-control {
	      display: flex;
	      align-items: center;
	      background: rgba(255,255,255,0.94);
	      border: 1px solid rgba(15,23,42,0.12);
	      border-radius: 8px;
	      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	      overflow: hidden;
	    }
	    body.theme-dark .meshrank-map-default-control {
	      background: rgba(22,22,26,0.94);
	      border-color: rgba(255,255,255,0.14);
	      box-shadow: 0 8px 24px rgba(0,0,0,0.42);
	    }
	    .meshrank-map-default-control button {
	      appearance: none;
	      border: 0;
	      background: transparent;
	      color: var(--ink);
	      cursor: pointer;
	      font-size: 12px;
	      font-weight: 800;
	      line-height: 1;
	      min-height: 30px;
	      padding: 8px 10px;
	      white-space: nowrap;
	    }
	    .meshrank-map-default-control button:hover {
	      background: rgba(0,122,255,0.10);
	      color: var(--blue);
	    }
	    .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;
	      width: 100%;
	      border: 0;
	      text-align: left;
	      cursor: pointer;
	    }
	    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-row:hover {
	      background: rgba(11,90,212,0.08);
	    }
	    body.theme-dark .meshflow-live-row:hover {
	      background: rgba(11,90,212,0.16);
	    }
	    .meshflow-live-row:focus-visible {
	      outline: 2px solid rgba(11,90,212,0.45);
	      outline-offset: 1px;
	    }
	    .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-map-loading {
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: 20px 14px;
      text-align: center;
      color: var(--muted);
    }
    .neighbor-map-spinner {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 3px solid rgba(60, 60, 67, 0.18);
      border-top-color: var(--blue);
      animation: rankSpin 0.9s linear infinite;
    }
    body.theme-dark .neighbor-map-spinner {
      border-color: rgba(231, 238, 251, 0.18);
      border-top-color: var(--blue);
    }
    .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;
    }

    .mesh-regions-panel {
      grid-column: 1 / -1;
      display: none;
      min-height: 0;
      overflow: hidden;
    }

    .mesh-regions-body {
      display: grid;
      gap: 16px;
      padding: 14px 16px 18px;
      min-height: 0;
      overflow: auto;
    }

    .mesh-regions-hero {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(139, 92, 246, 0.08));
      display: grid;
      gap: 8px;
    }

    .mesh-regions-hero-title {
      font-weight: 700;
      font-size: 18px;
    }

    .mesh-regions-hero-copy {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }

    .mesh-regions-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
    }

    .mesh-regions-summary-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.02);
      display: grid;
      gap: 6px;
    }

    .mesh-regions-summary-value {
      font-size: 26px;
      font-weight: 700;
      line-height: 1;
    }

    .mesh-regions-summary-label {
      font-size: 12px;
      color: var(--muted);
    }

    .mesh-regions-summary-note {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }

    .mesh-regions-sections {
      display: grid;
      gap: 16px;
    }

    .mesh-regions-section {
      display: grid;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.015);
    }

    .mesh-regions-section-head {
      display: grid;
      gap: 4px;
    }

    .mesh-regions-section-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .mesh-regions-list,
    .mesh-regions-region-list {
      display: grid;
      gap: 12px;
    }

    .mesh-regions-map-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
      gap: 14px;
      min-height: 420px;
    }

    .mesh-regions-map {
      min-height: 420px;
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.02);
    }

    .mesh-regions-map-list {
      min-height: 420px;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.02);
      overflow: auto;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .mesh-region-repeater-card,
    .mesh-region-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px 14px;
      background: rgba(0, 0, 0, 0.03);
      display: grid;
      gap: 10px;
    }

    .mesh-region-repeater-head,
    .mesh-region-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .mesh-region-repeater-name,
    .mesh-region-card-title {
      font-weight: 700;
      font-size: 15px;
    }

    .mesh-region-card.is-selected {
      border-color: rgba(139, 92, 246, 0.45);
      box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.24) inset;
    }

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

    .mesh-region-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .mesh-region-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
    }

    .mesh-region-pill.scope-confirmed {
      background: rgba(52, 199, 89, 0.14);
      color: #34c759;
    }

    .mesh-region-pill.scope-mixed {
      background: rgba(255, 159, 10, 0.14);
      color: #ff9f0a;
    }

    .mesh-region-pill.scope-transport {
      background: rgba(10, 132, 255, 0.14);
      color: #0a84ff;
    }

    .mesh-region-pill.scope-plain {
      background: rgba(142, 142, 147, 0.16);
      color: #8e8e93;
    }

    .mesh-region-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .mesh-region-counts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .mesh-region-empty {
      border: 1px dashed var(--line);
      border-radius: 16px;
      padding: 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    @media (max-width: 980px) {
      .mesh-regions-map-shell {
        grid-template-columns: 1fr;
      }

      .mesh-regions-map,
      .mesh-regions-map-list {
        min-height: 300px;
      }
    }

    .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: pointer;
      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(auto-fit, minmax(128px, 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);
    }

    .observer-rank-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .observer-rank-summary .summary-card {
      min-width: 0;
    }

    .observer-rank-summary .summary-card span,
    .observer-rank-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .observer-rank-last-message {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
    }

    .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;
	    }

	    #nodeRankMap {
	      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;
	    }

	    .propagation-panel {
	      grid-column: 1 / -1;
	      display: none;
	      flex-direction: column;
	      gap: 16px;
	      padding: 16px;
	      min-height: 0;
	      overflow: auto;
	      -webkit-overflow-scrolling: touch;
	    }

	    .propagation-body {
	      display: grid;
	      gap: 16px;
	      min-width: 0;
	    }

	    .propagation-hero {
	      display: grid;
	      grid-template-columns: minmax(220px, 0.82fr) minmax(260px, 1.18fr);
	      gap: 16px;
	      align-items: stretch;
	      border: 1px solid var(--line);
	      border-radius: 14px;
	      padding: 16px;
	      background:
	        linear-gradient(135deg, rgba(0, 122, 255, 0.14), rgba(52, 199, 89, 0.08)),
	        var(--panel);
	    }

	    .propagation-score-block {
	      display: grid;
	      gap: 8px;
	      align-content: center;
	    }

	    .propagation-eyebrow {
	      font-size: 12px;
	      font-weight: 800;
	      letter-spacing: 0.08em;
	      text-transform: uppercase;
	      color: var(--muted);
	    }

	    .propagation-score {
	      font-size: 72px;
	      line-height: 0.95;
	      font-weight: 900;
	      font-variant-numeric: tabular-nums;
	      color: var(--ink);
	    }

	    .propagation-label-row {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      flex-wrap: wrap;
	    }

	    .propagation-label {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      border-radius: 999px;
	      padding: 5px 10px;
	      font-size: 13px;
	      font-weight: 800;
	      background: rgba(52, 199, 89, 0.14);
	      color: #137333;
	      border: 1px solid rgba(52, 199, 89, 0.28);
	    }

	    .propagation-hero-copy {
	      display: grid;
	      gap: 12px;
	      align-content: center;
	      min-width: 0;
	    }

	    .propagation-summary {
	      font-size: 15px;
	      line-height: 1.45;
	      color: var(--ink);
	    }

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

	    .propagation-component {
	      display: grid;
	      gap: 5px;
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      padding: 10px;
	      background: rgba(255, 255, 255, 0.62);
	      min-width: 0;
	    }

	    .propagation-component span {
	      font-size: 11px;
	      font-weight: 800;
	      text-transform: uppercase;
	      letter-spacing: 0.06em;
	      color: var(--muted);
	    }

	    .propagation-component strong {
	      font-size: 20px;
	      font-variant-numeric: tabular-nums;
	      color: var(--ink);
	    }

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

	    .propagation-stat-grid {
	      grid-template-columns: repeat(4, minmax(0, 1fr));
	    }

	    .propagation-map-band {
	      display: grid;
	      grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.75fr);
	      min-height: 530px;
	      border: 1px solid var(--line);
	      border-radius: 12px;
	      overflow: hidden;
	      background: var(--panel);
	    }

	    .propagation-map-stage {
	      position: relative;
	      min-width: 0;
	      min-height: 530px;
	      background: rgba(0, 122, 255, 0.04);
	    }

	    #propagationMap {
	      width: 100%;
	      height: 100%;
	      min-height: 530px;
	    }

	    .propagation-map-side {
	      padding: 14px;
	      border-left: 1px solid var(--line);
	      display: grid;
	      align-content: start;
	      gap: 12px;
	      min-width: 0;
	      overflow: auto;
	    }

	    .propagation-map-side h3 {
	      margin: 0;
	      font-size: 15px;
	    }

	    .propagation-map-controls {
	      display: flex;
	      gap: 8px;
	      flex-wrap: wrap;
	    }

	    .propagation-map-control {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      font-size: 12px;
	      font-weight: 700;
	      color: var(--ink);
	    }

	    .propagation-map-control input {
	      accent-color: var(--blue);
	    }

	    .propagation-map-legend {
	      display: grid;
	      gap: 6px;
	      font-size: 12px;
	      color: var(--muted);
	    }

	    .propagation-legend-row {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	    }

	    .propagation-legend-line {
	      width: 22px;
	      height: 3px;
	      border-radius: 2px;
	      background: #007aff;
	      flex: 0 0 auto;
	    }

	    .propagation-legend-line.medium { background: #34c759; }
	    .propagation-legend-line.long { background: #ff9f0a; }
	    .propagation-legend-line.extreme { background: #ff3b30; }

	    .propagation-link-list {
	      display: grid;
	      gap: 7px;
	      max-height: 332px;
	      overflow: auto;
	      padding-right: 2px;
	    }

	    .propagation-link-row {
	      display: grid;
	      grid-template-columns: minmax(0, 1fr) auto;
	      gap: 8px;
	      padding: 8px 0;
	      border-bottom: 1px solid var(--line);
	      font-size: 12px;
	    }

	    .propagation-link-row:last-child { border-bottom: 0; }
	    .propagation-link-name {
	      color: var(--ink);
	      font-weight: 700;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }

	    .propagation-link-meta {
	      color: var(--muted);
	      margin-top: 2px;
	    }

	    .propagation-link-distance {
	      color: var(--ink);
	      font-size: 15px;
	      font-weight: 800;
	      font-variant-numeric: tabular-nums;
	      white-space: nowrap;
	    }

	    .propagation-evidence-band {
	      display: grid;
	      grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1.52fr);
	      gap: 16px;
	      align-items: center;
	      border: 1px solid rgba(255, 159, 10, 0.38);
	      border-left: 4px solid #ff9f0a;
	      padding: 14px 16px;
	      background: rgba(255, 159, 10, 0.08);
	    }

	    .propagation-evidence-band[data-state="none"] {
	      border-color: var(--line);
	      border-left-color: rgba(0, 122, 255, 0.55);
	      background: rgba(0, 122, 255, 0.05);
	    }

	    .propagation-evidence-kicker {
	      display: grid;
	      gap: 4px;
	    }

	    .propagation-evidence-kicker span {
	      font-size: 11px;
	      font-weight: 800;
	      letter-spacing: 0.06em;
	      text-transform: uppercase;
	      color: var(--muted);
	    }

	    .propagation-evidence-kicker strong {
	      font-size: 16px;
	      color: var(--ink);
	    }

	    .propagation-evidence-detail {
	      color: var(--ink);
	      line-height: 1.45;
	      min-width: 0;
	    }

	    .propagation-analysis-grid {
	      grid-template-columns: repeat(3, minmax(0, 1fr));
	    }

	    .propagation-support-grid {
	      grid-template-columns: repeat(2, minmax(0, 1fr));
	    }


	    .propagation-hop-chart {
	      --hop-count: 1;
	      display: grid;
	      grid-template-columns: repeat(var(--hop-count), minmax(18px, 1fr));
	      gap: 3px;
	      width: max(100%, calc(var(--hop-count) * 24px));
	      min-width: 100%;
	      overflow: hidden;
	      padding: 4px 0 2px;
	    }

	    .propagation-hop-spread {
	      overflow-x: auto;
	      -webkit-overflow-scrolling: touch;
	    }

	    .propagation-hop-column {
	      display: grid;
	      grid-template-rows: 15px 132px 15px;
	      gap: 4px;
	      min-width: 0;
	    }

	    .propagation-hop-count,
	    .propagation-hop-label {
	      font-size: 10px;
	      line-height: 1;
	      text-align: center;
	      font-variant-numeric: tabular-nums;
	      white-space: nowrap;
	    }

	    .propagation-hop-count {
	      color: var(--ink);
	      font-weight: 800;
	    }

	    .propagation-hop-label {
	      color: var(--muted);
	    }

	    .propagation-hop-track {
	      display: flex;
	      align-items: flex-end;
	      height: 132px;
	      border-bottom: 1px solid rgba(0, 122, 255, 0.24);
	      background: repeating-linear-gradient(
	        to top,
	        transparent 0,
	        transparent 32px,
	        rgba(0, 122, 255, 0.08) 33px
	      );
	    }

	    .propagation-hop-fill {
	      width: 100%;
	      min-height: 0;
	      border-radius: 4px 4px 0 0;
	      background: linear-gradient(180deg, #34c759, #007aff);
	    }

	    .propagation-distribution {
	      display: grid;
	      gap: 8px;
	    }

	    .propagation-distribution-row {
	      display: grid;
	      grid-template-columns: 66px minmax(54px, 1fr) 42px;
	      gap: 8px;
	      align-items: center;
	      font-size: 11px;
	    }

	    .propagation-distribution-label {
	      color: var(--muted);
	      white-space: nowrap;
	      overflow: hidden;
	      text-overflow: ellipsis;
	    }

	    .propagation-distribution-track {
	      display: block;
	      height: 10px;
	      border-radius: 5px;
	      background: rgba(0, 122, 255, 0.14);
	      overflow: hidden;
	      box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.08);
	    }

	    .propagation-distribution-fill {
	      display: block;
	      height: 100%;
	      min-width: 2px;
	      border-radius: inherit;
	      background: linear-gradient(90deg, #007aff, #34c759);
	    }

	    .propagation-distribution-value {
	      color: var(--ink);
	      text-align: right;
	      font-weight: 700;
	      font-variant-numeric: tabular-nums;
	    }

	    .propagation-ducting-state {
	      display: inline-flex;
	      align-items: center;
	      width: fit-content;
	      border: 1px solid rgba(0, 122, 255, 0.25);
	      background: rgba(0, 122, 255, 0.08);
	      color: #0057aa;
	      border-radius: 999px;
	      padding: 4px 8px;
	      font-size: 12px;
	      font-weight: 800;
	    }

	    .propagation-source-grid {
	      display: grid;
	      gap: 8px;
	      font-size: 12px;
	    }

	    .propagation-source-grid a { color: var(--blue); }

	    .propagation-card {
	      border: 1px solid var(--line);
	      border-radius: 12px;
	      padding: 14px;
	      background: var(--panel);
	      display: grid;
	      gap: 10px;
	      align-content: start;
	      min-width: 0;
	    }

	    .propagation-card h3 {
	      margin: 0;
	      font-size: 15px;
	      line-height: 1.25;
	    }

	    .propagation-metrics {
	      display: grid;
	      grid-template-columns: repeat(2, minmax(0, 1fr));
	      gap: 8px;
	    }

	    .propagation-metric {
	      display: grid;
	      gap: 2px;
	      min-width: 0;
	    }

	    .propagation-metric span {
	      font-size: 11px;
	      color: var(--muted);
	      white-space: nowrap;
	      overflow: hidden;
	      text-overflow: ellipsis;
	    }

	    .propagation-metric strong {
	      font-size: 18px;
	      font-variant-numeric: tabular-nums;
	      color: var(--ink);
	      word-break: break-word;
	    }

	    .propagation-wide {
	      grid-column: 1 / -1;
	    }

	    .propagation-timeline {
	      display: grid;
	      grid-template-columns: repeat(12, minmax(48px, 1fr));
	      gap: 8px;
	      overflow-x: auto;
	      padding-bottom: 2px;
	    }

	    .propagation-timeline.is-stable {
	      display: block;
	      overflow: visible;
	      padding-bottom: 0;
	    }

	    .propagation-hour {
	      display: grid;
	      gap: 6px;
	      min-width: 48px;
	      align-content: end;
	    }

	    .propagation-hour-time {
	      font-size: 11px;
	      color: var(--muted);
	      text-align: center;
	    }

	    .propagation-hour-bar {
	      height: 76px;
	      border-radius: 8px;
	      background: rgba(0, 122, 255, 0.08);
	      border: 1px solid rgba(0, 122, 255, 0.14);
	      display: flex;
	      align-items: flex-end;
	      overflow: hidden;
	    }

	    .propagation-hour-fill {
	      width: 100%;
	      min-height: 3px;
	      background: linear-gradient(180deg, #34c759, #007aff);
	      border-radius: 7px 7px 0 0;
	    }

	    .propagation-hour-score {
	      font-size: 11px;
	      font-weight: 800;
	      text-align: center;
	      font-variant-numeric: tabular-nums;
	    }

	    .propagation-stable-window {
	      border-left: 3px solid rgba(52, 199, 89, 0.72);
	      padding: 10px 12px;
	      color: var(--muted);
	      line-height: 1.45;
	      background: rgba(52, 199, 89, 0.06);
	    }

	    .propagation-list {
	      display: grid;
	      gap: 8px;
	      margin: 0;
	      padding: 0;
	      list-style: none;
	    }

	    .propagation-list li {
	      border-left: 3px solid rgba(0, 122, 255, 0.35);
	      padding-left: 10px;
	      color: var(--muted);
	      line-height: 1.35;
	    }

	    .propagation-best-window {
	      display: flex;
	      justify-content: space-between;
	      gap: 12px;
	      align-items: center;
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      padding: 9px 10px;
	    }

	    .propagation-best-window strong {
	      font-variant-numeric: tabular-nums;
	    }

	    body.theme-dark .propagation-hero {
	      background:
	        linear-gradient(135deg, rgba(0, 122, 255, 0.20), rgba(52, 199, 89, 0.12)),
	        var(--panel);
	    }

	    body.theme-dark .propagation-component {
	      background: rgba(255, 255, 255, 0.06);
	    }

	    body.theme-dark .propagation-map-stage {
	      background: rgba(0, 122, 255, 0.08);
	    }

	    @media (max-width: 980px) {
	      .propagation-hero,
	      .propagation-grid,
	      .propagation-map-band,
	      .propagation-evidence-band {
	        grid-template-columns: 1fr;
	      }
	      .propagation-map-side {
	        border-left: 0;
	        border-top: 1px solid var(--line);
	      }
	      .propagation-score {
	        font-size: 56px;
	      }
	    }

	    @media (max-width: 640px) {
	      .propagation-panel {
	        padding: 12px;
	      }
	      .propagation-components,
	      .propagation-metrics {
	        grid-template-columns: 1fr;
	      }
	      .propagation-map-stage,
	      #propagationMap {
	        min-height: 390px;
	      }
	      .propagation-score {
	        font-size: 48px;
	      }
	      .propagation-hop-column {
	        grid-template-rows: 15px 116px 15px;
	      }
	      .propagation-hop-track { height: 116px; }
	    }

	    .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);
	    }
	    .observer-repeaters-card {
	      width: min(760px, 100%);
	    }
	    .observer-repeaters-summary {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 8px;
	      color: var(--muted);
	      font-size: 12px;
	      line-height: 1.4;
	    }
	    .observer-repeaters-list {
	      display: grid;
	      gap: 8px;
	    }
	    .observer-repeater-row {
	      display: grid;
	      grid-template-columns: minmax(0, 1fr) auto;
	      gap: 12px;
	      align-items: center;
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      padding: 10px 12px;
	      background: rgba(15, 23, 42, 0.03);
	    }
	    body.theme-dark .observer-repeater-row {
	      background: rgba(255, 255, 255, 0.04);
	    }
	    .observer-repeater-main {
	      min-width: 0;
	      display: grid;
	      gap: 4px;
	    }
	    .observer-repeater-title {
	      font-weight: 700;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }
	    .observer-repeater-meta,
	    .observer-repeater-candidates {
	      color: var(--muted);
	      font-size: 12px;
	      line-height: 1.35;
	    }
	    .observer-repeater-count {
	      font-weight: 800;
	      color: var(--blue);
	      white-space: nowrap;
	      text-align: right;
	    }
	    .score-breakdown-card {
	      width: min(560px, 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: 12px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 4px;
    }
    .score-breakdown-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
    }
    .score-breakdown-close {
      font-size: 18px;
    }
    .score-breakdown-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    /* Total score hero row */
    .score-total-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border-radius: 14px;
      background: rgba(0,0,0,0.03);
      border: 1px solid var(--line);
    }
    body.theme-dark .score-total-hero { background: rgba(255,255,255,0.05); }
    .score-total-badge {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.18);
      letter-spacing: -1px;
    }
    .score-total-right { flex: 1; min-width: 0; }
    .score-total-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .score-total-bar-wrap {
      width: 100%;
      height: 10px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
    }
    .score-total-bar {
      height: 100%;
      border-radius: 999px;
      transition: width 0.4s ease;
    }
    .score-breakdown-focus {
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }
    .score-breakdown-total { display: none; } /* replaced by hero */

    /* 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: 8px;
    }
    .score-factor {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 0;
      cursor: pointer;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }
    .score-factor:hover {
      border-color: var(--blue);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .score-factor-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .score-factor-label {
      font-weight: 600;
      font-size: 14px;
    }
    .score-factor-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .score-factor-pct {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .score-factor-weight {
      font-size: 11px;
      color: var(--muted);
      background: var(--line);
      border-radius: 6px;
      padding: 2px 6px;
      font-weight: 600;
      white-space: nowrap;
    }
    .score-factor-status { display: none; } /* replaced by colored bar + pct */
    .score-factor-bar-wrap {
      width: 100%;
      height: 10px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 6px;
    }
    .score-factor-bar {
      height: 100%;
      border-radius: 999px;
      transition: width 0.35s ease;
    }
    .score-factor-pts {
      font-size: 11px;
      color: var(--muted);
    }
    .score-factor-detail {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .score-factor-detail-chip {
      background: rgba(0,0,0,0.05);
      border-radius: 5px;
      padding: 1px 6px;
      font-weight: 600;
      color: var(--ink);
    }
    body.theme-dark .score-factor-detail-chip { background: rgba(255,255,255,0.08); }
    .score-factor-tap-hint {
      margin-left: auto;
      font-size: 11px;
      color: var(--muted);
      opacity: 0.6;
    }
    .score-breakdown-note {
      font-size: 0.83rem;
      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);
	    }
    .packet-analysis-grid {
      display: grid;
      gap: 16px;
      margin-top: 14px;
    }
    .packet-analysis-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }
    .packet-analysis-stat {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
      background: rgba(0, 0, 0, 0.02);
    }
    body.theme-dark .packet-analysis-stat {
      background: rgba(255, 255, 255, 0.03);
    }
    .packet-analysis-stat-value {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .packet-analysis-stat-label {
      margin-top: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.7px;
      text-transform: uppercase;
      color: var(--muted);
    }
    .packet-analysis-stat-note {
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .packet-analysis-panel {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      background: rgba(0, 0, 0, 0.015);
    }
    body.theme-dark .packet-analysis-panel {
      background: rgba(255, 255, 255, 0.025);
    }
    .packet-analysis-panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 15px;
      font-weight: 700;
    }
    .packet-analysis-meta {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }
    .packet-analysis-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .packet-analysis-fields {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
    }
    .packet-analysis-distributions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }
    .packet-analysis-bars {
      display: grid;
      gap: 10px;
    }
    .packet-analysis-bar-row {
      display: grid;
      gap: 6px;
    }
    .packet-analysis-bar-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
    }
    .packet-analysis-bar-label {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .packet-analysis-bar-value {
      color: var(--muted);
      white-space: nowrap;
    }
    .packet-analysis-bar-track {
      position: relative;
      height: 10px;
      border-radius: 999px;
      background: rgba(142, 142, 147, 0.18);
      overflow: hidden;
    }
    .packet-analysis-bar-fill {
      position: absolute;
      inset: 0 auto 0 0;
      border-radius: inherit;
    }
    .packet-analysis-hit-list {
      display: grid;
      gap: 10px;
    }
    .packet-analysis-hit {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      display: grid;
      gap: 8px;
    }
    .packet-analysis-hit-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .packet-analysis-hit-title {
      font-weight: 700;
    }
    .packet-analysis-hit-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      color: var(--muted);
      font-size: 12px;
    }
    .packet-analysis-pill-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .packet-analysis-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 4px 10px;
      background: rgba(10, 132, 255, 0.1);
      color: #0a84ff;
      font-size: 11px;
      font-weight: 700;
    }
    .packet-analysis-empty {
      color: var(--muted);
      font-size: 13px;
    }
    .journey-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
	    @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-mesh-regions .sidebar-panel,
    body.view-mesh-regions .content,
    body.view-mesh-regions .analysis-panel,
    body.view-mesh-regions .rank-panel,
    body.view-mesh-regions .meshscore-panel,
    body.view-mesh-regions .rf-panel,
    body.view-mesh-regions .observer-panel,
    body.view-mesh-regions .observer-rank-panel,
    body.view-mesh-regions .node-rank-panel,
    body.view-mesh-regions .room-rank-panel,
    body.view-mesh-regions .rotm-panel,
    body.view-mesh-regions .directory-panel,
    body.view-mesh-regions .why-panel,
    body.view-mesh-regions .terms-panel,
    body.view-mesh-regions .privacy-panel,
    body.view-mesh-regions .forum-panel,
    body.view-mesh-regions .siblings-panel,
    body.view-mesh-regions .wardrive-panel,
    body.view-mesh-regions .repeater-panel { display: none; }
    body.view-mesh-regions .mesh-regions-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-propagation .sidebar-panel,
	    body.view-propagation .content,
	    body.view-propagation .analysis-panel,
	    body.view-propagation .rank-panel,
	    body.view-propagation .meshscore-panel,
	    body.view-propagation .rf-panel,
	    body.view-propagation .observer-panel,
	    body.view-propagation .observer-rank-panel,
	    body.view-propagation .node-rank-panel,
	    body.view-propagation .room-rank-panel,
	    body.view-propagation .rotm-panel,
	    body.view-propagation .directory-panel,
	    body.view-propagation .why-panel,
	    body.view-propagation .terms-panel,
	    body.view-propagation .privacy-panel,
	    body.view-propagation .forum-panel,
	    body.view-propagation .siblings-panel,
	    body.view-propagation .wardrive-panel,
	    body.view-propagation .repeater-panel,
	    body.view-propagation .mesh-live-panel,
	    body.view-propagation .mesh-regions-panel,
	    body.view-propagation .regions-panel,
	    body.view-propagation .radio-amateur-panel,
	    body.view-propagation .auth-panel,
	    body.view-propagation .account-panel,
	    body.view-propagation .advert-schedule-panel,
	    body.view-propagation .rank-v2-panel { display: none; }
	    body.view-propagation .propagation-panel { display: flex; }
	    body.view-propagation {
	      overflow: auto;
	    }
	    body.view-propagation .app {
	      height: auto;
	      min-height: 100vh;
	      overflow: visible;
	    }

	    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: block; }

    body.view-advert-schedule .sidebar-panel,
    body.view-advert-schedule .content,
    body.view-advert-schedule .analysis-panel,
    body.view-advert-schedule .rank-panel,
    body.view-advert-schedule .meshscore-panel,
    body.view-advert-schedule .rf-panel,
    body.view-advert-schedule .observer-panel,
    body.view-advert-schedule .observer-rank-panel,
    body.view-advert-schedule .node-rank-panel,
    body.view-advert-schedule .room-rank-panel,
    body.view-advert-schedule .rotm-panel,
    body.view-advert-schedule .directory-panel,
    body.view-advert-schedule .why-panel,
    body.view-advert-schedule .terms-panel,
    body.view-advert-schedule .privacy-panel,
    body.view-advert-schedule .forum-panel,
    body.view-advert-schedule .siblings-panel,
    body.view-advert-schedule .wardrive-panel,
    body.view-advert-schedule .repeater-panel,
    body.view-advert-schedule .mesh-live-panel,
    body.view-advert-schedule .mesh-regions-panel,
    body.view-advert-schedule .rank-v2-panel { display: none; }
    body.view-advert-schedule .advert-schedule-panel { display: flex; }
    body.view-advert-schedule {
      overflow: auto;
    }
    body.view-advert-schedule .app {
      height: auto;
      min-height: 100vh;
      overflow: visible;
    }

	    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-wardrive .sidebar-panel,
	    body.view-wardrive .content,
	    body.view-wardrive .analysis-panel,
	    body.view-wardrive .rank-panel,
	    body.view-wardrive .meshscore-panel,
	    body.view-wardrive .rf-panel,
	    body.view-wardrive .observer-panel,
	    body.view-wardrive .observer-rank-panel,
	    body.view-wardrive .node-rank-panel,
	    body.view-wardrive .room-rank-panel,
	    body.view-wardrive .rotm-panel,
	    body.view-wardrive .directory-panel,
	    body.view-wardrive .why-panel,
	    body.view-wardrive .terms-panel,
	    body.view-wardrive .privacy-panel,
	    body.view-wardrive .forum-panel,
	    body.view-wardrive .siblings-panel,
	    body.view-wardrive .repeater-panel { display: none; }
	    body.view-wardrive .wardrive-panel { display: flex; }

	    body.view-repeater-coverage .sidebar-panel,
	    body.view-repeater-coverage .content,
	    body.view-repeater-coverage .analysis-panel,
	    body.view-repeater-coverage .rank-panel,
	    body.view-repeater-coverage .meshscore-panel,
	    body.view-repeater-coverage .rf-panel,
	    body.view-repeater-coverage .observer-panel,
	    body.view-repeater-coverage .observer-rank-panel,
	    body.view-repeater-coverage .node-rank-panel,
	    body.view-repeater-coverage .room-rank-panel,
	    body.view-repeater-coverage .rotm-panel,
	    body.view-repeater-coverage .directory-panel,
	    body.view-repeater-coverage .why-panel,
	    body.view-repeater-coverage .terms-panel,
	    body.view-repeater-coverage .privacy-panel,
	    body.view-repeater-coverage .forum-panel,
	    body.view-repeater-coverage .siblings-panel,
	    body.view-repeater-coverage .repeater-panel { display: none; }
	    body.view-repeater-coverage .wardrive-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; }

    /* Regions view: full-width iframe panel embedded inside the SPA shell.
       The iframe target is /regions?embedded=1 — same content as the
       standalone page, just without its own page-bar (SPA topbar wraps it). */
    .regions-panel { display: none; }
    body.view-regions .sidebar-panel,
    body.view-regions .content,
    body.view-regions .analysis-panel,
    body.view-regions .rank-panel,
    body.view-regions .meshscore-panel,
    body.view-regions .rf-panel,
    body.view-regions .observer-panel,
    body.view-regions .observer-rank-panel,
    body.view-regions .node-rank-panel,
    body.view-regions .room-rank-panel,
    body.view-regions .rotm-panel,
    body.view-regions .why-panel,
    body.view-regions .terms-panel,
    body.view-regions .privacy-panel,
    body.view-regions .forum-panel,
    body.view-regions .siblings-panel,
    body.view-regions .mesh-regions-panel,
    body.view-regions .advert-schedule-panel,
    body.view-regions .mesh-live-panel,
    body.view-regions .wardrive-panel,
    body.view-regions .repeater-panel,
    body.view-regions .directory-panel,
    body.view-regions .account-panel,
    body.view-regions .auth-panel { display: none !important; }
    body.view-regions .regions-panel { display: flex; grid-column: 1 / -1; }
    .regions-panel {
      padding: 0;
      overflow: hidden;
      flex-direction: column;
    }
    .regions-panel iframe {
      width: 100%;
      flex: 1 1 auto;
      min-height: calc(100vh - 96px);
      border: 0;
      background: var(--paper);
      border-radius: 18px;
    }

	    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;
    }
    .request-guard-notice {
      display: none;
      margin: 0 18px 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 149, 0, 0.28);
      background: rgba(255, 149, 0, 0.12);
      color: #a85a00;
      font-size: 13px;
      line-height: 1.45;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }
    .request-guard-notice strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }
    .request-guard-notice.warning {
      border-color: rgba(255, 149, 0, 0.3);
      background: rgba(255, 149, 0, 0.12);
      color: #a85a00;
    }
    .request-guard-notice.blocked {
      border-color: rgba(255, 59, 48, 0.28);
      background: rgba(255, 59, 48, 0.11);
      color: #b42318;
    }
    body.theme-dark .request-guard-notice.warning {
      border-color: rgba(255, 214, 102, 0.26);
      background: rgba(255, 149, 0, 0.16);
      color: #ffd08a;
    }
    body.theme-dark .request-guard-notice.blocked {
      border-color: rgba(255, 105, 97, 0.28);
      background: rgba(255, 59, 48, 0.16);
      color: #ffb4ab;
    }
	    .feed-pause-notice {
	      display: none;
	      position: fixed;
      top: 74px;
      left: 18px;
      z-index: 1800;
      max-width: min(420px, calc(100vw - 36px));
	      padding: 12px 14px;
	      border-radius: 14px;
	      border: 1px solid #ff8a82;
	      background: #fff3f2;
	      color: #b42318;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
      align-items: flex-start;
      gap: 12px;
    }
    .feed-pause-notice strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }
    .feed-pause-notice span {
      display: block;
      font-size: 13px;
      line-height: 1.45;
    }
    .feed-pause-notice-copy {
      min-width: 0;
      flex: 1 1 auto;
    }
    .feed-pause-notice-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ff3b30;
      box-shadow: 0 0 0 5px rgba(255, 59, 48, 0.16);
      margin-top: 4px;
      flex: 0 0 auto;
    }
    .feed-pause-notice .btn {
      flex: 0 0 auto;
      margin-left: auto;
      white-space: nowrap;
    }
	    body.theme-dark .feed-pause-notice {
	      border-color: #8f2c27;
	      background: #2a1110;
	      color: #ffd3cf;
	    }
    @media (max-width: 720px) {
      .feed-pause-notice {
        top: 66px;
        left: 12px;
        max-width: calc(100vw - 24px);
        padding: 12px;
        gap: 10px;
      }
      .feed-pause-notice .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
      }
      .feed-pause-notice {
        flex-wrap: wrap;
      }
    }
    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;
    }
    .channel-box-activity {
      gap: 16px;
    }
    .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-activity-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .channel-activity-head-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .channel-activity-toggle {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.78);
      cursor: pointer;
      min-width: 0;
    }
    .channel-activity-toggle-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .channel-activity-toggle-copy strong {
      font-size: 12px;
      line-height: 1.2;
      color: var(--ink);
    }
    .channel-activity-toggle-copy span {
      font-size: 11px;
      line-height: 1.25;
      color: var(--muted);
    }
    .channel-activity-toggle .switch {
      gap: 8px;
      flex: 0 0 auto;
    }
    .channel-activity-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0, 122, 255, 0.16);
      background: rgba(0, 122, 255, 0.08);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .channel-activity-chip strong {
      color: var(--ink);
    }
    .channel-activity-chart-shell {
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background:
        linear-gradient(180deg, rgba(0, 122, 255, 0.06), rgba(255, 255, 255, 0.92) 38%),
        rgba(255, 255, 255, 0.94);
      padding: 12px 14px 8px;
      overflow: hidden;
    }
    .channel-activity-chart {
      display: block;
      width: 100%;
      height: 260px;
    }
    .channel-activity-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .channel-activity-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.8);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      min-width: 0;
      cursor: default;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .channel-activity-legend-item.is-active {
      transform: translateY(-1px);
      border-color: rgba(0, 122, 255, 0.3);
      background: rgba(0, 122, 255, 0.1);
    }
    .channel-activity-swatch {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex: 0 0 auto;
    }
    .channel-activity-list-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .channel-activity-list-head strong {
      font-size: 14px;
      letter-spacing: 0.02em;
    }
    .channel-activity-row {
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }
    .channel-activity-row.is-active {
      border-color: rgba(0, 122, 255, 0.28);
      background:
        linear-gradient(120deg, rgba(0, 122, 255, 0.12), rgba(255, 255, 255, 0.95)),
        rgba(16, 24, 40, 0.04);
      transform: translateY(-1px);
    }
    .channel-activity-badges {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .channel-activity-badges .badge {
      text-transform: capitalize;
    }
    .channel-activity-empty {
      padding: 18px;
      border-radius: 14px;
      border: 1px dashed rgba(15, 23, 42, 0.14);
      color: var(--muted);
      background: rgba(255, 255, 255, 0.55);
    }
    .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 .channel-activity-chip {
      border-color: rgba(120, 160, 255, 0.2);
      background: rgba(99, 162, 255, 0.12);
    }
    body.theme-dark .channel-activity-toggle {
      border-color: rgba(120, 160, 255, 0.2);
      background: rgba(12, 18, 28, 0.72);
    }
    body.theme-dark .channel-activity-chart-shell {
      border-color: rgba(120, 160, 255, 0.2);
      background:
        linear-gradient(180deg, rgba(99, 162, 255, 0.14), rgba(12, 18, 28, 0.92) 36%),
        rgba(12, 18, 28, 0.92);
    }
    body.theme-dark .channel-activity-legend-item {
      border-color: rgba(120, 160, 255, 0.16);
      background: rgba(12, 18, 28, 0.72);
    }
    body.theme-dark .channel-activity-legend-item.is-active {
      border-color: rgba(120, 160, 255, 0.28);
      background: rgba(99, 162, 255, 0.14);
    }
    body.theme-dark .channel-activity-row.is-active {
      border-color: rgba(120, 160, 255, 0.28);
      background:
        linear-gradient(120deg, rgba(99, 162, 255, 0.16), rgba(12, 18, 28, 0.88)),
        rgba(12, 18, 28, 0.7);
    }
    body.theme-dark .channel-activity-empty {
      border-color: rgba(120, 160, 255, 0.18);
      background: rgba(12, 18, 28, 0.62);
    }
    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;
      }
      .channel-activity-meta {
        justify-content: flex-start;
      }
      .channel-activity-head-actions {
        justify-content: flex-start;
      }
      .channel-activity-chart-shell {
        padding: 10px 10px 6px;
      }
      .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;
      }
      .channel-activity-list-head {
        align-items: stretch;
      }
    }
    .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; }

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

    .rank-v2-panel {
      grid-column: 1 / -1;
      display: none;
      flex-direction: column;
      min-height: 0;
      overflow: auto;
    }
    .rank-v2-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
      flex-shrink: 0;
    }
    .rank-v2-toolbar label { font-size: 13px; color: var(--muted); }
    .rank-v2-draw-panel {
      padding: 12px 16px;
      display: none;
      flex-direction: column;
      gap: 8px;
      border-bottom: 1px solid var(--line);
      background: var(--surface);
      flex-shrink: 0;
    }
    .rank-v2-draw-panel.active { display: flex; }
    #rankV2DrawMap {
      height: 320px;
      border-radius: 12px;
      border: 1px solid var(--line);
      overflow: hidden;
    }
    .rank-v2-draw-hint { font-size: 13px; color: var(--muted); }
    .rank-v2-draw-actions { display: flex; gap: 8px; margin-top: 4px; }
    .rank-v2-poly-status { font-size: 12px; font-weight: 600; color: var(--blue); }
    .rank-v2-body { flex: 1; overflow: auto; padding: 16px; }
    .rank-v2-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 16px;
    }
    .rank-v2-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .rank-v2-card-header {
      padding: 11px 14px 10px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface);
    }
    .rank-v2-card-metric {
      margin-left: auto;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      background: var(--line);
      border-radius: 6px;
      padding: 2px 7px;
    }
    .rank-v2-row {
      display: grid;
      grid-template-columns: 20px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
    }
    .rank-v2-row:last-child { border-bottom: none; }
    .rank-v2-row:hover { background: rgba(15, 23, 42, 0.04); }
    body.theme-dark .rank-v2-row:hover { background: rgba(226, 232, 240, 0.08); }
    .rank-v2-row:focus-visible {
      outline: 2px solid rgba(0, 122, 255, 0.5);
      outline-offset: 2px;
      border-radius: 8px;
    }
    .rank-v2-row-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-align: right;
      line-height: 1;
    }
    .rank-v2-row-num.gold { color: #f5a623; }
    .rank-v2-row-num.silver { color: #9b9b9b; }
    .rank-v2-row-num.bronze { color: #c07a3e; }
    .rank-v2-row-main {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .rank-v2-row-name {
      font-weight: 600;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .rank-v2-row-name-text {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rank-v2-row-flag {
      font-size: 14px;
      line-height: 1;
      transform: translateY(-0.5px);
    }
    .rank-v2-row-bar-wrap {
      height: 4px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
    }
    .rank-v2-row-bar { height: 100%; border-radius: 999px; transition: width 0.35s ease; }
    .rank-v2-row-value {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
      min-width: 40px;
      text-align: right;
    }
    .rank-v2-empty {
      padding: 24px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }
    .rank-v2-loading {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 60px 20px;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
    }
    .chip-beta {
      background: rgba(255,149,0,0.15);
      color: #ff9500;
      border: 1px solid rgba(255,149,0,0.35);
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      vertical-align: middle;
      letter-spacing: 0.3px;
    }
    .rank-v2-custom-region-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--blue);
      font-weight: 600;
      padding: 6px 16px;
      background: rgba(0,122,255,0.06);
      border-bottom: 1px solid rgba(0,122,255,0.15);
      flex-shrink: 0;
    }
    @media (max-width: 680px) {
      .rank-v2-grid { grid-template-columns: 1fr; }
    }

    .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-list-section {
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }
    .account-list-heading {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 2px 2px 0;
    }
    .account-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .account-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(15, 23, 42, 0.05);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.1;
    }
    .account-chip.good {
      border-color: rgba(52, 199, 89, 0.35);
      color: #34c759;
      background: rgba(52, 199, 89, 0.08);
    }
    .account-chip.warn {
      border-color: rgba(255, 204, 0, 0.35);
      color: #ffcc00;
      background: rgba(255, 204, 0, 0.08);
    }
    .account-chip.bad {
      border-color: rgba(255, 59, 48, 0.35);
      color: #ff6b6b;
      background: rgba(255, 59, 48, 0.08);
    }
    .account-note {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 204, 0, 0.2);
      background: rgba(255, 204, 0, 0.08);
      color: var(--ink);
      font-size: 12px;
      line-height: 1.45;
    }
    .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);
    }
    body.theme-dark .account-chip {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.06);
    }
    @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;
	    }
	    .wardrive-panel {
	      grid-column: 1 / -1;
	      display: none;
	      min-height: 0;
	      overflow: hidden;
	    }
		    .wardrive-body {
		      display: grid;
		      grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
		      grid-template-rows: minmax(620px, 1fr) auto;
	      grid-template-areas:
	        "map side"
	        "details side";
	      gap: 14px;
	      padding: 16px;
	      min-height: 0;
	      height: 100%;
	      overflow: hidden;
	    }
	    .wardrive-map-stage,
	    .wardrive-details,
	    .wardrive-side {
	      display: flex;
	      flex-direction: column;
	      gap: 12px;
	      min-height: 0;
	    }
	    .wardrive-map-stage {
	      grid-area: map;
	      position: relative;
	      min-height: 0;
	      height: 100%;
	      overflow: hidden;
	      isolation: isolate;
	      z-index: 0;
	    }
	    .wardrive-details {
	      grid-area: details;
	      display: flex;
	      position: relative;
	      z-index: 1;
	    }
	    .wardrive-side {
	      grid-area: side;
	      position: relative;
	      z-index: 1;
	      min-width: 0;
	    }
	    .wardrive-modal[hidden] {
	      display: none !important;
	    }
	    .wardrive-modal {
	      position: fixed;
	      inset: 0;
	      z-index: 1400;
	      display: grid;
	      place-items: center;
	      padding: 24px;
	      overflow-y: auto;
	      overscroll-behavior: contain;
	    }
	    body.wardrive-modal-open {
	      overflow: hidden;
	    }
	    .wardrive-modal-backdrop {
	      position: absolute;
	      inset: 0;
	      background: rgba(4, 10, 18, 0.68);
	      backdrop-filter: blur(3px);
	    }
	    .wardrive-modal-card {
	      position: relative;
	      width: min(720px, calc(100vw - 32px));
	      max-height: min(82vh, 920px);
	      overflow: auto;
	      overscroll-behavior: contain;
	      border-radius: 22px;
	      border: 1px solid var(--line);
	      background: var(--panel);
	      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.36);
	      padding: 22px;
	    }
	    .wardrive-modal-close {
	      position: absolute;
	      top: 12px;
	      right: 12px;
	      width: 36px;
	      height: 36px;
	      border-radius: 999px;
	      border: 1px solid var(--line);
	      background: rgba(255, 255, 255, 0.04);
	      color: var(--ink);
	      font-size: 22px;
	      line-height: 1;
	      cursor: pointer;
	    }
	    .wardrive-modal-close:hover {
	      background: rgba(255, 255, 255, 0.1);
	    }
	    .wardrive-modal-body {
	      min-height: 0;
	    }
	    .repeater-coverage-modal[hidden] {
	      display: none !important;
	    }
	    .repeater-coverage-modal {
	      position: fixed;
	      inset: 0;
	      z-index: 1450;
	      display: grid;
	      place-items: center;
	      padding: 24px;
	      overflow-y: auto;
	      overscroll-behavior: contain;
	    }
	    body.repeater-coverage-modal-open {
	      overflow: hidden;
	    }
	    .repeater-coverage-modal-card {
	      position: relative;
	      width: min(1180px, calc(100vw - 32px));
	      max-height: min(88vh, 980px);
	      overflow: hidden;
	      overscroll-behavior: contain;
	      border-radius: 24px;
	      border: 1px solid var(--line);
	      background: var(--panel);
	      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
	      padding: 18px;
	      display: grid;
	      gap: 14px;
	    }
	    .repeater-coverage-modal-header {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 12px;
	      padding-right: 52px;
	    }
	    .repeater-coverage-modal-title {
	      display: grid;
	      gap: 6px;
	      min-width: 0;
	    }
	    .repeater-coverage-modal-title strong {
	      font-size: 18px;
	      line-height: 1.2;
	    }
	    .repeater-coverage-modal-title span {
	      font-size: 12px;
	      color: var(--muted);
	      line-height: 1.45;
	    }
	    .repeater-coverage-modal-layout {
	      min-height: 0;
	      display: grid;
	      grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.95fr);
	      gap: 14px;
	      align-items: stretch;
	    }
	    .repeater-coverage-modal-map-stage,
	    .repeater-coverage-modal-side {
	      min-height: 0;
	      display: flex;
	      flex-direction: column;
	      gap: 12px;
	    }
	    .repeater-coverage-modal-map-stage {
	      overflow: hidden;
	      border-radius: 18px;
	      border: 1px solid var(--line);
	      background: rgba(0, 0, 0, 0.08);
	    }
	    #repeaterCoverageModalMap {
	      width: 100%;
	      min-height: 520px;
	      height: 100%;
	    }
	    .repeater-coverage-modal-side {
	      overflow: auto;
	      padding-right: 2px;
	    }
	    .repeater-coverage-side {
	      display: none;
	      flex-direction: column;
	      gap: 12px;
	      min-height: 0;
	      position: relative;
	      z-index: 1;
	      min-width: 0;
	    }
	    body.view-repeater-coverage .wardrive-body {
	      grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.92fr);
	      grid-template-rows: minmax(540px, 78vh);
	      grid-template-areas: "map coverage";
	      align-items: stretch;
	    }
	    body.view-repeater-coverage .wardrive-side,
	    body.view-repeater-coverage .wardrive-details {
	      display: none;
	    }
	    body.view-repeater-coverage .repeater-coverage-side {
	      display: flex;
	      grid-area: coverage;
	    }
	    .repeater-coverage-summary {
	      display: grid;
	      gap: 8px;
	      padding: 14px 16px;
	      border-radius: 16px;
	      border: 1px solid var(--line);
	      background: rgba(10, 132, 255, 0.05);
	    }
	    .repeater-coverage-summary strong {
	      font-size: 15px;
	      line-height: 1.35;
	    }
	    .repeater-coverage-summary span {
	      font-size: 12px;
	      color: var(--muted);
	      line-height: 1.5;
	    }
	    .repeater-coverage-legend {
	      display: flex;
	      gap: 8px;
	      flex-wrap: wrap;
	    }
	    .repeater-coverage-chip {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      padding: 6px 10px;
	      border-radius: 999px;
	      border: 1px solid var(--line);
	      background: rgba(255, 255, 255, 0.03);
	      font-size: 12px;
	      color: var(--ink);
	    }
	    .repeater-coverage-chip-dot {
	      width: 10px;
	      height: 10px;
	      border-radius: 999px;
	      display: inline-block;
	    }
	    .wardrive-summary {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	      gap: 10px;
	    }
	    .wardrive-summary-card {
	      border: 1px solid var(--line);
	      border-radius: 14px;
	      padding: 12px 14px;
	      background: rgba(0, 122, 255, 0.05);
	      display: grid;
	      gap: 6px;
	    }
	    .wardrive-summary-card strong {
	      font-size: 22px;
	      line-height: 1;
	    }
	    .wardrive-summary-card span {
	      font-size: 12px;
	      color: var(--muted);
	    }
	    .wardrive-selection {
	      display: grid;
	      gap: 10px;
	    }
	    .wardrive-selection-card {
	      display: grid;
	      gap: 10px;
	      padding: 14px;
	      border-radius: 16px;
	      border: 1px solid var(--line);
	      background: rgba(0, 122, 255, 0.04);
	    }
	    .wardrive-selection-top {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	      flex-wrap: wrap;
	    }
	    .wardrive-selection-title {
	      font-size: 14px;
	      font-weight: 800;
	    }
	    .wardrive-selection-subtitle {
	      font-size: 12px;
	      color: var(--muted);
	      line-height: 1.45;
	    }
	    .wardrive-selection-grid {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	      gap: 10px;
	    }
	    .wardrive-selection-metric {
	      border: 1px solid var(--line);
	      border-radius: 12px;
	      padding: 10px 12px;
	      background: rgba(0, 0, 0, 0.03);
	      display: grid;
	      gap: 4px;
	    }
	    .wardrive-selection-metric strong {
	      font-size: 18px;
	      line-height: 1;
	    }
	    .wardrive-selection-metric span {
	      font-size: 11px;
	      color: var(--muted);
	    }
	    .wardrive-selection-list {
	      display: grid;
	      gap: 8px;
	    }
	    .wardrive-selection-row {
	      display: grid;
	      gap: 6px;
	      padding: 10px 12px;
	      border-radius: 12px;
	      border: 1px solid var(--line);
	      background: rgba(0, 0, 0, 0.03);
	      cursor: pointer;
	    }
	    .wardrive-selection-row:hover {
	      border-color: var(--blue);
	      background: rgba(0, 122, 255, 0.06);
	    }
	    .wardrive-selection-row.selected {
	      border-color: rgba(0, 122, 255, 0.4);
	      background: rgba(0, 122, 255, 0.09);
	    }
	    .wardrive-selection-row-title {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 8px;
	      flex-wrap: wrap;
	      font-size: 13px;
	      font-weight: 700;
	    }
	    .wardrive-selection-links {
	      display: flex;
	      gap: 8px;
	      flex-wrap: wrap;
	      font-size: 12px;
	    }
	    .wardrive-selection-links a {
	      color: var(--blue);
	      text-decoration: underline;
	    }
	    .wardrive-tone {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      padding: 4px 8px;
	      border-radius: 999px;
	      font-size: 11px;
	      font-weight: 800;
	      letter-spacing: 0.02em;
	      text-transform: uppercase;
	    }
	    .wardrive-tone.good {
	      background: rgba(52, 199, 89, 0.15);
	      color: var(--green-dark);
	    }
	    .wardrive-tone.weak {
	      background: rgba(255, 159, 10, 0.16);
	      color: #9a5c00;
	    }
	    .wardrive-tone.poor {
	      background: rgba(255, 59, 48, 0.14);
	      color: #b42318;
	    }
	    .wardrive-tone.none {
	      background: rgba(60, 60, 67, 0.1);
	      color: var(--muted);
	    }
	    .wardrive-note {
	      font-size: 12px;
	      color: var(--muted);
	      line-height: 1.5;
	    }
	    .wardrive-note.wardrive-note-callout {
	      padding: 12px 14px;
	      border-radius: 14px;
	      border: 1px solid rgba(255, 149, 0, 0.26);
	      background: rgba(255, 149, 0, 0.12);
	      color: #a85a00;
	      font-size: 14px;
	      font-weight: 600;
	      line-height: 1.55;
	      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	    }
	    .wardrive-note.wardrive-note-callout strong {
	      color: inherit;
	    }
	    .wardrive-side-callout {
	      font-size: 13px;
	      line-height: 1.45;
	      box-shadow: none;
	    }
	    .wardrive-callout-more {
	      margin-top: 8px;
	    }
	    .wardrive-callout-more summary {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      cursor: pointer;
	      color: inherit;
	      font-size: 12px;
	      font-weight: 700;
	      text-decoration: underline;
	      list-style: none;
	    }
	    .wardrive-callout-more summary::-webkit-details-marker {
	      display: none;
	    }
	    .wardrive-callout-more[open] summary {
	      margin-bottom: 8px;
	    }
	    .wardrive-callout-more summary::after {
	      content: "+";
	      font-size: 13px;
	      line-height: 1;
	      text-decoration: none;
	    }
	    .wardrive-callout-more[open] summary::after {
	      content: "-";
	    }
	    .wardrive-callout-helper {
	      display: grid;
	      gap: 8px;
	      font-size: 12px;
	      font-weight: 500;
	      line-height: 1.55;
	    }
	    .wardrive-callout-helper a {
	      color: inherit;
	      font-weight: 700;
	      text-decoration: underline;
	    }
	    .wardrive-callout-links,
	    .wardrive-callout-asks {
	      margin: 0;
	      padding-left: 18px;
	      display: grid;
	      gap: 4px;
	    }
	    body.theme-dark .wardrive-note.wardrive-note-callout {
	      border-color: rgba(255, 214, 102, 0.24);
	      background: rgba(255, 149, 0, 0.18);
	      color: #ffd08a;
	    }
		    #wardriveMap {
		      flex: 1;
		      width: 100%;
		      height: 100%;
		      min-height: 620px;
	      border-radius: 18px;
	      overflow: hidden;
	      border: 1px solid var(--line);
	      background: rgba(0, 0, 0, 0.08);
	      position: relative;
	      z-index: 0;
	    }
      .wardrive-map-pane {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .wardrive-map-pane[hidden] {
        display: none !important;
      }
      .wardrive-map-pane .leaflet-container,
      .wardrive-map-pane .maplibregl-map {
        width: 100%;
        height: 100%;
      }
      .wardrive-map-pane .maplibregl-canvas {
        cursor: default;
      }
      .wardrive-overview-popup .maplibregl-popup-content {
        border-radius: 16px;
        border: 1px solid var(--line);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
        padding: 10px 12px;
      }
      .wardrive-overview-popup .maplibregl-popup-close-button {
        color: var(--muted);
        font-size: 16px;
        padding: 6px 8px;
      }
      body.theme-dark .wardrive-overview-popup .maplibregl-popup-content {
        background: var(--panel);
        color: var(--ink);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
      }
      body.theme-dark .wardrive-overview-popup .maplibregl-popup-tip {
        border-top-color: var(--panel);
        border-bottom-color: var(--panel);
      }
	    .wardrive-list {
	      border: 1px solid var(--line);
	      border-radius: 18px;
	      overflow: auto;
	      min-height: 0;
	      background: rgba(0, 0, 0, 0.03);
	      flex: 1;
	    }
	    .wardrive-cell {
	      padding: 12px 14px;
	      border-bottom: 1px solid var(--line);
	      display: grid;
	      gap: 6px;
	      cursor: pointer;
	    }
	    .wardrive-cell:last-child {
	      border-bottom: 0;
	    }
	    .wardrive-cell:hover {
	      background: rgba(0, 122, 255, 0.06);
	    }
	    .wardrive-cell-top {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	      flex-wrap: wrap;
	    }
	    .wardrive-cell-title {
	      font-weight: 700;
	      font-size: 13px;
	    }
	    .wardrive-cell-meta {
	      font-size: 12px;
	      color: var(--muted);
	      line-height: 1.4;
	    }
	    .wardrive-pill-row {
	      display: flex;
	      gap: 8px;
	      flex-wrap: wrap;
	    }
	    .wardrive-pill {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      padding: 4px 9px;
	      border-radius: 999px;
	      font-size: 11px;
	      font-weight: 700;
	      letter-spacing: 0.01em;
	      border: 1px solid var(--line);
	      background: rgba(60, 60, 67, 0.06);
	    }
	    .wardrive-pill.claimed {
	      background: rgba(52, 199, 89, 0.12);
	      color: var(--green-dark);
	    }
	    .wardrive-pill.history {
	      background: rgba(0, 122, 255, 0.1);
	      color: var(--blue-dark);
	    }
	    .wardrive-pill.score {
	      background: rgba(255, 159, 10, 0.14);
	      color: #8a5a00;
	    }
	    .wardrive-pill.owner {
	      background: rgba(60, 60, 67, 0.1);
	      color: var(--text);
	    }
	    .wardrive-cell-actions {
	      display: inline-flex;
	      align-items: center;
	      gap: 8px;
	      flex-wrap: wrap;
	    }
	    .wardrive-inline-btn {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      border: 1px solid var(--line);
	      background: rgba(60, 60, 67, 0.06);
	      color: var(--text);
	      border-radius: 999px;
	      padding: 5px 10px;
	      font-size: 11px;
	      font-weight: 700;
	      cursor: pointer;
	    }
	    .wardrive-inline-btn:hover {
	      background: rgba(0, 122, 255, 0.08);
	    }
	    .wardrive-device-list {
	      display: grid;
	      gap: 8px;
	      margin-top: 4px;
	      padding-top: 8px;
	      border-top: 1px solid var(--line);
	    }
      .wardrive-device-list[hidden] {
        display: none !important;
      }
	    .wardrive-device-row {
	      display: grid;
	      gap: 4px;
	      padding: 10px 12px;
	      border: 1px solid var(--line);
	      border-radius: 14px;
	      background: rgba(0, 0, 0, 0.03);
	      cursor: pointer;
	    }
	    .wardrive-device-row:hover {
	      background: rgba(0, 122, 255, 0.06);
	    }
	    .wardrive-contributor-list {
	      display: grid;
	      gap: 8px;
	      margin-top: 4px;
	    }
	    .wardrive-contributor-row {
	      display: grid;
	      gap: 4px;
	      padding: 8px 10px;
	      border-radius: 12px;
	      border: 1px solid var(--line);
	      background: rgba(0, 0, 0, 0.03);
	    }
	    .wardrive-link-label-wrap {
	      background: transparent;
	      border: 0;
	    }
	    .wardrive-link-label {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      padding: 4px 8px;
	      border-radius: 999px;
	      border: 1px solid rgba(255, 149, 0, 0.28);
	      background: rgba(15, 23, 42, 0.86);
	      color: #ffd08a;
	      font-size: 11px;
	      font-weight: 700;
	      line-height: 1.2;
	      white-space: nowrap;
	      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
	    }
	    .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; }
    }

    body.view-radio-amateur .sidebar-panel,
    body.view-radio-amateur .content,
    body.view-radio-amateur .analysis-panel,
    body.view-radio-amateur .rank-panel,
    body.view-radio-amateur .meshscore-panel,
    body.view-radio-amateur .rf-panel,
    body.view-radio-amateur .observer-panel,
    body.view-radio-amateur .observer-rank-panel,
    body.view-radio-amateur .node-rank-panel,
    body.view-radio-amateur .room-rank-panel,
    body.view-radio-amateur .rotm-panel,
    body.view-radio-amateur .directory-panel,
    body.view-radio-amateur .why-panel,
    body.view-radio-amateur .terms-panel,
    body.view-radio-amateur .privacy-panel,
    body.view-radio-amateur .forum-panel,
    body.view-radio-amateur .siblings-panel,
    body.view-radio-amateur .wardrive-panel,
    body.view-radio-amateur .repeater-panel,
    body.view-radio-amateur .mesh-live-panel,
    body.view-radio-amateur .mesh-regions-panel,
    body.view-radio-amateur .advert-schedule-panel,
    body.view-radio-amateur .rank-v2-panel {
      display: none !important;
    }

    body.view-radio-amateur .radio-amateur-panel {
      display: flex !important;
      grid-column: 1 / -1;
    }

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

    .radio-amateur-body {
      display: grid;
      gap: 16px;
      padding: 16px;
      min-height: 0;
      height: 100%;
      overflow: auto;
    }

    .radio-amateur-hero,
    .radio-amateur-directory {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
      gap: 16px;
      align-items: start;
    }

    .radio-amateur-video,
    .radio-amateur-intro,
    .radio-amateur-map-card,
    .radio-amateur-form-card,
    .radio-amateur-list-section {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }

    .radio-amateur-video {
      overflow: hidden;
      aspect-ratio: 16 / 9;
      background: #0b1116;
    }

    .radio-amateur-video iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .radio-amateur-intro,
    .radio-amateur-form-card,
    .radio-amateur-list-section {
      padding: 16px;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .radio-amateur-intro h3,
    .radio-amateur-form-card h3,
    .radio-amateur-list-section h3 {
      margin: 0;
      font-size: 16px;
    }

    .radio-amateur-intro p,
    .radio-amateur-list-section p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
    }

    .radio-amateur-steps {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .radio-amateur-steps li {
      border-left: 3px solid rgba(0, 122, 255, 0.35);
      padding: 2px 0 2px 10px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
    }

    .radio-amateur-map-card {
      min-height: 520px;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(360px, 1fr);
    }

    .radio-amateur-side {
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .radio-amateur-map-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    .radio-amateur-map-head strong {
      font-size: 14px;
    }

    #radioAmateurMap {
      min-height: 420px;
      width: 100%;
    }

    .radio-amateur-form {
      display: grid;
      gap: 10px;
    }

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

    .radio-amateur-field {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .radio-amateur-field.radio-amateur-wide {
      grid-column: 1 / -1;
    }

    .radio-amateur-field label,
    .radio-amateur-check {
      font-size: 12px;
      color: var(--muted);
    }

    .radio-amateur-field input,
    .radio-amateur-field select,
    .radio-amateur-field textarea {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: var(--panel);
      color: var(--ink);
      font: 12px "IBM Plex Mono", monospace;
      min-width: 0;
    }

    .radio-amateur-field textarea {
      min-height: 86px;
      resize: vertical;
      font-family: "Space Grotesk", system-ui, sans-serif;
      line-height: 1.45;
    }

    .radio-amateur-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
    }

    .radio-amateur-check input {
      width: 16px;
      height: 16px;
    }

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

    .radio-amateur-status.ok { color: #1f8a4c; }
    .radio-amateur-status.error { color: #c2410c; }

    .radio-amateur-login {
      border: 1px dashed rgba(0, 122, 255, 0.35);
      border-radius: 8px;
      padding: 12px;
      display: none;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 13px;
    }

    .radio-amateur-list {
      display: grid;
      gap: 10px;
    }

    .radio-amateur-club {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      display: grid;
      gap: 8px;
      background: rgba(0, 0, 0, 0.015);
    }

    .radio-amateur-club-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
    }

    .radio-amateur-club-title {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .radio-amateur-club-title strong {
      font-size: 14px;
      overflow-wrap: anywhere;
    }

    .radio-amateur-meta,
    .radio-amateur-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .radio-amateur-links a,
    .radio-amateur-links button {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      color: var(--blue-dark);
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }

    .radio-amateur-club p {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
    }

    .radio-amateur-empty {
      border: 1px dashed var(--line);
      border-radius: 8px;
      padding: 14px;
      color: var(--muted);
      font-size: 13px;
    }

    body.theme-dark .radio-amateur-video,
    body.theme-dark .radio-amateur-intro,
    body.theme-dark .radio-amateur-map-card,
    body.theme-dark .radio-amateur-form-card,
    body.theme-dark .radio-amateur-list-section,
    body.theme-dark .radio-amateur-club {
      background: var(--panel);
      border-color: var(--line);
      color: var(--ink);
    }

    body.theme-dark .radio-amateur-links a,
    body.theme-dark .radio-amateur-links button {
      background: rgba(231, 238, 251, 0.06);
      color: #ffffff;
      border-color: rgba(231, 238, 251, 0.16);
    }

    @media (max-width: 960px) {
      .radio-amateur-hero,
      .radio-amateur-directory,
      .radio-amateur-grid {
        grid-template-columns: 1fr;
      }
      .radio-amateur-map-card {
        min-height: 420px;
      }
    }

    .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; }
      @supports (height: 100dvh) {
        body { height: 100dvh; }
      }
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: 100vh;
        padding: 8px;
        width: 100%;
        max-width: 100%;
      }
      @supports (height: 100dvh) {
        .app { height: 100dvh; }
      }
      .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: 1810;
        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%; }
	      .msg-bubble-stack .bubble { max-width: 100%; }
      .message .meta { font-size: 11px; }
      .msg-footer { font-size: 11px; gap: 8px; }
      .msg-footer .msg-observers,
      .msg-footer .msg-hops,
      .msg-footer .msg-confidence {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        touch-action: manipulation;
      }
      .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; }
      html body.view-wardrive,
      html body.view-repeater-coverage {
        height: auto;
        min-height: 100vh;
        overflow: auto;
      }
      body.view-wardrive .app,
      body.view-repeater-coverage .app {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        align-content: start;
      }
      .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; }
      body.view-rank .rank-panel,
      body.view-rank .rank-body,
      body.view-rank .rank-list,
      body.view-rank .rank-scroll,
      body.view-rank #rankList,
      body.view-rank .rank-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      body.view-rank .rank-item {
        overflow-wrap: anywhere;
      }
      .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; }
      .observer-rank-summary {
        gap: 6px;
        padding: 8px 10px;
      }
      .observer-rank-summary .summary-card {
        padding: 7px 8px;
        gap: 2px;
      }
      .observer-rank-summary .summary-card span {
        font-size: 10px;
      }
      .observer-rank-summary .summary-card strong {
        font-size: 13px;
      }
	      .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;
	        overflow-x: hidden;
	        overscroll-behavior: contain;
	        -webkit-overflow-scrolling: touch;
	        touch-action: pan-y;
	        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; }
      .observer-rank-panel .rank-item {
        padding: 8px 10px;
        gap: 6px;
      }
      .observer-rank-panel .rank-search {
        margin-left: 10px;
        margin-right: 10px;
      }
	      .observer-rank-last-message {
	        font-size: 11px;
	      }
	      body.view-wardrive .wardrive-panel,
	      body.view-repeater-coverage .wardrive-panel {
	        overflow: visible;
	      }
	      .wardrive-body {
	        grid-template-columns: 1fr;
	        grid-template-areas:
	          "map"
	          "details"
	          "side";
	        padding: 12px;
	        gap: 12px;
	        height: auto;
          overflow: visible;
	      }
	      .wardrive-map-stage,
	      .wardrive-details,
	      .wardrive-side {
	        gap: 10px;
	      }
		      .wardrive-map-stage {
		        height: min(72vh, 640px);
		        min-height: 420px;
	        overflow: hidden;
	        isolation: isolate;
	      }
	      #wardriveMap {
	        flex: none;
	        width: 100%;
	        height: 100%;
	        min-height: 0;
	        max-height: none;
	      }
	      .wardrive-details {
	        display: grid;
	      }
	      .wardrive-side {
	        position: relative;
	        z-index: 1;
	      }
	      .wardrive-modal {
	        display: flex;
	        align-items: flex-start;
	        justify-content: center;
	        padding: max(12px, calc(var(--safe-top) + 12px)) 12px max(12px, calc(var(--safe-bottom) + 12px));
	      }
	      .wardrive-modal-card {
	        width: min(100vw - 16px, 720px);
	        max-height: min(88vh, 920px);
	        padding: 18px;
	      }
	      .repeater-coverage-modal {
	        display: flex;
	        align-items: flex-start;
	        justify-content: center;
	        padding: max(12px, calc(var(--safe-top) + 12px)) 12px max(12px, calc(var(--safe-bottom) + 12px));
	      }
	      .repeater-coverage-modal-card {
	        width: min(100vw - 16px, 1180px);
	        max-height: min(92vh, 980px);
	        padding: 16px;
	      }
	      .repeater-coverage-modal-layout {
	        grid-template-columns: 1fr;
	      }
	      #repeaterCoverageModalMap {
	        min-height: 320px;
	      }
	      body.view-repeater-coverage .wardrive-body {
	        grid-template-columns: 1fr;
	        grid-template-areas:
	          "map"
	          "coverage";
	        padding: 12px;
	        gap: 12px;
	        height: auto;
	      }
	      body.view-repeater-coverage .repeater-coverage-side {
	        min-height: 0;
	      }
		      .wardrive-list {
		        overflow: visible;
		      }
		      .wardrive-summary {
		        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; }

      body:not(.view-channels):not(.route-open):not(.map-expanded-active):not(.wardrive-modal-open):not(.repeater-coverage-modal-open) {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.view-channels) .app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        grid-template-rows: auto auto;
        align-content: start;
        overflow: visible;
      }
      body:not(.view-channels) .panel,
      body:not(.view-channels) .rank-panel,
      body:not(.view-channels) .observer-rank-panel,
      body:not(.view-channels) .node-rank-panel,
      body:not(.view-channels) .room-rank-panel,
	      body:not(.view-channels) .mesh-live-panel,
	      body:not(.view-channels) .propagation-panel,
	      body:not(.view-channels) .mesh-regions-panel,
      body:not(.view-channels) .directory-panel,
      body:not(.view-channels) .rank-v2-panel,
      body:not(.view-channels) .observer-panel,
      body:not(.view-channels) .rotm-panel,
      body:not(.view-channels) .forum-panel,
      body:not(.view-channels) .radio-amateur-panel,
      body:not(.view-channels) .why-panel,
      body:not(.view-channels) .terms-panel,
      body:not(.view-channels) .privacy-panel,
      body:not(.view-channels) .siblings-panel,
      body:not(.view-channels) .advert-schedule-panel {
        height: auto;
        max-height: none;
        overflow: visible;
      }
      body:not(.view-channels) .directory-content,
      body:not(.view-channels) .mesh-regions-body,
      body:not(.view-channels) .rotm-body,
      body:not(.view-channels) .forum-body,
      body:not(.view-channels) .forum-layout,
      body:not(.view-channels) .radio-amateur-body,
      body:not(.view-channels) .why-body,
      body:not(.view-channels) .legal-body,
      body:not(.view-channels) .observer-body {
        height: auto;
        max-height: none;
        overflow: visible;
      }
      body.view-regions .regions-panel {
        overflow: visible;
      }
      body.view-regions .regions-panel iframe {
        min-height: calc(100dvh - 80px);
      }
      body.view-meshscore .meshscore-panel {
        min-height: 0;
        overflow: visible;
      }
      body.view-meshscore .meshscore-body {
        height: auto;
        min-height: 0;
        overflow: visible;
      }
      body.view-meshscore .meshscore-layout,
      body.view-meshscore .meshscore-right {
        min-height: 0;
        overflow: visible;
      }
      body.view-meshscore #meshFlowMap {
        display: block;
        height: clamp(360px, 66vh, 620px);
        min-height: 360px;
        max-height: none;
        width: 100%;
      }
      @supports (height: 1svh) {
        body.view-meshscore #meshFlowMap {
          height: clamp(360px, 66svh, 620px);
        }
      }
    }
    .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;
    }
    .advert-schedule-panel {
      display: none;
      grid-column: 1 / -1;
      flex-direction: column;
      gap: 18px;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .advert-schedule-shell {
      display: grid;
      gap: 18px;
      width: 100%;
    }
    .advert-schedule-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .advert-schedule-card {
      background: rgba(10, 96, 209, 0.06);
      border: 1px solid rgba(10, 96, 209, 0.14);
      border-radius: 18px;
      padding: 16px 18px;
      display: grid;
      gap: 6px;
    }
    body.theme-dark .advert-schedule-card {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .advert-schedule-card strong {
      font-size: 26px;
      line-height: 1;
    }
    .advert-schedule-note {
      color: var(--muted);
      line-height: 1.5;
    }
    .advert-schedule-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 18px;
    }
    .advert-schedule-chart {
      display: grid;
      gap: 10px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    body.theme-dark .advert-schedule-chart {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .advert-schedule-row {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 120px;
      gap: 12px;
      align-items: center;
    }
    .advert-schedule-hour {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
    }
    .advert-schedule-bar-shell {
      position: relative;
      height: 16px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(15, 23, 42, 0.08);
    }
    body.theme-dark .advert-schedule-bar-shell {
      background: rgba(255, 255, 255, 0.08);
    }
    .advert-schedule-bar {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
    }
    .advert-schedule-value {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    .advert-schedule-chart-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: baseline;
    }
    .advert-schedule-chart-head strong {
      font-size: 18px;
    }
    .advert-schedule-empty {
      padding: 24px 18px;
      border-radius: 18px;
      background: rgba(15, 23, 42, 0.04);
      color: var(--muted);
    }
    .advert-schedule-top-list {
      display: grid;
      gap: 10px;
    }
    .advert-schedule-top-row {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(92px, auto));
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.04);
    }
    body.theme-dark .advert-schedule-top-row {
      background: rgba(255, 255, 255, 0.04);
    }
    .advert-schedule-top-row strong {
      display: block;
      font-size: 15px;
      line-height: 1.2;
    }
    .advert-schedule-top-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .advert-schedule-top-metric {
      text-align: right;
    }
    .advert-schedule-top-metric strong {
      font-size: 18px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .advert-schedule-top-metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }
    @media (max-width: 720px) {
      .advert-schedule-row {
        grid-template-columns: 46px minmax(0, 1fr) 92px;
        gap: 8px;
      }
      .advert-schedule-chart {
        padding: 14px;
      }
      .advert-schedule-top-row {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(88px, 1fr));
      }
    }